References

[ShannonChenCHN]

[ShannonChenCHN]

业界实践分享

阿里巴巴 阿里集团内如何进行Flutter体系化建设？ https://juejin.im/post/5e85ae636fb9a03c741366f3

【淘系技术】AliFlutter 八场直播精华内容+PPT整理 https://juejin.im/post/5ea8f313f265da7b95054cb7

揭秘！如何用Flutter设计一个100%准确的埋点框架？ https://mp.weixin.qq.com/s/3LZWyA-rcE6CwTC3hLxoPg

闲鱼 Flutter新锐专家之路：混合开发篇 https://juejin.im/post/5b764acb51882532dc1812b1 已开源|码上用它开始Flutter混合开发——FlutterBoost https://mp.weixin.qq.com/s?__biz=MzU4MDUxOTI5NA==&mid=2247484367&idx=1&sn=fcbc485f068dae5de9f68d52607ea08f&chksm=fd54d7deca235ec86249a9e3714ec18be8b2d6dc580cae19e4e5113533a6c5b44dfa5813c4c3&scene=0&subscene=131&clicktime=1551942425&ascene=7&devicetype=android-28&version=2700033b&nettype=ctnet&abtest_cookie=BAABAAoACwASABMABAAklx4AVpkeAMSZHgDWmR4AAAA%3D&lang=zh_CN&pass_ticket=1qvHqOsbLBHv3wwAcw577EHhNjg6EKXqTfnOiFbbbaw%3D&wx_header=1 Flutter 原理与闲鱼深度实践 https://mp.weixin.qq.com/s?__biz=MzAxNDEwNjk5OQ==&mid=2650404235&idx=1&sn=7bd1ffb601a769afa797c8c52cf54142&chksm=83953d93b4e2b4854cf8b09d55c8c5657d3c2c6b99e0179229be7de9c67cf2e5fa05fc14873f&scene=27#wechat_redirect

蚂蚁金服

蚂蚁财富的 Flutter 多业务开发实践 视频：https://time.geekbang.org/dailylesson/detail/100045236 内容：https://www.infoq.cn/article/YkW0h3Gwd1QSyJrYHNvP PPT：https://static001.geekbang.org/con/55/pdf/780305963/file/3-%E5%A4%9A%E4%B8%9A%E5%8A%A1%E5%BC%80%E5%8F%91%E5%AE%9E%E8%B7%B5.pdf

腾讯音乐 Flutter 核心原理与混合开发模式 https://mp.weixin.qq.com/s/SK64Yl_FoS6kdNU0KAdPGg Flutter 混合开发模式探索 https://mp.weixin.qq.com/s?__biz=MzI3NTk4OTk3Nw==&mid=2247483880&idx=1&sn=7e2c19d56ee6a1059fb3439700a4f0e5&scene=21#wechat_redirect Flutter Boost 混合开发实践与源码解析 https://mp.weixin.qq.com/s?__biz=MzI3NTk4OTk3Nw==&mid=2247483870&idx=1&sn=b35cd6076f909463fc1cff39479e2a59&scene=21#wechat_redirect

字节跳动 即将开源 | 让Flutter真正支持View级别的混合开发 https://mp.weixin.qq.com/s/-vyU1JQzdGLUmLGHRImIvg

Flutter在字节跳动的现状与工程实践 视频：https://time.geekbang.org/dailylesson/detail/100045227 PPT：https://static001.geekbang.org/con/55/pdf/2456361367/file/%E6%9E%97%E5%B8%85%E6%96%8C%20%20Flutter%20%E5%9C%A8%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8%E7%9A%84%E7%8E%B0%E7%8A%B6%E4%B8%8E%E5%B7%A5%E7%A8%8B%E5%AE%9E%E8%B7%B5.pdf 文章：https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247493836&idx=1&sn=979792491d0abe803c0f00ed412fb0de&chksm=f9525d8fce25d499f5c9815529f7fc25d5e130986a44e430352e375b77d5fe727a8d88f783e1&mpshare=1&scene=1&srcid=&sharer_sharetime=1582811190556&sharer_shareid=b37c346ca5a345410d47741175cc1271&rd2werd=1#wechat_redirect

跨平台技术趋势及字节跳动 Flutter 架构实践 | Flutter 沙龙回顾 https://juejin.im/post/5de75c6b518825127c26f0e7

字节跳动为什么选用Flutter：并非跨平台终极之选，但它可能是不一样的未来 https://mp.weixin.qq.com/s/SaIAQ22gbB4nJsDQj3QwrQ

