Flutter Dialog问题：如何让Scaffold自适应包裹内容？

问题原因 #

Scaffold组件默认会尽可能填充父容器的可用空间，而Dialog的默认最大尺寸是屏幕的90%左右，直接把Scaffold作为Dialog子组件时，会撑满Dialog的最大可用空间，导致尺寸过大。不用Scaffold时，子组件本身自适应内容，Dialog也会跟着自适应。

解决方案 #

方法一：用IntrinsicWidth + IntrinsicHeight包裹Scaffold

通过IntrinsicWidth和IntrinsicHeight组件，强制Scaffold根据自身内容计算固有尺寸，让Dialog自适应包裹内容：

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (BuildContext context) => Dialog(
    child: IntrinsicWidth(
      child: IntrinsicHeight(
        child: Scaffold(
          appBar: AppBar(title: Text('My Title')),
          body: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text('Hello World'),
          ),
        ),
      ),
    ),
  ),
);

方法二：用Wrap组件包裹Scaffold

Wrap组件会根据子组件实际尺寸调整自身大小，将Scaffold放入Wrap中也能实现自适应效果：

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (BuildContext context) => Dialog(
    child: Wrap(
      direction: Axis.vertical,
      children: [
        Scaffold(
          appBar: AppBar(title: Text('My Title')),
          body: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text('Hello World'),
          ),
        ),
      ],
    ),
  ),
);

注意事项 #

• 建议给Scaffold的body内容添加Padding，避免文字直接贴边，提升界面美观度；
• 如果Scaffold的内容动态变化，Intrinsic系列组件会自动重新计算尺寸，适配内容变化。

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