Flutter基础之Navigate教程(含demo)

Flutter基础之Navigate教程

大部分app都包含多个页面来显示信息。例如，一个app用一页屏幕来显示商品信息。用户可以通过点击商品图片显示一个详情页来获得更多信息。

专业用语： 在Flutter里面，屏幕和页面统称为routes。

在Android里，一个route相当于一个Activity。
在iOS里，一个route等于一个ViewController。
在Flutter里，一个route仅仅是一个widget。

介绍

下面将介绍一下如何在俩个routes之间进行导航，共三步：

1. 创建两个routes
2. 使用Navigator.push()从第一页面导航到第二个
3. 通过Navigator.pop() 从第二个页面返回第一个

demo

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}