InheritedWidget

What Is InheritedWidget?

InheritedWidget is a special type of widget in Flutter that allows data to be efficiently passed down the widget tree without requiring every intermediate widget to explicitly forward it. It solves the prop drilling problem we discussed in the previous lesson.

When a widget needs data from an ancestor, instead of receiving it through its constructor, it can look up the nearest InheritedWidget of a specific type in the tree. This lookup is O(1) — constant time — because Flutter maintains a map of InheritedWidget types to their instances on each element.

How InheritedWidget Provides Data Down the Tree

An InheritedWidget sits in the widget tree and makes its data available to all descendant widgets. Any widget below it can access the data without the intermediate widgets needing to know about it.

// WITH PROP DRILLING (previous lesson):
// App -> PageWrapper -> ContentArea -> ProfileSection
// username must be passed through PageWrapper and ContentArea

// WITH InheritedWidget:
// App
//   UserData (InheritedWidget - holds username)
//     PageWrapper (does NOT need username parameter)
//       ContentArea (does NOT need username parameter)
//         ProfileSection (reads username directly from UserData)

// Any widget in the subtree can access the data:
// UserData.of(context).username

Creating a Custom InheritedWidget

To create your own InheritedWidget, you need to:

1. Extend InheritedWidget
2. Add your data as fields
3. Implement updateShouldNotify() to control when dependents rebuild
4. Provide a static of(context) method for convenient access

class UserData extends InheritedWidget {
  // The data this widget provides to descendants
  final String username;
  final String email;
  final bool isLoggedIn;

  const UserData({
    super.key,
    required this.username,
    required this.email,
    required this.isLoggedIn,
    required super.child,
  });

  // Static method for convenient access
  // Widgets call UserData.of(context) to get the data
  static UserData of(BuildContext context) {
    final result = context.dependOnInheritedWidgetOfExactType<UserData>();
    assert(result != null, 'No UserData found in context');
    return result!;
  }

  // Optional: non-dependent access (does not register for rebuilds)
  static UserData? maybeOf(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<UserData>();
  }

  // Controls when dependent widgets should rebuild
  @override
  bool updateShouldNotify(UserData oldWidget) {
    return username != oldWidget.username ||
        email != oldWidget.email ||
        isLoggedIn != oldWidget.isLoggedIn;
  }
}

dependOnInheritedWidgetOfExactType

The method context.dependOnInheritedWidgetOfExactType<T>() does two things:

1. Looks up the nearest ancestor InheritedWidget of type T
2. Registers a dependency so that when the InheritedWidget changes, this widget is automatically rebuilt

class ProfileSection extends StatelessWidget {
  const ProfileSection({super.key});

  @override
  Widget build(BuildContext context) {
    // This widget depends on UserData
    // It will rebuild when UserData changes
    final userData = UserData.of(context);

    return Column(
      children: [
        Text('Hello, \${userData.username}'),
        Text(userData.email),
        if (userData.isLoggedIn)
          const Text('You are logged in')
        else
          const Text('Please log in'),
      ],
    );
  }
}

// Intermediate widgets do NOT need to know about UserData
class PageWrapper extends StatelessWidget {
  const PageWrapper({super.key});

  @override
  Widget build(BuildContext context) {
    // No username parameter needed!
    return const ContentArea();
  }
}

class ContentArea extends StatelessWidget {
  const ContentArea({super.key});

  @override
  Widget build(BuildContext context) {
    // No username parameter needed!
    return const ProfileSection();
  }
}

updateShouldNotify Explained

The updateShouldNotify() method determines whether widgets that depend on this InheritedWidget should be rebuilt when the InheritedWidget itself is rebuilt with new data. This is a crucial optimization point.

class AppConfig extends InheritedWidget {
  final String apiBaseUrl;
  final bool debugMode;
  final String appVersion;

  const AppConfig({
    super.key,
    required this.apiBaseUrl,
    required this.debugMode,
    required this.appVersion,
    required super.child,
  });

  static AppConfig of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<AppConfig>()!;
  }

  @override
  bool updateShouldNotify(AppConfig oldWidget) {
    // Only notify dependents if data actually changed
    // If parent rebuilds but data is the same, skip rebuilding dependents
    return apiBaseUrl != oldWidget.apiBaseUrl ||
        debugMode != oldWidget.debugMode ||
        appVersion != oldWidget.appVersion;
  }
}

