Danh mục: Lập trình Flutter

Bài lab đầy đủ: Dart cú pháp cơ bản Buổi 2

Học Flutter từ đâu mà không vấp ngay Buổi 1?

Tutorial hay bắt bạn copy Container + Column trước khi hiểu Dart cơ bản. Khi app crash vì null, rebuild chậm vì thiếu const, hoặc truyền sai tham số widget — nguyên nhân thường nằm ở Dart, không phải Flutter “khó”.

Buổi 2 khóa Flutter Cơ Bản K1 dừng UI một nhịp: var · final · const · null safety · named params — rồi mới Widget tree Buổi 3.

Pyramid — bạn đang level mấy?

Buổi 2 = cố định Level 2→3.

Self-check — 5 câu trước Buổi 3

1. const Text('OK') và Text('OK') — cái nào giúp Flutter bỏ qua rebuild?
2. Biến từ API có thể null — bạn dùng ?, ??, hay !?
3. Viết được hàm void foo({required String id}) chưa?
4. List và Map — bạn add/phần tử và đọc key thế nào?
5. switch trên enum — compiler có báo thiếu case không?

0–2 “rõ” → cần Buổi 2. 4–5 → sẵn sàng Widget Buổi 3.

Một lỗi thường gặp — và cách sửa

// ❌ Hay crash khi title null từ API
Text(userTitle)

// ✅ Buổi 2 pattern
Text(userTitle ?? 'Chưa có tiêu đề')

// ❌ Rebuild không cần thiết
padding: EdgeInsets.all(16),

// ✅ const khi giá trị cố định
padding: const EdgeInsets.all(16),

Đọc sâu JIT/AOT, List/Map, class Buổi 2 → bài lab Dart (~3000 từ).

Lộ trình K1 — T7+CN 08:00

KG 25/07 · 12 buổi chính + BT + phụ đạo (theo syllabus K1).

Liên hệ & đăng ký: huongnghieplaptrinhflutter.com · 0934 145 100

Bài lab Dart Buổi 2: https://www.huongnghiepdulieu.com/flutter-dart-cu-phap-co-ban-buoi-2/ · Hotline 0934 145 100

Nguồn: Day DataPass/Lap trinh Flutter da nen tang/K1-Flutter Co Ban (Level 1)/Buoi 02. Gioi thieu ngon ngu Dart - Cu phap co ban/ · slide noidung.csv.

Buổi 1 Flutter thường làm quen môi trường, project đầu tiên, widget Text/Container cơ bản. Nếu nhảy thẳng sang giao diện mà chưa nắm Dart, bạn sẽ gặp lỗi khó debug: final vs const, null crash, hoặc truyền tham số widget sai tên.

Bài viết trình bày Buổi 2 — Giới thiệu ngôn ngữ Dart & cú pháp cơ bản trong khóa Flutter Cơ Bản (Level 1) tại Hướng Nghiệp Dữ Liệu. Mục tiêu: nền logic trước Buổi 3–4 (Widget tree, layout). Sau khóa, học viên có thể đọc dashboard bot read-only — không cần viết EA, nhưng cần Dart sạch để bind JSON/API.

Đây là bài giáo dục lập trình — không cam kết thu nhập hay kết quả giao dịch.

1. Vì sao Flutter bắt buộc học Dart trước?

Flutter không “nhúng” HTML hay XML — mọi màn hình là class Dart. Hiểu biến, hàm, collection = hiểu nửa đường tới StatelessWidget / StatefulWidget.

graph LR
    A[Dart cú pháp] --> B[Widget cơ bản]
    B --> C[Layout Row Column]
    C --> D[State & form]
    D --> E[App fintech read-only]

2. Biến và kiểu dữ liệu

2.1. Khai báo cơ bản

int soBuoi = 12;
double hocPhi = 24000000;
String tenKhoa = 'Flutter Cơ Bản K1';
bool daDangKy = false;

var tuDongSuyLuan = 'HNDL'; // compiler suy ra String

var tiện khi kiểu hiển nhiên; production nên ghi rõ kiểu khi API/public field.

