How to Manage State in Flutter with Dart

Managing state in Flutter with Dart is one of the most important concepts every mobile developer must master. Whether you’re building a small widget or a large-scale application, state management ensures your UI reacts correctly to data changes. In this tutorial, we’ll learn the simplest way to manage state using StatefulWidget, and also introduce Provider, a widely-used state management library. This guide is intended for Android Studio users.

1. Using StatefulWidget (Basic State Management)

Let’s create a simple counter app that increments a number when a button is pressed.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});
  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Simple State Example')),
      body: Center(child: Text('Counter: $_counter')),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

2. Using Provider (Advanced State Management)

Add provider dependency in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.1.0

Create a CounterProvider:

import 'package:flutter/foundation.dart';

class CounterProvider with ChangeNotifier {
  int _count = 0;
  int get count => _count;

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

Then, wrap your app with ChangeNotifierProvider:

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: CounterPage());
  }
}

class CounterPage extends StatelessWidget {
  const CounterPage({super.key});
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<CounterProvider>(context);
    return Scaffold(
      appBar: AppBar(title: const Text('Provider Example')),
      body: Center(child: Text('Counter: ${counter.count}')),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Provider helps separate your business logic from UI, making your app more maintainable and testable. To dive deeper into Flutter state management techniques, you can explore the official Flutter documentation.