Flutter CheckboxListTile - A widget that has ListTile and checkbox in a row

Here we will implement how to create a custom checked listview in flutter application. In this app, we explain how to display CheckBox List using Flutter.

Flutter CheckboxListTile - A widget that has ListTile and checkbox in a row

Flutter CheckboxListTile basically contains a single row that has a title, subtitle, and a trailing checkbox icon.

‌Flutter CheckboxListTile Widget

Flutter CheckboxListTile displays a title, subtitle, or description and a checkbox icon horizontally. The suffix checkbox icon is mainly defined through the trailing parameter.

By default, Flutter CheckboxListTile can show two lines of text. The title and the subtitle. As the first line of text is not optional but the second line of text or the subtitle i.e. optional. The texture of the leading and trailing widgets can be modified according to the properties given.

So, are you ready to make use of this widget package in the Flutter application? If so, then let's quickly jump into the usage and the ways a CheckboxListTile can be modified and used to make user-friendly apps. Here I am going to use an open-source UI Library known as GetWidget to build this CheckboxListTile widget in Flutter.

How to Design Custom Checkbox in Flutter with Getwidget
Flutter GFCheckbox widget support Square, Circular, and Custom Checkbox with icon or Color and many more properties to customize as your need.
Flutter Custom Checkbox Design

GetWidget CheckboxListTile

GFCheckboxListtile is a Flutter CheckboxListTile. In this widget, we can design a title, subtitle, and a trailing checkbox widget. It has customization options which is an easy way to handle it as per the application and its requirement. The GetWidget CheckboxListTile displays the list of items in a card fashion.

How to Start

Now here is the guide about how we should start developing the GFCheckboxListTile Widget with the use of the GetWidget UI Library.

Getting started will guide you on how to start building a beautiful flutter application with the GetWidget UI library. You have to install the package from pub.dev, import the package in your Flutter project.

Install Package from pub.dev :

https://pub.dev/packages/getwidget

Import full package:

import 'package:getwidget/getwidget.dart';

Note: dependencies: getwidget: ^ 2.0.4

Keep playing with the pre-built UI components.

GFCheckboxListTile is a Flutter CheckboxListTile that has a list of items wherein the user can check or uncheck only one item in the list at a time. GFCheckboxListTile can also be positioned right or left of the screen according to the need. The below code gives a simple example with an avatar on the left side as shown in the below image.

Flutter Checkbox Listtile
Flutter Checkbox Listtile 
import 'package:getwidget/getwidget.dart';

bool isChecked = true;

GFCheckboxListTile(
  titleText: 'Getwidget Library',
  subTitleText: 'This is a open source UI library',
  avatar: GFAvatar(
    backgroundImage: AssetImage('Assets image here'),
  ),
  size: 26,
  activeBgColor: Colors.green,
  type: GFCheckboxType.circle,
  activeIcon: Icon(
    Icons.check,
    size: 16,
    color: Colors.white,
  ),
  onChanged: (value) {
    setState(() {
      isChecked = value;
    });
  },
  value: isChecked,
  inactiveIcon: null,
),
Flutter Checkbox Listtile With Example Code

Flutter GFCheckboxListTile Custom Properties

The Look and feel of the GFCheckboxListTile can be customized using the GFCheckboxListTile properties.

NameDescription
titleTexttype of [String] used to pass text, alternative to title property and gets higher priority than the title
subTitleTexttype of [String] used to pass text, alternative to subtitle property and gets higher priority than the subtitle
colorGFListTile's background color. Can be given [Color] or [GFColors]
avatartype of [Widget] or [GFAvatar] used to create a rounded user profile
titletitle to display inside the [GFListTile].
subTitlesubtitle to display inside the [GFListTile].
descriptiondescription to display inside the [GFListTile].
positionallows the user to set the position of the checkbox to start or end
margindefines the margin of GFListTile
paddingdefines the padding of GFListTile
typetype of [GFCheckboxType] which is of four types is basic, square, circular, and custom
sizetype of [double] which is GFSize ie, small, medium, and large and can use any double value
activeBgColortype of [Color] used to change the backgroundColor of the active checkbox
inactiveBgColortype of [Color] used to change the backgroundColor of the inactive checkbox
activeBorderColortype of [Color] used to change the border color of the active checkbox
inactiveBorderColortype of [Color] used to change the border color of the inactive checkbox
onChangedCalled when the user checks or unchecks the checkbox.
valueUsed to set the current state of the checkbox
activeIcontype of Widget used to change the checkbox's active icon
inactiveIcontype of [Widget] used to change the checkbox's inactive icon
customBgColortype of [Color] used to change the background color of the custom active checkbox only
selectedTo have the list tile appear selected when the checkbox is checked, pass the same value to both. Normally, this property is left to its default value, false.
autofocuson the true state, this widget will be selected as the initial focus when no other node in its scope is currently focused

How CheckboxListTile is different from ListTile?

Both ListTile and CheckboxListTile are having almost similar properties. We mostly use CheckboxListTile in those sections where we are having a list of options to select but in the case of ListTile, it is not mandatory to use the checkbox widget.

How To Design Custom Flutter Radio Button with Code Example
You can create a custom radio button with many custom properties like a Square radio button, ios type radio button, and many more with example code.
Flutter Custom RadioBox Design

Can we change the background color of CheckoxListTile?

Yes, we can change the background color by using the color property.

Can we change the check icon of CheckoxListTile?

Yes, we can change the check icon and instead of this, we can use any other icon widgets also.

Flutter Get Widget Docs

Flutter GetWidget Docs
Get Widget is one of the largest Flutter open-source UI Kit libraries for mobile or web apps. It has more than 1000+ pre-built reusable widgets.

Flutter Forum:

if any Find any questions let's discuss them on Forum.

GetWidget- A Flutter Developer Forum
Flutter largest Open-Source Flutter UI Library with in-built widgets.

GitHub Repository:

Please do appreciate our work through Github start

GitHub - ionicfirebaseapp/getwidget: Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.
Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app. - GitHub - ionicfirebaseapp/getwidget: Most popular and easy to use open source UI library with 1000+ W...

Conclusion:

Here we discuss, what Flutter CheckBoxListTile Widget is? And how we can use and implement it into our Flutter app through the GetWidget CheckBoxListTile component. Here, there are options to customize the CheckBoxListTile Button.

About Our Team:

We have been working on Flutter since Flutter launched in beta version in 2017. And our team have been putting hundreds and hundreds of hour to the experiment and implementation of Flutter. As well as after successful delivery of enterprise and SAAS applications that have been used by more than 500+ businesses around the 119+ countries. Now we are in love with Flutter development and we are very passionate about Flutter development. Now it is something we are trying to give a small contribution to the Flutter Dev Community.