Managing State in Flutter

Sep 22 2022 · Dart 2.17, Flutter 3.0, Android Studio Chipmunk

Part 1: Understand State Management

08. Mutate the Inherited Widget

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 07. Meet the Inherited Widget Next episode: 09. Understand Provider

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In the last episode, you implemented an inherited widget. You saw how it easy it was to access the widget in the widget tree and read from it. But unfortunately, you can’t change a value. Inherited widget’s are immutable. Mind you, can access objects in an inherited that can mutate their own internal state, but you can’t change that object.

class PillarStatefulWidget extends StatefulWidget {
  const PillarStatefulWidget(
      {required this.pillarData, required this.child, Key? key})
      : super(key: key);

  final Widget child;
  final Pillar pillarData;
get articleCount => widget.pillarData.articleCount;
get imageName => widget.pillarData.type.imageName;
void increaseArticleCount({ int by = 1 }) {
    setState(() {
        widget.pillarData.increaseArticleCount(by: by);
    });
}
final PillarState state;
final int articleCount;
  const PillarInheritedWidget(
      {required this.articleCount,
      required this.state,
      super.key,
      required super.child});
static PillarState of(BuildContext context) {
    final PillarInheritedWidget? result =
        context.dependOnInheritedWidgetOfExactType<PillarInheritedWidget>();
    assert(result != null, 'No PillarWidget found in context');
    return result!.state;
}
  bool updateShouldNotify(PillarInheritedWidget oldWidget) {
    return !(oldWidget.articleCount == articleCount);
  }
Widget build(BuildContext context) {
    return PillarInheritedWidget(
        articleCount: widget.pillarData.articleCount,
        state: this,
        child: widget.child,
    );
}
body: PillarStatefulWidget(
    pillarData: pillarData,
    child: const TutorialsPage(),
),
final pillar = PillarInheritedWidget.of(context);
'Total Tutorials: ${pillar.articleCount}',
final pillar = PillarInheritedWidget.of(context);
InkWell(
    onTap: () {
    pillar.increaseArticleCount();
    },
    child: Image.asset('assets/images/${pillar.imageName}',
        width: 110, height: 110),
),
CircleAvatar(
    backgroundColor: Colors.blue,
    child: Text(pillar.articleCount.toString()),