Flutter Learning Notes (15) --MaterialApp Application Components and routes Routing Details

If you need to reproduce it, please indicate the source: Flutter Learning Notes (15) --MaterialApp Application Components and routes Routing Details

Recently, I was sick and ran to the hospital all day. I was not in a good state to learn anything. It is time to continue learning!!!

Today I'll tell you more about Material App application components and routes routing. I'll highlight the use and explanation of routes routing, because it's often used. Some of the demo components I wrote earlier follow the design style of Material Designs. The so-called Material Designs are completely new from Goodle.Design Language, designed to give mobile phones, tablets, desktops, and other platforms a more consistent, wider look and feel, let's take a look at the common Material Design style components:

Material Design Style Component Description
Component Name Chinese Name A brief description
Appbar Apply Button Component Applied Tool Button
AlertDialog Dialog Component Dialog with action buttons
BottomNavigationBar Bottom Navigation Component The bottom navigation bar makes it easy to switch between tab s and navigate through top-level attempts
Card Card Component Card Component with Border Shadow
Drawer Drawer Component Drawer Drawer Component for Drawer Drawer Switch Closing
FloatingActionButton Suspend Button Component Application's main function action button
FlatButton Flat Button Component Flattened style buttons
MaterialApp Material Application Components MaterialApp stands for applications using ink and paper design style
PopupMenuButton Pop-up menu component Pop-up menu button
Scaffold Scaffold component Implement the basic Material Design s layout
SnackBar Lightweight Tip Component A lightweight message prompt component that displays at the bottom of the screen
SimpileDialog Simple Dialog Component Simple dialog component.Prompt only, no interaction
TabBar Horizontal tabs and view components A Material Design component that displays horizontal tabs
TextField Text Box Component Components that can accept input text applied

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

There are so many Material Design-style components that you don't know. It's almost useless to startle at a glance. There's a long way to go. Learn one by one!!!

  • MaterialApp (Application Components)

MaterialApp Component Properties and Descriptions
Property Name type Explain
title String The title of the application, which appears in Android above the program snapshot of Task Manager, iOS: Program Switch Manager
theme ThemeData Defines the theme colors used by the application to define the colors of each control in a theme
color Color The primary color value applied
home Widget This is a Widget object that defines the color of each control in a theme
routes Map<String,WidgetBuilder> Define principles for page jumps in applications
initialRoute String Initialize Routing
onGenerateRoute RouteFactory Routing callback function, which is called when a route is hopped through Nacigator.of(context).pushNamed and cannot be found in routes
onLocaleChanged   This callback is triggered when the system needs to change the language
nagavitorObserver List<NavigatorObserver> Navigation Observer
debugShowMaterialGird bool Whether to display the Ink Paper Design Base Layout Grid, a tool for debugging UI
showPerformanceOverlay bool Show performance labels

 

 

Specifically, look at the code application:

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget{
  //This is the main component of the entire application
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'MaterialApp Example',
      debugShowMaterialGrid: true,
      showPerformanceOverlay: true,
      theme: new ThemeData(
        primaryColor: Colors.deepOrange
      ),
      home: new MaterialAppDemo(),
    );
  }
}

class MaterialAppDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: Text('MaterialAppDemo'),
      ),
      body: new Center(
        child: new Text('MaterialAppDemo'),
      ),
    );
  }
}

 

Design sketch:

                       

In demo, I mainly tried the title, theme, home, debugShowMaterialGird, showPerformanceOverlay attributes to give you an intuitive comparison based on the screenshots:

Title: The title of the application (because I only have an Android tester), you can see the second screenshot, cut to Task Manager, and the title of the application is MaterialApp Sample.

Theme: I changed the color of the application theme with theme, and you can see that the color of the navigation bar in the first screenshot changed to orange.

The home:home represents the main widget of the entire page, which can be interpreted as the root widget, while the main body of the home is a Center container component with a text inside.

