Flutter中使用flutter_inappwebview加载远程的html文件

艾光远

已于 2025-03-17 22:47:55 修改

阅读量8.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签：移动端开发 Flutter

于 2021-01-09 23:57:57 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/112415614

Flutter 专栏收录该内容

62 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Flutter移动端开发中如何使用flutter_inappwebview插件来加载远程HTML文件。首先，要在pubspec.yaml中配置插件并执行`flutter pub get`。接着，在需要使用的文件中引入依赖。在使用过程中，要注意处理SDK版本低和网络权限的问题。文章还提供了一个加载远程页面的完整示例。

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

1. 安装插件

配置 flutter_inappwebview 插件。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  date_format: ^1.0.6
  flutter_cupertino_date_picker: ^1.0.26+2 
  flutter_swiper: ^1.1.6
  fluttertoast: ^7.1.6
  http: ^0.12.2
  dio: ^3.0.10
  flutter_html: ^1.1.0

  # 加载远程HTML插件
  flutter_inappwebview: ^4.0.0+4

在pubspec.yaml中配置保存后，在VS Code环境中会自动下载依赖包。

如果无法正常下载，执行 flutter pub get 。

2. 引入依赖

在需要用到的该插件的文件中引入插件包。

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

3. 使用插件

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

艾光远

关注关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

Flutter 混合开发：WebView 与原生完美融合实战

移动开发前沿的博客

06-12

1093

在移动应用开发中，纯原生（Native）或纯Flutter开发虽能提供优质体验，但面对“高频迭代的运营活动页”“复杂H5功能复用”“多端统一维护”等场景时，混合开发（Flutter + WebView）成为更优选择。本文聚焦“Flutter与WebView的深度融合”，覆盖集成流程、双向通信实现、性能优化及跨平台适配，帮助开发者快速上手实战。本文从“为什么需要混合开发”切入，逐步讲解核心概念（Flutter、WebView、双向通信）、集成步骤、通信实现、实战案例，最后总结常见问题与未来趋势。

Flutter WebView 组件 inappwebview

weixin_38107457的博客

02-26

2515

