Scribd
Upload
25 views8 pages

Navigator

The document provides an overview of the Flutter Navigator, which manages stack-based navigation in apps. It covers basic navigation functions, data passing between screens, named routes, custom page transitions, and best practices for effective navigation. Understanding these concepts is crucial for developing multi-screen applications in Flutter.

Uploaded by

ismailovich1904
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views8 pages

Navigator

The document provides an overview of the Flutter Navigator, which manages stack-based navigation in apps. It covers basic navigation functions, data passing between screens, named routes, custom page transitions, and best practices for effective navigation. Understanding these concepts is crucial for developing multi-screen applications in Flutter.

Uploaded by

ismailovich1904
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼

▲▼▲▼▲▼
tags : #coding #flutter
references : Widget
▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
▲▼▲▼▲▼

Flutter Navigator: Everything You Need to


Know 🚀
The Navigator in Flutter is responsible for managing stack-based navigation in an app. It
allows you to push, pop, replace, and manage screens (routes) dynamically. Understanding
how it works is essential for building multi-screen apps.

1. How Navigator Works


The Navigator works like a stack (LIFO - Last In, First Out).
Each time you navigate to a new screen, it’s pushed onto the stack.
When you go back, the top screen is popped from the stack.

📌 Example Stack Behavior:

HomeScreen -> Page1 -> Page2


(User presses back)
HomeScreen -> Page1 (Page2 is removed from stack)

2. Basic Navigation Functions


2.1. push() – Navigate to a New Screen
Adds a new screen to the top of the navigation stack.

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

Creates a new route (screen) using MaterialPageRoute .


The user can go back by pressing the back button.

2.2. pop() – Go Back to the Previous Screen


Removes the top screen from the stack.

Navigator.pop(context);

Works only if there is a screen below in the stack.

2.3. pushReplacement() – Replace the Current Screen


Replaces the current screen with a new one (removes the previous one).

Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => Page2()),
);

Useful for login/logout flows (e.g., replace login screen with home screen).

2.4. pushAndRemoveUntil() – Clear All Previous Screens


Removes all screens before the new one.

Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (context) => HomeScreen()),
(route) => false, // Remove all previous routes
);
Use when navigating to the main screen after logout.

2.5. canPop() – Check if Back Navigation is Possible


Returns true if there is a screen below.

if (Navigator.canPop(context)) {
Navigator.pop(context);
}

Prevents errors when popping from the first screen.

2.6. maybePop() – Tries to Pop if Possible


Like pop() , but won’t throw errors if the stack is empty.

Navigator.maybePop(context);

Safe to use when not sure if there's a screen to go back to.

2.7. popUntil() – Pop Until a Specific Screen


Pops multiple screens until it finds a specified one.

Navigator.popUntil(context, ModalRoute.withName('/home'));

Keeps popping until it reaches the home screen.

3. Passing Data Between Screens


You can send and receive data between screens.

3.1. Sending Data


Navigator.push(
context,
MaterialPageRoute(builder: (context) => Page2(data: "Hello")),
);

3.2. Receiving Data in the New Screen

class Page2 extends StatelessWidget {


final String data;
Page2({required this.data});

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: Text(data)), // Displays "Hello"
);
}
}

3.3. Returning Data from a Screen


A screen can return a value when popped.

🟢 Navigating to a screen and waiting for a result


final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => Page2()),
);
print(result); // Prints returned value

🔴 Returning Data from the Second Screen


Navigator.pop(context, "User clicked OK");

The value "User clicked OK" will be returned to the previous screen.
4. Named Routes (Recommended for Large Apps)
Named routes help organize navigation instead of manually defining each route.

4.1. Define Routes in main.dart

void main() {
runApp(MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/page1': (context) => Page1(),
'/page2': (context) => Page2(),
},
));
}

4.2. Navigate Using Named Routes

Navigator.pushNamed(context, '/page2');

4.3. Passing Arguments in Named Routes

Navigator.pushNamed(
context,
'/page2',
arguments: "Hello from Page1",
);

Receiving Arguments in Page2

class Page2 extends StatelessWidget {


@override
Widget build(BuildContext context) {
final String data = ModalRoute.of(context)!.settings.arguments as String;

return Scaffold(
body: Center(child: Text(data)), // Displays: "Hello from Page1"
);
}
}
5. Custom Page Transitions (Animations)
You can customize page transitions.

5.1. Fade Transition

PageRouteBuilder _createRoute() {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => Page2(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return FadeTransition(
opacity: animation,
child: child,
);
},
);
}

Using the custom route

Navigator.push(context, _createRoute());

5.2. Slide Transition

PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => Page2(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return SlideTransition(
position: Tween<Offset>(
begin: Offset(1.0, 0.0), // Start from right
end: Offset.zero,
).animate(animation),
child: child,
);
},
);
6. Nested Navigators (For Bottom Navigation &
Tab Views)
You can have multiple Navigators inside different sections of an app.

🔹 Use Navigator inside a Tab or Bottom Navigation Bar


🔹 Keeps navigation separate for each tab

Navigator(
key: navigatorKey, // Separate navigator key for each tab
onGenerateRoute: (routeSettings) {
return MaterialPageRoute(builder: (context) => Page2());
},
);

7. Best Practices
✅ Use named routes for large projects.
✅ Handle back navigation properly using canPop() .
✅ Return data using pop(context, data) .
✅ Optimize navigation in BottomNavigationBar with nested navigators.
✅ Use custom transitions for better UX.

8. Summary

Function Purpose
push() Navigate to new screen
pop() Go back
pushReplacement() Replace the current screen
pushAndRemoveUntil() Remove all previous screens
popUntil() Pop multiple screens
pushNamed() Navigate using named routes
canPop() Check if popping is possible
pop(context, data) Return data from a screen
Final Thoughts
Mastering Flutter’s Navigator is essential for building multi-screen apps efficiently. Whether
you use basic navigation, named routes, or advanced animations, it ensures a smooth user
experience. 🚀

You might also like