Flutter page layout of Padding, Row, Column, Expanded

table of Contents

. 3, the Column vertical layout component

Padding components

padding layout is the most common layout, because there are a lot of components and Flutter no padding properties, so use padding components wrapped up.

Common attributes: padding and child

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Padding"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 30, 0),
      child: GridView.count(
        crossAxisCount: 2,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.fromLTRB(30, 30, 0, 30),
            child: Image.network(
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581413255772&di=52021e3e656744094d0339e7016994bb&imgtype=0&src=http%3A%2F%2Fimg8.zol.com.cn%2Fbbs%2Fupload%2F19571%2F19570481.jpg",
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(30, 30, 0, 30),
            child: Image.network(
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581413274840&di=2f1c59abbe7bdc139e967162857af452&imgtype=jpg&src=http%3A%2F%2F01.minipic.eastday.com%2F20170925%2F20170925144653_d41d8cd98f00b204e9800998ecf8427e_3.jpeg",
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(30, 30, 0, 30),
            child: Image.network(
                "http://file03.16sucai.com/2016/06/20165rd2yvmc025.jpg",
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(30, 30, 0, 30),
            child: Image.network(
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581413287870&di=35491998b94817cbcf04d9f9f3d2d4b3&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2464547320%2C3316604757%26fm%3D214%26gp%3D0.jpg",
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(30, 30, 0, 30),
            child: Image.network(
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581413255771&di=45f225944b095560280aaae82a9476ed&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201311%2F17%2F174124tp3sa6vvckc25oc8.jpg",
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(30, 30, 0, 30),
            child: Image.network(
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581413255771&di=e59451b061ec568460b1044145e04526&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_111029%2F1110290127f0baf0a5adecd422.jpg",
                fit: BoxFit.cover),
          ),
        ],
      ),
    );
  }
}

Renderings:

Row horizontal layout components

Common attributes: childdren, mainAxisAlignment horizontal axis sort, crossAxisAlignment longitudinal axis of the sort

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Row"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400,

      height: 600,
      color: Colors.blue,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Image.network(
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581413274840&di=2f1c59abbe7bdc139e967162857af452&imgtype=jpg&src=http%3A%2F%2F01.minipic.eastday.com%2F20170925%2F20170925144653_d41d8cd98f00b204e9800998ecf8427e_3.jpeg",
            fit: BoxFit.cover,
            width: 100,
            height: 100,
          ),
          Image.network(
            "http://file03.16sucai.com/2016/06/20165rd2yvmc025.jpg",
            fit: BoxFit.cover,
            width: 100,
            height: 100,
          ),
          Image.network(
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581413287870&di=35491998b94817cbcf04d9f9f3d2d4b3&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2464547320%2C3316604757%26fm%3D214%26gp%3D0.jpg",
            fit: BoxFit.cover,
            width: 100,
            height: 100,
          ),
        ],
      ),
    );
  }
}

Column vertical layout assembly

Row assembly similar properties and is substantially the same.

Here the code of Row Row Column replaced with the following effects (code not repeated):

Expanded elastic layout

Expanded are typically Row and Column mixed together or

Properties: Flex: proportion of child elements entire row or column of: subelements

The following code: Row parent element is, the first sub-assembly remains unchanged, since the subassembly so Expanded uses adaptive set Row to fill the entire length and width are not effective.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Expanded"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Image.network(
          "http://file03.16sucai.com/2016/06/20165rd2yvmc025.jpg",
          fit: BoxFit.cover,
          width: 100,
          height: 100,
        ),
        Expanded(
          child: Image.network(
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581413274840&di=2f1c59abbe7bdc139e967162857af452&imgtype=jpg&src=http%3A%2F%2F01.minipic.eastday.com%2F20170925%2F20170925144653_d41d8cd98f00b204e9800998ecf8427e_3.jpeg",
            fit: BoxFit.cover,
            width: 100,
            height: 100,
          ),
          flex: 2,
        ),
      ],
    );
  }
}

Small Demo

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Demo"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.all(10),
          child: Container(
            height: 200,
            color: Colors.black,
          ),
        ),
        Row(
          children: <Widget>[
            Expanded(
                flex: 2,
                child: Container(
                  padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
                  height: 200,
                  child: Image.network(
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581413255771&di=e59451b061ec568460b1044145e04526&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_111029%2F1110290127f0baf0a5adecd422.jpg",
                    fit: BoxFit.cover,
                  )),
                ),
            Expanded(
              flex: 1,
              child: Column(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
                    height: 100,
                    child: Image.network(
                      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581413287870&di=35491998b94817cbcf04d9f9f3d2d4b3&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2464547320%2C3316604757%26fm%3D214%26gp%3D0.jpg",
                      fit: BoxFit.cover,
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.fromLTRB(10, 10, 10, 0),

                    height: 100,
                    child: Image.network(
                      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581413255771&di=45f225944b095560280aaae82a9476ed&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201311%2F17%2F174124tp3sa6vvckc25oc8.jpg",
                      fit: BoxFit.cover,
                    ),
                  )
                ],
              ),
            )
          ],
        )
      ],
    );
  }
}

Please call me brother Chuan Zi

Published 66 original articles · won praise 36 · views 70000 +

Private letter concerns