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

Boost your skills with a 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.

Extend a Value Notifier

This video was last updated on Sep 22 2022

Take the ValueNotifier to the next level by extending the ValueNotifier. After which, aquire automatic updates by way of the ValueNotifierListenable widget.


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 Professional subscription.

When we last left, we defined a value notifier to let us know when to update our state. The value notifier was so closely related to our model object, a better solution would be to just have our model extend the value notifier. Let’s do this now.

class Pillar extends ValueNotifier<int> {
Pillar({required this.type, int articleCount = 10}) : super(articleCount);
class Pillar extends ValueNotifier<int> {
  int get articleCount => value;
  var active = true;
  final PillarType type;
void increaseArticleCount({int by = 1}) {
    value += by;
void initState() {
    pillarData.addListener(() {
        setState(() {});
void dispose() {
body: TutorialsPage(pillar: pillarData),
const TutorialsPage({required this.pillar, super.key});
child: TutorialWidget(pillar: widget.pillar),
const TutorialWidget({required this.pillar, super.key});
widget.pillar.increaseArticleCount(by: 1);
    valueListenable: pillarData,
    builder: (context, value, child) {
        return TutorialsPage(pillar: pillarData);