Search code examples
flutterflutter-layoutflutter-animationflutter-listviewflutter-container

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?


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

    enter image description here