What is Navigator?
- Flutter course
- Beginner
- Lesson 86/99
- 4 min
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.
Practice 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.
Starter code
import 'package:flutter/material.dart';
// baslat fonksiyonu yaz: "Navigator hazir" yazdirsin
void main() {
// baslat'i cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// ElevatedButton ekle
child: SizedBox(),
),
),
);
}
}Sample 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'),
),
),
),
);
}
}Expected output
Navigator hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does Navigator manage?
- Manages the screen stack Correct answer
- Manages only colors
- Manages only texts
- Manages only icons
Explanation: Navigator manages routes where screens are kept in a stack; it is not about managing colors, texts or icons.
2 Add the Navigator class
// Yeni ekran aç
____.push(context, route);// Yeni ekran aç
Navigator.push(context, route);Explanation: The class that manages the screen stack is Navigator; Scaffold, MaterialApp and Container are not for this purpose.
3 Navigator components
| Term | Meaning |
|---|---|
Navigator |
Manages the screen stack |
stack |
Ordered sequence of screens |
route |
Represents a screen |
push |
Adds a new screen |