Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – 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.

Tags:

2

Answers


  1. 0

    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),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search