Xin chào các bạn, hôm nay mình sẽ giới thiệu về Enumtrong Flutter. Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách khai báo, cách sử dụng, một số mẹo và thủ thuật để làm việc với Enum hiệu quả hơn.

1. Tìm hiểu kiểu dữ liệu Enum:

In computer programming, an enumerated type (also called enumeration, enum, or factor in the R programming language, and a categorical variable in statistics) is a data type consisting of a set of named values called elements, members, enumeral, or enumerators of the type. The enumerator names are usually identifiers that behave as constants in the language. - Theo Wikipedia

Enumlà từ viết tắt của Enumeration - một kiểu dữ liệu đặc biệt cho phép bạn định nghĩa một tập hợp các hằng số có tên. Enum có thể giúp bạn viết code rõ ràng hơn, dễ đọc hơn và tránh được những lỗi do nhập sai giá trị. Ví dụ, bạn muốn viết một ứng dụng quản lý trạng thái của một công việc. Các trạng thái sẽ bao gồm: Todo, Doing hoặc Done.

enum TaskStatus { 
    Todo, 
    Doing, 
    Done 
}

2. Kiểu dữ liệu Enum trong Flutter:

Cá nhân mình sử dụng Enum rất nhiều trong các dự án mình làm, thậm chí khi mình thực hiện bộ Design System cho dự án, mình cũng sử dụng Enum để thể hiện đầy đủ các trạng thái ví dụ như Success, Error, Warning, Alert,... Câu hỏi đặt ra tại sao mình lại làm thế? Giả sử dự án kế tiếp cũng được thiết kế chuẩn bộ Design System thì công việc của mình lại khá nhẹ nhàng, vào đúng 1 file hoặc 1 nơi để chỉnh sửa mà thôi 😄.

Mình sẽ để file này trong source code demo nhé! Bây giờ mình sẽ hiển thị tất cả các Label type trong app ra để bạn xem. Mình tạo thêm 1 class Widget tên là CommonChipWidget để hiển thị các label type.

Mình dùng vòng lặp để hiển thị danh sách các Label type ra màn hình. Bạn thấy đấy với từng Label type mình đã định nghĩa background-color, text-color tương ứng rồi cho nên việc hiển thị UI bây giờ rất dễ dàng. Chạy thử code chúng ta sẽ được như hình bên dưới.

3. Flutter Enum 3.0:

Phần demo phía trên là code cũ của mình cho đến khi Flutter lên version stable 3.0. Ở version này, Flutter đã enhance Enum của chúng ta rất là xịn xò. Cá nhân mình vẫn giữ đoạn code trên vì mình thấy không cần phải update gì thêm. Bây giờ mình sẽ hướng dẫn các bạn trong trường hợp áp dụng vào project thực tế như thế nào.

Ở đầu bài viết mình có để hình ảnh Demo phần Badge(Order Status). Đó là project thật của mình và mình tạo các Badge để quản lý các Order Status trong dự án. Để bảo mật mình xin phép demo 1 vài cái Status tương ứng với các Label Type theo demo Design System có trong phần 2 ở trên nhé!

enum OrderStatusEnum { 
    shipped('shipped', 'Bàn giao vận chuyển', LabelType.success), 
    deliveryPicking( 'deliveryPicking', 'Vận chuyển đang lấy hàng', LabelType.infor), 
    missed('missed', 'Thất lạc hàng hóa', LabelType.error), 
    lacked('lacked', 'Đơn thiếu hàng', LabelType.warning);
}

const OrderStatusEnum(this.status, this.text, this.labelType);

final String status; final String text; final LabelType labelType; }

Thay vì phải viết thêm các extension, giờ đây Flutter đã cho phép chúng ta tạo ra các field (thuộc tính) tương ứng với mỗi phần tử trong Enum. Ok giờ mình thử hiện các Order Status lên UI xem thử như thế nào. Mình thay thế đoạn code render ra List Label type thành List Order Status.

body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: OrderStatusEnum.values.map((e) {
            return Padding(
              padding: const EdgeInsets.only(bottom: 20),
              child: CommonChipWidget(
                text: e.text,
                bgColor: e.labelType.bgColor(),
                textColor: e.labelType.textColor(),
              ),
            );
          }).toList(),
        ),
      ),

Đến đây vẫn chưa kết thúc vì mình biết các bạn sẽ có nhu cầu kiểu như: "Ơ giờ muốn truyền các status vào để nó tự động tìm kiếm Enum tương ứng thì làm sao?" Câu trả lời rất đơn giản mình demo liền đây.

Đầu tiên, các bạn viết thêm 1 extension xử lý List nếu như List đó không tồn tại phần tử đang tìm kiếm thì sẽ trả về null.

extension ListExtension on List {
  T? firstWhereOrNull(bool Function(T element) condition) {
    for (final element in this) {
      if (condition(element)) return element;
    }
    return null;
  }
}

Sau đó, các bạn viết thêm 1 static function truyền vào status và trả về Order Status Enum tương ứng, nếu không tìm thấy thì trả về null.

Sau đó, ở ngoài giao diện bạn tạo 1 biến status để chạy thử.

Tada và đó là toàn bộ những gì mình muốn chia sẻ về Enum trong Flutter. Cảm ơn bạn đã đọc đến đây và code demo mình sẽ để bên dưới nhé!