Flutter环境搭建到运行现有项目

1.下载SDK
之前是有安装包，但是环境没搭建好，使用命令：

git clone -b stable https://github.com/flutter/flutter.git

下载特别慢，所以查了一下，使用以下命令下载很快：

git clone https://github.com/flutter/flutter.git -b stable --depth 1

2.配环境变量（Mac和Windows有区别）
open ~/.bash_profile
export FLUTTER_HOME=/Users/liuffsunny/Desktop/flutter（SDK文件夹）
export PATH=$PATH:$FLUTTER_HOME/bin (flutter环境变量)
export PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin (dart环境变量)

image.png

2.配置镜像

image.png

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FUTTER_STORAGE_BASE_URL=https://storage.flutter

最后bash_profile文件里的内容：

bash_profile文件

在终端命令输入：
open ~/.bash_profile //打开bash_profile ( 如果不存在这个文件，需要先创建)
创建步骤：

1. 启动终端Terminal
2. 进入当前用户的home目录
    输入cd ~
3. 创建.bash_profile
    输入touch .bash_profile
4. 编辑.bash_profile文件
    输入open .bash_profile
  第一种方式
<1>、为在弹出的.bash_profile文件内进行编辑  
<2>、编辑完成后直接保存文件
<3>、关闭.bash_profile文件
<4>、更新配置过的环境变量    输入source .bash_profile
在.bash_profile文件为锁定状态的时候，第一种方式是不可行的，那么用第二种方式来编辑.bash_profile文件
 第二种方式，在Terminal终端通过指令来对.bash_profile文件进行编辑
<1>、输入 vim .bash_profile
<2>、输入 i 进行编辑模式
<3>、然后把需要编辑的内容键入，编辑完之后直接按esc退出编辑模式，
<4>、输入:w进行文件的保存，:wq为保存并退出指令
备注：在实际开发过程中，遇到了没有写入权限的问题

source ~/.bash_profile //刷新当前终端窗口 (在 ~/.bash_profile 中配置环境变量, 可是每次重启终端后配置的不生效.需要重新执行 : $source ~/.bash_profile)
注意后期执行flutter 相关的命令，一定也是执行过这句之后。
3.指令
flutter --version // 检测SDK版本
dart --version // 检测dartSDK版本

image.png

flutter create helloFlutter //创建新项目
flutter doctor //检测运行环境
flutter run // cd到深层项目目录（不然会报错）

image.png

这里安卓studio版本过高，还有点问题，后期更新
1.要安装好Xcode
2.安装好VScode（vs安装dart和flutter扩展）
3.同样也安装了android studio和JDK (参考文章https://www.jianshu.com/p/efd5dc251ea2)
在Java SE Downloads 入口JDK Download
然后选macOS Installer jdk-14.0.1_osx-x64_bin.dmg，176M
然后安装‎⁨JDK 14.0.1⁩.pkg
小声逼逼：应该得配置环境变量后续更新吧
一开始Android studio 不显示可用的模拟器，安装了Flutter和Dart后也会报上图的错误

[!] Android Studio (version 4.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.

在这里选了一下SDK的文件路径，就好了

image.png

image.png

cd 到文件路径：
flutter run命令：
报错：Error: No pubspec.yaml file found.
This command should be run from the root of your Flutter project.
Do not run this command from the root of your git clone of Flutter.

image.png

解决方案：cd 到更深的一层目录，就可以了。

由于Android Studio有问题，flutter doctor检测到没有可用的设备，于是转移到VSCode打开现有项目，打开dart文件，同意右下角的弹出框，会发现右下角出现了iPhone模拟器可选设备，如图所示：

image.png

如果觉得设备过少，可以在

image.png

image.png

在这里继续添加，此时flutter doctor 检测已有可用device，
执行flutter run，可以看到项目终于跑起来了。good luck！

终端显示

运行效果显示

参考链接：

vs code 搭建flutter运行环境（mac)