This article was first published on the public account “Liu Wangshu”

ReactNative Features the ReactNative component Flutter Foundation series

preface

In Android development we used intents for page jumps, also known as native routing, and later routing frameworks like ARouter emerged. Routes are represented by the Route class. The Navigator is the Widget that manages the Route. In this article we will learn about routing and data passing. Flutter routes can be used in two ways: one is to create a route, the other is to register a route.

1. Create a route

Create two pages, the first page has a button, click this button to jump to the second page. Let’s implement the first page:

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Page one"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Skip to page 2"),
          onPressed: () {
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => SecondPage(), maintainState: false)); },),),); }}Copy the code

Add a Route object to the Route stack managed by the Navigator using the navigator.push () method. The Route object here is a MaterialPageRoute, which has its own page switch animation and is adapted for Android and iOS. On Android, the page entry animation slides up and fades out, and the exit animation is reversed. On iOS, the page entry animation slides in from the right, and the exit animation slides in the opposite way. Generally speaking, the MaterialPageRoute is sufficient. If the requirements are not met, you can implement a custom Route. Next, implement the second page, as shown below.

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Page two"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Return to page 2"), onPressed: () { Navigator.pop(context); },),),); }}Copy the code

The navigator.pop () method is used to close the current page, return to the previous page, and remove the current Route object from the Route heap managed by the Navigator. The complete code is shown below.

import 'package:flutter/material.dart';

void main(a) => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter", home: FirstPage(), ); }}class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Page one"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Skip to page 2"),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondPage(),
                maintainState: false,),); },),),); }}class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Page two"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Return to page 2"), onPressed: () { Navigator.pop(context); },),),); }}Copy the code

Run the program and the result is as follows.

2. Use a registered route

If many pages jump to the same page and need to create a new route each time, there will be a lot of repetitive code, which can be simplified by using registered routes.

import 'package:flutter/material.dart';

void main(a) => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter",
      initialRoute: '/First'./ / 1
      routes: {
        '/First': (context) => FirstPage(),
        "/Second": (context) => SecondPage() }, home: FirstPage(), ); }}class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Page one"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Skip to page 2"),
          onPressed: () {
            Navigator.pushNamed(context, '/Second');/ / 2},),),); }}...Copy the code

The second page of code is omitted because nothing has changed. The change is that we need to define the routing table. The routing table format is Map

routes; Key is the route name and value is the Builder callback function used to generate the corresponding routing Widget. When a new route is pushed by route name, the application finds the corresponding WidgetBuilder callback function in the routing table based on the route name, calls this callback function to generate the routing widget and returns it. The page in comment 1 defines the initial route, and then registers the routing table, which contains two pages, FirstPage and SecondPage. Comment 2 opens SecondPage by route name.
,>

3. Data transfer between routes

When a page jumps, data often needs to be transferred. Generally, there are two cases, one is the data transfer of a page jump, and the other is the data returned by a page jump. Here are the introductions respectively.

3.1 Page Skipping data transfer

When a page jumps to a new page, data is transferred in the following two ways:

  • Data is passed through navigator.push () or navigator.pushnamed ()
  • Data is passed through the Widget’s constructor

The first method is generally used. Here is an example.

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Page one"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Skip to page 2"),
          onPressed: () {
            Navigator.pushNamed(context, '/Second',arguments: CustomArgumnets('Advanced Android Light')); },),),); }}class CustomArgumnets {
  String content;
  PassArgumnets(this.content);
}
Copy the code

We pass arguments via the Arguments property, where we define a CustomArgumnets to pass arguments. Rewrite the code in section 1 SecondPage to get the data, as shown below.

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final CustomArgumnets customArgumnets =ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text("Page two"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text('The data on the first page is:'),
            Text(customArgumnets.content),
            RaisedButton(
              onPressed: () {
                Navigator.pop(context);/ / 1
              },
              child: Text('Back to page 1'),),),),); }}Copy the code

Run the code and jump to the second page, as shown below.

3.2 Data is returned when the page is Displayed

In addition to page jumps requiring passing data, it is sometimes necessary to return data from the SecondPage, rewriting the code at SecondPage comment 1 in section 3.1.

Navigator.pop(context,CustomArgumnets('Android Advanced Decryption '));
Copy the code

Then rewrite FirstPage, as shown below.

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Page one"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Skip to page 2"), onPressed: () { _navigateToSecondPage(context); },),),); } _navigateToSecondPage(BuildContext context) async { dynamic customArgumnets = await Navigator.pushNamed(context,'/Second',
        arguments: CustomArgumnets('Advanced Android Light'));/ / 1print(customArgumnets.content); }}Copy the code

The code in comment 1 can take the result returned by Java and use asynchrony to prevent blocking the UI. Finally, paste the complete code.

import 'package:flutter/material.dart';

void main(a) => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter",
      initialRoute: '/First',
      routes: {
        '/First': (context) => FirstPage(),
        "/Second": (context) => SecondPage() }, home: FirstPage(), ); }}class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Page one"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Skip to page 2"), onPressed: () { _navigateToSecondPage(context); },),),); } _navigateToSecondPage(BuildContext context) async { dynamic customArgumnets = await Navigator.pushNamed(context,'/Second',
        arguments: CustomArgumnets('Advanced Android Light')); print(customArgumnets.content); }}class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final CustomArgumnets customArgumnets =ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text("Page two"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text('The data on the first page is:'),
            Text(customArgumnets.content),
            RaisedButton(
              onPressed: () {
                Navigator.pop(context,CustomArgumnets('Android Advanced Decryption '));
              },
              child: Text('Back to page 1'),),),),); }}class CustomArgumnets {
  String content;
  CustomArgumnets(this.content);
}
Copy the code

Running the program, when we click back to the first page, Android advanced decryption will be printed out in the console.

A quick start with the Hello World Flutter Foundation and the Hello World Flutter Foundation Fundamental of Flutter (5) MaterialApp, Scaffold and AppBar of Material components Description the BottomNavigationBar, TabBar, Drawer foundation of the Flutter component (7) listed view, GridView, PageView Flutter Basics (8) Quick Start on Flutter Basics: Web request (Dio) and JSON data parsing Flutter foundation (12) Routing (page hopping) and data transfer Flutter foundation (13) Flutter and Android’s mutual communication

Here not only share big front end, Android, Java and other technologies, but also programmer growth class articles.