Flutter Base

Triển khai Base Flutter - Phần 5: Tầng Presentation

Firebase

I. Nhiệm vụ

Nhiệm vụ của tầng này là hiển thị giao diện và tương tác với người dùng. 

II. Các công việc cần xử lý

Ở tầng này ta sẽ tổ chức code theo feature-first, sẽ có các feature bao gồm các bloc, state, widget và chúng được dựng lên thì tùy theo đặc thù của mỗi dự án. Để hoàn thiện nốt base phần này chúng ta có vài đầu việc cần xử lý như sau:

III. Chi tiết xử lý

1. Cấu trúc theo feature-first

Folder presentation chứa các feature tương ứng trong ứng dụng, trong đó thì lại chứa các cấu trúc về bloc: quản lý state, components: chứa các widget mà screen chia nhỏ, các screen đại diện cho các màn tương ứng.

2. Show lỗi các exception (ở các tầng dưới) nếu cần trên UI

Ở các tầng Domain/Data sau khi xử lý logic/lấy dữ liệu về tầng Presentation, sẽ có những lỗi gặp phải trong quá trình xử lý này mà chúng ta cần thông báo lên màn hình cho người dùng được biết. Ví dụ như hiện thông báo khi api kết nối thất bại,... 

Mình triển khai extension cho Future, như vậy các hàm Future trong Bloc Cubit sau khi xử lý và trả về lỗi cho screen chỉ cần bắt onCatchError là có thể hiển thị message lỗi tương ứng.

3. Điều hướng giữa các màn hình

Phần này mình sử dụng Navigator được cung cấp sẵn bởi Flutter, khá đơn giản và tiện lợi khi sử dụng

Mình tách ra 1 class nhằm mục đích tổng hợp tất cả các màn hình mà ứng dụng có như trên. Và chúng ta chỉ cần khai báo nó trong main với param key onGenerateRouter.

Khi điều hướng mình chỉ chuyển tới các Screen name và params tương ứng:

4. Triển khai đa ngôn ngữ

Ứng dụng mobile thường cho phép chuyển đổi nhiều ngôn ngữ, nên việc tính trước và implement đa ngôn ngữ trong base là cần thiết. Có rất nhiều lib hỗ trợ cho việc này, cách sử dụng của chúng cũng rất đơn giản và bạn chỉ việc lựa chọn sao cho phù hợp với dự án của mình.

5. Triển khai các base component (các button, text chung, …), base styles

Có rất nhiều các widget sẽ xuất hiện đi xuất hiện lại trong ứng dụng của bạn, để hạn chế việc viết chúng nhiều lần thì chúng ta nên tạo thành các base_components và tái sử dụng chúng. Như ở phần a, chúng ta cũng có components trong các feature, khác biệt ở đây chính là base_component sẽ chứa các widget được sử dụng cho toàn bộ ứng dụng, còn components trong feature chỉ mục đích chia nhỏ, tái sử dụng widget trong các screen độc lập.

Còn về base styles sẽ bao gồm: colors, fonts, icons:

Table of Contents