如何缩减接近 50% 的 Flutter 包体积 | Flutter 沙龙回顾 https://juejin.im/post/5de8a32c51882512664affa4

西瓜视频落地 Flutter，给你的避坑指南 https://mp.weixin.qq.com/s/sgcVDN6tZ8ERvXyN-l_28A

美团 Flutter原理与美团的实践 https://juejin.im/post/5b6d59476fb9a04fe91aa778

美团外卖Flutter动态化实践 https://juejin.im/post/5ef58245f265da23073985d8

MTFlutter：美团外卖Flutter容器化生态建设实践 https://v.qq.com/x/page/b0933jjuov4.html https://static001.geekbang.org/con/55/pdf/3866789929/file/%E9%99%88%E8%88%AAMTFlutter%20%E7%BE%8E%E5%9B%A2%E5%A4%96%E5%8D%96Flutter%E5%AE%B9%E5%99%A8%E5%8C%96%E7%94%9F%E6%80%81%E5%BB%BA%E8%AE%BE%E5%AE%9E%E8%B7%B5.pdf

京东 JDFlutter | 京东技术中台新一代跨平台开发框架 https://mp.weixin.qq.com/s/YEUU4VIJlsa9S4jtcBSvoQ 京东技术中台Flutter实践之路（二） https://mp.weixin.qq.com/s/1NkYV8PI5xg5-cl53dAv7w Flutter在PLUS业务中的探索和实践 https://mp.weixin.qq.com/s/eJxmeAJ0ljmbPbgNVkGttQ Flutter在京东7FRESH的业务实践 https://mp.weixin.qq.com/s/N2W3u0Od7WgLretuE5T8RA

微信 基于小程序技术栈的微信客户端跨平台实践 https://mp.weixin.qq.com/s/V-H3pF9ytfXRhZG0PGIKsw

https://static001.geekbang.org/con/42/pdf/3095298324/file/%E5%BC%A0%E5%BF%97%E5%9D%9A-%E5%9F%BA%E4%BA%8E%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%8A%80%E6%9C%AF%E6%A0%88%E7%9A%84%E5%BE%AE%E4%BF%A1%E5%AE%A2%E6%88%B7%E7%AB%AF%E8%B7%A8%E5%B9%B3%E5%8F%B0%E5%AE%9E%E8%B7%B5.pdf

哈罗单车 Flutter 在哈啰出行 B 端创新业务的实践 https://juejin.im/post/5eb27cc9f265da7b9625e85c

Flutter 在百度贴吧的落地实践 https://gmtc.infoq.cn/2019/shenzhen/presentation/2163 PPT：https://static001.geekbang.org/con/55/pdf/3015099877/file/%E9%AB%98%E9%A3%9E%20Flutter%20%E5%9C%A8%E7%99%BE%E5%BA%A6%E8%B4%B4%E5%90%A7%E7%9A%84%E8%90%BD%E5%9C%B0%E5%AE%9E%E8%B7%B5.pdf

贝壳Flutter混合容器实践 https://mp.weixin.qq.com/s?__biz=MzIyMTg0OTExOQ==&mid=2247485738&idx=2&sn=f23fe71d3466c2117708b1e2c79625d0&chksm=e8373a5adf40b34cef5f395c8f7c792f067b8d41ef805798c800bbc266390922961ff7c10682&scene=27#wechat_redirect

Flutter 实现原理及在马蜂窝的跨平台开发实践 https://juejin.im/post/5d37b328518825453b6057b2

Flutter 在流利说®阅读的实践 https://mp.weixin.qq.com/s?__biz=MzI0NjIzNDkwOA==&mid=2247484945&idx=1&sn=5dabc45b9682719cc8a179bb0c54dae0&utm_source=tuicool&utm_medium=referral

哔哩哔哩漫画 Flutter 混合开发实践 https://yrom.net/blog/2019/12/29/add-flutter-to-bilibili-comic/

https://juejin.im/entry/5d10ba5251882531e71c3005

Flutter 混合开发组件化与工程化架构 | 开发者说·DTalk https://mp.weixin.qq.com/s/NK0RMuXM2_AJmAbnnvv9SA

社区讨论

• 并不震惊，也可以不看的 前端 Flutter 劝退指南
• 开发跨平台app推荐React Native还是flutter？
• 为什么说Flutter是革命性的？
• 为什么Flutter会选择 Dart ？
• 深入了解Flutter界面开发
• 为什么说Flutter让移动开发变得更好？
• Flutter 原理简解
• 发跨平台app推荐React Native还是flutter？
• Flutter - 不一样的跨平台解决方案
• 国内大厂在移动端跨平台的框架接入分析
• 跨平台技术演进及 Flutter 未来 | 开发者说·DTalk

