Flutter's rookie tutorial 2: the simplest MaterialApp

In the last article, did our first application show ugly? This article will show a materialApp

import 'package:flutter/material.dart';

void main() {
  /**
   * runApp Function to display the root control on the screen
   */
  runApp(new MaterialApp(
    title: "My application",
//    Change Ui with theme
    theme: new ThemeData(
      primaryColor: Colors.white,
    ),
    home: new MyScaffold(),
  ));
}

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /**
     * Scaffold It is a widget provided in the Material library,
     * It provides the default navigation bar, title, and body properties that contain the main screen widget tree.
     * widget Trees can be complex
     */
    return new Material(
      child: new Scaffold(
          appBar: new AppBar(
            title: new Text("hello flutter",
                style: Theme.of(context).primaryTextTheme.title),
          ),
          //Center control makes its child controls in the middle
          body: new Center(
//              Text control display various text
            child: new Text("hello flutter"),
          )),
    );
  }
}

What is statelesswiidget?
As we have said before, most of the things in the Flutter are widgets. Statelesswiidget is a subclass of widgets. It represents a class of stateless widgets,
There is another corresponding stateful statefulWidget

The gap between the two categories of Widget is whether you need to manage the state of the control
statelessWidget: stateless
Stateful widget ": stateful (if a user interacts with a widget and the widget changes, it is stateful)

Of course, it's not clear now. It doesn't matter. We'll use it a lot later, and it may be easier to understand their role than theory in actual scenarios

Next, implement a slightly more complex material app

import 'package:flutter/material.dart';

// ignore: argument_type_not_assignable
void main() {
  /**
   * Center Control to have its child controls in the middle
   * Text Control to display various text
   * runApp Function to display the root control on the screen
   */
  runApp(new MaterialApp(
    title: "My application",
    home: new TutorialHome(),
  ));
}

class TutorialHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Scaffold is the main layout component in Material
    return new Scaffold(
      //appBar is used to display an app bar at the top of its Scaffold
      appBar: new AppBar(
        //leading component IconButton interactive icon displayed before the title
        leading: new IconButton(
          //Icons is a list of available icons
            icon: new Icon(Icons.menu),
            tooltip: "Navigation menu",
            onPressed: null),
        title: new Text("Jingxi shopping mall"),
        //The component displayed after the title should be noted that there can be multiple widget s in array form
        actions: <Widget>[
          new IconButton(
            //Icon: the icon displayed in the button
              icon: new Icon(Icons.shopping_cart),
              //tooltip: prompt message, which will be displayed when the user presses the button for a long time
              tooltip: "open shopping cart",
              //The callback when clicking this button is similar to the onClick of Andorid. If it is set to null, the button will be disabled (without interfering with toolip)
              onPressed: openCart)
        ],
      ),
      //body will take up most of the main content in Scaffold
      body: new Center(
        //A widget that centers its child within itself
        child: new Text("hello flutter"),
//        widthFactor: 5.0, / / can be less than 1.0, but it must be a positive todo. Now, I'm not familiar with it, and it's still to be studied
//        heightFactor:50.0,/
      ),
      //Floating action button floating button will hover over content note: at most one floating button per page can be used to share or navigate cases
      //Similar to the above iconbutton properties, there are many other properties no longer described. For example, backgroundColor can specify the background color. I'm a pink girl
      floatingActionButton: new FloatingActionButton(
        tooltip: "increase",
        child: new Icon(Icons.add),
        onPressed: null,
        backgroundColor: Colors.pink,
      ),
    );
  }

  /**
   * Click event callback function to open shopping cart
   */
  void openCart() {
    print("open shopping cart");
  }
}

class MyAppBar extends StatelessWidget {
  final Widget title;
  final num test;

  /**
   * The difference is
   * The first must be passed on
   * The second option depends on my implementation
   */
//  MyAppBar(this.title);
  MyAppBar({this.title, this.test});

  @override
  Widget build(BuildContext context) {
    //Create Container container
    return new Container(
        height: 56.0, //56 pixels high (not real pixels similar to those in the browser)
        padding: const EdgeInsets.symmetric(horizontal: 8.0), //8 pixel fill on left and right
        decoration: new BoxDecoration(color: Colors.blue[500]),
        //Row horizontal linear layout children all child widget s are arranged horizontally
        child: new Row(children: <Widget>[
          //Horizontal layout
          new IconButton(
            //onPressed: null disables Button
              icon: new Icon(Icons.menu),
              tooltip: "Navigation menu",
              onPressed: null),
          new Expanded(child: title),
          //The widget marked Expanded means that it fills in the remaining free space that is not occupied by other widgets
          new IconButton(
              icon: new Icon(Icons.search), tooltip: "search", onPressed: null)
        ]));
  }
}

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Material(
      //Linear layout of Column in vertical direction
      child: new Column(
        //children type is widget. All child widgets are arranged in vertical direction
        children: <Widget>[
          //Passing MyAppBar in at the top of the Column and passing the widget as a parameter to other widgets is a common technique to create various complex widgets
          new MyAppBar(
            title: new Text("Jingxi shopping mall",
                style: Theme.of(context).primaryTextTheme.title),
          ),
          //Use all remaining space centers: Center
          new Expanded(
              child: new Center(
                child: new Text("hello flutter"),
              ))
        ],
      ),
    );
  }
}

padding: const EdgeInsets.symmetric(horizontal: 8.0),
Let's talk about a lot of usage scenarios of this EdgeInsets object. Through it, you can control the offsets of widget s well. all settings are also available. symmetric horizontal and vertical options are also available. only up, down, left and right options are available
Typical used for an offset from each of the four sides of a box. For example, the padding inside a box can be represented using this class

Tags: less

Posted on Fri, 31 Jan 2020 12:49:11 -0800 by system_critical