flutter 使用webview

news2024/11/24 19:15:54

背景:

        一般都有使用webview加载网页的需求,比如加载隐私协议、用户协议等。

如何做:

        当然,我们自己不用封装轮子,在pub.dev上有成熟的轮子:webview_flutter

首先,将依赖导入,在pubspec.yaml文件中:

webview_flutter: ^4.4.3

这里我用的不是最新版本,因为我本地的dart sdk版本是3.0.5,考虑兼容性,我使用的是webview_flutter:4.4.3版本。

第二步,新建一个文件:

import 'package:flutter/material.dart';
import 'package:videoshort/util/UtilString.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewPage extends StatefulWidget {
  const WebViewPage({super.key});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor("#FFFFFF".hexToColor())..setNavigationDelegate(NavigationDelegate(onProgress: (int progress){
        "onProgress $progress".log();
      },onPageStarted: (String url){
        "onPageStarted $url".log();
      },onPageFinished: (String url){
        "onPageFinished $url".log();
      },onWebResourceError: (WebResourceError error) {
        "Error ${error.description}".log();
      },onNavigationRequest: (NavigationRequest request){
        if (request.url.startsWith('https://www.youtube.com/')) {
          return NavigationDecision.prevent;
        }
        return NavigationDecision.navigate;
      }))..loadRequest(Uri.parse("https://www.baidu.com"),method: LoadRequestMethod.get);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Simple Example')),
      body: WebViewWidget(controller: _controller),
    );
  }
}

基本到这一步,就已经完成了webview的使用,url和title可以从外部进行传参。

如何加载http的问题

跳转WebView报错net::ERR_CLEARTEXT_NOT_PERMITTED:

在加载http的网页时,会遇到上面的报错,原因是:从Android 9.0(API级别28)开始,默认情况下禁用明文支持。因此http的url均无法在webview中加载。

如何处理:

打开android目录中的AndroidManifest.xml文件(一般路径为:android/app/src/main/AndroidManifest.xml),并在application标签中添加如下一行代码
android:usesCleartextTraffic="true",注意添加的位置,如下图:

注意,在fluter工程目录中,还有一个debug目录下也有androidManifest.xml文件,两个最好都添加上。

最后,可以卸载应用,重新安装。

完结撒花! 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1493605.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Appium系列(1)安装启动Appium

Appium环境准备 Mac电脑jdk环境AndroidSDK环境node>8.1.0&#xff08;最好用最新版本&#xff09; 安装命令 npm i -g appium安装不成功请检查node 版本是否正确 安装成功命令行输入appium回车查看 安装驱动程序 1、先检查当前驱动情况 通过 appium driver list 进行…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:PinchGesture)

用于触发捏合手势&#xff0c;触发捏合手势的最少手指为2指&#xff0c;最大为5指&#xff0c;最小识别距离为5vp。 说明&#xff1a; 从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 接口 PinchGesture(value?: { finge…

刷题笔记day27-回溯算法3

39. 组合总和 var path []int var tmp []int var result [][]int// 还是需要去重复&#xff0c;题目中要求的是至少一个数字备选的数量不同。 // 所以需要剪枝操作&#xff0c;右边的要比左边的> func combinationSum(candidates []int, target int) [][]int {// 组合问题pa…

淘宝下单接口的解析|跨境电商中淘宝代购功能实现的API接口接入详解【附代码实例】

淘宝接口解析是指通过淘宝提供的API&#xff08;Application Programming Interface&#xff09;来实现程序与淘宝平台的数据交互和功能调用。通过淘宝接口&#xff0c;用户可以实现商品信息获取、订单管理、物流跟踪等功能。 在使用淘宝接口前&#xff0c;首先需要注册成为阿…

在 SpringBoot3 中使用 Mybatis-Plus 报错

在 SpringBoot3 中使用 Mybatis-Plus 报错 Property ‘sqlSessionFactory’ or ‘sqlSessionTemplate’ are required Caused by: java.lang.IllegalArgumentException: Property sqlSessionFactory or sqlSessionTemplate are requiredat org.springframework.util.Assert.no…

Sora:AI视频模型的无限可能与挑战

随着人工智能技术的突飞猛进&#xff0c;AI视频模型已成为科技领域的新焦点。OpenAI推出的AI视频模型Sora&#xff0c;凭借其卓越的技术性能和前瞻性&#xff0c;为AI视频领域的发展揭开了新的篇章。本文将从技术解析、应用场景、未来展望、伦理与创意以及用户体验与互动五个方…

内存溢出(OOM)-汇总指南

目录 java.lang.OutOfMemoryError:Java heap space 原因分析 示例 解决方案 java.lang.OutOfMemoryError:GC overhead limit exceeded 原因分析 示例 解决方案 java.lang.OutOfMemoryError:Permgen space 原因分析 示例 解决方案 java.lang.OutOfMemoryError:Metas…

【Apple Vision Pro应用源码】Vision Pro吸尘器项目源代码

