Get immediate access to this and over 1,500+ other videos and books.

Boost your skills with a raywenderlich.com Beginner subscription. With over 60+ video courses and our core foundational programming books bundled in one subscription, it’s simply the best investment you can make in your development career.

Meet the Inherited Widget

This video was last updated on Sep 22 2022

Learn about the Inherited Widget - Flutter’s main component for managing state in an app. While using the Inherited Widget is relatively straight forward, there are some things to consider.

Contributors

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

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()),
),

Reviews

Comments