如何在Flutter中实现图标上移、下方文本渐显的切换动画

实现思路 #

通过单个布尔状态变量控制组件的位置和透明度属性，使用Flutter内置隐式动画组件实现平滑过渡，无需手动管理动画控制器，代码简洁易维护。

完整可运行代码 #

import 'package:flutter/material.dart';

class IconTextAnimationDemo extends StatefulWidget {
  const IconTextAnimationDemo({super.key});

  @override
  State<IconTextAnimationDemo> createState() => _IconTextAnimationDemoState();
}

class _IconTextAnimationDemoState extends State<IconTextAnimationDemo> {
  // 控制展开/收起状态，默认false对应默认收起状态
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // 外层固定高度容器，限制动画的活动范围，可根据业务调整尺寸
        child: SizedBox(
          height: 120,
          width: 100,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // 可点击图标组件
              GestureDetector(
                onTap: () {
                  setState(() {
                    _isExpanded = !_isExpanded;
                  });
                },
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.easeInOut,
                  // 展开时向上平移20px，收起时回到原位
                  transform: Matrix4.translationValues(0, _isExpanded ? -20 : 0, 0),
                  child: const Icon(
                    Icons.star,
                    size: 48,
                    color: Colors.amber,
                  ),
                ),
              ),
              // 联动显示的文本组件
              AnimatedOpacity(
                duration: const Duration(milliseconds: 300),
                curve: Curves.easeInOut,
                // 展开时不透明度为1，收起时完全隐藏
                opacity: _isExpanded ? 1.0 : 0.0,
                child: const Padding(
                  padding: EdgeInsets.only(top: 8),
                  child: Text(
                    "收藏成功",
                    style: TextStyle(fontSize: 14, color: Colors.grey),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
      // 还原操作按钮示例，可替换为任意触发还原逻辑的业务入口
      floatingActionButton: _isExpanded ? FloatingActionButton(
        onPressed: () {
          setState(() {
            _isExpanded = false;
          });
        },
        child: const Icon(Icons.refresh),
      ) : null,
    );
  }
}

自定义调整说明 #

• 修改duration参数可调整动画时长，默认300ms符合Material Design动效规范
• 调整Matrix4.translationValues的第二个参数可修改图标上移的距离
• 直接替换Icon、Text的内容即可适配实际业务场景
• 任意位置需要触发还原操作时，只要将_isExpanded赋值为false即可自动触发收起动画

内容的提问来源于stack exchange，提问作者Ahmed