Flutter : FAQ

[hhstore]

related:

• Flutter: Index #202
• xxx

[hhstore]

flutter FAQ Index:

官方 FAQ:

• https://flutter.cn/docs/resources/faq
• https://github.com/flutter/flutter/wiki/Roadmap
• https://github.com/flutter/flutter/milestones?direction=asc&sort=due_date&state=open

LIST:

• 一些杂项列表

[hhstore]

flutter 架构说明:

• https://flutter.cn/docs/resources/technical-overview
• FAQ: https://flutter.cn/docs/resources/faq
  • 解答了很多flutter技术细节 & 生态 & 发展状况.

原则:

• 一切皆 Widget: Everything’s a widget
• 组合大于继承: Composition > inheritance
• 层次蛋糕非常美味: Layer cakes are delicious

• 层次:

为什么不用 js 系列方案(vue.js/react.js/electron) ?

• 开发成本巨高. js 的美好, 只是表象. 冰山下面都是深坑.
• 根本原因:
  • fuck the CSS. CSS 是坨臭狗屎.
  • fuck the CSS. CSS 是坨臭狗屎.
  • fuck the CSS. CSS 是坨臭狗屎.
• 详细说明: Flutter: Index #202 (comment)

关于 dart 和 flutter 的严肃讨论:

• https://zhuanlan.zhihu.com/p/127075348
• https://zhuanlan.zhihu.com/p/126452592
• https://zhuanlan.zhihu.com/p/70070316

dart 速读:

• https://dart.cn/samples
• 语法点速查: https://dart.cn/codelabs/dart-cheatsheet

语法点分析:

• 基本类似 Python3.5+ 特性.
• 部分类似 es6.
• 语法风格没太多槽点.

[hhstore]

flutter 桌面版:

• https://github.com/go-flutter-desktop/hover

方案对比:

官方:

• https://flutter.dev/desktop

项目:

• https://github.com/google/flutter-desktop-embedding
  • 暂时不成熟.
• flutter Desktop shells: https://github.com/flutter/flutter/wiki/Desktop-shells
  • 生产实践选择方案

文档:

• https://www.kikt.top/posts/flutter/desktop/flutter-desktop-1/
• https://www.cnblogs.com/hupo376787/p/10990899.html
• https://jonny-huang.github.io/flutter/flutter_005/

第三方: go-flutter:

• https://github.com/go-flutter-desktop/go-flutter
  • flutter binding 方案
• 工具: https://github.com/go-flutter-desktop/hover
• 示例: https://github.com/go-flutter-desktop/examples

文档:

• go+flutter: https://www.kikt.top/posts/flutter/desktop/go-desktop-engine/flutter-go-desktop-1/
• go+flutter: https://www.kikt.top/posts/flutter/desktop/go-desktop-engine/flutter-go-desktop-2/

ref:

• https://www.kikt.top/posts/flutter/desktop/flutter-desktop-1/
• https://www.kikt.top/posts/flutter/desktop/flutter-desktop-2/

flutter for web:

• https://flutter.cn/web
• https://flutterchina.club/web-analogs/
• https://flutterchina.club/technical-overview/

[hhstore]

为什么不用 js 系列方案(vue.js/react.js/electron) ?

• 初衷:
  • 最近要写桌面版 app, 花了1-2周时间在使用 electron 写 demo, 基本 API 也都搞明白了.
  • 最终写自己的小功能, 又在 CSS 上卡住了. 嗯. 毫不意外.
  • js 生态的编译报错, 还是头秃的很. 因为原本前端经验就不多. 并不是解决不了报错问题.
  • 只是每次踩坑, 花费时间太久, 和原本的目标, 背道而驰. (原本希望快速写 app).

fuck the CSS/JS:

• 写 app 避免不了 UI 布局. 每次写 js, 都会在 写 CSS 的时候, 头秃.
• 每次想干点啥, 都会被复杂的 CSS 劝退.
• js 生态的问题:
  • 包安装失败:
    • node 版本导致安装失败: v10.x 和 v12.x 以及各种 node 版本. 头秃.
    • npm 能安装, yarn 安装失败. 没错, 搜报错, 能解决, 无非是还要装别的啥...问题是, 时间 cost 呢?
    • npm 能安装, yarn 安装失败. 没错, 搜报错, 能解决, 无非是还要装别的啥...问题是, 时间 cost 呢?
  • 编译报错:
    • node 版本导致: 升版本, or 降版本.
    • js 依赖包 版本导致: 升版本, or 降版本.
    • electron 版本导致: 升版本, or 降版本. 不清楚 API 究竟哪个版本好使, 小版本 try.
    • webpack 奇怪的配置项: 呵呵, 那么问题来了, 继续了解 webpack.
• css 玄学问题:
  • 一会显示, 一会不显示, 浪费巨量的时间 debug 样式.
  • 各种莫名其妙的嵌套坑
  • 布局规则太复杂繁琐, 我只是写个小 app, 缺浪费时间在学 CSS 手册.
  • 这跟当年无比痛恨 C++ 是一个道理. 过多的语言细节, 干扰业务开发.
• 总结:
  • fuck the CSS !
  • fuck the CSS !
  • fuck the CSS !
  • 时间成本, 耗不起. 学习 js 和 js 生态, 成本能接受. 但是 css, 不可控.
  • CSS 毫无疑问是垃圾, 没有学习价值. 未来必然被淘汰, 没有必要浪费时间在此.
  • es6 和 typescript 问题. 引入 ts, 各种编译工具链配置问题.
  • js 糟糕的生态系统, 是个无底洞. 会因为一个坑, 陷入另一个. 最终死循环.
  • 花费巨量时间在解决垃圾生态和不成熟的工具/lib/引入的各种问题.
