Flutter中BottomSheet内嵌InAppWebView初始空白，后台切换后显示

问题复现步骤 #

• 点击按钮打开BottomSheet
• BottomSheet中的InAppWebView加载指定URL，初始状态为空白
• 按下Home键将应用切换至后台
• 重新打开应用，BottomSheet保持打开状态，网页可正常显示

相关代码 #

State类内定义：

InAppWebViewController? webViewController;
InAppWebViewSettings settings = InAppWebViewSettings(
  isInspectable: kDebugMode,
  mediaPlaybackRequiresUserGesture: false,
  allowsInlineMediaPlayback: true,
  iframeAllow: "camera; microphone",
  iframeAllowFullscreen: true);

Build方法内的WebView实现：

body: InAppWebView(
    key: webViewKey,
    initialUrlRequest: URLRequest(
      url: WebUri(widget.url),
    ),
    initialSettings: settings,
    pullToRefreshController: pullToRefreshController,
    onWebViewCreated: (controller) {
      webViewController = controller;
    },
  ),

点击“Transaction Charges”链接触发WebView加载网页。

解决方案尝试 #

1. 延迟加载WebView
   BottomSheet弹出时，WebView可能未完成视图挂载就触发URL加载，导致渲染异常。可在BottomSheet完全显示后再加载URL：

// 弹出BottomSheet时监听完成状态
showModalBottomSheet(
  context: context,
  builder: (context) => YourBottomSheet(),
).then((_) {
  webViewController?.loadUrl(urlRequest: URLRequest(url: WebUri(widget.url)));
});

或在BottomSheet的initState中添加延迟：

@override
void initState() {
  super.initState();
  Future.delayed(const Duration(milliseconds: 300), () {
    webViewController?.loadUrl(urlRequest: URLRequest(url: WebUri(widget.url)));
  });
}

2. 利用视图帧回调触发加载
   通过WidgetsBinding的帧回调，确保WebView视图已挂载后再加载URL：

InAppWebView(
  // 保留原有配置
  onWebViewCreated: (controller) {
    webViewController = controller;
    WidgetsBinding.instance.addPostFrameCallback((_) {
      controller.loadUrl(urlRequest: URLRequest(url: WebUri(widget.url)));
    });
  },
)

3. 替换初始加载逻辑
   先加载空白页面，再动态加载目标URL，避免初始挂载时的加载冲突：

InAppWebView(
  key: webViewKey,
  initialUrlRequest: const URLRequest(url: WebUri("about:blank")),
  initialSettings: settings,
  onWebViewCreated: (controller) {
    webViewController = controller;
    WidgetsBinding.instance.addPostFrameCallback((_) {
      controller.loadUrl(urlRequest: URLRequest(url: WebUri(widget.url)));
    });
  },
)

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