Flutter finally climbed out of the hole

Time:2022-5-10

I’ve been learning named routing recently. Seriously, I’ve been cheated. Therefore, I hereby write an article to summarize the recent pit, hoping to help Xiaobai who has just begun to learn fluent like me.

The following are the pits encountered in the study of named routes in the past two days
1. Where should the routes object of the named route be configured?
2. The ongeneraterote method and can only take effect when?
3. How to configure routes in routes?
4. How to write the construction method of the page?

1、 Should the routes of named routes be registered or put out?

I believe many people, like me, were configured like this at the beginning

Flutter finally climbed out of the hole

Do not configure like this
If your routes are registered in materialapp (the same as the above figure), Congratulations, you have successfully entered the pit.

“Actual combat of flutter”The author mentioned the correct usage of ongeneraterote. As shown below

Flutter finally climbed out of the hole

This means that ongenerateroute will not be called if your route is registered in routes: in materialapp. The correct configuration of routes cannot be in materialapp. The core code is as follows

class MyApp extends StatelessWidget {
  final routes = {
    "/ one": (context, {arguments}) = > onepage (arguments: arguments), // with reference
    "/ two": (context) = > twopage(), // no parameters
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: (RouteSettings settings) {
        String? name = settings.name;
        print("name==$name");
        .......
      },
    );
  }
}

2、 How to configure the parameters in routes.

//Right way
  final routes = {
    "/one": (context, {arguments}) => OnePage(arguments: arguments),
    ....
  };
//Wrong way
  final routes = {
    "/one": (context, arguments) => OnePage(arguments: arguments),
    ....
  };

(context, {arguments}) => XxxPage(arguments: arguments),

1. (context, {arguments}) must be written in this way, even if the route does not need to pass parameters. Otherwise, the following errors will be included.

Flutter finally climbed out of the hole

3、 How to write the constructor in the page.

The parameter of the first page of the first page should be an optional naming parameter, because 1 Sometimes you need to pass parameters, sometimes you don’t. 2. Unify the fields of your parameters for use in ongeneraterote encapsulation Because the parameters you pass are ultimately passed out in the ongenerateroute method, you cannot configure many different input parameter fields for different routes, so you need to unify the input parameter fields.

What are optional named parameters

//The following method
String personFun(String name, {int age}){
  Return "name $name, age $age";
}
//Usage 1
Personfun ("Zhang San", age: 13)// Age must be passed in as a key value pair.
//Usage 2
Personfun ("Zhang San")// It doesn't matter if you don't pass it on.

The core code of the page is as follows

import 'package:flutter/material.dart';

class OnePage extends StatelessWidget {
  var arguments;
  OnePage({Key? key, this.arguments}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Print ("= = - = stateless - = - = - = $arguments");
    return Scaffold(
      appBar: AppBar(
        Title: text ("stateless component"),
      ),
      body: Container(
        alignment: Alignment.center,
        Child: text (this. Arguments = = null? "Parameter is empty": arguments ['key '],
      ),
    );
  }
}

Project address

Recommended Today

Stack stack

Application scenario: first in and last out For example: converting decimal to binary, judging whether the parentheses of string are valid, and function call stack Determine whether the parentheses of the string are valid ((()) -va (((()())) -inva *The more backward the left bracket, the more forward the corresponding right bracket *The left bracket goes […]