Flutter学习笔记&学习资料推荐

对Flutter的学习已经有一段时间了，这里做一下总结记录，东西比较多，可能主要是一些学习资料的记录，还有一些杂七杂八的学习笔记。

Flutter 初体验

先说说对Flutter的感受吧，总的来说上手还是比较容易的，因为他的思想理念跟React十分相似，都是通过状态管理控制UI界面的更新，甚至连setState的方法名都是一样的，如果你是学习过类似React的框架的话，将很容易理解，基本可以直接开撸。但是它有好的地方，也有不好的地方。

好的地方：

• UI性能流畅， flutter的UI性能体验的确很棒（要运行release版本的，debug版本的并不流畅，我是运行到android手机的体验），整体的体验甚至超过了原生，至少在Android机上是这样的感觉，这点的确无愧它高性能渲染的招牌。与RN底层调用原生 Native 的 View 组件不同，Flutter使用Skia作为其2D图形渲染引擎，直接向GPU提供渲染数据，也就是说它的所有界面都是一帧一帧的绘制到界面上的，因此它的渲染速度要比RN更快一步。关于Skia，其实Android底层最终就是用的它绘制的，Flutter只不过是又拿来利用了，Skia是用C语言编写，基本可以在任何操作系统平台编译，因此不依赖于目标平台，这也就是为什么Flutter能跑在iOS平台的根本原因。
• Reload调试，flutter在调试模式下的Reload热加载机制, 使得写代码可以快速应用到手机上不用每次运行，只需保存一下即可；这跟AS的instant run还有本质的不同，在android当中我们每次都要运行一个完整的apk到手机上，这无疑增加了等待时间，而时间本身就是开发成本。
• 无需单独的界面文件，在flutter当中已经没有android原生或者web当中的界面和代码分开之说了，就是不会再有一个单独的文件来写类似xml或者html标签的了，其实这在React当中已经有体现了，React的JSX语法已经有意打破UI元素和纯js代码的界限。Flutter基于dart，而dart是面向对象语言，不管是UI组件还是数据源控制类，所有的东西都是new出来的对象，所以在flutter当中你几乎可以一把梭子撸到底，别提有多爽了。
• 支持平台众多，flutter目前支持的平台：android、iOS、fuchsia(Google自研，感觉目前要凉凉)、web、linux、windows、macOS，可以看出Google想利用flutter一统江湖的野心还是比较大的。如果未来Google真的能在这么多平台上优化好Flutter, 那么在未来Flutter无疑是真香定律。

不好的地方：

• 嵌套地狱，这也是为人诟病和业界吐槽最多的地方：
  
  这个图我还没有截全，可以看出，只是一个简单的demo他的嵌套层级就如此之多，让你分不清的括号。。眼已瞎。。。真到实际项目中的话，简直要人命。前面提到它的好处，可以一撸到底，也许这可能就是它一撸到底的代价，当然嵌套问题在其他语言当中本身也会存在，但是一般情况下不会那么明显，比如android开发中的布局xml文件，如果你的布局复杂的话也会嵌套的层次比较深，还有web开发中的html标签也可能会嵌套的很深，但是在Flutter当中这个缺点被无限的放大了，原本在其他语言当中不需要嵌套一层的在flutter中就不行，比如padding（内边距）, 在android当中基本上是所有UI控件的一个基本属性，而在web当中你可以通过css来控制，但是在flutter中你必须在需要加padding的控件外面包一层。有部分开发人员已经就这个问题并从技术上做了一些改变，但实际使用感觉有些也不是很理想，文章的后面我会分享。
