如何在Flutter Webview中无问题实现下拉刷新，现有代码运行闪退如何修复

闪退核心原因 #

• _webviewController变量声明在build方法内部，每次页面触发setState重建时，该变量会被重置为null，下拉刷新时强用!调用reload方法会触发空指针异常，直接导致闪退。
• RefreshIndicator的子节点直接使用Expanded组件，Expanded仅能在Row/Column/Flex这类Flex布局的子节点中使用，错误的布局结构会引发渲染异常闪退。
• 用SingleChildScrollView嵌套WebView、动态计算页面高度的方案存在兼容性问题，会和WebView本身的滚动逻辑冲突，同时容易出现高度计算错误。

最佳实现方案 #

1. 将WebViewController声明为State类的成员属性，不要放在build方法中，避免重建时被重置。
2. 放弃嵌套ScrollView计算高度的方案，通过NotificationListener监听WebView的滚动事件，当WebView滚动到顶部时才响应下拉手势触发刷新，避免滚动冲突。
3. 所有调用WebViewController的位置先做非空判断，不要直接用!强解空，避免空异常。

修正后完整代码 #

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewPage extends StatefulWidget {
  const WebViewPage({super.key});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  WebViewController? _webviewController;
  // 标记WebView是否滚动到顶部
  bool _isWebViewAtTop = true;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          actions: [],
        ),
        body: RefreshIndicator(
          onRefresh: () async {
            // 先判空再执行刷新
            if (_webviewController != null) {
              await _webviewController!.reload();
            }
          },
          // 监听滚动事件判断WebView是否滚动到顶部
          child: NotificationListener<ScrollUpdateNotification>(
            onNotification: (notification) {
              if (notification.metrics.pixels <= 0) {
                _isWebViewAtTop = true;
              } else {
                _isWebViewAtTop = false;
              }
              // 只有滚动到顶部时才让RefreshIndicator响应事件
              return !_isWebViewAtTop;
            },
            child: WebView(
              javascriptMode: JavascriptMode.unrestricted,
              initialUrl: "https://flutter.dev/",
              onWebViewCreated: (WebViewController webViewController) {
                _webviewController = webViewController;
              },
            ),
          ),
        ),
        bottomNavigationBar: BottomAppBar(
          color: Colors.amber,
          child: Row(
            children: [
              IconButton(
                onPressed: () async {
                  if (_webviewController != null && await _webviewController!.canGoBack()) {
                    _webviewController!.goBack();
                  } else {
                    ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text("Geri donecek bir sey yok")));
                  }
                },
                icon: const Icon(
                  Icons.arrow_left,
                  size: 50,
                ),
              ),
              IconButton(
                onPressed: () async {
                  if (_webviewController != null && await _webviewController!.canGoForward()) {
                    _webviewController!.goForward();
                  } else {
                    ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text("Ileri gidecek bir sey yok")));
                  }
                },
                icon: const Icon(
                  Icons.arrow_right,
                  size: 50,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Orxan Mirzəyev