Related applications of Flutter ordinary routing

Demystifying the problem of the previous issue:
link: link .
To achieve multiple navigation at the bottom, we can add an attribute,
type: BottomNavigationBarType.fixed,
write this code in the bottom navigation component. Then you can put multiple navigation icons.
If you don’t add this attribute, when there are more navigation icons at the bottom, the previous ones will be squeezed out. You can try it~

Now let's start the new content:
First of all, what is routing? In layman's terms, it is a page jump .

To switch pages, in flutter is to switch components.

Today, let’s take a look at one of the two configuration methods of routing , ordinary routing and routing value transfer
practical scenarios: small projects

(1) Effect picture and page description
Click the form button in the category, it will jump to the form page,
click the floating button at the bottom to return to the previous page

In addition, the returned arrow is automatically generated. No need to do it yourself.

(2) Implementation points
Navigator.of(context).push() Jump
Navigator.of(context).push() Return
The floating button at the bottom is floatingActionButton

(3) Code implementation

According to this directory structure, create a form file

The specific code implementation is as follows:
main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Tabs());
  }
}

category.dart

import 'package:flutter/material.dart';
import '../Form.dart';//参照自己的路径写
class Categorypage extends StatefulWidget {
  @override
  _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: Text("跳转到表单页面并传值"),
            onPressed: () {//监听事件
              //页面跳转即路由跳转
               Navigator.of(context).push(
                 MaterialPageRoute(
                   builder: (context)=>Formpage(title: "我是跳转传值",)//箭头函数调用formpage组件
                  
                  //  builder:(context){
                  //    return Formpage()
                  //  }//跳转的另一写法
               ));
            },
            color: Theme.of(context).accentColor,
            textTheme: ButtonTextTheme.primary),
      ],
    );
  }
}

Tabs.dart file
code refer to this part of the code in the previous blog

Form.dart

import 'package:flutter/material.dart';

class Formpage extends StatelessWidget {
  //const Formpage({Key key}) : super(key: key);//构造函数或者构造方法，在这里可有可无
  
  String title;
  Formpage({this.title = "表单"});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton( //浮动按钮
        child: Text("返回"),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text("我是表单页面"),
          ),
          ListTile(
            title: Text("我是表单页面"),
          )
        ],
      ),
    );
  }
}

Do you have any questions? Welcome to ask