Routes & Navigation

Quick overview of Navigator 1.0

Overview of Navigator 2.0 and how to use it
Navigate with named routes
Send data to a new screen
Return data from a screen
o If you come from an iOS background, you might be
familiar with UINavigationController to manage and
navigate between view controllers.
o In Android, you use Jetpack Navigation to manage
various fragments..
o In Flutter, you use a Navigator widget to manage
your screens or pages.
o A stack is a data structure that manages pages. You
insert the elements last-in, first-out (LIFO), and
only the element at the top of the stack is visible to
the user.
o Navigator 1.0 provides a simple set of APIs to
navigate between screens.
o The most common ones include:
o push():
o Adds a new route on the stack.

o It takes BuildContext as the first argument and the second

argument is a PageBuilder.

o pop():
o Removes a route from the stack.

o It takes only BuildContext and changes the current route.

o There’s no good way to manage your pages without
keeping a mental map of where you push and pop a
screen.
o It doesn’t expose the route stack to developers.
o This makes it difficult to handle complicated cases,
like adding and removing a screen between pages.
o Flutter 1.22 introduced Navigator 2.0, a new
declarative API that allows you to take full control of
your navigation stack.
o It aims to feel more Flutter-like while solving the
pain points of Navigator 1.0.
o Its main goals include:
o Exposing the navigator’s page stack.
o Manage pages. More power, more control.

o Handle operating system events.

o Works better with events like the Android system’s Back
button

o Manage nested navigators.

o Gives you control over which navigator has priority

o Manage navigation state.

o parse routes and handles web URLs and deep linking
import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: const MainPage(),
);
}
}
class MainPage extends StatelessWidget {
const MainPage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Main Page"),
),
body: Center(
child: OutlinedButton(
child: const Text("Go To Second Page"),
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => SecondPage()));
},
),
),
);
}
}
class SecondPage extends StatelessWidget {
const SecondPage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Second Page"),
backgroundColor: Colors.red,
),
body: Center(
child: OutlinedButton(
child: const Text("Go Back To Main Page"),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}
 Navigate with named routes
Send data to a new screen
Return data from a screen

More details in this link

https://flutter.dev/docs/cookbook/navigation