Flutter Web使用easy_web_view2库报错及网页尺寸设置问题

你当前使用StatelessWidget无法调用setState方法，需要先将组件改为StatefulWidget，再按需求配置宽高和回调即可，具体实现如下：

1. 完整可运行代码示例 #

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

class Quiz extends StatefulWidget {
  const Quiz({Key? key}) : super(key: key);

  @override
  State<Quiz> createState() => _QuizState();
}

class _QuizState extends State<Quiz> {
  // 定义网页宽高变量，支持动态修改
  double webWidth = 300;
  double webHeight = 600;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CyberQuiz'),
      ),
      body: Center(
        // 用SizedBox包裹EasyWebView指定宽高，也可替换为Container
        child: SizedBox(
          width: webWidth,
          height: webHeight,
          child: EasyWebView(
            src: 'https://www.ncsc.gov.uk/',
            // 库源码要求必须传onLoaded参数，官方示例文档未更新导致遗漏
            onLoaded: () {
              print('网页加载完成');
              // 加载完成后修改宽高示例，调用setState触发组件重绘
              setState(() {
                // 示例：适配当前设备90%的屏幕宽高
                webWidth = MediaQuery.of(context).size.width * 0.9;
                webHeight = MediaQuery.of(context).size.height * 0.8;
              });
            },
            // 可选配置，根据需求自行开启
            isMarkdown: false,
            convertToWidgets: false,
          ),
        ),
      ),
    );
  }
}

2. 关键逻辑说明 #

• onLoaded报错问题：库实际源码中onLoaded是必传参数，官方示例文档未及时更新导致遗漏，你已经补充该回调就不会再抛出对应错误。
• 宽高设置规则：
  • 固定宽高：直接给包裹EasyWebView的SizedBox/Container写死width、height值即可，不需要调用setState。
  • 动态修改宽高：在State类中定义宽高变量，需要修改宽高时调用setState()更新变量值，即可触发组件重绘更新网页尺寸，上述示例是在网页加载完成后自适应屏幕宽高的实现。
• setState使用限制：只有StatefulWidget对应的State类中才能调用setState方法，这是Flutter基础渲染规则，所以必须把原来的无状态组件改为有状态组件。

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