Flutter学习总结系列----第一章、Flutter基础全面
版权声明:本文为博主原创文章,未经博主允许不得转载。https://www.jianshu.com/p/2c9867e737a1
转载请标明出处:
https://www.jianshu.com/p/2c9867e737a1
本文出自 AWeiLoveAndroid的博客
Flutter学习总结:
更多相关内容和示例代码,请看我的github:
https://github.com/AweiLoveAndroid/Flutter-learning
第1章、基础入门
1.1 Flutter简介
1.1.1 跨平台框架的发展历史
详情请看我之前写的博客 安卓开发方式的进化之路
这里就以一张图简单的讲一下:
跨平台框架的发展历史1.1.2 Flutter的起源
2015年, Google 内部开始测试另一种高性能的编程方式,那就 Google 的 Sky 项目。Sky 项目使用网页开发语言Dart
开发原生Android 应用,强调应用的运行速度和与 Web 的高度集成。Sky将其Web后端也带到了移动开发领域。Sky不依赖于平台,其代码可以运行在Android、iOS,或是任何包含Dart虚拟机的平台上。
可以说sky是Flutter框架的前身。
在 2017年的谷歌 I/O大会上,Google推出了Flutter —— 一款新的用于创建移动应用的开源库。在2018年初世界移动大会上发布了 Flutter的第一个Beta版本,2018年5月的 I/O大会上更新到了Beta3版本,向正式版又迈进了一步。一时间业内对这个框架的关注度越来越高。
关于sky的起源相关新闻,可以点击以下几篇文章:
Google Sky 开源项目:不使用 JAVA 开发 120 FPS 的安卓应用
谷歌推出Sky框架:使用Dart编写120fps的Android应用
1.1.3 Flutter体系结构
下回分解
1.1.4 DartVM虚拟机
下回分解
1.2 Flutter开发环境
1.2.1 安装Flutter开发环境
详细的安装过程和注意事项,请看我的博客。Flutter从配置安装到填坑指南详解
1.2.2 常用的命令行
以下是常用命令:
常用命令 | 含义 |
---|---|
--version | 查看Flutter版本 |
-h或者--help | 打印所有命令行用法信息 |
analyze | 分析项目的Dart代码。 |
build | Flutter构建命令。 |
channel | 列表或开关Flutter通道。 |
clean | 删除构建/目录。 |
config | 配置Flutter设置。 |
create | 创建一个新的Flutter项目。 |
devices | 列出所有连接的设备。 |
doctor | 展示了有关安装工具的信息。 |
drive | 为当前项目运行Flutter驱动程序测试。 |
format | 格式一个或多个Dart文件。 |
fuchsia_reload | 在Fuchsia上进行热重载。 |
help | 显示帮助信息的Flutter。 |
install | 在附加设备上安装Flutter应用程序。 |
logs | 显示用于运行Flutter应用程序的日志输出。 |
packages | 命令用于管理Flutter包。 |
precache | 填充了Flutter工具的二进制工件缓存。 |
run | 在附加设备上运行你的Flutter应用程序。 |
screenshot | 从一个连接的设备截图。 |
stop | 停止在附加设备上的Flutter应用。 |
test | 对当前项目的Flutter单元测试。 |
trace | 开始并停止跟踪运行的Flutter应用程序。 |
upgrade | 升级你的Flutter副本。 |
1.2.3 调试工具
下回分解
1.3 开发第一个Flutter程序
1.3.1 HelloWorld案例
创建project过程和普通安卓项目是很类似的。
(一)打开AS,点击 File --> New Flutter Project,看看3种不同类型的项目模板
解释这三种类型的含义:
- Flutter Application(Flutter应用项目)
本文中创建的就是这种类型。具体的下面会详解。
- Flutter Plugin(Flutter插件项目)
当我们创建了Flutter Plugin之后,发现多了一个我们自己命名的目录,这个相当于一个本地的lib库,
可以在` pubspec.yaml`文件中配置路径,然后在项目中使用。如下图所示:
Flutter Package工程结构
- Flutter Package (Flutter包项目)
(二)打开AS,点击 File --> New Flutter Project,选择Flutter application ,然后点击next,输入一个工程名字。
注意: 项目名称必须是小写,单词之间用下划线隔开,你看我这样创建就给我提示错误了,报错的如图所示。
错误示范(三)输入包名,点击next,点击finish,等待编译就可以了。如果没配置好,这个时候往往会报错。
注意: 这里可以支持ios和kotlin,如果需要的话可以勾上。
Run运行示意图(四)首先模拟器,然后选择要运行的项目,注意了,这里有一个
MainActivity
和main.dart
,选择main.dart
,然后点击绿色的三角号
图标运行(或者点击菜单栏Run
)就可以了。
我用的AS3.2,我截个图,菜单栏跟以前版本有点不同,之前的AS版本可以在Build菜单找到编译选项的。
AS3.2编译菜单栏如果代码有更改,可以点击黄色的闪电图标
点击它之后就可以进行热加载。
(五)运行hello world程序
点击菜单栏Run
,选择main.dart
,就可以运行到模拟器了,运行效果如图所示,上面是一个AppBar,中间是文本,右下角是一个FloatingActionButton(后文简称FAB),点击FAB,中间的文本数字加1:
下图是我点击2次之后的截的图:
1.3.2 程序结构
打开刚才创建的程序,切换到project视图,看看项目的结构:
【注意】 新建Flutter项目的结构和原生android的工程结构不一样,我们不能用android那种多module 多lib的结构去创建module和lib,因为我们的代码都是在lib
目录里面完成的,除非要用到原生交互的代码,你可以在android
目录里面去写,然后在lib
目录里面去引用这些交互的代码。
android目录
这里存放的是Flutter与android原生交互的一些代码,这个路径的文件和创建单独的Android项目的基本一样的。不过里面的代码配置跟单独创建Android项目有些不一样。
ios目录
这里存放的是Flutter与ios原生交互的一些代码。
lib目录
这里存放的是Dart语言编写的代码,这里是核心代码
。不管是Android平台,还是ios平台,安装配置好环境,可以把dart代码运行到对应的设备或模拟器上面。刚才的示例中,就是运行的lib目录下的main.dart
这个文件。
我们可以在这个lib
目录下面创建不同的文件夹,里面存放不同的文件,使用Dart语言写我们的自己的代码。
pubspec.yaml文件
这个是配置依赖项的文件,比如配置远程pub仓库的依赖库,或者指定本地资源(图片、字体、音频、视频等)。
例如刚才创建的项目的pubspec.yaml
里面的:cupertino_icons: ^0.1.2
,表示项目要依赖cupertino_icons
这个库,版本号为0.1.2
。
下载的三方库存放在C盘,路径为:C:\Users\用户名\AppData\Roaming\Pub\Cache\hosted\pub.dartlang.org\XXX 注意:这个用户名对应的是你电脑的用户名,比如我的是Administrator,有的人是admin,看你自己的电脑的设置了。后面那个XXX
就是你想药查找的对应的库的名字了。(AppData
是一个隐藏目录,需要先设置显示隐藏文件才可以看到)下面给一张截图示例一下:
1.3.3 打包过程
(1)创建keystore证书
如果您已经创建过证书则可以跳过这一步。若要创建新的证书,请在命令行中执行如下命令:
keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
注意: keytool
命令可能并不存在于您的系统环境路径中。 它是Java JDK
的一部分,当您安装Android Studio时会被一起安装。 您可以通过运行flutter doctor
命令,查看Java binary at:
后输出的路径来确定命令所在的路径,然后将全路径中最后的java
替换成 keytool
来执行该命令。
(2)在应用中引用keystore证书
创建一个包含了keystore
证书引用的配置文件并命名为 <app dir>/android/key.properties :
storePassword=<上一步中输入的 store 密码>
keyPassword=<上一步中输入的 key 密码>
keyAlias=key
storeFile=<keystore 文件的位置, 例如: /Users/<user name>/key.jks>
(3)在 gradle 中配置签名选项
编辑您应用的 <app dir>/android/app/build.gradle 文件以配置签名选项:
1.找到android {
,然后替换为您包含证书引用的配置文件:
def keystorePropertiesFile = rootProject.file("key.properties")
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
android {
2.替换:
buildTypes {
release {
// TODO: Add your own signing config for the release build.
// Signing with the debug keys for now, so `flutter run --release` works.
signingConfig signingConfigs.debug
}
}
为如下内容:
signingConfigs {
release {
keyAlias keystoreProperties['keyAlias']
keyPassword keystoreProperties['keyPassword']
storeFile file(keystoreProperties['storeFile'])
storePassword keystoreProperties['storePassword']
}
}
buildTypes {
release {
signingConfig signingConfigs.release
}
}
(4)构建 release 版应用
在命令行使用:
cd <app dir>
(用您应用工程的根目录替换<app dir>
)。
运行flutter build apk
(flutter build
命令默认使用--release
)。
您应用的release版本的APK会生成在<app dir>/build/app/outputs/apk/app-release.apk
(5)将 release 版本的 APK 安装到设备上
使用命令行命令:
使用USB将Android设备连接到您的计算机。
cd <app dir>
(进入您应用工程的根目录)。
运行 flutter install