Flutter学习总结系列----Flutter基础全面详解-CSDN博客

号外：下载谷歌浏览器掘金插件，搜索Dart语言，我的github工程排名第 4 ，欢迎大家多多关注！

本文同步发布在github,更多关于Flutter的相关内容和示例代码，请看我的github：

github.com/AweiLoveAnd…

第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从配置安装到填坑指南详解

→ 遇到的一些问题：

（一）卸载flutter相关环境

1. Dart的插件安装包在 C盘路径： \AppData\Roaming\Pub\Cache\hosted\pub.dartlang.org文件夹里面所以只需要找到Pub文件夹，删掉Pub文件夹。
1. flutter源代码文件，就是你在github下载下来的那个项目源代码，比如我放在了E:\develop\flutter，我只需要把flutter这个文件夹删除就可以了。
1. C盘用户名下面有个.AndroidStudioXXX的文件夹，这个是AS的缓存目录，比如我的是 C:\Users\luzhaowei.AndroidStudio2.2 打开，找到插件目录 C:\Users\luzhaowei.AndroidStudio2.2\config\plugins 把里面的Dart 和 flutter-intelliJ两个文件夹删掉
1. 把环境变量里面的flutter和dart有关的设置删掉。

（二）卸载flutter之后，重新git命令安装flutter之后，然后命令行运行flutter doctor时，会有以下错误（以下是我的填坑指路全过程）：

注意：由于下载的国外的网站上的资料，需要科学上网！！！

我退出命令行再运行，还是照样出错。

后来我想是不是BITS传输服务未开启，于是我一顿操作猛如虎，操作如下，打开BITS：

计算机 --> 右键 “管理” -->  服务和应用程序里面，点击“服务”，然后如下图所示：
复制代码

然后选中图中标记的这个，右键点击“属性”，然后改成自动，确定。如下图所示：

然后我把刚下载的flutter文件夹删掉，重新执行git命令，下载flutter。（下好了之后记得配置环境变量）然后执行flutter doctor 命令，这次好一些了，但是命令行更新的很慢，一直停留在命令行，如图所示：

等了好久，终于出来了。

然后又是漫长的等待，在下载Material fonts这里出错了,于是我关掉了命令行，重新打开命令行，执行flutter doctor命令。

然后又是失败。。不等了，关闭命令行吧。

然后重新打开命令行，执行flutter doctor命令。经历了几个小时的折腾，终于环境安装好了！看到下面那个对勾，表示flutter已经更新完成了。

然后重新打开命令行，执行flutter doctor -v命令，。看看还有什么需要安装的？（目前我安装的flutter最新版是0.4.4）,如下图所示：

新版的跟旧版的有区别，这里的每一项里面的小项都很详细的列举了类目，只要是正确安装了IDE，以及配置了jdk,sdk环境的，都会详细列出来。

Flutter支持Android Studio、VSCode以及控制台+文本编辑器的方式。如果你还安装了VSCode，命令行里面也会列举出来的。

【重点提示】按照提示来操作即可，哪个缺少（前面是 X 符号的）就配置哪一个。。一般来说，命令行会给你一些提示，比如需要使用什么命令操作，需要在哪个路径下面操作等。。

有3点需要特别注意的：

1. Flutter，这里面有4个工具，缺一不可：Flutter本身的安装包，Framework（这是flutter的核心代码部分），Engine（flutter的引擎），Dart sdk。
1. Android toolchain（开发Android设备的一些工具），这里是完整版的安装，有7个工具：sdk（sdk路径），ndk（ndk路径），Platform(android-27)以及build-tools（27.0.3），给sdk路径配置ANDROID_HOME环境变量，jdk配置路径，jdk运行环境版本，android licenses(协议)。
1. Android Studio环境，包括安装包路径，Flutter插件，Dart插件，AS自带jdk版本号。我这里还安装了IDEA，所以也会把它的环境列举出来。

下面是安装过程中出现的一些安装包缺少的问题：

**↓这个问题的原因：**是sdk环境变量没配置，找到sdk路径，比如我的是E:\debelop\sdk，我复制这个路径，打开环境变量，新建一个变量，取名为ANDROID_HOME，然后在path变量里面最后加入;%ANDROID_HOME\%

**↓这个问题的原因：**一些android licenses没有同意，按上面的要求在命令行输入flutter doctor --android-licenses，回车，然后会出现要你输入y/n 你只要输入y 回车就好了。

