Flutter webview_flutter引入webview组件启动不了-优快云博客

本文链接：https://blog.youkuaiyun.com/isusjjyy/article/details/102800441

本文介绍了如何在Flutter中使用flutter_webview_plugin插件，包括在pubspec.yaml中引入插件，配置iOS和Android的权限以允许HTTP请求。详细讲述了在iOS的info.plist和Android的network_security_config.xml中进行的设置，并提供了打开外部链接的两种使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入flutter_webview_plugin插件

pubspec.yaml文件中引入：

dependencies:
   flutter_webview_plugin: ^0.3.8

权限配置

Flutter 本身并未集成webview,所以当需要使用webview 的时候，使用flutter_webview_plugin插件，也就是使用的原生webview组件

flutter_webview_plugin 在使用过程中会iOS出现无法加载HTTP请求的情况，但是Flutter 却可以加载HTTP请求。这就与两个的框架有关了，Flutter是独立于UIKit框架的。解决方案：

在iOS 的info.plist中添加对HTTP的信任。

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

在Android中

在D:\work_area\github\01-07-gxj-nss\android\app\src\main\res中添加xml文件夹

xml文件夹下面创建network_security_config.xml，文件内容如下

 <network-security-config>
   <base-config cleartextTrafficPermitted="true">
       <trust-anchors>
           <certificates src="system" />
       </trust-anchors>
   </base-config>
 </network-security-config>

修改D:\work_area\github\01-07-gxj-nss\android\app\src\main\AndroidManifest.xml文件

 <application
     // ...
     android:networkSecurityConfig="@xml/network_security_config"

作用及使用

在app中打开外部链接地址

参考网址：flutter_webview_plugin

使用方式1：

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

void main() => runApp(MyApp());

 class MyApp extends StatelessWidget {
   // 直接在routes中使用
   final routes = {
     // 首页nss社区
     "index_nss_community":(_) => WebviewScaffold(
       url: "http://www.cnminer.cn/",
       appBar: AppBar(
         title:Text('nss社区'),
       ),
       // 允许网页缩放
       withZoom: true,
       // 允许LocalStorage
       withLocalStorage: true,
       // 允许执行js代码  
       withJavascript: true, 
     ),
   };

   @override
   Widget build(BuildContext context) {

   }
 }

使用方式2：

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

void main() => runApp(MyApp());

 class MyApp extends StatelessWidget {
   // 定义路由
   final routes = {
     "index_new_direct":(context, {arguments}) => WebViewPage(arguments:arguments),
   };

   @override
   Widget build(BuildContext context) {

   }
 }

// 页面中使用
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:flutter/services.dart';
import 'package:orientation/orientation.dart';

class WebViewPage extends StatefulWidget {
 final Map arguments;
 WebViewPage({Key key, this.arguments}) : super(key: key);
 @override
 _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
 // 当前页面索引
 int currentIndex = 0;
 @override
 initState() {
   super.initState();
   currentIndex = widget.arguments["currentIndex"];
   OrientationPlugin.forceOrientation(DeviceOrientation.landscapeRight);
 }

 @override
 void dispose() {
   super.dispose();
   //返回时 设置回竖屏
   OrientationPlugin.forceOrientation(DeviceOrientation.portraitUp);
 }

 @override
 Widget build(BuildContext context) {
   // 跳转代码
   return WebviewScaffold(
     url: "https://www.feixiaohao.com/currencies/tickets/",
     appBar: AppBar(
       title: Text('nss新动向'),
     ),
     // 允许网页缩放
     withZoom: true,
     // 允许LocalStorage
     withLocalStorage: true,
     // 允许执行js代码
     withJavascript: true,
   );
 }
}

欢迎加群讨论更多flutter相关问题(7天有效）如果失效，可加个人微信拉群