【Flutter】ListViewのListTileにRipple Effectが表示されない

背景

ListViewの各項目をListTileで実装している画面にて、本来ならデフォルトで表示されるはずのRipple Effectが表示されませんでした。

原因

ListViewをContainerで囲っていたことが原因でした。

sample.dart

Container(
  color: Colors.white,
  child: ListView.separated(
    itemBuilder: (context, index) {
      return ListTile(
        leading: leading,
        title: title,
        trailing: trailing,
        onTap: () {},
      );
    },
    separatorBuilder: (context, index) {
      return Divider();
    },
    itemCount: data.length,
  ),
);

画面全体の背景とは別に、リスト自体にも背景を付けたいと思い白色のContainerでListViewを囲っていました。
これが原因でListTileのRippleが表示されなくなっていたようです。

対応

ListTileを囲っていたContainerを削除しました。
しかし、このままだとListViewの背景が画面全体の背景になってしまうので、ListTileをInkで囲うことで背景色を白色にしつつRipple Effectも残しました。

sample.dart

ListView.separated(
  itemBuilder: (context, index) {
    return Ink(
      color: Colors.white,
      child: ListTile(
        leading: leading,
        title: title,
        trailing: trailing,
        onTap: () {},
      ),
    );
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
  itemCount: data.length,
);