Understanding Local vs Global State in Flutter

1. Introduction

1.1 Goal of the Tutorial

In this tutorial, we aim to demystify the concept of local and global state in Flutter. Flutter, known for its high efficiency in creating beautiful UIs, also offers effective state management solutions to handle data across your app.

1.2 Learning Outcomes

By the end of this tutorial, you'll have a thorough understanding of:

• What local and global states are in Flutter
• The differences between these two states
• When to use each type of state

1.3 Prerequisites

Basic knowledge of Dart and Flutter is expected. Familiarity with the concept of state management would be beneficial but not mandatory.

2. Step-by-Step Guide

2.1 Understanding Local State

A local state refers to data that a widget manages on its own and only affects the widget itself, or its immediate children. For instance, the current value of a text field is a local state because it only affects the text field widget itself.

// A simple counter app with local state
class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0; // This is a local state

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

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text('Count is $_count'),
      onPressed: _incrementCounter,
    );
  }
}

In this example, _count is a local state to Counter widget. The state is only available within this widget and doesn't affect any other parts of the app.

2.2 Understanding Global State

A global state is data that can be accessed from anywhere in the app. This could be user preferences, login information, or data that many widgets need to access.

// A simple user info with global state
class UserProvider extends ChangeNotifier {
  String _name;

  UserProvider(this._name);

  void setName(String name) {
    _name = name;
    notifyListeners();
  }

  String get name => _name;
}

In this example, _name is a global state. It can be accessed anywhere in the app using Provider or Consumer widgets.

2.3 When to use which

Use a local state when the data is only relevant to a single widget or its immediate children. On the other hand, use a global state when the data needs to be accessed by multiple widgets or throughout the app.

3. Code Examples

3.1 Local State Example

// A simple increment counter with local state
class LocalCounter extends StatefulWidget {
  @override
  _LocalCounterState createState() => _LocalCounterState();
}

class _LocalCounterState extends State<LocalCounter> {
  int _count = 0; // Local state

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

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text('Count is $_count'),
      onPressed: _incrementCounter,
    );
  }
}

3.2 Global State Example

// A simple user info with global state
class GlobalUserInfo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<UserProvider>(
      builder: (context, user, child) {
        return Text('User name is ${user.name}');
      },
    );
  }
}

4. Summary

In this tutorial, you've learned about local and global states in Flutter, their differences, and when to use each of them.

For further study, check out official Flutter documentation on state management, and explore packages like Provider and Riverpod for managing global states.

5. Practice Exercises

1. Create a simple counter app with a reset button. This will test your understanding of local state.

2. Create a simple app that shows user's name and allows to change it. Use Provider package for this. This will test your understanding of global state.

3. Create a more complex app that combines both local and global states. This could be an app that shows a list of items and allows to add, remove, or edit items.

Remember, practice is key to mastering any concept. Happy coding!