2.2. final vs const — hay nhầm nhất Buổi 2

const maxRetry = 3;
final ngayKhaiGiang = DateTime(2026, 7, 25); // runtime → final

// Widget Flutter — const giúp rebuild nhẹ
const Text('Hotline 0934 145 100');

Quy tắc ngón tay: mọi thứ cố định trong code → const. Giá trị từ API/user → final hoặc biến thường.

2.3. List và Map

List<String> kenhPr = ['HNDL', 'DNT Academy', 'Flutter page'];
Map<String, int> wpPostIds = {
  'bias_v6': 7970,
  'bot_trading': 8033,
};

// Duyệt
for (final k in kenhPr) {
  print(k);
}
k enhPr.add('dnt.python');

List/Map là nền cho JSON decode sau này (List<dynamic> → model class Buổi nâng cao).

3. Sound Null Safety — tránh crash “null”

Dart 2.12+ bắt xử lý null tại compile time.

String? optionalTitle; // có thể null
String requiredTitle = 'Flutter Buổi 2'; // không null

void printTitle(String? t) {
  print(t ?? 'Chưa có tiêu đề'); // ?? operator
  print(t!.length); // ! — chỉ khi CHẮC không null
}

Trong Flutter, Text(optionalTitle ?? '') an toàn hơn để trống rồi crash lúc user bấm.

Pattern thực tế fintech:

double? balanceFromApi;
final display = balanceFromApi != null
    ? balanceFromApi!.toStringAsFixed(2)
    : '--';

4. Hàm — positional, named, arrow

4.1. Positional và named parameters

void dangKyKhoa(String ten, {required String sdt, String? ghiChu}) {
  print('$ten — $sdt ${ghiChu ?? ''}');
}

dangKyKhoa('Flutter K1', sdt: '0934145100');

Named parameters giống cách khai báo Widget:

Container(
  padding: const EdgeInsets.all(16),
  child: const Text('Dart named params'),
);

4.2. Arrow function

int tongBuoi(int chinh, int phuDao) => chinh + phuDao;

bool duDieuKien(int tuoi) => tuoi >= 18;

Rút gọn hàm một biểu thức — dùng nhiều trong builder: và onPressed:.

5. Cấu trúc điều khiển

enum TrangThaiTaiKhoan { loading, success, error, empty }

TrangThaiTaiKhoan state = TrangThaiTaiKhoan.loading;

String message() {
  switch (state) {
    case TrangThaiTaiKhoan.loading:
      return 'Đang tải...';
    case TrangThaiTaiKhoan.success:
      return 'Sẵn sàng';
    case TrangThaiTaiKhoan.error:
      return 'Lỗi mạng — thử lại';
    case TrangThaiTaiKhoan.empty:
      return 'Chưa có dữ liệu';
  }
}

switch + enum exhaustive — compiler báo thiếu case. Pattern này map trực tiếp sang UI: loading spinner, error banner, empty state.

Vòng lặp:

for (var i = 0; i < 3; i++) { /* ... */ }
while (state == TrangThaiTaiKhoan.loading) { /* poll */ }

6. Class Dart — bước đệm tới Widget

class BuoiHoc {
  final int stt;
  final String title;
  final Duration duration;

  const BuoiHoc({
    required this.stt,
    required this.title,
    this.duration = const Duration(hours: 2),
  });

  String get label => 'Buổi $stt: $title';
}

void main() {
  const b2 = BuoiHoc(stt: 2, title: 'Dart cú pháp');
  print(b2.label);
}

Mọi Widget Flutter (Text, Scaffold, custom widget) là class kế thừa — Buổi 2 class đơn giản giúp Buổi 3 không bị sốc.

7. Liên hệ lộ trình K1 — sau Buổi 2

Hướng fintech HNDL: app đọc dashboard bot (read-only) — Buổi 2 List/Map/null safety là nền parse JSON từ API sau này.

8. FAQ

Đã biết Python/JS có bỏ Buổi 2?
Nên học — final/const và null safety khác JS. Bỏ qua dễ lỗi widget rebuild.