[ShannonChenCHN]

知识点

教程

• Get Started - Flutter
• Tutorials - Flutter
• Flutter CodeLab
  • Write your first Flutter app, part 1, 38 min
  • Write Your First Flutter App, part 2, 43 min
  • Building a Cupertino app with Flutter, 51 min
• Getting Started with Flutter
• 使用 Flutter 开发知识小集 iOS/Android 客户端
• Flutter Navigation Tutorial

Examples

• Implementing complex UI with Flutter - Marcin Szałek | Flutter Europe

https://github.com/Solido/awesome-flutter https://github.com/iampawan/FlutterExampleApps https://github.com/kaina404/FlutterDouBan https://github.com/nisrulz/flutter-examples https://github.com/OpenFlutter/Flutter-Notebook https://github.com/alibaba/flutter-go https://github.com/flutter/gallery

Widget, State, Element, RenderObject

Flutter, what are Widgets, RenderObjects and Elements? ⭐️ https://medium.com/flutter-community/flutter-what-are-widgets-renderobjects-and-elements-630a57d05208

The Layer Cake ⭐️ https://medium.com/flutter-community/the-layer-cake-widgets-elements-renderobjects-7644c3142401

Widget, State, Context and InheritedWidget https://www.didierboelens.com/2018/06/widget-state-context-inheritedwidget/

Element与BuildContext https://book.flutterchina.club/chapter14/element_buildcontext.html

RenderObject和RenderBox https://book.flutterchina.club/chapter14/render_object.html

Flutter Text Rendering ⭐️ https://www.raywenderlich.com/4562681-flutter-text-rendering

RenderBox class https://api.flutter.dev/flutter/rendering/RenderBox-class.html

RenderObject class https://api.flutter.dev/flutter/rendering/RenderObject-class.html

How to Create a Flutter Widget Using a RenderObject https://nicksnettravels.builttoroam.com/create-a-flutter-widget/

Render Objects - Flutter Internals https://www.flutterinternals.org/data-model/render-objects

深入了解Flutter界面开发 - 闲鱼技术 ⭐️ https://mp.weixin.qq.com/s/z2r2OmnY7r7dQrkO8ndkFQ

手势传递

https://github.com/flutter/flutter/issues/10963 https://github.com/flutter/flutter/issues/31728 https://stackoverflow.com/questions/57466767/how-to-make-a-gesturedetector-capture-taps-inside-a-stack ⭐️ https://juejin.im/post/5d3c63166fb9a07eac061c9b https://segmentfault.com/a/1190000011555283 ⭐️ https://wizardforcel.gitbooks.io/gsyflutterbook/content/Flutter-13.html

Flutter Deep Dive: Gestures中文翻译⭐️

Flutter和iOS之间的Battle：手势交互听谁的？ https://mp.weixin.qq.com/s/px86K2bgmFJXomSaA2cdug

https://stackoverflow.com/questions/55430842/flutter-absorbpointer-vs-ignorepointer-difference

Widget

call method in one stateful widget from another stateful widget - Flutter https://stackoverflow.com/a/60513911

Stack、Positioned CustomScrollView

Container https://juejin.im/post/5b13c3e1f265da6e3d666d80

SliverPersistentHeader PageView MultiChildRenderObjectWidget

BuildContext https://juejin.im/post/5c665cb651882562914ec153 https://stackoverflow.com/questions/49100196/what-does-buildcontext-do-in-flutter

https://medium.com/flutter-community/flutter-listview-and-scrollphysics-a-detailed-look-7f0912df2754

Key

• Keys! What are they good for?⭐️
  • 中文讲解 1
  • 中文讲解 2

Layout

必读 | 深入理解布局约束 ⭐️ https://mp.weixin.qq.com/s/2GFKxfAtnOozLsUiRUQPHg

Flutter Widget - Container 布局详解 https://mp.weixin.qq.com/s/nG_4PWt4KzbPxUjw3Bx-Zg

Flutter 布局备忘录 https://mp.weixin.qq.com/s/JCfwzNJlFPfITK0KQhdhsQ

How to constraint items of different rows with respect to each other? https://stackoverflow.com/questions/58552886/how-to-constraint-items-of-different-rows-with-respect-to-each-other

