CODEWITHSUNDEEP
androiddartflutter
Farhana Naaz Ansari
Farhana Naaz Ansari

Reputation: 7944

Change checked mark color of checkbox in flutter

I need to change check mark color of the checkbox in the flutter and there is no parameter is given to change color in Checkbox.

Checkbox(
   value: isCheck,
   activeColor: Colors.grey,
   onChanged: (bool value) {
   setState(() { isCheck = value;});
       })

dart class code

  const Checkbox({
    Key key,
    @required this.value,
    this.tristate = false,
    @required this.onChanged,
    this.activeColor,
    this.materialTapTargetSize,
  }) : assert(tristate != null),
       assert(tristate || value != null),
       super(key: key);

Upvotes: 42

Views: 87489

Answers (7)

Martin Braun
Martin Braun

Reputation: 12579

If you want to modify only one CheckBox with its colors, you won't like to use Theme. All the other solutions won't show you how to also modify the color of the inactive CheckBox. The inactive Checkbox is just a BorderSide, so:

Checkbox(
  checkColor: Colors.white,
  activeColor: Colors.green,
  side:
      BorderSide(width: 2, color: Colors.green),
  value: _accepted,
  onChanged: (value) {
    setState(() {
      _accepted = value;
    });
  },
),

This will give you a green CheckBox with a white check arrow:

A green checkbox with a white arrow turning on and off

Upvotes: 12

kashlo
kashlo

Reputation: 2617

You can change checkbox color globally in the app using theme:

MaterialApp(
  theme: ThemeData(
    checkboxTheme: CheckboxThemeData(
      checkColor: MaterialStateProperty.all(Colors.white),
      fillColor: MaterialStateProperty.all(Colors.orange),
    )
  )
);

Upvotes: 18

Ilya Iksent
Ilya Iksent

Reputation: 1768

My solution for customizing Checkboxes

Custom:

  • Size
  • Border-radius
  • Background
  • No border
class AppCheckbox extends StatelessWidget {
  final bool value;
  final bool disabled;
  final double size;
  final ValueChanged<bool> onChanged;

  const AppCheckbox({
    Key key,
    this.size = 24,
    this.value = false,
    this.disabled = false,
    this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final backColor = disabled ? AppColors.white8 : AppColors.white24;
    final checkColor = disabled ? AppColors.white56 : Colors.white;

    return Theme(
      data: Theme.of(context).copyWith(
        disabledColor: Colors.transparent,
        unselectedWidgetColor: Colors.transparent,
      ),
      child: SizedBox(
        width: size,
        height: size,
        child: Container(
          decoration: BoxDecoration(
            color: backColor,
            borderRadius: BorderRadius.circular(4),
          ),
          clipBehavior: Clip.hardEdge,
          child: Transform.scale(
            scale: size / Checkbox.width,
            child: Checkbox(
              hoverColor: Colors.transparent,
              focusColor: Colors.transparent,
              activeColor: Colors.transparent,
              checkColor: checkColor,
              value: value,
              onChanged: disabled
                  ? null
                  : (value) {
                      onChanged(value);
                    },
            ),
          ),
        ),
      ),
    );
  }
}

Upvotes: 5

Ride Sun
Ride Sun

Reputation: 2333

If you don't want to set it in each checkbox than use this:


new ThemeData.dark().copyWith(
  unselectedWidgetColor: Colors.orange.shade800,
  toggleableActiveColor: Colors.orange.shade800,

Upvotes: 24

Pasan Randula Eramusugoda
Pasan Randula Eramusugoda

Reputation: 1679

To change color of a checkbox:

When inactive (border color):

Theme(
      data: Theme.of(context).copyWith(
        unselectedWidgetColor: Colors.white,
      ),
      child: Checkbox(...),
    )

When checked (icon color):

Checkbox(
        checkColor: Colors.red,
        ...
      )

When active (checked):

Checkbox(
        activeColor: Colors.amberAccent,
        ...
      )

Full Code Sample:

Theme(
      data: Theme.of(context).copyWith(
        unselectedWidgetColor: Colors.white,
      ),
      child: Checkbox(
        checkColor: Colors.red,
        activeColor: Colors.amberAccent,
        value: _terms,
        onChanged: (bool value) {
          setState(() {
            _terms = value;
          });
        },
      ),
    )

Upvotes: 69

anmol.majhail
anmol.majhail

Reputation: 51206

Right now I am Using -

Flutter (Channel dev, v1.2.2,)

Option to change the Checkmark Color is not present on stable channel.

Checkbox(
          value: isCheck,
          checkColor: Colors.yellowAccent,  // color of tick Mark
          activeColor: Colors.grey,
          onChanged: (bool value) {
            setState(() {
              isCheck = value;
            });
          }),

Upvotes: 25

cipli onat
cipli onat

Reputation: 2142

you can change it with the bool variable which is isCheck in your case like this : 

Checkbox(
   value: isCheck,
   activeColor: isCheck ? Colors.green: Colors.grey ,
   onChanged: (bool value) {
   setState(() { isCheck = value;});
       })

Upvotes: 5

Related Questions