Flutter Web 评测第二篇

文章目录

本篇只是的补充

介绍一些当前的 flutter_web 版和 flutter 的移动版的差别

dart:io 包无法使用造成的影响

dart:io是一个在 flutter 中常用的包,但是在 web 版中是使用不了的

dio 不能用

dio包用不了,因为 dio 包是依托于 dart:io 包中的 HttpClient 进行的封装

并且因为国内很多初学者朋友人云亦云的选择了 dio 作为 http 的请求框架,所以今后如果有打算想要做 flutter_web 版的朋友可能现在就要考虑一下 dio 的使用问题了

当然 dio 包今后也可以迁移底层访问库为,再进行二次封装形成 dio_with_http 那就是另一个故事了

另外 web 中的 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  }

以上的代码反馈回来是这样的

20190513150611.png

使用 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  }

截图是这样的

20190514091204.png


在 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>

然后重新运行代码,得到的是这样的

20190513164555.png

接着修改 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 元素, 然后将数字设置为当前的数字

Kapture 2019-05-13 at 16.49.06.gif

关于这个包的具体使用请查看 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  }

这样点击这个按钮后可以看到

20190513174110.png

结尾

本篇粗略介绍了一些上篇没有介绍完整的东西

仓库和上一篇相同: 查看

以上