↓其他问题：基本都是开发工具的配置了，这个就不多说了，大家应该很熟悉了。

（三）使用cmd执行flutter doctor报错：无法与服务器建立连接。

报错如下所示：

问题排查：

首先：我在电脑属性服务里面开启了BITS，这个问题已排除。其次：我的环境配置都是没问题的。

最后我看flutter官方安装文档推荐使用PowerShell，于是我打开PowerShell命令行（必须安装5.0+版本），输入flutter doctor，终于好了。所以为了不出奇怪的错误，请下载使用 PowerShell 5.0版本

（四） Flutter插件不支持当前AS版本。当前的AS是3.2，我的gradle编译的api是27的，可能Flutter目前最高只能支持26，果然我在build.gradle里面的编译版本改成了26，重新编译一下，OK了。

（五）系统重装了，flutter工具也是重新安装的，由于没有备份C盘的之前下载的三方库，导致项目加载的时候重新加载一大堆三方库，很卡，下载用了很长时间（需要科学上网）。

【顺便说明一下三方库使用方式】：

Flutter使用外部开源包，打开pubspec.yaml文件，在如下加了中文注释之处添加依赖库：

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  # 在这里添加依赖库，比这个是英文单词的库
  english_words：^3.1.0
  # 这个是图片选择的库
  image_picker: ^0.4.1
复制代码

格式：库名称: ^库版本号

注意：冒号是中文标点，有一些库需要^，不要忘记^

可以在 pub.dartlang.org 上找到开源软件包。（需要翻墙）直接添加依赖，可能会很慢，

也可以直接去https://pub.dartlang.org/packages/ 查找想要的依赖库，直接下载压缩包，然后复制到以下路径：

C:\Users\XXX\AppData\Roaming\Pub\Cache\hosted\pub.dartlang.org\(使用依赖库安装完成后的本地路径也是这个)，建议把这个文件夹备份，以便系统出故障之后或者重装系统之后好还原。

（六）明明开启了模拟器，可是AS就是不显示模拟器，如下图所示：

然后新建了一个API 26的模拟器，然后命令行窗口提示以下错误：

（七）编译一个demo居然安装包是30多M，这个也太坑了吧。。安卓原生的apk包最多就几M。但是这是debug模式下的apk包，签名打包后的release版本的包很小，大概几兆的样子。

（八）Flutter有一个Flutter Inspector的工具，主要是检查Widget的，可以用于诊断布局渲染问题，查看app当前的视图树结构。但是：这个视图树层次太深了，看起来很费劲有木有。。详细使用描述可以参考官网文档：doc.flutter-dev.cn/inspector/

【备注：】不同电脑视图树工具显示不一样，可能跟cpu是x86或者x64有关，另外一台电脑就没有这么多层次了，用到了哪些控件就显示哪些，很明确清晰。如下图所示：

九、几个相关学习网站

Flutter源码github链接 github.com/flutter/flu…
Flutter官方文档 flutter.io/docs/
Flutter中文文档 doc.flutter-dev.cn/
Dart语言官方主页 www.dartlang.org/
Dart语言中文社区 www.cndartlang.com/
Dart中文官网 www.dart-china.org/

另外可以推荐下载nodejs和 yarn，以后使用yarn下载更新包很方便。（这个不是重点，了解就可以了）

yarn官网 https://yarnpkg.com/zh-Hans/
yarn中文网 https://yarn.bootcss.com/
nodejs中文官网 https://nodejs.org/zh-cn/

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包项目）

（二）打开AS，点击 File --> New Flutter Project，选择Flutter application ，然后点击next，输入一个工程名字。

注意： 项目名称必须是小写，单词之间用下划线隔开，你看我这样创建就给我提示错误了，报错的如图所示。

（三）输入包名，点击next，点击finish，等待编译就可以了。如果没配置好，这个时候往往会报错。

注意： 这里可以支持ios和kotlin，如果需要的话可以勾上。

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

我用的AS3.2，我截个图，菜单栏跟以前版本有点不同，之前的AS版本可以在Build菜单找到编译选项的。

如果代码有更改，可以点击黄色的闪电图标

点击它之后就可以进行热加载。

（五）运行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证书引用的配置文件并命名为 /android/key.properties :

storePassword=<上一步中输入的 store 密码>
keyPassword=<上一步中输入的 key 密码>
keyAlias=key
storeFile=<keystore 文件的位置， 例如： /Users/<user name>/key.jks>
复制代码

（3）在 gradle 中配置签名选项

编辑您应用的 /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