Dart có dùng ngoài Flutter?
Có (CLI, server), nhưng khóa tập trung Flutter mobile/web.

Buổi 2 có code Widget không?
Ít — chủ yếu main() console/DartPad. Widget dồn Buổi 3.

Link khóa chính thức?
huongnghieplaptrinhflutter.com · Lịch: lich-khai-giang

9. Tóm tắt

• Dart = ngôn ngữ nền; Flutter Widget = class Dart
• Phân biệt final / const trước khi tối ưu UI
• Null safety giảm crash production
• Named parameters = cùng pattern với Widget Flutter
• enum + switch = quản lý trạng thái app sạch

Liên hệ & đăng ký: Flutter Cơ Bản — Hướng Nghiệp Lập Trình Flutter · Hotline 0934 145 100 · Zalo 039 791 9841

Flutter Cơ Bản: https://huongnghieplaptrinhflutter.com/ · Hotline 0934 145 100

Tóm tắt nhanh

Hôm nay Thứ 7, 25/07/2026, khóa Flutter Cơ Bản (Level 1) chính thức khai giảng, khung 08:00–10:00, học Thứ 7 + Chủ nhật hàng tuần. Đây là bước đầu trên lộ trình Dart & Flutter đa nền tảng — widget, layout, state cơ bản — nền để sau này làm app fintech đọc dashboard bot (read-only).

Khóa online Zoom, có ghi hình buổi học. Không cam kết việc làm hay thu nhập — mục tiêu: làm chủ nền mobile cross-platform thực chiến.

Ai nên vào khóa này?

• Người mới muốn học lập trình app Android / iOS / Web bằng một codebase
• Dev backend (Python, FastAPI) muốn làm UI consume API dashboard IB / bot monitor
• Học viên đã hoặc sẽ học Python Bot / Quant — cần lớp presentation mobile

Lịch & đăng ký

Buổi 1 hôm nay — nội dung dự kiến

1. Cài môi trường Flutter / Dart · hot reload
2. Widget cơ bản: Text, Container, Column, Row
3. Layout đơn giản và chạy app đầu tiên trên emulator / thiết bị

Lộ trình sau Level 1

Đọc thêm

• Lịch khai giảng tháng 07/2026
• Flutter Full Stack — lộ trình & demo học viên

Hướng Nghiệp Dữ Liệu · Vẫn nhận đăng ký muộn cohort T7+CN · Vào trang khóa Flutter

Flutter Cơ Bản Level 1: https://www.huongnghieplaptrinhflutter.com/co-ban · Lịch khai giảng · Hotline 0934 145 100

Lập trình Flutter đang là lựa chọn phổ biến khi bạn muốn ra mắt app iOS và Android từ một codebase. Bài này đi cùng ba video thực tế trên kênh Hướng Nghiệp Dữ Liệu: giới thiệu lộ trình Full Stack, short làm game bằng Flame, và demo dự án học viên ChillCoffee — để bạn hình dung rõ học Flutter thực chiến trông như thế nào trước khi đăng ký khóa.

Xem nhanh ba video:

• Flutter Full Stack — Giới thiệu lộ trình học
• Flutter Short — Thực hành Flame Game App
• Học viên Flutter — Demo app quản lý quán cafe ChillCoffee

Vì sao học Flutter lúc này?

Thị trường app Việt Nam và khu vực Đông Nam Á vẫn tăng mạnh ở mảng giao hàng, F&B, giáo dục, fintech nhỏ và quản lý nội bộ. Doanh nghiệp vừa và nhỏ cần sản phẩm chạy được trên cả hai hệ điều hành mà không nuôi hai team Native song song. Flutter đáp ứng đúng nhu cầu đó: một codebase Dart, UI ổn định, hot reload nhanh, và hệ sinh thái package đủ cho CRUD, bản đồ, thanh toán, thông báo đẩy, camera và dashboard quản trị.

Khác với “học framework cho bằng chứng chỉ”, lộ trình Flutter tại Hướng Nghiệp Dữ Liệu gắn với sản phẩm: màn hình thật, state management rõ ràng, gọi API, lưu local, rồi đóng gói bản demo. Ba video kèm bài này chính là lát cắt của chuỗi đó.

