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

前言

Flutter踩坑记录。

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

名称	说明
《Flutter实战》	Flutter中文网发起人写的一本关于Flutter开发的书。
Flutter中文网	Flutter的中文社区。
Flutter 1.9的新特性	介绍了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

演示

详见：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

使用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

检测系统中是否安装完全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.

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

知识点

Dart

Flutter

UI

文章	说明
Text的使用
Flutter 可滚动组件内嵌导致滚动失效问题	ListView / SingleChildScrollView 组件与其子组件 GestureDetector / Listener 手势（拖动）冲突的问题
ListView嵌套ListView	核心思路： // 解决无限高度问题 `shrinkWrap: true,` // 禁用滑动事件 `physics: new NeverScrollableScrollPhysics(),`

路由

Flutter 路由管理（一）

异步编程

Flutter篇之你真的会使用Future吗？

自定义UI

基础知识

实战

Flutter的更新记录

Flutter 1.12

问题

更新依赖

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

flutter pub pub cache repair
flutter packages get

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

命令	说明
`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 cocoapods
pod setup

执行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.

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)

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

➜  ~ 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

非常完美的解决了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.

常见控件

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

组件库

名称	说明
Flutter-UI-Kit	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代码库	常见的组件库集合网站
Flutter 一些常用库插件【一路整理】	整理了大量的Flutter库。

Toast

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

FlutterToast

ListView

组件名称	组件地址	组件说明
auto_refresh_list_view	github地址	一个是实现了下拉刷新和加载更多逻辑的ListView。更多请见文章：Flutter-使用MVP设计模式封装刷新列表组件

附录

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

扩展

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

Notzuonotdied

发布了181 篇原创文章 · 获赞 217 · 访问量 45万+

他的留言板关注

Flutter 入门与踩坑指南

前言

推荐资源

现有方案对比

演示

安装环境

知识点

Dart

语法糖

数据类型

依赖

异步编程

Flutter

UI

路由

异步编程

自定义UI

Flutter的更新记录

Flutter 1.12

问题

更新依赖

Flutter: Widget State: Is this code safe?

更新Flutter配置

pod setup一直没反应

常见控件

组件库

Toast

ListView

附录

扩展

猜你喜欢