InheritedWidget concept in Flutter

Introduction

InheritedWidget helps share data easily across many parts of a Flutter app without passing it manually everywhere.

When you want to share app settings like theme or language across many screens.

When multiple widgets need to read the same data and update when it changes.

When you want to avoid passing data through many widget constructors.

When you want a simple way to notify widgets about data changes.

When you build a custom state management solution.

Syntax

Flutter

class MyData extends InheritedWidget {
  final int value;

  const MyData({required this.value, required Widget child, Key? key}) : super(key: key, child: child);

  static MyData? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyData>();
  }

  @override
  bool updateShouldNotify(MyData oldWidget) {
    return oldWidget.value != value;
  }
}

The of method is used by child widgets to access the shared data.

updateShouldNotify tells Flutter when to rebuild widgets that depend on this data.

Examples

This example shares a counter value with child widgets.

Flutter

class CounterData extends InheritedWidget {
  final int count;

  const CounterData({required this.count, required Widget child, Key? key}) : super(key: key, child: child);

  static CounterData? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<CounterData>();
  }

  @override
  bool updateShouldNotify(CounterData oldWidget) {
    return oldWidget.count != count;
  }
}

Wrap widgets with your InheritedWidget to provide data down the tree.

Flutter

final data = MyData(value: 42, child: SomeWidget());

Access the shared data inside a widget using the of method.

Flutter

final myData = MyData.of(context);
if (myData != null) {
  print(myData.value);
}

Sample App

This app uses MyData to share a counter value. Pressing the button increases the counter, and the text updates automatically.

Flutter

import 'package:flutter/material.dart';

class MyData extends InheritedWidget {
  final int value;

  const MyData({required this.value, required Widget child, Key? key}) : super(key: key, child: child);

  static MyData? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyData>();
  }

  @override
  bool updateShouldNotify(MyData oldWidget) {
    return oldWidget.value != value;
  }
}

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int counter = 0;

  void increment() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MyData(
      value: counter,
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: const Text('InheritedWidget Example')),
          body: const Center(child: CounterDisplay()),
          floatingActionButton: FloatingActionButton(
            onPressed: increment,
            child: const Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

class CounterDisplay extends StatelessWidget {
  const CounterDisplay({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final data = MyData.of(context);
    return Text('Counter value: ${data?.value ?? 0}', style: const TextStyle(fontSize: 24));
  }
}

Important Notes

InheritedWidget is immutable; to update data, rebuild it with new values.

Widgets that use of will rebuild when updateShouldNotify returns true.

InheritedWidget is a low-level tool; many apps use higher-level state management packages built on it.

Summary

InheritedWidget shares data down the widget tree without manual passing.

Use the of method to access shared data in child widgets.

Widgets rebuild automatically when shared data changes if updateShouldNotify returns true.