Navigator.push and pop in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to navigate to SecondPage when the button is pressed.

Flutter

ElevatedButton(
  onPressed: () {
    Navigator.[1](context, MaterialPageRoute(builder: (context) => SecondPage()));
  },
  child: Text('Go to Second Page'),
)

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

ApopUntil

Bpush

CpushReplacement

Dpop

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop instead of push will try to go back, not forward.

Using pushReplacement removes the current page, which is not needed here.

Navigator.push adds a new page on top of the current one, allowing navigation forward.

2fill in blank

medium

Complete the code to go back to the previous page when the button is pressed.

Flutter

ElevatedButton(
  onPressed: () {
    Navigator.[1](context);
  },
  child: Text('Go Back'),
)

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

Apop

Bpush

CpushReplacement

DpopUntil

Attempts:

3 left

💡 Hint

Common Mistakes

Using push will add a new page instead of going back.

Using popUntil requires a condition and is more complex.

Navigator.pop removes the current page and returns to the previous one.

3fill in blank

hard

Fix the error in the code to navigate to ThirdPage correctly.

Flutter

Navigator.push(context, [1](builder: (context) => ThirdPage()));

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

AMaterialPageRoute

BCupertinoPageRoute

CRoute

DPageRouteBuilder

Attempts:

3 left

💡 Hint

Common Mistakes

Using Route directly causes an error because it is abstract.

Using CupertinoPageRoute changes the style to iOS, which may not be intended.

MaterialPageRoute is the standard route for material design pages in Flutter.

4fill in blank

hard

Fill both blanks to navigate to FourthPage and then remove the current page from the stack.

Flutter

Navigator.[1](context, MaterialPageRoute(builder: (context) => FourthPage()));
// This removes the previous page
Navigator.[2](context);

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

ApushReplacement

Bpop

Cpush

DpopUntil

Attempts:

3 left

💡 Hint

Common Mistakes

Using push instead of pushReplacement keeps the old page in the stack.

Using popUntil requires a condition and is more complex.

pushReplacement adds a new page and removes the current one. pop removes the top page from the stack.

5fill in blank

hard

Fill all three blanks to navigate to FifthPage, pass data, and then pop back with a result.

Flutter

final result = await Navigator.[1](context, MaterialPageRoute(builder: (context) => FifthPage(data: [2])));
Navigator.[3](context, result);

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

Apush

B'Hello from FirstPage'

Cpop

DpushReplacement

Attempts:

3 left

💡 Hint

Common Mistakes

Using pushReplacement does not allow awaiting a result.

Not passing data correctly causes errors.

Using push instead of pop to return causes errors.

push navigates to a new page and waits for a result. Data is passed as an argument. pop returns to the previous page with the result.