Search⌘ K
Home
Courses
Master State Management in Flutter

Inherited Widgets: Application

Explore how to apply inherited widgets in Flutter for effective state management. Understand context scope, widget hierarchy, and how data flows in widget trees. This lesson helps you efficiently manage widget states and optimize app performance by avoiding unnecessary rebuilds.

We'll cover the following...

Separating inherited widgets

We will separate our inherited widgets in a separate folder. Let us break down our app structure a little bit.

Inside our lib folder, the folder structure looks like the following:

controller/inherited-widget/widgets-lists/widgets_lists.dart

Now the widget lists include these two inherited widgets.

Dart
import 'package:flutter/material.dart';
class EyeColor extends InheritedWidget {
  const EyeColor({
    Key? key,
    @required this.color,
    required Widget child,
  })  : assert(color != null),
        super(key: key, child: child);
  final Color? color;
  static EyeColor? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<EyeColor>();
  }
  @override
  bool updateShouldNotify(EyeColor old) => color != old.color;
}
class ChangingAge extends InheritedWidget {
  const ChangingAge({
    Key? key,
    @required this.age,
    required Widget child,
  })  : assert(age != null),
        super(key: key, child: child);
  final ChangeAge? age;
  static ChangingAge? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<ChangingAge>();
  }
  @override
  bool updateShouldNotify(ChangingAge old) => age != old.age;
}
class ChangeAge {
  int age;
  ChangeAge({this.age: 55});
  void changeAge() {
    age += 5;
  }
}

Why does scope matter in passing context?

We should remember that many widgets do not consume the same context in the widget tree. This means there could be widgets that may not exist in the scope. The value that context carries on its shoulder will therefore be null for any widgets ...