Flutter List View Ripple Effect Doesn't Work

Question

I have a ListView in AlertDialog container. There is an InkWell method but ripple effect doesn't work and I can't put the separator. How can I put separator and have ripple effect?

Widget setupAlertDialoadContainer(context) {
return Container(
  color: Colors.white,
  height: 300.0,
  width: 300.0,
  child: ListView.builder(
      itemCount: showroomModel.length,
      itemBuilder: (BuildContext context, int index) {
        return InkWell(
          onTap: () => {
            print(showroomModel[index]),
          },
          child: ListTile(
            title: Text(showroomModel[index]),
          ),
        );
      }),
);

}

Solution 1

For the InkWell ripple effect, try wrapping the InkWell in a Material widget.

Material(
  child: InkWell(
    onTap: () {
      print(showroomModel[index]);
    },
    child: ListTile(
      title: Text(showroomModel[index]),
    ),
  ),
)

For the separator use ListView.separated as in Tasnuva oshin's answer.

---

As pointed out by TheFabbius, the above code can also be simplified by removing the InkWell and moving the onTap inside the ListTile.

Material(
  child: ListTile(
    onTap: () {
      print(showroomModel[index]);
    },
    title: Text(showroomModel[index]),
  ),
)

Solution 2

For Separator & Ripple Effect Use

    ListView.separated(
         itemCount: 25,
         separatorBuilder: (BuildContext context, int index) => Divider(height: 1),
         itemBuilder: (BuildContext context, int index) {
           return  Inkwell(child: 
ListTile(
             title: Text('item $index'),
           ));
         },
    );

Comments

[Ömer Faruk Arslan]

The Separator part is working but still there is no Ripple Effect .

[Ömer Faruk Arslan]

I add this: return Material ( child: InkWell( //code here )); and it work.

[TheFabbius]

Maybe it's worth noting that InkWell is not needed in this case, as the Material widget is enough and the onTap callback can be moved into ListTile.

[mmcdon20]

@TheFabbius good catch, I have updated the answer to show your suggestion.