Shulou(Shulou.com)06/02 Report--

This article mainly introduces the relevant knowledge of Flutter routing management and secondary encapsulation methods, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on Flutter routing management and secondary encapsulation methods. Let's take a look at it.

In native development, Android and IOS have their own functions to control the jump of pages (Activity, ViewControl). In flutter, routing management has become more unified, flexible and efficient.

MaterialApp built-in route management

Route management built into MaterialApp can be operated in two ways:

Do not declare a route, use the instantiated component to directly jump to declare the route, and use the name of the route to jump

The two methods have their own advantages and disadvantages, as appropriate in the project, the first method is more flexible and simple to eliminate violence, but it can not be managed uniformly and is relatively loose, and the second method can be managed uniformly, using routing name for corresponding operation, but passing values and taking values may be more troublesome.

As mentioned earlier, pages in flutter are also components, so let's first create two separate pages with Scaffold scaffolding: HomePage and NextPage. Use these two pages to implement all subsequent requirements:

Instead of declaring the component, use api to jump to the component page in the callback:

/ / HomePage page

Class HomePage extends StatelessWidget {

@ override

Widget build (BuildContext context) {

Return Scaffold (

AppBar: AppBar (

Title: Text ("Home Page")

),

Body: Center (

Child: RaisedButton (

OnPressed: () {

Navigator.push (context, MaterialPageRoute (builder: (ctx) = > NextPage ()

}

Child: Text ("Jump to Page 2")

),

),

);

}

}

/ / NextPage page

Class NextPage extends StatelessWidget {

@ override

Widget build (BuildContext context) {

Return Scaffold (

AppBar: AppBar (

Title: Text ("Next Page")

),

Body: Container (

Child: Text ("Next Page")

),

);

}

}

Using api directly, you can quickly jump to the page, in which the key jump code

...

Navigator.push (context, MaterialPageRoute (builder: (ctx) = > NextPage ()

...

Because it is the default jump mode, there will be different animation effects on Android and Apple: the bottom-to-top fade in Android and the right-to-left slide in ios.

If you pass a value, it should be very clear at a glance. When setting data attributes on the corresponding page and instantiating it, you can set it directly. The key code:

/ / HomePage

...

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

Return NextPage (

Data: "Home Page Data"

);

}))

...

/ / NextPage

Class NextPage extends StatelessWidget {

String data

NextPage ({this.data})

...

}

...

Navigator.pop (context)

...

The second parameter of the Navigator.pop method mentioned above can pass any type of data, which is the content of the reverse value.

The Navigator.push method in the home page returns a Future, which is the second parameter of the Navigator.pop function of the stack page. We can quickly get the contents using async and await:

/ /

Class HomePage extends StatelessWidget {

@ override

Widget build (BuildContext context) {

Return Scaffold (

AppBar: AppBar (

Title: Text ("Home Page")

),

Body: Center (

Child: RaisedButton (

OnPressed: () async {

Var returnData = await Navigator.push (context, MaterialPageRoute (builder: (ctx) = > NextPage ()

Print ("Next Page returns to Home Page: ${returnData}")

}

Child: Text ("Jump to Page 2")

),

),

);

}

}

/ /

Class NextPage extends StatelessWidget {

@ override

Widget build (BuildContext context) {

Return Scaffold (

AppBar: AppBar (

Title: Text ("Next Page")

),

Body: Container (

Child: Column (

Children: [

RaisedButton (

OnPressed: () {

Navigator.pop (context, {"data": "reverse value content"})

}

Child: Text ("return to the previous page")

)

]

),

),

);

}

}

After jumping to NextPage, click to return to the previous page, and you can see the console output:

I/flutter (11371): Next Page returns to Home Page: {data: reverse value content}

This is a return value operation performed by the Navigator.pop function. If you click the return icon in the page AppBar, the return value will be null.

MaterialApp has a built-in route management function that declares the route name and the corresponding component in the routes parameter in the MaterialApp class:

Class FeDemoApp extends StatelessWidget {

@ override

Widget build (BuildContext context) {

Return MaterialApp (

Routes: {

/ ": (ctx) = > HomePage ()

"NextPage": (ctx) = > NextPage ()

}

);

}

}

After declaring the name and component, we can directly use name for routing operations:

...

/ / 'NextPage' has been declared as a NextPage () component

Navigator.pushNamed (context, "NextPage")

...

Return to the previous page in the same way in both management modes, using Navigator.pop

...

Navigator.pop (context, {"a": "reverse value"})

...

The forward value is different, because in the way of undeclared route, we can directly contact the object of the corresponding page, but in the way of declaring route, the corresponding object has been created at the time of declaration and cannot be directly obtained when jumping, so the way of passing value and getting is different.

When passing a value, use the arguments parameter in Navigator.pushNamed:

... HomePage

/ / 'NextPage' has been declared as a NextPage () component

Navigator.pushNamed (context, "NextPage", arguments: "pass value")

...

When getting, use the following code:

... NextPage

/ / get the value

Var data = ModalRoute.of (context) .settings.arguments

...

Consistent with the undeclared way, Navigator.pushNamed also returns Future.

Fluro routing Library

The emergence of flutter, followed by the birth of a number of excellent libraries, fluro is one of them.

It is more flexible, lower coupling, support a variety of page switching animation, simple secondary encapsulation can achieve easy route management, rights interception.

Fluro needs to declare the route in advance, and all routing operations need a global Router object.

Import 'package:fluro/fluro.dart'

Import 'package:flutter/material.dart'

Final router = Router ()

Void main () {

/ / declare a route

Router.define (

"/ NextPage"

Handler: Handler (

HandlerFunc: (ctx, params) {

Return NextPage ()

}

),

);

RunApp (FeDemoApp ())

}

Class FeDemoApp extends StatelessWidget {

@ override

Widget build (BuildContext context) {

Return MaterialApp (

Home: HomePage ()

);

}

}

/ /

Class HomePage extends StatelessWidget {

@ override

Widget build (BuildContext context) {

Return Scaffold (

AppBar: AppBar (

Title: Text ("Home Page")

),

Body: Center (

Child: RaisedButton (

OnPressed: () async {

Var returnData = await router.navigateTo (

Context

"/ NextPage"

Transition: TransitionType.nativeModal

);

Print ("return value: ${returnData}")

}

Child: Text ("Jump to Page 2")

),

),

);

}

}

/ /

Class NextPage extends StatelessWidget {

@ override

Widget build (BuildContext context) {

Return Scaffold (

AppBar: AppBar (

Title: Text ("Next Page")

),

Body: Container (

Child: Column (

Children: [

RaisedButton (

OnPressed: () {

Navigator.pop (context)

}

Child: Text ("return to the previous page")

)

]

),

),

);

}

}

We can modify the jump animation TransitionType.cupertino to achieve the sliding in and out effect of displaying ios on the Android side.

The following is a simple encapsulation of fluro, unifying the global routing object, using static parameters for route names, unifying the style of redirection, and making it easy to expand page blocking:

Import 'package:fluro/fluro.dart'

Import 'package:flutter/material.dart'

Import 'main.dart' as Main

Class App {

Static final router = Router ()

Static String HomePage = "/ HomePage"

Static String NextPage = "/ NextPage"

/ / initialize routing

Static void initRouter () {

Var routers = {

"${HomePage}": Handler (

HandlerFunc: (ctx, params) = > Main.HomePage ()

),

"${NextPage}": Handler (

HandlerFunc: (ctx, params) = > Main.NextPage ()

),

}

Routers.forEach ((key, value) {

Router.define (key, handler: value)

});

}

Static Future PageTo (BuildContext context, String path) {

Return router.navigateTo (

Context

Path

Transition: TransitionType.nativeModal

);

}

Static Future AuthTo (BuildContext context, String path) {

/ / TODO: verify permissions, and then decide where to jump

Var auth = true

If (auth) {

Return router.navigateTo (

Context

Path

Transition: TransitionType.nativeModal

);

} else {

/ / failed to verify and jumped to the home page

Return router.navigateTo (

Context

HomePage

Transition: TransitionType.nativeModal

);

}

}

}

This is the end of the article on "what is the method of Flutter routing management and secondary encapsulation". Thank you for reading! I believe you all have a certain understanding of "what is the method of Flutter routing management and secondary encapsulation". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.