Flutter实现3容器点击交互：选中项放大、其余项缩小动画

交互规则 #

• 点击任意选项时，被选中项带平滑动画放大显示
• 其余未选中项同步带平滑动画缩小
• 效果参考：示例效果截图

现有初始代码 #

目前基于GestureDetector实现的单选项基础框架如下：

GestureDetector(
    onTap: () => {},
    child: Column(children: <Widget>[
      Image(
        image: AssetImage('images/one.png'),
        height: 80,
      ),
      Text(
        "One",
        textAlign: TextAlign.center,
        style: TextStyle(
            color: kBlueColor,
            fontWeight: FontWeight.bold,
            fontSize: 30),
      ),
    ]),
  ),

实现逻辑 #

• 新增状态变量记录当前选中的选项索引，替换空的onTap回调为状态更新逻辑
• 每个选项外层包裹AnimatedScale组件，根据选中状态设置不同的缩放值：选中值设为1.2，未选中值设为0.8，配置300ms时长的缓出动画
• 状态变更时，AnimatedScale会自动完成平滑的尺寸过渡，避免生硬的跳变

完整实现代码 #

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

  @override
  State<SelectScaleWidget> createState() => _SelectScaleWidgetState();
}

class _SelectScaleWidgetState extends State<SelectScaleWidget> {
  int selectedIndex = 0;
  final List<Map<String, String>> options = [
    {"asset": "images/one.png", "text": "One"},
    {"asset": "images/two.png", "text": "Two"},
    {"asset": "images/three.png", "text": "Three"},
  ];

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: options.asMap().entries.map((entry) {
        final index = entry.key;
        final data = entry.value;
        final isSelected = selectedIndex == index;
        return GestureDetector(
          onTap: () => setState(() => selectedIndex = index),
          child: AnimatedScale(
            scale: isSelected ? 1.2 : 0.8,
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeOut,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Image(image: AssetImage(data["asset"]!), height: 80),
                Text(
                  data["text"]!,
                  textAlign: TextAlign.center,
                  style: const TextStyle(
                      color: kBlueColor,
                      fontWeight: FontWeight.bold,
                      fontSize: 30),
                )
              ],
            ),
          ),
        );
      }).toList(),
    );
  }
}

缩放比例和动画时长可以根据实际视觉效果调整，不需要额外引入第三方依赖。

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