Memory is a song, forget the words and can hum its melody. Don’t say I have changed, I just learned, how others treat me, I should do to others. Lost the fate of the people, even in the same city is not easy to meet; A turn around means a lifetime.

StatefluWidget and base components

• MaterialApp
• Scaffold with BottomNavigationBar
• AppBar
• RefreshIndicator
• Image
• • • Loading network images
    • Loading local images
• PageView

MaterialApp

Only common attributes are listed

import 'package:flutter/material.dart';

//StatefluWidget and base components
class Flutter_Demo5 extends StatefulWidget {
  @override
  _Flutter_Demo5State createState(a) => _Flutter_Demo5State();
}

class _Flutter_Demo5State extends State<Flutter_Demo5> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "State FluWidgets and Base Components"./ / theme
      theme:
          ThemeData(primarySwatch: Colors.green, brightness: Brightness.light),

      / / dark themes
      darkTheme:
          ThemeData(primarySwatch: Colors.yellow, brightness: Brightness.dark),
      home: Scaffold(
        appBar: AppBar(
          title: Text("State FluWidgets and Base Components"),
        ),
        body: Container(
          color: Colors.white,
        ),
      ),
      color: Colors.pink,
      routes: <String, WidgetBuilder>{
        // Define a jump route
      },
      supportedLocales: <Locale>[
        const Locale('en'.'US').const Locale('fi'.'FI'),
      ],
      debugShowCheckedModeBanner: false.// The DEBUG icon in the upper right corner defaults to true
// showPerformanceOverlay: true,// Turn on performance overlay at the top of the screen, default false
/ / checkerboardOffscreenLayers: true, / / open the render to the outside of the screen bitmap layer checkerboarding. The default false,
// debugShowMaterialGrid: true,// Display grid, default false
/ / checkerboardRasterCacheImages: true, / / open the grating image cache check plate, the default is false
    ); }}Copy the code

Switch to the task management interface (my phone is Huawei):

Scaffold with BottomNavigationBar

BottomNavigationBar({
    Key key,
    @required this.items,// There must be at least two child widgets
    this.onTap,// Click the event to know which widget is currently clicked
    this.currentIndex = 0.// Which widget is currently displayed
    this.elevation = 8.0./ / the shadow
    BottomNavigationBarType type,// Sets the layout of items
    Color fixedColor,SelectedItemColor = selectedItemColor
    this.backgroundColor,// Set the background color
    this.iconSize = 24.0.// Set the icon size
    Color selectedItemColor,// Set the selected color
    this.unselectedItemColor,// Set the color when it is not selected
    this.selectedIconTheme = const IconThemeData(a).// Set the theme of the selected icon
    this.unselectedIconTheme = const IconThemeData(a).// Set the theme of the icon when it is not selected
    this.selectedFontSize = 14.0.// Set the text size when selected
    this.unselectedFontSize = 12.0.// Set the text size when it is not selected
    this.selectedLabelStyle,// Set the labe style when selected
    this.unselectedLabelStyle,// Set labe style when not selected
    this.showSelectedLabels = true.// Sets whether text is displayed when selected
    bool showUnselectedLabels,// Sets whether text is displayed when not selected
  })
Copy the code

 home: Scaffold(
        drawer: Container(
          color: Colors.white,
          width: 300,
          child: Column(
            children: <Widget>[
              Container(
                child: Text("drawer1"),
              ),
              Container(
                child: Text("drawer2"),
              ),
              Container(
                child: Text("drawer3"),
              )
            ],
          ),
        ),
        primary: false,
        floatingActionButton: FloatingActionButton(
          child: Text("点我"),
        ),
        bottomSheet: Text("bottomSheet"),
        endDrawer: Container(
          / / on the right side of the Drawer
          color: Colors.white,
          width: 300,
          height: 300,
          child: Text("endDrawer"),
        ),
        persistentFooterButtons: <Widget>[
          Container(
            child: Text("Button one"),
          ),
          Container(
            child: Text("Button two"),
          ),
        ],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: mIndex,
          onTap: (index) {
            setState(() {// Each click of the button refreshes the entire StatefluWidget
              mIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.cached), // Default state
              activeIcon: Icon(
                // Select status
                Icons.cached,
                color: Colors.green,
              ),
              title: Text("Refresh"), // The color changes with the theme color
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.ac_unit),
              activeIcon: Icon(
                Icons.ac_unit,
                color: Colors.green,
              ),
              title: Text("Snow"),
            )
          ],
        ),
        appBar: AppBar(
          title: Text("State FluWidgets and Base Components"),
        ),
        body: mIndex == 0		// Display the current page using the triad algorithm
            ? Container(
                color: Colors.white,
              )
            : Container(
                width: 200,
                alignment: Alignment.center,
                height: 200,
                child: Text("Snow"),
                color: Colors.green,
              ),
      ),
Copy the code

AppBar

Please see the picture below for the specific location:

Buttons are usually used with tabbars:

