混合app開發(fā)--flutter開發(fā)之路(1):從零搭建一個可運行demo

一,寫在前面的話

目前市面上有很多APP開發(fā)工具、框架。原生、ionic、weex、react-native、mui...都有親歷的項目,各有各的辛酸。前幾天在面試的時候,有個面試者偶然提到flutter,于是就下來瘋狂的了解學習了一波(這波真好)。抽工作閑暇的時間,就嘗試的搭建一個demo工程。現在我吧
首先收集了一些資料來輔助對flutter的了解:

二,環(huán)境準備

1.安裝flutter sdk
2.安裝vscode(我是用這個)
3.安裝android sdk
4.安裝java(配環(huán)境變量)

三,下載flutter SDK

方式1:通過git把flutter clone下來(不推薦此方式)
  git clone -b beta https://github.com/flutter/flutter.git

執(zhí)行clone直接成功的概率很低,失敗的情況下重新ctrl+c,然后再次執(zhí)行。如果還不成功直接去github上下載吧。效果一樣,這就是上面說的git可以不裝。如果 完成后找到目錄應該如下圖:


image.png

完成后,直接在cmd里執(zhí)行flutter是沒戲的,因為沒配置系統(tǒng)環(huán)境變量,把你的“flutter目錄+bin”這個路徑加到系統(tǒng)的環(huán)境變量中。

可以在flutter安裝目錄中找到flutter_console.bat,可以直接在里面運行flutter doctor命令


image.png

但是運行中,會比較慢,而且不一定會成功

方式2:直接去官網下載flutter sdk安裝包,更好。
傳送門(下載安裝包):https://flutter.io/docs/get-started/install
image.png

在這里我選擇windows進行下載。

四,安裝vscode插件(flutter插件和Dart插件)

vscode在這里就不闡述如何安裝了,那就說一下flutter插件和Dart插件如何安裝


image.png

五,安裝android sdk

有vscode編輯器就已經夠用了,如果在安裝android studio是否已經沒有必要了。所以下面就說一下
直接下載 android-sdk_r24.4.1-windows.zip 并解壓,出現如下圖


image.png

點擊SDK Manager.exe,出現如下圖


image.png

點開圖下標注的
image.png

image.png

image.png

image.png

配置虛擬模擬器
在android sdk安裝目錄中雙擊AVD manager.exe


image.png

image.png

點擊edit,出現如下圖配置模擬器相關信息


image.png

創(chuàng)建好一個虛擬模擬器,點擊start,就可以運行了。


image.png

六,配置JAVA環(huán)境變量

這一步就直接跳過了,可以網上百度配置。

七,創(chuàng)建一個demo

在需要保存項目的地方執(zhí)行flutter create xxxx 就可以生成一個flutter demo程序
執(zhí)行flutter create xxxx(項目名不能有大寫字母),否則會提示錯誤


image.png

然后我把項目名該成小寫再次執(zhí)行flutter create flutterdemo, 執(zhí)行成功


image.png

當執(zhí)行過程中 有時候會卡在Running "flutter packages get" in flutterdemo...
此時,我們可以終止程序運行, 通過cd flutterdemo 再次執(zhí)行flutter packages get,就可以成功運行了


image.png

然后在flutterdemo目錄下執(zhí)行 flutter run命令 進行編譯。期間可能也會遇見各種各樣的問題


image.png

根據報錯提示,接下來需要運行flutter doctor命令來看安裝了哪些組件


image.png

根據上面的錯誤提示,是缺少了android-28的jar包,android studio(這個可以不用管)

然后就去android sdk 下去找到sdk manager.exe 運行。 然后看一下android-28是否安裝(我這里已經安裝過了)


image.png

安裝好android-28以后, 繼續(xù)運行flutter run命令, 出現了ould not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.1.2).

E:\vsworkspace\flutterdemo>flutter run
Using hardware rendering with device Android SDK built for x86 64. If you get graphics artifacts, consider enabling software rendering with "--enable-software-rendering".
Launching lib/main.dart on Android SDK built for x86 64 in debug mode...
Initializing gradle...                                           3.2s
Resolving dependencies...
* Error running Gradle:
Exit code 1 from: E:\vsworkspace\flutterdemo\android\gradlew.bat app:properties:
Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.

FAILURE: Build failed with an exception.

* Where:
Build file 'E:\vsworkspace\flutterdemo\android\app\build.gradle' line: 25

