State Management in Flutter

State Management in Flutter

Flutter offers several state management solutions. Let's explore the most popular ones and understand when to use each.

State Management Options

  ┌─────────────────────────────────────────────────┐
  │         State Management Solutions              │
  ├─────────────────────────────────────────────────┤
  │                                                  │
  │  setState()         → Built-in, simple          │
  │  Provider           → Recommended by Flutter    │
  │  Riverpod           → Provider, but better      │
  │  BLoC               → Business Logic Component  │
  │  GetX               → All-in-one solution       │
  │                                                  │
  │  Simple ──────────────────────────→ Complex     │
  │                                                  │
  └─────────────────────────────────────────────────┘

Provider Example

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

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

class Counter extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

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

  void decrement() {
    _count--;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Provider Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Consumer<Counter>(
                builder: (context, counter, child) {
                  return Text(
                    'Count: ${counter.count}',
                    style: TextStyle(fontSize: 32),
                  );
                },
              ),
              SizedBox(height: 20),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: () => context.read<Counter>().increment(),
                    child: Icon(Icons.add),
                  ),
                  SizedBox(width: 20),
                  ElevatedButton(
                    onPressed: () => context.read<Counter>().decrement(),
                    child: Icon(Icons.remove),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

When to Use Each Solution

• setState: For simple, single-widget state changes
• Provider: For medium-complexity apps, recommended starting point
• Riverpod: For complex apps, compile-safe, no context needed
• BLoC: For large enterprise apps with complex business logic