The Project | About Us | Contribute | Donations | License

HOME

In this section, we will explore two fundamental concepts in Flutter's state management: setState and InheritedWidget. Understanding these concepts is crucial for managing the state of your Flutter applications effectively.

What is State Management?

State management refers to the way you handle the state of your application. The state is any data that can change over time, such as user inputs, fetched data, or the current screen. Proper state management ensures that your UI updates correctly in response to state changes.

setState

setState is the simplest way to manage state in Flutter. It is used within StatefulWidgets to notify the framework that the internal state of the widget has changed, and the widget should be rebuilt.

How to Use setState

Create a StatefulWidget: Start by creating a StatefulWidget and its corresponding State class.
Define State Variables: Define the variables that represent the state of your widget.
Update State with setState: Use the setState method to update the state variables and trigger a rebuild of the widget.

Example

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

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

class _CounterScreenState extends State<CounterScreen> {
  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),
      ),
    );
  }
}

Explanation

StatefulWidget: CounterScreen is a StatefulWidget.
State Class: _CounterScreenState is the State class where the state variables and setState method are defined.
State Variable: _counter is the state variable.
setState Method: _incrementCounter method uses setState to update _counter and trigger a rebuild.

InheritedWidget

InheritedWidget is a more advanced way to manage state. It allows you to propagate state down the widget tree efficiently and is often used for sharing state across multiple widgets.

How to Use InheritedWidget

Create an InheritedWidget: Define a class that extends InheritedWidget.
Provide State: Use the InheritedWidget to provide state to its descendants.
Access State: Use the of method to access the state from the InheritedWidget.

Example

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

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

  CounterProvider({Key? key, required Widget child})
      : counter = 0,
        incrementCounter = () {},
        super(key: key, child: child);

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

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

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final provider = CounterProvider.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App with InheritedWidget'),
      ),
      body: Center(
        child: Text(
          'Counter: ${provider?.counter}',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: provider?.incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

Explanation

InheritedWidget: CounterProvider extends InheritedWidget and provides the state.
State Variables: counter and incrementCounter are the state variables.
updateShouldNotify: Determines when the widget should notify its descendants of state changes.
of Method: Used to access the state from the CounterProvider.

Practical Exercise

Task

Create a StatefulWidget that displays a counter.
Use setState to increment the counter when a button is pressed.
Create an InheritedWidget to provide the counter value and increment function.
Access the counter value and increment function from the InheritedWidget in a separate widget.

Solution

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

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

  CounterProvider({Key? key, required Widget child})
      : counter = 0,
        incrementCounter = () {},
        super(key: key, child: child);

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

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

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final provider = CounterProvider.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App with InheritedWidget'),
      ),
      body: Center(
        child: Text(
          'Counter: ${provider?.counter}',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: provider?.incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

Common Mistakes

Forgetting to Call setState: Always call setState when updating state variables in a StatefulWidget.
Not Using updateShouldNotify: Ensure updateShouldNotify returns true when the state changes in an InheritedWidget.

Conclusion

In this section, we covered the basics of state management using setState and InheritedWidget. setState is suitable for simple state management within a single widget, while InheritedWidget is useful for sharing state across multiple widgets. Understanding these concepts is essential for building responsive and maintainable Flutter applications. In the next section, we will explore the Provider package, which offers a more scalable approach to state management.

setState and InheritedWidget

What is State Management?

setState

How to Use setState

Example

Explanation

InheritedWidget

How to Use InheritedWidget

Example

Explanation

Practical Exercise

Task

Solution

Common Mistakes

Conclusion

Flutter Development Course

Module 1: Introduction to Flutter

Module 2: Dart Programming Basics

Module 3: Flutter Widgets

Module 4: State Management

Module 5: Navigation and Routing

Module 6: Networking and APIs

Module 7: Persistence and Storage

Module 8: Advanced Flutter Concepts

Module 9: Testing and Debugging

Module 10: Deployment and Maintenance

Module 11: Flutter for Web and Desktop