To use TabBar you need to wrap DefaultTabController, and the length needs to be set to the number of current tabs

 home: DefaultTabController(
        length: 3,
        child: Scaffold(
          drawer: Container(
            color: Colors.white,
            width: 300,
            child: Column(
              children: <Widget>[
                Container(
                  child: Text("drawer1"),
                ),
                Container(
                  child: Text("drawer2"),
                ),
                Container(
                  child: Text("drawer3"),
                )
              ],
            ),
          ),
          primary: true.// Does the AppBar title display fully? The default is true
          floatingActionButton: FloatingActionButton(
            child: Text("点我"),
          ),
          bottomSheet: Text("bottomSheet"),
          endDrawer: Container(
            / / on the right side of the Drawer
            color: Colors.white,
            width: 300,
            height: 300,
            child: Text("endDrawer"),
          ),
          persistentFooterButtons: <Widget>[
            Container(
              child: Text("Button one"),
            ),
            Container(
              child: Text("Button two"),
            ),
          ],
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: mIndex,
            onTap: (index) {
              setState(() {
                mIndex = index;
              });
            },
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.cached), // Default state
                activeIcon: Icon(
                  // Select status
                  Icons.cached,
                  color: Colors.green,
                ),
                title: Text("Refresh"), // The color changes with the theme color
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.ac_unit),
                activeIcon: Icon(
                  Icons.ac_unit,
                  color: Colors.green,
                ),
                title: Text("Snow"),
              )
            ],
          ),
          appBar: AppBar(
            leading: Icon(Icons.arrow_back),
            // This button will duplicate the draw button

            title: Text("State FluWidgets and Base Components"),
            // The button displays text
            actions: <Widget>[
              // This button will duplicate the endDraw button
              Container(
                child: Text("actions"),
              ),
            ],
            shape: RoundedRectangleBorder(
                / / AppBar shape
                borderRadius: BorderRadius.all(Radius.circular(20))),
            backgroundColor: Colors.red,
            // Background color follows theme color by default
            brightness: Brightness.light,
            // Status bar brightness
            iconTheme: IconThemeData(
                color: Colors.blue, // The color of leading in AppBar
                opacity: 0.8 // The transparency of leading in AppBar is 1 opaque
                ),

            / / the shadow
            elevation: 20./ / AppBar transparency
            toolbarOpacity: 0.7./ / botton transparency
            bottomOpacity: 0.7, bottom: mIndex ! =0
                ? TabBar(
                    isScrollable: false.// Whether it can be scrolled
                    tabs: <Widget>[
                      / / TabBar Tab
                      Tab(
                        text: "page1",
                        icon: Icon(Icons.call),
                      ),
                      Tab(
                        text: "page2",
                        icon: Icon(Icons.save),
                      ),
                      Tab(
                        text: "page3",
                        icon: Icon(Icons.data_usage),
                      ),
                    ],
                    indicatorColor: Colors.greenAccent,
                    // The indicator selects the color
                    indicatorPadding: EdgeInsets.zero,
                    // Inside margin of indicator
//                indicator: BoxDecoration(//选中颜色(指示器与选中颜色只能选一个)
// color: Colors.deepOrange,
/ /),
                    indicatorSize: TabBarIndicatorSize.tab,
                    / / the TAB indicator calculation TabBarIndicatorSize. Lable and text width
                    labelColor: Colors.blue,
                    //Tab default color
                    labelStyle: TextStyle(fontSize: 18),
                    / / Tab style
                    labelPadding: EdgeInsets.all(5),
                    / / Tab padding
                    unselectedLabelColor: Colors.yellow,
                    //Tab unselected color
                    unselectedLabelStyle: TextStyle(fontSize: 15),
                    //Tab is the selected style
                    onTap: (index) {
                      mIndex = index;
                      print(${index} ${index}); },) :null,
          ),
          body: mIndex == 0
              ? Container(
                  color: Colors.white,
                )
              : TabBarView(// Use TabBarView to respond
                  children: <Widget>[
                    initTabitem("page1", Colors.blue),
                    initTabitem("page2", Colors.red),
                    initTabitem("page3", Colors.yellow),
                  ],
                ),
        ),
      ),
      
 initTabitem(String s, Color color) {
    return Container(
      color: color,
      child: Text(s),
    );
  }
Copy the code

Take a look at the results:

Note: my aesthetic is very good, so write is to let everyone see the effect more obvious!!

RefreshIndicator

 body: RefreshIndicator(
            child: ListView(
              children: <Widget>[
                Container(
                  color: Colors.white,
                )
              ],
            ),
            onRefresh:initRefresh ,// Mandatory argument
            color: Colors.green,// Indicator color
            backgroundColor: Colors.yellow,// Background color
            displacement: 20.// Drop down distance
          )
 Future<Null> initRefresh(a) async {
    await Future.delayed(new Duration(milliseconds: 1000)); / / refresh 1 s
    return null;
  }
Copy the code

Image

Image loading controls (for common properties only)

