Managing State in Flutter

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

Part 1: Understand State Management

07. Meet 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: 06. Extend a Value Notifier Next episode: 08. Mutate the Inherited Widget

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've reached locked video content where the transcript will be shown as obfuscated text.

So you’ve learned about the various state management tools included with Flutter but I’d be remiss if I didn’t mention the biggest built included with Flutter: the inherited widget.

class Pillar {
  var _articleCount = 0;
  int get articleCount => _articleCount;
  var active = true;
  final PillarType type;

  Pillar({required this.type, int articleCount = 10}) {
    _articleCount = articleCount;
  }

  void increaseArticleCount({int by = 1}) {
    _articleCount += by;
  }
}
body: TutorialsPage(pillar: pillarData),
import 'package:flutter/material.dart';
import '../models/pillar.dart';
class PillarWidget extends InheritedWidget {

}
final Pillar pillarData;
const PillarWidget(
      {required this.pillarData, super.key, required super.child});
static PillarWidget of(BuildContext context) {
    final PillarWidget? result =
        context.dependOnInheritedWidgetOfExactType<PillarWidget>();
    assert(result != null, 'No PillarWidget found in context');
    return result!;
}
@override
bool updateShouldNotify(PillarWidget oldWidget) {
    return (oldWidget.pillarData.articleCount == pillarData.articleCount);
}
import 'state/pillar_widget.dart';
PillarWidget(
    pillarData: pillarData,
    child: TutorialsPage(),
),
import '../state/pillar_widget.dart';
class TutorialsPage extends StatefulWidget {
  const TutorialsPage({ super.key});

  @override
  State<TutorialsPage> createState() => _TutorialsPageState();
}
const Center(
    child: TutorialWidget(),
),
Widget build(BuildContext context) {
    final pillar = PillarWidget.of(context);
'Total Tutorials: ${pillar.pillarData.articleCount}',
class TutorialWidget extends StatefulWidget {
  const TutorialWidget({super.key});

  @override
  State<TutorialWidget> createState() => _TutorialWidgetState();
}
import '../state/pillar_widget.dart';
Widget build(BuildContext context) {
    final pillar = PillarWidget.of(context);
InkWell(
    onTap: () {
        pillar.pillarData.increaseArticleCount(by: 1);
    },
    child: Image.asset('assets/images/${pillar.pillarData.type.imageName}',
        width: 110, height: 110),
),
child: CircleAvatar(
    backgroundColor: Colors.blue,
    child: Text(pillar.pillarData.articleCount.toString()),
),