InheritedWidget concept in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a custom InheritedWidget class named MyData.

Flutter

class MyData extends InheritedWidget {
  final int data;
  const MyData({required this.data, required Widget child, Key? key}) : super(key: key, child: child);

  @override
  bool [1](covariant MyData oldWidget) {
    return oldWidget.data != data;
  }
}

Drag options to blanks, or click blank then click option'

Abuild

BupdateShouldNotify

CcreateState

Ddispose

Attempts:

3 left

💡 Hint

Common Mistakes

Using lifecycle methods like build or dispose instead of updateShouldNotify.

Not overriding updateShouldNotify causes dependents to not update.

The updateShouldNotify method tells Flutter when to notify widgets that depend on this InheritedWidget about changes.

2fill in blank

medium

Complete the code to access the MyData instance from the widget tree.

Flutter

final myData = context.dependOnInheritedWidgetOfExactType<[1]>();

Drag options to blanks, or click blank then click option'

AInheritedWidget

BStatefulWidget

CStatelessWidget

DMyData

Attempts:

3 left

💡 Hint

Common Mistakes

Using the base InheritedWidget class instead of the custom one.

Trying to access StatefulWidget or StatelessWidget which are unrelated.

To get the data, you must specify your custom InheritedWidget class MyData in the generic type.

3fill in blank

hard

Fix the error in the method to get the shared data value from MyData.

Flutter

int getData(BuildContext context) {
  final inherited = context.dependOnInheritedWidgetOfExactType<MyData>();
  return inherited?.[1] ?? 0;
}

Drag options to blanks, or click blank then click option'

Adata

Bchild

CupdateShouldNotify

Dcontext

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access the child widget instead of the data.

Using lifecycle methods or context instead of the data field.

The shared value is stored in the data field of MyData, so we access inherited.data.

4fill in blank

hard

Fill both blanks to create a widget that uses MyData to show the shared integer.

Flutter

class DisplayData extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final value = context.dependOnInheritedWidgetOfExactType<[1]>()?.[2] ?? 0;
    return Text('Value: $value');
  }
}

Drag options to blanks, or click blank then click option'

AMyData

Bdata

Cchild

DupdateShouldNotify

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong class names or fields that do not exist.

Trying to access the child widget instead of data.

You must specify MyData to get the inherited widget and access its data field to read the shared value.

5fill in blank

hard

Fill all three blanks to create an InheritedWidget that updates dependents when data changes.

Flutter

class CounterData extends InheritedWidget {
  final int count;
  const CounterData({required this.count, required Widget child, Key? key}) : super(key: key, child: child);

  @override
  bool [1](covariant CounterData oldWidget) {
    return oldWidget.[2] != [3];
  }
}

Drag options to blanks, or click blank then click option'

AupdateShouldNotify

Bcount

Dchild

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong method names or comparing wrong fields.

Not overriding updateShouldNotify causes dependents to not update.

The method updateShouldNotify compares the old count with the current count to decide if dependents should rebuild.