Learn InheritedWidget Explained | Lifting State and Widget Communication

When you need to share data efficiently across your Flutter widget tree, especially with widgets that are not direct descendants, InheritedWidget becomes a powerful tool. The core purpose of InheritedWidget is to allow data to flow down the tree and give descendant widgets a way to access and react to changes in that shared data. Unlike passing values directly via constructors, which can become cumbersome as your tree grows, InheritedWidget centralizes the data and makes it accessible to any child widget that needs it.

You should consider using InheritedWidget when:

You need to provide data to many widgets deep in the widget tree;
Data changes should trigger only the widgets that depend on it to rebuild;
Passing data through constructors becomes impractical as your app structure gets more complex.

This approach is the foundation for more advanced state management patterns in Flutter, and understanding it will help you recognize how state can be efficiently shared and updated throughout your app.

main.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
            
import 'package:flutter/material.dart';

// Custom InheritedWidget to share a counter value
class CounterInheritedWidget extends InheritedWidget {
  final int counter;
  final VoidCallback increment;

  const CounterInheritedWidget({
    Key? key,
    required this.counter,
    required this.increment,
    required Widget child,
  }) : super(key: key, child: child);

  // Method for descendants to easily access the inherited widget
  static CounterInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<CounterInheritedWidget>();
  }

  // Determines when to notify dependents
  @override
  bool updateShouldNotify(CounterInheritedWidget oldWidget) {
    return oldWidget.counter != counter;
  }
}

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

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

  @override
  State<CounterApp> createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CounterInheritedWidget(
      counter: _counter,
      increment: _increment,
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: const Text('InheritedWidget Example')),
          body: const Center(child: CounterDisplay()),
          floatingActionButton: const CounterIncrementButton(),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final inherited = CounterInheritedWidget.of(context);
    return Text(
      'Counter: �{inherited?.counter ?? 0}',
      style: const TextStyle(fontSize: 24),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final inherited = CounterInheritedWidget.of(context);
    return FloatingActionButton(
      onPressed: inherited?.increment,
      child: const Icon(Icons.add),
    );
  }
}

Descendant widgets, such as CounterDisplay and CounterIncrementButton, access the shared data using CounterInheritedWidget.of(context). When the floating action button is pressed, it calls the increment function from the inherited widget, triggering a state change in the parent. This change causes the CounterInheritedWidget to rebuild, and because updateShouldNotify returns true when the counter changes, all widgets that depend on it (like CounterDisplay) rebuild to reflect the new value.

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 3

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Swipe to show menu

You should consider using InheritedWidget when:

You need to provide data to many widgets deep in the widget tree;
Data changes should trigger only the widgets that depend on it to rebuild;
Passing data through constructors becomes impractical as your app structure gets more complex.

main.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
            
import 'package:flutter/material.dart';

// Custom InheritedWidget to share a counter value
class CounterInheritedWidget extends InheritedWidget {
  final int counter;
  final VoidCallback increment;

  const CounterInheritedWidget({
    Key? key,
    required this.counter,
    required this.increment,
    required Widget child,
  }) : super(key: key, child: child);

  // Method for descendants to easily access the inherited widget
  static CounterInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<CounterInheritedWidget>();
  }

  // Determines when to notify dependents
  @override
  bool updateShouldNotify(CounterInheritedWidget oldWidget) {
    return oldWidget.counter != counter;
  }
}

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

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

  @override
  State<CounterApp> createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CounterInheritedWidget(
      counter: _counter,
      increment: _increment,
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: const Text('InheritedWidget Example')),
          body: const Center(child: CounterDisplay()),
          floatingActionButton: const CounterIncrementButton(),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final inherited = CounterInheritedWidget.of(context);
    return Text(
      'Counter: �{inherited?.counter ?? 0}',
      style: const TextStyle(fontSize: 24),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final inherited = CounterInheritedWidget.of(context);
    return FloatingActionButton(
      onPressed: inherited?.increment,
      child: const Icon(Icons.add),
    );
  }
}

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 3