Flutter中InAppWebView类型不匹配错误：UriData无法赋值给WebUri?

我在Flutter应用中使用InAppWebView组件时遇到类型不匹配错误，具体错误信息如下：

The argument type 'UriData' can't be assigned to the parameter type 'WebUri?'

相同代码在另一应用中使用不同URL可正常运行，当前代码预期实现点击“忘记密码”按钮后，通过内嵌浏览器打开密码重置网页，但出现上述报错。

相关代码 #

import 'package:flutter/material.dart';
// 提供内嵌浏览器功能的包
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:loading_animation_widget/loading_animation_widget.dart';
import 'package:project1_test/pages/loginPage.dart';
import 'package:project1_test/theme/Textstyle.dart';
import 'package:project1_test/theme/colors.dart';

class forgotpass extends StatefulWidget {
  const forgotpass({super.key});
  
  @override
  State<forgotpass> createState() => _forgotpassState();
}

class _forgotpassState extends State<forgotpass> {
  InAppWebViewController? webViewController;
  bool isLoading = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: purpleColor, // 补充颜色赋值
        title: Text(
          'Forgot Password',
          style: TextStyle(color: Colors.white), // 修正TextStyle写法
        ),
        centerTitle: true,
        actions: [
          TextButton(
            child: Text(
              'LOGIN',
              style: TextStyle(color: Colors.white), // 修正TextStyle写法
            ),
            onPressed: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) => loginPage()));
            },
          ),
        ],
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: Stack(
              children: [
                InAppWebView(
                  initialUrlRequest: URLRequest(
                    // 报错位置
                    url: Uri.parse('Any Url that will open in the inappwbview'),
                  ),
                  onWebViewCreated: (controller) {
                    webViewController = controller;
                  },
                  onLoadStart: (controller, url) {
                    setState(() {
                      isLoading = true;
                    });
                  },
                  onLoadStop: (controller, url) {
                    setState(() {
                      isLoading = false;
                    });
                  },
                ),
                if (isLoading)
                  Center(
                    child: LoadingAnimationWidget.beat(color: purpleColor, size: 50),
                  )
              ],
            )
          )
        ],
      ),
    );
  }
}

解决方案 #

这个错误是因为flutter_inappwebview新版本中，URLRequest的url参数要求传入WebUri类型，而非Dart原生的Uri类型，按以下方式修复即可：

方案1：直接使用WebUri初始化 #

替换原Uri.parse的写法，直接用WebUri传入地址：

initialUrlRequest: URLRequest(
  url: WebUri('你的密码重置网页地址'),
),

方案2：将原生Uri转换为WebUri #

如果需要保留Uri的解析逻辑，可通过WebUri.fromUri转换：

initialUrlRequest: URLRequest(
  url: WebUri.fromUri(Uri.parse('你的密码重置网页地址')),
),

另外原代码里还有两个小问题需要修正：

• AppBar的backgroundColor之前仅留了注释未赋值，已补充为purpleColor
• Text组件的style属性不能直接传Colors.white，需用TextStyle(color: Colors.white)包裹

内容的提问来源于stack exchange，提问作者Syed Mujtaba Ali