Make complaints

Last week I watched the basic components of flutter, mainly the videos and official documents of b station with fat technology. After reading them, I thought it would be better to learn dart grammar first and then learn it. It's hard to have an exam tomorrow. I have to review the exam at night.
//It is mainly to record the code of watching videos and learning by yourself. You can see the usage of components at a glance.

Text widget

The most common component is to see how to deal with the omitted points.

import 'package:flutter/material.dart';

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

class Myapp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        body: Center(
          child: Text(
            'La la la la la la la la la la la la la la la la Zero Zero',
           // textAlign:TextAlign.center, / / align Center
            textAlign: TextAlign.right, //Right alignment
            maxLines: 1, //Maximum display function
           // overflow:TextOverflow.clip, / / omit text
            //overflow: TextOverflow.ellipsis, / / omit three omitted points of text
            overflow: TextOverflow.fade, //Gradual change
            //Font attribute
            style: TextStyle(
              fontSize: 25.0,//font size
              color: Color.fromARGB(255, 255, 125, 125),
              decoration: TextDecoration.underline, //Underline
              decorationStyle: TextDecorationStyle.solid,
            ),
          ),
        ),
      ),
    );
  }


}

Container widget box layout

The front-end should be very clear, but for our clients, I think this is a follow layout or a root View block.

child: Container(//Create box layout
          child: new Text('It's Zero Zero Zero',style: TextStyle(fontSize: 40.0),),
          //alignment: Alignment.center, / / align Center
          alignment: Alignment.bottomRight, //Align bottom layout left
          width: 500.0,
          height: 400.0, //Set the width and height of the layout
          //color: Colors.lightBlue, / / the color of the layout

         // padding: const EdgeInsets.all(10.0), / / top, bottom, left and right margins
          padding: const EdgeInsets.fromLTRB(10.0, 100.0, 0.0, 0.0), //padding
          margin: const EdgeInsets.all(10.0) //Margin

          // ignore: expected_token
          decoration: new BoxDecoration(
            gradient: const LinearGradient(
            colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]  //background color
        )
            // ignore: expected_token
            border: Border.all(width: 2.0,color: Colors.red),  //Outer border distance color
        ),
        ),

imageview

• Resource directory
• asset local path
• file memory picture
• Network picture of memorynetWork

 child: Container(
          child: new Image.network('',
         // fit: BoxFit.contain, / / try to fill the container as much as possible
          //  fit: BoxFit.fill, / / fill the container
            //fit: BoxFit.fitWidth, / / fill horizontally
           // fit: BoxFit.fitHeight, / / fill vertically
           // fit: BoxFit.cover, / / the image is not deformed but cut.
            fit: BoxFit.scaleDown, //No change


            color: Colors.greenAccent, //Picture color
            colorBlendMode:BlendMode.darken , //Mixed mode

            //repeat: ImageRepeat.noRepeat, / / do not repeat
           // repeat: ImageRepeat.repeat / / fill in repeatedly
            repeat: ImageRepeat.repeatX, //x-axis filling



          ),
          width: 300.0,
          height: 200.0,
          color:Colors.amberAccent

        ),

ListView

Ordinary use

There is a widget array in it, which is very convenient to handle

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(title: new Text("ListView Widget"),),
        body: new ListView(
          children: <Widget>[ //An array
            new ListTile( //First line of information
              leading: new Icon(Icons.perm_camera_mic), //Picture information
              title: new Text('First'),                 //Written words
            ),
            new ListTile(
              leading: new Icon(Icons.access_alarm),
              title: new Text("The second"),
            ),
            new Image.network("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561478490461&di=a7ac2e32bb630656aa7f96257f834f35&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201709%2F07%2F20170907202410_HYAKV.thumb.700_0.jpeg")
          ],
        ),
      ),
    );
  }
}

Horizontal / vertical use

class MyList extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      scrollDirection: Axis.horizontal, //Horizontal layout
      //scrollDirection: Axis.vertical, / / vertical layout
      children: <Widget>[
        new Container(
          width: 180.0,
          color: Colors.lightBlue,
        ),
        new Container(
          width: 180.0,
          color: Colors.red,
        ),
        new Container(
          width: 180.0,
          color: Colors.black,
        ),
        new Container(
          width: 180.0,
          color: Colors.yellow,
        )
      ],
    );
  }

}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(title: new Text("ListView Widget")),
        body: Center(
          child: Container(
            height: 200.0,
           child: MyList(),
          ),
        ),

      ),
    );
  }

}

