Custom checkbox tile in flutter

Updated 14 March 2024


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.


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


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.


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


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.


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 :

want to learn more about multi select check box.

Output of example code

Trailing checkbox with circle shape

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 :



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.


. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home