Flutter实现带标题和右上角关闭按钮的自适应宽度Dialog

问题描述 #

需要实现一个宽度自适应内容的Dialog，标题栏右侧带关闭按钮，样式示意：

------------------------------
| Title                 [x]  |
|                            |
| This is dialog content.    |
|----------------------------|

现有代码中，用Expanded会让Dialog宽度拉到屏幕90%左右（接近最大化）；去掉Expanded则标题行仅适配标题文本宽度，和内容区域宽度不一致。

解决方案 #

通过IntrinsicWidth+CrossAxisAlignment.stretch组合，让Dialog宽度由内容决定，同时标题行自动匹配内容宽度，关闭按钮固定在右上角：

Dialog(
  child: IntrinsicWidth(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // 标题栏
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const Text('This is Title'),
            IconButton(
              icon: const Icon(Icons.close),
              onPressed: () {
                Navigator.of(context).pop(); // 关闭Dialog逻辑
              },
            ),
          ],
        ),
        // 内容区域
        const Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          child: Text('This is dialog content. If the content is longer, the dialog width will adapt accordingly.'),
        ),
      ],
    ),
  ),
)

原理说明 #

1. IntrinsicWidth：让Column的宽度等于子项中最宽的元素（即内容区域），实现Dialog宽度完全自适应内容。
2. CrossAxisAlignment.stretch：强制标题行的Row占满Column的宽度，保证标题栏和内容区域宽度一致。
3. MainAxisAlignment.spaceBetween：将标题文本推至左侧，关闭按钮推至右侧，精准实现右上角布局。

替代方案（无需IntrinsicWidth） #

如果内容区域本身有明确宽度约束（比如固定宽度的图片、带maxWidth的文本），可以直接依赖内容宽度撑满Column，省去IntrinsicWidth：

Dialog(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text('This is Title'),
          IconButton(icon: const Icon(Icons.close), onPressed: () => Navigator.pop(context)),
        ],
      ),
      Container(
        width: 250, // 内容固定宽度
        padding: const EdgeInsets.all(16.0),
        child: const Text('Fixed width content'),
      ),
    ],
  ),
)

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