The Problem : The 'color' of ListTile and the HoverColor overflows their parents. Maybe some other colors, but I haven't tested yet. Here is the screenshots of this strange problem. screenshot
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: titles.length,
itemBuilder: (context, index) {
return GestureDetector(
onSecondaryTap: () {
print('clicked index : $index');
},
child: ListTile(
hoverColor: Colors.amber,
title: Padding(
padding: EdgeInsets.only(bottom: 0, top: 0),
child: Text(
titles[index],
style: TextStyle(
fontWeight: FontWeight.bold,
color: dark,
fontSize: 14,
),
),
),
subtitle: Padding(
padding:
const EdgeInsets.only(bottom: 0, top: 0, left: 0, right: 0),
child: Text(
subtitles[index],
style: TextStyle(
color: _statusColor(subtitles[index]),
fontSize: 11,
),
),
),
leading: CircleAvatar(
radius: 25,
backgroundImage: NetworkImage(
"https://images.unsplash.com/photo-1547721064-da6cfb341d50"),
),
),
);
});
}
}
based on the info you gave in the comments, your problem was that you didn't wrap your widget with a scaffold so try wrapping it with just a scaffold and it will work.
there should only be one material app in the project. but you can have as many scaffolds as you want.