Mac下Flutter 安装与配置

关于Flutter的安装其实超级简单，不想看此文的可以直接跳官网
这篇主要是简单版的Flutter安装配置，写了：

• Flutter 安装
• 环境变量配置
• Flutter vscode 配置
• Flutter new Demo and run

Flutter 安装

1. 准备：首先在你的Mac上必须还有700M的空间（下载的SDK有600M）、并且有一个Shell，git、curl、unzip、which命令。如果没有就去度娘下载。
2. 下载 FlutterSDKv0.5.1-beta
3. 新建一个development文件夹在home目录下以保存FlutterSDK cd ~ && mkdir development，不过你也可以在$Home/Library下保存flutter
4. 切换到你要保存flutter SDK的目录并解压SDKcd development && unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip，如果你要保存在 $Home/Library 下的话，cd $Home/Library && unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

环境变量配置

1. 在你的shell rc文件中添加环境变量如果是zsh的话 cd ~ && vim .zshrc 然后添加 export FLUTTER=$HOME/development/flutter/bin 并在 PATH 目录中添加 :$FLUTTER

   如果是bash的话，在$HOME/.bash_profile添加 vim $HOME/.bash_profile

2. 新建一个shell 窗口测试一下Flutter flutter doctor 这个命令会显示你当前的flutter的版本信息及flutter开发环境信息，如果有任何需要安装的信息都会显示在上面。

   $ flutter doctor
   Doctor summary (to see all details, run flutter doctor -v):
   [✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.5 17F77, locale en-NZ)
   [!] Android toolchain - develop for Android devices (Android SDK 26.0.2)
       ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
   [!] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
       ✗ Missing Xcode dependency: Python module "six".
       Install via 'pip install six' or 'sudo easy_install six'.
       ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
           brew install --HEAD libimobiledevice
           brew install ideviceinstaller
       ✗ ios-deploy not installed. To install:
           brew install ios-deploy
       ✗ CocoaPods not installed.
           CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
           Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
           For more info, see https://flutter.io/platform-plugins
       To install:
           brew install cocoapods
           pod setup
   [✓] Android Studio
       ✗ Flutter plugin not installed; this adds Flutter specific functionality.
       ✗ Dart plugin not installed; this adds Dart specific functionality.
   [✓] Android Studio (version 3.0)
       ✗ Flutter plugin not installed; this adds Flutter specific functionality.
       ✗ Dart plugin not installed; this adds Dart specific functionality.
   [!] IntelliJ IDEA Ultimate Edition (version 2017.1.1)
       ✗ Flutter plugin not installed; this adds Flutter specific functionality.
       ✗ Dart plugin not installed; this adds Dart specific functionality.
   [!] VS Code (version 1.24.1)
   [!] Connected devices
       ! No devices available
   
   ! Doctor found issues in 5 categories.
   

3. 安装Android Studio及Xcode

4. 如果已安装好Android Studio，请检查SDK有没有配置环境变量echo $ANDROID_HOME，如果没有的话请添加export ANDROID_HOME=$HOME/Library/Android/sdk

Flutter vscode 配置

1. 打开vscode后 command + shift + p 输入install 选择 Extensions:Install Extensions，查找Flutter直接下载就好
2. 下载完后点击reload或者重新打开vscode，command + shift + p 输入 flutter 选择 Flutter：Run Flutter Doctor与shell下输入flutter doctor相同，检测flutter是否正常

Flutter new Demo and run

1. vscode 下 command + shift + p 输入 flutter 选择 Flutter：New Project 输入项目名称 myapp

2. 创建插件创建完项目之后可以看到lib下main.dart就是整个项目的源码，可以按F5运行项目
   

   image

3. 像前文提到的Flutter支持Hot reload，改动代码后直接command + s就可以生效了，可以更改_counter++试试
   

   image

喜欢的小伙伴可以关注我的公众号AllAboutCoding

AllAboutCoding