flutter 检测 url 并显示预览

2024-05-07

我正在尝试制作一个类似于 wats-app 的链接预览功能,它有两个部分,

  1. 从文本字段检测 URL
  2. 显示该 URL 的预览

第 2 部分有很多插件可以显示预览,但我一直坚持第 1 部分,即如何检测和解析用户在文本字段中输入的 URL。

还有一个插件可以同时服务这两者吗?


检测字符串/段落中的 URL 并将其转换为 DART 中的链接:

//
String convertStringToLink(String textData) {
  // 
  final urlRegExp = new RegExp(
  r"((https?:www\.)|(https?:\/\/)|(www\.))[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9]{1,6}(\/[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)?");
  final urlMatches = urlRegExp.allMatches(textData);
  List<String> urls = urlMatches.map(
          (urlMatch) => textData.substring(urlMatch.start, urlMatch.end))
      .toList();
  List linksString = [];
  urls.forEach((String linkText){
    linksString.add(linkText);
  });

  if (linksString.length > 0) {
    linksString.forEach((linkTextData) {
      textData = textData.replaceAll(
          linkTextData,
          '<a href="' +
              linkTextData +
              '" target="_blank">' +
              linkTextData +
              '</a>');
    });
  }
  return textData;
}

演示以及如何调用

String text = "This is my website url: https://github.com/ Google search using: www.google.com, Flutter url: http://example.com/method?param=flutter stackoverflow website url is https://www.stackoverflow.com is greatest website and also check this hashed url https://support.google.com/firebase?authuser=0#topic=6399725";

print(convertStringToLink(text));

Output:

This is my website url: <a href="https://github.com/" target="_blank">https://github.com/</a> Google search using: <a href="www.google.com" target="_blank">www.google.com</a>, Flutter url: <a href="http://example.com/method?param=flutter" target="_blank">http://example.com/method?param=flutter</a> stackoverflow website url is <a href="https://www.stackoverflow.com" target="_blank">https://www.stackoverflow.com</a> is greatest website and also check this hashed url <a href="https://support.google.com/firebase?authuser=0#topic=6399725" target="_blank">https://support.google.com/firebase?authuser=0#topic=6399725</a>

它对我有用,肯定会帮助我的朋友:)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

