Tài nguyên

Hoàn thiện dựng khung ứng dụng và cấu trúc thư mục Flutter (Day 3)

Posted on by Nancy Le

Trong phát triển sản phẩm số, có những ngày không tạo ra tính năng mới để khoe, nhưng lại quyết định toàn bộ vận tốc và độ bền của dự án về sau. Day 7 của Clarity App là một ngày như vậy: tập trung hoàn thiện kiến trúc điều hướng, xử lý triệt để lỗi nền tảng và xác nhận ứng dụng đã sẵn sàng bước sang giai đoạn phát triển chức năng thực sự.

1. Bối cảnh của Day 3: Dưng khung ứng dụng

Sau 2 ngày đầu xây dựng Clarity App, hệ thống đã hình thành các màn hình cơ bản nhưng vẫn tồn tại nhiều rủi ro tiềm ẩn: lỗi build, điều hướng chưa ổn định và kiến trúc chưa được kiểm chứng trong vận hành thực tế. Nếu tiếp tục phát triển tính năng khi nền móng chưa vững, chi phí sửa sai ở các giai đoạn sau sẽ tăng theo cấp số nhân.

Day 3 được dành riêng để dừng lại, kiểm tra và củng cố toàn bộ phần khung của ứng dụng. Ngoài ra mục tiêu của chúng ta hôm nay là hoàn thành cấu trúc khung thư mục flutter chuẩn. Việc tư duy thư mục chuẩn và hình dung rõ cấu trúc app, chính là bước đầu tiên Lập trình viên cần nắm được để não của bạn có thể tự định hướng trong quá trình phát triển ứng dụng.

Hãy đọc lại 2 ngày đã qua, để biết ngày thứ 3 chúng ta đang làm các việc tiếp theo như thế nào?

Day 1: Cài đặt môi trường flutter cho window

Day 2:  Hướng dẫn khởi tạo và chạy môi trường flutter từ terminal

2. Cấu trúc khung thư mục flutter trong day 3

Trong Day 3 chúng ta sẽ cấu trúc khung của ứng dụng và đặc biệt là cấu trúc khung thư mục flutter hoàn chỉnh, hãy để ý rằng thư mục flutter phù hợp với từng ứng dụng. Ví dụ cấu trúc thư mục flutter đơn giản. Tuy nhiên thực tế các dự án cấu trúc thư mục Flutter sẽ khủng gấp hàng trăm lần.

main.dart
↓
app.dart (MaterialApp)
↓
routes/
└── app_routes.dart
↓
pages/
├── home_page.dart
└── detail_page.dart

2.1. Hoàn thiện AppShell – lõi điều hướng của ứng dụng

Trong Flutter không tồn tại khái niệm AppShell mặc định.
Ở đây, AppShell được sử dụng như một pattern tự định nghĩa, với vai trò:

  • Bao bọc toàn bộ UI chính

  • Quản lý điều hướng cấp cao

  • Giữ state khi chuyển tab

Về mặt kỹ thuật, AppShell thường là:

  • Một StatefulWidget

  • Chứa Scaffold

  • Kết hợp BottomNavigationBar + IndexedStack

Sử dụng Appshell sẽ giúp Clarity App có một “bộ khung xương” ổn định, dễ mở rộng và không bị phụ thuộc chéo giữa các màn hình.

Ví dụ, source code mẫu của appshell

import ‘package:flutter/material.dart’;
import ‘package:clarity_app/pages/home/home_page.dart’;
import ‘package:clarity_app/pages/notes/notes_page.dart’;
import ‘package:clarity_app/pages/calendar/calendar_page.dart’;
import ‘package:clarity_app/pages/read/read_page.dart’;
class AppShell extends StatefulWidget {
  const AppShell({super.key});
  @override
  State<AppShell> createState() => _AppShellState();
}
class _AppShellState extends State<AppShell> {
  int _currentIndex = 0;
  // ❌ KHÔNG dùng const vì các page không phải const constructor
  final List<Widget> _pages = [
    const HomePage(),
    const NotesPage(),
    const CalendarPage(),
    const ReadPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(‘Clarity’),
        centerTitle: true,
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: ‘Home’,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.note),
            label: ‘Notes’,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.calendar_today),
            label: ‘Calendar’,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.menu_book),
            label: ‘Read’,
          ),
        ],
      ),
    );
  }
}

