Flutter WebView中onWebViewCreated的complete(controller)报错问题

1. 修复complete方法未定义的报错 #

你代码里的controller.complete(controller)是错误写法——WebViewController类本身没有complete方法，这是教程混淆了Completer的异步初始化逻辑导致的。正确做法是用Completer来持有WebViewController实例：

• 先声明一个Completer<WebViewController>变量，用于异步获取控制器
• 在onWebViewCreated回调中调用Completer的complete方法，传入控制器对象

2. 修复底部导航栏前进/后退按钮不显示的问题 #

按钮不显示通常是因为没有关联WebViewController的导航状态，也没有在页面导航时更新UI。需要：

• 通过Completer获取初始化后的控制器
• 监听控制器的导航状态变化，更新按钮的显示状态
• 根据canGoBack()和canGoForward()的结果，决定是否显示对应按钮

修改后的完整代码示例 #

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

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

  @override
  State<WebViewScreen> createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  final Completer<WebViewController> _webViewControllerCompleter = Completer();
  bool _canNavigateBack = false;
  bool _canNavigateForward = false;

  @override
  void initState() {
    super.initState();
    // 监听网页导航状态变化，更新按钮显示状态
    _webViewControllerCompleter.future.then((controller) {
      controller.addListener(() {
        setState(() {
          _canNavigateBack = controller.canGoBack();
          _canNavigateForward = controller.canGoForward();
        });
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("WebView Demo")),
      body: WebView(
        initialUrl: "https://example.com",
        onWebViewCreated: (WebViewController controller) {
          _webViewControllerCompleter.complete(controller); // 修正为调用Completer的complete方法
        },
        javascriptMode: JavascriptMode.unrestricted,
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 仅当可后退时显示按钮
            if (_canNavigateBack)
              IconButton(
                icon: const Icon(Icons.arrow_back),
                onPressed: () async {
                  final controller = await _webViewControllerCompleter.future;
                  controller.goBack();
                },
              ),
            const SizedBox(width: 20),
            // 仅当可前进时显示按钮
            if (_canNavigateForward)
              IconButton(
                icon: const Icon(Icons.arrow_forward),
                onPressed: () async {
                  final controller = await _webViewControllerCompleter.future;
                  controller.goForward();
                },
              ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• 用Completer正确初始化WebViewController，彻底解决complete方法未定义的报错
• 通过controller.addListener()监听导航状态变化，实时更新_canNavigateBack和_canNavigateForward的值
• 底部导航栏根据这两个布尔值条件渲染按钮，确保只有在可导航时才显示对应按钮

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