概述

在 Android 中，我们通过改变控件的 alpha 属性来修改控件的透明度，在一切皆 Widget 的 Flutter 中，修改透明度的事儿自然也是一个 Widget 了 —— Opacity，看一下官方介绍：

Opacity

构造方法

  const Opacity({
    Key key,
    @required this.opacity,
    this.alwaysIncludeSemantics = false,
    Widget child,
  })

• opacity，透明度，0.0 到 1.0，0.0 表示完全透明，1.0 表示完全不透明

• alwaysIncludeSemantics，和语义相关，如果为 true，则无论不透明度设置如何，子语义信息都将公开，就好像小部件是完全可见的一样。默认为 false。

• child，要设置透明度的控件。

示例

使用起来也很简单：

      body: Column(
        children: <Widget>[
          Opacity(
            opacity: 0.0,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text("透明度 0"),
            ),
          ),
          Opacity(
            opacity: 0.5,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text("透明度 0.5"),
            ),
          ),
          Opacity(
            opacity: 0.8,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text("透明度 0.8"),
            ),
          ),
          Opacity(
            opacity: 1.0,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text("透明度 1.0"),
            ),
          ),
        ],
      ),

效果如下：

AnimatedOpacity

了解了 Opacity，我们就可以通过 AnimationController 来动态的修改 opacity 值来达到动画效果，但是略嫌麻烦，Flutter 提供了 AnimatedOpacity 来帮助我们轻易的实现透明度方面的动画。

构造方法

  const AnimatedOpacity({
    Key key,
    this.child,
    @required this.opacity,
    Curve curve = Curves.linear,
    @required Duration duration,
    Duration reverseDuration,
  })

• child，要设置透明动画的组件
• opacity，透明度
• curve，动画曲线
• duration，耗时
• reverseDuration，反向动画的耗时

示例

      body: GestureDetector(
          onTap: () {
            opacity = 1.0;
            setState(() {

            });
          },
          child: AnimatedOpacity(
            duration: Duration(seconds: 3),
            opacity: opacity,
            child: Center(
              child: Container(
                width: 400,
                height: 400,
                alignment: Alignment.center,
                color: Colors.red,
              ),
            ),
          )),

效果如下所示：