inherited widget in flutter app
Home / Flutter / Understanding Inherited Widget in Flutter: Simplifying State
Flutter Mobile

Understanding Inherited Widget in Flutter: Simplifying State

Share this post on:

What is an Inherited Widget?

In Flutter, InheritedWidget is like a crucial puzzle piece for handling state and passing data through the widget tree. It’s crafted to smoothly flow data down to lower-level widgets that require it, without the hassle of manually passing it through constructors.

At its core, Inherited Widget serves two primary purposes:

  1. Data Flow: The Inherited Widget serves as a container for data that needs to be accessed by multiple widgets in the widget tree. When the data held by an Inherited Widget changes, Flutter automatically rebuilds all descendant widgets that depend on that data, ensuring that they reflect the updated state.
  2. Efficient State Management: Inherited Widget optimizes the performance of state management by minimizing unnecessary widget rebuilds. Instead of rebuilding the entire widget tree when data changes, Flutter selectively rebuilds only the widgets that directly depend on the changed data, improving overall app performance and responsiveness.

To understand how Inherited Widget works in Flutter, let’s delve into its inner workings:

1. Data Propagation:

  • At its core, InheritedWidget maintains a piece of data that it shares with its descendants.
  • When the data held by an InheritedWidget changes, Flutter automatically rebuilds all descendant widgets that depend on that data.
  • This ensures that any widgets consuming the shared data are updated to reflect the new state.

2. InheritedWidget Tree:

  • Flutter maintains an inherited widget tree alongside the widget tree.
  • The InheritedWidget tree mirrors the widget tree’s structure and represents the hierarchy of InheritedWidget instances.
  • Each InheritedWidget instance contains the data it wants to share and a reference to its child widget.

3. Data Access:

  • Descendant widgets access the data provided by an InheritedWidget using the of() method.
  • The of() method retrieves the nearest instance of the specified InheritedWidget type from the widget tree.
  • Widgets can call () within their build() method to access the shared data.

4. Automatic Rebuilds:

  • Flutter automatically triggers widget rebuilds when the data held by an Inherited Widget changes.
  • This mechanism ensures that widgets consuming the shared data are updated to reflect the new state.
  • Flutter efficiently determines which widgets need to be rebuilt by comparing the current and previous instances of the InheritedWidget in the tree.

Let’s review the example for more details.

This example demonstrates the use of InheritedWidget in Flutter to efficiently share data (the counter value) across the widget tree, ensuring that only the widgets depending on the data are rebuilt when it changes, thus optimizing performance.

class InheritedWidgetDemoState extends State<InheritedWidgetDemo> { 
   Timer? _timer; 
    int counter = 0; 
     @override 
      void initState() { 
       super.initState();
// Start the timer when the widget is initialized 
   _timer = Timer.periodic(const Duration(seconds: 2), (timer) { 
    setState(() { 
    counter++;
  }); 
 }); 
}
@override 
Widget build(BuildContext context) { 
  return MaterialApp( 
   home: Scaffold( 
    appBar: AppBar( 
     title: const Text('InheritedWidget Demo'),
 ), body: MyInheritedWidget( 
   data: counter, 
    child: const MyWidget(),
   ),
  ),
 );
}

InheritedWidgetDemo: This is a StatefulWidget that serves as the root widget of the application. In its initState method, a timer is started that updates the counter variable every 2 seconds using setState. The value of counter is passed down the widget tree using MyInheritedWidget.

// Define a custom InheritedWidget 
  class MyInheritedWidget extends InheritedWidget { 
    final int data; 
     const MyInheritedWidget({super.key, required this.data, required super.child}); 
// Convenience method to access the nearest instance of MyInheritedWidget from a build context.    static MyInheritedWidget of(BuildContext context) {
 return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>()!; 
}

 @override 
  bool updateShouldNotify(MyInheritedWidget oldWidget) { 
   return oldWidget.data != data;
 }
}
  • This code defines a custom InheritedWidget named MyInheritedWidget. InheritedWidget is a widget in Flutter that allows you to share data across the widget tree to its descendants efficiently.
  • The MyInheritedWidget class has a field named data of type int. This field holds the data that will be shared across the widget tree.
  • Static Method: of(): This method is a convenient method to access the nearest instance of MyInheritedWidget from a given BuildContext. It returns the nearest ancestor MyInheritedWidget found in the widget tree.
  • updateShouldNotify(): This method is overridden from the InheritedWidget class. It determines whether dependent widgets should be notified when the data of MyInheritedWidget changes. It compares the data of the current widget (this) with the data of the old widget (oldWidget). If the data has changed, it returns true, indicating that dependent widgets should be rebuilt.
class MyWidget extends StatelessWidget { 
  const MyWidget({super.key}); 
    @override 
     Widget build(BuildContext context) { 
// Access the data from MyInheritedWidget using the of() method 
final myData = MyInheritedWidget.of(context).data;
  return 
   Center( 
    child: Column( 
     mainAxisAlignment: MainAxisAlignment.center, 
      children: <Widget>[
       const Text(
       'Text will change every 2 seconds:',
        ),
        Text("$myData",
         style: Theme.of(context).textTheme.bodyMedium,
        ),
       // const StaticWidget(),
       ],
      ),
     );
    }
   }

MyWidget: This is a stateless widget that consumes the data provided by MyInheritedWidget.

  • It uses the method to access the counter value and displays it. Since MyInheritedWidget wraps MyWidget, any changes to the data it holds will cause MyWidget to rebuild.

“Several Flutter packages leverage various state management techniques to provide functionality for state management, theme management, navigation, and more. Some popular packages that utilize or follow concepts like InheritedWidget for data propagation include:”

  1. Provider: Utilizes InheritedWidget for efficient data propagation in state management and dependency injection
  2. Bloc: Employs InheritedWidget to grant access to BLoC instances and manage state changes within the BLoC pattern.
  3. GetX: Follows similar principles to InheritedWidget for state management and data sharing, focusing on lightweight solutions.
  4. Flutter Redux: Utilizes InheritedWidget to cascade the Redux store throughout the widget tree, efficiently managing the application state.
  5. Riverpod: Built on Provider and InheritedWidget, offers a simplified and more expressive syntax for state management and dependency injection.

Here are the links specifically related to InheritedWidget:

  1. InheritedWidget Documentation:
  2. InheritedWidget Tutorial:
  3. Understanding InheritedWidget Video Tutorial:

These resources will provide you with a deeper understanding of how InheritedWidget works and how to effectively use it in your Flutter applications.

Conclusion:

In summary, the provided InheritedWidget example showcases how to efficiently share data across the widget tree in Flutter. By defining a custom Inherited Widget, developers can encapsulate shared data and provide convenient access to it throughout the widget tree.

This approach ensures that only the relevant parts of the UI are rebuilt when the shared data changes, contributing to improved performance and code organization in Flutter applications.