Mac下Flutter 安裝與配置

關于Flutter的安裝其實超級簡單，不想看此文的可以直接跳官網(wǎng)
這篇主要是簡單版的Flutter安裝配置，寫了：

• Flutter 安裝
• 環(huán)境變量配置
• 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

環(huán)境變量配置

1. 在你的shell rc文件中添加環(huán)境變量如果是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開發(fā)環(huán)境信息，如果有任何需要安裝的信息都會顯示在上面。

   $ 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有沒有配置環(huán)境變量echo $ANDROID_HOME，如果沒有的話請?zhí)砑?code>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. 創(chuàng)建插件創(chuàng)建完項目之后可以看到lib下main.dart就是整個項目的源碼，可以按F5運行項目
   

   image

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

   image

喜歡的小伙伴可以關注我的公眾號AllAboutCoding

AllAboutCoding
本頁內(nèi)容由塔燈網(wǎng)絡科技有限公司通過網(wǎng)絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權內(nèi)容。本文鏈接:http://m.cjxv.cn/18386.html