下載 Flutter SDK 并配置環(huán)境變量
Flutter 的 SDK 需要獨(dú)立下載,需要去 https://flutter.cn/docs/development/tools/sdk/releases?tab=macos 下載最近的 sdk,放到某個(gè)目錄。
然后解壓,并配置環(huán)境變量。
exportPATH="$PATH:`pwd`/flutter/bin"source~/.zshrc? #替換你自己的 shell 配置文件路徑
Flutter 依賴(lài)一些其他的工具,可以運(yùn)行flutter doctor命令來(lái)查看依賴(lài)是否完善。
拿我的電腦舉例:
?? flutter git:(stable)flutter doctorDoctorsummary(to see all details,run flutter doctor-v):[?]Flutter(Channel stable,v1.9.1+hotfix.2,on Mac OS X10.1418A391,locale? ? zh-Hans-CN)[!]Android toolchain-developforAndroiddevices(Android SDK version28.0.3)!Some Android licenses not accepted.To resolvethis,run:flutter doctor--android-licenses[!]Xcode-developforiOS andmacOS(Xcode10.1)!CocoaPods outofdate(1.6.0is recommended).CocoaPods is used to retrieve the iOS and macOS platform side's plugin? ? ? ? code that responds to your plugin usage on the Dart side.Without CocoaPods,plugins will not work on iOS or macOS.For more info,see https://flutter.dev/platform-plugins? ? ? To upgrade:sudo gem install cocoapods? ? ? ? pod setup[!]AndroidStudio(version3.5)? Flutter plugin not installed;thisadds Flutter specific functionality.? Dart plugin not installed;thisadds Dart specific functionality.[?]VSCode(version1.33.0)[!]Connected device!No devices available!Doctor found issuesin8categories.
flutter doctor 檢查出了幾個(gè)問(wèn)題:
問(wèn)題 1:Some Android licenses not accepted.? To resolve this, run:
flutter doctor--android-licenses
然后按提示輸入y,直到所有的 licenses 都被 ac,到最后展示成這樣。
Accept?(y/N):yAll SDKpackagelicenses accepted
問(wèn)題 2:CocoaPods out of date (1.6.0 is recommended). To upgrade:
sudo gem install cocoapods
pod setup
第一步會(huì)安裝 cocoapods? 各種工具,第二步驟會(huì) Setting up CocoaPods master repo。
耐心等待即可。
最后看到這個(gè)就算對(duì)了:
CocoaPods1.8.0.beta.2is available.To update use:`sudo gem install cocoapods --pre`[!]This is a test version we'd love you totry.For more information,see https://blog.cocoapods.org and the CHANGELOGforthisversion at https://github.com/CocoaPods/CocoaPods/releases/tag/1.8.0.beta.2Setup completed
問(wèn)題 3:
? Flutter plugin not installed; this adds Flutter specific functionality.
? Dart plugin not installed; this adds Dart specific functionality.
解法,在 AS 安裝一下 Flutter 插件。
再次驗(yàn)證下:
?~flutter doctorDoctorsummary(to see all details,run flutter doctor-v):[?]Flutter(Channel stable,v1.9.1+hotfix.2,on Mac OS X10.1418A391,locale? ? zh-Hans-CN)[?]Android toolchain-developforAndroiddevices(Android SDK version28.0.3)[?]Xcode-developforiOS andmacOS(Xcode10.1)[?]AndroidStudio(version3.5)[?]VSCode(version1.33.0)[?]Connecteddevice(1available)
可以看到,必須的都已經(jīng) OK 了。
配置 iOS 開(kāi)發(fā)環(huán)境
安裝 Xcode,在 AppStore 下載即可,要求 9.0 及以上
配置 Xcode command-line tools :sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
運(yùn)行一次 Xocde 或者通過(guò)輸入命令sudo xcodebuild -license來(lái)確保已經(jīng)同意 Xcode 的許可協(xié)議。
如果以前下載過(guò) Xcode 用過(guò)終端,那么應(yīng)該沒(méi)問(wèn)題。
然后啟動(dòng)一個(gè) iPhone5S 之后版本的模擬器,我選了 XS。
open-a Simulator
創(chuàng)建一個(gè) Flutter 工程,并部署到模擬器。
flutter create helloflutter
cd helloflutter
flutter run
執(zhí)行上面三個(gè)命令就可以創(chuàng)建并部署到模擬器。
創(chuàng)建的工程目錄:
?? helloflutter lltotal32-rw-r--r--1mingjue? staff54291115:48README.mddrwxr-xr-x12mingjue? staff38491115:58androiddrwxr-xr-x9mingjue? staff28891116:00build-rw-r--r--1mingjue? staff89691115:48helloflutter.imldrwxr-xr-x8mingjue? staff25691115:49iosdrwxr-xr-x3mingjue? staff9691115:48lib-rw-r--r--1mingjue? staff327991115:48pubspec.lock-rw-r--r--1mingjue? staff266491115:48pubspec.yamldrwxr-xr-x3mingjue? staff9691115:48test
注:代碼放在 lib/ 下面。
運(yùn)行日志:
?? helloflutter flutter runLaunching lib/main.dart on iPhone XSindebug mode...Running Xcode build...├─Assembling Flutter resources...8.0s └─Compiling,linking and signing...15.2sXcode build done.26.1sSyncing files to device iPhone XS...2,387ms(!)?To hot reload changeswhilerunning,press"r".To hotrestart(and rebuildstate),press"R".An Observatorydebuggerand profiler on iPhone XS is available at:http://127.0.0.1:49877/1KhXC2nzaFc=/For a more detailed help message,press"h".To detach,press"d";to quit,press"q".
跑起來(lái)如圖:
注意:如果要部署到真機(jī),還需要開(kāi)發(fā)者賬號(hào),我沒(méi)有就沒(méi)試。
配置 Android 開(kāi)發(fā)環(huán)境
Android 也有模擬器跟真機(jī)的選擇,鑒于 Android 模擬器的性能,我選擇了真機(jī)。
真機(jī)跟普通的 Android 開(kāi)發(fā)差不多,開(kāi)啟開(kāi)發(fā)者模式,允許 USB debugging 即可。
然后運(yùn)行flutter devices命令確保 Flutter 可以識(shí)別我們的設(shè)備。
同 iOS,運(yùn)行 flutter run 部署到 Android 手機(jī)上。
?? helloflutter flutter run-d 91ab18e5Launching lib/main.dart on MI NOTE LTEindebug mode...Initializing gradle...17.3sResolving dependencies...81.4sRunning Gradle task'assembleDebug'...Running Gradle task'assembleDebug'...Done43.2sBuilt build/app/outputs/apk/debug/app-debug.apk.Installing build/app/outputs/apk/app.apk...18.5sSyncing files to device MI NOTE LTE...2,104ms(!)?To hot reload changeswhilerunning,press"r".To hotrestart(and rebuildstate),press"R".An Observatorydebuggerand profiler on MI NOTE LTE is available at:http://127.0.0.1:50410/wvUWXqgNfBE=/For a more detailed help message,press"h".To detach,press"d";to quit,press"q".
在 Android 上啟動(dòng)截圖:
注:當(dāng)電腦連著多個(gè)設(shè)備或模擬器時(shí),flutter run 可以通過(guò) -d deviceId 來(lái)指定要 run 到哪個(gè)設(shè)備,例如flutter run -d 91ab18e5,或者flutter run -d all部署到所有的設(shè)備。