Flutter:TweenAnimationBuilder自定义隐式动画

1、修改组件的大小触发:自定义动画

js 复制代码
class _MyHomePageState extends State<MyHomePage>{
  bool flag = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('标题'),
      ),
      body: Column(
        children: [
          Container(
            child: TweenAnimationBuilder(
                // 当改变Tween的end参数时,Icon就会触发动画,size接收double类型begin和end要加.0
                tween: Tween(begin: 60.0,end: flag ? 100.0 : 200.0),
                duration: const Duration(milliseconds: 500),
                builder: ((context,value,child){
                  // 当更改flag时,会把end的值,赋值给value,Icon就会执行这个动画
                  // size接收double类型,但是value是Object类型,需要用 as double 转换一下
                  return Icon(Icons.star,size: value as double);
                })
            ),
          ),
          ElevatedButton(onPressed: (){
            setState(() {
              flag = !flag;
            });
          }, child: const Text('修改Icon大小')),
        ],
      ),
    );
  }
}

2、组件透明度变化触发:自定义动画

js 复制代码
body: Column(
 children: [
   Container(
     child: TweenAnimationBuilder(
       // 当改变Tween的end参数时,就会触发动画
       tween: Tween(begin: 1.0,end: flag ? 1.0 : 0.0),
       duration: const Duration(milliseconds: 500),
       builder: ((context,value,child){
         return Opacity(
           opacity: value as double,
           child: Container(
             width: 200,
             height: 200,
             color: Colors.red,
           ),
         );
       }),
     ),
   ),
   ElevatedButton(onPressed: (){
     setState(() {
       flag = !flag;
     });
   }, child: const Text('修改Opacity')),
 ],
),
相关推荐
qziovv8 小时前
前端转flutter——项目架构、初始化
前端·flutter
恋猫de小郭12 小时前
Flutter 3.47 首坑,analysis_options 问题连环回归
android·前端·flutter
xiangxiongfly91512 小时前
Flutter flutter_gen_runner总结
flutter·flutter_gen
GitLqr1 天前
Flutter 3.47 与 Dart 3.13:你必须了解的迁移指南
flutter·ios·dart
程序员老刘1 天前
跨平台开发地图 | 2026年8月
flutter·ai编程·客户端
杉氧1 天前
Flutter 跨平台多端适配与 Android/iOS 一键自动化打包发布
android·前端·flutter
恋猫de小郭1 天前
Dart 3.13 大更新,感觉比 Flutter 更带劲
android·前端·flutter
静水流深zz2 天前
Flutter AI Harness 如何让 Agent 参与软件开发全流程
android·前端·人工智能·flutter·大前端
SoaringHeart3 天前
Flutter最佳实践:Web项目中文字体首次加载乱码问题解决
前端·flutter
程序员老刘3 天前
Flutter 3.47 更新要点:Material 正式分家,老项目先别急着更新
flutter·ai编程·客户端