• 平台Native能力缺乏， flutter一个致命的点就是对原生多媒体的使用以及一些复杂控件的展示等能力十分脆弱，比如我要用Camera拍照、要获取设备的图片、要申请权限、使用WebView(Flutter中没有自带的WebView控件)等等，可能不止这些，基本上是涉及到平台硬件能力相关的，在flutter中这些只能通过去开发原生插件的方式去实现(Flutter SDK中为提供了响应的Flutter API与原生API进行交互的方法)。在flutter的官方github上为我们提供了一些官方的常用插件，但是实际当中还是会有需要自己去开发原生插件的情况，作为开发者这时就会很吃力了，因为你不但需要开发android版本的还需要同时开发ios版本的相应功能，这样你才能完整的开发完一个至少满足两个平台的Flutter原生插件。如果你不是两端都会的话，可能需要两端的人来同时参与插件的维护。而且如果在未来你希望你的插件除了android和ios外支持更多的平台，那么同一套插件可能需要更多平台的人来维护，比如有某个插件在手机端android和ios都实现了拍照功能，那么有一天希望它能在windows上面跑的话，就需要插件添加对win平台的拍照能力支持。

Flutter 环境配置

首先你要知道Flutter的中文官网：https://flutter.cn/
Flutter SDK的下载地址：https://flutter.cn/docs/get-started/install
你也可以直接在官方上点击“开始使用”跳转到这个页面，选择对应的操作系统安装就可以了。建议直接下载zip包的方式安装，因为clone的方式去下载github的代码很慢。

在windows上安装完毕后，需要将flutter\bin的完整路径添加到系统环境变量的path即可，最后运行命令flutter doctor进行检测，这里可能会遇到一些问题，不过基本在网上能找到解决方法，可自行查找。另外你需要在android studio中安装Dart插件和Flutter插件：

另外为了摆脱天朝网络封锁，使用flutter的时候有时下载依赖库会很慢，还需要配置如下环境变量：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

其实就是配置了两个镜像网站，当然还有很多其他的镜像网站可用，
你可以在这里找到更多： 在中国网络环境下使用 Flutter

最后在安装完SDK后，打开如下目录：

D:\flutter_windows_1.20.3-stable\flutter\packages\flutter_tools\gradle

打开该目录下的flutter.gradle文件修改如下内容：

buildscript {
    repositories {
        //google()
        //jcenter()
		maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.0.1'
    }
}

class FlutterPlugin implements Plugin<Project> {
    //private static final String DEFAULT_MAVEN_HOST = "https://storage.googleapis.com";
	private static final String DEFAULT_MAVEN_HOST = "https://storage.flutter-io.cn";
	...
}

至于为啥这样改就不用多说了，做android开发的应该比较清楚，其实主要是针对android端的，另外gradle插件不一定是4.0.1的可以根据你的AS版本来。网上有人说还要修改resolve_dependencies.gradle文件中的地址，但是我修改了会出现问题，其实在最新版的文件里，它已经替换成你前面配置的环境变量的值啦，你可以看到：

Flutter 学习书籍

• 第一个首推wendux的《Flutter实战》 (机械工业出版社/2020-03-20出版)
  
  作者是国产巨佬，书的内容质量自然是没话说，讲的非常详细，几乎各个方面都涉及到了，而且有示例代码，可以边看边实践，应该有很多小伙伴跟我一样看的是这本。 作者写的网络请求开源库Dio已经成了Flutter社区最流行的网络请求库, 看了确实不错，好像很多人也都在用这个。
  
  需要指出的是，该书有部分内容可能你只需要了解大概实现原理，实际中pub社区有现成的库可以直接依赖使用，如第七章中的跨组件状态共享Provider我们可以直接使用provider库；json转Model序列化中提到的json_model库可以使用json_to_model这个库来代替, 因为他原来的库好像没有升级了依赖有点冲突问题；关于原生插件开发一节内容建议可以直接去看官网的介绍，因为最新的plugin实现方式好像与文中提到的略有不同了，已经不需要在一个MainActivity去做了。其他基本没有啥大问题。

