Passing data between screens in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to navigate to the DetailScreen with Navigator.

Flutter

Navigator.of(context).[1](MaterialPageRoute(builder: (context) => DetailScreen()));

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

ApushReplacement

Bpop

Cpush

DpopUntil

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop instead of push causes the app to go back instead of forward.

Using pushReplacement removes the previous screen, which is not always desired.

Use push to go to a new screen.

2fill in blank

medium

Complete the code to pass a string message to DetailScreen constructor.

Flutter

Navigator.of(context).push(MaterialPageRoute(builder: (context) => DetailScreen(message: [1])));

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

AHello from Home

Bmessage

Ccontext

D'Hello from Home'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing unquoted text causes errors.

Passing variable names that are not defined.

Strings must be in quotes to pass as text.

3fill in blank

hard

Fix the error in DetailScreen constructor to accept the message parameter.

Flutter

class DetailScreen extends StatelessWidget {
  final String [1];

  DetailScreen({required this.message});

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Center(child: Text(message)));
  }
}

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

Amessage

Bmsg

Ctext

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different variable name than the constructor parameter.

Forgetting to declare the variable as final.

The variable name must match the constructor parameter name.

4fill in blank

hard

Fill both blanks to extract the passed message and display it in Text widget.

Flutter

final String [1] = ModalRoute.of(context)!.settings.arguments as [2];

return Scaffold(body: Center(child: Text([1])));

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

Amessage

BString

Cint

Ddynamic

Attempts:

3 left

💡 Hint

Common Mistakes

Casting to wrong type like int.

Using different variable names inconsistently.

Use the same variable name to store the argument and cast it to String.

5fill in blank

hard

Fill all three blanks to pass and receive a Map with 'title' and 'body' keys between screens.

Flutter

Navigator.of(context).push(MaterialPageRoute(builder: (context) => DetailScreen(data: [1])));

// In DetailScreen
final Map<String, String> [2];

Text([3]['title'] ?? 'No Title')

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

A{'title': 'Hello', 'body': 'Welcome'}

Bdata

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Passing data as a string instead of a Map.

Using different variable names for the Map.

Pass a Map literal, receive it as 'data', and access 'title' key.