1. Environment construction

I’m gonna skip it. I’m gonna sleep. I’m gonna tidy up when I have time

2. Basic interface

1. Create a simple structure

import 'package:flutter/material.dart'; Void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp(//Android= "MeterialApp" structure title: 'dalapp ', theme: ThemeData(// theme primaryColor: color.red), home: Scaffold(// Scaffold: Appbar,body,bottombar... AppBar: appBar (title: Text(' title '), centerTitle: true,// content center), Body: Container(// HTML like div child: Container( width: 400, child:MyHome() ), ), ), ); }}Copy the code

This is a basic simple APP structure project

2. Common View

Container: An HTML-like Div

New Container(child:new Text('Hello JSPang',style: TextStyle(fontSize: 20.0),), / / child content alignment: FractionalOffset (0.5, 0.5), / / position, x, y padding: 0-1 EdgeInsets. All (0.5), / / padding margin: Edgeinset.all (10),//margin decoration: new BoxDecoration(// set the border, gradient, bevel, and background image, etc.) // LinearGradient: LinearGradient(colors: [color.yellow, color.red]), border: border. All (style: borderstyle. solid,width: 3.0,color: color.blue), borderRadius: BorderRadius.all(Radius.circular(30)), image: DecorationImage( image: NetworkImage (' https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4122685442, & FM 27 & gp = = 0. 159580239 JPG '), fit: BoxFit.fill ) ), );Copy the code

2.Text

Return new Text('Hello DaLong ',// content area textAlign: textalign.left,// left aligned style: TextStyle(fontSize: 25,fontWeight: FontWeight.w400,color:Colors.red, decoration:TextDecoration.underline, / / set the underline decorationStyle: TextDecorationStyle dashed, / / set the underline color), / / style, font size, bold, color, underline, circle under the color, the underline type... MaxLines: 1,// Overflow: textoverflow. ellipsis,// beyond...) ;Copy the code

3.Image

Image :NetworkImage(// For example, Can show a variety of 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4122685442, & FM 27 & gp = = 0. 159580239 JPG'), fit: Boxfit.fill // Display type)Copy the code

3. Common ViewGroups

1.ListView

New ListView(scrollDirection: Axis. Horizontal,// default vertical, can be set to children: <Widget>[new ListTile(title: New Text (' ahhh '), the subtitle: new Text (' wen-long xu), the leading: the new Icon (the Icons. The org.eclipse.swt.accessibility, color: Colors, blue, size: 40,),), new ListTile (title: new Text (' ahhh '),), new ListTile (title: new Text (' ahhh '),), new ListTile (title: New Text(' ahhh '),)],);Copy the code

2.GlidViewGridView

GlidViewGridView (gridDelegate: SliverGridDelegateWithFixedCrossAxisCount (crossAxisCount: 3, / / display lines childAspectRatio: 0.7,//* crossAxisSpacing: 3,// horizontal spacing: 3,// vertical spacing), < widgets > [new Image.net work (' http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg ', fit: BoxFit. Cover), the new Image.net work (' http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg ', fit: BoxFit. Cover), the new Image.net work (' http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg ', fit: BoxFit.cover), ..... ] ,);Copy the code

3. Lay out the Row horizontally

MainAxisAlignment mainAxisAlignment is a horizontal mainAxisAlignment: MainAxisAlignment center, / / if the column is vertical spindle crossAxisAlignment: crossAxisAlignment. The end, the children: <Widget>[new RaisedButton(onPressed: (){}, color:Colors. RedAccent, Child :new Text(' red button ')), Expanded(child: New RaisedButton (/ / this is equivalent to the XML weidgh layout, automatic with onPressed: {} (), color: Colors. OrangeAccent, child: New Text(' yellow '),), new RaisedButton(onPressed: (){}, color:Colors. PinkAccent, Child :new Text(' pink '))],);Copy the code

4. Vertical Column

new Column( textBaseline: TextBaseline.ideographic, mainAxisAlignment: MainAxisAlignment center, / / if the column is vertical spindle crossAxisAlignment: crossAxisAlignment. The end, the children: <Widget>[Container(child: Text(' ahh '), width: 1000, alignment: FractionalOffset(0.8, 0),), Text('I am JSPang'), Text('my website is jspang.com'), Text('I love coding')],);Copy the code

5. Stack

New Stack(const FractionalOffset(0.5, 0.8)); // Use this attribute only in two overlapping cases. <Widget>[ new CircleAvatar( backgroundImage: New NetworkImage (' http://jspang.com/static//myimg/blogtouxiang.jpg '), the radius: 100.0), the new Container (decoration: New BoxDecoration(color: color.lightblue,), padding: EdgeInsets. All (5.0), child: new Text('JSPang '),)],); New Stack(children: <Widget>[New CircleAvatar(backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'), radius: 100.0,), new toy (top:10.0, left:10.0, child: New Text('JSPang.com'),), new toy (bottom:10.0, right:10.0, child: new Text(' toy fat '),)],);Copy the code

6.IndexStack

<Widget>[new CircleAvatar(backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'), radius: 100.0,), New toy (top:10.0, left:10.0, Child: new Text('JSPang.com'),),......Copy the code

6. Card layout

Child :new Container(width: 200, height: 200,)Copy the code