Flutter使用AnimatedController扩展容器出现RenderFlex溢出警告如何解决

• 动画曲线特性溢出：你使用的Curves.easeInBack曲线的固有逻辑是动画执行过程中会先超出目标值再回弹到终点，你设置的展开宽度为_screenWidth - 35，动画过程中宽度会短暂大于该值，超出屏幕可用空间，内部Row的内容宽度超过容器当前宽度就会触发溢出警告，动画结束回到目标宽度后警告自然消失。
• Expanded用法错误：Expanded仅能作为Row、Column、Flex类Flex布局组件的直接子组件使用，你将其放在AnimatedContainer的child位置，完全无法发挥作用，还会干扰布局约束的正常计算。

1. 删除包裹内容的Expanded组件，直接将判断逻辑作为AnimatedContainer的child即可
2. 两种方案解决曲线溢出问题：
   • 方案一：更换无超出特性的动画曲线，比如Curves.easeIn、Curves.linear等，适合不需要回弹动效的场景
   • 方案二：保留Curves.easeInBack的前提下，给AnimatedContainer添加clipBehavior: Clip.hardEdge属性，超出容器范围的内容会被自动裁剪，不会触发溢出警告
3. 可选优化：给Row的两个子项套上Flexible，避免小屏设备上文字/icon布局溢出

import 'package:flutter/material.dart';

class AnimatedContainerButton extends StatefulWidget {
  const AnimatedContainerButton({Key? key}) : super(key: key);

  @override
  AnimatedContainerButtonState createState() => AnimatedContainerButtonState();
}

class AnimatedContainerButtonState extends State<AnimatedContainerButton> {
  bool _isExpanded = false;
  late double _screenWidth;

  void closeMenu() {
    setState(() {
      _isExpanded = false;
    });
  }

  void openMenu() {
    setState(() {
      _isExpanded = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    _screenWidth = MediaQuery.of(context).size.width;

    return AnimatedContainer(
      curve: Curves.easeInBack,
      duration: const Duration(milliseconds: 500),
      height: 50,
      width: _isExpanded ? _screenWidth - 35 : 50,
      // 新增裁剪属性，解决动画过程中内容溢出警告
      clipBehavior: Clip.hardEdge,
      decoration: const BoxDecoration(
        color: Colors.purple,
        borderRadius: BorderRadius.all(
          Radius.circular(50),
        ),
      ),
      // 去掉了无效的Expanded组件
      child: _isExpanded
          ? Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                // 可选：套Flexible防止小屏溢出
                Flexible(
                  child: InkWell(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: const <Widget>[
                        Icon(Icons.flutter_dash_rounded, color: Colors.white),
                        Text(
                          "Item1",
                          style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                Flexible(
                  child: InkWell(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: const <Widget>[
                        Icon(Icons.flutter_dash_rounded, color: Colors.white),
                        Text(
                          "Item2",
                          style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            )
          : IconButton(
              color: Colors.white,
              icon: const Icon(Icons.add),
              onPressed: () {
                openMenu();
              },
            ),
    );
  }
}

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