Loading network images

 Image.network(
             // Add network image
               "http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg",
                width: 100,
                 height: 150,
                 fit: BoxFit.fill,
          ),
Copy the code

Loading local images

1. Create an images folder locally and put the images you want to load into it

2, declare the image under pubspec.yaml (Be sure to write correctly, not even a single space wrong!! )

Use asset to load local images in code:

Image.asset(
         "images/green.jpeg",
         width: 100,
         height: 150
        ),
Copy the code

Take a look at the loaded image: The web loaded image in Figure 1 is completely filled with Boxfit. fill, so it takes up the entire width!

# TextField > Text input component

TextField parameters	type	instructions
obscureText	bool	The hidden text
keyboardType	TextInputType	Text TextinputType. multiline textinputType. number textinputType. phone textinputType. datetime TextInputType.emailAddress TextInputType.url
textInputAction	TextInputAction	Pop up the button in the lower right corner of the keyboardTextInputAction. None… Textinputaction. newline (hold CTRL to come in, the comment is very clear and I won’t repeat it)
textCapitalization	TextCapitalization	TextCapitalization control. Words…
cursorColor	Color	The cursor color
cursorWidth	double	Width of the cursor
cursorRadius	Radius	The cursor rounded corners
maxLines	int	Maximum number of rows (greater than minimum)
minLines	int	Minimum number of rows (smaller than maximum)
maxLength	int	Maximum number of input characters (current input corner in lower right corner)
controller	TextEditingController	Direct new TextEditingController() controller configuration (used to delete text content)
focusNode	FocusNode	Direct new FocusNode() to turn off the soft keyboard configuration (needed to turn off the soft keyboard)
decoration	InputDecoration	Decorator InputDecoration. Collapsed (hintText: “without the underscore”) without the underscore a decorator (specific decorator will use the following)
onChanged	ValueChanged	The current input responds to the callback

InputDecoration provides only common types

Code comments are marked, to see the effect of the ~

TextField(
// obscureText:true,// hide text
                  keyboardType: TextInputType.number,
                  // Set the keyboard pop-up type
                  textInputAction: TextInputAction.next,
                  // Keyboard button bottom right button
                  textCapitalization: TextCapitalization.characters,
                  // Case control (I see no effect!)
                  cursorColor: Colors.yellow,
                  // Cursor color
                  cursorWidth: 10.// Cursor width
                  cursorRadius: Radius.circular(20),
                  // The cursor is rounded
                  maxLines: 3.// Maximum number of rows
                  minLines: 1.// Minimum number of lines
                  maxLength: 8.// Maximum input character
                  controller: mController = new TextEditingController(),
                  // Initialize the controller
                  focusNode: focusNode = new FocusNode(),
                  // Configure the button to close the software
/ / decoration: InputDecoration collapsed (hintText: "without the underscore"), / / no underline box

                  decoration: InputDecoration( // Maximum input style in the lower right corner
                      counter: Text("Maximum input character"),
                      icon: Icon(Icons.accessibility),
                      // Left icon
                      prefixIcon: Icon(Icons.title),
                      // Left inner icon
                      suffixIcon: IconButton( // Icon on the right
                        icon: Icon(Icons.delete),
                        onPressed: () {
                          print('SZJonPressed'); mController? .clear();// Clear the textfocusNode? .unfocus();// Close the soft keyboard
                        },
                      ),

                      helperText: "Please enter your mobile phone number.".// Help tips
                      helperStyle: TextStyle(color: Colors.green),
                      hintText: "Please enter"./ / hint hint
                      labelText: "Account".// The hover prompt first displays lableText before displaying hintText
                      errorText: "Please enter your phone number correctly.",
                      errorMaxLines: 5.// Error message
// errorBorder: OutlineInputBorder(),


                      border: OutlineInputBorder( // Set the border
                        borderRadius: BorderRadius.all(
                            Radius.circular(30)), // Set rounded corners
                      )

                  ),

                  onChanged: (value) { // Respond to the callback
                    print('${value}'); mValue = value; },)Copy the code

Effect:

PageView

Container(
                        height: 100,
                        margin: EdgeInsets.only(top: 30),
                        child: PageView(
                            scrollDirection: Axis.vertical,// Set the sliding direction to Axis. Horizontal by default
                          controller: PageController(
                            viewportFraction: 0.9.// Set each Page not to fill the screen, leaking the previous and the next Page!
                              initialPage: 0.// Set the default Page
                             keepPage: true// Whether to save the current scroll page

                          ),
                          onPageChanged: (index){
                            print("SZJonPageChanged${index}\t\t");
                          },

                          children: <Widget>[
                            initPageViewItem("page1", Colors.green),
                            initPageViewItem("page2", Colors.yellow),
                            initPageViewItem("page3", Colors.red),
                            initPageViewItem("page4", Colors.blue),
                          ],
                        ),
                      )
 initPageViewItem(String s, Color color) {
    return Container(
      color: color,
      alignment: Alignment.center,
      child: Text(s),
    );
  }
Copy the code