Summary - Navigator

Combine push and pop to make a two-screen flow.

Two-screen flow

To make a two-screen flow, you open the second screen with Navigator.push and return with Navigator.pop. Push creates the new screen via the builder of MaterialPageRoute. Pop closes the top screen and returns to the screen below.

// On the first screen
Navigator.push(context,
  MaterialPageRoute(builder: (_) => SecondScreen()));

// On the second screen
Navigator.pop(context);

Exercise Make a two-screen flow

Write a function akisBaslat that prints Iki ekranli akis. Write a StatelessWidget named IkinciEkran with an ElevatedButton that calls Navigator.pop(context). In main call akisBaslat. On the first screen, open IkinciEkran with Navigator.push.

Show example solution

import 'package:flutter/material.dart';

void akisBaslat() {
  print('Iki ekranli akis');
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Geri'),
        ),
      ),
    );
  }
}

void main() {
  akisBaslat();
  runApp(const Uygulama());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => const IkinciEkran()),
              );
            },
            child: Text('Ac'),
          ),
        ),
      ),
    );
  }
}

Test yourself

Which methods are used together for a two-screen flow?
- push and push
- push and pop
- pop and pop
- create and destroy
Show answer

push and pop — In a two-screen flow, push opens a new screen and pop returns; push+push, pop+pop or create+destroy are not for this purpose.

Add the MaterialPageRoute

Navigator.push(
  context,
  ____(builder: (_) => const IkinciEkran()),
);

Show answer

Navigator.push(
  context,
  MaterialPageRoute(builder: (_) => const IkinciEkran()),
);

Navigator summary

Navigator

Manages screen flow
push

Adds a new route
pop

Removes the top route
MaterialPageRoute

Provides Material transition

Next lesson: Project skeleton

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies