初體驗(yàn)遇到的問(wèn)題

下載 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è)備。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Making it easy to add Flutter to an existing app is work ...
    共田君閱讀 1,967評(píng)論 0 2
  • 本文先介紹一下現(xiàn)有工程如何集成 Flutter 實(shí)現(xiàn)混合開(kāi)發(fā),以及混合項(xiàng)目如何打包,再探索下如何降低原生和 Flu...
    koin447閱讀 5,705評(píng)論 1 37
  • 我是小團(tuán)子 這個(gè)名字伴隨著我度過(guò)了整整六年 哦不對(duì) 應(yīng)該說(shuō)是整整一輩子 小時(shí)候不懂事倒沒(méi)什么 可稍微大了一些后 就...
    面癱書(shū)生閱讀 726評(píng)論 0 0
  • 白天抽空和媳婦去看了《哪吒之魔童降世》,笑中有淚,想的最多的還是什么時(shí)候能夠帶哼哼和曦曦看個(gè)電影。 相對(duì)于電影本身...
    張大箱閱讀 161評(píng)論 0 2
  • 人生難的 心事是裝滿(mǎn)桶的水,有一點(diǎn)縫隙都會(huì)外溢。痛就痛了,痛,讓你認(rèn)識(shí)自己,也看清了別人。敗就敗了,站起來(lái)拍拍灰塵...
    豫草根閱讀 244評(píng)論 0 0