首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter: webview内的链接打开到内置浏览器,而不是webview

Flutter是一种跨平台的移动应用开发框架,它可以帮助开发者使用单一代码库构建高性能、美观的移动应用。在Flutter中,可以使用webview来加载网页内容,并且可以通过一些技巧实现在内置浏览器中打开链接,而不是在webview中打开。

Webview是一种用于在移动应用中展示网页内容的组件。它可以加载网页,并提供了一些基本的浏览器功能,如前进、后退、刷新等。在Flutter中,可以使用webview_flutter插件来集成webview功能。

要在webview内的链接打开到内置浏览器,可以通过监听webview的导航事件来实现。当用户点击webview中的链接时,可以捕获导航请求,并判断链接的类型。如果是外部链接,可以使用url_launcher插件来打开链接,这样就可以在内置浏览器中打开链接。

以下是一些步骤来实现在Flutter中webview内的链接打开到内置浏览器:

  1. 首先,确保已经在Flutter项目中添加了webview_flutter和url_launcher插件的依赖。
  2. 在Flutter应用的页面中,导入webview_flutter和url_launcher插件的库。
代码语言:txt
复制
import 'package:webview_flutter/webview_flutter.dart';
import 'package:url_launcher/url_launcher.dart';
  1. 创建一个webview并加载网页内容。
代码语言:txt
复制
WebView(
  initialUrl: 'https://example.com',
  navigationDelegate: (NavigationRequest request) {
    if (!request.url.startsWith('https://example.com')) {
      launch(request.url); // 在内置浏览器中打开链接
      return NavigationDecision.prevent; // 阻止webview加载链接
    }
    return NavigationDecision.navigate; // 允许webview加载链接
  },
)

在上述代码中,navigationDelegate是一个回调函数,用于处理webview的导航请求。当用户点击webview中的链接时,会触发导航请求,并通过request.url获取链接地址。如果链接地址不是以'https://example.com'开头,就使用url_launcher插件打开链接,并返回NavigationDecision.prevent来阻止webview加载链接。否则,返回NavigationDecision.navigate来允许webview加载链接。

通过以上步骤,就可以实现在Flutter中webview内的链接打开到内置浏览器,而不是在webview中打开。这样可以提供更好的用户体验,并使用户能够在内置浏览器中享受更完整的浏览功能。

腾讯云相关产品中,可以使用腾讯云移动应用开发套件(Mobile Application Development Kit,MADK)来构建Flutter应用,并结合腾讯云的云服务,如云函数、云存储等,实现更丰富的功能和更高的性能。具体产品介绍和链接地址可以参考腾讯云官方文档:

  • 腾讯云移动应用开发套件(MADK):https://cloud.tencent.com/product/madk
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 插件url_launcher简介

url_launcher是用于在移动平台中启动URLFlutter插件,适用于IOS和Android平台。他可以打开网页,发送邮件,还可以拨打电话。...github地址:https://github.com/flutter/plugins/tree/master/packages/url_launcher 最近项目需求就是打开一个连接跳转到安卓或苹果默认浏览器...如果加载在内置Safari视图控制器网页内容是universal link或不是,设置universalLinksOnly无效。...如果设置为false或不设置,网络地址被加载在设备默认浏览器。如果设置为true,网络地址被加载在自定义WebView。ios系统浏览器可以共享数据。...默认情况下,通过手机手机浏览器加载网页(当这个链接不是一个universal link)或 加载各自app(当这个链接是一个universal link,点击进行下载应用包)。

3.2K30

混合开发hybrid原理_unity引擎开源吗

safari f12 4.不存在多版本问题,维护成本很低 缺点: 1.性能和体验一般 2.受限于浏览器,能做事情并不是很多,需要兼容各种奇怪浏览器 3.入口强依赖浏览器 3.React Navite...App / Weex App / Uniapp 都是为了跨平台而生,支持react/vue语法 4.Flutter 闲鱼使用flutter开发。...里面可能有无数请求,怎么判断哪个请求需要调用内置方法呢?...,一般会加入各种Date.now()+id h5在app运行方式 1.appwebview直接加载一个h5链接 缺点: 没有太好体验,除了能用一些native能力之外,和普通浏览器打开h5没什么区别...:如何更新内置h5资源 开发中常见问题 1.ios webview中滑动不流畅 如果有一个滚动容器 scroll-container , overflow:scroll 加一个css属性即可 -webkit-overflow-scrolling

