Flutter复刻苹果备忘录录音界面时组件尺寸异常问题

Flutter 布局默认约束规则：父容器未指定子组件对齐方式时，子组件会被强制拉伸撑满父容器全部可用空间。你当前代码中外层带灰色边框的Container没有设置alignment参数，因此无论给内部Container/ElevatedButton设置多小的宽高，都会被拉伸到和外层90*90容器等大，无法实现嵌套环形的按钮效果。

• 给外层带灰色圆形边框的Container添加alignment: Alignment.center属性，让内部子组件居中布局、保留自身设定的尺寸，不再被强制拉伸
• 移除ElevatedButton默认自带的最小尺寸限制、多余内边距，避免按钮被默认样式撑大
• 调整内部红色按钮的尺寸，和外层边框留出均匀的白色间隙，匹配苹果备忘录原生按钮视觉效果

Widget _recordButton() {
  return Container(
    height: 90,
    width: 90,
    // 核心配置：添加居中对齐，放开子组件的尺寸约束
    alignment: Alignment.center,
    decoration: BoxDecoration(
      border: Border.all(
        width: 4.0,
        color: Colors.grey,
      ),
      shape: BoxShape.circle,
    ),
    child: ElevatedButton(
      onPressed: () {
        // 录音点击逻辑写在这里
      },
      style: ButtonStyle(
        // 去掉按钮默认的最小尺寸、内边距限制
        minimumSize: MaterialStateProperty.all(Size.zero),
        padding: MaterialStateProperty.all(EdgeInsets.zero),
        shape: MaterialStateProperty.all(const CircleBorder()),
        backgroundColor: MaterialStateProperty.all(Colors.red),
        // 内部红色按钮尺寸：外层总宽90，左右边框各占4，再留4px白边，算下来74刚好
        fixedSize: MaterialStateProperty.all(const Size(74, 74)),
      ),
    ),
  );
}

状态切换提示：如果要实现录音中的方形停止按钮效果，只需要把ElevatedButton的shape参数从CircleBorder换成带8px左右圆角的RoundedRectangleBorder，同时把按钮尺寸调整为30*30，搭配隐式动画组件就能实现和原生一致的平滑切换效果。

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