flutterlistviewclip

How to Clip InkWell in ListView


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.


Solution

  • 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),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              );