布局

Row(水平线性布局)，
Column(垂直线性布局)，
Center
Flex(弹性布局)，
可以看出，Flex的构造函数就比Row和Column的多了一个参数。Row跟Column的区别，正是这个direction参数的不同。当为Axis.horizontal的时候，则是Row，当为Axis.vertical的时候，则是Column。
Wrap|Flow(流式布局)，
Stack|Positioned(层叠布局)
将widget重叠在另一个widget之上.子列表中的第一个widget是base widget; 随后的子widget被覆盖在基础widget的顶部，Stack的内容不能滚动
列表
SingleChildScrollView，ListView，GridView，CustomScrollView，滚动监听和控制ScrollController。

容器

Padding(添加补白)，ConstrainedBox|SizedBox(限制类容器)，DecoratedBox(装饰类容器)，Transform(变换)，Container，其他
定位控件：Container、Align、Center、FittedBox、Baseline、Transform。
尺寸控件：Container、FittedBox、AspectRatio、ConstrainedBox、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth、LimitedBox、SizedBox、SizedOverflowBox。
绘制控件：Container、Padding、Offstage、OverflowBox、SizedOverflowBox、Transform。

Center继承自Align，只不过是将alignment设置为Alignment.center

FittedBox
FittedBox会在自己的尺寸范围内缩放并且调整child位置，使得child适合其尺寸。做过移动端的，可能会联想到ImageView控件，它是将图片在其范围内，按照规则，进行缩放位置调整。FittedBox跟ImageView是有些类似的，可以猜测出，它肯定有一个类似于ScaleType的属性。
new FittedBox(
fit: BoxFit.contain,
alignment: Alignment.topLeft,
child: new Container(
color: Colors.red,
child: new Text(“FittedBox”),
),
),
AspectRatio
AspectRatio的作用是调整child到设置的宽高比，这种控件在其他移动端平台上一般都不会提供，Flutter之所以提供，我想最大的原因，可能就是自定义起来特别麻烦吧。
AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展，widget的高度是由宽度和比率决定的，类似于BoxFit中的contain，按照固定比率去尽量占满区域。
如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio最终将会去优先适应布局限制条件，而忽略所设置的比率。AspectRatio适用于需要固定宽高比的情景下
new AspectRatio(
aspectRatio: 1.5,
child: new Container(
color: Colors.red,
),
),
ConstrainedBox
这个控件的作用是添加额外的限制条件（constraints）到child上，本身挺简单的，可以被一些控件替换使用。
baseline控件布局行为分为两种情况：
如果child有baseline，则根据child的baseline属性，调整child的位置；
如果child没有baseline，则根据child的bottom，来调整child的位置。
const Baseline({
Key key,
@required this.baseline,
@required this.baselineType,
Widget child
})
FractionallySizedBox
FractionallySizedBox控件会根据现有空间，来调整child的尺寸，所以说child就算设置了具体的尺寸数值，也不起作用。
const FractionallySizedBox({
Key key,
this.alignment = Alignment.center,
this.widthFactor,
this.heightFactor,
Widget child,
})
LimitedBox
LimitedBox是将child限制在其设定的最大宽高中的，但是这个限定是有条件的。当LimitedBox最大宽度不受限制时，child的宽度就会受到这个最大宽度的限制，同理高度。
LimitedBox(
maxWidth: 150.0,
child: Container(
color: Colors.blue,
width: 250.0,
),
),
Offstage
Offstage的布局行为完全取决于其offstage参数。。当点击切换按钮的时候，可以看到Offstage显示消失。
当offstage为true，当前控件不会被绘制在屏幕上，不会响应点击事件，也不会占用空间；
当offstage为false，当前控件则跟平常用的控件一样渲染绘制；
另外，当Offstage不可见的时候，如果child有动画，应该手动停掉，Offstage并不会停掉动画。
OverflowBox
当OverflowBox的最大尺寸大于child的时候，child可以完整显示，当其小于child的时候，则以最大尺寸为基准，当然，这个尺寸都是可以突破父节点的。最后加上对齐方式，完成布局
OverflowBox(
alignment: Alignment.topLeft,
maxWidth: 300.0,// 允许child的最大宽度。如果child宽度大于这个值，则按照最大宽度进行展示。
maxHeight: 500.0, // 允许child的最小高度。如果child高度小于这个值，则按照最小高度进行显示。
child: Container(
color: Color(0x33FF00FF),
width: 400.0,
height: 400.0,
),
SizedBox
child不为null时，如果设置了宽高，则会强制把child尺寸调到此宽高；如果没有设置宽高，则会根据child尺寸进行调整；
child为null时，如果设置了宽高，则自身尺寸调整到此宽高值，如果没设置，则尺寸为0；
child: SizedBox(
width: 200.0,
height: 200.0,
child: Container(
color: Colors.red,
width: 100.0,
height: 300.0,
),
),
Transform
矩阵变化
Transform(
transform: Matrix4.rotationZ(0.3),
child: Container(
color: Colors.blue,
width: 100.0,
height: 100.0,
),
),
CustomSingleChildLayout
ustomSingleChildLayout提供了一个控制child布局的delegate，这个delegate可以控制这些因素：

可以控制child的布局constraints；
可以控制child的位置；
在parent的尺寸不依赖于child的情况下，可以决定parent的尺寸。
CustomSingleChildLayout(
delegate: FixedSizeLayoutDelegate(Size(200.0, 200.0)),
child: Container(
color: Colors.red,
width: 100.0,
height: 300.0,
),
),
class FixedSizeLayoutDelegate extends SingleChildLayoutDelegate {
FixedSizeLayoutDelegate(this.size);

 final Size size;

 @override
 Size getSize(BoxConstraints constraints) => size;

 @override
 BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
   return new BoxConstraints.tight(size);
 }

 @override
 bool shouldRelayout(FixedSizeLayoutDelegate oldDelegate) {
   return size != oldDelegate.size;
 }

}

