Flutter Web 评测第二篇
文章目录
本篇只是 上篇 的补充
介绍一些当前的 flutter_web 版和 flutter 的移动版的差别
dart:io 包无法使用造成的影响
dart:io是一个在 flutter 中常用的包,但是在 web 版中是使用不了的
dio 不能用
dio包用不了,因为 dio 包是依托于 dart:io 包中的 HttpClient 进行的封装
并且因为国内很多初学者朋友人云亦云的选择了 dio 作为 http 的请求框架,所以今后如果有打算想要做 flutter_web 版的朋友可能现在就要考虑一下 dio 的使用问题了
当然 dio 包今后也可以迁移底层访问库为 http ,再进行二次封装形成 dio_with_http 那就是另一个故事了
另外 web 中的 http 请求可以使用 dart:html 中的 HttpRequest
使用 http 库的访问如下:
1import 'package:http/http.dart' as http;
2Widget fromHttp() {
3 return FutureBuilder<http.Response>(
4 future: http.get("https://api.github.com/"),
5 builder: (BuildContext context, snapshot) {
6 if (!snapshot.hasData) {
7 return Container();
8 }
9 var body = snapshot.data.body;
10 return Text(body);
11 },
12 );
13 }
以上的代码反馈回来是这样的
使用 HttpRequest:
1import 'dart:html' as html;
2
3Widget buildWithHttpRequest() {
4 var req = html.HttpRequest.getString("https://api.github.com/");
5 return FutureBuilder<String>(
6 future: req,
7 builder: (BuildContext context, snapshot) {
8 if (!snapshot.hasData) {
9 return Container();
10 }
11 var body = snapshot.data;
12 return Column(
13 children: <Widget>[
14 Text("使用 HttpRequest 访问的 api"),
15 Text(body),
16 ],
17 );
18 },
19 );
20 }
截图是这样的
在 flutter_web 浏览器中需要注意的一点是, 无论你使用什么访问框架来访问 http,都会遇到跨域的问题, 跨域问题是一个经典的web前端开发问题, 搜索引擎中的解决方案和完善的说明有很多, 请自行理解
File 相关的 api 无法使用
在 flutter 移动版中,经常会遇到需要使用 File 来操作文件的情况,下载/读取文件都需要 File 的支持
Socket/WebSocket
前面说了 HttpClient 不能用,io 包中还包含 Socket/Websocket, 它们都是 dart:io 的类, 所以都无法使用
dart:html 包的使用
虽然不建议使用,但是这东西在 flutter_web 中是可用的
比如,我修改 web/index.html, 添加一个h1标签
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title></title>
6 <script defer src="main.dart.js" type="application/javascript"></script>
7 </head>
8 <body>
9 <h1 id="tmpId" style="float: left;position: fixed;z-index: 100;">你好</h1>
10 </body>
11</html>
然后重新运行代码,得到的是这样的
接着修改 dart 文件, 引入 html 包
1import 'dart:html' as html;
2
3 _buildHtmlFunWidget() {
4 return FlatButton(
5 child: Text("操作html元素"),
6 onPressed: () {
7 var e = html.window.document.getElementById("tmpId");
8 e.text = this.counter.toString();
9 },
10 );
11 }
这样就可以像传统的 js 一样操作 dom 元素, 然后将数字设置为当前的数字
这里是一个简单的使用说明 https://dart.dev/tutorials/web/low-level-html/connect-dart-html
js 包的使用
lib.js 文件:
1function addNumbers(a, b) {
2 return a + b;
3}
4
5function getFromJS() {
6 return '我是从js来的字符串';
7}
引入 js 文件
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title></title>
6 <script src="assets/lib.js"></script>
7 <script defer src="main.dart.js" type="application/javascript"></script>
8 </head>
9 <body>
10 <h1 id="tmpId" style="float: left;position: fixed;z-index: 100;">你好</h1>
11 </body>
12</html>
dart 文件
1@JS()
2library lib;
3
4import 'package:js/js.dart';
5
6@JS()
7external String getFromJS();
8
9@JS()
10external num addNumbers(num a, num b);
11
12void add1And2() {
13 print(addNumbers(1, 2));
14}
15
16String getJS() {
17 return getFromJS();
18}
dart 文件需要注意一点, 外部直接调用getFromJS方法,addNumbers方法会报错, 需要封装一层 dart 方法
dart 的 widget
1 _callJSMethodWidget() {
2 return FlatButton(
3 child: Text("点击"),
4 onPressed: () {
5 add1And2();
6 // print(getFromJS());
7 print(getJS());
8 },
9 );
10 }
这样点击这个按钮后可以看到
结尾
本篇粗略介绍了一些上篇没有介绍完整的东西
仓库和上一篇相同: 查看 example/helloworld 目录
以上