Flutter是一款Google产品，用于构建混合移动应用程序，Dart作为编码语言。

Flutter中的应用程序页面是一个Widget，描述了所描绘的UI。要制作一个应用程序，您需要许多这些页面，显示多种功能。创建新页面后，这一切都很好。但是，你如何在它们之间跳转？

非常简单：使用Flutter SDK中内置的Navigator类。

Navigator

Navigator是另一个Widget，它以类似堆栈的格式管理应用程序的页面。在导航器中使用时，全屏页面称为路径。Navigator的工作方式类似于普通的堆栈实现。它有两个众所周知的方法，push 和pop。

push：推送方法用于将另一个路由添加到当前堆栈的顶部。新页面显示在上一页面上。
pop：pop方法从堆栈中删除最顶层的路由。这会向用户显示上一页。

在这篇文章中，我将展示：

两种导航方式
如何将数据传递到下一页。

导航实现

push 方法

在此方法中，使用MaterialPageRoute该类创建新路由。在其中创建新页面（窗口小部件）。这两个创建语句包含在push方法中，并将此页面添加到堆栈的顶部。

为了显示一个简单的例子，我使用的是以前的repo和博客文章中的代码。我编辑它以在CustomCard组件上包含一个按钮。此按钮使用该push方法，同时在其中创建新路径和页面。

Widget build(BuildContext context) {
 return Card(
 child: Column(
 children: <Widget>[
 Text('Card $index'),
 FlatButton(
 child: Text("Press Me"),
 onPressed: () {
 Navigator.push(context, MaterialPageRoute<void>(
 builder: (BuildContext context) {
 return Scaffold(
 appBar: AppBar(title: Text('My Page')),
 body: Center(
 child: FlatButton(
 child: Text('POP'),
 onPressed: () {
 Navigator.pop(context);
 },
 ),
 ),
 );
 },
 ));
 }),
 ],
 ));
}

回想起来，应用程序有很多页面，而且往往是复杂的编码。要继续创建新页面并不容易。如果从许多不同的区域访问页面，则尤其如此。您可能会忘记每条相同路线的代码。

因此，在第二种方法中，页面创建一次，但作为路径添加到应用程序的入口点，main.dart。这些路由被命名为文件路径，因为应用程序的根页面是路径/。

您首先构建一个新的应用页面，如下所示：

class SecondPage extends StatelessWidget {
@override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('Second Page'),
 ),
 body: Center(
 child: RaisedButton(
 child: Text('Back To HomeScreen'),
 color: Theme.of(context).primaryColor,
 textColor: Colors.white,
 onPressed: () => Navigator.pop(context)),
 ),
 );
 }
}

然后，导入main.dart文件中的新页面并将其添加到MaterialApp构造函数内的路径列表中。

class MyApp extends StatelessWidget {
// This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'Flutter Demo',
 theme: ThemeData(
 primarySwatch: Colors.green,
 ),
 home: MyHomePage(title: 'Flutter Demo Home Page'),
 routes: <String, WidgetBuilder>{
 '/a': (BuildContext context) => SecondPage(),
 });
 }
}

然后，我们编辑的的onPressed方法FlatButton在CustomCard此：

Navigator.pushNamed（context，'/ a'）;

在上面的示例中，用户被重定向到SecondPage创建的类，因为它是路径的相应页面/a.

在页面之间传递数据

现在，对于演示的最后一部分，将数据传递到下一页。这样做很简单，需要混合使用上述两种导航方法。

二者pushNamed并创建推送方法内的新的途径可用于将数据传递到新的页面。对于后者，不需要新页面。MaterialPageRoutewill 的builder参数现在调用SecondPage该类的构造函数。

更新SecondPage类以接受传递给它的数据，如下所示：

class SecondPage extends StatelessWidget { 
SecondPage({@required this.title});
final title;
@override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('Card No. $title'),
 ),
 body: Center(...),
 );
 }
}

该FlatButtons'onPressed方法现在编辑以：

Navigator.push( context,
 MaterialPageRoute(
 builder: (context) => SecondPage(title: index)
 )
);

或这个：

Navigator.pushNamed( context, '/a', 
 arguments: <String, String>{
 'title': index + "",
 },
);

卡的索引现在传递给SecondPage类，并显示在AppBar。

玖叶教程网

前端编程开发入门

如何编写Flutter应用中的导航?（flutter开发app教程）

Navigator

导航实现

在页面之间传递数据