一、了解一下Flutter
Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加 native扩展。同时 Flutter还使用 Native引擎渲染视图,这无疑能为用户提供良好的体验。
跨平台:
Flutter与用于构建移动应用程序的其它大多数框架不同,因为Flutter既不使用WebView,也不使用操作系统的原生控件。 相反,Flutter使用自己的高性能渲染引擎来绘制widget。这样不仅可以保证在Android和iOS上UI的一致性,而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。
原生用户界面:
它是原生的,让我们的体验更好,性能更好。用官方的话讲就是平滑而自然的滑动效果和平台感知,为您的用户带来全新的体验。
二、Flutter开发环境搭建Windows版
下载安装 FlutterSDK
1.下载地址:https://flutter.io/sdk-archive/#windows将安装包zip解压到你想安装Flutter SDK的路径(如: E:\flutter;注意:不需要将flutter安装到一些高权限的路径如C:\Program Files)
2.设置环境变量,Flutter的执行是要进行联网的,由于国内的原因,所以你需要设置环境变量
export PUB_HOSTED_URL=https://pub.flu tter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
如果你想在任何地方都可以执行Flutter命令,你需要把Flutter SDK的目录配到环境变量中的path条目下
3.进行Flutter doctor 的测试,打开终端执行flutter doctor
,会报如下错误
Android toolchain - develop for Android devices
• Android SDK at D:\Android\sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://flutter.io/setup/#android-setup for detailed instructions.
下一步就去安装Android studio
下载安装 Android Studio
- 下载
Android Studio
:直接到官网进行下载就可以了。下载地址:https://developer.android.com/ - 安装
Android Studio
软件:安装完后打开Android Stuido 软件,然后找到Plugin的配置,搜索Flutter插件。安装完成后,你重新启动一下Android Studio。
安装Android证书
安装好Android Studio
后,再次打开终端输入flutter doctor --android-licenses
安装证书
安装AVD虚拟机
1.打开Andorid Studio
,新建Flutter项目。
2.找到菜单栏中tool - AVD Manager
选项,选择Create Virtual Device
,选择你喜欢的虚拟机类型。
3.安装好后,点击开始按钮,运行虚拟机
运行Flutter程序
如果你是1.0以下的版本,可能会报Error running Gradle错误,如下
Launching lib/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...
Resolving dependencies...
* Error running Gradle:
ProcessException: Process "/Users/rabbit/develop/android/flutter_app/android/gradlew" exited abnormally:
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 '/Users/rabbit/develop/android/flutter_app/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 0s
Command: /Users/rabbit/develop/android/flutter_app/android/gradlew app:properties
Finished with error: Please review your Gradle project setup in the android/ folder.
这个坑已经踩过了,已经找到解决办法,只需要修改掉项目下的android目录下的build.gradle文件,把google() 和 jcenter()这两行去掉,改为阿里的代理链接。
buildscript {
repositories {
//google()
//jcenter()
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
}
dependencies {
classpath 'com.android.tools.build:gradle:3.2.1'
}
}
allprojects {
repositories {
//google()
//jcenter()
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
}
}
如何使用VS code进行开发
到这里,基本可以运行起来了,但是用Android Studio来进行开发的话,感觉它太重量级了,还是习惯了用VS code并且VS code已经有了Flutter插件,搜索安装即可。
安装完导入项目,打开VS code终端输入命令flutter run
开启预览
如何快速开启虚拟机
如果使用VS code开发的话,打开虚拟机的可以直接通过快捷方式打开,不再通过打开Android Studio,然后再去打开AVD虚拟机。
开启虚拟机需要两个步骤:
1.新建一个xxx.bat文件到桌面,xxx输入自己取的名字
2.查找emulator.exe文件的路径,然后把emulator.exe文件的路径 + 你安装的虚拟机名称
放到bat文件中,如下
C:\Users\Administrator\AppData\Local\Android\Sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_4_API_26
保存后双击bat文件,就可以迅速打开虚拟机了
参数解释:
-netdelay none :设置模拟器的网络延迟时间,默认为none,就是没有延迟。
-netspeed full: 设置网络加速值,full代表全速。