2.2. Ổn định Bottom Navigation Bar

Định nghĩa: Bottom Navigation Bar là thành phần cho phép người dùng di chuyển nhanh giữa các khu vực chính của ứng dụng.

Chúng ta đã làm:

  • Hiển thị nhất quán trên toàn bộ flow chính
  • Chuyển tab mượt, không gây rebuild dư thừa
  • Giữ nguyên state của từng tab khi chuyển qua lại

Mục tiêu: Đảm bảo trải nghiệm người dùng liền mạch và tránh các lỗi mất dữ liệu ngầm khi điều hướng.

2.3. Xử lý triệt để các lỗi nền tảng

Thực trạng ban đầu:

  • Lỗi StatefulWidget not found
  • Lỗi State<T> not found
  • Thiếu import thư viện nền (material.dart)

Chúng ta cần làm:

  • Rà soát lại toàn bộ file liên quan đến navigation
  • Chuẩn hóa import và cấu trúc file
  • Build và run lại app để xác nhận không còn lỗi blocker

Mục tiêu: Đưa ứng dụng về trạng thái build sạch – chạy ổn định – không lỗi ẩn.

3. Trạng thái Clarity App sau Day 3

Hạng mục Trạng thái
Kiến trúc tổng thể Ổn định
Điều hướng Hoạt động tốt
UI khung Đã hoàn thiện
Build & Run Không lỗi

Tại thời điểm này, Clarity App đã vượt qua giai đoạn thử nghiệm ý tưởng và chính thức bước sang phase phát triển sản phẩm.

4. Ý nghĩa của Day 3 đối với toàn bộ dự án

Day 3 của hành trình 14 ngày lập trình ứng dụng với Flutter không tạo ra tính năng mới, nhưng lại tạo ra đòn bẩy:

  • Giảm rủi ro kỹ thuật trong tương lai
  • Tăng tốc độ phát triển ở các ngày tiếp theo
  • Giúp đội ngũ tập trung vào logic nghiệp vụ thay vì sửa lỗi nền

Trong thực tế, rất nhiều dự án thất bại không phải vì ý tưởng kém, mà vì bỏ qua giai đoạn củng cố nền móng này.

5. Hướng dẫn rút ra cho người làm sản phẩm

Một vài kinh nghiệm giúp bạn phát triển một ứng dụng hoặc sản phẩm số:

  1. Đừng vội làm feature khi kiến trúc chưa ổn định
  2. Hãy dành ít nhất một mốc thời gian để “dọn nền”
  3. Điều hướng mượt và state ổn định quan trọng hơn giao diện đẹp ở giai đoạn đầu

Đây là những nguyên tắc tưởng chừng đơn giản nhưng lại mang tính sống còn, giúp chúng ta phát triển một ứng dụng.

6. Định hướng tiếp theo cho App

Sau Day 3, dự án sẽ bước sang giai đoạn:

  • Xây dựng các màn hình chức năng chính
  • Chuẩn hóa hệ thống UI component
  • Đưa logic nghiệp vụ cốt lõi vào app

Từ đây, mỗi ngày phát triển sẽ mang lại giá trị nhìn thấy rõ ràng hơn cho người dùng cuối.

Kết luận

Day 3 là một ngày âm thầm nhưng mang tính quyết định, bạn đã cấu hình xong khung ứng dụng và đặc biệt là cấu trúc thư mục flutter của bạn đã sẵn sàng. Clarity App không còn là một bản demo kỹ thuật, mà đã trở thành một nền tảng đủ vững để phát triển nhanh, bền và có định hướng rõ ràng trong những ngày tiếp theo.

Bài viết này được đăng tải trên The Master Reach và nằm trong chuỗi bài 14 days phát triển ứng dụng hoàn chỉnh, bạn chỉ cần đọc kỹ chuỗi bài viết này để có thể hiểu và thực hiện triển khai từ cài đặt môi trường làm việc Flutter trên window cho đến từng bước xây dựng và hoàn thiện ứng dụng. Vui lòng liên hệ TMR Team nếu bạn cần hỗ trợ.

How useful was this post? 5/5 - (1 bình chọn)