Flutter|Flutter Widgets 介绍合集(上)
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值 【Flutter|Flutter Widgets 介绍合集(上)】并通过controlller创建动画，最后通过调用controller的forward()方法来启动画面，将FadeTransition封装在StatefulWidget中是个好主意，这样你就可以管理其他状态并在完成后进行清理
文章图片
1 
文章图片
2 
文章图片
3 8、FloatingActionButton(FAB)
在Flutter中添加FloatingActionButton非常容易，只需要将FAB添加到scaffold中即可，但是如果你有一个BottomNavigationBar，并且想要将FAB嵌入其中，Flutter里可以这样做:首先，将BottomNavigationBar添加到Scaffold widget里，然后使用FloatingActionButtonLocation嵌入FAB中
文章图片
代码示例 
文章图片
图例
推荐阅读
- Apache多路复用模块（MPMs）介绍
- 第十六天（请介绍一件让你非常自豪的事情，（不能是职业类的），什么原因感到自豪。）
- typeScript入门基础介绍
- Flutter的ListView
- “我不想努力了，能给我介绍个富婆吗（”）
- 今日自我介绍，感恩所遇一切
- 杨梦彤自我介绍
- 第六章|第六章 Sleuth--链路追踪
- 区块链开发平台（以太坊）
- 运用flutter|运用flutter 构建一个发布版（release）APK