InheritedModel widget and Attributes

InheritedModel widget and Attributes

ยท

2 min read

The InheritedModel widget in Flutter is similar to InheritedWidget, but it provides a more granular way to manage inherited data. It allows you to define multiple types of models and selectively rebuild widgets that depend on specific models, rather than rebuilding all descendants when data changes.

Attributes:

  1. model (T):

    • The model data that can be inherited by descendant widgets. It must be a subclass of InheritedModel.
  2. updateShouldNotify (bool Function(T oldModel)):

    • A function that determines whether the descendant widgets should be rebuilt when the model data changes. It takes the old model as an argument and returns true if the model has changed and the descendants need to be rebuilt.
  3. child (Widget):

    • The child widget tree that may depend on the inherited model data.

Example:

import 'package:flutter/material.dart';

// Define a custom model class
class MyModel extends InheritedModel<String> {
  final String data;

  MyModel({required this.data, required Widget child}) : super(child: child);

  @override
  bool updateShouldNotify(MyModel oldWidget) {
    return oldWidget.data != data;
  }

  @override
  bool updateShouldNotifyDependent(MyModel oldWidget, Set<String> dependencies) {
    return dependencies.contains('data') && oldWidget.data != data;
  }

  @override
  bool isSupportedAspect(Object? aspect) {
    return aspect == 'data';
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      context.dependOnInheritedWidgetOfExactType<MyModel>()!.data,
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MyModel(
      data: 'Hello World',
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('InheritedModel Widget Example'),
          ),
          body: Center(
            child: MyWidget(),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

Explanation:

  • In this example, a custom model class MyModel is defined, which extends InheritedModel<String>.

  • The updateShouldNotify method is overridden to determine whether the model data has changed and whether the descendants should be rebuilt.

  • The updateShouldNotifyDependent method is overridden to determine whether specific dependent widgets should be rebuilt when the model data changes. In this case, the dependent widgets are identified by the 'data' aspect.

  • The isSupportedAspect method is overridden to specify which aspects are supported by the model. In this example, only the 'data' aspect is supported.

  • In the MyApp widget, an instance of MyModel is created with some data ('Hello World') and wrapped around the MaterialApp.

  • The MyWidget widget accesses the inherited model data using context.dependOnInheritedWidgetOfExactType<MyModel>() and displays it using a Text widget.

  • When the model data changes, only the widgets that depend on the changed aspect ('data') are rebuilt, providing a more efficient way to manage inherited data.

Did you find this article valuable?

Support Vinit Mepani by becoming a sponsor. Any amount is appreciated!

ย