Copyright notice: This article is the blogger’s original article, shall not be reproduced without the permission of the blogger. Juejin. Cn/post / 684490…

Reprint please indicate the source: juejin.cn/post/684490… This post is from AWeiLoveAndroid’s blog

Routing has recently been encapsulated and a lightweight framework has been written that allows you to use routing with ease and less hassle. Any page can be used, is really convenient and fast. It has been uploaded to Github, welcome friends to give a star, thank you, hope to help you at the same time, please give a tip to buy a drink of water, thank you.

Open source warehouse address:Github.com/AweiLoveAnd…

1. Problems existing in the use of routing

The sending location is scattered

Reception is also not easy to maintain

There is a lot of page redundant code

FRouter lightweight routing framework

In view of the above routing problems, I made a routing encapsulation, to solve some of the routing problems, the send and receive routing to do a unified processing, and to different page needs to do the adaptation, so that the code maintenance becomes more indirect, no matter in which page can be directly with FRouter operation routing.

Three, code thinking analysis

First of all, for different pages, do adaptation processing,

1. Is it the home page? If yes, use itMaterialApp + Scaffold + AppBarCombination, finally just need to pass the corresponding parameters can easily achieve this combination, remove a lot of redundant code, if not the home page, useScaffold + AppBarCombination.

2. Is there an AppBar? If so, use itScaffold + AppBarCombination, if not use its own passchildProperty (self – written page, no title bar page).

3. Use route management in a unified mannerFRouterClass to manage.

For example, in the following code, I am MainPage is the home page, I am FRouter(isFirstPage: true…) When I created the FRouter class object, I actually created the MaterialApp + Scaffold + AppBar combination. This is the standard home page composition, which saves a lot of code. Of course, I also encapsulated a lot of other properties. You can pass it in as much as you want, so I’m not going to do this one by one. Here isShowAppBar: true, the property shows the AppBar component.

The Child attribute is the content of our page. For example, a RaisedButton is used and I click it to send the route. I can use frouter.sendrouter (context, ‘/ pageOne ‘); / PageOne is the name of the named route, which corresponds to the key of the routers set. SendRouterPage (context, PageOne()); frouter.sendrouterPage (context, PageOne()); PageOne() is the target page we want to send.

Send data: here ‘/ pageTwo ‘: PageTwo(builder) => PageTwo(‘ data 2’); PageTwo(‘ data 2’); PageTwo(‘ data 2’); Set other types of arguments to your page’s constructor arguments, using the String class as an example.

Class MainPage extends StatefulWidget {@override MainPageState createState() => new MainPageState(); } class MainPageState extends State<MainPage> {@override Widget build(BuildContext context) {true.return FRouter(
      isFirstPage: true,
      isShowAppBar: true, routes: {// Do not pass data'/pageone': (builder) => PageOne(), // Pass data to PageTwo'/pagetwo': (builder) => PageTwo(Data '2'),
        '/pagethree': (builder) => PageThree('data 3'),
      },
      appBarTitle: Text('Hello World'), child: RaisedButton(onPressed: () {// Name frouter.sendrouter (context,'/pageone'); // FRouter. SendRouterPage (context, PageOne()'data'));
        },
        child: Text('Click to jump'),),); }}Copy the code

4. Let’s look at the processing of the target page.

PageOne is not the home page, so there is no need to set the isFirstPage property (the default is false). When I click the button to return to the previous page, Using FRouter. BackPageRouter (context); Can. Is it very convenient? All of them are managed by FRouter.

Class PageOne extends StatelessWidget {@override Widget Build (BuildContext context) {// isFirstPage:falseThe default is not the home pagereturn FRouter(
      isShowAppBar: true, appBarTitle: Text(), child: RaisedButton(onPressed: () {// Return to frouter.backPagerOuter (context); }, child: Text('Click to jump'),),); }}Copy the code

PageTwo pages, using the same FRouter, here it is important to note that the page display AppBar, so you can set the isShowAppBar: true attribute (the default is true, if you need to display AppBar, this property can write not write). When I click the button to return to the previous page, to pass a data to the previous page, I can use FRouter. BackPageRouter (context,’ data returned to the previous page ‘); Ok, parameter 2 is the data we need to pass, it can be a basic type, it can be an object, entity class, etc.

class PageTwo extends StatelessWidget {
  String data;

  PageTwo(this.data);

  @override
  Widget build(BuildContext context) {
    return FRouter(
      isShowAppBar: true,
      appBarTitle: Text('PageTwo'), child: RaisedButton(onPressed: () {// Return data to FRouter. BackPageRouter (context,'Data returned to previous page');
        },
        child: Text('Click to jump'),),); }}Copy the code

PageThree: isShowAppBar: false, isShowAppBar: false, isShowAppBar: false, isShowAppBar: false, isShowAppBar: false, isShowAppBar: false, isShowAppBar: false, isShowAppBar: false, isShowAppBar: false

class PageThree extends StatelessWidget { String data; PageThree(this.data); @override Widget Build (BuildContext context) {// Do not display AppBarreturn FRouter(
      isShowAppBar: false,
      child: RaisedButton(
        onPressed: () {
          FRouter.backPageRouter(context);
        },
        child: Text('Click to jump'),),); }}Copy the code