Cách thêm hộp kiểm trong Flutter

Hộp kiểm là thành phần giao diện đồ họa người dùng (GUI) cho phép người dùng thực hiện lựa chọn nhị phân, tức là lựa chọn giữa một trong hai tùy chọn có thể loại trừ lẫn nhau. Ví dụ: người dùng có thể phải trả lời "có" hoặc "không" cho một câu hỏi có/không đơn giản.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách thêm hộp kiểm, hộp kiểm có nhãn và làm cho nó có thể chuyển đổi khi nhấp vào nhãn trong Flutter. Hộp kiểm là thành phần quan trọng đối với bất kỳ loại biểu mẫu nào. Xem ví dụ dưới đây:

Cách thêm hộp kiểm trong Flutter:

bool? check1 = false; //true for checked checkbox, false for unchecked one

Checkbox( //only check box
  value: check1, //unchecked
  onChanged: (bool? value){
      //value returned when checkbox is clicked
      setState(() {
          check1 = value;
      });
  }
)

Tại đây, bạn sẽ chỉ nhận được một hộp kiểm có trạng thái không được chọn. 

Cách thêm hộp kiểm có nhãn trong Flutter:

bool? check2 = true,;

CheckboxListTile( //checkbox positioned at right
  value: check2,
  onChanged: (bool? value) {  
      setState(() {
          check2 = value;
      });
  },
  title: Text("Do you really want to learn Flutter?"),
)

Tại đây, bạn sẽ có một hộp kiểm có nhãn nhưng trạng thái của hộp kiểm sẽ chỉ thay đổi khi bạn nhấn vào đó. Nhãn không thể nhấp được. 

Cách định vị hộp kiểm ở bên trái trên CheckboxListTile:

bool? check3 = false;

CheckboxListTile(
  value: check3,
  controlAffinity: ListTileControlAffinity.leading, //checkbox at left
  onChanged: (bool? value) {  
      setState(() {
          check3 = value;
      });
  },
  title: Text("Do you really want to learn Flutter?"),
)

Tại đây, bạn sẽ có một hộp kiểm có nhãn có thể nhấp vào. 

Cách kiểm tra xem Checkbox có được chọn hay không:

bool? check1 = false;

Checkbox(
  value: check1, //set variable for value
  onChanged: (bool? value){
      setState(() {
          check1 = value;
      });
  }
)

if(check1!){
   //checkbox is checked
}else{
   //checkbox is not checked
}

Bằng cách này, bạn có thể thêm hộp kiểm trong ứng dụng Flutter.