[shutter] shutter page Jump (route | navigator | page close)

One 、Flutter Page Jump

---

Flutter Page Jump :

• route ( Route ) : Each page can set a route name , Register the name in the route , Then you can jump to the page through the route name ;

//  Realize page Jump through route name  ,  Jump through the route name string  Navigator.pushNamed(context, "LayoutPage");

• Navigation ( Navigator ) : adopt Navigator Direct jump ;

//  adopt  Navigator  Realize page Jump  ,  Jump directly through the page component object Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));

Two 、 Routing information registration

---

Registered routing : stay MaterialApp In the root node component routes Field register route , Routing information is stored in Map<String, WidgetBuilder> Collection , The key is the route name , Value is page Widget Components ;

Code example :

class MyApp extends StatelessWidget { 
      @override  Widget build(BuildContext context) { 
        return MaterialApp(      //  Set title       title: 'Flutter Demo',      //  Set the theme       theme: ThemeData(        primarySwatch: Colors.blue,      ),      //  Set the main components of the interface       home: Scaffold(        //  Set the title bar         appBar: AppBar(          title: Text(" Routing and navigation "),        ),        //  Set the main components of the interface         body: RouteNavigator(),      ),      //  Configure the routing       routes: <String, WidgetBuilder>{ 
            "StatelessWidgetPage" : (BuildContext context) => StatelessWidgetPage(),        "StatefulWidgetPage" : (BuildContext context) => StatefulWidgetPage(),        "LayoutPage" : (BuildContext context) => LayoutPage()      },    );  }}

Code parsing : The function of the above code is to register the following routing information ,

StatelessWidgetPage The route name corresponding to the page component is " StatelessWidgetPage " character string ,

StatefulWidgetPage The route name corresponding to the page component is " StatefulWidgetPage " character string ,

LayoutPage The route name corresponding to the page component is " LayoutPage " character string ,

3、 ... and 、 Realize page Jump through route name

---

Realize page Jump through route name : call Navigator Of pushNamed Method , Realize page Jump , The first parameter is BuildContext context , The second parameter is the route name string ; The code format is as follows :

Navigator.pushNamed( Context object , " Routing name ");

Code example : The function of the following code is to jump to “LayoutPage” The page corresponding to the route name ;

RaisedButton(  onPressed: (){ 
        Navigator.pushNamed(context, "LayoutPage");  },  child: Text(" Jump to the page by route name 1"),),

Four 、 Realize page Jump through route name

---

call Navigator.push Method to realize page Jump , Here, the second parameter is passed in MaterialPageRoute<T> Type object , The code is as follows :

Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));

Code example : Jump to LayoutPage Interface ;

RaisedButton(  onPressed: (){ 
        Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));  },  child: Text(" Navigate to the page 1"),),

5、 ... and 、 Exit the screen

---

stay AppBar Set the back button click event in the component , call Navigator.pop(context) Method , You can exit the current interface ;

//  Exit the current interface  Navigator.pop(context);

Code example :

import 'package:flutter/material.dart';class LayoutPage extends StatefulWidget { 
      @override  _LayoutPageState createState() => _LayoutPageState();}class _LayoutPageState extends State<LayoutPage> { 
      // This widget is the root of your application.  @override  Widget build(BuildContext context) { 
        return MaterialApp(      title: ' Example layout components ',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: Scaffold(        //  Top title bar         appBar: AppBar(          title: Text(' Example layout components '),          //  Back off button ,  Click this button to exit the interface           leading: GestureDetector(            onTap: (){ 
                  //  Exit interface method               Navigator.pop(context);            },            child: Icon(Icons.arrow_back_ios),          ),        ),		body:  Main components omitted ,	  )    );  }}

6、 ... and 、 Complete code example

---

Complete code example :

import 'package:flutter/material.dart';import 'package:flutter_cmd/StatelessWidgetPage.dart';import 'LayoutPage.dart';import 'StatefulWidgetPage.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { 
      @override  Widget build(BuildContext context) { 
        return MaterialApp(      //  Set title       title: 'Flutter Demo',      //  Set the theme       theme: ThemeData(        primarySwatch: Colors.blue,      ),      //  Set the main components of the interface       home: Scaffold(        //  Set the title bar         appBar: AppBar(          title: Text(" Routing and navigation "),        ),        //  Set the main components of the interface         body: RouteNavigator(),      ),      //  Configure the routing       routes: <String, WidgetBuilder>{ 
            "StatelessWidgetPage" : (BuildContext context) => StatelessWidgetPage(),        "StatefulWidgetPage" : (BuildContext context) => StatefulWidgetPage(),        "LayoutPage" : (BuildContext context) => LayoutPage()      },    );  }}class RouteNavigator extends StatefulWidget { 
      @override  _RouteNavigatorState createState() => _RouteNavigatorState();}class _RouteNavigatorState extends State<RouteNavigator> { 
      @override  Widget build(BuildContext context) { 
        return Container(      child: Column(        children: <Widget>[          RaisedButton(            onPressed: (){ 
                  Navigator.pushNamed(context, "LayoutPage");            },            child: Text(" Jump to the page by route name 1"),          ),          RaisedButton(            onPressed: (){ 
                  Navigator.pushNamed(context, "StatefulWidgetPage");            },            child: Text(" Jump to the page by route name 2"),          ),          RaisedButton(            onPressed: (){ 
                  Navigator.pushNamed(context, "StatelessWidgetPage");            },            child: Text(" Jump to the page by route name 3"),          ),          RaisedButton(            onPressed: (){ 
                  Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));            },            child: Text(" Navigate to the page 1"),          ),          RaisedButton(            onPressed: (){ 
                  Navigator.push(context, MaterialPageRoute(builder: (context) => StatefulWidgetPage()));            },            child: Text(" Navigate to the page 2"),          ),          RaisedButton(            onPressed: (){ 
                  Navigator.push(context, MaterialPageRoute(builder: (context) => StatelessWidgetPage()));            },            child: Text(" Navigate to the page 3"),          ),        ],      ),    );  }}

Example of setting the fallback button :

import 'package:flutter/material.dart';class LayoutPage extends StatefulWidget { 
      @override  _LayoutPageState createState() => _LayoutPageState();}class _LayoutPageState extends State<LayoutPage> { 
      // This widget is the root of your application.  @override  Widget build(BuildContext context) { 
        return MaterialApp(      title: ' Example layout components ',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: Scaffold(        //  Top title bar         appBar: AppBar(          title: Text(' Example layout components '),          //  Back off button ,  Click this button to exit the interface           leading: GestureDetector(            onTap: (){ 
                  //  Exit interface method               Navigator.pop(context);            },            child: Icon(Icons.arrow_back_ios),          ),        ),		body:  Main components omitted ,	  )    );  }}

Operation effect display :

7、 ... and 、 Related resources

---

Reference material :

• Flutter Official website : https://flutter.dev/
• Flutter Developing documents : https://flutter.cn/docs ( Strongly recommend )
• official GitHub Address : https://github.com/flutter
• Flutter The Chinese community : https://flutter.cn/
• Flutter Practical tutorial : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart Chinese document : https://dart.cn/
• Dart Developer website : https://api.dart.dev/
• Flutter Chinese net ( unofficial , The translation is very good ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter Related issues : https://flutterchina.club/faq/ ( It is recommended to watch it at the introductory stage )

Blog source download :

• GitHub Address : https://github.com/han1202012/flutter_cmd ( Keep updating with the progress of the blog , There may not be the source code of this blog )

• Blog source snapshot : https://download.csdn.net/download/han1202012/15484718 ( The source code snapshot of this blog , You can find the source code of this blog )