【声明：】本文是作者AWeiLoveAndroid原创，版权归作者 AWeiLoveAndroid 所有，侵权必究。本文首发在公众号Flutter那些事。如若转发，请注明作者和来源地址！未经授权，严禁私自转载！
前面的文章我们介绍了Flutter的一些基础知识点，基本上都是静态为主的，今天我们开始讲一下Flutter的交互。做过前端的朋友，或者移动端的朋友们，应该对路由这个词语是比较熟悉的。不熟悉的朋友也不要着急，我们这篇文章讲的就是Flutter中的路由，让大家掌握Flutter中的路由操作方式，以及数据交互方式。你不光可以学到路由知识，还可以学到路由中如何避免入坑。文章比较长，希望大家可以收藏起来慢慢看。喜欢的话，就打赏一下吧，感谢大家的支持。
Flutter系列博文链接 ↓：
工具安装：
Flutter基础篇：
- 谷歌Flutter1.0正式版发布
- Flutter基础篇（1）-- 跨平台开发框架和工具集锦
- Flutter基础篇（2）-- 老司机用一篇博客带你快速熟悉Dart语法
- Flutter基础篇（3）-- Flutter基础全面详解
- Flutter基础篇（4）-- Flutter填坑全面总结
- Flutter基础篇（5）-- Flutter代码模板，解放双手，提高开发效率必备
- Flutter基础篇（6）-- 水平和垂直布局详解
- Flutter基础篇（7）-- Flutter更新错误全面解决方案(图文+视频讲解)
- Flutter基础篇（8）-- Flutter for Web详细介绍
- Flutter基础篇（9）-- 手把手教你用Flutter实现Web页面编写
- Flutter1.9升级体验总结（Flutter Web 1.9最新版本填坑指南）
Flutter进阶篇：
Dart语法系列博文链接 ↓：
Dart语法基础篇：
Dart语法进阶篇：
一、什么是路由
路由最开始在前端领域是很流行的，路由技术最近几年开始在移动端也逐渐蔓延开来。路由主要是用于页面跳转的一种方式，方便管理页面之间的跳转和互相传递数据，进行交互。使用路由，我们轻松实现从一个页面转换到另一个页面，系统底层其实是在帮我们将小部件执行入栈出栈操作，当然至于它们如何入栈出栈就不是本篇文章的重点了。
二、Flutter路由的详细使用
（一）初始Navigator
在Android中，我们开启新的页面是Activity。在iOS中，我们开启新的页面是ViewControllers。在Flutter中，每一个页面都是小部件， 我们如何开启到新的页面呢？Flutter给我们提供了一个API,叫做Navigator
Navigator 继承自 StatefulWidget，它也是小组件，它有很多相关静态函数，可以帮我们达到页面跳转和数据交互的功能：
- push 将设置的router信息推送到Navigator上，实现页面跳转。
- of 主要是获取 Navigator最近实例的好状态。
- pop 导航到新页面，或者返回到上个页面。
- canPop 判断是否可以导航到新页面
- maybePop 可能会导航到新页面
- popAndPushNamed 指定一个路由路径，并导航到新页面。
- popUntil 反复执行pop 直到该函数的参数predicate返回true为止。
- pushAndRemoveUntil 将给定路由推送到Navigator，删除先前的路由，直到该函数的参数predicate返回true为止。
- pushNamed 将命名路由推送到Navigator。
- pushNamedAndRemoveUntil 将命名路由推送到Navigator，删除先前的路由，直到该函数的参数predicate返回true为止。
- pushReplacement 路由替换。
- pushReplacementNamed 这个也是替换路由操作。推送一个命名路由到Navigator，新路由完成动画之后处理上一个路由。
- removeRoute 从Navigator中删除路由，同时执行Route.dispose操作。
- removeRouteBelow 从Navigator中删除路由，同时执行Route.dispose操作，要替换的路由是传入参数anchorRouter里面的路由。
- replace 将Navigator中的路由替换成一个新路由。
- replaceRouteBelow 将Navigator中的路由替换成一个新路由，要替换的路由是是传入参数anchorRouter里面的路由。
（二）路由的操作方式
（1）使用Navigator.push实现发送路由，Navigator.pop返回上一个页面。
push函数的参数1是 上下文，参数2是 Router，我们这里使用的是 Router的孙子类（好几层继承的子类）MaterialPageRouter 这个类。该类必须要传入一个闭包函数 WidgetBuilder，该闭包函数的参数是 BuildContext对象，我们这里使用的是匿名函数的形式，加上胖箭头符号，简写成这样：builder: (context) => new App(); 相信大家看到这里也基本能看明白这句表达式的含义。返回上一个页面使用 Navigator.pop(context);
页面A 的代码如下图所示：
目标页面 的代码如下图所示：
