Flutter transparency gradient animation Opacity realizes transparency gradient animation effect

Inscription
-Holding the sword in the world, starting from your accumulation of bits and pieces, you must strive for perfection wherever you go, that is, toss every day.

**	You may need
CSDN	NetEase Cloud Classroom Tutorial
Nuggets	EDU Academy Tutorial
Know almost	Flutter series articles

The way to achieve the transparency gradient effect in Flutter can be as follows

• AnimatedOpacity achieved by viewing Click Here
• Through FadeTransition click to view here
• Opacity transparent component realized that the article
• Transparency gradient effect achieved by color change

This article will implement the transparency gradient animation effect through the Opacity component, the effect is as follows

In Flutter, the Opacity component is used to set the transparency of the child widget. The Opacity property opacity is used to configure the transparency. The value range is 0.0~1.0, 0.0 is completely transparent, and 1.0 is opaque. The basic code used is as follows:

  Opacity buildOpacity() {
    
    
    return Opacity(
      ///当前的透明度
      opacity: 0.8,
      ///子Widget
      child: Container(
        height: 220.0,
        width: 220.0,
        color: Colors.blue,
      ),
    );
  }

The idea of ​​implementing transparency transition through the Opacity component here is derived from the change
animation effect achieved by dynamically modifying the opacity value , so here is combined with an AnimationController to control the use of the change curve, the code is as follows:

class AnimatedOpacityPage2 extends StatefulWidget {
    
    
  @override
  _AnimatedOpacityPageState createState() => _AnimatedOpacityPageState();
}

class _AnimatedOpacityPageState extends State<AnimatedOpacityPage2> with TickerProviderStateMixin {
    
    
  ///当前页面显示组件的透明度
  double opacityLevel = 0.0;
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text("透明度动画"),
      ),
      ///线性布局将透明组件与滑块上下排列
      body: Column(
        ///子组件顶部对齐
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          ///构建透明组件
          Opacity(
		      ///当前的透明度
		      opacity: opacityLevel,
		      ///子Widget
		      child: Container(
		        height: 220.0,
		        width: 220.0,
		        color: Colors.blue,
		      ),
		   ),
        ],
      ),
    );
  }
  }

An AnimationController is declared here to dynamically control the dynamic change law of transparency, which is generally created in the initState initialization function, the code is as follows):

  //动画控制器
  AnimationController controller;

  @override
  void initState() {
    
    
    super.initState();
    ///在这里 controller 的值在2秒内从0过渡到1
    controller = AnimationController(
        ///duration 为正向执行动画的时间
        duration: Duration(seconds: 2),
        ///反向执行动画的时间
        reverseDuration: Duration(milliseconds: 3000),
        ///controller的变化的最小值
        lowerBound: 0.0,
        ///controller变化的最大值
        upperBound: 1.0,
        ///绑定页面的Ticker
        vsync: this);
        
    ///添加动画实时更新监听
	controller.addListener(() {
    
    
	      ///获取AnimationController执行的值
	      opacityLevel = controller.value;
	      setState(() {
    
    });
	 });
}

 ... ... 省略
}

Then the animation starts when the button is clicked as follows:

 RaisedButton(
     child: Text('正向开启动画'),
     onPressed: () {
    
    
        ///重置动画
     controller.reset();
       ///向前执行
     controller.forward();
    },
),

Turning on the animation in the forward direction is a process from 0.0 to 1.0. It is a transition from opaque to transparent, and then from 1.0 to 0.0 is a transition from opaque to transparent. You can execute it in the reverse direction. The code is as follows:

 RaisedButton(
    child: Text('反向开启动画'),
      onPressed: () {
    
    
      ///反向前执行
      controller.reverse();
     },
   )

---

complete