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!
