Three days to quickly learn flutter (1)

Too many tutorials are cumbersome and time-consuming. If we only start from the perspective of use, then the learning curve of flutter can be shortened a lot. First, layout, second, event, third, animation

The layout solves what can be seen, the event determines what can be done, and the animation makes the layout and event have a better experience. Get these three things, you can engage in basic development.

1. Layout: single child layout, multi-child layout and list.

1. List layout: As the name suggests, it is the layout mode of a single control. There are many, but we only know one container. For other list layouts, we only need to know their simple features, and only understand them when we need them.

container：

Container({
    Key? key,
    this.alignment, //对齐方式
    this.padding,//内边距
    this.color,// 背景色
    this.decoration,// 背景装饰
    this.foregroundDecoration,//前景装饰
    double? width,//容器的宽度
    double? height,//容器的高度
    BoxConstraints? constraints,//容器大小的限制条件
    this.margin,//外边距，不属于decoration的装饰范围
    this.transform,
    this.transformAlignment,
    this.child,//变换
    this.clipBehavior = Clip.none,
  })

Container(
color: Color.red,
width: 100,
height: 100,
child: Icon(
Icons.pets,
size: 30,
),
)

Align: Align left, right, etc.

Center: In the center, in fact, Center also inherits Align, and the alignment is set to Alignment.center.

Padding: Usually used to set the margin from the child Widget to the parent Widget (you can call it the inner margin of the parent component or the outer margin of the child Widget)

Positioned: absolute layout

2. Multi-sub layout: Put multiple Widgets together for layout, such as horizontal and vertical arrangement, and sometimes they need to be stacked, such as putting a paragraph of text on the picture; at this time, we need to use multi-sub layout components.

Row, Column: horizontal and vertical linear layout, nothing to say

Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(color: Colors.red, height: 60),
        ),
        Container(color: Colors.blue, width: 80, height: 80),
        Container(color: Colors.green, width: 70, height: 70),
        Expanded(
          flex: 1,
          child: Container(color: Colors.orange, height: 100),
        )
      ],
    )

Stack: stack layout, if you need to overlap the controls, use Stack

3. List: ListView and GridView

ListView.builder(
      itemCount: 100,
      itemExtent: 80,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(title: Text("标题$index"), subtitle: Text("详情内容$index"));
      }
)

class GridCountDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // GridView构造函数
    return GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, // 交叉轴的item个数，简单来说就是多少列
            mainAxisSpacing: 10, // 主轴的间距
            crossAxisSpacing: 10, // 交叉轴的间距
            childAspectRatio: 1.0 // 子Widget的宽高比
        ),
        children: List.generate(100, (index) {
          return Container(
            color: Colors.purple,
            alignment: Alignment(0, 0),
            child: Text("item$index", style: TextStyle(fontSize: 20, color:Colors.white)),
          );
        }),
      );
  }
}

It’s enough for now, check the documentation when it’s not enough

Three days to quickly learn flutter (1)

Guess you like