版权声明：本文为博主原创文章，未经博主允许不得转载转载请标明出处：本文出自 AWeiLoveAndroid的博客

号外：下载谷歌浏览器掘金插件，搜索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相关环境

（二） 卸载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点需要特别注意的：
Flutter，这里面有4个工具，缺一不可：Flutter本身的安装包，Framework（这是flutter的核心代码部分），Engine（flutter的引擎），Dart sdk。
下面是安装过程中出现的一些安装包缺少的问题：
**↓这个 问题的原因：**是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 常用的命令行
以下是常用命令：
当我们创建了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