我爱模板网 > 建站教程 > APP开发,混合APP >  Flutter笔记73:AnimatedOpacity淡入淡出动画容器正文

Flutter笔记73:AnimatedOpacity淡入淡出动画容器

AnimatedOpacity和AnimatedContainer以及AnimatedSwitcher组件差不多,都是动画容器。使用这种动画容器非常方便,无需定义AnimationController、Tween等。


import 'package:flutter/material.dart';

class OpacityAnimation extends StatefulWidget{
  OpacityAnimation({Key key}) : super(key:key);

  _OpacityAnimationState createState() => _OpacityAnimationState();
}

class _OpacityAnimationState extends State<OpacityAnimation>{
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedOpacity淡入淡出动画'),
      ),
      body: Center(
        child: AnimatedOpacity(
          duration: Duration(milliseconds: 1000),
          opacity: _visible ? 1.0 : 0.0,
          child: Container(
            color: Colors.deepOrange,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: '显示隐藏',
        child: Icon(Icons.add),
      ),
    );
  }
}




部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:Flutter笔记72:AnimatedContainer制作图表动画效果 下一篇:Flutter笔记74:Hero页面切换动画
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