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