Flutter for web 开发从零到踩坑01---搭建开发

前言：

2019年9月，谷歌开发者大会正式发布了Flutter 1.9版本，正式将flutter_web 合并到了 flutter master 上，从此Flutter 移动端和Web项目不用再费老劲建两个项目，说简单点，就是移动端的项目代码可以直接用来运行在浏览器上（注：当然，flutter对web项目的支持还不完善，有些移动端的库在web上是不能用的，比如强大的dart:io，但这并不影响我们实现一些相对简单的功能），这也是一个优化之后的版本，不像之前 flutter_web,连Icon显示的都是小方块，鄙人也是边学边写，有写的不对的地方，欢迎大家评论指出。

-----（鄙人使用的是Mac OS系统）-----

-----（目前flutter for web 只支持在Chrome(谷歌浏览器)进行调试）-----

废话不说，直接来看如何搭建 flutter web 项目的开发环境：

一.如果之前有移动端的Flutter项目，那么在终端执行：

flutter create .       // 添加 web 环境，不要忘了最后的那个 . 符号
flutter config --enable-web      // 启用 web 支持
flutter devices        // 查看支持的设备列表，如果看到chrome（谷歌浏览器），说明开启成功
flutter run -d chrome   // 运行项目在Chrome上（有的时候可能需要先打开Chrome）

二.如果之前没有写过移动端flutter项目，不要紧，接下来是详细的搭建步骤(一行一行敲就行)：

git clone -b beta https://github.com/flutter/flutter.git     // 拉取 flutter 框架代码
export PUB_HOSTED_URL=https://pub.flutter-io.cn      //  设置国内镜像
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn   //
export PATH=`pwd`/flutter/bin:$PATH      //
source ~/.bashrc  // 让配置立即生效
cd./flutter     //进入flutter文件夹
flutter doctor  // 执行诊断， 如果不行，就执行 sudo flutter doctor  

执行 doctor 的时候可能出现一些报错的情况，例如哪些工具（Xcode，Android studio ）没有安装,如果是移动端的项目，就需要都安装上，但只是 Web 项目的话，可以不用安装移动端需要的工具，例如下图所示： flutter doctor 命令执行结果

上图中表示Flutter 已经安装成功，可以开发Web项目了，但是移动端的还不行，后期会专门出一篇文章解决移动端环境的配置。

下面创建并运行项目：

flutter create 你的项目名    //创建项目，名字自己起
cd 你的项目名 //进入文件夹
flutter create .       // 添加 web 环境，不要忘了最后的那个 . 符号
flutter config --enable-web      // 启用 web 支持
flutter devices        // 查看支持的设备列表，如果看到chrome（谷歌浏览器），说明开启成功
flutter run -d chrome   // 运行项目在Chrome上（有的时候可能需要先打开Chrome）

项目运行起来以后，会自动打开Chrome ，如下图所示 web项目启动初始界面

点击右下角加号中间的数字会做加法，至此，你的第一个flutter for web 项目就跑起来了。

为了确保每次打开终端就可以直接执行flutter命令，我们需要配置全局path：

open ~/.bash_profile   // 根目录下（项目文件夹之外）打开配置文件，

//将以下内容复制进去
export PUB_HOSTED_URL=https://pub.flutter-io.cn      //  设置国内镜像
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn   //
export PATH=`pwd`/flutter/bin:$PATH 
//然后保存文件

//终端执行
source .bash_profile  // 将配置立即生效

至此，每次打开终端，进入项目文件夹，就可以直接执行 flutter 命令了

下篇文章为大家介绍VS Code开发工具的使用方法：
Flutter for web 开发从零到踩坑02---使用VS Code工具进行开发