使用Flutter开发Web应用

在Google IO 2019开发者大会上，Flutter和Dart发表了超越移动端，为iOS，Android，ChromeOS和Web构建应用的主题演讲。

时至今日，想必Flutter已经可以开发Web应用了。

我们知道Flutter是使用叫Skia的C++库来渲染UI，但是Web上是使用Dom，Canvas，以及WebGL，那么Flutter到底会采用哪种方式呢？

这篇文章带你对Flutter for web做一个了解和实践：

架构设计

原理

目前联合了DOM, Canvas, CSS来进行渲染，将Dart代码编译为JavaScript来执行，这跟Typescript，Kotlin都是一样的。

目前进度

截至今天（2019年7月25日）Flutter for Web还处于技术预览的阶段，还很不稳定。

开发团队创建了一个Frok，但最终这些代码将会被merge到https://github.com/flutter/flutter中。

环境安装

1. 安装Dart
2. 安装Flutter，Flutter 1.5 以上就可以支持以web作为target平台，我这里安装的是1.7.8。
3. 安装webdev，通过flutter pub global active webdev全局安装webdev工具包。
4. 为了能够全局执行webdev命令，建议将flutter/.pub-cache/bin目录添加到path环境变量中。

Hello World

克隆https://github.com/flutter/flutter_web

$cd examples/hello_world/
$flutter pub upgrade
$webdev serve

打开http://localhost:8080，你就能看到红色的HelloWorld

经过测试，在Edge浏览器会报错，目前只在Chrome中支持比较好。

新建一个项目

虽然未来的目标是用同一套代码来生成移动端和Web端，但目前的开发使用了不同的命名空间，所以还无法同时进行移动端和web端开发。

新建的Flutter工程最简单的方式是使用IDE

• VScode： 使用View->Command Paltte->Flutter: New Web Project。
• IntelliJ：新建Dart项目，选择Flutter for web模板。