正确在Flutter中添加webview实现详解

目录
  • 前言
  • 安装
  • 运行项目遇到的问题

前言

为什么要在flutter中引入webview？这不是废话么，当然是为了加载一个网页，这不是移动端最基本的需求么，哈哈！说的真不错，接下来我要是告诉你我的用法，你可能要大吃一惊。我的用处很简单，那就是在webview中再加载一个flutter编译成web的项目。有没有吓到你。别怕，我这么做的原因很简单，就是为了热更新。可能在flutter中实现热更新的方法有很多，但我敢说我这么做就是最好的热更新方式。当我内容发生变更是时候，我不需要继续去审核，只需要在服务器中，更新内容，我的热更新就实现了！是不是听着很动心，那就赶紧学起来吧。

安装

在Flutter应用开发中，由于官方并没有提供类似Webview的网页加载组件，所以如果项目中涉及网页加载就需要使用第三方插件库。网上第三方插件库很多，我不推荐，自行百度搜索比较，用法基本雷同，webview_flutter是Flutter官方开发和维护的网页加载插件库。所以今天我讲讲它的使用方法

  • 在pubspec.yaml文件中添加依赖脚本（并运行隐式flutter pub get）
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  webview_flutter: ^3.0.4
  • 使用
import 'package:flutter/material.dart';
import 'dart:io';
import 'package:webview_flutter/webview_flutter.dart';
class WebviewApp extends StatefulWidget {
  const WebviewApp({Key? key}) : super(key: key);
  @override
  State<WebviewApp> createState() => _WebviewAppState();
}
class _WebviewAppState extends State<WebviewApp> {
  @override
  void initState() {
    super.initState();
    if (Platform.isAndroid) WebView.platform = AndroidWebView();
  }
  @override
  Widget build(BuildContext context) {
    return const WebView(
      initialUrl: 'https://www.baidu.com',
      javascriptMode: JavascriptMode.unrestricted,
    );
  }
}

好了，这样我们就成功引入了webview,并在webview中加载了百度首页。你高兴的去运行项目，结果却傻眼了，终端一片红，好了，我来说说爆红的解决方案。

运行项目遇到的问题

One or more plugins require a higher Android SDK version.

  • 解决方案：找到 项目根目录\android\app\build.gradle,修改如下配置：
android {
  compileSdkVersion 32
}

Error: uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library

  • 解决方案：找到 项目根目录\android\app\build.gradle,修改如下配置：
