Advanced Usage of Built-in Flutter State Management Options

Flutter, Google’s UI toolkit, provides several built-in options for state management that cater to different scales of application complexity. While basic usage of setState, ValueNotifier, and InheritedWidget can handle simple scenarios, more advanced applications demand deeper insights and techniques for efficient state management. This post explores advanced ways to utilize these built-in Flutter state management options.

Overview of Built-in Flutter State Management Options

Flutter offers a few basic, yet powerful, state management techniques out of the box:

setState: Simple state management within a StatefulWidget.
ValueNotifier: Holds a single value and notifies listeners when the value changes.
InheritedWidget: Provides data to descendant widgets, allowing for efficient data sharing.

Advanced Techniques for `setState`

The setState function is primarily used for simple UI updates. However, its advanced usages involve ensuring performance and predictability in complex scenarios.

1. Optimize UI Updates with Selective Redraws

Instead of redrawing the entire widget on every state change, be specific about what parts of the UI need to update. Using conditional checks and smaller, isolated StatefulWidget instances can prevent unnecessary rebuilds.


class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State {
  String _title = 'Initial Title';
  String _content = 'Initial Content';

  void updateTitle(String newTitle) {
    setState(() {
      _title = newTitle;
    });
  }

  void updateContent(String newContent) {
    setState(() {
      _content = newContent;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TitleWidget(title: _title, onTitleChanged: updateTitle),
        ContentWidget(content: _content, onContentChanged: updateContent),
      ],
    );
  }
}

class TitleWidget extends StatefulWidget {
  final String title;
  final Function(String) onTitleChanged;

  TitleWidget({Key? key, required this.title, required this.onTitleChanged}) : super(key: key);

  @override
  _TitleWidgetState createState() => _TitleWidgetState();
}

class _TitleWidgetState extends State {
  final _titleController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _titleController.text = widget.title;
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _titleController,
      onChanged: (text) {
        widget.onTitleChanged(text);
      },
      decoration: InputDecoration(labelText: 'Title'),
    );
  }
}

class ContentWidget extends StatefulWidget {
  final String content;
  final Function(String) onContentChanged;

  ContentWidget({Key? key, required this.content, required this.onContentChanged}) : super(key: key);

  @override
  _ContentWidgetState createState() => _ContentWidgetState();
}

class _ContentWidgetState extends State {
  final _contentController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _contentController.text = widget.content;
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _contentController,
      onChanged: (text) {
        widget.onContentChanged(text);
      },
      decoration: InputDecoration(labelText: 'Content'),
    );
  }
}

2. Use `Key` to Preserve Widget State

When dynamically changing the order or type of widgets, Flutter might recreate them, losing the state. Assigning a Key to widgets helps Flutter identify and reuse them.


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Key Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  List boxes = [
    ColoredBox(key: UniqueKey(), color: Colors.red, height: 100, width: 100),
    ColoredBox(key: UniqueKey(), color: Colors.green, height: 100, width: 100),
    ColoredBox(key: UniqueKey(), color: Colors.blue, height: 100, width: 100),
  ];

  void swapBoxes() {
    setState(() {
      final temp = boxes[0];
      boxes[0] = boxes[1];
      boxes[1] = temp;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Key Example')),
      body: Row(children: boxes),
      floatingActionButton: FloatingActionButton(
        onPressed: swapBoxes,
        child: Icon(Icons.swap_horiz),
      ),
    );
  }
}

3. Immutability with `setState`

Ensuring the state objects are immutable can make the state changes more predictable and easier to debug. Always create a new instance of your state object when using setState.


class MyState {
  final int count;

  MyState({required this.count});

  MyState copyWith({int? count}) {
    return MyState(count: count ?? this.count);
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State {
  MyState _state = MyState(count: 0);

  void incrementCount() {
    setState(() {
      _state = _state.copyWith(count: _state.count + 1);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Immutable State Example')),
      body: Center(child: Text('Count: ${_state.count}')),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementCount,
        child: Icon(Icons.add),
      ),
    );
  }
}

Advanced Techniques for `ValueNotifier`

ValueNotifier is useful for managing a single state value. Advanced usage involves efficiently listening for changes and composing multiple ValueNotifier instances.

1. Compose Multiple `ValueNotifier` Instances

Combine multiple ValueNotifier instances to create a more complex derived state using ValueListenableBuilder.


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ValueNotifier Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  final ValueNotifier counter1 = ValueNotifier(0);
  final ValueNotifier counter2 = ValueNotifier(0);

  @override
  void dispose() {
    counter1.dispose();
    counter2.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ValueNotifier Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ValueListenableBuilder(
              valueListenable: counter1,
              builder: (context, value, child) {
                return Text('Counter 1: $value');
              },
            ),
            ValueListenableBuilder(
              valueListenable: counter2,
              builder: (context, value, child) {
                return Text('Counter 2: $value');
              },
            ),
            ValueListenableBuilder(
              valueListenable: counter1,
              builder: (context, value1, child) {
                return ValueListenableBuilder(
                  valueListenable: counter2,
                  builder: (context, value2, child) {
                    return Text('Sum: ${value1 + value2}');
                  },
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {
              counter1.value++;
            },
            tooltip: 'Increment Counter 1',
            child: Icon(Icons.exposure_plus_1),
          ),
          SizedBox(width: 10),
          FloatingActionButton(
            onPressed: () {
              counter2.value++;
            },
            tooltip: 'Increment Counter 2',
            child: Icon(Icons.exposure_plus_1),
          ),
        ],
      ),
    );
  }
}

