混合app开发--flutter开发之路(1):从零搭建一个可运行demo

一,写在前面的话

目前市面上有很多APP开发工具、框架。原生、ionic、weex、react-native、mui...都有亲历的项目,各有各的辛酸。前几天在面试的时候,有个面试者偶然提到flutter,于是就下来疯狂的了解学习了一波(这波真好)。抽工作闲暇的时间,就尝试的搭建一个demo工程。现在我吧
首先收集了一些资料来辅助对flutter的了解:

二,环境准备

1.安装flutter sdk
2.安装vscode(我是用这个)
3.安装android sdk
4.安装java(配环境变量)

三,下载flutter SDK

方式1:通过git把flutter clone下来(不推荐此方式)
  git clone -b beta https://github.com/flutter/flutter.git

执行clone直接成功的概率很低,失败的情况下重新ctrl+c,然后再次执行。如果还不成功直接去github上下载吧。效果一样,这就是上面说的git可以不装。如果 完成后找到目录应该如下图:


image.png

完成后,直接在cmd里执行flutter是没戏的,因为没配置系统环境变量,把你的“flutter目录+bin”这个路径加到系统的环境变量中。

可以在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

创建好一个虚拟模拟器,点击start,就可以运行了。


image.png

六,配置JAVA环境变量

这一步就直接跳过了,可以网上百度配置。

七,创建一个demo

在需要保存项目的地方执行flutter create xxxx 就可以生成一个flutter demo程序
执行flutter create xxxx(项目名不能有大写字母),否则会提示错误


image.png

然后我把项目名该成小写再次执行flutter create flutterdemo, 执行成功


image.png

当执行过程中 有时候会卡在Running "flutter packages get" in flutterdemo...
此时,我们可以终止程序运行, 通过cd flutterdemo 再次执行flutter packages get,就可以成功运行了


image.png

然后在flutterdemo目录下执行 flutter run命令 进行编译。期间可能也会遇见各种各样的问题


image.png

根据报错提示,接下来需要运行flutter doctor命令来看安装了哪些组件


image.png

根据上面的错误提示,是缺少了android-28的jar包,android studio(这个可以不用管)

然后就去android sdk 下去找到sdk manager.exe 运行。 然后看一下android-28是否安装(我这里已经安装过了)


image.png

安装好android-28以后, 继续运行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

然后继续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.

发现这两个没有安装

   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

八,总结

万事开头难。这一路走来,收获还是很多。有什么不明白的地方可以评论留言额。。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,843评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,538评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,187评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,264评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,289评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,231评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,116评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,945评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,367评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,458评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,068评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2 354

推荐阅读更多精彩内容