Flutter Dialog未适配子组件宽度问题求助

我完全懂你碰到的糟心事——之前好好的自定义Dialog，升级Flutter后突然就不会适配CircularProgressIndicator的宽度了，哪怕降级版本也没好转。别着急，咱们直接来看修复方案：

快速修复代码 #

你只需要调整Dialog的内边距属性，同时让容器自适应内容即可。修改后的DialogWidget代码如下：

class DialogWidget extends StatefulWidget {
  @override
  _DialogWidgetState createState() => _DialogWidgetState();
}

class _DialogWidgetState extends State<DialogWidget> {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      // 移除Dialog默认的左右内边距限制
      insetPadding: EdgeInsets.symmetric(horizontal: 20),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
      child: AnimatedContainer(
        height: 60.0,
        // 把固定宽度改成自适应，让容器跟随子组件大小调整
        width: double.infinity,
        duration: Duration(milliseconds: 100),
        curve: Curves.ease,
        padding: EdgeInsets.all(10.0),
        child: Center( // 确保进度指示器在容器内居中
          child: CircularProgressIndicator(
              backgroundColor: Colors.transparent,
              valueColor: AlwaysStoppedAnimation<Color>(Colors.black)),
        ),
      ),
    );
  }
}

问题根源分析 #

Flutter部分版本更新后，Dialog的默认布局约束发生了变化：

• 旧版本的Dialog会自动适配子组件的宽度，但新版本中Dialog默认被限制为屏幕宽度的固定比例，还带有默认的insetPadding（左右各40），导致你设置的60固定宽度容器被挤压，无法正常匹配子组件。
• 另外，固定宽度的容器在Dialog的新约束下，无法正确跟随子组件的尺寸，改成double.infinity并配合Center可以让进度指示器居中，同时让Dialog自适应内容。

进阶优化方案 #

如果你希望Dialog严格贴合CircularProgressIndicator的大小，还可以简化代码：

class DialogWidget extends StatefulWidget {
  @override
  _DialogWidgetState createState() => _DialogWidgetState();
}

class _DialogWidgetState extends State<DialogWidget> {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      insetPadding: EdgeInsets.zero, // 完全移除内边距
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: CircularProgressIndicator(
            backgroundColor: Colors.transparent,
            valueColor: AlwaysStoppedAnimation<Color>(Colors.black)),
      ),
    );
  }
}

这样Dialog的大小就完全由进度指示器和内边距决定，不会有多余的空白区域。

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