// EXAMPLE: If updateShouldNotify returns false,
// dependents will NOT rebuild even though the
// InheritedWidget was rebuilt.
//
// Parent rebuilds with same data:
//   AppConfig(apiBaseUrl: 'https://api.com', ...)
//   updateShouldNotify returns false
//   Dependents do NOT rebuild (optimization!)
//
// Parent rebuilds with different data:
//   AppConfig(apiBaseUrl: 'https://staging.api.com', ...)
//   updateShouldNotify returns true
//   All dependents rebuild

The of(context) Pattern

The of(context) static method is a convention in Flutter for accessing InheritedWidget data. You see this pattern throughout the framework itself:

// Flutter uses InheritedWidget internally for many things:
// These are all examples of the of(context) pattern

// Theme
final theme = Theme.of(context);
final primaryColor = theme.colorScheme.primary;

// MediaQuery
final screenWidth = MediaQuery.of(context).size.width;
final padding = MediaQuery.of(context).padding;

// Navigator
Navigator.of(context).push(...);

// Scaffold
ScaffoldMessenger.of(context).showSnackBar(...);

// Localizations
final locale = Localizations.localeOf(context);

// DefaultTextStyle
final textStyle = DefaultTextStyle.of(context).style;

// All of these use InheritedWidget under the hood!

Full Working Example: Theme Provider

// Step 1: Define the InheritedWidget
class ThemeProvider extends InheritedWidget {
  final bool isDarkMode;
  final Color primaryColor;
  final double fontSize;

  const ThemeProvider({
    super.key,
    required this.isDarkMode,
    required this.primaryColor,
    required this.fontSize,
    required super.child,
  });

  static ThemeProvider of(BuildContext context) {
    final result =
        context.dependOnInheritedWidgetOfExactType<ThemeProvider>();
    assert(result != null, 'No ThemeProvider found in context');
    return result!;
  }

  @override
  bool updateShouldNotify(ThemeProvider oldWidget) {
    return isDarkMode != oldWidget.isDarkMode ||
        primaryColor != oldWidget.primaryColor ||
        fontSize != oldWidget.fontSize;
  }
}

// Step 2: Create a StatefulWidget to manage the state
class ThemeWrapper extends StatefulWidget {
  final Widget child;
  const ThemeWrapper({super.key, required this.child});

  @override
  State<ThemeWrapper> createState() => ThemeWrapperState();
}

class ThemeWrapperState extends State<ThemeWrapper> {
  bool _isDarkMode = false;
  Color _primaryColor = Colors.blue;
  double _fontSize = 16.0;

  void toggleDarkMode() {
    setState(() {
      _isDarkMode = !_isDarkMode;
    });
  }

  void setPrimaryColor(Color color) {
    setState(() {
      _primaryColor = color;
    });
  }

  void setFontSize(double size) {
    setState(() {
      _fontSize = size;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ThemeProvider(
      isDarkMode: _isDarkMode,
      primaryColor: _primaryColor,
      fontSize: _fontSize,
      child: widget.child,
    );
  }
}

// Step 3: Use the data anywhere in the subtree
class ThemedCard extends StatelessWidget {
  const ThemedCard({super.key});

  @override
  Widget build(BuildContext context) {
    final theme = ThemeProvider.of(context);

    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: theme.isDarkMode ? Colors.grey[900] : Colors.white,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: theme.primaryColor),
      ),
      child: Text(
        'This card uses InheritedWidget for theming',
        style: TextStyle(
          fontSize: theme.fontSize,
          color: theme.isDarkMode ? Colors.white : Colors.black,
        ),
      ),
    );
  }
}

How Flutter Optimizes Rebuilds

Flutter’s InheritedWidget system is highly optimized. Here is how the rebuild process works:

1. When an InheritedWidget is rebuilt with new data, Flutter checks updateShouldNotify()
2. If it returns true, Flutter walks through the list of registered dependents only
3. Each dependent is marked as dirty and will rebuild on the next frame
4. Widgets that did not call dependOnInheritedWidgetOfExactType() are not affected

class CounterProvider extends InheritedWidget {
  final int count;

  const CounterProvider({
    super.key,
    required this.count,
    required super.child,
  });

  static CounterProvider of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<CounterProvider>()!;
  }

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

// This widget DEPENDS on CounterProvider - WILL rebuild
class CounterDisplay extends StatelessWidget {
  const CounterDisplay({super.key});