Video 1 — Giới thiệu lộ trình Flutter Full Stack

Video Flutter Full Stack — Giới thiệu lộ trình học mở đầu bằng bức tranh toàn khóa: bạn sẽ học những gì, thời lượng, dự án đầu ra và mối liên hệ giữa UI, logic nghiệp vụ và backend.

Full Stack trong ngữ cảnh Flutter không có nghĩa là nhồi mọi công nghệ vào một người trong vài buổi. Nó nghĩa là học viên nắm được vòng đời sản phẩm mobile: từ wireframe và widget tree, đến gọi REST/JSON, xử lý lỗi mạng, phân quyền người dùng cơ bản, rồi trình bày sản phẩm cho khách hoặc giảng viên đánh giá.

Nếu bạn đang phân vân giữa React Native, Kotlin Multiplatform và Flutter, clip này hữu ích vì nó không tranh luận “framework nào số 1 thế giới”, mà trả lời câu hỏi thực dụng hơn: với mục tiêu ra sản phẩm sớm, hệ sinh thái Dart/Flutter có đủ công cụ để bạn đi từ buổi 1 đến demo hoàn chỉnh hay không.

Bạn nên xem video này trước hai video còn lại. Nó tạo khung: short Flame là bài tập kỹ năng vẽ và vòng lặp game; ChillCoffee là bằng chứng học viên làm được app nghiệp vụ.

Video 2 — Short Flame Game App

Flutter Short — Thực hành Flame Game App là dạng nội dung ngắn, dễ chia sẻ. Flame giúp bạn đưa game loop, sprite và va chạm vào Flutter mà không phải lập trình native engine từ đầu.

Vì sao đưa game vào lộ trình “ứng dụng nghiệp vụ”? Vì game buộc bạn nắm vững vòng đời widget, cập nhật liên tục theo frame, và tư duy tách phần hiển thị khỏi phần trạng thái. Các kỹ năng này quay lại rất nhanh khi làm app đặt món, chat, hoặc dashboard realtime: cùng là cập nhật UI theo sự kiện, chỉ khác miền nghiệp vụ.

Short cũng phù hợp fanpage và nhóm học viên. Người xem chưa sẵn sàng ngồi mười phút vẫn nhận được một “aha”: Flutter không chỉ form và list — bạn có thể làm trải nghiệm có chuyển động, phản hồi xúc giác và âm thanh nhẹ.

Video 3 — ChillCoffee: social proof dự án học viên

Điểm khác biệt rõ nhất nằm ở demo ChillCoffee. Đây không phải mockup marketing do studio dựng. Bạn thấy học viên trình bày UI và luồng quản lý quán cafe: danh mục, thao tác trên màn hình thật, cảm giác sản phẩm “đụng tay được”.

Social proof kiểu này quan trọng với phụ huynh, lãnh đạo đội ngũ kỹ thuật và bản thân người học. Lời hứa “học xong làm được app” chỉ thuyết phục khi có clip chứng minh: có người thật đã đi hết lộ trình và mang ra sản phẩm liên quan đời sống kinh doanh Việt Nam (F&B).

Khi xem ChillCoffee, hãy chú ý bố cục màn hình: khoảng trắng, độ tương phản, nút call-to-action, và việc các màn hình nối với nhau thế nào. Đó là dấu hiệu học viên đã rời khỏi giai đoạn “widget demo linh tinh” để đến giai đoạn thiết kế sản phẩm.

Lộ trình học gắn với sản phẩm

Một lộ trình Flutter bền thường chia thành các tầng năng lực. Tầng một: Dart căn bản, widget, layout, navigation. Tầng hai: state (Provider/Riverpod hoặc tương đương), form validate, gọi API, xử lý loading/error/empty. Tầng ba: lưu trữ local, auth đơn giản, phân quyền, đóng gói APK/IPA thử nghiệm. Tầng bốn: tối ưu hiệu năng, i18n, analytics nhẹ, checklist store.