debugShowMaterialGird: This property is set to true, and the page shows a lot of grids for debugging the UI (how can this be used to debug the UI, younger brother won't yet.)

showPerformanceOverlay: Performance label, set to true, with some performance-related data at the top of the page.

  • routes (routing)

The routes object is a Map <String, WidgetBuilder>, when routed using Navigator.pushName, the routes look for the name of the route, and then use the corresponding WidgetBuilder to construct a MaterialPageRoute with page-switching animation.

Next, I will focus on routes routing because I think jumps between pages are the most common and important. The main function of demo below is to click a button on page A to jump to page B and transfer values between pages.

Note: Routing jumps are divided into static and dynamic routing jumps. The difference between them is whether to pass a value to the second page or not.

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'theme Title',
      debugShowMaterialGrid: false,
      home: new Scaffold(
        appBar: new AppBar(
          leading: Icon(Icons.menu),
          actions: <Widget>[
            Icon(Icons.search)
          ],
          title: new Text('routes demo'),
        ),
        body: new Center(
          child: new Text('homepage'),
        ),
      ),
      routes: {
        '/first':(BuildContext context) => new FirstPage(),
        '/second':(BuildContext context) => new SecondPage(""),
      },
      initialRoute: '/first',//Initialize Route to first page
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('First Page'),
      ),
      body: new Center(
        child: RaisedButton(
          child: new Text('First page'),
            onPressed: (){
                //Static route jump, no value passed to second page
//              Navigator.pushNamed(context, '/second').then((value){
//                Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
//              });
              //Dynamic Routing Jump, Pass Value to Second Page
              Navigator.of(context).push(new MaterialPageRoute(builder: (context){
                return new SecondPage('This is the data passed from the first page');
              })).then((value){
                Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
              });
            }
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  var content = '';
  SecondPage(this.content);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Second Page'),
      ),
      body: new RaisedButton(
        child: new Text(content),
          onPressed: (){
//            Navigator.pop(context);//Do not return parameters to previous pages
            Navigator.of(context).pop("This is the data returned from the second page");//Return parameters to the previous page
          }
      ),
    );
  }
}

 

Effect Screenshot:

     

Tell me more about the code above, otherwise it's really easy to see.

1. Initialize the routing list first to prepare for page jumps that follow. The routing list corresponds to each page

routes: {
        '/first':(BuildContext context) => new FirstPage(),
        '/second':(BuildContext context) => new SecondPage(""),
      },

 

2. Static route jump, static jump from page A to page B, no value is passed to page B, but the data returned from page B is received and the returned value toast is displayed, that is, Figure 3

Navigator.pushNamed(context, '/second').then((value){
                Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
              });

 

3. Dynamic route jump, page A jumps to page B, passes value to page B, assigns value to the button copy of page B, returns from page B, and toast the return value of page B, that is, Figure 2, Figure 3

Navigator.of(context).push(new MaterialPageRoute(builder: (context){
                return new SecondPage('This is the data passed from the first page');
              })).then((value){
                Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
              });

 

4. Return from page B with data to page A (Page Pop returns two types, one with parameters and one without parameters)

4.1 Return with parameters

Navigator.of(context).pop("This is the data returned from the second page");//Return parameters to the previous page

 

4.2 Return without parameters

Navigator.pop(context);//Do not return parameters to previous pages

 

Note: Page Pop has two other common methods

Navigator.canPop(context);//Is Page OK pop,Return bool Value, which can be used as page judgment
Navigator.maybePop(context);//If the current page can pop,Will execute, otherwise will not execute, safer

 

That's all for today. A little more difficult is to route this block. The demo I wrote is still very simple. Page jump to pass values is just a string. There will be other types of data parameters encountered in the project. I will not study them for the time being. When I use them, I will take a closer look at them. IfIf you have any questions or find something wrong, please leave a message!!!

Tags: Android Mobile snapshot iOS

Posted on Wed, 14 Aug 2019 21:53:28 -0700 by Stickdragon