10天学会flutter DAY8 flutter 玩转路由与导航

• • 路由管理

  • • 命名路由

    • 自定义路由切换动画

    • 注意点

    • • 解决一

      • 解决二

      • 解决三

  • 完善第一个页面

路由管理

​ 路由(Route)在移动开发中通常指页面（Page），在Android中通常指一个Activity。所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。这和原生开发类似，无论是Android还是iOS，导航管理都会维护一个路由栈，路由入栈(push)操作对应打开一个新页面，路由出栈(pop)操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈。

import 'package:flutter/material.dart';



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



class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return new MaterialApp(

      title: 'Flutter Demo',

      home: MainRoute(),

    );

  }

}



class MainRoute extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text("主页"),

      ),

      body: Column(

        children: <Widget>[

          Text("第一个页面"),

          RaisedButton(

            onPressed: () {

              //导航到新路由

              Navigator.push(context, MaterialPageRoute(builder: (context) {

                return SecondRoute();

              }));

            },

            child: Text("进入第二页"),

          )

        ],

      ),

    );

  }

}



class SecondRoute extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text("第二页"),

      ),

      body: Column(

        children: <Widget>[

          Text("第一个页面"),

          RaisedButton(

            onPressed: () {

              //路由pop弹出

              Navigator.pop(context);

            },

            child: Text("返回"),

          )

        ],

      ),

    );

  }

}

命名路由

​ 命名路由（Named Route）即给路由起一个名字，然后可以通过路由名字直接打开新的路由。这为路由管理带来了一种直观、简单的方式。

import 'package:flutter/material.dart';



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



class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return new MaterialApp(

      title: 'Flutter Demo',

      //home: MainRoute(),

      //注册路由表

      routes: {

          /// '/'是特殊地址，第一个页面

        "/" :(context) => MainRoute(),

        "new_page": (context) => SecondRoute(),

      },

    );

  }

}



class MainRoute extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text("主页"),

      ),

      body: Column(