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')),
 ],
),
相关推荐
月光下的丝瓜1 天前
Flutter 国内安装指南
前端·flutter
恋猫de小郭3 天前
Amper 正式转正 Kotlin Toolchain ,Gradle 未来何去何从
android·前端·flutter
张风捷特烈3 天前
Flutter 类库大揭秘#02 | path_provider 各平台实现
前端·flutter
TT_Close4 天前
别劝退了!5秒搞定 Flutter 鸿蒙 FVM 起跑线
flutter·harmonyos·visual studio code
你听得到115 天前
用户说 App 卡,但说不清在哪?我把 Flutter 监控 SDK 升级成了链路观测工作台
前端·flutter·性能优化
stringwu6 天前
Flutter 开发必备:MVI 架构的高效实现指南
前端·flutter
程序员老刘7 天前
Flutter版本选择指南:3.44系列继续观望 | 2026年6月
flutter·ai编程·客户端
用户965597361908 天前
Provider vs Bloc vs GetX vs Riverpod:Flutter 状态管理方案怎么选?
flutter
恋猫de小郭8 天前
Flutter Patchwork,不用 Fork 改依赖包源码的第三方工具
android·前端·flutter
程序员老刘9 天前
跑分第一的编程大模型,我为啥不用?
flutter·ai编程·vibecoding