• 另外一个推荐的是《Flutter In Action》(美国Manning(曼宁)出版社/2020-1月出版)
  
  不过这本书是外国的，目前国内市面上还买不到，京东预售价居然要486？还是看电子版的好啊，我放在了百度网盘上：
  链接：https://pan.baidu.com/s/1ZFtzlo5xX0YjxIC6AlHCcg
  提取码：vsux
  
  只可惜该书目前没有中文翻译版的，全书都是英文版的，看得可能会有些吃力（正在研读中。。）不过美国人写书的视角跟中国人完全不同，书里介绍的也非常详细，看完应该能学到很多，毕竟flutter也是外国人开发的。

Flutter更新的速度也是够快，还没有一本书能追上它更新的速度。

Dart 开发语言

Flutter是一个高性能的渲染引擎框架，本身不是一门语言，它是使用Dart语言开发的，就像Android是用java、H5是用js开发的一样，首先要学习了解的是Dart语言。

关于Dart，它其实是一个集成了众多优秀开发语言如 Java、JS、C++、C#等语言的优秀特性的一个面向对象的开发语言，如果你是接触过web开发或者是客户端原生开发的，学习dart几乎不费力，简直可以无缝过渡，因为你能看到一些你非常熟悉的东西，所以花一天或半天的时间了解一下就可以了。

主要记住Dart是一个纯面向对象的，强类型的语言，这点很重要。

学习Dart的主要网站还是先看官网的：Dart编程语言中文官网，
我觉得官网的这个是必看的：Dart语言概览
官网除了Dart语言概览还有其他内容，可以简单浏览一下，用的时候再详细查。

除了官方的网站，下面的博文你可以选择性的学习：

• Dart 中 List 数组的常用方法

• Dart快速学习之路

• flutter开发之Dart[必读篇]

• Dart语言之从入门到放弃

其中第一个可以看一下，毕竟数组是开发中高频使用的东西，其他三个看一个就可以了，内容基本类似，跟官网的教程查不多，但是有些细节会提到不一样的地方。如果是纯练习Dart语法的话，你可以使用Visual Studio运行，参考上面的第二个博文链接里有介绍。另外，如果已安装了Flutter SDK的话是不需要再另外单独安装Dart SDK的，因为Flutter SDK中已经包含了Dart。

Flutter 官网教程

除了wendux的《Flutter实战》, 官网的 Flutter 开发文档 有些内容也是初学者必看的，我这里把我看的觉得重要的列一下：

• Flutter 中的布局

• 布局构建教程

• 深入理解布局约束

• 处理边界约束 (Box constraints) 的问题

• 在后台处理 JSON 数据解析 (可以学到如何在不阻塞界面的情况下处理耗时任务)

• Flutter Packages 的开发和提交

• 升级Android插件（如果是新开发一个插件的话直接看它最后的介绍）

• 使用 Flutter inspector 工具

其中关于布局约束一节官方总结的很精辟：

可能英文的这张图片更好理解，说的更加简洁：

理解Flutter的布局约束原理对于流畅的书写布局十分重要，布局时你可能不会感到像android中那样舒服，因为经常会遇到一些约束边界报错的问题或者溢出问题，官网教程给出了大概的原理可以帮助你理解并解决这些问题。

关于最新版的插件开发方式官网介绍的还不是很详细，补充两篇：Flutter Plugin插件开发填坑指南、Flutter 插件的创建及使用

其实最新的主要是通过实现一些接口来做的：

public class MyFlutterPlugin implements FlutterPlugin, ActivityAware, MethodCallHandler {
   
	....
}

Flutter还支持将原生应用的部分页面替换成flutter, Android中集成教程可以看这里 在 Android 中集成 Flutter

Flutter pub 社区

Flutter 提供了一个发布网站，可以搜索别人开发好的插件：https://pub.dev

一些官方推荐的插件还有一些优秀个人开发的插件都会在这上面能搜索到，如果你想使用某个功能，如获取照片？拍照？像gilde一样的具有缓存功能的网络图片加载库？首先到pub上搜索，将大大减少你的开发时间，当然如果你有好的插件也可以开源发布到pub上给别人使用。

注意：pub上只支持英文package插件名的搜索，搜中文是搜不到的

