Flutter中WebView嵌套在Scaffold内无法加载页面该如何解决？

问题根因 #

该问题由Flutter布局约束规则导致：

• Column组件在垂直方向会给子元素提供无上限的高度约束
• WebView默认会尝试占满父组件提供的可用高度，在无界高度约束下无法计算自身所需尺寸，因此无法完成渲染和页面加载
• 当WebView直接作为Scaffold的body参数时，Scaffold会给body传入明确的屏幕宽高约束，所以WebView可以正常加载

解决方案 #

用Expanded组件包裹WebView，Expanded会自动占用Column内除了固定高度组件外的全部剩余空间，给WebView提供明确的高度约束。
修改后的代码如下：

return MaterialApp(
  home: Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextButton(
          onPressed: () {
            // 按钮逻辑
          },
          child: const Text('Print page'),
        ),
        // 用Expanded包裹WebView
        Expanded(
          child: WebView(
            initialUrl: 'https://flutter.dev',
          ),
        )
      ],
    ),
  ),
);

如果需要给WebView指定固定高度，也可以用SizedBox包裹WebView并设置具体的height参数，效果一致。

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