Scribd
Upload
37 views

Chapter 7 - Routes Navigation

This document discusses navigation in Flutter. It provides an overview of Navigator 1.0 and introduces Navigator 2.0. Navigator 2.0 exposes the route stack and allows more control over navigation. It also covers navigating with named routes, sending data between screens, and returning data from screens. Code examples are provided to demonstrate basic navigation using Navigator.push() and Navigator.pop().

Uploaded by

Mo Sa
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
37 views

Chapter 7 - Routes Navigation

This document discusses navigation in Flutter. It provides an overview of Navigator 1.0 and introduces Navigator 2.0. Navigator 2.0 exposes the route stack and allows more control over navigation. It also covers navigating with named routes, sending data between screens, and returning data from screens. Code examples are provided to demonstrate basic navigation using Navigator.push() and Navigator.pop().

Uploaded by

Mo Sa
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/ 13

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

You might also like