Flutter named route and named route pass value

In the previous blog, we learned about common routing and common routing to pass values. Today we learn named routing and named routing to pass values, which is more suitable for medium and large projects. It can achieve the effect of unified management of routing.

The effect we achieved is to jump from the homepage to the product page, then jump to the product detail page, and then return to the previous page.

The following is the code of all the pages involved, you can copy it to run, refer to your own path to modify the file path involved:
main.dart

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

void main() => runApp(MyApp());//入口函数

class MyApp extends StatelessWidget {

  final routes = {
    '/form': (context) => Formpage(),
    '/search': (context) => Searchpage()
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //home: Tabs(),
      initialRoute:'/',//初始化加载的路由
      onGenerateRoute: onGenerateRoute//把routes里面的代码给到这里执行
    );
  }
}

Routes.dart routing configuration file.
This is a very important configuration file, just remember it.

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


//配置路由，以后所有的跳转的页面都可以再这里完成
final routes = {
  '/':(context)=>Tabs(),//配置根目录
  '/form': (context) => Formpage(),
  'search': (context,{arguments}) => Searchpage(arguments:arguments),
  '/productinfo':(context,{arguments})=>Productinfopage(arguments:arguments),
  'product':(context)=>Productpage()
};

//固定写法，理解不了就记住。
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;
    }
  }
};

The code of the Tabs.dart page is the same as the code of the previous ordinary routing.
Manage pages for home navigation

home.dart Home

import 'package:flutter/material.dart';
import '../Search.dart';

class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
            child: Text("跳转到商品页面"),
            onPressed: () {
              Navigator.pushNamed(context, 'product');
            })
      ],
    );
  }
}

Product.dart product page

import 'package:flutter/material.dart';

class Productpage extends StatefulWidget {
  @override
  _ProductpageState createState() => _ProductpageState();
}

class _ProductpageState extends State<Productpage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("商品页面")),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
                child: Text("跳转到商品详情"),
                onPressed: () {
                  Navigator.pushNamed(context, '/productinfo', arguments: {"pid":"master最帅"});
                })
          ],
        )
      );
  }
}

Productinfo.dart product detail page

import 'package:flutter/material.dart';

class Productinfopage extends StatefulWidget {
  var arguments;
  Productinfopage({Key key, this.arguments}) : super(key: key);

  @override
  _ProductinfopageState createState() =>
      _ProductinfopageState(arguments: this.arguments);
}

class _ProductinfopageState extends State<Productinfopage> {
  Map arguments;
  _ProductinfopageState({this.arguments}); //构造函数

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("详情页面"),),
      body: Container(
        child: Text("pid=${arguments["pid"]}"),
      ),
    );
  }
}

The difficulty is to extract the code of each component and route configuration. Gradually understand.

Attached renderings:



What we have achieved now is to return to the previous page level by level . Here is a question for everyone, how to return to the root directory? ?
Welcome to leave a message, exchange and learn~