开启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是否是上面的格式,那么最好不要解析它或者一定添加异常判断。