• 前端生态的不成熟:
  • web 发展到2020年. 前端的生态, 虽然比 2000年和2010年的时候, 好太多. 但依然是糟糕+混乱的.
  • 过去的时代, 是简陋, 原始. 当前是混乱无序, 一个 js 的 lib 还没成熟, 就被其他 lib 取代了. 各种糟糕的版本不兼容问题.
  • 前端开发, 没搞明白, API 向下兼容的意义.
• 态度:
  • 嗯. 人生苦短. 这是最后一次尝试用 js 做主要语言, 再此被 CSS 击倒
  • 未来再也不会花太多时间在 js 和 typescript 和 css 生态上.
  • 弃用各种基于 js +css 的 app 方案: electron / uni / react-native 等 各种基于 js 的 app 方案.
  • web 的东西, 还是远离 css. 实在没有过多的精力浪费在这堆垃圾上.

flutter + dart 能解决问题吗?

• about dart 和 flutter:
  • 很长一段时间, 我并不看好 flutter. 也跟很多人表达过看法.
    • 市场原因 + 易用性+ 通用性: js 才是主流.
    • 跨平台, 一直是最难的问题. 从0做起, 风险巨高.
    • google 内部对 Android 和 dart 的支持, 内部纷争. 难讲.
    • 技术领先, 市场失败的东西. 太多: firefox, Qt, nim, erlang, 塞班, C#(哈哈), 微软系列.
  • 当然, 也是因为长久以来, 我并不写 js 和 css. 讲真, 写 js+css 的恶心, 比写 C++ 痛苦百倍.
  • 一直反思这些年, 为何我 前端水平依然是半瓶水? 深层原因: 还是内心对 css 的抗拒, 厌恶. 甚于当年写 java.
• dart 和 flutter 如何:
  • 能解决需求. 语言不太烂, 工具还算成熟. 比起 css. 这个成本. 可控.
  • 因为讨厌 CSS, 宁愿从0学一门新语言 dart+新框架 flutter.
  • flutter 的 UI 布局规则, 跟当年看 Qt / MFC 差不多.
  • UI 布局规则看下来, 在讲人话. 人话就是3s 看懂, 知道如何改, 且改的对.
  • 如此讨厌, 是因为评估浪费在 CSS 上的时间, 远远超过掌握 dart 和 flutter.
  • 你花费再多时间搞明白 css 这坨屎, 也改变不了, 长期与屎相伴. 这是品味问题.
• so, 2020年, 点亮新技能, 就再学一门新语言吧.

[hhstore]

flutter 版本时间线:

• https://mp.weixin.qq.com/s/dohdmDM0GjjUY2wG762r1Q

• https://www.colabug.com/2018/0314/2475126/

• 官方 FAQ: https://flutter.cn/docs/resources/faq

• Flutter 1.0 已于 2018 年 12 月推出.

• 实际 flutter 有影响力, 要在2018年, 发布1.0版本之后. 之前, 其实并无多少人关注.

• Flutter的前身是 Google 内部孵化的Sky项目，于2014年10月在 GitHub 上开源一年后，于2015年10月正式更名为Flutter。

• Flutter是众多跨平台框架中的一个，其不同之处在于采用了自绘UI+原生的实现方案，相比于H5+原生和JavaScript开发+原生渲染类的方案，这是一种更为彻底的方案，并且它天生具备两大优点：

在不同平台的 UI 表现可做到高保真度、高一致性
绘制 UI 的性能和原生控件接近

• Flutter的目标在于做全平台！开发者只需使用同一套基准代码，便可为移动平台、桌面端和网页端开发应用。而目前来看Flutter所支持或将支持的平台已经有 Android、iOS、Fuchsia、Chrome OS，另外我认为未来支持鸿蒙OS（一款让我们引以为傲的操作系统）也必将是件水到渠成的事~

Roadmap:

• https://github.com/flutter/flutter/wiki/Roadmap
• 官方的规划.

milestones:

• https://github.com/flutter/flutter/milestones?direction=asc&sort=due_date&state=open
• 官方的版本节奏.

[hhstore]

flutter 编译 Android 非常慢问题:

• flutter 2.8
• macOS12

现象:

• 问题1: 编译非常慢.
  • macos 下, flutter 编译 + install 到 Android 手机, 非常慢(300s-1000s)
  • 编译 300-1000s, install 是300s.
  • 非常不正常.
• 问题2: hot reload 卡死, 不可用(也是几百秒)

异常 install:

问题原因:

• 推测是双端 adb 问题, (mac 端/Android 端)

解决办法:

• 修复问题1: 重启 Android 手机. 解决.
• 修复问题2: Mac 下, 重启 adb.
• https://stackoverflow.com/questions/29826101/how-to-restart-adb-manually-from-android-studio

adb kill-server
adb start-server

正常的运行状态:

# Android 正常状态:

Launching lib/main.dart on Redmi K30 Pro in debug mode...
Running Gradle task 'assembleDebug'...                             18.7s
✓  Built build/app/outputs/flutter-apk/app-debug.apk.
W/FlutterActivityAndFragmentDelegate(13300): A splash screen was provided to Flutter, but this is deprecated. See flutter.dev/go/android-splash-migration for migration steps.
I/flutter (13300):  🐛  >> init AppConfig



# iphone 正常状态:

Automatically signing iOS for device deployment using specified development team in Xcode project: xxxx
Running pod install...                                              6.6s
Running Xcode build...                                          
Xcode build done.                                           104.6s
Installing and launching...                                     
flutter: 🐛     >> init AppConfig

[hhstore]

1

[hhstore]

xxxxxx:

xxxxxxxxxxxxxx	xxxxxxxxxxxxxx	xxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx