在移動端開發(fā)中，經(jīng)常會有一些動畫交互，比如淡入淡出,效果如圖：

淡入淡出.gif

因為官方封裝好了AnimatedOpacity Widget，開箱即用，所以我們用起來很方便，代碼量很少，做少量配置即可，所以，全部代碼如下：

import 'package:flutter/material.dart';

class TabPage3 extends StatefulWidget {
  @override
  createState() => new LogoFadeState();
}
class LogoFadeState extends State<TabPage3> {
  // 初始o(jì)pacityLevel為1.0為可見狀態(tài)，為0.0時不可見
  double opacityLevel = 1.0;
  _changeOpacity() {
    //調(diào)用setState（）  根據(jù)opacityLevel當(dāng)前的值重繪ui
    // 當(dāng)用戶點擊按鈕時opacityLevel的值會（1.0=>0.0=>1.0=>0.0 ...）切換
    // 所以AnimatedOpacity 會根據(jù)opacity傳入的值(opacityLevel)進行重繪 Widget
    setState(
        () => opacityLevel = opacityLevel == 0 ? 1.0 : 0.0
      );
  }
  @override
  Widget build(BuildContext context) {
    return new Column(//一個Column布局，主軸為垂直方向，起點在上沿。
      mainAxisAlignment: MainAxisAlignment.spaceAround,//子組件在主軸上均勻分布在容器內(nèi)，兩邊留有一半的間隔空間。
      children: [
        new AnimatedOpacity(// 使用一個AnimatedOpacity Widget
          opacity: opacityLevel,
          duration: new Duration(seconds: 1),//過渡時間：1
          child:new Container(
            padding:const EdgeInsets.only(right:20.0,bottom:15.0,left:20.0),//內(nèi)邊距
            child:new Text("和React Native一樣，F(xiàn)lutter也提供響應(yīng)式的視圖，F(xiàn)lutter采用不同的方法避免由JavaScript橋接器引起的性能問題，即用名為Dart的程序語言來編譯。Dart是用預(yù)編譯的方式編譯多個平臺的原生代碼，這允許Flutter直接與平臺通信，而不需要通過執(zhí)行上下文切換的JavaScript橋接器。編譯為原生代碼也可以加快應(yīng)用程序的啟動時間。實際上，F(xiàn)lutter是唯一提供響應(yīng)式視圖而不需要JavaScript橋接器的移動SDK，這就足以讓Fluttter變得有趣而值得一試，但Flutter還有一些革命性的東西，即它是如何實現(xiàn)UI組件的？") ,)
        ),
        new RaisedButton(
          child:new Container(
              child: new Text("點我試試"),
            ) ,
          onPressed: _changeOpacity,//添加點擊事件
        ),
      ],
    );
  }
}

flutter官方給我們封裝了很多很多常用的開箱即用的控件，為開發(fā)帶來了極大的便利。