[英]How to add ripple effect to a Container with decoration in Flutter?
I want to add a ripple effect to a custom Container
.我想为自定义
Container
添加涟漪效果。 I have used Inkwell
and Material
widgets to achieve this behavior, but it does not work.我已经使用
Inkwell
和Material
小部件来实现此行为,但它不起作用。 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:我还在
Container
上使用了透明颜色,在Material
上使用了紫色,如下所示:
@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):结果,产生了涟漪效应,但是
Container
看起来像这样(不是我想要的):
I also swapped the Container
and Material
widgets with each other, applied clip on the Container
as follows:我还相互交换了
Container
和Material
小部件,在Container
上应用了剪辑,如下所示:
@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
):再次出现涟漪效应,但
Container
看起来不像我想要的那样(您可以在Container
的边缘发现下一张照片和第一张照片之间的细微差别):
I want the Container
to look exactly as in the first photo with a ripple effect.我希望
Container
看起来与第一张照片中的一模一样,并带有涟漪效果。
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.注意:我想要的行为完全可以通过使用
Ink
和Inkwell
小部件来实现,但是当在ListView
中使用时,它会导致项目呈现问题。
You were very close.你非常亲近。 You needed to have
borderRadius
on Material
and InkWell
.您需要在
Material
和InkWell
borderRadius
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),
),
),
),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.