Sub-pillar 9.2 · Flutter

Build app với Flutter

Framework UI cross-platform của Google — iOS, Android, Web, macOS, Windows, Linux. 15 chương từ flutter create đến deploy lên App Store, Play Store, web.

Flutter 3.22+ · 15 chương · ~17,000 dòng · 75+ bài tập + quiz

Lộ trình 15 chương

Chia 4 phase: Foundation (1-5) → State management (6-8) → Build feature (9-13) → Production (14-15). Yêu cầu: học xong 8 chương Dart trước.

Phase 1 · Foundation (chương 1-5)
Setup, widget tree, layout, theme, navigation.
01

Flutter Setup

FVM, iOS/Android toolchain, flutter doctor, IDE setup, hot reload vs hot restart, build mode.

Đọc →
02

Widget Tree & First App

Mental model "everything is a widget", Stateless vs Stateful, setState, MaterialApp, Scaffold, 3 cây.

Đọc →
03

Layout System

Constraints flow down sizes flow up, Row/Column, Expanded/Flexible, Stack, Container, debug overflow.

Đọc →
04

Material vs Cupertino, Theming

Material 3, ColorScheme.fromSeed, text theme, dark mode, ThemeExtension, Google Fonts.

Đọc →
05

Navigation

Navigator 1.0, named routes, go_router (recommended), ShellRoute, modal/snackbar.

Đọc →
Phase 2 · State Management (chương 6-8)
setState → InheritedWidget → Bloc → Provider/Riverpod/GetX comparison.
06

setState & InheritedWidget

State spectrum, lifting state up, InheritedWidget custom, InheritedNotifier, ChangeNotifier.

Đọc →
07

flutter_bloc Deep Dive

Cubit vs Bloc, BlocProvider/Builder/Listener/Selector, sealed state class, repository pattern, bloc_test.

Đọc →
08

Provider · Riverpod · GetX

So sánh 3 thư viện. Cùng Counter app, 4 cách viết. Decision framework chọn lib phù hợp.

Đọc →
Phase 3 · Build Feature (chương 9-13)
Form, network, storage, animation, custom paint — đủ build app thật.
09

Forms & Input

TextField, Form + FormState, validator, focus management, Autocomplete, image_picker.

Đọc →
10

Network — HTTP, Dio, Retrofit

http vs Dio, interceptor, JSON codegen (freezed + json_serializable), repository pattern, WebSocket.

Đọc →
11

Local Storage

SharedPreferences, SecureStorage, sqflite, drift, hive, isar, offline-first pattern, migration.

Đọc →
12

Animation

Implicit (Animated*) vs explicit (AnimationController + Tween), Hero, Lottie, staggered animation.

Đọc →
13

Custom Paint & Render

CustomPainter, Canvas API, Path, RenderObject intro, 3 cây Widget/Element/RenderObject deep dive.

Đọc →
Phase 4 · Production (chương 14-15)
Test, performance, build, deploy — ship app cho user.
14

Testing

Unit / Widget / Integration / Golden test, mocktail, bloc_test, coverage, CI.

Đọc →
15

Performance, Build & Deploy

DevTools, Performance Overlay, build APK/AAB/IPA, signing, flavor, TestFlight, Play Console, web hosting.

Đọc →

Triết lý Flutter của giáo trình

🧠 Mental model trước cú pháp

Flutter có 3 mental model lớn: "everything is a widget", "constraints flow down, sizes flow up", và "declarative UI = function of state". Không nắm 3 cái này thì code Flutter cứ thấy lạ mãi. Mỗi chương được thiết kế để củng cố mental model trước, syntax sau.

🔀 State management khách quan

3 chương riêng cho 3 path: setState+InheritedWidget (ch.6), Bloc (ch.7), Provider/Riverpod/GetX (ch.8). Không bias một lib — so sánh tradeoff để bạn tự chọn. Real-world team mỗi nơi dùng khác — hiểu cả 4 = đọc được code mọi team.

🎯 Test & performance không bị skip

Chương 14 dành riêng cho testing (4 level), chương 15 cover performance + deploy. Đa số tutorial Flutter skip 2 phần này — sub-pillar này coi như first-class citizen.