Flutter web 环境配置&项目创建

话不多说，flutter 支持web已经有一段时间了。最近因为单位有web需求，本身我是做iOS的，对web的熟悉程度还不及Flutter,并且单位的需求，不一定会用在生产环境之中，遂决定采用还在beta中的flutter web进行开发。

环境配置

1.安装flutter环境

flutterchina.club/get-started…

这里我就不再赘述了。

2.创建一个支持 web 的新项目

当前，需要 master 或者 dev 渠道的的 Flutter SDK 来获取 Web 支持：这里我们假定你已经安装了 Flutter 命令行工具，运行下面的命令需要安装 master 渠道最新的 SDK 噢： 你可以通过以下步骤创建一个支持 web 的新项目。

• tips:基本上都是在git上的操作，有可能会非常的慢，这里提供一下可能有用的办法。摘取自这位

Git 很慢的解决方法(或许有用)

$ sudo vi /private/etc/hosts
打开后就进入编辑器，可移动最后一行，按下键盘上的“o”键，
会跳转到下一行的输入状态。这样就可以开始编辑hosts文件了

复制下面的粘贴进hosts即可
151.101.76.249 github.global.ssl.fastly.net
192.30.253.112 github.com

编辑好hosts文件，按下键盘“Esc”按键，输入“:wq”将会自动保存，
就可以结束编辑器。

2.1 使用最新的beta频道中的Flutter SDK，并开启web支持

$ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web
$ flutter devices

这个过程可能会非常的缓慢。 过程情况大概如下图

flutter channel beta

切换到新的分支代表第一步成功 flutter upgrade

flutter config --enable-web

flutter devices

当看到chrome的时候，代表我们可以开干了。

新建项目

经过一天的查找资料，发现网上能找到的资料，可以说是千奇百怪。

有的通过VSCode 执行 Flutter:New Web Project

有的通过Android Studio 创建flutter 项目再手动连接。这个方式我看着非常的特殊，但是感觉又十分的繁琐。

更有甚者拿着已经被搬运走的flutter_web说事。

着实是搞得我非常难受。

最后还是通过神奇的上网方式，找到了正确的姿势，根本不需要那么繁琐（ 上面的那些情况，我想都是受到频繁更新的影响导致的）。

跟着我一步一步做。

$ cd 你要放项目的目录
$ flutter create 项目名
$ cd 项目名
$ flutter run -d chrome

这时候，会自动打开chrome，自动访问 http://localhost:60700/#/

虽然网上好多说只支持Chrome，但是我把地址复制到Safari一样可以访问，并且暂时来说显示没什么问题。

Chrome

Safari

要说区别的话，可能Safari加载相对比较慢(暂时毕竟才刚开始)。