Custom checkbox tile in flutter

In today’s blog we are going to discuss how to create custom checkbox tile in flutter. If you are using flutter then you may probably know that it provide CheckboxListTile widget for this purpose.

With the help of CheckboxListTile widget we can display title, subtitle (description) and a checkbox icon horizontally, But there is no option to customize the size, shape and default check icon in CheckboxListTile.

We can create our own Custom checkbox tile and customize size, shape and the check icon based on our need.

You may also check our flutter app development services page to read more about Flutter app development from mobikul.

Implementation

To implement custom list tile in flutter follow these steps mention below :

STEP 1

Create a custom check box stateful class (CustomCheckBox) as shown below :

In above code we have created stateful widget and accepting customizable properties in the the constructor of the widget from the its parent widget.

These customizable properties includes : size, shape, check widget, active colour, background colour etc.

You can also check this link.

STEP 2

Then create enum (MyCheckboxType) to define checkbox types (circle, square, custom and none) as shown below :

STEP 3

Now we can use this custom check box as a widget, To use this custom widget create a Stateful widget (CustomCheckBoxTile) and import the custom checkbox tile.

In above example code we have created a boolean variable “accepted” to check and uncheck the checkbox.

• We have used CustomCheckBox widget which we have created earlier and passed accepted variable in value property.
• in onChanged property we have passed callback function to update the boolean variable and update the UI using setState method.

Output

Run the project to check the output for our code, we will get the output as shown below :

Create custom Checkbox tile

Now we can create our custom checkbox tile using the flutter List tile widget and our CustomCheckBox widget as shown below :

In above example code we have used flutter’s ListTile widget inside column children as :

• In the leading property of the list tile we have used CustomCheckBox widget.
• The title and subtitle properties we have used for example text.
• when the check box value is changed the UI is updated.

want to learn more about multi select check box.

Output of example code

Trailing checkbox with circle shape

• In above example we have used checkbox widget as trailing property in ListTile.
• The shape of the checkbox in circle (MyCheckboxType.circle)

We get the circular checkbox output :

Checkbox with Custom check widget

To use our custom widget as active check icon widget we need to use activeIcon property and pass your widget, we used (Icons.done_all) in our example code.

We get the output as :

Conclusion

Thanks for reading this article ❤️

I hope this blog will help you to learn about how to Custom checkbox tile in flutter and you will be able to implement it. For more updates, make sure to keep following Mobikul Blogs to learn more about flutter and android.

Happy Learning ✍️

For more understanding about list and list tile go through this link.

References

https://pub.dev/packages/getwidget