Ba video trên map vào các tầng đó: video giới thiệu phác toàn ảnh; Flame kéo bạn vào tầng tương tác và vòng lặp; ChillCoffee chứng minh bạn đã ghép nhiều màn hình thành một câu chuyện nghiệp vụ.

Học viên hay mắc kẹt ở chỗ “học được widget nhưng không biết ghép thành app”. Cách thoát là chọn một domain quen thuộc — quán cafe, phòng gym, cửa hàng phụ tùng — rồi siết scope. ChillCoffee là ví dụ siết scope đúng: đủ để demo quản lý, không cần ERP toàn doanh nghiệp ngay buổi đầu.

Kỹ năng đi kèm ngoài viết UI

Làm mobile thực chiến còn cần giao tiếp với backend, đọc tài liệu API, viết issue khi lỗi môi trường, và trình bày cho người không chuyên kỹ thuật. Trong khóa Flutter Full Stack, các buổi học thường kết hợp live code với sửa bài theo ngữ cảnh dự án, thay vì chỉ chiếu slide.

Bạn cũng nên quen với Git và thói quen commit nhỏ. Nhiều sản phẩm học viên hỏng không vì thiếu ý tưởng mà vì không revert được sau một lần refactor ẩu. Video demo sản phẩm chỉ đẹp khi phía sau có kỷ luật codebase tối thiểu.

Ai phù hợp khóa Flutter tại Hướng Nghiệp Dữ Liệu?

• Sinh viên CNTT muốn portfolio mobile trước khi xin việc
• Lập trình viên web muốn mở rộng sang app
• Chủ quán / chủ SME muốn hiểu và kiểm soát team outsource Flutter
• Người chuyển nghề sẵn sàng code hàng ngày, không chỉ xem video thụ động

Nếu bạn chỉ muốn “biết khái niệm”, ba clip YouTube phía trên đã đủ để khảo sát. Nếu bạn muốn có sản phẩm trong tay và được feedback trực tiếp, hãy xem trang khóa và liên hệ tư vấn lịch học.

Cách xem ba video để tận dụng tối đa

1. Xem giới thiệu lộ trình hết lượt, ghi lại 3 mục tiêu cá nhân (ví dụ: làm app menu quán, chat nội bộ, mini-game).
2. Xem Flame short, thử mở lại project mẫu nếu đã có môi trường Flutter.
3. Xem ChillCoffee như checklist UI: liệt kê màn hình nào bạn muốn copy cấu trúc cho dự án của mình.

Liên kết học và liên hệ

Trang khóa: Lập trình Flutter tại Hướng Nghiệp Dữ Liệu

Fanpage Flutter: Hướng Nghiệp Dữ Liệu — Lập trình Flutter

Hotline: 0934 145 100 · Zalo: 0397 919 841 · Email: daotao@huongnghiepdulieu.com

Kết

Flutter không phải phép màu, nhưng là đường tắt hợp lý để biến ý tưởng app thành bản chạy được trên cả iOS lẫn Android. Ba video — lộ trình Full Stack, Flame short, ChillCoffee học viên — cho bạn đủ ngữ cảnh: học gì, tập gì, và đầu ra trông ra sao.

Nếu bạn sẵn sàng bắt đầu, vào trang khóa Flutter, chọn lịch phù hợp và nhắn Zalo để được tư vấn lộ trình Level theo nền tảng hiện tại của bạn.

Hướng Nghiệp Dữ Liệu — đào tạo Flutter, Python, MT5, Bot Auto Trading thực chiến. Cập nhật 07/2026.

Đọc thêm

• Trở Thành Full-Stack FinTech Developer: Khi MT5, Python và Flutter Hợp Nhất (2026)
• Lộ trình học để trở thành người xây hệ thống giao dịch thực chiến (Full-Stack Algo Trader)

Khi ứng dụng phình to, việc truyền dữ liệu từ Widget cha xuống các Widget con ở tầng sâu qua các constructor (Prop Drilling) sẽ khiến mã nguồn trở nên cực kỳ rối rắm và khó bảo trì.

1. Vấn đề “Prop Drilling” thực tế