1.3K20
  • Flutter 中使用 WebView

    本文示例代码可在微信公众号「01二进制」后台回复「WebView」查看下载 前言 我们知道在开发 Native App 时经常会有打开网页需求,可供选择通常只有两种: 在 App 内部打开网页 通过调用系统自带浏览器打开网页...webview_flutter 封装 Flutter 插件,因此原理特性上基本与官方 WebView 一致; 在2018年 Flutter 发展初期,官方 webview_flutter 插件有很多问题...其实到这里时候应该是就已经结束了,但是我在使用过程中发现了一个很严重问题,如果我们 URL 是 HTTP 不是 HTTPS 的话,那么就只可以在 Android 9.0 以下设备运行(iOS同样不可以...我查阅了很多资料,也发现了一个曲线救国做法,就是检测要访问网页,如果是 HTTPS 就利用 WebView 访问,如果是 HTTP 就调用第三方浏览器访问。 额,这个做法吧,不好评价。...总结 总的来说,随着 Google 对 WebView 控件不断更新,其体验越来越好了,使用起来相对于原生 WebView 也更加简便,如果你有在你 App 使用 WebView 想法不妨尝试一下本文示例代码可在微信公众号

    3.4K20

    关于移动互联网跨平台技术演进

    那么App加载H5过程是什么样呢?...,体验不佳 不能运行在非微信环境内 没有window、document对象,不能使用基于浏览器JS库 不能灵活操作 DOM,无法实现较为复杂效果 页面大小、打开页面数量都受到限制 既然WebView...Dart优势 很多人会好奇,为什么Flutter要用Dart,不是用JavaScript开发,这里列下Dart优势 Dart 性能更好。... Dart Native Binding可以很好地通过 Dart Lib实现。 Fuchsia OS。Fuchsia OS内置应用浏览器就是使用 Dart语言作为 App开发语言。...,也不是熬几天几夜就能学好,必须养成平时努力学习习惯,更加需要准确学习方向达到有效学习效果。

    1.7K30

    5000字解析:前端五种跨平台技术

    混合开发技术点 如之前所述,原生开发可以访间平台所有功能,而在混合开发中,H5 代码是运行在 Web View 中Webview 实质上就是一个浏览器器内核、其 script 依然运行在一个权限受限沙箱中...混合框架一般都会在原生代码中预先实现一些访问系统能力 API,然后暴露给 Webview 以供 Javascript 调用,这样一来, Webview 就成为 Javascript 与原生 AP 之间通信桥梁...,主要负责 Javascript 与原生之间调用消息传递,消息传递必须遵守一个标准协议,其规定了消息格式与含义,我们将依赖于 Webview 、用于在 Javascript 与原生之间通信并实现了某种消息传输协议工具称为...排名由前往后,除了 Flutter 没有使用过在商业项目中 Electron 核心: Electron 就是把 Node.js 运行环境和谷歌浏览器内核一起打包了,于是就拥有了 Node.js...跨平台自绘引擎 Flutter 与用于构建移动应用程序其他大多数框架不同,因为 Flutter 既不使用 Webview,也不使用操作系统原生控件。

    1.2K40

    桌面软件开发框架大赏

    版本, 但这个版本还不是很稳,至少比Flutter Desktop第一个稳定版要差很多。...如果你完全没搞过移动端flutter,想用这个框架开发桌面应用,那么意味着你要学东西还挺多。好在dart和flutter入门都不是很难,学习曲线比较平缓。...JavaScirpt 虽然是单线程执行语言,但浏览器核心是多线程(还是多进程), 所以 JavaScript 与浏览器核心结合后,开发者既不用为开发多线程应用苦恼,又不用为没有多线程支持手足无措...推荐大家看看我另一个回答: 现在整个 Web 前端是「屎山」吗? 用Web相关技术做GUI应用优势是,让开发者可以把大部分精力投注在业务本身上,不是处理与GUI相关技术细节。...实际上所有的框架,都应该是这个目的,比如ORM框架,目的应该是让开发者把大部分精力投注在业务与数据之间关系上,不是管理关系型数据技术细节。

    6.9K30

    5000字解析:前端五种跨平台技术

    ---- 混合开发技术点 如之前所述,原生开发可以访间平台所有功能,而在混合开发中,H5代码是运行在 Web Vicw中Webview实质上就是一个浏览器器内核、其script依然运行在一个权限...混合框架一般都会在原生代码中预先实现一些访问系统能力API,然后暴露给 Webview以供 Javascript调用,这样一来, Webview就成为 Javascript与原生AP之间通信桥梁,...主要负责 Javascript与原生之间调用消息传递,消息传递必须遵守一个标准协议,其规定了消息格式与含义,我们将依赖于 Webview、用于在 Javascript与原生之间通信并实现了某种消息传输协议工具称为...,内置了一些UI组件,还有物料市场,目前看势头很好。...,性能体验肯定没有原生好,因为调用webView需要几百毫秒时间,但是也可以通过一些技术优化,跟谁写也有很大关系 ---- 快应用 就是华为、小米等国内厂商为了跟小程序竞争搞出来,像RN这些框架,回内置一些渲染

    1.2K20

    干货 | 三种主流快平台技术测评,你更青睐谁?

    (uni-app是双渲染引擎,webview和weex都内置了,随便开发者使用切换) 所以我们要清楚,提升性能是有代价,你究竟想要灵活丰富css3,还是想要固定flex模式排版,抑或是最简单但高性能...所以从解析效率上,Flutter肯定比webview要高。但从编码灵活性上,Flutter代码,嗯,难看低效!...前面已经说过,Flutter只是一个基础排版引擎,缺少很多能力,当我们需要在Flutter界面上内嵌一个原生视频播放扩展控件时(flutter没有内置视频播放能力),或者原生高德地图sdk,那么在拖动视频进度时...就连微信Android版,底部tab也是仿iOS不是Material风格(Material风格是把底tab放在顶部,并且左右滑动,微信曾经有这样一个临时版本,因为被用户吐槽,很快就下掉了)。...rn/weex、Flutter真的只是一个纯粹排版引擎,没有任何原生能力。如果一个原生应用里,某个不涉及原生能力界面想跨平台,那么这几个引擎都可以,并且Flutter性能最高。

    2.1K20

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

    最近在用Flutter写一个新闻客户端, 新闻详情页中内容 需要用Flutter本地Widget和WebView共同展示 ....找到支持与本地组件共存webview控件 找一个可以与本地组件共存webview控件是首要任务, 以下是我测试过几个库: flutter_WebView_plugin : 不可以inline;...webView_flutter : 可能支持, 但是还没有发布; flutter_inappbrowser : 可以实现组合布局, 所以选用了此库, 链接 https://github.com/pichillilorenzo...我们使用场景是: 要展示内容 = assets存储html外壳 + 接口获取到新闻内容段落, 不是一个url . 以上解决思路仅适用于加载html场景, 不是url....这个思路核心在于如何切分html内容, 需要保证切分后html是标签闭合, 即不是切在了某标签内部.

    2.9K20

    APP常用跨端技术栈深入分析

    ReactNative整体分为逻辑侧和渲染侧,逻辑侧基于js引擎,会将基于React写代码编译为JavaScript原生代码,再编译生成jsbundle文件,内置或下发到APP端运行;渲染侧依赖于Android...或iOS原生渲染,需要分平台编译对应编译产物,然后发布到服务端或内置到APP。...H5:以React和Vue为例,会将以框架开发代码编译为JavaScript原生代码,即然后在浏览器或者WebView中执行;内核会先建立连接、加载资源,然后解析、排版布局、绘制渲染呈现给用户。...基于Hybrid方案开发APP,需要通过React、Vue等前端框架实现,首页要编译为JavaScript原生语言,然后通过链接WebView浏览器加载页面,关键流程是连接加载、解析、排版、绘制,...主要因为连接和加载比较耗时,这里占大部分时间,连接和加载完以后基本就是WebView浏览器本地可以完成工作,后期优化也可以以此为切入点。

    2.3K10

    Flutter完整开发实战详解(二十、 Android PlatformView 和键盘问题)

    用户产生触摸事件是直接发送到 Flutter View 中,不是他们实际点击 AndroidView。...2.1.1、解决方法 AndroidView 使用 Flutter Framework 中点击测试逻辑来检测用户触摸是否在需要特殊处理区域。...在 Android Q 开始 InputMethodManager(IMM)改为每个 Window 自己实例化不是全局单例。因此之前幼稚“设置代理”模式在 Q 开始不起作用。...如果没有此功能,WebView 将在内部消耗所有 InputConnection 呼叫,不会通知 Flutter View 代理。...在代理线程中,返回 Flutter View 以创建输入。。 WebView 失去焦点时,将输入连接重置回 Flutter 线程。这样可以防止文本输入“卡”在 WebView

    13.4K20

    Flutter 2.8正式版发布了,还不来看看

    应用内存 由于 Flutter 会尽可能快地加载 Dart VM 服务 isolate,并将其和绑定在应用 AOT 代码一并加载到内存中,这会导致 Flutter 开发人员在部分内存 有限制设备上难以追踪内存指标...此外,一些开发人员想要更多关于光栅缓存行为性能跟踪信息,以减少制作动画效果时的卡顿,这允许 Flutter 快速地对昂贵、重复使用图片进行复用不是重新绘制。...在之前 webview_flutter 版本中,Hybrid composition 已经可用,但不是默认现在它修复了先前默认以虚拟显示模式运行许多问题。...此外,身份认证不是 flutterfire_ui 唯一支持 Flutter UI 相关功能。...最后,Flutter 团队并不是唯一一个在为了 Flutter desktop 付出心血团队。

    22.4K30

    【Web技术】 275- 理解 WebView

    App 内置浏览器 WebView 最常见用途之一是显示链接内容。在移动设备上启动浏览器,将用户从一个应用切换到另一个应用以及希望他们找到返回应用操作尤其令人失望。...WebView 通过在应用本身完全加载链接内容来很好地解决这个问题。...他们使用 WebView 伪造应用浏览器并将内容呈现为应用体验本身一部分。...有许多应用通过依赖 WebView 作为应用浏览器来以类似的方式打开链接。 广告 广告仍然是原生应用最流行赚钱方式之一。这些广告大部分是如何投放?...由于 Web 技术简单性和强大,这些加载项和扩展通常以 HTML、CSS 和 JavaScript 不是 C++,C# 或其他方式构建。一个流行例子是 Microsoft Office。

    85920

    大前端开发中路由管理之三:Android篇

    在混合开发页面中,通常又分为Activity-H5(WebView),Activity-Weex/React-Native,和Activity-Flutter这几种跨平台页面交互方式。...ActivityStack 是用于管理任务栈TaskRecord维护集合,一般情况下栈管理着位于前台TaskRecord和数个后台TaskRecord。         ...自渲染技术:自行实现一套渲染框架,可经过调用skia等方式完成自渲染,不依赖于原生控件,比如Flutter、Unity。...3.1 Activity-H5(webview)         我们知道在Android原生控件与WebView混合开发中,Activity通过在布局内置WebView控件来加载目标H5;WebView...需要关注是,当由Activity跳转进入WebView,伴随着从Activity任务栈进入H5任务栈,如果我们希望接下来在H5做页面前进或后退页面跳转,如按下返回键后不返回Activity任务栈,而是实现

    3.3K11

    产品经理简单了解技术之Webview

    H5开发指通过HTML5 + CSS + JS来构建一个网页版应用,中间媒介就是Webview。...打开打开一个WebView页面,页面往往会慢慢加载很久,若干秒后才出现你所需要看到页面。在目前工作中,部分产品功能是前端开发基于Webview进行实现,因此进行一个简单了解。...支持完整 Web 浏览体验,并在应用程序原生视图旁边显示 HTML、CSS 和 JavaScript 内容。Webview可以简单看做一个可以嵌套到界面上一个浏览器控件。...Android系统:Android内置Webkit内核高性能浏览器Webview则是在Webkit基础上进行封装后空间。 苹果系统:系统提供一个显示交互式网页内容对象应用程序浏览器。...---- 02 — Webview如何展示内容? 第一步:进行Webview初始化 当app首次打开网页和浏览器不同,在app中打开Webview第一步不是建立链接,而是启动初始化浏览器内核。

    75820

    搞定混合开发面试,这一篇就够了!

    ; 丰富内置原生能力,做到开箱可用; 打造本土化插件生态; 多 WebView 机制,用原生转场解决流畅性问题,这是杀手级特性。...Flutter使用Dart语言开发,Dart可以被编译(AOT)成不同平台本地代码,让Flutter可以直接和平台通讯不需要一个中间桥接过程,从而提高了性能。 ?...webview Webview 是一个基于webkit引擎,可以解析DOM 元素,展示html页面的控件,它和浏览器展示页面的原理是相同,所以可以把它当做浏览器看待。...(chrome浏览器,Safari 也是基于webkit引擎开发) 简而言之,webview就相当于一个浏览器,能解析html css以及js,甚至安卓后期更凶残,直接在4.4版本后直接使用了Chrome...调用Native还有一种拦截URL SCHEME方案 url scheme是一种类似于url链接,是为了方便app直接互相调用设计

    2.7K20

    Flutter】手机应用类型 ( Android | iOS | Native 应用 | Web 应用 | Hybrid 应用 | ReactNative 应用 | Flutter 应用 )

    WebView / 浏览器 在 Android / iOS 手机中展示网页 , 如 PhoneGap 技术 , 该技术属于网页前端开发 , 会绘制渲染效率受 WebView浏览器内核 限制 ;...开发使用技术就是网页前端相关技术 , JavaScript + HTML5 + CSS ; 写出移动端页面在浏览器 / WebView 上运行 ; 浏览器WebView 性能不是很高 , 优化到极限...缺点 : 性能低 , 受浏览器 / WebView 性能限制 资源在服务器 , 受网络限制 无法访问原生设备 , 如摄像头 , 蓝牙 , 传感器 等 无法访问本地文件 , 如数据库 , SD 卡 ,..., 这种性能就比调用 WebView浏览器性能高 ; 使用 JavaScript 写出代码 , 编译时 , 编译成 Android / iOS 原生组件 , 不同平台原生组件表现出来是有差异...--- Flutter 特点 : 使用了跨平台绘制引擎 Skia , 可以在不同平台 , 生成表现相同程序 , 各个平台展示效果基本没有差异 , 不需要进行兼容处理 ; Flutter 渲染性能很高

    1.6K30

    跨平台解决方案技术分析

    、头条之于资讯创作、美团之于生活服务等等不一足。...Web 渲染方案本质上是依托原生应用内嵌浏览器控件 WebView 去渲染 H5 页面,因此 h5 App 渲染流水线和 Web 页面渲染相一致,能力也局限在 WebView 这一沙箱。...上面所描述是最为原始 Web 渲染方案,在这基础上业内又提出 h5 容器技术解决方案,h5 容器提供丰富内置 JSAPI,增强版 WebView 控件以及插件机制等能力,对原始版本方案做了进一步功能高聚和模块低耦合...,直接从底层渲染上实现 UI 绘制, Flutter 就是跨平台、自渲染代表。...Framework 层 内置基础 Flutter 组件,并根据不同平台视觉风格体系,封装 Material 和 Cupertino 两套 UI 库供上层使用 Flutter Engine 层 Flutter

    1.4K20
    领券