Sliver

• What is sliver and how to use it
  • Slivers, Demystified
  • Flutter — Slivers and CustomScrollView
• How existing slivers are made and how to write your on slivers
  • Slivers Explained - Making Dynamic Layouts (The Boring Flutter Development Show, Ep. 12) 🎬
  • RenderSliver class - rendering library - Dart API
  • How Slivers are made — Part 1
  • How Slivers are made: SliverFillRemaining
  • Slivers Deep Dive Series: SliverToBoxAdapter, SliverList and SliverFixedExtentList

Animation

AnimatedContainer Tween

页面转场动画：Hero、PageRouteBuilder https://book.flutterchina.club/chapter9/hero.html https://flutter.dev/docs/development/ui/animations/hero-animations https://www.raywenderlich.com/7137759-flutter-hero-animations https://medium.com/flutter-community/a-deep-dive-into-hero-widgets-in-flutter-d34f441eb026 https://book.flutterchina.club/chapter9/route_transition.html https://juejin.im/post/5e045fb76fb9a016323d8dff https://medium.com/@agungsurya/create-custom-router-transition-in-flutter-using-pageroutebuilder-73a1a9c4a171

官方资源

• examples
  • https://flutter.dev/docs/cookbook/animation/animated-container
  • https://flutter.dev/docs/cookbook/animation/opacity-animation
  • https://flutter.dev/docs/cookbook/animation/page-route-animation
  • https://flutter.dev/docs/cookbook/animation/physics-simulation
  • https://flutter.dev/docs/codelabs/implicit-animations https://flutter.dev/docs/development/ui/animations https://flutter.dev/docs/development/ui/widgets/animation https://flutter.dev/docs/development/ui/animations/tutorial https://api.flutter.dev/flutter/animation/animation-library.html https://github.com/flutter/samples/tree/master/animations

https://juejin.im/post/5b6270edf265da0f473539a6 https://blog.flexiple.com/advanced-flutter-animations/ https://medium.com/@erdoganbavas/tween-animations-in-flutter-7e24844c1d19 https://juejin.im/post/5e89a1a46fb9a03c7c4c18c0 https://medium.com/flutter-community/a-complete-guide-to-flutter-animations-and-all-its-parts-3f427e14d669 https://medium.com/flutter-nyc/a-deep-dive-into-the-flutter-animations-package-3e26b10c43c1

视频播放

https://github.com/brianegan/chewie https://flutter.dev/docs/cookbook/plugins/play-video https://github.com/flutter/plugins/tree/master/packages/video_player/video_player https://github.com/CaiJingLong/flutter_ijkplayer https://github.com/befovy/fijkplayer https://github.com/chudongvip/awesome_video_player

持久化存储

https://stackoverflow.com/questions/41369633/how-to-save-to-local-storage-using-flutter http://flutter.link/2018/04/13/Flutter%E4%B8%AD%E7%9A%84%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8/

图文混排、文字排版

Flutter 中的图文混排与原理解析 | 开发者说·DTalk https://mp.weixin.qq.com/s/Scl4lP-sgesti74pZH4efg

绘制

How to add shadow to ClipOval in flutter? https://stackoverflow.com/questions/58690604/how-to-add-shadow-to-clipoval-in-flutter

How to give shadow to a custom painted circle in flutter https://stackoverflow.com/questions/56512979/how-to-give-shadow-to-a-custom-painted-circle-in-flutter

method channel、dart 和 native 的通信、Plugin/Package、

• Flutter Plugin开发流程
• Flutter Packages 的开发和提交 - Flutter
• 撰写双端平台代码（插件编写实现） - Flutter

[ShannonChenCHN]

原理解析

Flutter原理简解 https://www.stephenw.cc/2018/05/14/flutter-principle/

Flutter Dart Framework原理简解 https://www.stephenw.cc/2018/05/28/flutter-dart-framework/

Flutter的编译模式 https://www.stephenw.cc/2018/07/30/flutter-compile-mode/

浅谈 Flutter 构建 | 开发者说·DTalk https://mp.weixin.qq.com/s/2zk5-KA8Z-fwikXRBMSlKQ

The Mahogany Staircase - Flutter's Layered Design https://www.youtube.com/watch?v=dkyY9WCGMi0

How Flutter renders Widgets ⭐️ https://www.youtube.com/watch?v=996ZgFRENMs

Flutter's Rendering Pipeline https://www.youtube.com/watch?v=UUfXWzp0-DU