装饰

DecoratedBox(装饰类容器)
BoxDecoration

Container

添加 padding, margins, borders, background color,
Container container = new Container(
padding: const EdgeInsets.all(1.0),
margin: const EdgeInsets.only(top: 2.0),
color: Colors.red,
width: 200,
height: 200,
transform: Matrix4.rotationX(0.2),
child: null,
// transformAlignment: ,
// decoration: Decoration.lerp(1, 1, 1), // decoration可以设置边框、背景色、背景图片、圆角等属性，非常实用
// clipBehavior: Clip.none,
);

Scaffold

一个布局的容器。可以在这个容器中绘制我们的用户界面,提供展示抽屉（drawers，比如：左边栏）、通知（snack bars）以及底部按钮（bottom sheets）
const Scaffold({
Key? key,
this.appBar, // new AppBar(), 显示在界面顶部的一个 AppBar
this.body, // new Container(), 当前界面所显示的主要内容
this.floatingActionButton, // new FloatingActionButton(onPressed: null), 在 Material 中定义的一个功能按钮。
this.floatingActionButtonLocation, // 悬浮按钮位置
this.floatingActionButtonAnimator,//悬浮按钮在[floatingActionButtonLocation]出现/消失动画
this.persistentFooterButtons,//在底部呈现一组button，显示于[bottomNavigationBar]之上，[body]之下
this.drawer,// 侧边栏控件
this.onDrawerChanged,
this.endDrawer,
this.onEndDrawerChanged,
this.bottomNavigationBar, // 显示在底部的导航栏按钮栏
this.bottomSheet,//底部持久化提示框
this.backgroundColor, //内容背景颜色
this.resizeToAvoidBottomInset, // 重新计算布局空间大小控制界面内容 body
是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。
this.primary = true,//是否显示到底部，默认为true将显示到顶部状态栏
this.drawerDragStartBehavior = DragStartBehavior.start,
this.extendBody = false,
this.extendBodyBehindAppBar = false,
this.drawerScrimColor,
this.drawerEdgeDragWidth,
this.drawerEnableOpenDragGesture = true,
this.endDrawerEnableOpenDragGesture = true,
this.restorationId,
})

或将其他装饰添加到widget.包含单个子widget，但该子widget可以是Row，Column，甚至是widget树的根
GridView
将 widgets 排列为可滚动的网格.GridView.count 允许您指定列数GridView.extent 允许您指定项的最大像素宽度
ListView
将widget排列为可滚动列表，比Column配置少，但更易于使用并支持滚动

Card 接受单个子项，但该子项可以是Row，Column或其他包含子级列表的widget 显示圆角和阴影，Card内容不能滚动

基础控件

文字

new Text(‘Hello World’, style: new TextStyle(fontSize: 32.0))

图片

new Image.asset(‘images/myPic.jpg’, fit: BoxFit.cover)

按钮

FloatingActionButton
FlatButton
RaisedButton

导航事件拦截(WillPopScope)数据共享(InheritedWidget)主题(Theme)

对齐方式

MainAxisAlignment：主轴方向上的对齐方式，会对child的位置起作用，默认是start
center：将children放置在主轴的中心；
end：将children放置在主轴的末尾；
spaceAround：将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首尾child的空白区域为1/2；
spaceBetween：将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾child都靠近首尾，没有间隙；
spaceEvenly：将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child；
start：将children放置在主轴的起点；

MainAxisSize：在主轴方向占有空间的值，默认是max。

CrossAxisAlignment：children在交叉轴方向的对齐方式，与MainAxisAlignment略有不同。
baseline：在交叉轴方向，使得children的baseline对齐；
center：children在交叉轴上居中展示；
end：children在交叉轴上末尾展示；
start：children在交叉轴上起点处展示；
stretch：让children填满交叉轴方向；

点击事件

GestureDetector

Men的博客

Flutter常用组件介绍

布局

容器

装饰

Container

Scaffold

基础控件

文字

图片

按钮

功能型widget

对齐方式

点击事件