CODEWITHSUNDEEP
flutterdartlistviewlistviewitem
Mou Biswas
Mou Biswas

Reputation: 314

how to change default text color in ListView in flutter Dart?

I want to change the text color of the ListView with along with the Checkbox but can't change the text color dynamically with the ListView's onselected item? I also add the color in the set State option but cant find the result I was lookin for.

here is my code:

ListView(
        children: [
          Text(
            '''   Categories''',
            style: TextStyle(
              color: Color(0xff181725),
              fontSize: 24,
              fontFamily: "Gilroy",
              fontWeight: FontWeight.normal,
            ),
          ),
          SizedBox(height: 13),
          ...checkBoxListOne.map(
            (item) => ListTile(
              onTap: () => onAllClicked(item),
              leading: Checkbox(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(5),
                ),
                side: BorderSide(
                  color: Color(0xffC2C2C2),
                  width: 2,
                ),
                activeColor: Color(0xff53B175),
                value: item.value,
                onChanged: (value) => onAllClicked(item),
              ),
              title: Text(
                item.title!,
                style: TextStyle(
                  color: Color(0xff181725),
                ),
              ),
            ),
          ),
          SizedBox(height: 40),
          Text(
            '''   Brand''',
            style: TextStyle(
              color: Color(0xff181725),
              fontSize: 24,
              fontFamily: "Gilroy",
              fontWeight: FontWeight.normal,
            ),
          ),
          SizedBox(height: 13),
          ...checkBoxListTwo.map(
            (item) => ListTile(
              onTap: () => onAllClicked(item),
              leading: Checkbox(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(5),
                ),
                side: BorderSide(
                  color: Color(0xffC2C2C2),
                  width: 2,
                ),
                activeColor: Color(0xff53B175),
                value: item.value,
                onChanged: (value) => onAllClicked(item),
              ),
              title: Text(item.title!),
            ),
          ),
        ],
      ),

and here is the setState part :

onAllClicked(CheckBoxModal ckbItem) { setState(() { ColoredBox( color: Color(0xff53B175), ); ckbItem.value = !ckbItem.value; }); }

Upvotes: 0

Views: 1161

Answers (1)

Bram
Bram

Reputation: 680

You should add a field isSelected to the item objects in your checkBoxListOne list, and set/reset that field in the onTap of the item (item.isSelected = !item.isSelected), then call setState(){}. When you render the item, instead of activeColor: Color(0xff53B175) do something like activeColor: item.isSelected ? Color(0xff53B175) : Color(0xffffffff).

As a result of this change, the list is re-rendered whenever an item is tapped, and the color of the item when rendered is dependent on its 'tapped or not' state.

If you cannot (or don't want to) add a field, you can create a separate bool array of the same length as your checkBoxListOne list and use that to keep track of which item is selected.

Upvotes: 1

Related Questions