超级有趣Vision Pro 应用 吸尘器项目 这是一个非常有趣的 Vision Pro项目&#xff0c;会让孩子们爱上打扫卫生。 在这里我展示了如何使用 ARKit&#xff1a;头部跟踪、手部跟踪、场景理解加载和播放声音进程冲突使用 MTLBuffers 处理底层网格数据 项目源代码&#xff1a;Git…

vue3中的生命周期有哪些和怎么使用?

目录 前言&#xff1a; 正文&#xff1a; 总结: 前言&#xff1a; Vue.js 3是Vue.js框架的最新主要版本&#xff0c;引入了一些重大的改变和增强。在Vue 3中&#xff0c;由于Composition API的引入&#xff0c;生命周期钩子被替换为生命周期函数。 正文&#xff1a; 以下是…

Claude3 AI系列重磅推出:引领多模态智能时代的前沿技术,超越GPT-4

Claude3正式发布&#xff1a;号称性能超 GPT-4&#xff0c;免费使用、支持中文 划重点: &#x1f680; Claude3系列发布&#xff0c;包括Haiku、Sonnet和Opus版本&#xff0c;Opus在多个领域超越GPT-4。 &#x1f310; 用户可免费使用Claude3Sonnet模型&#xff0c;支持中文&am…

PostgreSQL开发与实战(6)体系结构1

作者&#xff1a;太阳 一、进程结构 PG数据库启动时会先启动一个主进程&#xff08;9.3之前称为postmaster&#xff0c;9.3以后称为postgres server process&#xff09;&#xff0c;然后fork出一些辅助子进程&#xff08;backend、backgroud相关进程&#xff09;&#xff0c;…

Go-知识简短变量声明

Go-知识简短变量声明 1. 简短变量声明符2. 简短变量赋值可能会重新声明3. 简短变量赋值不能用于函数外部4. 简短变量赋值作用域问题5. 总结 githuio地址&#xff1a;https://a18792721831.github.io/ 1. 简短变量声明符 在Go语言中&#xff0c;可以使用关键字var或直接使用简短…

2024新鲜出炉阿里巴巴面试真题,如果不想35岁被淘汰这篇文章必看

最近看到群里看到一个女生&#xff0c;讲述了她从开始选择Android&#xff0c;经过非常努力的学习和挣扎&#xff0c;然而最后面对当前的环境却不得不放弃。看完以后真的非常替她感觉惋惜&#xff0c;如果早几年入行可能结果会比现在好很多&#xff0c;但可惜&#xff0c;这就是…

Thinkphp5.1中,将数组赋值给js使用

一、例如Thinkphp5.1中的的代码是这样的 $data [status > 1,msg > 加载成功,data > [id > 1,username > 小洪帽,] ];$this->assign(data,$data);二、JS代码接收PHP中的数组 注意 <> 符号是不需要放引号的。 let arr <?json_encode($data)?>…

MySql、Navicat 软件安装 + Navicat简单操作(建数据库,表)

一、MySql、Navicat 软件安装 及正常使用 MySql下载&#xff0b;安装&#xff1a; 检查安装情况&#xff1a; 配置环境变量&#xff1a; 搞定了&#xff01;&#xff01;&#xff01; 可以登陆试哈哈哈 连接navicat 开始创建数据库 二、 商品种类表 - commoditytype int …

CSS极速入门

CSS介绍 什么是CSS? CSS(Cascading Style Sheet),层叠样式表,用于控制页面的样式. CSS能够对网页中元素位置的排版进行像素级的精确控制,实现美化页面的效果.能够做到页面的样式和结构分离. CSS可以理解为"东方四大邪术"的化妆术. 对页面展示进行化妆. 基本语法规…

双指针解决三元组问题

山海自有归期 风雨自有相逢 CSDN 请求进入专栏 ​​​​ 是否进入《数据结构专栏》? 确定 目录 三数之和 题目描述 输入输出样例 思路 代码测试 复杂度分析 三数之和 题目链接&#xff1a;三数之和 题目描述 给你一个整数数组 nums &#…

java上传本地文件到服务器共享

在Windows系统中,将本地文件夹中的某个文件上传到另一台Windows服务器电脑上,前提:两台电脑网络互通,要接收文件的Windows服务器文件夹开启了共享,可以被本机用如下方式进行写入和读取: 如何配置服务器共享请自行百度查找。 所需要的maven依赖如下: <dependency>…

初探深度学习-手写字体识别

前言 手写数字的神经网络识别通常指的是通过训练有素的神经网络模型来识别和分类手写数字图像的任务。这种类型的任务是机器学习和计算机视觉领域的一个经典问题&#xff0c;经常作为入门级的图像识别问题来展示和测试各种机器学习算法的能力。在实际应用中&#xff0c;手写数…

比肩Gen-2,全新开源文生视频模型

著名开源平台Stability.ai在官网宣布&#xff0c;推出全新文生视频的扩散模型Stable Video Diffusion&#xff0c;已开源了该项目并公布了论文。 据悉&#xff0c;用户通过文本或图像就能生成高精准&#xff0c;14帧和25帧的短视频。目前&#xff0c;Stable Video Diffusion处…