How to Clip InkWell in ListView

Question

I have a ListView with rounded edges. How can I make the splash from the InkWell coincide with the borders of the ListView?

What splash look like now:

My code:

      final borderRadius = BorderRadius.circular(20.0);
      return RefreshIndicator(
        onRefresh: _refreshList,
        child: Padding(
          padding: const EdgeInsets.only(top: 5, right: 16, left: 16),
          child: DecoratedBox(
            decoration: BoxDecoration(
              color: AppColors.mainGreen,
              borderRadius: borderRadius,
            ),
            child: ClipRRect(
              borderRadius: borderRadius,
              child: ListView.builder(
                controller: _scrollController,
                reverse: true,
                physics: const AlwaysScrollableScrollPhysics(),
                itemCount: state.notes.length,
                itemBuilder: (BuildContext context, int index) {
                  final note = state.sortedNotes[index];
                  // TODO(MipZ): Сделать выделение по радиусу
                  return InkWell(
                    onTap: () => _onNoteTab(note.id),
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Row(
                        children: [
                          SvgPicture.asset(
                            note.mood.selectedIcon,
                            height: 50,
                            width: 50,
                          ),
                          const SizedBox(width: 13),
                          //Расстояние между иконкой и информацией
                          Expanded(
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                _MoodRow(note: note),
                                _SleepAndFoodRow(note: note),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ),
      );

I need this white splash to be along the border of the ListView.

Answer 1

Add borderRadius property to InkWell for radius of ink effect

return InkWell(
            borderRadius: borderRadius, // add border radius
            onTap: () => _onNoteTab(note.id),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  SvgPicture.asset(
                    note.mood.selectedIcon,
                    height: 50,
                    width: 50,
                  ),
                  const SizedBox(width: 13),
                  //Расстояние между иконкой и информацией
                  Expanded(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        _MoodRow(note: note),
                        _SleepAndFoodRow(note: note),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );

Answer 2

Can you try replacing ClipRRect with Material? Literally just that word, since borderRadius also works for Material.

The way it works is that splashes of an Inkwell are drawn on the underlying Material. By having the ListView wrapped in one the splash shouldn't be able to go outside it.