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