题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。
在Flutter 中实现透明度渐变效果的方式可通过以下
通过 AnimatedOpacity 实现 点击查看这里通过 FadeTransition实现点击查看这里透明组件 Opacity 实现 就是本文了通过颜色改变实现透明度渐变效果
本文章将实现通过 Opacity 组件来 实现透明度渐变动画效果，实现效果如下
在Flutter 中 Opacity 组件用来设置子 Widget 的透明度，Opacity 的属性 opacity 是用来配置透明度的，取值范围为 0.0~1.0 ，0.0 为完全透明 ,1.0这不透明 ， 基本使用代码如下：
Opacity buildOpacity() {return Opacity(///当前的透明度opacity: 0.8,///子Widgetchild: Container(height: 220.0,width: 220.0,color: Colors.blue,),);}
在这里通过 Opacity 组件实现透明度过渡的思路是来源于动态修改 opacity 值而达到的变化
动画效果，所以这里结合了一个 AnimationController 来控制变化曲线使用，代码如下：
class AnimatedOpacityPage2 extends StatefulWidget {@override_AnimatedOpacityPageState createState() => _AnimatedOpacityPageState();}class _AnimatedOpacityPageState extends State<AnimatedOpacityPage2> with TickerProviderStateMixin {///当前页面显示组件的透明度double opacityLevel = 0.0;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("透明度动画"),),///线性布局将透明组件与滑块上下排列body: Column(///子组件顶部对齐mainAxisAlignment: MainAxisAlignment.start,children: [///构建透明组件Opacity(///当前的透明度opacity: opacityLevel,///子Widgetchild: Container(height: 220.0,width: 220.0,color: Colors.blue,),),],),);}}
在这里声明了一个 AnimationController 来动态的控制 透明度动态变化规律，一般在 initState 初始化函数中进行创建，代码如下）：
//动画控制器AnimationController controller;@overridevoid initState() {super.initState();///在这里 controller 的值在2秒内从0过渡到1controller = AnimationController(///duration 为正向执行动画的时间duration: Duration(seconds: 2),///反向执行动画的时间reverseDuration: Duration(milliseconds: 3000),///controller的变化的最小值lowerBound: 0.0,///controller变化的最大值upperBound: 1.0,///绑定页面的Tickervsync: this);///添加动画实时更新监听controller.addListener(() {///获取AnimationController执行的值opacityLevel = controller.value;setState(() {});});}... ... 省略}
然后在点击按钮时开始动画 如下：
RaisedButton(child: Text('正向开启动画'),onPressed: () {///重置动画controller.reset();///向前执行controller.forward();},),
通过 forward 正向开启动画 ，是从 0.0 ~ 1.0 的过程，是由不透明变为透明的过渡，然后再由1.0~0.0 是由不透明变为透明的过渡 ，反向执行一下就可以，代码如下：
RaisedButton(child: Text('反向开启动画'),onPressed: () {///反向前执行controller.reverse();},)
完毕