下图是Flutter提供的官方维护的插件列表：

需要的可以直接按名字到pub上去搜索，一般搜索结果的第一个就是。只看名字你就能猜出来，很多插件基本上是完全模仿的android开发当中的库。其中有一些开发中会高频使用到的，如device_info获取设备信息、camera拍照、image_picker图片选择、shared_preferences类似android的sp存取数据、path_provider文件操作、url_launcher打开外部链接、video_player视频播放、webview_flutter浏览器等。当然官方维护的插件在Github上也提供了源码，需要的话可以直接下载下来修改代码然后本地使用或者作为新版本发布到pub, 官方的插件源码也提供了插件开发方式最好的学习例子。

另外补充一些比较好用的插件：

插件名字	功能
dio	超级好用的网络请求库
sqflite	类似android中的sqflite数据库
fluttertoast	类似android中的toast功能
wechat_assets_picker	类似原生的微信图片选择器
flutter_staggered_grid_view	支持瀑布流的gridview, 比flutter自带的强大太多
provider	跨组件状态共享的官方推荐库
event_bus	类似android中的EventBus消息通信开源库
web_socket_channel	websocket库在官方自带的基础上封装的
flutter_webview_plugin	比官方的功能要好一点的，官方的插件目前还是开发者预览版
json_annotation	json序列化注解，详细使用可以参考《Flutter实战》中的介绍
json_serializable	json序列化工具dev_dependencies库，详细使用可以参考《Flutter实战》中的介绍
json_to_model	Json文件转Dart类工具dev_dependencies库，《Flutter实战》中json_model 优化版本
intl	国际化翻译，详细使用可以参考《Flutter实战》中的介绍
intl_translation	国际化翻译工具dev_dependencies库，详细使用可以参考《Flutter实战》中的介绍
cached_network_image	一个支持占位图和图片缓存的网络图片加载库 还可以支持图片下载进度
progress_dialog	轻量级的进度等待弹窗控件 类似android系统默认进度弹窗
camera_camera	相机拍照录视频插件，比官方的好用一些

Flutter 学习实例

以下列举一些都是我在G站上发现的，虽然有些功能不是很完善，但是当做入门实例来学习的都是相当不错的：

• Flutter版的微信客户端框架：wechat_flutter

• Flutter版的玩android客户端：flutter_wanandroid

• Flutter版的玩android客户端2：WanAndroid_Flutter

（PS：这里吐槽一下 感觉鸿洋的玩android网站要被玩坏的节奏啊，各种版本的玩android： java版的、 kotlin版的、小程序版的。。现在又出了flutter版的，光flutter版的github上就一搜一大堆。。不过他的网站上有开放的API请求接口可以使用，拿来练手的确是最好不过的了，也难怪这么多人拿它来开刀。。。）

• Flutter版的Github客户端实例：gsy_github_app_flutter （这个作者也写了一本Flutter开发的书，可以去看看）

• Flutter 练习项目：flutter_deer （更切近实际开发问题）

更多实例参考：flutter-do 、 awesome-flutter（这个是国外大神维护的）

另外特别推荐两个可以用来当做API控件功能查询使用的：

• Flutter UI集录指南: FlutterUnit(特点是可以一边看效果一边展开当前效果对应的代码，demo支持手机/桌面/web端，支持搜索，UI也比较漂亮)
• Flutter 控件大全_老孟（这个就更厉害了，330多个控件每个控件的使用例子他都整理了，支持搜索，感觉有了这个都不需要去官网查API了。。老孟是个狠人。。。）

Flutter 的一些实际开发问题

下面几篇是超级干干干货的Flutter文章，特别实用，介绍了很多实际开发场景中遇到的问题及解决方法：

• Flutter开发中的一些Tips

• Flutter开发中的一些Tips（二）

• Flutter开发中的一些Tips（三）

• 正确操作Dart中的字符串【译】

• Flutter三种方式实现页面切换后保持原页面状态

下面是我在学习过程中遇到的一些问题：