容器类 Widget 不同于布局类 Widget：

1. 首先，布局类 Widget 的子 Widget 一般都是数组，而容器类 Widget 的子 Widget 一般只有一个。
2. 布局类 Widget 是按照一定的排列方式对其子 Widget 进行排列，而容器类 Widget 用于嵌套其他 Widget，对 Widget 添加一些修饰（补白或背景色等）、变换(旋转或剪裁等)、或限制(大小等)。

在前面使用 UI Widget 的时候，想必你已经发现，大部分 UI Widget 都不能指定宽高、设置内边距和外边距，这时候就需要使用容器类 Widget 了。

Padding

Padding 通过给自己指定内边距来添加子 Widget。

Padding 的 快速上手

Padding 的必填参数是 padding，然后其 child 参数就是你想要添加 padding 的 Widget，例如：

Padding(
  padding: EdgeInsets.all(100),
  child: Text('Hello Flutter'),
)

Padding 在一个页面使用的完整 Demo 如下：

import 'package:flutter/material.dart';
main() => runApp(new PaddingWidget());
class PaddingWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Test',
        home: new Scaffold(
            appBar: new AppBar(title: new Text('Flutter 容器Widget -- Padding')),
            body: Padding(
              padding: EdgeInsets.all(100),
              child: Text('Hello Flutter'),
            )));
  }
}

运行效果如下：

Padding 的构造函数及参数说明

Padding 的构造函数为:

class Padding extends SingleChildRenderObjectWidget {
  const Padding({
    Key key,
    @required this.padding,
    Widget child,
  }) : assert(padding != null),
       super(key: key, child: child);
    ...
}

padding：容器内边距

padding 的类型是 EdgeInsetsGeometry，EdgeInsetsGeometry 是抽象类，我们一般使用 EdgeInsets：

Container

Container 是一个拥有绘制、定位、调整大小的 Widget。

Container 的快速上手

Container 可以为 Widget 添加大小、背景等各种参数，其 child 参数就是你想要添加 Container 的 Widget，例如：

Container(
    child:
        ...
)

Container 在一个页面使用的完整 Demo 如下：

import 'package:flutter/material.dart';
main() => runApp(new ContainerWidget());
class ContainerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Test',
        home: new Scaffold(
            appBar:
                new AppBar(title: new Text('Flutter 容器Widget -- Container')),
            body: Container(
              margin: EdgeInsets.only(top: 50.0, left: 120.0), //容器外补白
              constraints:
                  BoxConstraints.tightFor(width: 200.0, height: 150.0), //卡片大小
              decoration: BoxDecoration(
                  //背景装饰
                  gradient: RadialGradient(
                      //背景径向渐变
                      colors: [Colors.green, Colors.blue],
                      center: Alignment.topLeft,
                      radius: .98),
                  boxShadow: [
                    //卡片阴影
                    BoxShadow(
                        color: Colors.black54,
                        offset: Offset(2.0, 2.0),
                        blurRadius: 4.0)
                  ]),
              transform: Matrix4.rotationZ(.2), //卡片倾斜变换
              alignment: Alignment.center, //卡片内文字居中
              child: Text(
                //卡片文字
                "Hello Flutter",
                style: TextStyle(color: Colors.white, fontSize: 40.0),
              ),
            )));
  }
}

运行效果如下：

Container 的构造函数及参数说明

Container 的构造函数为：

class Container extends StatelessWidget {
  Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
  }) : 
  ...
}

Align

Align 可以控制其子 Widget 的对齐方式，并可以根据子 Widget 的大小自动调整自己的大小。

Align 的快速上手

Align 可以为 Widget 添加对齐方式，其 child 参数就是你想要添加 Align 的 Widget，例如：

Align(
  alignment: Alignment.topRight,
  child: Text(
    'Hello Flutter',
    style: TextStyle(color: Colors.red, fontSize: 50),
  ),
 )

Align 在一个页面使用的完整 Demo 如下：

import 'package:flutter/material.dart';
main() => runApp(new AlignWidget());
class AlignWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Test',
        home: new Scaffold(
            appBar: new AppBar(title: new Text('Flutter 容器Widget -- Align')),
            body: Align(
              alignment: Alignment.topRight,
              child: Text(
                'Hello Flutter',
                style: TextStyle(color: Colors.red, fontSize: 50),
              ),
            )));
  }
}

运行效果为：

Align 的构造函数及参数说明

Align 的构造函数为：

class Align extends SingleChildRenderObjectWidget {
  const Align({
    Key key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    Widget child
  }) : assert(alignment != null),
       assert(widthFactor == null || widthFactor >= 0.0),
       assert(heightFactor == null || heightFactor >= 0.0),
       super(key: key, child: child);
    ...
}

Center

Center 可以将其子 Widget 居中显示在自身内部。Center 继承自 Align，其实就是 alignment 为 Alignment.center 的 Align。

Center 的快速上手

Center 可以让 Widget 居中，其 child 参数就是你想要居中的 Widget，例如：

Center(
  child: Text(
    'Hello Flutter',
    style: TextStyle(color: Colors.red, fontSize: 50),
  ),
)

Center 在一个页面使用的完整 Demo 如下：

import 'package:flutter/material.dart';
main() => runApp(new CenterWidget());
class CenterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Test',
        home: new Scaffold(
            appBar: new AppBar(title: new Text('Flutter 容器Widget -- Center')),
            body: Center(
              child: Text(
                'Hello Flutter',
                style: TextStyle(color: Colors.red, fontSize: 50),
              ),
            )));
  }
}

运行效果为：

Center 的构造函数及参数说明

Center 的构造函数为：

class Center extends Align {
  /// Creates a widget that centers its child.
  const Center({ Key key, double widthFactor, double heightFactor, Widget child })
    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}

参考

【1】Flutter 实战
【2】Flutter 中文文档
【3】Flutter 完全手册