Flutter page jump-basic routing

Generally speaking, the routing in Flutter is that the page jump is managed by the Navigator component in Flutter.
It also provides a way to manage the stack. For example: Navigator.push and Navigator.pop
Flutter provides us with two ways to configure routing jumps: 1, basic routing 2, named routing

Normal jump

First page

import 'package:flutter/material.dart';

import 'SecondPage.dart';  /// 引入我们的 SecondPage 页面，如果在一个 .dart 中写的可以不用写
void main() {
  runApp(MaterialApp(
    title: 'Flutter',
    home: FistPage(),
  ));
}

/// 第一个页面
class FistPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("第一个页面"),
      ),
      body: new Center(
        child: new TextButton(
            child: new Text("点击跳转"),
            onPressed: () {
              /// 跳转到新的页面我们需要调用 Navigator.push方法
              Navigator.push(
                  context,
                  new MaterialPageRoute(
                      builder: (context) => new SecondPage()));
            }),
      ),
    );
  }
}

Second page

import 'package:flutter/material.dart';

///   第二个页面
class SecondPage extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("第二个页面"),
      ),
      body: new Center(
        //onPressed  点击事件
        child: new TextButton(
            child: new Text("返回上一个页面"),
            onPressed: () {
              /// 关闭当前页面，返回上一个页面
              Navigator.pop(context);
            }),
      ),
    );
  }
}

effect

Click to enter our second page

Carry parameter jump

import 'package:flutter/material.dart';
import 'SecondPage.dart';  /// 引入我们的 SecondPage 页面，如果在一个 .dart 中写的可以不用写
void main() {
  runApp(MaterialApp(
    title: 'Flutter',
    home: FistPage(),
  ));
}

/// 第一个页面
class FistPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("第一个页面"),
      ),
      body: new Center(
        child: Column(
          children: [
             TextButton(
                child: new Text("点击跳转"),
                onPressed: () {
                  /// 跳转到新的页面我们需要调用 Navigator.push方法
                  Navigator.push(
                      context,
                      new MaterialPageRoute(
                          builder: (context) => new SecondPage()));
                }),

             TextButton(
                child: new Text("带参跳转"),
                onPressed: () {
                  /// 跳转到新的页面我们需要调用 Navigator.push方法
                  Navigator.push(
                      context,
                      new MaterialPageRoute(
                          builder: (context) => new SecondPage(username: "afeng最帅",password: "123456",)));
                }),
          ],
        )
      ),
    );
  }
}

import 'package:flutter/material.dart';

///   第二个页面
class SecondPage extends StatelessWidget {
String username,password;
SecondPage({this.username = "快点呀",this.password ="等的花都要谢啦"});  // 如果上一个页面没有传递参数我们设置一个默认值

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("第二个页面"),
      ),
      body: new Center(
        //onPressed  点击事件
        child:Column(
          children: [
            Row(
              children: [
                Text("用户名："),
                Text(this.username)
              ],
            ),
            Row(
              children: [
                Text("密码："),
                Text(this.password)
              ],
            )
          ],
        )
      ),
    );
  }
}

When the effect does not pass parameters:

Jump with parameters

Flutter Chinese Network

Link: routing .

Whispers

There will definitely be fewer and fewer friends, because the direction will be inconsistent when walking, so like-minded people can understand the same scenery.