listview ripple effect in flutter

user_4744375 0
Viewed 1076

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

flutter
1 Answers

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

user_80685420
Related