Flutter: Cách sử dụng Checkbox

Checkbox trong Flutter là một loại widget có trạng thái, có thể có giá trị true hoặc false. Trạng thái true đại diện cho tùy chọn đã được chọn và trạng thái false là tùy chọn không được chọn. Khi người dùng chạm vào checkbox, trạng thái của nó sẽ thay đổi, cho phép người dùng kiểm soát việc chọn hoặc bỏ chọn tùy chọn đó.Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng Checkbox trong Flutter. Chúng ta có thể có hai loại Checkbox: phiên bản nhỏ gọn của Checkbox có tên “Checkbox” và Checkbox “CheckboxListTile” 

1. Các thuộc tính cơ bản của Checkbox

• value: Nó được sử dụng cho dù Checkbox có được chọn hay không (Đây là thuộc tính bắt buộc).
• onChanged: Nó sẽ được gọi khi giá trị được thay đổi (Đây là thuộc tính bắt buộc)
• activeColor: Nó chỉ định màu của Checkbox đã chọn.
• checkColor: Nó chỉ định màu của biểu tượng kiểm tra khi chúng được chọn.
• materialTapTargetSize: Nó được sử dụng để định cấu hình kích thước của mục tiêu chạm

Và một số thuộc tính khác, các bạn có thể tìm hiểu thêm ở trang chính thức của Flutter tại đây.

2. Cách sử dụng CheckBox

• Đầu tiên, tạo một biến với kiểu dữ liệu “bool” để lưu trạng thái của checkbox:

Biến lưu trạng thái của checkbox

• Sử dụng widget checkbox, truyền vào 2 thuộc tính bắt buộc là “value” và “onChanged” như sau:

Cách sử dụng Checkbox

Trong đó, value dùng để lưu trạng thái của checkbox. Khi isChecked = false, có nghĩa là checkbox của được tích, còn isChecked= true, là checkbox được tích và sẽ hiển thị một dấu tích trong ô checkbox. Hàm onChanged dùng để nhận sự kiện khi nhấn vào checkbox, ở đây “isChecked = !isChecked” dùng để đổi trạng thái của biến isChecked từ false → true và true → false khi mỗi lần nhấn vào checkbox đó.

→ Sau khi thực hiện cách bước trên thì chúng ta đã có được một giao diện của Checkbox như sau:

Giao diện Checkbox

Lưu ý: Checkbox cũng là 1 widget như những widget thông thường khác, chúng ta có thể sử dụng kèm với các widget khác thông qua row hay column để giúp Checkbox thêm rõ ràng, chi tiết hơn như sau:

Sử dụng checkbox với các widget khác

Kết quả thu được như sau: 

Giao diện checkbox với text trong row

Các bạn có thể tùy thích sử dụng checkbox để phù hợp với yêu cầu mà ứng dụng di động đang phát triển.

3.Cách sử dụng CheckboxListTitle

Cũng tương tự như cách sử dụng của Checkbox, CheckBoxListTitle sẽ cũng cấp thêm một số thuộc tính để giúp Checkbox trở nên đẹp hơn, phù họp với một số trường hợp cho nhà phát triển ứng dụng bằng Flutter.

Cách sử dụng CheckBoxListTitle

Ở đây chúng ta cũng cần tạo một biến là “isChecked” để lưu trạng thái của  CheckBoxListTitle, và hàm onChanged để đổi trạng thái của isChecked, tượng tự như với checkbox. Thuộc tính “secondary” cần truyền vào 1 wiget , được hiện thị ở phía trước ở checkbox. “title” dùng để chỉ định tiêu đề chính của danh sách, “subtitle” dùng để mô tả cho phần tử của danh sách đó.

Kết quả thu được như sau: 

Giao diện CheckBoxListTitle

Kết luận : Trong bài viết này, chúng ta đã tìm hiểu về cách sử dụng checkbox trong Flutter. Chúng ta đã tạo một Stateful Widget để quản lý trạng thái của checkbox và xem một ví dụ về việc sử dụng checkbox trong danh sách các mục. Checkbox là một công cụ hữu ích trong việc làm cho ứng dụng của bạn trở nên tương tác hơn và cho phép người dùng có quyền kiểm soát hơn các tùy chọn của ứng dụng.