Flutter - Custom Gradient CheckBox
Last Updated :
28 Apr, 2025
Flutter is famous for its UI components and its development. There are many widgets available with multiple properties to customise. Let's create a custom gradient checkbox. A sample video is given below to get an idea about what we are going to do in this article.
Checkbox in Flutter is a material design widget. It is always used in the Stateful Widget as it does not maintain a state of its own. We can use its onChanged property to interact with or modify other widgets in the Flutter app. Like most of the other flutter widgets, it also comes with many properties like activeColor, checkColor, mouseCursor, etc, to let developers have full control over the widget’s look and feel.
Step By Step Implementation
Let's learn from step-by-step implementation
Step 1: Let's create a basic flutter app or use existing code
We can create an app by the command in the terminal
Dart
or create it from Android Studio.
Step 2: Let's add 1 bool variable in our stateful widget
Dart
This variable we will use for checking the state of custom gradient checkbox
Step 3: Now we will create 1 Container for creating checkbox with below properties
In this container we have few properties which you can change as per your requirement
Properties:
- height, width: We have added fixed height width so that it remains same in responsiveness also
- alignment: We haved Alignment.center as all the child will be requiring incenter only
- decoration: In Box Decoration there multiple properties you can use and modify this checkbox but I have used only 2 properties. 1 most important gradient in this we will be passing the linear gradient with 2 different colors and borderradius for making checkbox beautiful.
Dart
Container(
// Fixed height and width is given so that
// it won't get change in responsiveness
width: 40,
height: 40,
alignment: Alignment.center, // Alignment as center
decoration: const BoxDecoration(
// TODO: you can change here gradient color
gradient: LinearGradient(
colors: [
Color(0xFFF09869),
Color(0xFFC729B2),
],
),
borderRadius: BorderRadius.all(Radius.circular(6)),
),
Step 4: Add following child in this container
Add Inkwell as its child as we will requiring it in next step to change the state of checkbox
Dart
Container(
// Fixed height and width is given so
// that it won't get change in responsiveness
width: 40,
height: 40,
alignment: Alignment.center, // Alignment as center
decoration: const BoxDecoration(
// TODO: you can change here gradient color
gradient: LinearGradient(
colors: [
Color(0xFFF09869),
Color(0xFFC729B2),
],
),
borderRadius: BorderRadius.all(Radius.circular(6)),
),
child: InkWell(
),
),
Step 5: Change the state of bool variable
In Inkwell we have added onTap where I willbe changing the state of isChecked variable
Dart
onTap: () {
// To change the state of isChecked variable
setState(() {
isChecked = !isChecked;
});
},
Step 6: With the help of Ternary operator we will add two different widgets inside button
As we are making custom gradient checkbox we need to handle how it will looks when check box is not selected or when it is selected. So we haved handled this from ternary operator by using 2 simple widgets 1st is Icon and 2nd is container with white color or background color. When isChecked is true we have give icon of check as it shows that checkbox is slected and if value is false we have pass plain container.
Dart
InkWell(
onTap: () {
// To change the state of isChecked variable
setState(() {
isChecked = !isChecked;
});
},
// TODO: Here you can see border of checkbox if
// ischecked is true , else gradient color of checkbox
child: isChecked
? const Icon(Icons.check_rounded, color: Colors.white)
: Padding(
padding: const EdgeInsets.all(2.5),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5)),
),
),
)
Here's go You have successfully created the custom gradient checkbox. You can use the below source code in your app.
Source Code of Checkbox
Dart
Container(
// Fixed height and width is given so that
// it won't get change in responsiveness
width: 40,
height: 40,
alignment: Alignment.center, // Alignment as center
decoration: const BoxDecoration(
// TODO: you can change here gradient color
gradient: LinearGradient(
colors: [
Color(0xFFF09869),
Color(0xFFC729B2),
],
),
borderRadius: BorderRadius.all(Radius.circular(6)),
),
child: InkWell(
onTap: () {
// To change the state of isChecked variable
setState(() {
isChecked = !isChecked;
});
},
// TODO: Here you can see border of checkbox if
// ischecked is true , else gradient color of checkbox
child: isChecked
? const Icon(Icons.check_rounded, color: Colors.white)
: Padding(
padding: const EdgeInsets.all(2.5),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5)),
),
),
),
),
Complete Source Code
Dart
import 'package:flutter/material.dart';
// You can also use stateful builder
// instead of stateful widget
class GradientCheckBox extends StatefulWidget {
const GradientCheckBox({Key? key}) : super(key: key);
@override
State<GradientCheckBox> createState() => _GradientCheckBoxState();
}
class _GradientCheckBoxState extends State<GradientCheckBox> {
bool isChecked = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: const Icon(Icons.arrow_back_ios),
onPressed: () {
Navigator.pop(context);
},
),
title: const Text('Gradient CheckBox'),
backgroundColor: Colors.green,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
// Fixed height and width is given so
// that it won't get change in responsiveness
width: 40,
height: 40,
alignment: Alignment.center, // Alignment as center
decoration: const BoxDecoration(
// TODO: you can change here gradient color
gradient: LinearGradient(
colors: [
Color(0xFFF09869),
Color(0xFFC729B2),
],
),
borderRadius: BorderRadius.all(Radius.circular(6)),
),
child: InkWell(
onTap: () {
// To change the state of isChecked variable
setState(() {
isChecked = !isChecked;
});
},
// TODO: Here you can see border of checkbox if
// ischecked is true , else gradient color of checkbox
child: isChecked
? const Icon(Icons.check_rounded, color: Colors.white)
: Padding(
padding: const EdgeInsets.all(2.5),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5)),
),
),
),
),
const SizedBox(
height: 20,
),
Text(
'Custom Gradient CheckBox',
style: Theme.of(context).textTheme.displaySmall,
),
],
),
));
}
}
Output:
Similar Reads
Flutter - Gradient Button Buttons are the building block of any Android Application, Buttons are helping in to perform specific tasks like Navigating from one screen to another screen, Showing the Toast, Sign-in, Sign-up buttons, and many more. But giving the effects of the colors to the Button makes the Button more pretty.
3 min read
Flutter - Custom Gradient Switch If you are using Flutter you must hear that it is very easy to make UI in this. All widgets are easy to use. So now let's make one common widget that you must have seen in almost every app i.e. Switch. Now you will say it is very easy to make from the switch widget. But we will make it a Gradient Sw
5 min read
Flutter - Checkbox Widget Checkbox in Flutter is a material design widget. It is always used in the Stateful Widget as it does not maintain its own state. We can use its onChanged property to interact with or modify other widgets in the Flutter app. Like most of the other flutter widgets, it also comes with many properties l
4 min read
Flutter - Custom Widgets We create Custom Widgets when we want a custom look and feel to our app, and we know that there will be a repetition of a particular widget. We can create the custom widget in a new dart file with all the codes and defining the parameters that we need in the constructor. For more on how to split wid
8 min read
Flutter - Gradient AppBar AppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a flutter application are a widget or a combination of widgets. So AppBar is also a built-in class or widget in flutter which give
5 min read
Flutter - CheckboxListTile CheckboxListTile is a built-in widget in flutter. We can say it a combination of CheckBox with a ListTile. Its properties such as value, activeColor, and checkColor are similar to the CheckBox widget, and title, subtitle, contentPadding, etc are similar to the ListTile widget. We can tap anywhere on
6 min read