Widget learning of Flutter development

1, Text component

attribute

textAlign: TextAlign.left, ----- text alignment
maxLines: 1, ----- display maximum lines
Overflow: TextOverflow.clip, ---- how to handle text overflow
  • clip: directly cut off the overflow text.
  • Ellipsis: use ellipsis (...) at the back
  • Fade: fade effect

Style the style of the text

 body: new Center(
          child: new Text('Without indifference, without ambition, without tranquility, without distance.(Zhu Geliang)',
              textAlign: TextAlign.left,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 20,
                color: Color.fromARGB(255, 0, 0, 255),
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.solid,
                fontStyle: FontStyle.italic,
              )),
        ),

2, Container component

The Alignment attribute, the Alignment of the child in the Container, that is, the Alignment of the Container's child content, is not the Alignment of the Container itself.
padding inner margin
Margin margin
decoration decorator
Use:
body: new Center(
          child: new Container(
            child: new Text(
              'Without indifference, without ambition, without tranquility, without distance.(Zhu Geliang)',
              style: TextStyle(fontSize: 30.0),
            ),
            alignment: Alignment.topLeft,
            width: 500.0,
            height: 200.0,
            //color: Colors.lightBlue,
            //padding: const EdgeInsets.all(10),    //padding
            padding: const EdgeInsets.fromLTRB(10.0, 50.0, 0, 0),
            margin: const EdgeInsets.all(20.0),
            decoration: new BoxDecoration(
              gradient: const LinearGradient(
                  colors: [Colors.lightBlue, Colors.green, Colors.purple]
                  ),
                  border: Border.all(width: 5.0,color:Colors.red
                  ),
            ),
          ),
        ),

3, Image component

How to add pictures:

  1. Image.asset project resource image
  2. Image.file (absolute path) system resource picture
  3. Image.network (url) network resource picture

fit attribute

  • BoxFit.fill                             
  • BoxFit.contain                     
  • BoxFit.cover                        

repeat attribute

  • ImageRepeat.repeat repeat repeat both horizontally and vertically, covering the entire container
  • ImageRepeat.repeatX horizontal repeat
  • ImageRepeat.repeatY vertical repeat
body: new Center(
            child: new Container(
          child: new Image.network(
            'https://profile.csdnimg.cn/0/5/2/1_jyd0124',
            fit: BoxFit.cover,
            //color: Colors.lightBlue,
            //colorBlendMode: BlendMode.darken, //Picture mix mode( colorBlendMode)and color Properties for use with
          ),
          width: 300.0,
          height: 200.0,
          color: Colors.lightGreen,
        )
    ),

4, ListView component

List usage

body: new ListView(
          children: <Widget>[
            /*new Image.network(
                'https://cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.png'),
            new Image.network(
                'https://cdn2.jianshu.io/assets/web/banner-s-7-1a0222c91694a1f38e610be4bf9669be.png'),
             */ //Picture list use
            new ListTile(
              leading: new Icon(
                Icons.perm_camera_mic,
              ),
              title: new Text('perm_camera_mic'),
            ),
            new ListTile(
              leading: new Icon(
                Icons.perm_phone_msg,
              ),
              title: new Text('perm_phone_msg'),
            ),
          ],
        ),

Horizontal list: add a scrollDirection property to the ListView component

body: new Center(
            child: new Container(
                height: 200.0,
                child: new ListView(
                  scrollDirection: Axis.horizontal, //Axis.vertical: vertical list
                  children: <Widget>[
                    new Container(
                      width: 230.0,
                      color: Colors.lightBlue,
                    ),
                    new Container(
                      width: 230.0,
                      color: Colors.lightGreen,
                    ),
                  ],
                ))),

The Dart language List is declared as:

  • var myList = List(): non fixed length declaration.
  • var myList = List(2): fixed length declaration.
  • Var mylist = list < string > (): fixed type declaration.
  • var myList = [1,2,3]: assign value to List directly
import 'package:flutter/material.dart';

void main() =>
    runApp(MyApp(items: List<String>.generate(1000, (i) => 'item $i')));

class MyApp extends StatelessWidget {
  final List<String> items;
  MyApp({Key key, @required this.items}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView Dome',
      home: new Scaffold(
        appBar: new AppBar(title: new Text('ListView Widget')),
        body: new ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              return new ListTile(
                title: new Text('${items[index]}'),
              );
            }),
      ),
    );
  }
}

5, GridView component

Common properties:

  • crossAxisSpacing: empty space between grids.
  • crossAxisCount: number of grids placed in one row
body: GridView.count(
            padding: EdgeInsets.all(20.0),
            crossAxisSpacing: 10.0,
            crossAxisCount: 3,
            children: <Widget>[
              const Text('I am j.y.d'),
              const Text('I love flutter'),
              const Text('jyd0124.com'),
              const Text('2020/02/06'),
              const Text('Come on,China!'),
              const Text('Come on,Wuhan!'),
            ],
          ),

The government has discouraged the use of this method. Another way is to write

body: GridView(
           gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
             crossAxisCount: 3,
             mainAxisSpacing: 2.0,
             crossAxisSpacing: 2.0,
             childAspectRatio: 0.75,
             ),
            children: <Widget>[
              new Image.network('http://img5.mtime.cn/mg/2019/10/02/105324.67493314_170X256X4.jpg',fit:BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mg/2019/09/26/092514.83698073_170X256X4.jpg',fit:BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mg/2019/11/07/111316.10093613_170X256X4.jpg',fit:BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mg/2019/12/13/094432.64997517_170X256X4.jpg',fit:BoxFit.cover),
              new Image.network('http://img31.mtime.cn/mt/2014/02/22/230757.74994253_220X124X4.jpg',fit:BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mg/2019/07/10/164947.40820910_170X256X4.jpg',fit:BoxFit.cover),
            ],
        ),
  • childAspectRatio: aspect ratio
  • mainAxisSpacing: horizontal grid gap
  • crossAxisSpacing: neutral to vertical grid

At this point, the learning of using components is here. In the next part, we will learn about layout!

Tags: Android network Attribute

Posted on Sun, 09 Feb 2020 03:48:07 -0500 by dotBz