Flutter - Page Navigation, Navigator and Routes - How to get Result from Screen

How to implement page navigation in flutter? In Android we use Intents to Navigate differernt pages

Similarly Flutter also has paginavigation.

To implement this page navigation in Flutter we need to use two classes Navigator and Route.

The Navigator is responsible for the stack structure processing of the page and the route processing of the Route complex page

The Navigator used the stack structure to manage pages.

When a page needs to be added, the stack method is used, when we need to exit a page use the pop-out method

Push and pop will handle all stack elements

Let’s Start Code

Create Two Pages

First, we will create two pages, each of which contains a button. Clicking the button on the first page will jump to the second page, and clicking the button on the second page will return to the first page

class FirstPage extends StatelessWidget{

 @override

 Widget build(BuildContext context) {

   // TODO: implement build

   return Scaffold(

     appBar: AppBar(title: Text(" First Page"), backgroundColor: Colors.pink,),

     body: Center(

       child: RaisedButton(

         onPressed: (){

 

         },

         child: Text("Second Page", style: TextStyle(color: Colors.white),),

       color: Colors.pink,

       ),

     ),

   );

 }

 

}

 

class SeconPage extends StatelessWidget{

 @override

 Widget build(BuildContext context) {

   // TODO: implement build

   return Scaffold(

     appBar: AppBar(title: Text(" Second Page"), backgroundColor: Colors.pink,),

     body: Center(

       child: RaisedButton(

         onPressed: (){

 

         },

         child: Text("Navigate to First Page", style: TextStyle(color: Colors.white),),

         color: Colors.pink,

       ),

     ),

   );

 }

 

}

 

Now let’s jump to second page

In order to  jump to the second page, we will use the Navigator.push method. This push method will add one Route to the routing heap managed by Navigator.

But the Push method requires one Route, but Route where does it come from? We can create our own Route, or use it MaterialPageRoute. MaterialPageRoute Conveniently, it will jump to a new page using platform-specific animations.

In the FirstScreen Widget build method, update the onPressedcallback

 

 

onPressed: () {

 Navigator.push(

   context,

   MaterialPageRoute(builder: (context) => SeconPage()),

 );

},

 

Return to the first

onPressed: () {

 Navigator.pop(context);

},

Complete code

class NavigationDemo extends StatelessWidget{

 @override

 Widget build(BuildContext context) {

   // TODO: implement build

   return FirstPage();

 }

 

}

 

class FirstPage extends StatelessWidget{

 @override

 Widget build(BuildContext context) {

   // TODO: implement build

   return Scaffold(

     appBar: AppBar(title: Text(" First Page"), backgroundColor: Colors.pink,),

     body: Center(

       child: RaisedButton(

         onPressed: () {

           Navigator.push(

             context,

             MaterialPageRoute(builder: (context) => SeconPage()),

           );

         },

         child: Text("Second Page", style: TextStyle(color: Colors.white),),

       color: Colors.pink,

       ),

     ),

   );

 }

 

}

 

class SeconPage extends StatelessWidget{

 @override

 Widget build(BuildContext context) {

   // TODO: implement build

   return Scaffold(

     appBar: AppBar(title: Text(" Second Page"), backgroundColor: Colors.pink,),

     body: Center(

       child: RaisedButton(

         onPressed: () {

           Navigator.pop(context);

         },

         child: Text("Navigate to First Page", style: TextStyle(color: Colors.white),),

         color: Colors.pink,

       ),

     ),

   );

 }

 

}

 

 

Routing table (Named Routes)

Flutter also provided Navigation with NamedRoutes

The simple way is to define all routes in the runApp, so that centralized management is possible, which is also a very recommended approach

 

A MaterialApp is the easiest way to set it up, and the MaterialApp's home becomes the route at the bottom of the navigator stack. To push a new route on the stack, you can create a MaterialPageRoute instance with builder capabilities

class NamedRoutes extends StatelessWidget{

 @override

 Widget build(BuildContext context) {

   // TODO: implement build

   return MaterialApp(

     home: HomePage(),

     routes: <String,WidgetBuilder>{

       '/f':(BuildContext ctx)=> FisrtPage(),

       '/s':(BuildContext ctx)=> SecondPage(),

       '/t':(BuildContext ctx)=> ThirdPage(),

     },

   );

 }

 

}

 

class HomePage extends StatelessWidget{

 @override

 Widget build(BuildContext context) {

   // TODO: implement build

   return Scaffold(

     appBar: AppBar(title: Text("HomePage"),backgroundColor: Colors.pink,),

     body: Center(

       child: Column(

         mainAxisSize: MainAxisSize.min,

         children: <Widget>[

           RaisedButton(

             color: Colors.pink,

             onPressed: (){

               Navigator.pushNamed(context, "/f");

            },child: Text("FirstPage",style: TextStyle(color: Colors.white)),),

 

           RaisedButton(

 

             color: Colors.pink,

             onPressed: (){

               Navigator.pushNamed(context, "/s");

               },child: Text("SecondPage",style: TextStyle(color: Colors.white)),),

 

           RaisedButton(

             color: Colors.pink,

             onPressed: (){

               Navigator.pushNamed(context, "/t");

               },child: Text("ThirdPage",style: TextStyle(color: Colors.white),),),

         ],

       ),

     ),

   );

 }

 

}

 

class FisrtPage extends StatelessWidget{

 @override

 Widget build(BuildContext context) {

   // TODO: implement build

   return Scaffold(

     appBar: AppBar(title: Text("FirstPage"),backgroundColor: Colors.pink,),

     body: Center(

       child: Column(

         children: <Widget>[

           RaisedButton(onPressed: (){Navigator.pop(context,"From First page");},child: Text("FirstPage"),)

         ],

       ),

     ),

   );

 }

 

}

 

class SecondPage extends StatelessWidget{

 @override

 Widget build(BuildContext context) {

   // TODO: implement build

   return Scaffold(

     appBar: AppBar(title: Text("SecondPage"),backgroundColor: Colors.pink,),

     body: Center(

       child: Column(

         children: <Widget>[

           RaisedButton(onPressed: (){Navigator.pop(context);},child: Text("SecondPage"),)

         ],

       ),

     ),

   );

 }

 

}

 

class ThirdPage extends StatelessWidget{

 @override

 Widget build(BuildContext context) {

   // TODO: implement build

   return Scaffold(

     appBar: AppBar(title: Text("ThirdPage"),backgroundColor: Colors.pink,),

     body: Center(

       child: Column(

         children: <Widget>[

           RaisedButton(onPressed: (){Navigator.pop(context);},child: Text("ThirdPage"),)

         ],

       ),

     ),

   );

 }

 

}

 

To get the result from called page by

onPressed: (){

  Navigator.pushNamed(context, "/f").then((value){

    print(value);

});

}

After pop the screen the then() method will execute and print the result

Navigation switch animation

The default navigation switch animation is a pop-up process from bottom to top on Android, and a pan-to-left process from iOS

In order to unify, you can customize a route, including the color and behavior of the modal barrier of the route, and the animation conversion of other aspects of the route


You can find the example of Navigation Screen animation at http://rrtutors.com/description/53




Related Questions View All