Flutter for beginner

Mở Đầu

Có rất nhiều ứng dụng yêu cầu bạn hiển thị một danh sách các item lên trên app. Ở đó người design thường xuyên yêu cầu bạn thêm một dòng gạch ở dưới bottom của mỗi item trong list của bạn. Nó sẽ giúp user tập trung sự chú ý vào một item cụ thể hoặc giúp cải thện UX tốt hơn.

Trong bài viết này, mình sẽ chỉ ra cách để làm điều đó trong List View

  • Tạo một List View đơn giản

Trong Flutter, chúng ta có thể tạo Listview đơn giản như bên dưới.

Sử dụng code trên bạn sẽ có một danh sách item hiển thị trên Listview , index của mỗi item ở chính giữa của danh sách.

Thêm Separator trong ListView: Flutter for beginer

Như các bạn nhìn thấy thì hiện tại chúng ta đang rất khó phân biệt giữa các item với nhau. Giải pháp đưa ra là thêm đường gạch ngang vào dưới mỗi item. Vậy như thế nào để bạn có thể thêm một divider vào trong ListView

  • Thêm divider vào trong ListView.

Flutter đã cung cấp sẵn cho bạn một ListView có divider. Tên là ListView.separated

    • separatorBuilder sẽ tạo ra các đường gạch ngang trong mỗi item,giá trị index bắt đầu từ 0 và nhỏ hơn itemCount – 1
    • itemCount: Số lượng item trong Listview
    • itemBuilder sẽ được gọi khi build một item, với index bắt đầu từ 0 và nhỏ hơn itemCount
Chú ý: Separator của bạn là Widget, nên bạn có thể dùng nó với bất kì widget nào khác như Text,Image,Container …

Kết bài

Như vậy sau bài viết này. Các bạn đã biết cách thêm Separator trong ListView như thế nào và khi nào thì cần đến nó rồi nhỉ :D.

Nếu có bất cứ vấn đề gì thắc mắc các bạn có thể comment bên dưới bài viết, mình sẽ phản hồi sớm nhất cho thể. Down source code tại đây

LEAVE A REPLY

Please enter your comment!
Please enter your name here