flutter 检测 url 并显示预览 的相关文章

  • 必须提供一个函数体。尝试添加函数体

    我自己写的 因为statefulwidget没有自动创建模式 并且在 7 个不同的错误中我无法修复这个问题 import package flutter material dart class NaberMain extends State
  • 期待活页夹但得到空

    尽管一切正常 但我在日志中收到此消息 W Parcel Expecting binder but got null 有人遇到过这样的问题吗 如何解决 重现步骤 只需创建一个新的 Flutter 项目并在模拟器 仿真器上运行它 查看日志 您将
  • 颤振接触选择器

    我在我的 flutter 应用程序中使用 contact picker 来从手机联系人中获取联系人 当我单击电话簿中的联系人姓名时 应用程序崩溃 这是代码 import package flutter material dart impor
  • 测试奖励广告未显示 - 广告加载失败:LoadAdError(代码:3,域:com.google.android.gms.ads,消息:无广告配置。)

    我目前无法展示测试奖励广告 我正在使用激励广告Sample ad unit ID中提供的doc https developers google com admob android test ads ca app pub 3940256099
  • 设置 Flutter 底部导航栏不活动

    我有一个带有底部导航栏的应用程序 BottomNavigationBar type BottomNavigationBarType fixed items BottomNavigationBarItem icon Image asset a
  • 使用 Swift 和 Kotlin 重新创建 Flutter 的 ios 和 android 文件夹

    您好 我刚刚发现可以使用 Swift 和 Kotlin 创建 Flutter 项目 但是 我已经投资了当前的项目 并希望重新创建ios and android如 Swift 和 Kotlin 目前默认为 Java 和 ObjC Thanks
  • 日期时间时区反序列化

    我为我的应用程序开发了一个 Rest API 它以以下格式发送到应用程序日期2018 09 07T17 29 12 02 00 我猜 2 00 代表我的时区作为一个对象的一部分 在我的 Flutter 应用程序中 一旦我反序列化接收到的对象
  • 使用 Dio download 下载大视频会导致内存不足

    我正在尝试制作一个具有从 url 下载视频功能的 flutter 应用程序 并且视频预计会很大 至少 1 到 2 小时的 720p 我为此使用了 Dio 但它尝试将完整的视频存储在 RAM 中 这会导致内存不足错误 这是我使用的代码 有什么
  • 避免在 Flutter Web 插件包之外使用纯 Web 库

    我正在构建一个 Flutter 应用程序 并尝试在网络上运行 其中一部分包含一些特定于网络的代码 import dart html as html import package flutter foundation dart class D
  • flutter 聊天应用程序上的消息顺序不正确

    我刚刚根据教程完成了一个基本的聊天应用程序 新消息应该显示在底部 但这种情况没有发生 当我删除 保存并再次添加时reversed排队 final messages snapshot data documents reversed 然后它似乎
  • Flutter sqflite 插入列表

    我正在尝试将列表插入到 flutter 中的 sql 数据库中 但我不知道该怎么做 有人可以帮助我吗 当我初始化 mi 数据库时 我有这个 Directory documentsDirectory await getApplicationD
  • “@required”注释作为错误而不是警告

    现在在我的 Flutter 项目中 当我用注释构造函数参数时 required当实例化构造函数时忘记它 我从 IDE 收到一条轻微警告 表明该参数是必需的 我希望这在 IDE 中显示为实际错误 有办法进去吗analysis options
  • Flutter:列表已弃用? [复制]

    这个问题在这里已经有答案了 升级到最新版本的 flutter 后 我的所有列表都收到弃用警告 List
  • 如何实现Tabbar中每个选项卡的搜索动作

    我有一个页面 TabBar 中有 2 个选项卡 如下所示 class SearchByCityOrPerson extends StatefulWidget SearchByCityOrPerson Key key this title s
  • 获取外部存储的权限(file_provider 插件)

    我在使用 flutter 获取 Android 设备上的外部存储权限时遇到一些问题 当我尝试在外部存储中创建目录时 出现此错误 我只是为此示例更改了目录 在我自己的项目中 目录名称不同 I flutter 12727 EXCEPTION C
  • Flutter 图像选择器明确请求许可

    图像选择器包说 无需配置 该插件应该开箱即用 不再需要添加 android requestLegacyExternalStorage true 作为属性 AndroidManifest xml 中的标记 如 image picker 所示
  • 在 flutter 中创建图像蒙版

    Flutter 提供了多种基于路径 即剪辑路径 的遮罩方法 我正在尝试找出一种方法 可以拍摄具有透明层的图像 如下例所示 并使用该图像来掩盖另一个图像 视图或作为通用蒙版 我的第一直觉是看自定义Paint类 https api flutte
  • 无法打开文件,路径='file:///path'(操作系统错误:没有这样的文件或目录,errno = 2)

    您好 我正在尝试使用图像库减小从图库中选取的图像大小 在尝试时我面临这样的错误 E flutter 13796 ERROR lib tonic logging dart error cc 16 Unhandled exception E f
  • 无法更改 OutlinedButton 中的边框颜色

    我正在尝试改变我的边界OutlinedButton in my main dart但它似乎不起作用 我环顾四周 似乎我需要添加BorderSide 这就是我的outlinedButtonTheme好像 outlinedButtonTheme
  • Flutter 错误:找不到正确的 ScopedModel

    我正在尝试在我的 flutter 项目中创建一个范围模型 但我似乎无法弄清楚为什么会出现错误 这个作用域模型实现有什么问题 我有一个带有底部导航器的主页 在个人资料选项卡中 我在树深处的小部件中获取了我需要的关注者列表 因此我尝试使用sco

随机推荐