dynamic data

import 'package:flutter/material.dart';

void main() => runApp(MyApp(
  items:new List<String>.generate(10000, (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) {
    // TODO: implement build
    return MaterialApp(
      title: 'Flutter Demo',
      home: 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]}'),
            );
          },
        )

      ),
    );
  }
}

GridView

class MyApp extends StatelessWidget{
 // final List<String> items;
 // MyApp({Key key,@required this.items}):super (key:key);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(title: new Text("ListView Widget")),
        body: GridView.count(
          padding:const EdgeInsets.all(20) , //padding
          crossAxisSpacing: 10.0, //Distance of mesh
          crossAxisCount: 3, //How many columns per row
          children: <Widget>[
            const Text('La La 1'),
            const Text('La La 2'),
            const Text('La La 3'),
            const Text('La La 4'),
            const Text('La La 5'),
            const Text('La La 6'),
          ],
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    return MaterialApp(
      title:'ListView widget',
      home:Scaffold(
          body:GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 2.0,
                crossAxisSpacing: 2.0,
                childAspectRatio: 0.7
            ),
            children: <Widget>[
              new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover),

            ],
          )
      ),
    );
  }
}

layout

Horizontal layout

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    return MaterialApp(
      title:'ListView widget',
      home:Scaffold(
         appBar: new AppBar(
           title: new Text('Horizontal layout'),
         ),

        body: new Row(
         children: <Widget>[
          Expanded(child:new RaisedButton(
            onPressed: (){},
            color: Colors.redAccent,
            child: new Text('La la la la la la'),
          ), ) ,
          Expanded(child:new RaisedButton(
            onPressed: (){},
            color: Colors.yellow,
            child: new Text('La la la la la la'),
          ), ) ,
          Expanded(child:new RaisedButton(
            onPressed: (){},
            color: Colors.blueAccent,
            child: new Text('La la la la la la'),
          ), ) ,

         ],
        ),
      ),
    );
  }
}

Vertical layout

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    return MaterialApp(
      title:'ListView widget',
      home:Scaffold(
         appBar: new AppBar(
           title: new Text('Vertical layout'),
         ),

        body: Center(child: new Column(
          //crossAxisAlignment: CrossAxisAlignment.start, / / left alignment
          crossAxisAlignment: CrossAxisAlignment.center,//Center minor axis
          mainAxisAlignment: MainAxisAlignment.center, //Alignment in the middle of the spindle

          children: <Widget>[
            Expanded(child:new RaisedButton(
              onPressed: (){},
              color: Colors.redAccent,
              child: new Text('La la la la la la'),
            ), ) ,
            Expanded(child:new RaisedButton(
              onPressed: (){},
              color: Colors.yellow,
              child: new Text('La la la la la la'),
            ), ) ,
            Expanded(child:new RaisedButton(
              onPressed: (){},
              color: Colors.blueAccent,
              child: new Text('La la la la la la'),
            ), ) ,

          ],
        ),)
      ),
    );
  }
}

Stacking mode

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    var stack = new Stack(  //Cascading
      alignment: const FractionalOffset(0.5, 0.8), //Alignment 0 to 1
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new NetworkImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561478490461&di=a7ac2e32bb630656aa7f96257f834f35&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201709%2F07%2F20170907202410_HYAKV.thumb.700_0.jpeg"),
          radius: 100.0,
        ),
        new Container(
          decoration: new BoxDecoration(
            color: Colors.pink,
          ),
          padding: EdgeInsets.all(5.0),
          child: Text('dev Love you'),
        )
      ],
    );

    return MaterialApp(
      title:'ListView widget',
      home:Scaffold(
         appBar: new AppBar(
           title: new Text('Horizontal layout'),
         ),

        body: Center(
          child: stack,

        )
      ),
    );
  }
}

Precise layout location

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    var stack = new Stack(  //Cascading
      alignment: const FractionalOffset(0.5, 0.8), //Alignment 0 to 1
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new NetworkImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561478490461&di=a7ac2e32bb630656aa7f96257f834f35&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201709%2F07%2F20170907202410_HYAKV.thumb.700_0.jpeg"),
          radius: 100.0,
        ),
        new Positioned(
          top: 10.0,
          left: 10.0,
          child: new Text('llll'),
        ),
        new Positioned(
          bottom: 10.0,
          right: 10.0,
          child: new Text('222'),
        )
      ],
    );

    return MaterialApp(
      title:'ListView widget',
      home:Scaffold(
         appBar: new AppBar(
           title: new Text('Horizontal layout'),
         ),

        body: Center(
          child: stack,

        )
      ),
    );
  }
}

