Flutter中如何在showDialog弹窗内使用flutter_markdown组件？

问题原因 #

AlertDialog的content默认会对子组件执行固有尺寸测量，以此确定弹窗默认宽高。而你开启了shrinkWrap: true的Markdown组件内部使用RenderShrinkWrappingViewport渲染，该渲染对象不支持返回固有尺寸，因此触发报错。

解决方案 #

• 方案1：给AlertDialog开启scrollable属性，自动适配尺寸且无需写死宽高
  修改你的弹窗代码如下：

builder: (BuildContext ctx) => AlertDialog(
  scrollable: true, // 新增这一行
  title: Text(title),
  content: Markdown(
    data: content,
    shrinkWrap: true,
  ),
  actions: [
    TextButton(
      onPressed: () => Navigator.of(context).pop(),
      child: Text('OK'),
    )
  ],
)

这个方案适合内容长度不确定的场景，内容超出屏幕高度时会自动滚动，内容较短时弹窗高度会自适应内容。

• 方案2：给Markdown外层套固定尺寸的容器
  如果你需要固定弹窗内容区域的尺寸，可以用SizedBox包裹Markdown组件：

builder: (BuildContext ctx) => AlertDialog(
  title: Text(title),
  content: SizedBox(
    width: 300, // 自定义宽度
    height: 400, // 自定义高度
    child: Markdown(
      data: content,
      shrinkWrap: true,
    ),
  ),
  actions: [
    TextButton(
      onPressed: () => Navigator.of(context).pop(),
      child: Text('OK'),
    )
  ],
)

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