Flutter MaterialPageRoute


简介

页面跳转携带参数替换整个屏幕的页面路由。

  • 对于Android,页面的进入以下方滑动向上,页面退出,以上方滑动向下方。在ios上,页面进度从右边滑入,退出相反。
  • 默认情况下,当路由器被另外一个替换时,前一个路由将被保留在内存中,如果希望在不需要的时候能够释放资源,请将maintainState设置为false

实例演示

import 'package:flutter/material.dart';

class User {
  final String account, email;

  const User({
    this.account,
    this.email,
  });
}

class FirstPage extends StatefulWidget {
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  var _usernameController =  TextEditingController();
  var _emailController =  TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Padding(
          child:  Text(
            "账号登录",
            textAlign: TextAlign.center,
            style:  TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
          ),
          padding: EdgeInsets.only(bottom: 10.0),
        ),
        TextFormField(
          decoration: InputDecoration(labelText: 'account'),
          controller: _usernameController,
        ),
        TextFormField(
          decoration: InputDecoration(labelText: "email"),
          controller: _emailController,
        ),
         RaisedButton(
          child: Text("点击跳转"),
          onPressed: () {
            var route =  MaterialPageRoute(
              builder: (BuildContext context) =>  SecondPage(
                  value: User(
                      account: _usernameController.text,
                      email: _emailController.text)),
            );
            Navigator.of(context).push(route);
          },
        )
      ],
    );
  }
}

class SecondPage extends StatefulWidget {
  final User value;

  SecondPage({Key key, this.value}) : super(key: key);

  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar:  AppBar(
        title: Text("MaterialPageRoute2"),
      ),
      body:  Container(
        child:  Center(
          child: Column(
            children: <Widget>[
              Container(
                  padding: EdgeInsets.only(top: 30.0),
                  child:  Text("登陆成功!!!",
                      style: TextStyle(
                          fontSize: 28, fontWeight: FontWeight.bold))),
              Padding(
                child:  Text(
                  'account:${widget.value.account}',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                padding: EdgeInsets.only(bottom: 20.0, top: 40.0),
              ),
              Padding(
                child:  Text(
                  'email:${widget.value.email}',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                padding: EdgeInsets.only(bottom: 20.0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}