Hãy tưởng tượng bạn có dữ liệu người dùng ở màn hình chính (Widget A), và bạn cần hiển thị nó ở nút bấm nằm sâu trong Widget Tree (Widget D). Bạn phải truyền qua B, C dù 2 Widget này không hề dùng đến dữ liệu đó. Điều này gây dư thừa constructor rất lớn.

2. Giải pháp nguyên bản của Flutter: InheritedWidget

InheritedWidget cho phép các Widget con nằm ở bất kỳ độ sâu nào trong cây thư mục đều có thể truy cập trực tiếp dữ liệu từ Widget cha thông qua cơ chế Context:

final myData = MyInheritedWidget.of(context).data;

Hệ thống sẽ tự động đăng ký lắng nghe và re-build lại Widget con khi dữ liệu của InheritedWidget thay đổi.

3. Hạn chế và Hướng đi tương lai

InheritedWidget viết code khá rườm rà. Vì vậy, các thư viện State Management hiện đại (như ScopedModel, Provider, Bloc) đều được xây dựng bọc lấy InheritedWidget để mang lại cú pháp lập trình đơn giản hơn.

Một trong những nguyên nhân phổ biến nhất khiến ứng dụng Flutter bị sụt giảm FPS, gây giật lag (jank) khi cuộn trang là do hiện tượng Widget bị vẽ lại (re-build) quá nhiều lần không cần thiết.

1. Hiểu rõ cơ chế Re-build khi gọi setState hoặc notifyListeners

Mỗi khi bạn kích hoạt thay đổi State, Flutter sẽ duyệt cây Widget từ điểm kích hoạt trở xuống và vẽ lại tất cả các Widget con. Nếu điểm kích hoạt nằm ở Widget gốc cha lớn nhất, toàn bộ màn hình sẽ bị vẽ lại, gây lãng phí CPU cực lớn.

2. Quy tắc vàng 1: Sử dụng tối đa hằng số const

Thêm từ khóa const trước các Widget tĩnh. Flutter sẽ ghi nhớ các Widget này vào bộ nhớ cache và bỏ qua hoàn toàn việc vẽ lại chúng khi cây Widget cha re-build:

const Text('Tiêu đề tĩnh không bao giờ đổi');

3. Quy tắc vàng 2: Thu hẹp phạm vi của ScopedModelDescendant

Tránh bọc toàn bộ màn hình lớn bằng một thẻ ScopedModelDescendant. Hãy đưa Descendant xuống sâu nhất có thể, chỉ bọc đúng Widget thực sự hiển thị giá trị thay đổi để hạn chế tối đa vùng re-render.

Khi ứng dụng Flutter của bạn phát triển lớn hơn, một Model đơn lẻ không thể gánh vác toàn bộ logic của ứng dụng. Bạn cần phân tách thành các Model nhỏ chuyên biệt (như UserModel, ProductModel, ThemeModel) và quản lý chúng khoa học.

1. Phân tách Model theo nhóm chức năng

• UserModel: Quản lý thông tin tài khoản, đăng nhập, phân quyền.
• EmployeeModel: Quản lý danh sách nhân sự, chức năng thêm/sửa/xóa nhân viên.
• ConfigModel: Quản lý chế độ sáng/tối (Dark Mode), ngôn ngữ ứng dụng.

2. Lồng ghép Multi-Model lồng nhau trong cây Widget

Để cung cấp nhiều Model cùng lúc cho ứng dụng, bạn có thể xếp chồng các ScopedModel lên nhau ở gốc ứng dụng (main.dart):

ScopedModel<UserModel>(
  model: userModel,
  child: ScopedModel<EmployeeModel>(
    model: employeeModel,
    child: MyApp(),
  ),
)

3. Thiết kế MainModel gộp (Aggregate Pattern)

Giải pháp tối ưu hơn để tránh lồng nhau quá sâu là tạo một lớp MainModel kế thừa từ tất cả các Model con bằng cách sử dụng sức mạnh with (Mixins) của Dart:

class MainModel extends Model with UserModel, EmployeeModel, ConfigModel {}

