当前位置: 首页 > news >正文

【Flutter】Flutter Web 开发 如何从 URL 中获取参数值

【Flutter】Flutter Web 开发 如何从 URL 中获取参数值

文章目录

    • 一、前言
    • 二、Flutter Web 中的 URL 处理
    • 三、如何从 URL 中获取参数
    • 四、实际业务中的用法
    • 五、完整示例
    • 六、总结

一、前言

大家好!我是小雨青年,今天我想和大家分享一下在 Flutter Web 开发中,如何从 URL 中获取参数值。我们都知道,在 Web 开发中,经常会遇到需要从 URL 中获取某些参数值的情况,比如 token、用户 ID 等。那么在 Flutter Web 中,我们应该如何做呢?本文将为大家详细解答这个问题。

本文的重点有:

  • Flutter Web 中的 URL 处理机制
  • 如何从 URL 中获取参数值
  • 实际业务中如何应用

希望大家能够通过本文,对 Flutter Web 的 URL 处理有更深入的了解。

🎯 对 Flutter 有兴趣吗?🚀 Flutter 从零到一:基础入门到应用上线全攻略 正在火热进行中!而我,点击这里了解我

📚 从 Flutter 基础到进阶技巧,这里都有你想要的。
🔥 内容持续更新,价格也在涨。现在加入,先入为主!

🤝 想和其他 Flutter 爱好者一起聊聊?👉 点这里,我们在讨论群等你

⏰ 别犹豫了,一起来学 Flutter 吧!

二、Flutter Web 中的 URL 处理

首先,我们需要了解 Flutter Web 是如何处理 URL 的。在 Flutter Web 中,我们可以使用 dart:html 这个库来处理与 Web 相关的操作。而对于 URL 的处理,我们主要会用到 window.location 这个对象。

window.location 对象表示当前文档的 URL,它有很多属性和方法,可以帮助我们获取和操作 URL。比如,我们可以使用 window.location.href 来获取当前页面的完整 URL,使用 window.location.search 来获取 URL 中的查询字符串等。

三、如何从 URL 中获取参数

获取 URL 中的参数,其实就是解析查询字符串。查询字符串是 URL 中 ? 后面的部分,它由一系列的键值对组成,每个键值对之间用 & 分隔。

在 Flutter Web 中,我们可以使用以下方法来获取 URL 中的参数:

  1. 使用 window.location.search 获取查询字符串。
  2. 使用正则表达式或字符串处理方法,解析查询字符串,获取我们需要的参数值。

例如,我们想要获取 URL 中的 token 参数值,可以使用以下代码:

String? getTokenFromUrl() {String search = window.location.search;if (search.startsWith('?')) {search = search.substring(1);}for (var part in search.split('&')) {var split = part.split('=');if (split.length == 2 && split[0] == 'token') {return split[1];}}return null;
}

四、实际业务中的用法

在实际的业务开发中,我们可能会遇到各种场景需要从 URL 中获取参数。例如,当用户点击一个带有 token 的链接登录时,我们需要从 URL 中获取这个 token,然后使用它来验证用户的身份。

考虑以下场景:用户在电子邮件中收到一个链接,点击该链接后会跳转到我们的 Flutter Web 应用,并带有一个 token 参数。我们的任务是获取这个 token,并使用它来自动登录用户。

首先,我们可以在应用的入口处,使用之前的 getTokenFromUrl 函数来获取 token:

void main() {final token = getTokenFromUrl();if (token != null) {// 使用 token 进行登录操作loginUserWithToken(token);} else {// 正常启动应用runApp(MyApp());}
}

这样,当用户点击带有 token 的链接时,我们的应用会自动获取这个 token,并尝试使用它来登录用户。

五、完整示例

import 'dart:html';
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {final token = getTokenFromUrl();return MaterialApp(title: 'Flutter Web URL 参数示例',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(token: token),);}
}class MyHomePage extends StatelessWidget {final String? token;MyHomePage({Key? key, this.token}) : super(key: key);Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Flutter Web URL 参数示例'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('从 URL 中获取到的 token 值为:',),Text(token ?? '无',style: Theme.of(context).textTheme.headline4,),],),),);}
}String? getTokenFromUrl() {String search = window.location.search;if (search.startsWith('?')) {search = search.substring(1);}for (var part in search.split('&')) {var split = part.split('=');if (split.length == 2 && split[0] == 'token') {return split[1];}}return null;
}

当我们访问 http://localhost:55297/?token=CSDN_xiaoyuqingnian 时,运行结果如下所示:

可以看到我们已经拿到了 url 中参数的值。

这是小雨青年于 2023 年发布在 CSDN 的博客,由于目前采集站侵权行为猖獗,如果你不是在 CSDN 看到本文,麻烦你通过 CSDN 联系我,谢谢你的支持。

六、总结

在本文中,我们学习了如何在 Flutter Web 开发中从 URL 中获取参数值。通过简单的代码示例,我们了解了如何使用 dart:html 库来处理与 Web 相关的操作,并获取 URL 中的参数。

🎓 Flutter 吸引你了吗?👉 Flutter 从零到一:基础入门到应用上线全攻略 带你飞。如果你想了解这个专栏背后的我,点这里看看我的故事

📘 这里有你想要的 Flutter 资源,代码示例,还有深度解读。
🛠️ Flutter 的小技巧、大窍门,都在这里分享。
💰 内容在更新,价格也在涨。赶紧加入,第一时间体验!

🔍 想深入了解 Flutter?👉 Flutter Developer 101:入门小册 & 专栏指引

👥 快来和我们一起交流!👉 讨论群在这里,和大家一起进步!

相关文章:

【Flutter】Flutter Web 开发 如何从 URL 中获取参数值

【Flutter】Flutter Web 开发 如何从 URL 中获取参数值 文章目录 一、前言二、Flutter Web 中的 URL 处理三、如何从 URL 中获取参数四、实际业务中的用法五、完整示例六、总结 一、前言 大家好&#xff01;我是小雨青年&#xff0c;今天我想和大家分享一下在 Flutter Web 开发…...

【Java 进阶篇】JDBC Statement:执行 SQL 语句的重要接口

在Java应用程序中&#xff0c;与数据库进行交互是一项常见的任务。为了执行数据库操作&#xff0c;我们需要使用JDBC&#xff08;Java Database Connectivity&#xff09;来建立与数据库的连接并执行SQL语句。Statement接口是JDBC中的一个重要接口&#xff0c;它用于执行SQL语句…...

Python与数据分析--Pandas操作进阶

目录 1.文件读取方式 1.1.绝对路径读取文件 1.2.相对路径读取文件 2.列表数据操作 2.1.列索引指定 2.2.代码数据对齐 3.创建新CSV文件 4.缺失值处理 4.1.缺失值创建 4.2.缺失值检索 4.3.缺失值查询 4.3.1.isnull()函数判断 4.3.2.notnull()函数判断 4.3.3.any()函数…...

国庆小练习

一、二、三 一、 创建一个双向链表&#xff0c; 将26个英文字母通过头插的方式插入到链表中 通过尾删的方式将数据读取出来并删除。main.c #include <my_head.h> #include "dblink.h"int main(int argc, const char *argv[]) {dblink *h create_head();for…...

springboot单体项目如何拆分成微服务

要将一个Spring Boot单体项目拆分成微服务&#xff0c;可以按照以下步骤进行操作&#xff1a; 识别业务域&#xff1a;首先&#xff0c;需要对单体项目进行业务域的划分。将项目中的功能按照业务领域进行分类&#xff0c;每个业务领域可以成为一个独立的微服务。 定义服务接口…...

解决recovery页面反转的问题

1.前言 在android 10.0的系统rom定制化开发工作中&#xff0c;在系统中recoverv的页面也是相关重要的一部分&#xff0c;在系统recovery ta升级等功能&#xff0c;都是需要recoverv功能的&#xff0c;在某些产品定制化中 在recovery的时候&#xff0c;发现居然旋转了180度&…...

如何使用nuScenes数据集格式的单帧数据推理(以DETR3D为例)

【请尊重原创&#xff01;转载和引用文章内容务必注明出处&#xff01;未经许可上传到某文库或其他收费阅读/下载网站赚钱的必追究责任&#xff01;】 无论是mmdetection3D还是OpenPCDet都只有使用数据集(使用哪个数据集由配置文件里指定)训练和测试的代码&#xff0c;没有使用…...

大语言模型之十三 LLama2中文推理

在《大语言模型之十二 SentencePiece扩充LLama2中文词汇》一文中已经扩充好了中文词汇表&#xff0c;接下来就是使用整理的中文语料对模型进行预训练了。这里先跳过预训练环节。先试用已经训练好的模型&#xff0c;看看如何推理。 合并模型 这一步骤会合并LoRA权重&#xff0…...

iOS AVAudioSession 详解

iOS AVAudioSession 详解 - 简书 默认没有options&#xff0c;category 7种即可满足条件 - (BOOL)setCategory:(AVAudioSessionCategory)category error:(NSError **)outError API_AVAILABLE(ios(3.0), watchos(2.0), tvos(9.0)) API_UNAVAILABLE(macos); 有options&#xff…...

26-网络通信

网络通信 什么是网络编程&#xff1f; 可以让设备中的程序与网络上其他设备中的程序进行数据交互&#xff08;实现网络通信的&#xff09;。 java.net.包下提供了网络编程的解决方案&#xff01; 基本的通信架构有2种形式&#xff1a;CS架构&#xff08; Client客户端/Server服…...

嵌入式Linux应用开发-基础知识-第十九章驱动程序基石③

嵌入式Linux应用开发-基础知识-第十九章驱动程序基石③ 第十九章 驱动程序基石③19.5 定时器19.5.1 内核函数19.5.2 定时器时间单位19.5.3 使用定时器处理按键抖动19.5.4 现场编程、上机19.5.5 深入研究&#xff1a;定时器的内部机制19.5.6 深入研究&#xff1a;找到系统滴答 1…...

一文拿捏SpringMVC的调用流程

SpringMVC的调用流程 1.核心元素&#xff1a; DispatcherServlet(前端控制器)HandlerMapping(处理器映射器)HandlerAdapter(处理器适配器) ---> Handler(处理器)ViewResolver(视图解析器 )---> view(视图) 2.调用流程 用户发送请求到前端控制器前端控制器接收用户请求…...

一文详解 JDK1.8 的 Lambda、Stream、LocalDateTime

Lambda Lambda介绍 Lambda 表达式(lambda expression)是一个匿名函数&#xff0c;Lambda表达式基于数学中的λ演算得名&#xff0c;直接对应于其中的lambda抽象(lambda abstraction)&#xff0c;是一个匿名函数&#xff0c;即没有函数名的函数。 Lambda表达式的结构 一个 Lamb…...

WebSocket实战之二协议分析

一、前言 上一篇 WebSocket实战之一 讲了WebSocket一个极简例子和基础的API的介绍&#xff0c;这一篇来分析一下WebSocket的协议&#xff0c;学习网络协议最好的方式就是抓包分析一下什么就都明白了。 二、WebSocket协议 本想盗一张网络图&#xff0c;后来想想不太好&#x…...

LeetCode //C - 208. Implement Trie (Prefix Tree)

208. Implement Trie (Prefix Tree) A trie (pronounced as “try”) or prefix tree is a tree data structure used to efficiently store and retrieve keys in a dataset of strings. There are various applications of this data structure, such as autocomplete and s…...

【Python】time模块和datetime模块的部分函数说明

时间戳与日期 在说到这俩模块之前&#xff0c;首先先明确几个概念&#xff1a; 时间戳是个很单纯的东西&#xff0c;没有“时区”一说&#xff0c;因为时间戳本质上是经过的时间。日常生活中接触到的“日期”、“某点某时某分”准确的说是时间点&#xff0c;都是有时区概念的…...

Python 无废话-基础知识元组Tuple详讲

“元组 Tuple”是一个有序、不可变的序列集合&#xff0c;元组的元素可以包含任意类型的数据&#xff0c;如整数、浮点数、字符串等&#xff0c;用()表示&#xff0c;如下示例&#xff1a; 元组特征 1) 元组中的各个元素&#xff0c;可以具有不相同的数据类型&#xff0c;如 T…...

【Win】Microsoft Spy++学习笔记

参考资料 《用VisualStudio\Spy查窗口句柄&#xff0c;监控窗口消息》 1. 安装 Spy是VS中的工具&#xff0c;所以直接安装VS就可以了&#xff1b; 2. 检查应用程序架构 ChatGPT-Bing: 对于窗口应用程序分析&#xff0c;确定应用程序是32位还是64位是很重要的&#xff0c;因…...

如何解决版本不兼容Jar包冲突问题

如何解决版本不兼容Jar包冲突问题 引言 “老婆”和“妈妈”同时掉进水里&#xff0c;先救谁&#xff1f; 常言道&#xff1a;编码五分钟&#xff0c;解冲突两小时。作为Java开发来说&#xff0c;第一眼见到ClassNotFoundException、 NoSuchMethodException这些异常来说&…...

数据结构—归并排序-C语言实现

引言&#xff1a;归并排序跟快速排序一样&#xff0c;都运用到了分治的算法&#xff0c;但是归并排序是一种稳定的算法&#xff0c;同时也具备高效&#xff0c;其时间复杂度为O(N*logN) 算法图解&#xff1a; 然后开始归并&#xff1a; 就是这个思想&#xff0c;拆成最小子问题…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

鸿蒙(HarmonyOS5)实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

图解JavaScript原型:原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...