What is Navigator?

Manage the screen stack with Navigator.

What is Navigator?

Navigator is the class in Flutter that manages the screen stack. Each screen is represented as a route and added to the stack. Navigator.push adds a new screen, and Navigator.pop removes the top screen. The topmost route is the current screen visible to the user.

Navigator.push(context, route);
Navigator.pop(context);

Stack and route concepts

Navigator's stack works on the LIFO (last in first out) principle. The most recently added route is at the top and visible to the user. When Navigator.pop is called, the topmost route is removed and the screen below becomes visible again. A newly opened screen is always placed at the top of the stack.

Exercise Add a Navigator.push call

Write a function baslat that prints Navigator hazir. In main call baslat. Add an ElevatedButton whose onPressed calls Navigator.push.

Show example solution

import 'package:flutter/material.dart';

void baslat() {
  print('Navigator hazir');
}

void main() {
  baslat();
  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: (_) => Scaffold()),
              );
            },
            child: Text('Ac'),
          ),
        ),
      ),
    );
  }
}

Test yourself

What does Navigator manage?
- Manages the screen stack
- Manages only colors
- Manages only texts
- Manages only icons
Show answer

Manages the screen stack — Navigator manages routes where screens are kept in a stack; it is not about managing colors, texts or icons.

Add the Navigator class

// Yeni ekran aç
____.push(context, route);

Show answer

// Yeni ekran aç
Navigator.push(context, route);

Navigator components

Navigator

Manages the screen stack
stack

Ordered sequence of screens
route

Represents a screen
push

Adds a new screen

Next lesson: Navigator.push

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies