Scribd
Upload
4 views12 pages

Navigation

Uploaded by

mohamed.nader1797
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
4 views12 pages

Navigation

Uploaded by

mohamed.nader1797
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/ 12

FLUTTER DIPLOMA

NAVIGATION
Navigation
• Navigation
• Drawer
Navigation:
- If your app consists of more than one screen, then you need to move between
them,How?
- Your application has a built in stack( LIFO ) = Last In First Out. If you move to another
screen then you have two choices:
1. Replace current screen with new screen.
2. Put new screen above old screen, so if you want to return back, you can do it
easily. How can you do that?
- Syntax :
- Case1: Navigator.pushReplacement(context, MaterialPageRoute(builder: (context)
=> Your_New_Screen(),));
- Case2: Navigator.push(context,MaterialPageRoute(builder: (context)
=> Your_New_Screen()));
Navigation cont:

- You can send data to Your_New_Screen using parameters.


- Ex:

class SecondScreen extends


StatelessWidget {
Go to Second
final String name;
const SecondScreen({Key? key,required
ElevatedButton( this.name}) : super(key: key);
onPressed: (){
Navigator.pushReplacement(context, @override
MaterialPageRoute(builder: (context) => Widget build(BuildContext context) {
SecondScreen(name:”Adel Ahmed”),)); return Scaffold(body: Center(child:
}, Text(name),),);
child:Text(‘Go to Second'), }
) }
Navigate to a new screen and back
body: Center(
child: ElevatedButton(
child: const Text('Open route'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SecondRoute()), ); }, ),),);}}
class SecondRoute extends StatelessWidget {
const SecondRoute({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Route'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);},
child: const Text('Go back!'), ), ),); }}
Navigation and routing:

• Navigator a widget that manages a stack of Route objects.


• Route an object managed by a Navigator that represents a screen, typically
implemented by classes like MaterialPageRoute.
BREAK
Navigation and routing:
MaterialApp(
routes: {
'/': (context) => HomeScreen(),
'/details': (context) => DetailScreen(),})}}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: FlatButton(
child: Text('View Details'),
onPressed: () {
Navigator.pushNamed(
context,
'/details',);})))}}
Navigation and routing EX cont:
class DetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: FlatButton(
child: Text('Pop!'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}
Navigation

• Navigation
• Drawer
UserAccountsDrawerHeader
return Scaffold(appBar: AppBar(backgroundColor: Colors.deepPurpleAccent,
title: Text(
"Drawer Interactive Example",
style: TextStyle(color: Colors.white),), ),drawer: Drawer(
child: ListView(
children: <Widget>[
Container(child: UserAccountsDrawerHeader(
currentAccountPicture: CircleAvatar(backgroundImage: NetworkImage(
"https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rb-1.2.1
&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60"),),
accountName: Text(
"John Paul",
style: Theme.of(context).textTheme.headline6,),
accountEmail: Text(
"[email protected]",
style: Theme.of(context).textTheme.bodyText1,), ),),
THANK YOU!

You might also like