Skip to content

Flutter's Way State Management by using built-in Flutter classes. Using the InheritedWidget, InheritedModel, ValueNotifier, ValueListenableBuilder to selectively rebuild individual widgets for performance

License

Notifications You must be signed in to change notification settings

JediPixels/flutters_way_state_management

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Flutter's Way State Management

Flutter's Way State Management by using built-in Flutter classes.

Video Tutorial

YouTube Video

Blog

What is Covered

In this project, you are going to take a look at:

  • How to use InheritedWidget to pass data from a parent (ancestor) widget to child (descendant) widgets in the widget tree
  • How to use InheritedModel to selectively rebuild individual widgets for performance
  • How to use ValueNotifier and ValueListenableBuilder to selectively rebuild individual widgets for performance

InheritedWidget

The InheritedWidget is immutable and allows child widgets to access data (state) above in the widget tree

  1. Create a class that extends InheritedWidget
  2. Add fields to contain data
  3. Add the of() method to access the InheritedWidget from child widgets
  4. Add the updateShouldNotify() method to notify (via Flutter framework) widgets to rebuild if the data changed
class InheritedProvider extends InheritedWidget {
  final int numberOfIdeas;
  final Function increaseNumberOfIdeas;

  InheritedProvider({
    Key key,
    this.numberOfIdeas,
    this.increaseNumberOfIdeas,
    @required Widget child,
  })  : assert(child != null),
        super(key: key, child: child);

  static InheritedProvider of(BuildContext context) =>
      context.dependOnInheritedWidgetOfExactType<InheritedProvider>();

  @override
  bool updateShouldNotify(InheritedProvider old) {
    return numberOfIdeas != old.numberOfIdeas;
  }
}

InheritedModel

The InheritedModel allows to selectively rebuild individual widgets for performance

  1. Create a class that extends InheritedModel
  2. Add fields to contain data
  3. Add the of() method to access the InheritedModel from child widgets
  4. Add the updateShouldNotify() and updatedShouldNotifyDependent methods to notify (via Flutter framework) widgets to selectively rebuild if the data changed by individual field
class Ideas extends InheritedModel<IdeaType> {
  final int numberOfIdeas;
  final int numberOfPossibilities;

  const Ideas({this.numberOfIdeas, this.numberOfPossibilities, Widget child})
      : super(child: child);

  static Ideas of(BuildContext context, {IdeaType aspect}) {
    return InheritedModel.inheritFrom<Ideas>(context, aspect: aspect);
  }

  @override
  bool updateShouldNotify(Ideas oldWidget) {
    return numberOfIdeas != oldWidget.numberOfIdeas ||
        numberOfPossibilities != oldWidget.numberOfPossibilities;
  }

  @override
  bool updateShouldNotifyDependent(
      Ideas oldWidget, Set<IdeaType> dependencies) {
    return (dependencies.contains(IdeaType.ideas) &&
        numberOfIdeas != oldWidget.numberOfIdeas) ||
        (dependencies.contains(IdeaType.possibilities) &&
            numberOfPossibilities != oldWidget.numberOfPossibilities);
  }
}

ValueNotifier & ValueListenableBuilder

The ValueNotifier and ValueListenableBuilder allow to selectively rebuild individual widgets for performance

  1. Create a class that extends ValueNotifier
  2. Add fields to contain data defining them as ValueNotifier
  3. Add methods to modify data and call the notifyListeners() method
  4. Add the ValueListenableBuilder widget in the widget tree to rebuild widgets selectively if the data changed by individual field
class IdeaCount {
  ValueNotifier<int> numberOfIdeas = ValueNotifier<int>(0);
  ValueNotifier<int> numberOfPossibilities = ValueNotifier<int>(0);

  IdeaCount({this.numberOfIdeas, this.numberOfPossibilities});
}

class IdeasValueNotifier extends ValueNotifier<IdeaCount> {
  IdeasValueNotifier({IdeaCount value}) : super(value);

  void addNumberOfIdeas(int numberOfIdeas) {
    value.numberOfIdeas.value += numberOfIdeas;
    notifyListeners();
  }

  void addNumberOfPossibilities(int numberOfPossibilities) {
    value.numberOfPossibilities.value += numberOfPossibilities;
    notifyListeners();
  }
}

// Child Widget
ValueListenableBuilder(
  valueListenable: _ideasValueNotifier.value.numberOfIdeas,
  builder: (BuildContext context, int value, Widget child) {
    return Text('Ideas: $value');
  },
),

How it Works

  • InheritedWidget – The InheritedWidget is great to pass data from an ancestor widget to descendent widget. The InheritedWidget is immutable and the data (attributes) are final (cannot change) and the Flutter framework rebuilds the InheritedWidget to refresh with new data.
  • InheritedModel - The InheritedModel selectively rebuild individual widgets for performance. Use the of() method to access the InheritedModel from child widgets. The updateShouldNotify() and updatedShouldNotifyDependent() methods to notify (via Flutter framework) widgets to selectively rebuild if the data changed by individual field.
  • ValueNotifier and ValueListenableBuilder - The ValueNotifier and ValueListenableBuilderallow to selectively rebuild individual widgets for performance. Use fields to contain data defining them as ValueNotifier. Use methods to modify data and call the notifyListeners() method. Use the ValueListenableBuilder widget in the widget tree to rebuild widgets selectively if the data changed by individual field.

About

Flutter's Way State Management by using built-in Flutter classes. Using the InheritedWidget, InheritedModel, ValueNotifier, ValueListenableBuilder to selectively rebuild individual widgets for performance

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages