The Flutter Opacity gradient animation is implemented

Inscription – sword tianya, start from your drip accumulation, and will keep improving, that is, toss every day.

The way to achieve transparency gradient effect in Flutter is as follows

• AnimatedOpacity click here to view it
• Through FadeTransition click here to see
• The implementation of the Opacity component is this article
• Opacity gradient effect with color change

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

The Opacity component of the Flutter is used to set the transparency of the sub-widgets, and the property of Opacity is used to configure transparency. The value ranges from 0.0 to 1.0. 0.0 is fully transparent, while 1.0 is opaque.

  Opacity buildOpacity(a) {
    return Opacity(
      /// Current transparency
      opacity: 0.8./ / / child widgets
      child: Container(
        height: 220.0,
        width: 220.0,
        color: Colors.blue,
      ),
    );
  }
Copy the code

The idea of realizing the transparency transition through the Opacity component here comes from the changing animation effect achieved by dynamically modifying the Opacity value, so an AnimationController is combined here to control the use of the changing curve. The code is as follows:

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

class _AnimatedOpacityPageState extends State<AnimatedOpacityPage2> with TickerProviderStateMixin {
  /// The current page displays the transparency of the component
  double opacityLevel = 0.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Transparency animation"),),/// linear layout aligns transparent components and sliders up and down
      body: Column(
        /// top alignment of child components
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          /// Build transparent components
          Opacity(
		      /// Current transparency
		      opacity: opacityLevel,
		      / / / child widgets
		      child: Container(
		        height: 220.0,
		        width: 220.0, color: Colors.blue, ), ), ], ), ); }}Copy the code

An AnimationController is declared to dynamically control the transparency of the AnimationController, which is created in the initState initialization function as follows:

  // Animation controller
  AnimationController controller;

  @override
  void initState(a) {
    super.initState();
    /// The value of controller transitions from 0 to 1 in 2 seconds
    controller = AnimationController(
        ///duration Indicates the time of forward animation execution
        duration: Duration(seconds: 2),
        /// reverse the time of the animation
        reverseDuration: Duration(milliseconds: 3000),
        /// The minimum change in controller
        lowerBound: 0.0./// Controller maximum change
        upperBound: 1.0./// bind the page Ticker
        vsync: this);
        
    /// Add animation real-time update listener
	controller.addListener(() {
	      /// Get the AnimationController execution valueopacityLevel = controller.value; setState(() {}); }); }... . Omit}Copy the code

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

 RaisedButton(
     child: Text('Forward open animation'),
     onPressed: () {
        /// reset the animation
     controller.reset();
       /// forward executioncontroller.forward(); },),Copy the code

Open the animation forward by using forward, from 0.0 to 1.0, is the transition from opaque to transparent, and then from 1.0 to 0.0 is the transition from opaque to transparent. The code is as follows:

 RaisedButton(
    child: Text('Reverse start animation'),
      onPressed: () {
      /// reverse executioncontroller.reverse(); },)Copy the code

The completion of