本文共 8030 字，大约阅读时间需要 26 分钟。

意志力是一种有限的资源，如果之前已经消耗了太多，那么就很难再持续下去。

前言

Flutter踩坑记录。

• 开始踩坑需要了解下代码规范：，英文不好的请见：。
• 官方提供的一些Sample：

推荐资源

名称	说明
	Flutter中文网发起人写的一本关于Flutter开发的书。
	Flutter的中文社区。
	介绍了Flutter 1.9的新特性以及Flutter Web正式推出的消息。

现有方案对比

框架	RN	Weex	Flutter
编程语言	JavaScript	JavaScript	Dart
引擎	JSCore	JSCore	Flutter engine
框架程度	较重	较轻	重
特点	适合开发整体APP	适合单页面	适合开发整体APP
控件	原生	原生	符合MaterialDesign的控件，简洁美观，Google强推
社区	丰富，Facebook重点维护	托管在Apache，阿里维护	Google开源，社区处于蓬勃发展阶段
支持	Android、iOS	Android、iOS、Web	Android、iOS、Fuchsia

演示

• 详见：

安装环境

• 克隆Flutter代码仓库到本地：
  • sudo git clone https://github.com/flutter/flutter.git $HOME/Library/flutter
  • 需要自己配置下$HOME的全局变量。
• 配置Flutter的环境：
  • 放到~/.bashrc或者~/.zshrc中：vim ~/.bashrc orvim ~/.zshrc；
  • 之后source ~/.bashrc or source ~/.zshrc。

# Flutter 相关配置export PATH=$HOME/Library/flutter/bin:$PATHexport FLUTTER_ROOT=$HOME/Library/flutter# 国内临时镜像地址export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

• 使用flutter --version查看你是否安装成功了

➜  ~ flutter --versionFlutter 1.9.1+hotfix.4 • channel stable • https://github.com/flutter/flutter.gitFramework • revision cc949a8e8b (3 weeks ago) • 2019-09-27 15:04:59 -0700Engine • revision b863200c37Tools • Dart 2.5.0

• 检测系统中是否安装完全Flutter开发所需要的环境：Flutter doctor

➜  ~ flutter doctorDoctor summary (to see all details, run flutter doctor -v):[✓] Flutter (Channel stable, v1.9.1+hotfix.4, on Mac OS X 10.15 19A583, locale    en-CN)[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)[✓] Xcode - develop for iOS and macOS (Xcode 11.1)[✓] Android Studio (version 3.5)[!] IntelliJ IDEA Ultimate Edition (version 2019.2.3)    ✗ Flutter plugin not installed; this adds Flutter specific functionality.    ✗ Dart plugin not installed; this adds Dart specific functionality.[✓] VS Code (version 1.39.2)[!] Connected device    ! No devices available! Doctor found issues in 2 categories.

• 如果像我这种就是安装完全了，如果有✗的，表示没有安装成功，可以使用flutter doctor -v查看如何配置，按照提示配置环境即可，这里就不一一赘述。
• 在fluttor doctor -v安装遇到的问题都可以在下一章节中查找下解决方案，如果有其他的问题，也欢迎和我交流。

知识点

编译模式

’s format is low level and optimized for fast startup - it is essentially a list of objects to create and instructions on how to connect them together. That was the original idea behind snapshots: instead of parsing Dart source and gradually creating internal VM data structures, VM can just spin an isolate up with all necessary data structures quickly unpacked from the snapshot.

更多请见：

编译模式	说明
JIT模式-Just-in-time	动态（即时）编译，可以在运行即时编译，优势是可以动态下发和执行代码，劣势是也是对应会影响设备运行速度。
AOT模式-Ahead-of-time	运行时编译，提前编译生成类C的二进制代码，优势是可以较快速度的生成和执行平台代码，劣势是需要生成不同架构的版本。
Flutter编译模式	Kernel-snapshot「jit」 JIT Application Snapshots「app-jit」 AOT Application Snapshots「app-aot」

Dart

类型	文章	说明
基本语法		介绍了Dart的所有语法，中文版。
语法糖		介绍如何在一个类中混入新的能力。
数据类型
依赖
异步编程

Flutter

类型	文章	说明
UI
	Flutter 可滚动组件内嵌导致滚动失效问题
		核心思路： // 解决无限高度问题 shrinkWrap: true, // 禁用滑动事件 physics: new NeverScrollableScrollPhysics(),
-
路由
-
异步编程
-
自定义UI-基础知识
-
自定义UI-实战
-
生命周期	StatefulWidget	多个，详见下面章节。
	StatelessWidget	生命周期只有一个build

生命周期

Flutter Widget 采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用 Widget 构建 UI。

在 Flutter 里一切的组件都是一个 Widget，当 Widget 的状态发生变化时，Widget 会重新构建 UI，Flutter 会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。这种概念非常类似于 React 中的 VDOM 以及 Diff 算法，的确 Flutter 是从中借鉴的。同时 Flutter 的数据流也是单向绑定的。

Widget	生命周期	说明	Android	iOS
StatefulWidget

状态管理

Flutter更新记录

Flutter版本	更新记录
Flutter 1.12

躺坑记录

介绍了使用Flutter的一些躺坑记录。

更新依赖

如果发现拉取下来的代码仓库的.packages路径不是你的，可以使用下面的命令解决。

