Flutter State Management: A Beginner's Guide

March 27, 2025

STATE MANAGEMENT

State management is one of the most crucial aspects of Flutter app development. Whether you are building a small application or a large-scale app, managing the state effectively ensures a smooth user experience and maintainable code. In this guide, we'll explore different ways to manage state in Flutter, from basic setState to advanced solutions like Provider and Riverpod.

What is State in Flutter?

State in Flutter refers to any data that can change in your application. This could be user inputs, API responses, animations, or UI changes. State is typically classified into:

Ephemeral (Local) State – State that affects only a small part of the UI, such as the state of a toggle button.
App-Wide State – State that needs to be shared across multiple widgets or screens, such as authentication status or theme settings.

1. Managing State with `setState`

setState is the simplest way to manage local state in Flutter. It is ideal for UI components where the state does not need to be shared beyond a single widget


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

class _CounterScreenState extends State {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter App')),
      body: Center(
        child: Text('Counter: $_counter', style: TextStyle(fontSize: 24)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

2. Using `InheritedWidget`

InheritedWidget allows state to be passed down the widget tree efficiently. It is a foundational approach used by frameworks like Provider.


class CounterProvider extends InheritedWidget {
  final int counter;
  final Function() increment;

  CounterProvider({required this.counter, required this.increment, required Widget child})
      : super(child: child);

  static CounterProvider? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType();
  }

  @override
  bool updateShouldNotify(CounterProvider oldWidget) => counter != oldWidget.counter;
}

3. Managing State with Provider
Provider is a widely used state management solution in Flutter. It simplifies state sharing across the app and avoids unnecessary widget rebuilds.
Steps to Use Provider:
Add dependency in pubspec.yaml:


  
  
dependencies:
  provider: ^6.0.5
  








  
   Create a ChangeNotifier model:



  
  
class CounterModel extends ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

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









 Wrap your app with ChangeNotifierProvider:


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





 Use Provider in widgets:


  
  
class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterModel = Provider.of<CounterModel>(context);
    
    return Scaffold(
      appBar: AppBar(title: Text('Provider Example')),
      body: Center(
        child: Text('Counter: ${counterModel.counter}', style: TextStyle(fontSize: 24)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counterModel.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

Tech Village