CODEWITHSUNDEEP
flutterdart
Rajdeep
Rajdeep

Reputation: 2462

How do I change the tick color for CheckboxListTile

I have my checkbox widget all set up and would like to change the tick color to green when selected (currently it is white). So I managed to change the color of the checkbox when it is un-selected to white by adding a theme. I want to change the selected tick color to green, however I cant seem to find the right option under theme to do so.

Code:

  Widget buildResultTile(data) {
    return Theme(
      data: ThemeData(unselectedWidgetColor: white),
      child:
        CheckboxListTile(
        activeColor: transparent,
        title: AutoSizeText(
          data,
          maxLines: 1,
          style: TextStyle(
            color: white,
          ),
        ),
        value: _serachSelectList.contains(data),
        onChanged: (bool value) {
          setState(() {
            if (value) {
              _serachSelectList.add(data);
            } else {
              _serachSelectList.remove(data);
            }
          });
        },
        secondary: const Icon(Icons.account_box, color: white),      
      )
    );
  }

Un-selected:

enter image description here

Selected (I want only the tick to be Colors.green):

enter image description here

Upvotes: 4

Views: 15670

Answers (5)

sarjeet singh
sarjeet singh

Reputation: 541

it's working code for checkbox color change for flutter

checkColor: Colors.white,

activeColor: Colors.red,

CheckboxListTile(
                checkColor: Colors.white,
                activeColor: Colors.red,
                value: checkedValue,
                onChanged: (newValue) {
                  setState(() {
                    checkedValue = newValue!;
                  });
                },
                controlAffinity:
                    ListTileControlAffinity.leading, //  <-- leading Checkbox
              ),

Upvotes: 1

Sven
Sven

Reputation: 1887

You can use the checkColor property of the CheckboxListTile-Widget to set the color of the checkmark:

CheckboxListTile(
  checkColor: Colors.black54, //sets checkmark color
  // ... other properties ...
)

(see https://github.com/flutter/flutter/pull/37636)

To change the fill color of the checkbox see the answer of Magnus https://stackoverflow.com/a/56941539/702478

Upvotes: 7

Magnus
Magnus

Reputation: 18738

To change the fill color of the checkbox in a CheckboxListTile, you can simply set the toggleableActiveColor property in your ThemeData:

ThemeData(
    // ... other theme values ...

    toggleableActiveColor: Colors.green
)

Changing the color of the tick mark is unfortunately impossible with CheckboxListTile since it doesn't expose the checkColor property of its Checkbox widget, so you are stuck with rolling your own list tile.

Upvotes: 11

Egor
Egor

Reputation: 10334

You need to ditch the CheckboxListTile and instead use a Row with an icon, text, and a simple Checkbox widget.

Checkbox provides checkColor property - which is responsible for the check/tick color and is white by default. Set the color you desire for that property and it should work.

e.g.

Row(crossAxisAlignment: CrossAxisAlignment.center, children: [

  Icon(Icons.account_box, color: Colors.white),
  Expanded(
    child: AutoSizeText(
      data,
      maxLines: 1,
      style: TextStyle(
        color: white,
      ),
    )
  ),
  Checkbox(
    value: _serachSelectList.contains(data),
    onChanged: (bool value) {
      setState(() {
        if (value) {
          _serachSelectList.add(data);
          setState((){ default_color = selected_color });
        } else {
          _serachSelectList.remove(data);
          setState((){ default_color = unselected_color });
        }
      });
    },
    checkColor: Colors.green,
    activeColor: Colors.transparent,
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
  ),

]);

I did not test this code - you might encounter size & alignment issues that you would need to solve yourself. Nevertheless, the general idea is valid.

Let me know if this helped.

Upvotes: 5

DolDurma
DolDurma

Reputation: 17289

please try this pesudo code,

Color selected_color = Colors.green;
Color unselected_color = Colors.transparent;
Color default_color = unselected_color ;

  Widget buildResultTile(data) {
    return Theme(
      data: ThemeData(unselectedWidgetColor: white),
      child:
        CheckboxListTile(
        activeColor: default_color,
        title: AutoSizeText(
          data,
          maxLines: 1,
          style: TextStyle(
            color: white,
          ),
        ),
        value: _serachSelectList.contains(data),
        onChanged: (bool value) {
          setState(() {
            if (value) {
              _serachSelectList.add(data);
              setState((){ default_color = selected_color });
            } else {
              _serachSelectList.remove(data);
              setState((){ default_color = unselected_color });
            }
          });
        },
        secondary: const Icon(Icons.account_box, color: white),      
      )
    );
  }

i hope to help you

Upvotes: 2

Related Questions