flutter_inappwebview | Flutter Package (pub.dev) flutter_inappwebview: ^5.3.2 1. 安装插件配置 flutter_inappwebview 插件。 2. 引入依赖在需要用到的该插件的文件中引入插件包。 import 'package:flutter_inappwebview/flutter_inappwebview.dart'; 3. 使用插件 InAppWebView( initialUrl

参与评论您还未登录，请先登录后发表或查看评论

flutter_inappwebview：Flutter插件，可让您添加内联Webview，使用无头Webview以及打开应用程序内浏览器窗口

01-31

Flutter InAppWebView插件 Flutter插件，可让您添加嵌入式Web视图，使用无头Web视图以及打开应用内浏览器窗口。文章/资源要求 Dart SDK：“> = 2.12.0-0 <3> = 1.22.0” Android： minSdkVersion 17并添加了对androidx支持（请参阅以迁移现有应用） iOS：-- --ios-language swift ，Xcode版本>= 11 适用于Android和iOS的重要说明如果您正在运行应用程序，并且需要在runApp()之前runApp()例如，在插件初始化期间runApp()访问二进制Messenger，则需要首先显式调用WidgetsFlutterBinding.ensureInitialized() 。一个例子： void main () { // it should be the first line in main method WidgetsFlutterBinding . ensureInitialized (); // rest of y

flutter开发实战-webview插件flutter_inappwebview使用

一名开发者

10-02

8850

flutter开发实战-webview插件flutter_inappwebview使用在开发过程中，经常遇到需要使用WebView，Webview需要调用原生的插件来实现。常见的flutter的webview插件是webview_flutter，flutter_inappwebview。之前整理了一下webview_flutter，查看这里我们使用flutter_inappwebview来加载网页。

Flutter 使用 flutter_inappwebview 加载 App 本地 HTML 文件

smileKH的博客

01-22

2083

在 Flutter 开发中，加载本地 HTML 文件是一个常见的需求，尤其是在需要展示离线内容或自定义页面时。本文将详细介绍如何使用 flutter_inappwebview 加载 App 本地 HTML 文件，包括传统加载资源文件的方法和从 App 目录加载文件的方法。通过以上方法，你可以灵活地使用 flutter_inappwebview 加载本地 HTML 文件，无论是通过资源文件还是从 App 目录加载。如果加载的文件路径是 file://，确保 iOS 的网络权限配置正确。一、传统加载资源文件。

Flutter WebView(flutter_inappwebview)

m0_46527751的博客

01-29

9364

Flutter WebView WebView在flutter中的实现方法主要有三种，三种的对比可以参考这篇文章在https://pub.dev/上搜索webview 我们选择的是第三种flutter_inappwebview 官方文档给出了在使用时的要求使用方法如下添加依赖 dependencies: flutter_inappwebview: ^5.3.2 使用时在对应文件下导包 import 'package:flutter_inappwebview/flutter_inappwe

Flutter 学习之旅之 flutter 使用 flutter_inappwebview 进行网页内容显示封装(url/标题/开始加载、加载完成、加载失败事件)

最新发布

仙魁XAN

03-21

3712

Flutter 是一款开源的 UI 软件开发工具包，由 Google 开发和维护。它允许开发者使用一套代码同时构建跨平台的应用程序，包括移动设备（iOS 和 Android）、Web 和桌面平台（Windows、macOS 和 Linux）。Flutter 使用 Dart 编程语言，它可以将代码编译为 ARM 或 Intel 机器代码以及 JavaScript，从而实现快速的性能。

详解Flutter WebView与JS互相调用简易指南

01-04

WebView与JS互相调用是一个刚需，但是貌似现在大家写的文章讲的都不是很清楚，我这个简易指南简单粗暴地分为两部分：JS调用Flutter和Flutter调用JS，拒绝花里胡哨，保证一看就懂，一学就会。开始之前先简单了解...

Flutter WebView插件使用教程与案例解析

总结来说，"flutter_inappwebview-master_flutter_WebView.zip"这个压缩包很可能包含了使用"flutter_inappwebview"库进行Flutter应用WebView功能实现所需的所有文件。通过这个库，开发者可以在Flutter应用中嵌入和...

Flutter开发人人影视客户端

08-10

在Flutter中，视频Player Widget可以加载本地或远程资源，并提供播放、暂停、全屏等功能。为了实现JavaScript与视频播放器的交互，可能需要借助`flutter_inappwebview`库，它能将网页嵌入到Flutter应用中，并提供...

flutter_browser_app:使用Flutter和flutter_inappwebview插件提供的功能齐全的全功能移动浏览器应用程序（例如Google Chrome移动浏览器）

05-08

Flutter浏览器应用使用Flutter和插件提供的功能创建的全功能移动浏览器应用（例如Google Chrome移动浏览器）。可在Google Play商店中找到它，为介绍文章：。还可以在此处查看介绍插件的文章：。特征 WebView选项卡，具有在长按链接/图像预览时自定义的功能，以及如何在不丢失WebView状态的情况下从一个选项卡移动到另一个选项卡；具有当前URL和所有弹出菜单操作的浏览器应用栏，例如打开新标签页，新的隐身标签页，将当前URL保存到收藏夹列表，将页面保存为脱机使用，查看网站使用的SSL证书，启用桌面模式等（功能类似于Google Chrome应用）；开发人员控制台，您可以在其中执行JavaScript代码，查看一些网络信息，管理浏览器存储（例如Cookie，window.localStorage等）；设置页面，您可以在其中更新浏览

flutter_inappwebview-fork:Flutter InAppWebView插件

03-31

Flutter InAppWebView插件废弃：请直接使用 Flutter插件，可让您添加嵌入式Web视图，使用无头Web视图以及打开应用内浏览器窗口。文章/资源要求 Dart SDK：“> = 2.7.0 <3> = 1.12.13 + hotfix.5” Android： minSdkVersion 17并添加了对androidx支持（请参阅以迁移现有应用） iOS：-- --ios-language swift ，Xcode版本>= 11 适用于Android和iOS的重要说明如果您正在运行应用程序，并且需要在runApp()之前runApp()例如，在插件初始化期间runApp()访问二进制Messenger，则需要首先显式调用WidgetsFlutterBinding.ensureInitialized() 。一个例子： vo

flutter_inappwebview-master_flutter_WebView.zip

10-11

flutter_inappwebview-master_flutter_WebView.zip

2023年最新Flutter+Getx仿小米商城项目实战视频教程-V3版

luckysuny的博客

11-24

2375

透明导航、浮动导航、导航动画、六格验证码、Photo-view类似朋友圈图片预览、3、 Flutter Android中使用生物识别认证的一些配置。2、 Flutter中使用socket.io和服务器实现通讯。3、 Flutter中使用socket.io和服务器实现通讯。直播流程（推流、拉流）、借助腾讯云直播、自己搭建直播服务器、4、 Flutter Ios中使用生物识别认证的一些配置。二、 AP模式下Flutter和Wifi模块的数据穿透演示。、Flutter 事件驱动、Flutter本地存储。

flutter_inappwebview

12-17

9042

webview_flutter 是官方维护的 WebView 插件，特性是基于原生和 Flutter SDK 封装，继承 StatefulWidget，因此支持内嵌于 Flutter Widget 树中，这是比较灵活的。但不支持https自制证书强制信任。 flutter_webview_plugin 则是基于原生 WebView 封装的 Flutter 插件，将原生的一些基本使用 API 封装好提供给 Flutter 调用，因此并不能内嵌于 Flutter Widget ...

flutter：webview_flutter和flutter_inappwebview的简单使用