InheritedWidget concept in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Understanding InheritedWidget Data Access

Given the following Flutter code, what will be printed when the button is pressed?

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) => value != oldWidget.value;
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = MyData.of(context)?.value ?? 0;
    return ElevatedButton(
      onPressed: () => print('Value is: $data'),
      child: Text('Show Value'),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyData(
      value: 42,
      child: Scaffold(body: Center(child: MyWidget())),
    ),
  ));
}

A Value is: 42

B Value is: 0

C Throws a runtime error

D Value is: null

💡 Hint

Check how MyWidget accesses the value from MyData using context.

The MyWidget uses MyData.of(context) to get the current InheritedWidget instance. Since MyData is an ancestor with value 42, it prints 'Value is: 42'.

❓ lifecycle

intermediate

InheritedWidget Update Notification

What happens when the value in an InheritedWidget changes and updateShouldNotify returns true?

A Widgets that depend on the InheritedWidget rebuild automatically

B Nothing happens until setState is called manually

C Only the InheritedWidget rebuilds, not its children

D The app crashes with an error

💡 Hint

Think about how Flutter knows to rebuild widgets that use inherited data.

When updateShouldNotify returns true, Flutter rebuilds widgets that called dependOnInheritedWidgetOfExactType to get the updated data.

🧠 Conceptual

advanced

Why Use InheritedWidget?

Which is the main reason to use an InheritedWidget in Flutter apps?

A To style widgets with themes

B To create animations easily

C To handle user input events globally

D To efficiently share data down the widget tree without passing it manually through constructors

💡 Hint

Think about how data can be shared in a big widget tree.

InheritedWidget allows widgets deep in the tree to access shared data without needing to pass it through every intermediate widget.

🔧 Debug

advanced

Diagnosing Missing InheritedWidget Access

Why does calling MyData.of(context) inside the build method of a widget that is NOT a descendant of MyData return null?

A Because the context is invalid outside build methods

B Because MyData.of(context) is deprecated and returns null

C Because the widget is not inside the subtree of MyData, so no ancestor InheritedWidget of that type exists

D Because updateShouldNotify returned false

💡 Hint

Think about widget tree structure and where InheritedWidget is placed.

InheritedWidget lookup depends on the widget being a descendant in the tree. If not, the lookup returns null.

❓ navigation

expert

InheritedWidget and Navigation State

If you use an InheritedWidget to share data and then navigate to a new route (screen), what happens to the InheritedWidget data in the new route?

A InheritedWidget data is automatically shared across all routes

B The new route does not have access to the InheritedWidget data unless it is above the Navigator in the widget tree

C InheritedWidget data is reset to default values on navigation

D The app crashes because InheritedWidget cannot be used with Navigator

💡 Hint

Consider where the InheritedWidget is placed relative to Navigator in the widget tree.

InheritedWidget data is only accessible to widgets below it in the tree. If Navigator is above it, new routes won't see that data.