defaultConfig {
    applicationId "com.example.flutter_jsbridge_js"
    minSdkVersion 20
    targetSdkVersion 30
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

net:ERR_CLEARTEXT_NOT_PERMITTED

这时候运行项目已经已经不会报错了，但是webview却显示一串神奇代码：

net:ERR_CLEARTEXT_NOT_PERMITTED，这是因为从 Android 9（API 级别 28）开始，明文支持默认处于禁用状态。

  • 解决方案：

创建文件：/xml/network_security_config.xml

目录路径：“项目根目录/android/app/main/res”

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">api.example.com(to be adjusted)</domain>
    </domain-config>
</network-security-config>
  • 对AndroidManifest.xml文件做修改：
<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:networkSecurityConfig="@xml/network_security_config"
        ...>
        ...
    </application>
</manifest>

这时候再去运行项目，就可以正常运行了，画面显示正常，如果你还需要遇到其他问题，可以留言一起解决。

以上就是正确在Flutter中添加webview实现详解的详细内容，更多关于Flutter添加webview的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Flutter WebView 预加载实现方法(Http Server)

    Flutter WebView 预加载实现方法(Http Server)

    目录 背景 分析 HttpServer 接下来? 资源配置 下载解压与本地存储 版本管理与更新 获取LocalServer Url并加载Webview 兜底措施 统一管理 展示与分析 总结 Demo 背景 WebView是在APP中,可以很方便的展示web页面,并且与web交互APP的数据.方便,并且更新内容无需APP发布新版本,只需要将最新的web代码部署完成,用户重新刷新即可. 在WebView中,经常能够听到的一个需求就是:减少首次白屏时间,加快加载速度.因为加载web页面,必然会受到网络

  • Flutter使用JsBridge方式处理Webview与H5通信的方法

    目前,移动跨平台开发作为移动开发的重要组成部分,是移动开发者必须掌握的技能,也是自我提升的重要手段.作为Google推出的跨平台技术方案,Flutter具有诸多的优势,已经或正在被广大开发者应用在移动应用开发中.在过去的2019年,我看到越来越多的公司和个人开始使用Flutter来开发跨平台应用,对于移动应用开发来说,Flutter能够满足几乎所有的业务开发需求,所以,学习Flutter正当时. 众所周知,使用Flutter进行项目开发时,就免不了要加载H5页面,在移动开发中打开H5页面需要使用

  • Flutter实现webview与原生组件组合滑动的示例代码

    最近在用Flutter写一个新闻客户端, 新闻详情页中的内容 需要用Flutter的本地Widget和WebView共同展示 . 比如标题/上方的视频播放器是用本地Widget展示, 新闻内容的富文本文字使用webview展示html, 这样就要求标题/视频播放器与webview可以 组合滑动 . ps: 如果把新闻详情页都用html画出, 就不用考虑组合滑动的问题. 找到支持与本地组件共存的webview控件 找一个可以与本地组件共存的webview控件是首要任务, 以下是我测试过的几个库:

  • Flutter webview与网页通讯交互实现

    目录 前言 预览 具体实现 flutter中使用ds_bridge 网页端使用dsbridge_flutter 总结 前言 在app开发中我们有JSBridge来实现app和网页端通讯,现参考JSBridge实现了Flutter webview和网页端通讯. 预览 flutter import 'package:ds_bridge/ds_bridge.dart'; class JsBridgeUtil { // 向H5调用接口 static executeMethod(flutterWebVie

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

    本文采用Flutter官方WebView插件:https://pub.dartlang.org/packages/webview_flutter WebView与JS互相调用是一个刚需,但是貌似现在大家写的文章讲的都不是很清楚,我这个简易指南简单粗暴地分为两部分:JS调用Flutter和Flutter调用JS,拒绝花里胡哨,保证一看就懂,一学就会. 开始之前先简单了解一下官方WebView所包含的API: onWebViewCreated:在WebView创建完成后调用,只会被调用一次: ini

  • Android开发之Flutter与webview通信桥梁实现

    前言 最近业务有需求需要在flutter内使用webview进行内嵌H5进行展示,此时需要涉及到H5与flutter之间额通信问题.比如发送消息或者H5调用Flutter的相机等等 webview选型 这里我们使用官方维护的插件webview_flutter 如何通信? webview在初始化的时候需要向容器内注册一个全局方法供H5进行调用 WebView( initialUrl: 'https://flutter.dev', javascriptMode: JavascriptMode.unr

  • 正确在Flutter中添加webview实现详解

    目录 前言 安装 运行项目遇到的问题 前言 为什么要在flutter中引入webview?这不是废话么,当然是为了加载一个网页,这不是移动端最基本的需求么,哈哈!说的真不错,接下来我要是告诉你我的用法,你可能要大吃一惊.我的用处很简单,那就是在webview中再加载一个flutter编译成web的项目.有没有吓到你.别怕,我这么做的原因很简单,就是为了热更新.可能在flutter中实现热更新的方法有很多,但我敢说我这么做就是最好的热更新方式.当我内容发生变更是时候,我不需要继续去审核,只需要在服

  • Python实现视频中添加音频工具详解

    目录 前言 环境依赖 主要代码 前言 本文提供在在无音频的视频中添加音频的python工具,附上代码. 环境依赖 ffmpeg环境安装,可以参考:windows ffmpeg安装部署 ffmpy安装: pip install ffmpy -i https://pypi.douban.com/simple 主要代码 不废话,上代码. #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2021/12/5 1:49 # @Author :

  • Java在PDF中添加表格过程详解

    Java在PDF中添加表格过程详解

    前言 本文将介绍通过Java编程在PDF文档中添加表格的方法.添加表格时,可设置表格边框.单元格对齐方式.单元格背景色.单元格合并.插入图片.设置行高.列宽.字体.字号等. 使用工具:Free Spire.PDF for Java (免费版) Jar文件获取及导入: 方法1:通过官网下载jar文件包.下载后,解压文件,将lib文件夹下的Spire.Pdf.jar文件导入Java程序. 方法2:通过maven仓库安装导入. Java 代码示例 Java代码 import com.spire.pdf

  • Flutter中mixin的使用详解

    mixin是什么 mixin应该怎么理解呢,对Java系出身的我来说,这是一个新概念,各类资料的介绍也没找到一个清晰的定义.从个人理解来看,可以把它想象为Kotlin中的接口(和Java的区别是可以带非抽象的属性和方法),而多个mixin可以相互覆盖以实现组合,提供了非常大的灵活性,也可以达到类似多重继承的效果. 页表页面 这是一个普通的展示数据,上拉加载更多数据的列表. 其中有一个类型为List<T>的数据列表listData,有个page数据用于分页,isLoading用来判断是否正在加载

  • Java 添加、删除、格式化Word中的图片步骤详解( 基于Spire.Cloud.SDK for Java )

    本文介绍使用Spire.Cloud.SDK for Java提供的ImagesApi接口来操作Word中的图片.具体可通过addImage()方法添加图片.deleteImage()方法删除图片.updateImageFormat()格式化Word中的图片以及getImageFormat()获取Word中的图片格式等.操作方法和代码示例可参考下文中的步骤. 步骤1:导入jar文件 创建Maven项目程序,通过maven仓库下载导入.以IDEA为例,新建Maven项目,在pom.xml文件中配置m

  • Flutter Widget 之FocusableActionDetector使用详解

    Flutter Widget 之FocusableActionDetector使用详解

    目录 Material按钮 GestureDetector自定义按钮 为按钮添加一些条件性的样式 Material按钮 Material按钮会很好 但我们知道它们不一定适合你的应用程序,所以你要自己编写.可悲的是,从头开始编写自己的空间可能是一项艰巨的工作. 桌面用户期待悬停高亮.焦点和键盘快捷键,这是很难做好的. GestureDetector自定义按钮 是这样的,你在你的应用程序中创建一个自定义的按钮, 使用GestureDetector,当你点击它的时候,按钮会做一些事情 GestureD

  • java中变量和常量详解

    变量和常量 在程序中存在大量的数据来代表程序的状态,其中有些数据在程序的运行过程中值会发生改变,有些数据在程序运行过程中值不能发生改变,这些数据在程序中分别被叫做变量和常量. 在实际的程序中,可以根据数据在程序运行中是否发生改变,来选择应该是使用变量代表还是常量代表. 变量 变量代表程序的状态.程序通过改变变量的值来改变整个程序的状态,或者说得更大一些,也就是实现程序的功能逻辑. 为了方便的引用变量的值,在程序中需要为变量设定一个名称,这就是变量名.例如在2D游戏程序中,需要代表人物的位置,则需

  • Laravel5中Cookie的使用详解

    今天在Laravel框架中使用Cookie的时候,碰到了点问题,自己被迷糊折腾了半多小时.期间研究了Cookie的实现类,也在网站找了许多的资料,包括问答.发现并没有解决问题.网上的答案都是互相抄袭,互相转载.其实并没有什么用处.好在最后,我找到了决绝方法.奔着为广大Laravel爱好者和开发人员负责的精神,同时也希望大家在使用Cookie时少走弯路,在这里把在Laravel中Cookie的设置和读取方法贡献出来,供大家批评指正. 概述 Cookie的添加其实很简单,直接使用Cookie::ma

  • Django中的Signal代码详解

    Django中的Signal代码详解

    本文研究的主要是Django开发中的signal 的相关内容,具体如下. 前言 在web开发中, 你可能会遇到下面这种场景: 在用户完成某个操作后, 自动去执行一些后续的操作. 譬如用户完成修改密码后, 你要发送一份确认邮件. 当然可以把逻辑写在一起,但是有个问题是,触发操作一般不止一种(如用户更改了其它信息的确认邮件),这时候这个逻辑会需要写多次,所以你可能会想着DRY(Don't repeat yourself),于是你把它写到了一个函数中,每次调用.当然这是没问题的. 但是, 如果你换个思

  • Python Tkinter Entry和Text的添加与使用详解

    输入框和消息显示框是常用的GUI界面部件,其中输入框的重要任务就是返回一个输入的字符串,而消息显示框则要显示指定的信息. 功能:输入一个密码,如果密码正确则显示confirm,不正确则显示sorry __author__ = 'freedom' from Tkinter import * class App(Frame): def __init__(self,master): frame = Frame(master) frame.grid() self.ent = Entry(frame,sh

随机推荐