第12章动画-AnimatedOpacity实现渐变效果

防采集标记：亢少军老师的课程和资料

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final appTitle = "淡入淡出动画示例";
    return new MaterialApp(
      title: appTitle,
      home: new MyHomePage(title:appTitle),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key,this.title}):super(key:key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();

}

class _MyHomePageState extends State {
  //控制动画显示状态变量
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        //添加Opacity动画
        child: new AnimatedOpacity(
          //控制opacity值 范围从0.0到1.0
          opacity: _visible ? 1.0 : 0.0,
          //设置动画时长
          duration: new Duration(
              milliseconds: 1000
          ),
          child: new Container(
            width: 300.0,
            height: 300.0,
            color: Colors.deepPurple,
          ),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: (){
          //控制动画显示状态
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: "显示隐藏",
        child: new Icon(Icons.flip),
      ),

    );
  }

}

• Flutter技术入门与实战: http://product.dangdang.com/26485813.html
• Flutter交流学习群：894109159
• Flutter开源项目请关注: https://github.com/kangshaojun
• Flutter视频教程：https://edu.csdn.net/lecturer/2436

@作者: 亢少军