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

一,写在前面的话

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

  • flutter英文网:https://flutter.io/
  • flutter中文网:https://flutterchina.club/
  • 高频数据交换下Flutter与ReactNative的对比: https://juejin.im/entry/5bd6d77c518825262549434a

二,环境准备

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

八,总结

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

你可能感兴趣的:(混合app开发--flutter开发之路(1):从零搭建一个可运行demo)