Navigator.push

Open a new screen with Navigator.push.

What is Navigator.push?

Navigator.push opens a new screen by adding a new route to the stack. The first parameter is context and the second is the route to open. The route is usually created as a MaterialPageRoute.

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

The context parameter

The context parameter tells Navigator the position of the call in the widget tree. When called from a Scaffold or similar widget, context is usually taken from the parameter of the build method. Without context, Navigator cannot know which page the call came from.

Exercise Open a second screen with Navigator.push

Write a function ac that prints Ekran acildi. Write a StatelessWidget named IkinciEkran. In main call ac. Have an ElevatedButton on the first screen whose onPressed opens IkinciEkran with Navigator.push.

Show example solution

import 'package:flutter/material.dart';

void ac() {
  print('Ekran acildi');
}

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

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

void main() {
  ac();
  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: const Text('Ac'),
          ),
        ),
      ),
    );
  }
}

Test yourself

What does Navigator.push do?
- Rebuilds the screen
- Adds a new screen to the stack
- Opens the keyboard
- Removes the top screen
Show answer

Adds a new screen to the stack — Navigator.push opens a new screen by adding a new route to the stack; it does not remove a screen, rebuild, or open the keyboard.

Add the push method

Navigator.____(context, MaterialPageRoute(builder: (_) => Scaffold()));

Show answer

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

push parameters

Navigator.push

Opens a new screen
context

Widget tree position
MaterialPageRoute

Creates a route
builder

Builds the screen

Next lesson: MaterialPageRoute

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies