1、SafeArea

智能设备更新快，应用只适配规整的矩形界面已不可行，如下图：

消息提示栏总是不断闪出，全屏手机屏幕的圆角或者凹口屏“侵蚀”着内容，也会让应用的布局变得更复杂,这就是Flutter为什么内置了SafeArea这个widget，它使用MediaQuery来检测屏幕的尺寸，使应用的大小能与平面匹配。如果没有用SafeArea，有可能你的界面会是这样的：

界面适配有问题

用了SafeArea是这样的：

SafeArea(child:ListView(

children:List.generate(100, (i)=>Text('This text is unobscured！'))

))

适配ok的界面

SafeArea中你甚至可以指定特定的现实区域

指定底部

与Scaffold来配合使用就能起到很好的效果

Scaffold中应用SafeArea

2、Expanded

几乎每个Flutter布局都使用行和列，它们即可以让自己的子项紧凑的排列在一起，也可以让它们松散的平铺。

紧凑排列

松散排列

那么如何让其中一个子项拉伸并填充余下的空间呢？只需要将该子项包裹在Expanded中即可。、

Expanded代码

子项拉伸后的界面

当行或者列布置其子项时，它首先执行不灵活的子项，然后它将剩余空间划分给灵活的子项，如Expanded。你甚至可以设置一个flex参数以防竞争。

Expanded(flex:2, child:Container())

防止竞争

3、Wrap

行和列很适合用来布局widgets，但有时你可能没有足够的空间。如下图：

空间不够

Wrap是一个解决此问题的widget，Wrap为单个的图标逐一进行布局，很类似行或者列，但当空间不足的时候，便会新增一行，你可以使用direction属性，来让Wrap以垂直或者水平的方式运行，如下图代码

水平方向

更多样式

Wrap适合按钮布局或者小图标布局。

4、AnimatedContainer

Flutter有很多用于显式控制动画的widgets，这些动画需要有开发者实现，但是也有些widget可以用于控制隐式的动画效果，其中不错的一个widget便是AnimatedContainer，首先你可以用某个特定的属性，例如颜色来渲染它，然后当你使用一个不同的色值重新渲染它时，如通过调用setState，AnimatedContainer会在两个值之间做一个线性插值运算。

颜色渲染

不同的色值线性运算

可以指定动画曲线来实现个性化效果

动画曲线

5、Opacity

在flutter中，很容易就能完全移除一个widget，你只要在重新渲染时移除它即可，但你如果想要让一个widget消失而它原来占据的空间仍然被保留呢，这样其他的图标就能留在它们原来的位置上，就像iOS中的hidden和Android中的invisible做的那样，试试Opacity这个widget，只要使用Opacity来封装你的widget，然后将数值设置为0就ok了。

Opacity封装

也可以用Opacity将栈视图的不同子视图混合到一起

不同子视图混合

混合后效果

如果你想为Opacity更改增加动画，可以使用AnimatedOpacity的widget,只要你给Opacity添加一个时长，然后当你重新渲染的时，它就会自动为你更改创建动画效果。

使用AnimatedOpacity

Opacity添加时长

6、FutureBuilder

Flutter和Dart天生就是异步的，使用Dart的Furtures你可以管理IO,而无需担心线程或死锁，但是当涉及到future对象时，你应该如何构建widget，可以使用来自未来的FutureBuilder，它要处理的刚好也是“未来（Future）”，FutureBuilder让你轻松确定futrue对象当前的状态，并选择在数据加载时显示的内容以及在可用时显示的内容，首先给FutureBuilder传递一个future对象和一个builder，但请确保使connectionState检查这个future对象的状态，如下图所示：

检查future对象

最后，最好在future对象运行时，确保没有错误发生

异常处理

其他更多连接状态

7、FadeTransition

Flutter有很多的转场可加入你的Flutter应用，FadeTransition允许你淡入淡出一个widget，它需要一个子项和一个动画，但是动画从何而来呢，首先我们创建一个AnimationController以设置持续时间，然后我们创建一个animation并给定始末的opacity值，如下图：

给定opacity值

并通过controlller创建动画，最后通过调用controller的forward()方法来启动画面，将FadeTransition封装在StatefulWidget中是个好主意，这样你就可以管理其他状态并在完成后进行清理

8、FloatingActionButton(FAB)

在Flutter中添加FloatingActionButton非常容易，只需要将FAB添加到scaffold中即可，但是如果你有一个BottomNavigationBar，并且想要将FAB嵌入其中，Flutter里可以这样做:首先，将BottomNavigationBar添加到Scaffold widget里，然后使用FloatingActionButtonLocation嵌入FAB中

代码示例

图例

Flutter Widgets 介绍合集(上)