free geoip
43

Dart State Management Using Provider in Android Studio

Learning state management is a crucial step in building efficient Flutter apps. One of the most popular and beginner-friendly solutions…

Learning state management is a crucial step in building efficient Flutter apps. One of the most popular and beginner-friendly solutions is using the Provider package. In this guide, we’ll walk through how to manage state in Dart using Provider in Android Studio.

Dart State Management Using Provider

This guide is aimed at beginners using Android Studio and looking to understand state management with Provider in Flutter (Dart language).

Step 1: Add Provider to pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.1.1

Step 2: Create a ChangeNotifier Class

Create a file counter_provider.dart:

import 'package:flutter/foundation.dart';

class CounterProvider with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

Step 3: Setup Provider in main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_provider.dart';
import 'home_page.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => CounterProvider(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

Step 4: Create UI to Use the Provider

In home_page.dart:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_provider.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<CounterProvider>(context);

    return Scaffold(
      appBar: AppBar(title: Text("Provider State Management")),
      body: Center(
        child: Text(
          'Counter: ${counter.count}',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

Learn More

You can explore more about Provider on the official Flutter documentation.

Using Provider makes your Flutter app cleaner, scalable, and more maintainable, especially for beginners learning Dart in Android Studio.

rysasahrial

Leave a Reply

Your email address will not be published. Required fields are marked *