Card layout

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
  var card = new Card(
    child: Column(
      children: <Widget>[
        ListTile(
          title: Text('Jilin Lala',style: TextStyle(fontWeight: FontWeight.w500),),
          subtitle: Text('145678904567890'),
          leading: new Icon(Icons.account_box,color: Colors.pink,),
        ),
        new Divider(),
        ListTile(
          title: Text('Jilin Lala',style: TextStyle(fontWeight: FontWeight.w500),),
          subtitle: Text('145678904567890'),
          leading: new Icon(Icons.account_box,color: Colors.pink,),
        ),
        new Divider(),
        ListTile(
          title: Text('Jilin Lala',style: TextStyle(fontWeight: FontWeight.w500),),
          subtitle: Text('145678904567890'),
          leading: new Icon(Icons.account_box,color: Colors.pink,),
        )
        
      ],
    ),
  );

    return MaterialApp(
      title:'ListView widget',
      home:Scaffold(
         appBar: new AppBar(
           title: new Text('Horizontal layout'),
         ),

        body: Center(
          child: card,

        )
      ),
    );
  }
}

Navigation jump

This feeling is similar to the activity jump in Android, but there is a main part of the jump Navigator.

void main(){
  runApp(MaterialApp(
    title: "Navigation demonstration",
    home: new FirstScreen()
  ));
}

class FirstScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('Navigation page'),),
      body: Center(
        child: RaisedButton(
          child: Text('First page'),
          onPressed:(){
            Navigator.push(context, MaterialPageRoute(
              builder: (context)=> new SecondScreen()
            ));
          },
        ),
      ),
    );
  }

}

class SecondScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('Second page'),),
      body: Center(
        child: RaisedButton(
          child: Text('Return'),
          onPressed: (){
            Navigator.pop(context); //Back to previous page
          },
        ),
      ),
    );
  }

}

Start value transfer from next page

import 'package:flutter/material.dart';

class Product {
  final String title; //Title
  final String description; //describe
  Product(this.title, this.description);
}

void main(){
  runApp(MaterialApp(
    title: 'Navigation data and reception',
    home: ProductList(
      products:List.generate(
      20,
              (i)=>Product('commodity $i','This is a product. The number is: $i'))
    )
  ));
}

class ProductList extends StatelessWidget {
  final List<Product> products;
  ProductList({Key key,@required this.products}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('List of commodities'),),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context,index){
          return ListTile(
            title: Text(products[index].title),
            onTap: (){
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context)=>ProductDetail(product:products[index])
                )
              );
            },
          );
        },
      )
    );
  }
}

class ProductDetail extends StatelessWidget {
  final Product product;
  ProductDetail({Key key,@required this.product}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('${product.title}'),),
      body: Center(child: Text('${product.description}'),),
    );
    
  }
}

Transfer value to the previous page

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    title: 'Page Jump return data',
    home:FirstPage()
  ));
}
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(title: Text('La La La'),) ,
      body: Center(
        child: RouteButton(),
      ),
    );
  }
}
class RouteButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: (){
        _navigateToXiaoJieJie(context);
      },
      child: Text('Little sister cheerleading'),
    );
  }


  _navigateToXiaoJieJie(BuildContext context) async{
    final result = await Navigator.push(
        context,
        MaterialPageRoute(builder: (context)=>XiaoJieJie())
    );
    
    Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));
  }
}

class XiaoJieJie extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cute girl'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              child: Text('Big long leg little sister'),
              onPressed: (){
                Navigator.pop(context,'Big long leg little sister: 56789990');
              },
            ),
            RaisedButton(
              child: Text('Big long leg little sister'),
              onPressed: (){
                Navigator.pop(context,'Big long leg little sister: 56789990');
              },
            ),
            RaisedButton(
              child: Text('Big long leg little sister'),
              onPressed: (){
                Navigator.pop(context,'Big long leg little sister: 56789990');
              },
            ),
          ],
        ),
      ),
    );
  }
}

summary

I feel that the basic layout and controls are much more troublesome than Android. The most important thing is that I am embarrassed when I can't see the UI. It's also troublesome when I update them every time.