I want to change the color of CustomListTile which is child of ListView when onTap is clicked, and setting other children color into default one?

Question

In a Drawer, in listview want to change the color of CustomListTile when the onTap is clicked and setting color of all other children to default?

class CustomListTile extends StatelessWidget {

  final Color itemContainerColor;

  const CustomListTile({
    //deafult color is Colors.white
    this.itemContainerColor= Colors.white,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: (){},

    child: Container(
    margin: EdgeInsets.symmetric(vertical: 4),
    padding: EdgeInsets.symmetric(vertical: 5, horizontal: 16),
    width: 150,
    decoration: BoxDecoration(

        color: itemContainerColor,
       )
    child: 
        Text(
          "ListTile 1",
          style: TextStyle(
              fontSize: 20,
              color: Colors.green,
              fontWeight: FontWeight.w600),
        ),

     ),
   ));
  }
 }

score 6 · Accepted Answer · answered Sep 02 '19 at 08:23

Try this.

    class ChangeListViewBGColor extends StatefulWidget {
    _ChangeListViewBGColorState createState() => _ChangeListViewBGColorState();
    }

    class _ChangeListViewBGColorState extends State<ChangeListViewBGColor> {
    final List<String> _listViewData = [
        "Item 1",
        "Item 2",
        "Item 3",
        "Item 4",
        "Item 5",
        "Item 6",
        "Item 7",
        "Item 8",
    ];

    int _selectedIndex = 0;

    _onSelected(int index) {
        setState(() => _selectedIndex = index);
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
        appBar: AppBar(
            title: Text('BG change'),
        ),
        body: ListView.builder(
            itemCount: _listViewData.length,
            itemBuilder: (context, index) => Container(
            color: _selectedIndex != null && _selectedIndex == index
                ? Colors.red
                : Colors.white,
            child: ListTile(
                title: CustomListTile(_listViewData[index]),
                onTap: () => _onSelected(index),
            ),
            ),
        ),
        );
    }
    }

    class CustomListTile extends StatelessWidget {

    var titleName;

    CustomListTile(this.titleName);

    @override
    Widget build(BuildContext context) {
        return InkWell(
        child: Container(
            child: Text(
                this.titleName,
                style: TextStyle(
                    fontSize: 20, color: Colors.green, fontWeight: FontWeight.w600),
            ),
            margin: EdgeInsets.symmetric(vertical: 4),
            padding: EdgeInsets.symmetric(vertical: 5, horizontal: 16),
            width: 150,

        )
        );
    }
    }

score 1 · Answer 2 · answered Sep 02 '19 at 08:09

Aakash Just use a boolean on tab like colorChange = true when button clicked and other hands in child widget of container...

     colorChange ? 
       Text(
         "ListTile 1",
         style: TextStyle(
             fontSize: 20,
             color: Colors.red, // which color you need to use
             fontWeight: FontWeight.w600),
       ): Text(
         "ListTile 2",
         style: TextStyle(
             fontSize: 20,
             color: Colors.green,
             fontWeight: FontWeight.w600),
       )

Mohit Shetty · Answer 3 · 2019-09-02T09:17:06.610

Note: One can go according to @Amit Prajapati 's solution/logic, but if your use-case is going to get complex over time then I would recommend going as per the below solution.

Whenever you need to change the property of a specific element from a list of elements, use a list of values having the same datatype as that of the value accepted by that property having the same length as that of the number of elements in your main list.

In your case you need to change the color of a specific ListTile whenever the user clicks on it. So declare a List of Colors.

List<Color> tileColors;

Now in initState() of your main widget initialize the List with its default values (depending on the length of our main widget).

for(int i=0;i<items.length;i++) tileColors.add(defaultColor);

Now while using a builder function set each item(ListTile) of your list with tileColors[index],

(I'll be using ListView.builder)

ListView.builder(
itemCount: items.length,
 itemBuilder: (BuildContext context, int index) {
     return new Container(
       color: tileColors[index],
       child: ListTile([...]),
);
    }
)

Now just setState() the value of the property(color) of that ListTile whenever the user taps on it.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
     return new Container(
       color: tileColors[index],
       child: ListTile(
         onTap: (){
            setState((){
          for(int i=0;i<item.length;i++) tileColors[i] = defaultColor;

          tileColors[index] = selectedColor; // selectedColor is the color which you wish to change to.

         // Note: You can add your own conditions over. e.g. If you want the first tile to be of a specific color and the rest should be different color while the user taps.
});
}
),
   );
    }
)

Tip: You can use AnimatedContainer instead of Container widget to create a smooth transition when the user taps. Set the duration parameter to Duration(milliseconds: 300).

I want to change the color of CustomListTile which is child of ListView when onTap is clicked, and setting other children color into default one?

3 Answers3

Linked