Flutter – Custom Gradient CheckBox

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

flutter create .

or create it from Android Studio.

Step 2: Let’s add 1 bool variable in our stateful widget

Dart

bool isChecked = false;

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: