Flutter Web:获取设备信息、UA、窗口大小等

简介: 开启web支持首先我们要为Flutter安装web环境,通过下面命令:flutter pub global activate webdev //安装web开发环境然后为我们的Flutter项目开启web支持,通过下面的命令:flutter config --enable-web //启动支持webflutter config --enable-macos-desktop //启动mac支持flutter config --enable-windows-desktop //启用window支持

开启web支持


首先我们要为Flutter安装web环境,通过下面命令:

flutter pub global activate webdev //安装web开发环境

然后为我们的Flutter项目开启web支持,通过下面的命令: flutter config --enable-web //启动支持web

flutter config --enable-macos-desktop //启动mac支持

flutter config --enable-windows-desktop //启用window支持

这样当我们在Android Studio中打开这个Flutter项目后,在运行一栏中就会发现多了一个Chrome选项,运行就会自动开启一个chrome浏览器运行这个项目。


获取设备信息等


那么在Flutter Web项目中如何获取设备信息等常用信息呢?

首先


import 'dart:html';
复制代码


然后我们就可以使用window了,它对应的就是html中的window,可以通过它获取窗口大小,如:


window.innerWidth
window.innerHeight
复制代码


也通过window.navigator来获取信息,比如设备类型:


window.navigator.platform
复制代码


比如ua:


window.navigator.userAgent
复制代码


或者是否联网:


window.navigator.onLine
复制代码


这个navigator对应的就是html中的navigator,可以获取浏览器运行环境信息,它包括的信息很多,比如语言、内存、网络等等,具体可以看它的源码。


但是window.navigator.platform获取的只是设备类别,比如mac、windows这类的,具体系统版本(如win10)无法获取。但是在ua中一般会有系统信息,所以可以在ua中来获取出来,一般格式如下:


Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1


我们获取第一个括号里的信息即可,这里会包含设备和系统信息。但是注意ua的格式并不是固定的,而且可以自定义,如果无法判断ua是否是上面的格式,那么最好不要解析它或者一定添加异常判断。


目录
相关文章
|
4月前
|
Dart 前端开发 Java
|
4月前
|
前端开发 JavaScript Android开发
Flutter 调用本地 web
Flutter 调用本地 web
47 0
|
6月前
|
监控 Serverless 持续交付
阿里云云效产品使用问题之如何让流水线支持构建 flutter web 应用到 OSS
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
6月前
|
开发框架 Dart JavaScript
深入探讨Flutter中的Web支持功能,以及如何利用Flutter构建跨平台Web应用的最佳实践
【6月更文挑战第11天】Flutter,Google的开源跨平台框架,已延伸至Web支持,让开发者能用同一代码库构建移动和Web应用。Flutter Web基于Dart转JavaScript,利用WebAssembly和JavaScript在Web上运行。构建Web应用最佳实践包括选择合适项目、优化性能、进行兼容性测试和利用Flutter的声明式UI、热重载等优势。尽管性能挑战存在,Flutter Web为跨平台开发提供了更多机会和潜力。
105 1
|
5月前
|
机器人 开发工具 Android开发
flutter web 优化和flutter_admin_template
flutter web 优化和flutter_admin_template
|
6月前
|
移动开发 小程序 安全
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
|
6月前
|
Dart 前端开发 JavaScript
Flutter for Web:跨平台移动与Web开发的新篇章
Flutter for Web是Google的开源UI工具包Flutter的延伸,用于构建高性能、高保真的跨平台应用,包括Web。它基于Dart语言和Flutter的核心框架,利用Skia渲染引擎通过WebAssembly在Web上运行。开发流程包括安装SDK、创建项目、编写Dart代码和部署。性能优化涉及减少渲染开销、代码压缩等。与传统Web框架相比,Flutter for Web在开发效率和性能上有优势,但兼容性和生态系统尚待完善。
103 0
|
7月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter中的Web支持:构建跨平台Web应用
【4月更文挑战第30天】Flutter,Google的开源跨平台框架,已延伸至Web领域,让开发者能用同一代码库构建移动和Web应用。Flutter Web通过将Dart代码编译成JavaScript和WASM运行在Web上。尽管性能可能不及原生Web应用,但适合交互性强、UI复杂的应用。开发者应关注性能优化、兼容性测试,并利用Flutter的声明式UI、热重载等优势。随着其发展,Flutter Web为跨平台开发带来更多潜力。
151 0
【Flutter前端技术开发专栏】Flutter中的Web支持:构建跨平台Web应用
|
7月前
|
开发框架 Dart 前端开发
构建响应式Web界面:Flutter的跨界前端技术
【2月更文挑战第23天】随着移动互联网的飞速发展,响应式Web设计成为现代前端开发的重要趋势。在众多框架中,Google推出的Flutter以其高效的渲染性能、跨平台能力及丰富的组件生态,为前端开发者带来了新的选择。本文将深入探讨如何利用Flutter进行高效、美观的响应式界面构建,同时剖析其与传统前端技术的差异和优势。
|
7月前
|
Web App开发 Ubuntu 应用服务中间件
Flutter笔记:Web支持原理与实践
Flutter笔记:Web支持原理与实践
284 0