Flutter中webview_flutter无法正常加载页面求助

使用webview_flutter包实现网页展示页面时出现异常：网页仅在屏幕约10%的绿色区域显示，剩余区域一直显示加载图标，只能在绿色区域滑动查看完整网页。

查阅旧Stack Overflow帖子后发现，由于包在2019年后有重大更新，帖子中的方法已无法使用。当前代码如下：

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

import 'package:webview_flutter/webview_flutter.dart';

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

  @override
  State<StatefulWidget> createState() => _WebViewContainerState();
}

class _WebViewContainerState extends State<WebViewContainer> {
  final controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.disabled)
    ..loadRequest(Uri.parse('https://itvlahoya.es/cita-previa'));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Cita Previa ITV"),
      ),
      body: WebViewWidget(controller: controller),
    );
  }
}

这个问题的核心原因是目标网页依赖JavaScript完成布局渲染，而你的代码中禁用了JavaScript，导致网页无法正确加载样式和自适应屏幕。按以下步骤修改：

1. 启用JavaScript支持 #

将JavaScriptMode.disabled改为JavaScriptMode.unrestricted，这是解决布局异常的关键。

2. 启用DOM存储（可选但推荐） #

部分网页需要DOM存储来保存状态或加载资源，添加enableDomStorage(true)确保兼容性。

修改后的完整代码 #

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

import 'package:webview_flutter/webview_flutter.dart';

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

  @override
  State<StatefulWidget> createState() => _WebViewContainerState();
}

class _WebViewContainerState extends State<WebViewContainer> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..enableDomStorage(true)
      ..loadRequest(Uri.parse('https://itvlahoya.es/cita-previa'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Cita Previa ITV"),
      ),
      body: WebViewWidget(controller: controller),
    );
  }
}

额外排查点 #

如果修改后仍有问题，可以检查：

• 确保webview_flutter是最新版本，执行flutter pub upgrade webview_flutter更新
• 部分网页可能需要设置自定义用户代理，可通过setUserAgent()添加

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