一、在macOS上搭建Flutter开发环境

目录
一、安装Xcode
二、安装Android Studio
三、安装VSCode
四、安装Flutter SDK
五、 创建项目并运行

一、安装Xcode

xcode.png

二、安装Android Studio

1、首先安装JDK

jdk1.png

jdk2.png

2、接下来【下载并安装Android Studio】

下载AndroidStudio.png

android-studio1.png

android-studio2.png

android-studio3.png

android-studio4.png

android-studio5.png

android-studio6.png

三、安装VSCode

1、前往应用程序将下载好的VSCode拖拽进去即可。
2、安装Flutter插件。

Dart.png

VSCode.png

FlutterWidgetSnippets.png

四、安装Flutter SDK

1、【下载Flutter SDK】 把下载好的 Flutter SDK 解压到你想安装 sdk 的文件夹下。

Flutter SDK.png

2、使用镜像
由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中。可以通过 git clone -b stable https://github.com/flutter/flutter.git下载，然后把flutter中的bin路径配置到环境变量中。

 vim ~/.bash_profile  

export PATH=/Users/liyongfei/Documents/项目/flutter/sdk/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

source  ~/.bash_profile  

注意： 此镜像为临时镜像，并不能保证一直可用，读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。

3、运行 flutter doctor 命令检测环境

flutter-doctor.png

第一个错误解决方法：
运行

flutter doctor --android-licenses

第二个错误解决方法：
逐个运行以下命令

  sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  brew update
  brew install --HEAD usbmuxd
  brew link usbmuxd
  brew install --HEAD libimobiledevice
  brew install ideviceinstaller
  brew install ios-deploy

第三个错误解决方法：打开Android Studio安装Flutter plugin和Dart plugin。
第四个警告解决方法：连接一个真机或模拟器就可以了。

4、再次运行flutter doctor

flutterdoctor.jpg

五、创建项目并运行
1、创建项目

flutter create flutter_shop

2、运行项目

flutter run

r 键:点击后热加载，也就算是重新加载吧。
p 键:显示网格，这个可以很好的掌握布局情况，工作中很有用。 o 键:切换 android 和 ios 的预览模式。
q 键:退出调试预览模式。

flutter run.png

debug.png

关注公众号，查看更多内容.jpg