I want to add a ripple effect to a custom Container
. I have used Inkwell
and Material
widgets to achieve this behavior, but it does not work. The code is as follows:
@override
Widget build(BuildContext context) {
return Center(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: (){},
child: Container(
width: 150,
height: 100,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: BorderRadius.circular(18),
color: Colors.deepPurpleAccent,
),
alignment: Alignment.center,
child: Text(
"A box container",
style: TextStyle(color: Colors.white),
),
),
),
),
);
}
The result is:
I also used a transparent color on Container
and the purple color on Material
as follows:
@override
Widget build(BuildContext context) {
return Center(
child: Material(
color: Colors.deepPurpleAccent,
child: InkWell(
onTap: () {},
child: Container(
width: 150,
height: 100,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: BorderRadius.circular(18),
color: Colors.transparent,
),
alignment: Alignment.center,
child: Text(
"A box container",
style: TextStyle(color: Colors.white),
),
),
),
),
);
}
As a result, the ripple effect occurs, but the Container
looks like this (not what I want):
I also swapped the Container
and Material
widgets with each other, applied clip on the Container
as follows:
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 150,
height: 100,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: BorderRadius.circular(18),
color: Colors.transparent,
),
clipBehavior: Clip.hardEdge,
child: Material(
color: Colors.deepPurpleAccent,
child: InkWell(
onTap: () {},
child: Center(
child: Text(
"A box container",
style: TextStyle(color: Colors.white),
),
),
),
),
),
);
}
Again, the ripple effect occurs, but the Container
does not look as I want to (you can spot the little difference between the following photo and the first photo, in the edges of the Container
):
I want the Container
to look exactly as in the first photo with a ripple effect.
Note: The behavior that I want, can be exactly achieved through using Ink
and Inkwell
widgets, but when used in a ListView
, it causes item render problems.
CodePudding user response:
You were very close. You needed to have borderRadius
on Material
and InkWell
. Try it this way
child: Material(
color: Colors.deepPurpleAccent,
borderRadius: BorderRadius.circular(18),
child: InkWell(
borderRadius: BorderRadius.circular(18),
onTap: () {},
child: Container(
width: 150,
height: 100,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: BorderRadius.circular(18),
color: Colors.transparent,
),
alignment: Alignment.center,
child: Text(
"A box container",
style: TextStyle(color: Colors.white),
),
),
),
),