flutter web 的使用

 flutter从1.9版本开始支持web，先上官方文档介绍：flutter.cn/docs/get-st…

一、升级flutter版本，支持web

如果长时间没有更新flutter版本，需要先更新brew文件

//国内镜像
cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"git remote set-url origin git://mirrors.ustc.edu.cn/homebrew-core.gitecho 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles' >> ~/.bash_profilesource ~/.bash_profilebrew update

//更新flutter 版本flutter upgrade

二、切换到beta渠道

从1.22版本，stable channel支持web，如果是1.22版本之上，可以不用切换channel

//切换渠道
flutter channel beta
flutter upgrade
//开启web支持
flutter config --enable-web

三、开启web支持

flutter config --enable-web

//验证已经开启，可以使用flutter devices 
//如果里面有chrome，即证明已经支持了web

四、对已有项目添加对web的支持

在已有项目下执行

flutter create.

创建新的flutter web项目

flutter create myapp
cd myapp

五、运行

flutter run -d chrome

六、构建发布

flutter build web

另外

web项目通常要解决跨域问题，可以启动一个dart来解决跨域

一个简单的例子如下

import 'package:shelf/shelf_io.dart' as shelf_io;import 'package:shelf_proxy/shelf_proxy.dart';//前端页面访问本地域名const String LocalHost = 'localhost';//前端页面访问本地端口号const int LocalPort = 4040;//目标域名，这里我们将要请求火狐的这个地址const String TargetUrl = 'http://127.0.0.1:5000/';Future main() async {  var server = await shelf_io.serve(    proxyHandler(TargetUrl),    LocalHost,    LocalPort,  );  // 添加上跨域的这几个header  server.defaultResponseHeaders.add('Access-Control-Allow-Origin', '*');  server.defaultResponseHeaders.add('Access-Control-Allow-Headers', '*');  server.defaultResponseHeaders.add('Access-Control-Allow-Credentials', true);  print('Serving at http://${server.address.host}:${server.port}');}