随着Flutter1.9版本在上海宣布发布，Flutter对web的支持也合并到Flutter主仓库。终于不需要修改包名了。 现在是完全基于同一份codebase。Flutter1.9的其他一些新特性可以看这里：https://developers.googleblog.com/2019/09/flutter-news-from-gdd-china-flutter1.9.html。
Dynamic Widget 是一个后端驱动的动态UI库，通过json描述你的Flutter页面，这个json基本上跟flutter widget代码是一样的，所以如果你知道Flutter widget怎么写，你也就知道json怎么写。很久没有看了，现在发现已经有了250个星星。这次Flutter1.9对web支持了，自然会想让Dynamic widget也支持web。
首先需要让dynamic widget项目支持web application，你需要按照https://flutter.dev/docs/get-started/web步骤一步一步来。
1、切到flutter master channel分支，执行以下命令：
flutter channel master
flutter upgrade
这里要注意，需要翻墙才行。
2、激活flutter对web的支持，执行以下命令：
flutter config --enable-web
3、进入项目工程目录，让项目支持web，执行以下命令：
cd <into project directory>
flutter create .
4、运行web项目。
flutter run -d chrome
到第四步的时候，你会觉得原来世界这么美好，这么简单的4步就加上对web的支持。当你带着微笑在command上按下flutter run -d chrome这一刻，Google chrome起来的时候，你内心肯定是非常愉悦的。但是在等待一两分钟之后你会发现Google Chrome还是一片白屏，然后切到command，你发现有打印如下的log：
not support
WTF！说好的幸福呢，看这个log，应该是我们代码依赖在web平台上不支持，所以停止了编译。具体哪个依赖并没有直接支持，只是告诉了我们下面的几个dart文件里面有。没有关系，把这个log贴到google上，做了一些排查后发现，原来是import 'dart:io';在web平台不支持，我的代码里面只是用到dart:io发了网络请求而已，dart自己的内部的库都不支持，看了flutter的这个issue说是要用http package来做网络请求。
改成使用http库来做网络请求后，赶紧切到command上，小心翼翼的打上flutter run -d chrome，怀着忐忑的心慢慢的按下Enter。静静的看了command上的log。我操，log没打印出错误呀，怎么还是白屏？
白屏
在command上按下ctrl + c，然后输入flutter run -d chrome -v。多加个-v看看详细日志。好了，这次知道为什么是白屏了，原来是404，但是我怎么知道为什么404呀，我又不清楚dart编译成js是怎样的过程，没办法继续Google，废了一杯咖啡的时间，终于找到一个类似的兄弟报了类似的问题。https://github.com/flutter/flutter/issues/40151，直接按照有点赞的兄弟方法搞一下。执行flutter run --release -d chrome -v，其实就加了个--release，这个是编译成release包？
yeah！没有404了，终于跑起来了。
done
Flutter支持web后，可以说目前来说已经几乎就是全端了，对桌面端的支持目前也在发力中。给大家看看同时运行在Android，iPhone和Web端情况，帅，再次希望Flutter能一统江湖。
三端统一
代码已经commit到https://github.com/dengyin2000/dynamic_widget的flutter-web-support分支，有兴趣的同学可以fork下。
Warning：目前flutter 1.9版本对web的支持还是处于非常早期阶段，会缺失一些功能，还有性能方面的问题，不建议用在生产环境。
Reference:
https://github.com/dengyin2000/dynamic_widget 大家高抬贵手star下呗
https://developers.googleblog.com/2019/09/flutter-news-from-gdd-china-flutter1.9.html
https://flutter.dev/docs/get-started/web
网友评论