Introduction:

Google has just released Flutter 1.9 on September 10, 2019. We believe that Flutter 2.0 is not far off. This update incorporates the Web code of Flutter into the main REPO, but the Web is still in beta, 2.0 is supposed to include the Web, let’s hope.

Immediately upgrade the local Flutter SDK when prompted.

This section explains Flutter routing

As the number of pages in your app increases, you need to consider the issue of page transfer. How do you transfer data from the first page to another page? The most basic method is to open a new page and pass in the parameters. But as apps get bigger and more versatile, you’ll find it’s a struggle to transfer values. For example, in the early design, only one parameter is needed, but later it is found that the business may need three parameters. It is not impossible to add two more parameters, but it is not elegant, and may need to modify many places.

Jump to a screen

To explain briefly, the following will be used: The App starts a main interface, and then click the middle button to open the second interface. Clicking on the upper right corner of the second screen takes you back to the previous screen. The specific code is as follows:

import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; class Test extends StatefulWidget { @override _TestState createState() => _TestState(); } class _TestState extends State<Test> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(' rectangleBorder '), Body: Center(Child: FloatingActionButton(Shape: BeveledRectangleBorder(), child: Text(' button '), onPressed: () {// Use the route to open the second interface Navigator. Push (Context, MaterialPageRoute(Builder: (context) => TwoPage())); },),),); } } class TwoPage extends StatefulWidget { @override _TwoPageState createState() => _TwoPageState(); } class _TwoPageState extends State<TwoPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(' second page '),), body: Column(children: <Widget>[SizedBox(height: 100), Text(' passed value: \n'), SizedBox(height: 100), Center(Child: FloatingActionButton(Shape: BeveledRectangleBorder(), Child: Text(' return '), onPressed: () {// Return to previous interface navigation.pop (context);},),)],); }}Copy the code

Use construct to pass parameters

In TwoPage, parameters can be accepted directly as widget.x, where x indicates that _TwoPageState contains the value in the widget passed.

class _TestState extends State<Test> { ... onPressed: () { String name = "Wang"; String age = "99"; Navigator.push(context, MaterialPageRoute(builder: (context) => TwoPage(name, age))); },... } class TwoPage extends StatefulWidget { String name; String age; TwoPage(this.name, this.age); . The Text (' passed value: ${widget. The name} \ n _ ${widget. The age} '),... }Copy the code

Pass the parameter List

This demonstrates the use of constructs to pass a number of type List, using the List script of Widget.data to get the data.

class _TestState extends State<Test> { ... dynamic data = ['name1', 'age']; Navigator.push(context, MaterialPageRoute(builder: (context) => TwoPage(data))); . } class TwoPage extends StatefulWidget { ... dynamic data; TwoPage(this.data); . } class _TwoPageState extends State<TwoPage> { ... The Text (' passed value: \ n ${widget. The data [0]} _ ${widget. The data [1]} '),... }Copy the code

The Map and the cords

This demonstrates the use of constructs to pass data of type map.

class _TestState extends State<Test> { ... dynamic map = { 'name': "Wang_Map", 'age': "99", }; Navigator.push(context, MaterialPageRoute(builder: (context) => TwoPage(map))); . } class TwoPage extends StatefulWidget { ... dynamic map; TwoPage(this.map); . } class _TwoPageState extends State<TwoPage> { ... The value of the Text (' passed: \ n ${widget. The map/" name "} _ ${widget. The map (" age ")} '),... }Copy the code

Use a named route to pass the parameter

Most of the time, our projects are quite large, so we use the routing concept with names for unified management. The following routing string constants can be written as variables, so that no matter how to modify the values in the later stage, there is no need to modify the dependent places.

Pass a parameter

Here a name value is passed, demonstrating the use of named routes to pass values.

void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( initialRoute: "/", routes: { "/": (context) => OnePage(), "/TwoPage": (context) => TwoPage(), }, ); } } class OnePage extends StatefulWidget { @override _OnePageState createState() => _OnePageState(); } class _OnePageState extends State<OnePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(Title: Text(' RectanglePage '), body: Center(Child: FloatingActionButton(Shape: BeveledRectangleBorder(), child: Text(' button '), onPressed: () {String name = "Wang"; Navigator.pushNamed(context, '/TwoPage', arguments: name); },),),); } } class TwoPage extends StatefulWidget { @override _TwoPageState createState() => _TwoPageState(); } class _TwoPageState extends State<TwoPage> { @override Widget build(BuildContext context) { dynamic name = ModalRoute.of(context).settings.arguments; Return Scaffold(appBar: appBar (title: Text(' second page '),), body: Column(children: <Widget>[SizedBox(height: 100), Text(' pass-through: \n $name'), SizedBox(height: 100), Center(Child: FloatingActionButton(Shape: BeveledRectangleBorder(), Child: Text(' return '), onPressed: () {navigate.pop (context);},),); }}Copy the code

Pass a List

So what we’re passing here is a List, and you can get the corresponding values based on the corner markers, if you know the values, usually you’re passing a List or a List that contains multiple different values to get from the last one.

class _OnePageState extends State<OnePage> { ... onPressed: () { dynamic listData = ['name1', 'age']; Navigator.pushNamed(context, '/TwoPage', arguments: listData); }... } class _TwoPageState extends State<TwoPage> { @override Widget build(BuildContext context) { dynamic listData = ModalRoute.of(context).settings.arguments; String name = listData[0]; String age = listData[1]; . SizedBox(height: 100), Text(' pass-through value: \n $name _ $age'), SizedBox(height: 100),... }}Copy the code

Pass the Map

Since we are transferring map, we need to make a judgment when receiving it, and use IS to judge, so as to prevent the red screen of our program caused by other types being passed in from outside. Here you can obtain multiple different parameters from the last time, using different names to obtain, here is the best docking received value to do judgment, non-null check and so on.

class _OnePageState extends State<OnePage> { ... onPressed: () { dynamic listData = ['name1', 'age']; Navigator.pushNamed(context, '/TwoPage', arguments: listData); }... } class _TwoPageState extends State<TwoPage> { @override Widget build(BuildContext context) { String name; String age; dynamic mapData = ModalRoute.of(context).settings.arguments; If (mapData is Map) {Map data = mapData; name = data['name']; age = data['age']; }... SizedBox(height: 100), Text(' pass-through value: \n $name _ $age'), SizedBox(height: 100),... }}Copy the code

Common routes take parameters

It is basically the same as the route name, but it is written a little differently by putting parameters after Settings.

Navigator.of(context).push(new MaterialPageRoute( builder: (context) { return NewRouteWidget(); }, Settings: RouteSettings(arguments: {'name': 'postbird'}), fullscreenDialog: true);Copy the code

Returns to the upper level from the secondary page with parameters

Return to the previous level:

Navigator.pop(context);
Copy the code

Returns the previous level with arguments:

Navigator.pop(context, 'returned text data ');Copy the code

Parameter with type returns:

Navigator.pop<Map>(context, mapData);
Navigator.pop<List>(context, listData);
Navigator.pop<T>(context, data);
Copy the code

Accept the returned value at a higher level: we use then to accept, and we can also use await, but this is easier to understand and accept, more logical, and cleaner code.

Navigator. PushNamed (Context, '/TwoPage', arguments: mapData). });Copy the code

Phase to recommend

Flutter learning brain map notes, easy to find and search!

Download the “Flutter Start to Master Complete Video” at least 1MB/S on cloud disk

Can Flutter also develop Web? (Provide the video address of Flutter learning at the end of this article.)

Jack Ma said 669, but I spent a whole day treading on the whole Flutter environment (bonus: Short video on Flutter Quick Start)