Flutter 入门与踩坑指南_flutter config --android-studio-dir

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

前言

Flutter踩坑记录。

• 开始踩坑需要了解下代码规范：Effective Dart: Style，英文不好的请见：dart/flutter 中的代码规范。
• 官方提供的一些Sample：Sample

推荐资源

现有方案对比

演示

• 详见：https://flutter.github.io/samples

安装环境

• 克隆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:$PATH
export FLUTTER_ROOT=$HOME/Library/flutter
# 国内临时镜像地址
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
1
2
3
4
5
6

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

➜  ~ flutter --version
Flutter 1.9.1+hotfix.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision cc949a8e8b (3 weeks ago) • 2019-09-27 15:04:59 -0700
Engine • revision b863200c37
Tools • Dart 2.5.0
1
2
3
4
5

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

➜  ~ flutter doctor
Doctor 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

知识点

编译模式

Snapshot’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.

更多请见：Introduction to Dart VM

Dart

Flutter

生命周期

Flutter widget框架

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

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

状态管理

• 八种 Flutter 状态管理-深入评论
• Flutter | 状态管理特别篇——Provide

Flutter更新记录

躺坑记录

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

更新依赖

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

flutter pub pub cache repair
flutter packages get
1
2

• flutter pub pub cache repair

Flutter: Widget State: Is this code safe?

• 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配置

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
1
2
3
4
5
6
7
8

按照命令安装一波：

brew install cocoapods
pod setup
1
2

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

使用flutter doctor看看：

➜  ~ flutter doctor
Doctor 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

CocoaPods installed but not initialised #41291

As per solution in #41253:
sudo gem uninstall cocoapods
sudo gem install cocoapods -v 1.7.5
pod setup
sudo gem install cocoapods (if you want latest version)
1
2
3
4
5

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

➜  ~ sudo gem uninstall cocoapods
Successfully uninstalled cocoapods
➜  ~ sudo gem install cocoapods -v 1.7.5
Fetching cocoapods-core-1.7.5.gem
Fetching cocoapods-1.7.5.gem
Successfully installed cocoapods-core-1.7.5
Successfully installed cocoapods-1.7.5
Parsing documentation for cocoapods-core-1.7.5
Installing ri documentation for cocoapods-core-1.7.5
Parsing documentation for cocoapods-1.7.5
Installing ri documentation for cocoapods-1.7.5
Done installing documentation for cocoapods-core, cocoapods after 2 seconds
2 gems installed
➜  ~ pod setup
Setting 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.3

Setup completed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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

➜  ~ flutter doctor
Doctor 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

常见控件

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

组件库

Toast

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

• FlutterToast

ListView

附录

• 爱奇艺技术产品团队：Flutter跨平台Hybrid实践

调研报告

• Flutter试用报告

扩展

• Flutter通用基础库flutter_luakit_plugin：介绍了Dart写界面，Lua写业务逻辑的开发方式，详见Demo：flutter_luakit_demo。
• 手把手教你编译Flutter engine：介绍了编译的流程。
• Flutter从配置安装到填坑指南详解