As an aside: It’s 2021, is there any mobile development of Flutter yet?

Today, let’s share a wave of it, I hope to help you with your study and work

Recommended reading: Mobile developers who haven’t picked up a Flutter yet in 2021 should check out this 286 page study note on Git! Original address: blog.csdn.net/Calvin_zhou…

An overview,

  • Several concepts
  • Skip between pages without defining a route mode
  • This section describes how to redirect between pages by defining routing modes
  • When the page jumps and returns, the value is passed

Two, a few concepts

  • Route: The Route is an abstraction of the application page. It corresponds to the Activity in Android and the ViewController in IOS, and is managed by the Navigator
  • Navigator: Navigator is a component that manages and maintains a stack-based history of page jumps through push and pop

3. Skip between pages without defining the routing mode

3.1 Key words for Skipping between pages

  • Push: Jump from page A to page B. Push is followed by the page to be jumped to
  • Pop: Returns to the previous page without the need for a jump page as an argument

3.2 Symptom

  • There are two pages: the Main page and B page
  • The Main page has a button that you can click to jump to page B
  • Page B has a button, click to return to the Main page

3.3 code

Entry file code

void main() {
  runApp(MyApp());
}
Copy the code

Main page code

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors.blue,), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(widget.title),), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment center, the children: "Widget > [RaisedButton (child: Text (" Main page"), onPressed: () async{ Navigator.of(context).push(MaterialPageRoute(builder: (context) { return BPage(); })); }, ) ], ), ), ); }}Copy the code

B Page code

class BPage extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData(primarySwatch: Colors.blue), home: Scaffold( appBar: AppBar(title: Text("BPage"),), body: Container(alignment: align. center, child: RaisedButton(child: Text("B page "), onPressed: () { Navigator.of(context).pop(); },),),),); }}Copy the code

3.4 rendering

3.5 Stack Changes

3.5.1 When page B is Displayed on the M Page

When the application is on page M, there is only M in the routing stack, click the button to jump to page B, there is B and M in the routing stack, and B is at the top of the stack.

3.5.2 When PAGE B Returns to Page M (POP)

B at the top of the stack goes off the stack and only M is in the stack

3.5.3 Switch from Page B to Page M using the push method

RaisedButton(Child: Text('B page '), onPressed: () {navigator.of (context).push(MaterialPageRoute(Builder: (context) { return MyApp(); })); },)Copy the code

Routing stack

3.5.4 Back to the Top of the Stack (POP /maybePop/canPop)

In the case of M page, there is only M in the routing stack. After pop is called, there is no content in the stack. At this time, the routing stack is empty, there is no page to display, and the application will exit or black screen

Solution: canPop can also be used to determine whether the current pop can be performed

 if(Navigator.of(context).canPop()){
      Navigator.of(context).pop();
  }
Copy the code

4 / Redirect between pages by defining a route mode

4.1 Configuring a route name in the MaterialApp

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( routes: <String, WidgetBuilder>{ "/M":(context)=>MyApp(), "/B":(context)=>BPage(), }, title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors.blue,), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }}Copy the code

4.2 Skipping between pages

4.2.1 pushNamed Mode (M jump to B)

Standard jump mode, each jump puts the page on the stack

RaisedButton(Child: Text('M '), onPressed: () {navigator.of (context).pushnamed ('/B'); },)Copy the code

4.2.2 pushReplacementNamed way

The page stack to be added replaces the current stack

There are three pages A, B and C, page A jumps to B by pushNamed:

RaisedButton(Child: Text('M '), onPressed: () {navigator.of (context).pushnamed ('/B'); },)Copy the code

PushReplacementNamed jump to C:

RaisedButton(Child: Text('B '), onPressed: () {navigator.of (context).pushreplacementnamed ('/C'); },)Copy the code

Click the C page button to execute pop:

RaisedButton(Child: Text('C '), onPressed: () {if(navigator.of (context).canpop ()){navigator.of (context).pop(); }},)Copy the code

rendering

Changes in the stack

Clicking the C page button returns you directly to page A, not page B, because page B uses pushReplacementNamed, and the routing stack changes

Holdings popAndPushNamed

Jump from page B to page C using popAndPushNamed

RaisedButton(Child: Text('B '), onPressed: () {navigator.of (context).popAndPushnamed ('/C'); },)Copy the code

PopAndPushNamed and pushReplacementNamed

  • The popAndPushNamed routing stack is the same as pushReplacementNamed, with the only difference
  • PopAndPushNamed has B page exit animation

4.2.4 pushNamedAndRemoveUntil

Application scenarios

In the following scenarios, the home page of the application is displayed, and the login page is displayed. Then the registration page or the forgotten password page is displayed. After the successful login, the login page is displayed. In this case, you do not want to return to the login page

There are four pages A, B, C and D. A enters B page through push, B enters C page through push, C enters D page through pushNamedAndRemoveUntil and deletes the route up to /B in the routing stack at the same time. The code of C page

RaisedButton(Child: Text('C page '), onPressed: () { Navigator.of(context).pushNamedAndRemoveUntil('/D', ModalRoute.withName('/B')); },),Copy the code

D page button performs pop

RaisedButton(Child: Text('D '), onPressed: () {navigator.of (context).pop(); },)Copy the code

rendering

The route stack changes from page C to page D

4.2.5 popUntil

There are four pages A, B, C and D. Page D is returned to page A through popUntil. The code of page D is:

RaisedButton(Child: Text('D '), onPressed: () {navigator.of (context).popuntil (modalroute.withname ('/A')); },)Copy the code

rendering

Route stack variation

Five, the page jump and return when the value

5.1 Using constructors

Product Details page

class ProductDetail extends StatelessWidget { final ProductInfo productInfo; const ProductDetail({Key key, this.productInfo}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData(primarySwatch: Colors.blue), home: Scaffold(body: Container(alignment: alignment. Center, child: Text("ProductDetail: ${productinfo.name}"),),); }}Copy the code

The value to pass

class ProductInfo {
  var name;
  ProductInfo(this.name);
}
Copy the code

Jump code

Navigator. Of (context).push(MaterialPageRoute(Builder: (context){return ProductDetail(productInfo: productInfo),); }));Copy the code

rendering

5.2 Setting Parameters by Naming Routes

A page transfers data

RaisedButton(Child: Text('A page '), onPressed: () {navigator.of (context).pushnamed ('/B',arguments: 'from A'); },)Copy the code

Page B receives data via modalroute.of (context).settings.arguments:

RaisedButton( child: Text('${ModalRoute.of(context).settings.arguments}'), onPressed: () { Navigator.of(context).pushNamed('/C'); },)Copy the code

rendering

5.3 Returning Data

B page return code

RaisedButton( child: Text('${ModalRoute.of(context).settings.arguments}'), onPressed: () {navigator.of (context).pop(' return from B '); },)Copy the code

Page A receives the returned data

Class _MyHomePageState extends State<MyHomePage> {String _string = 'A page '; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton( child: Text(_string), onPressed: () async{ var result = await Navigator.of(context).pushNamed('/B', arguments: 'from A'); the setState (() {_string = result;});},),),),); }}Copy the code

Renderings (push related methods return Future and await results with await)

The last

I would like to tell you that mobile developers who have not yet picked up Flutter in 2021 should check out this 286 page study note from Git Gao Star! The early bird got the worm!

Now FLUTTER is no longer the niche framework it once was. It has become more and more standardized and widely used. Those who have not yet learned flutter should learn it