Flutter学习总结系列----第一章、Flutter基础全面详解

版权声明：本文为博主原创文章，未经博主允许不得转载。https://cloud.tencent.com/developer/article/1326506

转载请标明出处：

https://cloud.tencent.com/developer/article/1326506

本文出自 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应用

谷歌推出全新Android开发框架Sky让App更流畅

1.1.3 Flutter体系结构

下回分解

1.1.4 DartVM虚拟机

下回分解

1.2 Flutter开发环境

1.2.1 安装Flutter开发环境

详细的安装过程和注意事项，请看我的博客。Flutter从配置安装到填坑指南详解

1.2.2 常用的命令行

以下是常用命令：

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，如果需要的话可以勾上。

（四）首先模拟器，然后选择要运行的项目，注意了，这里有一个MainActivity 和 main.dart，选择main.dart，然后点击绿色的三角号图标运行（或者点击菜单栏 Run）就可以了。

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