How do you manage state in Flutter using Dart?

In Flutter, “state” simply means data that can change over time — for example, the text in a form field, the list of items in a cart, or whether a button is pressed. Managing state efficiently ensures that the UI always reflects the latest data.

1. Conceptually — What is State Management #

Whenever something changes in the app (like a user input, network response, or animation), Flutter needs to rebuild the UI to reflect that new data.
State management is how we store, update, and share that data across widgets.

2. Common Approaches in Flutter #

✅ a) setState() — Local State #

This is the simplest form and works well for small widgets where state doesn’t need to be shared outside.

Example:

class CounterScreen extends StatefulWidget {
  @override
  _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State {
  int count = 0;

  void increment() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(onPressed: increment, child: Text('Increment')),
      ],
    );
  }
}

Here, setState() rebuilds only this widget when the state (count) changes.

Where I used this:
In smaller screens like login forms, counters, or toggles — where the state doesn’t affect other widgets.

Challenge:
When the app grows, setState() becomes hard to manage because you can’t easily share data between widgets.

✅ b) Provider — Shared/Global State #

Provider is a lightweight and recommended approach by the Flutter team for scalable apps.

Example:

class CounterModel extends ChangeNotifier {
  int count = 0;
  void increment() {
    count++;
    notifyListeners();
  }
}

// Main
ChangeNotifierProvider(
  create: (_) => CounterModel(),
  child: CounterApp(),
);

And in the UI:

Consumer(
  builder: (context, counter, child) {
    return Text('Count: ${counter.count}');
  },
);

Where I used this:
In an e-commerce app where I needed to share the cart count between multiple screens.

Challenge:
If the app state grows complex (many models and providers), managing dependencies can get tricky.

✅ c) Riverpod — Improved Provider #

Riverpod is like a refined version of Provider, safer and easier to test.

Example:

final counterProvider = StateProvider((ref) => 0);

Consumer(
  builder: (context, ref, child) {
    final count = ref.watch(counterProvider);
    return Text('Count: $count');
  },
);

Advantage:
No need for BuildContext to access state, works great in async scenarios.

Where I applied:
In a Flutter project with authentication and API calls — Riverpod made it easier to manage async states (loading, success, error).

✅ d) Bloc / Cubit — Reactive State Management #

BLoC (Business Logic Component) separates business logic from UI — perfect for large-scale apps.

Example (Cubit):

class CounterCubit extends Cubit {
  CounterCubit() : super(0);
  void increment() => emit(state + 1);
}

UI:

BlocBuilder(
  builder: (context, count) => Text('$count'),
);

Where I used it:
In a chat app, where I needed to manage messages, users, and UI states independently.

Challenge:
Setup is heavier than Provider; beginners find it verbose.

3. Real-world scenario #

In one of my Flutter projects (an employee management app),

• I started with setState for simple forms.
• Later, as features grew (authentication, profile, attendance), I moved to Provider.
• Eventually, for scalability, I refactored to Riverpod since it provided better dependency handling and less boilerplate.

4. Limitations #

• setState() → limited to local widgets.
• Provider → can get messy with too many nested providers.
• Bloc → more boilerplate, needs architecture discipline.
• Riverpod → new developers find it a bit abstract at first.

5. Alternatives #

Besides these, some other popular state management tools are:

• GetX → Simple syntax, less boilerplate, reactive updates.
• MobX → Reactive, observable-based approach.
• Redux → Used for very large apps with predictable state updates (but too verbose for small apps).

Summary #

In Flutter, state management is about keeping your UI in sync with changing data.
For small apps — setState() is enough.
For medium projects — Provider or Riverpod gives structure.
For large-scale or enterprise apps — BLoC or Cubit is preferred.