flutter pub pub cache repairflutter packages get

Flutter: Widget State: Is this code safe?

这个问题的正确解决方法：Pass the initial value to the constructor when creating the widget as a final value, and then get it from the State class.

更新Flutter配置

命令	说明
flutter config --android-studio-dir path-to-android-studio	配置Android Studio的路径。

pod setup一直没反应

配置完Flutter环境之后，使用flutter doctor检查下环境，会出现以下的提示：

[!] iOS toolchain - develop for iOS devices (Xcode 9.1)    ✗ CocoaPods not installed.        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.        For more info, see https://flutter.io/platform-plugins      To install:        brew install cocoapods        pod setup

按照命令安装一波：

brew install cocoapodspod setup

执行pod setup后，就只有光秃秃的➜ ~ pod setup，其他提示啥也没有……（脑阔疼）

使用flutter doctor看看：

➜  ~ flutter doctorDoctor summary (to see all details, run flutter doctor -v):[✓] Flutter (Channel stable, v1.9.1+hotfix.4, on Mac OS X 10.14.6 18G103, locale    zh-Hans-CN)[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)[!] Xcode - develop for iOS and macOS (Xcode 11.1)    ✗ CocoaPods installed but not initialized.        CocoaPods is used to retrieve the iOS and macOS platform side's plugin        code that responds to your plugin usage on the Dart side.        Without CocoaPods, plugins will not work on iOS or macOS.        For more info, see https://flutter.dev/platform-plugins      To initialize CocoaPods, run:        pod setup      once to finalize CocoaPods' installation.[✓] Android Studio (version 3.5)[!] IntelliJ IDEA Ultimate Edition (version 2019.2.3)    ✗ Flutter plugin not installed; this adds Flutter specific functionality.    ✗ Dart plugin not installed; this adds Dart specific functionality.[✓] VS Code (version 1.38.1)[!] Connected device    ! No devices available! Doctor found issues in 3 categories.

pod setup没有初始化成功……后来在github找到了相似的问题的解决方案

As per solution in #41253:sudo gem uninstall cocoapodssudo gem install cocoapods -v 1.7.5pod setupsudo gem install cocoapods (if you want latest version)

按照这个方式安装，命令行提示如下：

➜  ~ sudo gem uninstall cocoapodsSuccessfully uninstalled cocoapods➜  ~ sudo gem install cocoapods -v 1.7.5Fetching cocoapods-core-1.7.5.gemFetching cocoapods-1.7.5.gemSuccessfully installed cocoapods-core-1.7.5Successfully installed cocoapods-1.7.5Parsing documentation for cocoapods-core-1.7.5Installing ri documentation for cocoapods-core-1.7.5Parsing documentation for cocoapods-1.7.5Installing ri documentation for cocoapods-1.7.5Done installing documentation for cocoapods-core, cocoapods after 2 seconds2 gems installed➜  ~ pod setupSetting up CocoaPods master repo  $ /usr/bin/git clone https://github.com/CocoaPods/Specs.git --progress --  master  Cloning into 'master'...  remote: Enumerating objects: 107, done.  remote: Counting objects: 100% (107/107), done.  remote: Compressing objects: 100% (102/102), done.  remote: Total 3522904 (delta 29), reused 3 (delta 3), pack-reused 3522797  Receiving objects: 100% (3522904/3522904), 688.96 MiB | 1.53 MiB/s, done.  Resolving deltas: 100% (2139862/2139862), done.  Checking out files: 100% (364643/364643), done.CocoaPods 1.8.3 is available.To update use: `sudo gem install cocoapods`For more information, see https://blog.cocoapods.org and the CHANGELOG for this version at https://github.com/CocoaPods/CocoaPods/releases/tag/1.8.3Setup completed

非常完美的解决了pod setup一点反应都没有的问题：

➜  ~ flutter doctorDoctor summary (to see all details, run flutter doctor -v):[✓] Flutter (Channel stable, v1.9.1+hotfix.4, on Mac OS X 10.14.6 18G103, locale    zh-Hans-CN)[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)[✓] Xcode - develop for iOS and macOS (Xcode 11.1)[✓] Android Studio (version 3.5)[!] IntelliJ IDEA Ultimate Edition (version 2019.2.3)    ✗ Flutter plugin not installed; this adds Flutter specific functionality.    ✗ Dart plugin not installed; this adds Dart specific functionality.[✓] VS Code (version 1.38.1)[!] Connected device    ! No devices available! Doctor found issues in 2 categories.

常见控件

需要找什么库，直接到这个搜索引擎找即可：。

组件库

名称	说明
	The goal of this project is to provide an ultimate collection of real world app’s UIs. While I built Flutter UIKit for my own needs, it is also intented to showcase good app structure and a clean, well-organized Flutter codebase.
	常见的组件库集合网站
	整理了大量的Flutter库。

Toast

Flutter的Toast控件╮(╯▽╰)╭

ListView

组件名称	组件地址	组件说明
auto_refresh_list_view		一个是实现了下拉刷新和加载更多逻辑的ListView。更多请见文章：

附录

• 爱奇艺技术产品团队：

调研报告

扩展

• ：介绍了Dart写界面，Lua写业务逻辑的开发方式，详见Demo：。
• ：介绍了编译的流程。

转载地址：http://sqzrj.baihongyu.com/