Environment
Question
I made code like this below.
I find when I tap it, 'InkWell.onTap' shows up in the console, but splash animation (= the animation expanding like a wave) does not happen. Could you help me understand why I cannot see splash animation?
Sample
InkWell(
splashColor: Colors.blueAccent,
onTap: () {
print('${DateTime.now()}| InkWell.onTap');
},
child: Container(
color: Colors.lightBlue[100],
child: Row(
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
color: Colors.lightBlue[50],
border: Border.all(),
),
child: Padding(
padding: EdgeInsets.all(8.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text('Text1'),
),
),
),
),
Padding(
padding: EdgeInsets.only(
left: 16, top: 8, right: 8, bottom: 8),
child: Align(
alignment: Alignment.centerLeft,
child: Text('Text2'),
),
),
],
),
),
],
),
),
)
Additional info
The code above only makes a light blue square which you can find 5 in the screenshot.
One person suggested this question is a possible duplicate of this . However, I still have a problem.
I think the answers basically say that "Move the color
property to outside of InkWell
Widget", but my case has multiple colors ( Colors.lightBlue[100]
and Colors.lightBlue[50]
), so I cannot simply move color
to outside. Please correct me if I misunderstand something.
To get the ripple effect a Material
widget must be a direct ancestor of InkWell
with the placement of your InkWell
right now your entire screen would have a ripple effect I am not sure if this is the effect you wanted or not.
Material(
color: Colors.lightBlue[100],
child: InkWell(
splashColor: Colors.blueAccent,
onTap: () {
print('${DateTime.now()}| InkWell.onTap');
},
child: Row(
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
color: Colors.lightBlue[50],
border: Border.all(),
),
child: Padding(
padding: EdgeInsets.all(8.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text('Text1'),
),
),
),
),
Padding(
padding: EdgeInsets.only(
left: 16, top: 8, right: 8, bottom: 8),
child: Align(
alignment: Alignment.centerLeft,
child: Text('Text2'),
),
),
],
),
),
],
),
),
),
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.