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?

Issue

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),
        ),

     ),
   ));
  }
 }

Solution

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,

        )
        );
    }
    }

Answered By – Amit Prajapati

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)