2. Using `ValueNotifier` with Animation

Animate UI elements based on changes to a ValueNotifier‘s value for smooth and dynamic transitions.


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ValueNotifier Animation',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State with SingleTickerProviderStateMixin {
  final ValueNotifier _opacity = ValueNotifier(1.0);
  late AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );

    _animationController.addListener(() {
      _opacity.value = _animationController.value;
    });
  }

  @override
  void dispose() {
    _opacity.dispose();
    _animationController.dispose();
    super.dispose();
  }

  void toggleOpacity() {
    if (_animationController.isCompleted) {
      _animationController.reverse();
    } else {
      _animationController.forward();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ValueNotifier Animation')),
      body: Center(
        child: ValueListenableBuilder(
          valueListenable: _opacity,
          builder: (context, opacity, child) {
            return Opacity(
              opacity: opacity,
              child: Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: toggleOpacity,
        child: Icon(Icons.opacity),
      ),
    );
  }
}

Advanced Techniques for `InheritedWidget`

InheritedWidget allows efficient data propagation down the widget tree. Advanced usage focuses on efficient updates and scoped data sharing.

1. Efficiently Update `InheritedWidget` Using `updateShouldNotify`

Implement updateShouldNotify to compare the old and new states to decide whether dependent widgets should rebuild.


class DataModel {
  final String message;
  DataModel({required this.message});

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is DataModel && runtimeType == other.runtimeType && message == other.message;

  @override
  int get hashCode => message.hashCode;
}

class MyInheritedWidget extends InheritedWidget {
  final DataModel data;

  MyInheritedWidget({
    Key? key,
    required this.data,
    required Widget child,
  }) : super(key: key, child: child);

  @override
  bool updateShouldNotify(MyInheritedWidget oldWidget) {
    return oldWidget.data != data;
  }

  static DataModel of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType()!.data;
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = MyInheritedWidget.of(context);
    return Text(data.message);
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  DataModel _data = DataModel(message: "Initial Message");

  void updateMessage(String newMessage) {
    setState(() {
      _data = DataModel(message: newMessage);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("InheritedWidget Example")),
      body: MyInheritedWidget(
        data: _data,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              MyWidget(),
              TextField(
                onChanged: (text) {
                  updateMessage(text);
                },
                decoration: InputDecoration(labelText: 'Update Message'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

2. Use Scoped `InheritedWidget` Instances

Nest multiple InheritedWidget instances to provide different data contexts to different parts of the widget tree.


class User {
  final String name;
  final int age;

  User({required this.name, required this.age});
}

class AppSettings {
  final String theme;

  AppSettings({required this.theme});
}

class UserInheritedWidget extends InheritedWidget {
  final User user;

  UserInheritedWidget({Key? key, required this.user, required Widget child})
      : super(key: key, child: child);

  static User of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType()!.user;
  }

  @override
  bool updateShouldNotify(UserInheritedWidget oldWidget) {
    return oldWidget.user != user;
  }
}

class AppSettingsInheritedWidget extends InheritedWidget {
  final AppSettings settings;

  AppSettingsInheritedWidget({Key? key, required this.settings, required Widget child})
      : super(key: key, child: child);

  static AppSettings of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType()!.settings;
  }

  @override
  bool updateShouldNotify(AppSettingsInheritedWidget oldWidget) {
    return oldWidget.settings != settings;
  }
}

class UserInfoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final user = UserInheritedWidget.of(context);
    return Text('User: ${user.name}, Age: ${user.age}');
  }
}

class AppThemeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final settings = AppSettingsInheritedWidget.of(context);
    return Text('Theme: ${settings.theme}');
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final user = User(name: "John Doe", age: 30);
    final appSettings = AppSettings(theme: "Dark");

    return Scaffold(
      appBar: AppBar(title: Text("Scoped InheritedWidget Example")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            UserInheritedWidget(
              user: user,
              child: UserInfoWidget(),
            ),
            AppSettingsInheritedWidget(
              settings: appSettings,
              child: AppThemeWidget(),
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion

Understanding and leveraging these advanced techniques can significantly improve the efficiency and maintainability of your Flutter applications. While more complex state management solutions exist, these built-in tools, when used correctly, provide a solid foundation for many projects. By optimizing UI updates with setState, composing reactive states with ValueNotifier, and efficiently propagating data with InheritedWidget, developers can create robust and performant Flutter applications.

Beyond This Article: Your Next Discovery Awaits

Utilizing dart:ffi to Interact with C Libraries in Flutter

Using GraphQL with Flutter for Efficient Data Fetching

Using the Provider Package to Facilitate the MVVM Architecture in Flutter

Working with InheritedWidget and InheritedNotifier in Flutter

Using GetX for Reactive State Management in Flutter

Profiling Flutter Applications to Identify and Resolve Performance Issues

Overview of Built-in Flutter State Management Options

Advanced Techniques for setState

1. Optimize UI Updates with Selective Redraws

2. Use Key to Preserve Widget State

3. Immutability with setState

Advanced Techniques for ValueNotifier

1. Compose Multiple ValueNotifier Instances

2. Using ValueNotifier with Animation

Advanced Techniques for InheritedWidget

1. Efficiently Update InheritedWidget Using updateShouldNotify

2. Use Scoped InheritedWidget Instances