flutter web遇到的坑

第一次用flutter 开发web，遇到不少坑：

1.图片问题：Image.memory来加载图片会报错，估计是html5原生控件没有使用memory创建图片的接口吧。

2.WebAssembly使用有点复杂，c++的socket跟多线程在谷歌浏览器上不能使用的，只能用websocket。

3.使用vscode热更时间比较久，应该是dart转js，再同步到浏览器的过程太长。

4.文件不能本地缓存，只能通过下载。

5.每次运行都会再C:UsersadminAppDataLocalTemp目录下创建flutter_tools文件夹，并且关闭运行是不会删除，一直占用c盘空间

6.flutter web的运行原理是将dart语言转成js运行，js中并不支持int64数据类型。

7.因为js不支持int64，所以ByteData类的字节操作

getInt64和setInt64调用都会提示不支持，但是可以将int类型拆成高低各4个字节的int来写入或读取ByteData:

int readInt64([Endian endian]) {
    // bool res = _init(8);
    // if (!res) return 0;

    // final value = _data.getInt64(_offset, endian ?? this.endian);//js中不能使用getInt64
    // _offset += 8;
    // return value;

    int iLow = readInt32();
    int iHigh = readInt32();

    int value = iHigh >> 32;
    value |= iLow;
    return value;
  }

void writeInt64(int value, [Endian endian]) {
    // _init(8);
    // _data.setFloat64(_offset, value.toDouble(), endian ?? this.endian);js中不能使用setInt64
    // _offset += 8;

    writeInt32(value);
    int iHigh = value >> 32;
    writeInt32(iHigh);
  }

以上方法只针对常用的小端格式写入，大端格式可以仿照。

 8.开发过程http访问有跨域问题，需要本地搭建代理服务器。

我的代理服务器使用dart开发：

const String LocalHost = 'localhost';
 
Future main() async {
  Cors.url.forEach((url, port){
     var server =  shelf_io.serve(
      proxyHandler(url),//url是代理的链接
      LocalHost,
      port,//port是开启的代理端口
    );

    server.then((value){
          // 添加上跨域的这几个header
      value.defaultResponseHeaders.add('Access-Control-Allow-Origin', '*');
      value.defaultResponseHeaders.add('Access-Control-Allow-Credentials', true);

      print('Serving at ${url} => port: ${port}');
    });
  });
 
}

 转载请注明出处，from 博客园HemJohn