一,寫在前面的話
目前市面上有很多APP開發(fā)工具、框架。原生、ionic、weex、react-native、mui...都有親歷的項目,各有各的辛酸。前幾天在面試的時候,有個面試者偶然提到flutter,于是就下來瘋狂的了解學習了一波(這波真好)。抽工作閑暇的時間,就嘗試的搭建一個demo工程。現在我吧
首先收集了一些資料來輔助對flutter的了解:
- flutter英文網:https://flutter.io/
- flutter中文網:https://flutterchina.club/
- 高頻數據交換下Flutter與ReactNative的對比: https://juejin.im/entry/5bd6d77c518825262549434a
二,環(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可以不裝。如果 完成后找到目錄應該如下圖:
完成后,直接在cmd里執(zhí)行flutter是沒戲的,因為沒配置系統(tǒng)環(huán)境變量,把你的“flutter目錄+bin”這個路徑加到系統(tǒng)的環(huán)境變量中。
可以在flutter安裝目錄中找到flutter_console.bat,可以直接在里面運行flutter doctor命令
但是運行中,會比較慢,而且不一定會成功
方式2:直接去官網下載flutter sdk安裝包,更好。
傳送門(下載安裝包):https://flutter.io/docs/get-started/install
在這里我選擇windows進行下載。
四,安裝vscode插件(flutter插件和Dart插件)
vscode在這里就不闡述如何安裝了,那就說一下flutter插件和Dart插件如何安裝
五,安裝android sdk
有vscode編輯器就已經夠用了,如果在安裝android studio是否已經沒有必要了。所以下面就說一下
直接下載 android-sdk_r24.4.1-windows.zip 并解壓,出現如下圖
點擊SDK Manager.exe,出現如下圖
點開圖下標注的
配置虛擬模擬器
在android sdk安裝目錄中雙擊AVD manager.exe
點擊edit,出現如下圖配置模擬器相關信息
創(chuàng)建好一個虛擬模擬器,點擊start,就可以運行了。
六,配置JAVA環(huán)境變量
這一步就直接跳過了,可以網上百度配置。
七,創(chuàng)建一個demo
在需要保存項目的地方執(zhí)行flutter create xxxx 就可以生成一個flutter demo程序
執(zhí)行flutter create xxxx(項目名不能有大寫字母),否則會提示錯誤
然后我把項目名該成小寫再次執(zhí)行flutter create flutterdemo, 執(zhí)行成功
當執(zhí)行過程中 有時候會卡在Running "flutter packages get" in flutterdemo...
此時,我們可以終止程序運行, 通過cd flutterdemo 再次執(zhí)行flutter packages get,就可以成功運行了
然后在flutterdemo目錄下執(zhí)行 flutter run命令 進行編譯。期間可能也會遇見各種各樣的問題
根據報錯提示,接下來需要運行flutter doctor命令來看安裝了哪些組件
根據上面的錯誤提示,是缺少了android-28的jar包,android studio(這個可以不用管)
然后就去android sdk 下去找到sdk manager.exe 運行。 然后看一下android-28是否安裝(我這里已經安裝過了)
安裝好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
然后安裝一下
安裝好了,然后運行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.
神奇的編譯運行成功了(此處應該有掌聲)。
八,總結
萬事開頭難。這一路走來,收獲還是很多。有什么不明白的地方可以評論留言額。。。。