Từ đó, toàn bộ ứng dụng chỉ cần lắng nghe duy nhất một thực thể MainModel cực kỳ gọn gàng!

Trong phát triển ứng dụng di động chuyên nghiệp, việc viết lẫn lộn code vẽ giao diện và code xử lý logic (tính toán, gọi mạng) vào cùng một file Widget là một thói quen rất xấu. ScopedModel là giải pháp hoàn hảo để tách biệt chúng.

1. Ba cột trụ của ScopedModel

Kiến trúc ScopedModel hoạt động dựa trên 3 thành phần cốt lõi:
* Model: Nơi chứa dữ liệu và logic nghiệp vụ. Lớp Model này kế thừa từ Model của thư viện ScopedModel.
* ScopedModel: Widget cung cấp Model cho các Widget con nằm bên dưới nó trong cây thư mục.
* ScopedModelDescendant: Widget lắng nghe và tự động vẽ lại giao diện bất cứ khi nào Model có cập nhật mới.

2. Kích hoạt vẽ lại UI bằng notifyListeners()

Bên trong Model, sau khi xử lý thay đổi dữ liệu (ví dụ: thêm thành viên mới thành công), bạn gọi hàm:

notifyListeners();

Hàm này sẽ thông báo cho toàn bộ các ScopedModelDescendant đang lắng nghe biết để tự động cập nhật lại UI tức thì.

Để kiểm soát bộ nhớ ứng dụng tốt, gọi API đúng thời điểm, và tránh rò rỉ tài nguyên (Memory Leak), bạn bắt buộc phải hiểu rõ vòng đời hoạt động của một StatefulWidget.

1. Giai đoạn khởi tạo: createState và initState

• createState(): Được gọi ngay khi Widget được đưa vào Widget Tree để khởi tạo đối tượng State liên kết.
• initState(): Hàm quan trọng bậc nhất. Được gọi duy nhất 1 lần trong đời của Widget. Đây là nơi lý tưởng để khởi tạo các Controller (như TextEditingController), đăng ký lắng nghe Stream, hoặc gọi API tải dữ liệu ban đầu.

2. Giai đoạn cập nhật trạng thái: didChangeDependencies và build

• didChangeDependencies(): Chạy ngay sau initState và bất cứ khi nào đối tượng InheritedWidget mà nó phụ thuộc thay đổi giá trị.
• build(): Được gọi liên tục mỗi khi State thay đổi (qua setState) để vẽ lại giao diện trên màn hình. Hãy giữ hàm build thật tinh gọn, không tính toán logic phức tạp ở đây!

3. Giai đoạn hủy bỏ giải phóng bộ nhớ: dispose

• dispose(): Được gọi khi Widget bị xóa hoàn toàn khỏi Widget Tree. Bạn bắt buộc phải đóng các Stream, tắt các Animation Controller, hủy bộ lắng nghe để tránh tràn RAM thiết bị di động.

Dashboard (Bảng điều khiển) là màn hình quan trọng nhất của các ứng dụng quản lý doanh nghiệp, tài chính hay nhân sự. Màn hình này cần hiển thị thông tin trực quan, khoa học.

1. Thiết kế thanh công cụ Header và Profile cá nhân

Sử dụng sự kết hợp giữa Row và CircleAvatar để tạo phần thông tin tài khoản người dùng đăng nhập sắc nét ở góc phải màn hình, đi kèm thanh tìm kiếm tinh tế.

2. Xây dựng các thẻ thống kê số liệu (KPI Cards) bằng GridView

Sử dụng GridView.count với crossAxisCount: 2 để tạo mạng lưới hiển thị các thẻ số liệu báo cáo nhanh (ví dụ: Tổng số nhân sự, số lượng nghỉ phép, doanh thu tháng) sử dụng màu sắc neon tương phản hiện đại.

3. Danh sách tác vụ hành động nhanh (Quick Actions)

Triển khai một danh sách nằm ngang bằng cách cấu hình scrollDirection: Axis.horizontal trong ListView.builder chứa các nút chức năng bật/tắt nhanh các dịch vụ.