Mac下Flutter 安裝與配置

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

• Flutter 安裝
• 環(huán)境變量配置
• Flutter vscode 配置
• Flutter new Demo and run

Flutter 安裝

1. 準(zhǔn)備：首先在你的Mac上必須還有700M的空間（下載的SDK有600M）、并且有一個(gè)Shell，git、curl、unzip、which命令。如果沒(méi)有就去度娘下載。
2. 下載 FlutterSDKv0.5.1-beta
3. 新建一個(gè)development文件夾在home目錄下以保存FlutterSDK cd ~ && mkdir development，不過(guò)你也可以在$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. 新建一個(gè)shell 窗口測(cè)試一下Flutter flutter doctor 這個(gè)命令會(huì)顯示你當(dāng)前的flutter的版本信息及flutter開(kāi)發(fā)環(huán)境信息，如果有任何需要安裝的信息都會(huì)顯示在上面。

   $ 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，請(qǐng)檢查SDK有沒(méi)有配置環(huán)境變量echo $ANDROID_HOME，如果沒(méi)有的話請(qǐng)?zhí)砑?code>export ANDROID_HOME=$HOME/Library/Android/sdk

Flutter vscode 配置

1. 打開(kāi)vscode后 command + shift + p 輸入install 選擇 Extensions:Install Extensions，查找Flutter直接下載就好
2. 下載完后點(diǎn)擊reload或者重新打開(kāi)vscode，command + shift + p 輸入 flutter 選擇 Flutter：Run Flutter Doctor與shell下輸入flutter doctor相同，檢測(cè)flutter是否正常

Flutter new Demo and run

1. vscode 下 command + shift + p 輸入 flutter 選擇 Flutter：New Project 輸入項(xiàng)目名稱 myapp

2. 創(chuàng)建插件創(chuàng)建完項(xiàng)目之后可以看到lib下main.dart就是整個(gè)項(xiàng)目的源碼，可以按F5運(yùn)行項(xiàng)目
   

   image

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

   image

喜歡的小伙伴可以關(guān)注我的公眾號(hào)AllAboutCoding

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