* What went wrong:
A problem occurred evaluating project ':app'.
> Could not resolve all files for configuration 'classpath'.
   > Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.1.2).
     Searched in the following locations:
         https://jcenter.bintray.com/com/android/tools/lint/lint-gradle-api/26.1.2/lint-gradle-api-26.1.2.jar

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 1s

Please review your Gradle project setup in the android/ folder.

然后百度搜索一番,找到了解決方案:

解決flutter調試安卓時出現的could not find lint-gradle-api.jar(com/android.tools.lint:lint-gradle-api:26.1.2)
https://blog.csdn.net/szintu/article/details/83503219

然后繼續(xù)flutter run命令,又出現了問題

E:\vsworkspace\flutterdemo>flutter run
Using hardware rendering with device Android SDK built for x86 64. If you get graphics artifacts, consider enabling software rendering with "--enable-software-rendering".
Launching lib/main.dart on Android SDK built for x86 64 in debug mode...
Initializing gradle...                                          12.7s
Resolving dependencies...
* Error running Gradle:
Exit code 1 from: E:\vsworkspace\flutterdemo\android\gradlew.bat app:properties:
Checking the license for package Android SDK Build-Tools 27.0.3 in E:\SDK\android\licenses
Warning: License for package Android SDK Build-Tools 27.0.3 not accepted.
Checking the license for package Android SDK Platform 27 in E:\SDK\android\licenses
Warning: License for package Android SDK Platform 27 not accepted.


FAILURE: Build failed with an exception.

* Where:
Build file 'E:\vsworkspace\flutterdemo\android\build.gradle' line: 24

* What went wrong:
A problem occurred evaluating root project 'android'.
> A problem occurred configuring project ':app'.
   > Failed to install the following Android SDK packages as some licences have not been accepted.
        platforms;android-27 Android SDK Platform 27
        build-tools;27.0.3 Android SDK Build-Tools 27.0.3
     To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.
     Alternatively, to transfer the license agreements from one workstation to another, see http://d.android.com/r/studio-ui/export-licenses.html

     Using Android SDK: E:\SDK\android

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 46s

Please review your Gradle project setup in the android/ folder.

發(fā)現這兩個沒有安裝

   platforms;android-27 Android SDK Platform 27
   build-tools;27.0.3 Android SDK Build-Tools 27.0.3

然后安裝一下


image.png

image.png

安裝好了,然后運行flutter run命令

E:\vsworkspace\flutterdemo>flutter run
Using hardware rendering with device Android SDK built for x86 64. If you get graphics artifacts, consider enabling software rendering with "--enable-software-rendering".
Launching lib/main.dart on Android SDK built for x86 64 in debug mode...
Initializing gradle...                                           0.7s
Resolving dependencies...                                        3.2s
Gradle task 'assembleDebug'...                                  21.9s
Built build\app\outputs\apk\debug\app-debug.apk.
Installing build\app\outputs\apk\app.apk...                     59.8s
I/Choreographer( 2509): Skipped 59 frames!  The application may be doing too much work on its main thread.
Syncing files to device Android SDK built for x86 64...
D/        ( 2509): HostConnection::get() New Host Connection established 0x7f7e66f5ef20, tid 2524
W/        ( 2509): Unrecognized GLES max version string in extensions: ANDROID_EMU_CHECKSUM_HELPER_v1
D/EGL_emulation( 2509): eglMakeCurrent: 0x7f7e67749300: ver 2 0 (tinfo 0x7f7e6b102be0)
 3.0s

??  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on Android SDK built for x86 64 is available at: http://127.0.0.1:62506/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".
E/Surface ( 2509): getSlotFromBufferLocked: unknown buffer: 0x7f7e5b379ca0
D/EGL_emulation( 2509): eglMakeCurrent: 0x7f7e67748900: ver 2 0 (tinfo 0x7f7e5c8e92c0)
E/Surface ( 2509): getSlotFromBufferLocked: unknown buffer: 0x7f7e67749080
Application finished.

神奇的編譯運行成功了(此處應該有掌聲)。


image.png

八,總結

萬事開頭難。這一路走來,收獲還是很多。有什么不明白的地方可以評論留言額。。。。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,316評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 98,481評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,241評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,939評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,697評論 6 409
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,182評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,247評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,406評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 48,933評論 1 334
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,772評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,973評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,516評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,209評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,638評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,866評論 1 285
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,644評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,953評論 2 373

推薦閱讀更多精彩內容