For sake of learning Flutter bit by bit, this article compiled a list of online tutorials and references so far from own experience. To Be Updated from time to time.
What is Flutter?
Flutter is a mobile development SDK developed by Google, aiming to craft native mobile experience with single code base, written in Dart.
Essential checklist of Mobile SDK / Framework
- Development Environment
- State Management
- Theming
- Animation
- Data Transport & Networking
- Debug & Logging
- Deploy & Packaging
- UI Widgets Library
- Community
- Testing
Development Environment
Android Studio, IntelliJ, or VS Code
https://flutter.dev/docs/get-started/editor
State Management
List of state management approaches
setState, inheritedWidget, inheritedModel, ScopedModel, BLoC, redux, MobX
https://flutter.dev/docs/development/data-and-backend/state-mgmt/options
Understand BLoC
understand sink, stream, reactivity nature
http://flutterdevs.com/blog/bloc-pattern-in-flutter-part-1/
Effective BLoC pattern
learn to build scalable structure Flutter app in BloC way
https://medium.com/flutterpub/effective-bloc-pattern-45c36d76d5fe
Theming
- dark mode, textTheme, fontFamily, primary/accent color
- copyWith, Theme.of(context)
Dynamic switching theme
https://medium.com/flutter-community/dynamic-theming-with-flutter-78681285d85f
MDC-103 Flutter: Material Theming with Color, Shape, Elevation, and Type
https://codelabs.developers.google.com/codelabs/mdc-103-flutter
Animation
AnimatedContainer vs Container
https://flutter.dev/docs/cookbook/animation/animated-container
Animate Widget Across Screens
TIPS β Hero widget, same tag
https://flutter.dev/docs/cookbook/navigation/hero-animations
Data Transport & Networking
JSON Serialization
https://flutter.dev/docs/development/data-and-backend/json
Debug & Logging
use the dart:developer
log()
function. This allows you to include a bit more granularity and information in the logging output
https://flutter.dev/docs/testing/code-debugging
Hot Reload
Hot Reload vs Hot Restart
https://flutter.dev/docs/development/tools/hot-reload
Deployment & Packaging
Deploying Android
https://flutter.dev/docs/deployment/android
Deploying iOS
https://flutter.dev/docs/deployment/ios
CI/CD
https://flutter.dev/docs/deployment/cd
ShippedFlutter Engine Size
https://flutter.dev/docs/resources/faq#how-big-is-the-flutter-engine
Excluding framework & app code: ~4.6MB for Android, ~3.5 MB for iOS
UI Widgets Library
Official Flutter Widgets
https://flutter.dev/docs/reference/widgets
Community Flutter Widget
Learn from Coding
Build Flutter App Marathon
https://medium.com/@adityadroid/60-days-of-flutter-creating-the-app-ea0407b472ae
Hands-on sample by Google
https://codelabs.developers.google.com/?cat=Flutter
Internationalization aka i18n
https://flutter.dev/docs/development/accessibility-and-localization/internationalization
Accessibility aka i11y
https://flutter.dev/docs/development/accessibility-and-localization/accessibility
Other Resources
Cookbook
https://flutter.dev/docs/cookbook
Awesome Flutter
https://github.com/Solido/awesome-flutter
Popular open-source Flutter apps
https://github.com/roughike/inKino
https://itsallwidgets.com/?open_source=true
https://flutter.dev/showcase
Flutter Common Widgets by Alibaba
https://github.com/alibaba/flutter-go
Game Engine
https://github.com/flame-engine/flame