listview ripple effect in flutter - flutter

Question

i have a simple listview in flutter
final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];
ListView.builder(
padding: const EdgeInsets.all(8),
itemCount: entries.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
color: Colors.amber[colorCodes[index]],
child: Center(child: Text('Entry ${entries[index]}')),
);
}
);
when i click/tap on it, there is a circle ripple effect that then expand to the rest of the element i clicked in the list. i would like to change this behavior and remove the circle ripple effect. instead when someone click on an element of the list, i want that element to highlight and fade away for the whole element. one examples is whatsapp app. when you click on a conversation, you will see that the element you click in the list will flash with ripple effect of the full element. you will see a rectangle ripple effect not a circle ripple effect where you click and then expands to the rest of the element
how can i change the default behavior on listview in flutter? if im not clear, let me know
thanks in advance

Answer 1

In the 8 number line in your code snippet
return the InkWell() class instead of Container()
like this
child: ListView.builder(
itemCount: list.length,
itemBuilder: (context, i) {
return InkWell(
onTap: (){},
child: Container(
height: 50,
color: Colors.amber[colorCodes[index]],
child: Center(child: Text('Entry ${entries[index]}')),
);
);
},
),
For more information visit flutter.dev Documentation