Flutter中如何用AnimatedOpacity仅控制按钮边框显隐，保持按钮可见

我想要制作一个按下时显示边框的按钮，希望通过AnimatedOpacity控制边框的显示与隐藏，但当前代码会导致整个按钮被隐藏。请问如何让按钮本身始终保持可见，仅用AnimatedOpacity来控制边框的显隐？

原代码：

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class AppAnimatedButton extends HookWidget {
  const AppAnimatedButton({
    required double borderRadius,
    required Future<void> Function() onTap,
    bool? isSecondFlameBorder,
    super.key,
  })  : _borderRadius = borderRadius,
        _isSecondFlameBorder = isSecondFlameBorder ?? false,
        _onTap = onTap;

  final bool _isSecondFlameBorder;
  final double _borderRadius;
  final Future<void> Function() _onTap;

  @override
  Widget build(BuildContext context) {
    final isTapDowning = useState(false);
    const radius = 10.0;

    return GestureDetector(
      onTapCancel: () => isTapDowning.value = false,
      onTapDown: (_) => isTapDowning.value = true,
      onTapUp: (_) async {
        isTapDowning.value = false;
        _onTap();
      },
      child: AnimatedOpacity(
        opacity: isTapDowning.value ? 1 : 0,
        curve: Curves.easeIn,
        duration: const Duration(milliseconds: 400),
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: _isSecondFlameBorder && isTapDowning.value
                  ? Colors.blue
                  : Colors.transparent,
              width: 4,
            ),
            borderRadius: BorderRadius.circular(_borderRadius * 1.55),
          ),
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(radius),
              color: Colors.yellow,
            ),
          ),
        ),
      ),
    );
  }
}

参考效果（亚马逊APP类似动画）：

问题核心是AnimatedOpacity包裹了整个按钮容器，导致透明度变化时按钮主体也被隐藏。正确的做法是将按钮主体和边框分离，让AnimatedOpacity仅作用于边框元素，按钮主体始终保持可见。

可以通过Stack组件实现层级关系：按钮主体在底层，边框元素在顶层，用AnimatedOpacity控制顶层边框的透明度即可。

修改后的代码：

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class AppAnimatedButton extends HookWidget {
  const AppAnimatedButton({
    required double borderRadius,
    required Future<void> Function() onTap,
    bool? isSecondFlameBorder,
    super.key,
  })  : _borderRadius = borderRadius,
        _isSecondFlameBorder = isSecondFlameBorder ?? false,
        _onTap = onTap;

  final bool _isSecondFlameBorder;
  final double _borderRadius;
  final Future<void> Function() _onTap;

  @override
  Widget build(BuildContext context) {
    final isTapDowning = useState(false);
    const radius = 10.0;

    return GestureDetector(
      onTapCancel: () => isTapDowning.value = false,
      onTapDown: (_) => isTapDowning.value = true,
      onTapUp: (_) async {
        isTapDowning.value = false;
        _onTap();
      },
      // 用Stack实现层级：按钮主体在底层，边框在顶层
      child: Stack(
        alignment: Alignment.center,
        children: [
          // 按钮主体：始终可见
          Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(radius),
              color: Colors.yellow,
            ),
          ),
          // 边框：仅用AnimatedOpacity控制显隐
          AnimatedOpacity(
            opacity: isTapDowning.value && _isSecondFlameBorder ? 1 : 0,
            curve: Curves.easeIn,
            duration: const Duration(milliseconds: 400),
            child: Container(
              // 边框容器尺寸比按钮主体大，留出边框宽度的空间
              width: 100 + 8, // 边框宽度4*2
              height: 100 + 8,
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.blue,
                  width: 4,
                ),
                borderRadius: BorderRadius.circular(_borderRadius * 1.55),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键修改点：

• 使用Stack将按钮主体和边框分层，主体在底层，边框在顶层
• AnimatedOpacity仅包裹边框容器，不再影响按钮主体
• 调整边框容器的尺寸，确保边框不会被按钮主体遮挡（边框宽度4，所以宽高各加8）
• 简化边框颜色逻辑，直接使用蓝色，因为透明度已经控制显隐

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