  @override
  Widget build(BuildContext context) {
    print('CounterDisplay rebuilding');
    final count = CounterProvider.of(context).count;
    return Text('Count: \$count');
  }
}

// This widget does NOT depend on CounterProvider - will NOT rebuild
class StaticHeader extends StatelessWidget {
  const StaticHeader({super.key});

  @override
  Widget build(BuildContext context) {
    print('StaticHeader rebuilding'); // Only prints once!
    return const Text('I never change');
  }
}

// Usage:
class CounterApp extends StatefulWidget {
  const CounterApp({super.key});

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

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

  @override
  Widget build(BuildContext context) {
    return CounterProvider(
      count: _count,
      child: Column(
        children: [
          const StaticHeader(),    // Does NOT rebuild
          const CounterDisplay(),   // DOES rebuild
          ElevatedButton(
            onPressed: () => setState(() => _count++),
            child: const Text('Increment'),
          ),
        ],
      ),
    );
  }
}

Practical Example: User Session

class UserSession extends InheritedWidget {
  final String? userId;
  final String? displayName;
  final String? avatarUrl;
  final bool isAuthenticated;

  const UserSession({
    super.key,
    this.userId,
    this.displayName,
    this.avatarUrl,
    required this.isAuthenticated,
    required super.child,
  });

  static UserSession of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<UserSession>()!;
  }

  static UserSession? maybeOf(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<UserSession>();
  }

  @override
  bool updateShouldNotify(UserSession oldWidget) {
    return userId != oldWidget.userId ||
        displayName != oldWidget.displayName ||
        avatarUrl != oldWidget.avatarUrl ||
        isAuthenticated != oldWidget.isAuthenticated;
  }
}

// Any widget can check auth status without prop drilling
class NavBar extends StatelessWidget {
  const NavBar({super.key});

  @override
  Widget build(BuildContext context) {
    final session = UserSession.of(context);

    return AppBar(
      title: const Text('My App'),
      actions: [
        if (session.isAuthenticated) ...[
          CircleAvatar(
            backgroundImage: session.avatarUrl != null
                ? NetworkImage(session.avatarUrl!)
                : null,
            child: session.avatarUrl == null
                ? Text(session.displayName?[0] ?? '?')
                : null,
          ),
        ] else ...[
          TextButton(
            onPressed: () {
              // Navigate to login
            },
            child: const Text('Log In'),
          ),
        ],
      ],
    );
  }
}

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    final session = UserSession.of(context);

    if (!session.isAuthenticated) {
      return const Center(child: Text('Please log in to view your profile'));
    }

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Welcome, \${session.displayName}'),
          Text('User ID: \${session.userId}'),
        ],
      ),
    );
  }
}

Practical Example: App Configuration

class AppConfiguration extends InheritedWidget {
  final String apiBaseUrl;
  final String appVersion;
  final bool maintenanceMode;
  final Map<String, bool> featureFlags;

  const AppConfiguration({
    super.key,
    required this.apiBaseUrl,
    required this.appVersion,
    required this.maintenanceMode,
    required this.featureFlags,
    required super.child,
  });

  static AppConfiguration of(BuildContext context) {
    return context
        .dependOnInheritedWidgetOfExactType<AppConfiguration>()!;
  }

  bool isFeatureEnabled(String feature) {
    return featureFlags[feature] ?? false;
  }

  @override
  bool updateShouldNotify(AppConfiguration oldWidget) {
    return apiBaseUrl != oldWidget.apiBaseUrl ||
        appVersion != oldWidget.appVersion ||
        maintenanceMode != oldWidget.maintenanceMode;
  }
}

// Usage in the app
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return AppConfiguration(
      apiBaseUrl: 'https://api.myapp.com',
      appVersion: '1.2.3',
      maintenanceMode: false,
      featureFlags: {
        'dark_mode': true,
        'new_checkout': false,
        'ai_search': true,
      },
      child: MaterialApp(
        home: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final config = AppConfiguration.of(context);

    if (config.maintenanceMode) {
      return const Center(
        child: Text('App is under maintenance. Please try again later.'),
      );
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('My App v\${config.appVersion}'),
      ),
      body: Column(
        children: [
          if (config.isFeatureEnabled('ai_search'))
            const AiSearchBar(),
          if (config.isFeatureEnabled('new_checkout'))
            const NewCheckoutButton()
          else
            const OldCheckoutButton(),
        ],
      ),
    );
  }
}