Flutter Routing

 

Flutter Routing popular talk is a page jump. In Flutter by Navigator component management route navigation.

And it provides a way to manage the stack. Such as: Navigator.push and Navigator.pop
Flutter in two configurations provides us with a way of routing Jump: 1 , basic routing 2 , named Route

Flutter basic routing uses

E.g:

From HomePage jump assembly to SearchPage assembly

 

1 , it is necessary HomPage introduced into SearchPage.dart

import '../SearchPage.dart';

2 , in HomePage by the following method forwards

 

RaisedButton ( 
            Child: the Text ( "search jump to the page" ), 
            onPressed: () { 
              // routing jump 
              Navigator.of (context) .push ( 
                MaterialPageRoute ( 
                  Builder: (context) => SearchPage to () 
                ) 
              ); 

            } , 
            Color: Theme.of (context) .accentColor, 
            textTheme: ButtonTextTheme.primary 
        ),

Flutter basic route pass jump value

import 'package:flutter/material.dart';

import '../Form.dart';

class CategoryPage extends StatefulWidget {
  CategoryPage({Key key}) : super(key: key);

  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[ 
        RaisedButton ( 
          Child: the Text ( "Go to the form page" ), 
          onPressed: () { 

            Navigator.of (context) .push ( 
                MaterialPageRoute ( 
                  Builder: (context) => FormPage (title: 'I jump pass value ' ) 
                ) 
            ); 
          } 
        ) 
      ], 
    ); 
  } 
}

Flutter named Routing

 

1 , configure routing

 

import 'package:flutter/material.dart';

import 'pages/Tabs.dart';
import 'pages/Form.dart';
import 'pages/Search.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Tabs(),
      routes: {
        '/form':(context)=>FormPage(),
        '/search':(context)=>SearchPage(),
      }
    );
  }
}

 

2 , routing Jump

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
            child: Text("Search jump to the page" ), 
            onPressed: () { 
              // routing jump 
              Navigator.pushNamed (context, '/ Search' ); 
            }, 
            Color: Theme.of (context) .accentColor, 
            textTheme: ButtonTextTheme.primary 
        ) , 
        SizedBox (height: 20 is ),         

      ], 
    ); 
  } 
}

Flutter named jump routes pass values

 

import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
import 'pages/Search.dart';
import 'pages/Form.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final routes = {
    '/': (contxt) => Tabs(),
    '/search': (contxt) => SearchPage(),
    '/form': (context, {arguments}) => FormPage(arguments: arguments),
  };
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Tabs(),
        onGenerateRoute: (RouteSettings settings) {
　　　　　　// 统一处理
          final String name = settings.name;
          final Function pageContentBuilder = this.routes[name];
          if (pageContentBuilder != null) {
            if (settings.arguments != null) {
              final Route route = MaterialPageRoute(
                  builder: (context) => pageContentBuilder(context,
                      arguments: settings.arguments));
              return route;
            } else {
              final Route route = MaterialPageRoute(
                  builder: (context) => pageContentBuilder(context));
              return route;
            }
          }
        });
  }
}

By value

 

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
            child: Text("Search jump to the page" ), 
            onPressed: () { 
              // routing jump 
              Navigator.pushNamed (context, '/ Search' , arguments: {
                 "ID": 123 
              }); 
            }, 
            Color: Theme.of (context ) .accentColor, 
            textTheme: ButtonTextTheme.primary 
        ), 
        SizedBox (height: 20 is ),   
         RaisedButton ( 
            Child: the Text ( "jump to the product page" ), 
            onPressed: () { 
              Navigator.pushNamed (context, '/ product' ); 
            } 
        ),       

      ], 
    );
  }
}

 

Reception parameters:

import 'package:flutter/material.dart';

class SearchPage extends StatelessWidget {
  
  final arguments;

  SearchPage({this.arguments});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("搜索页面"),
      ) ,
      body: Text("搜索页面内容区域${arguments != null ? arguments['id'] : '0'}"),
    );
  }
}

Flutter naming individual disengagement path

Routes.dart

 

import 'package:flutter/material.dart';

import '../pages/Tabs.dart';
import '../pages/Form.dart';
import '../pages/Search.dart';
import '../pages/Product.dart';
import '../pages/ProductInfo.dart';

//配置路由
final routes={
      '/':(context)=>Tabs(),
      '/form':(context)=>FormPage(),
      '/product':(context)=>ProductPage(),
      '/productinfo':(context,{arguments})=>ProductInfoPage(arguments:arguments),
      '/search':(context,{arguments})=>SearchPage(arguments:arguments),
};

//固定写法
var onGenerateRoute=(RouteSettings settings) {
      // 统一处理
      final String name = settings.name; 
      final Function pageContentBuilder = routes[name];
      if (pageContentBuilder != null) {
        if (settings.arguments != null) {
          final Route route = MaterialPageRoute(
              builder: (context) =>
                  pageContentBuilder(context, arguments: settings.arguments));
          return route;
        }else{
            final Route route = MaterialPageRoute(
              builder: (context) =>
                  pageContentBuilder(context));
            return route;
        }
      }
};

main.dart

Import 'Package: Flutter / material.dart' ; 



Import 'routes / Routes.dart' ; 

void main () => RunApp (the MyApp ());
 class the MyApp the extends StatelessWidget {   
  
  @override 
  the Widget Build (BuildContext context) { 
    return MaterialApp (
       // Home: Tabs (),    
      initialRoute: '/',      // routing initialization of loading 
      onGenerateRoute: onGenerateRoute 
     
    ); 
  } 
}

The official document: https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments

 

---

 Flutter return to the previous page

 

Navigator.of(context).pop();

Flutter in the alternate route

 For example, we jump from page to the user center registerFirst page, and then from registerFirst by page pushReplacementNamed jump to the registerSecond page. This time when we click registerSecond back button when it will return directly to the user center.

 

Navigator.of(context).pushReplacementNamed('/registerSecond');

Flutter return route to the root

 

For example, we jump from the user center to registerFirst page, then from registerFirst jump page to registerSecond page, then from registerSecond jump to the registerThird page. This time we want is registerThird returned to the user after successful registration center. This time it is used the way back to the root route.

Navigator.of(context).pushAndRemoveUntil(
    new MaterialPageRoute(builder: (context) => new Tabs(index:1)),
);