Flutter’s Rendering Engine: A Tutorial — Part 1 https://medium.com/saugo360/flutters-rendering-engine-a-tutorial-part-1-e9eff68b825d

"Flutter: How we're building a UI framework for tomorrow at Google" by Eric Seidel https://www.youtube.com/watch?v=VUiVkDpikDI

[ShannonChenCHN]

性能调优和监控

iOS memory allocation - how much memory can be used in an application? https://stackoverflow.com/questions/6044147/ios-memory-allocation-how-much-memory-can-be-used-in-an-application

• Performance & optimization - Flutter
• Performance best practices - Flutter
• Performance: Optimizing your Flutter app - Filip Hráček | Flutter Europe🎬
• Profiling Flutter Applications Using the Timeline
• Flutter 上的内存泄漏监控
• Flutter卡顿问题的监控与思考
• How to improve the performance of your Flutter app

[ShannonChenCHN]

Dart

• Flutter 开发必备 Dart 基础: Dart 快速入门 | 开发者说·DTalk⭐️
• 06 | 基础语法与类型变量：Dart是如何表示信息的？- Flutter核心技术与实战⭐️
• 07 | 函数、类与运算符：Dart是如何处理信息的？⭐️
• Dart 语言学习笔记
• How does the const constructor actually work?

@immutable 注解

Mixin

【译】Dart | 什么是Mixin https://juejin.im/post/5bb204d3e51d450e4f38e2f6

Flutter Dart mixins 探究 https://juejin.im/post/6844903764441202702

Flutter Dart语法(1):extends 、 implements 、 with的用法与区别 https://juejin.im/post/6844903766492200974

单例

https://stackoverflow.com/questions/12649573/how-do-you-build-a-singleton-in-dart

异步、async、await

深入理解 Flutter 多线程 | 开发者说·DTalk https://mp.weixin.qq.com/s/1hsOv4vXOvt8c5l_4ZhOTQ

Flutter篇之你真的会使用Future吗？ https://juejin.im/post/6844903893403451405

线程

线程模型 https://book.flutterchina.club/chapter2/thread_model_and_error_report.html

isolate

深入了解Flutter的isolate(1) ---- 事件循环(event loop)及代码运行顺序 https://juejin.im/post/6844903756996280327

深入了解Flutter的isolate(2) --- 创建自己的isolate https://juejin.im/post/6844903757759643662

深入了解Flutter的isolate(3) --- Flutter的thread model（线程模型） https://juejin.im/post/6844903759735160840

深入了解Flutter的isolate(4) --- 使用Compute写isolates https://juejin.im/post/6844903760167190536

导入库

Dart | 浅析dart中库的导入与拆分 https://juejin.im/post/6844903649617936392

What is the difference between “show” and “as” in an import statement? https://stackoverflow.com/questions/19723063/what-is-the-difference-between-show-and-as-in-an-import-statement

依赖管理

• https://dart.dev/tools/pub/dependencies
• https://dart.dev/tools/pub/versioning#semantic-versions

Lint

Customizing static analysis - Dart https://dart.dev/guides/language/analysis-options

dart-lang/pedantic https://github.com/dart-lang/pedantic

Pedantic Dart https://medium.com/dartlang/pedantic-dart-1c7d365510de

[ShannonChenCHN]

最佳实践

Flutter 避免代码嵌套，写好 build 方法 | 开发者说·DTalk ⭐️ https://mp.weixin.qq.com/s/hsgji9Da9FRNB0-a_y0gyg

Flutter Development Best Practices https://heartbeat.fritz.ai/flutter-development-best-practices-3e162765340a

Style guide for Flutter repo https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo

Dart 官方的 coding style https://dart.cn/guides/language/effective-dart/design

Flutter: Best Practices and Tips https://medium.com/flutter-community/flutter-best-practices-and-tips-7c2782c9ebb5

Division – Style Your Flutter Widgets Without Confusion (Flutter Tutorial) https://resocoder.com/2019/11/14/division-style-your-flutter-widgets-without-confusion-flutter-tutorial/#t-1596597359857

ReinBentdal/styled_widget https://github.com/ReinBentdal/styled_widget

Flutter Go 代码开发规范 0.1.0 版 https://github.com/alibaba/flutter-go/blob/develop/Flutter_Go%20%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83.md

官方 demo：flutter/samples https://github.com/flutter/samples

官方教程 https://codelabs.developers.google.com/?cat=Flutter

[ShannonChenCHN]

面试题

https://github.com/whatsupcoders/Flutter-Interview-Questions