Flutter Web

介绍

Flutter Web 是Flutter 新版本 stable1.9 的重磅发布的， 它已经合并到 Flutter master 分支。这意味着我们可以真正地使用一套代码、一套资源部署大前端。

环境配置

1、 查看你电脑上的 Flutter 在哪个 Channel 上，指令是：$flutter channel ，结果显示如下：

$flutter channel 指令执行结果

从上图看到我的 Flutter 的 Channel 是在 *** master *** 上，所以不要在切换。否则要执行 $flutter channel master 进行 Channel 的切换。

2、进行Flutter 的 grade 的更新，保持最新；指令是：$flutter upgrade ；该指令有可能运行时间较长，请耐心等待。如果报错请考虑翻墙 或者 更换镜像等。更新完毕后如下图所示：

$flutter upgrade 指令执行结果

3、让 Flutter 支持 Web ，需要在终端执行 $flutter config --enable-web 指令，执行后显示如下：

$flutter config --enable-web 执行结果

      如果要查看是否配置成功（都是成功的☺），请执行 $flutter config ,结果如下：

$flutter config 查看配置

4、在终端 cd 到构建目录下，执行$flutter create flutterapp ,创建项目flutterapp, 如下图所示：

$flutter create flutterapp 执行结果

5、然后在 cd 到 flutterapp 的根目录执行 $flutter run -d chrome, 指令过程如下：

$flutter run -d chrome 指令

执行完成后，你电脑上的 chrome 浏览器就会打开，如下图：

image.png

Flutter Web 项目结构

项目的目录结构如下：

Flutter Web 项目目录

从上图我们看到 Flutter Web 项目比不支持的Flutter 项目多了一个 web 目录。如上图红色框内的内容。 下个文章介绍 Flutter Web 项目某些文件的作用。