如何修复Flutter webview_flutter库无法正常使用的问题

错误原因 #

webview_flutter 4.x版本进行了API重大重构，你代码中使用的WebView组件、JavascriptMode枚举均已被移除，导致IDE报未定义错误，同时因旧API未被识别，导入包被误判为未使用。

代码修正方案 #

适配4.x版本的正确写法需要使用WebViewWidget配合WebViewController来实现功能，修改后的完整代码如下：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ForYou WebView',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    // 初始化WebViewController
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://google.com'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ForYou WebView'),
      ),
      body: WebViewWidget(controller: controller),
    );
  }
}

模拟器持续加载问题排查 #

1. 检查网络连接：确保模拟器能正常访问外网，可以在模拟器浏览器中打开https://google.com测试连通性
2. 配置网络权限：
   • Android：在android/app/src/main/AndroidManifest.xml中添加网络权限

     <uses-permission android:name="android.permission.INTERNET"/>
     

   • iOS：在ios/Runner/Info.plist中确保已开启网络访问权限，若需访问HTTP站点，需添加ATS例外（google为HTTPS可忽略此步）
3. 清理缓存重新构建：执行以下命令后重新运行项目

   flutter clean
   flutter pub get
   flutter run
   

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