shannonchenchn / flutterplayground

Let's Flutter

Outline

• Overview
  • What is Flutter? by Flutter co-founder Eric Seidel
  • Technical overview
  • Inside Flutter
  • Get Started
  • FAQ
  • Flutter VS. React Native
    • Flutter for React Native developers
  • Flutter VS. iOS/SwiftUI
    • Flutter for iOS developers
    • Flutter for Android developers
  • Platform specific behaviors and adaptations
• Dart
  • https://dart.dev/
  • Why did Flutter choose to use Dart?
  • Language tour
  • Library tour
  • Effective Dart
  • Asynchronous programming
  • Coding Style Guide
• User interface
  • Widget
    • Widget catalog
    • Widget index
    • Basic widget library
    • Cupertino widgets library
    • Cupertino (iOS-style) widgets
  • Layout
  • Adding interactivity
  • Navigation & routing
  • Assets and images
  • Advanced UI
    • Gestures
  • Animations
• Data & backend
  • Networking & http
  • JSON and serialization
• Platform integration
  • C and C++ interop
  • Writing custom platform-specific code
    • Platform channel mechanism
    • dart-native/dart_native
• Packages & plugins
  • Using packages
  • Developing packages & plugins
  • https://pub.dev/
  • The pubspec file
• Add Flutter to existing app
  • Add to Android applications
  • Add to iOS applications
  • Debugging & hot reload
  • Load sequence, performance, and memory
• Tools & techniques
  • Android Studio / IntelliJ / Visual Studio Code + plugins
  • DevTools
  • Flutter SDK
  • Hot reload
  • Code formatting
• Testing & debugging
  • Debugging Flutter apps
  • Debugging Flutter apps programmatically
  • Using an OEM debugger
  • Flutter's build modes
  • Handling errors
  • Testing
• Performance & optimization
  • App size
  • Rendering performance
• Deployment
  • Obfuscating Dart code
  • Creating flavors for Flutter
  • Build and release an Android app
  • Build and release an iOS app
  • Build and release a web app
  • Continuous deployment
• State management & Architecture
  • State management
  • Provider
  • Redux
• Hot fix
• Dive-in
  • Graphic Rendering Engine
• API reference

相关资源

• flutter 官方开源代码
  • flutter/flutter
  • flutter/engine
  • flutter/gallery
  • flutter/samples
  • flutter/plugins
• Flutter 官方文档/Flutter 中文官网
  • API reference
  • Cookbook
  • Widget catalog
  • Dart resources
  • 官方资源更新记录What's new archive
• Books about Flutter
• 《Flutter实战》
• Solido/awesome-flutter
• 闲鱼团队的博客：Flutter · 语雀
• Flutter – Medium
• Dart - Medium
• Flutter Community
• 更多...

flutterplayground's Issues

Keynote

初识 Flutter

• 几个角度
  • 开发体验
  • 设计哲学
  • 实现原理
• Introduction（未知的未知和已知的未知）
  • hello world
  • SwiftUI vs. React Native vs. Native vs. Flutter
• 代码实战
  • hello_world
  • startup_namer
  • cupertino_store
• 原理、设计哲学
  • 基本原理
  • layout <-> flexbox
  • 状态管理、Redux
• 问题
  • 在真机上怎么跑？
  • Flutter 官方提供了两套 UI，我们如何做到一套代码两个平台？
  • 与 Native 的交互，与 Native 页面之间的数据传递
  • 几个实践难点
    • 命令式布局？
    • 吸顶效果
    • 代码复杂度管理

带一点自己的思考；聊一两个深入的点

References

Flutter App 架构

• principles
  • 一致性
  • 可预测
  • 前瞻性
  • testable
• 状态管理
  • 方案
    • setSate
    • Provider
    • Redux ✅
  • 三种场景
    • widget 内
    • 页面内（跨 widget）
    • App 内（跨页面）
• Router/Navigation
• 目录结构
• 最佳实践
  • 编码规范
  • Effective Dart: Usage
  • Effective Dart: API Design
• 图片资源

Flutter, Demystified

问题：

• 框架层
  • 什么是 Widget？
  • 屏幕上的 “view ”是怎么从我们写的 widget 渲染出来的？
    • Widget、Element、RenderObject
    • 布局、组合、渲染、触摸事件响应链
• 开发工具链
  • Flutter 代码是怎么跑起来的？
    • 编译：AOT vs. JIT
    • 链接
    • main.dart
    • App.framwork
    • iOS 应用是怎么加载 dart 代码的？
  • 调试过程
    • 本地调试是怎么实现的？
    • hot reload
• Flutter 与 native 的通信是怎么实现的？
  • plugin
  • method channel
• 热修复的方案有哪些？

性能优化和线上监控

• 性能检测和优化
  • CPU
  • 内存
  • 卡顿
• 线上监控
  • 怎么做
  • 有哪些指标
    • 页面异常率
    • 页面帧率
    • 页面加载时长
    • 异常捕获和信息采集

状态管理

See Keynote.

List of state management approaches

• setState
• InheritedWidget & InheritedModel
• Provider & Scoped Model
• Redux
• BLoC / Rx
• MobX

推荐阅读

• 官方文档
  • Introduction to declarative UI - Flutter
  • State management - Flutter
    • Start thinking declaratively
    • Differentiate between ephemeral state and app state
    • Simple app state management
    • List of state management approaches
• Flutter | 状态管理探索篇系列文章
  • https://juejin.im/post/5b97fa0d5188255c5546dcf8
  • https://juejin.im/post/5ba26c086fb9a05ce57697da
  • https://juejin.im/post/5bb6f344f265da0aa664d68a
  • https://juejin.im/post/5bcea438e51d4536c65d2232
  • https://juejin.im/post/5c6d4b52f265da2dc675b407
  • https://juejin.im/post/5d00a84fe51d455a2f22023f
• Flutter 状态管理指南之 Provider
• 视频
  • Pragmatic State Management in Flutter (Google I/O'19)（中文翻译）
  • Keep it Simple, State: Architecture for Flutter Apps (DartConf 2018)
  • Pragmatic State Management Using Provider (The Boring Flutter Development Show, Ep. 24)
  • Flutter with Streams and RxDart
• 开源项目
  • https://github.com/ShadyBoukhary/flutter_clean_architecture

Dart

• Language
  • Language tour
  • Sound null safety
  • Extension methods
  • Type system
  • Effective Dart
    • Coding Style
    • Documentation
    • Usage
    • API Design
• Development
  • Asynchronous programming: Futures, async, await
  • Asynchronous programming: streams
  • Interoperability
    • C
    • JavaScript
  • JSON
• Core libraries
• Packages
• Tools & techniques
• Resources