InkWell not showing ripple effect
FlutterDartFlutter LayoutRipple EffectFlutter Problem Overview
Tapping the container triggers the onTap()
handler but does not show any ink splash effect.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new InkWell(
onTap: (){print("tapped");},
child: new Container(
width: 100.0,
height: 100.0,
color: Colors.orange,
),
),
),
);
}
}
I tried putting the InkWell
inside the Container
as well but in vain.
Flutter Solutions
Solution 1 - Flutter
I think adding color to the container is covering over the ink effect
https://api.flutter.dev/flutter/material/InkWell/InkWell.html
This code seems to work
body: new Center(
child: new Container(
child: new Material(
child: new InkWell(
onTap: (){print("tapped");},
child: new Container(
width: 100.0,
height: 100.0,
),
),
color: Colors.transparent,
),
color: Colors.orange,
),
),
just click the middle square.
Edit: I found the bug report. https://github.com/flutter/flutter/issues/3782
> This is actually as expected, though we should update the docs to make it clearer. > >What's going on is that the Material spec says that the splashes are actually ink on the Material. So when we splash, what we do is we literally have the Material widget do the splash. If you have something on top of the Material, we splash under it, and you can't see it. > >I have wanted to add a "MaterialImage" widget that conceptually prints its image into the Material as well so that then the splashes would be over the image. We could have a MaterialDecoration which does something similar for a Decoration. Or we could have Material itself take a decoration. Right now it takes a color, but we could extend that to taking a whole decoration. It's not clear whether it's really material-spec-compatible to have a material with a gradient, though, so I'm not sure whether we should do that. > > In the short run, if you just need a workaround, you can put a Material on top of the container, with the material set to use the "transparency" type, and then put the ink well inside that.
--hixie
Update: Hixie merged a new Ink solution last year. The Ink provides a convenient way to splash over images.
testWidgets('Does the Ink widget render anything', (WidgetTester tester) async {
await tester.pumpWidget(
new Material(
child: new Center(
child: new Ink(
color: Colors.blue,
width: 200.0,
height: 200.0,
child: new InkWell(
splashColor: Colors.green,
onTap: () { },
),
),
),
),
);
Material(
color: Colors.grey[800],
child: Center(
child: Ink.image(
image: AssetImage('cat.jpeg'),
fit: BoxFit.cover,
width: 300.0,
height: 200.0,
child: InkWell(
onTap: () { /* ... */ },
child: Align(
alignment: Alignment.topLeft,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Text('KITTEN', style: TextStyle(fontWeight: FontWeight.w900, color: Colors.white)),
),
)
),
),
),
)
Please Note: I did not test the new Ink Widget. I coped the code from ink_paint_test.dart and the Ink class docs
Solution 2 - Flutter
Screenshot:
Use Ink
widget wrapped in an InkWell
.
InkWell(
onTap: () {}, // Handle your onTap
child: Ink(
width: 200,
height: 200,
color: Colors.blue,
),
)
Solution 3 - Flutter
-
The InkWell widget must have a Material widget as an ancestor otherwise it can't show effects. E.g.:
Material( child : InkWell( child : .....
-
you have to add
onTap
method to see the actual effects as likeButtons {RaisedButton,FlatButton etc}. e.g -> Material( child : InkWell( onTap : (){} child : .....
Let's come to the main points see some examples below and try to understand the actual concepts of InkWell.
-
In Below example Material is parent of InkWell with onTap but it still not working. Please try to understand the concept of it. You should provide some margin to container or other widget to show the effects. Actually below code working fine but we can't see because we did not provide any margin or align so it has no space to show the effects.
Widget build(BuildContext context) { return Center( child: Material( child: new InkWell( onTap: () { print("tapped"); }, child: new Container( width: 100.0, height: 100.0, color: Colors.orange, ), ), ), ); }
-
Below example show InkWell effects only to upwards because we provide space {margin}.
Widget build(BuildContext context) { return Center( child: Material( child: new InkWell( onTap: () { print("tapped"); }, child: new Container( margin: EdgeInsets.only(top: 100.0), width: 100.0, height: 100.0, color: Colors.orange, ), ), ), ); }
-
Below exp. show the effects in all the page because center create margin from all the side. Centre align it's child widget from top, left, right and bottom.
Widget build(BuildContext context) { return Center( child: Material( child: new InkWell( onTap: () { print("tapped"); }, child: Center( child: new Container( width: 100.0, height: 100.0, color: Colors.orange, ), ), ), ), ); }
Solution 4 - Flutter
InkWell() will never show the ripple effect until you add the
onTap : () {}
or any of the callbacks like onDoubleTap, onLongPress etc.
parameter inside the InkWell as it starts listening to your taps only when you specify this parameter.
Solution 5 - Flutter
I have found this solution for me. I think it can help you:
Material(
color: Theme.of(context).primaryColor,
child: InkWell(
splashColor: Theme.of(context).primaryColorLight,
child: Container(
height: 100,
),
onTap: () {},
),
)
Color
is given to Material widget. It is the default color of your widget.
You can adjust color of ripple effect using splashColor
property of Inkwell.
Solution 6 - Flutter
A better way is to use the Ink
widget instead of any other widget.
Instead of defining color
inside container you can define it in Ink
widget itself.
Below code will work.
Ink(
color: Colors.orange,
child: InkWell(
child: Container(
width: 100,
height: 100,
),
onTap: () {},
),
)
> Do not forget to add a onTap: () {}
in the InkWell
else it will
> not show the ripple effect too.
Solution 7 - Flutter
If you want a Ripple Effect on any widget just:
1- Wrap widget with Material and Inkwell.
2- set color to widget from Material.
3- Never set color to the widget you want it to ripple.
Material (
color: const Color(0xcffFF8906),
child: InkWell(
ontap:() { },
child: Container(
color: Colors.transparent,
height: 80,
width: 80,
)
Solution 8 - Flutter
This is the best way I found and use it always. You can try it.
-
Wrap your
Widget
withInkWell
-
Wrap
InkWell
withMaterial
-
Set the opacity 0% anyhow. e.g.:
color: Colors.white.withOpacity(0.0),
Material( color: Colors.white.withOpacity(0.0), child: InkWell( child: Container(width: 100, height: 100), onTap: (){print("Wow! Ripple");}, ), )
Solution 9 - Flutter
This is working for me:
Material(
color: Colors.white.withOpacity(0.0),
child: InkWell(
splashColor: Colors.orange,
child: Text('Hello'), // actually here it's a Container wrapping an image
onTap: () {
print('Click');
},
));
After trying many answers here, it was a combination of:
- Setting
splashColor
- Wrapping
InkWell
inMaterial(color: Colors.white.withOpacity(0.0), ..)
Thanks to the answers here that make those 2 points
Solution 10 - Flutter
child: Material(
color: Colors.transparent
child: InkWell(
onTap: (){ print("this Ripple!";},
splashColor: Colors.greenAccent,
child: Container(
height:100.0,
color: Colors.white,
),
),
),
Add Material
before InkWell
and set color
to Colors.transparent
.
Solution 11 - Flutter
I ran into this same problem trying to create an alternating color of InkWell's in a ListView. In that particular case, there's a simple solution: wrap the alternates in a Container that uses a mostly transparent tint/brightness change -- the InkWell touch animation will still be visible beneath it. No Material needed. Note there are other issues when trying to work around this with a Materal -- e.g., it will override a DefaultTextStyle you're using with the default (it installs an AnimatedDefaultTextStyle) which is a huge pain.
Solution 12 - Flutter
After you added onTap:(){}
listener, ripple effect should work fine. It doesn't work if you use BoxShadow()
with in the InkWell()
widget.
Solution 13 - Flutter
I was able to make my situation work by using a Stack.
Stack(
children: [
MyCustomWidget(), // <--- Put this on bottom
Material(
color: Colors.transparent,
child: InkWell(
onTap: () {},
child: Ink(
width: 100,
height: 100,
),
),
),
],
),
The reason that the other answers on this page weren't working for me is that my custom widget hid the ink effect and I didn't have a plain image (so I couldn't use Ink.image).
Edit:
You still may be able to use Ink.image
if you convert the image to the right format.
Solution 14 - Flutter
Set Color Of InkWell Container
Any child widgets placed inside the Material
widget takes the color set in the Material
widget. So, we should set the color from Material’s color property itself. You can not set it from any of the parent Container
widget.
Another important thing to note when creating InkWell
with the Material
parent widget is that you should set the color from the Material’s property itself. You can not set it from the Container
.
So, our code that fixes the InkWell
effect and the container color looks like this:
Container(
margin: EdgeInsets.all(12),
height: 50.0,
width: 100.0,
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Colors.grey, blurRadius: 4, offset: Offset(0, 2))
]),
child: Material(
color: Colors.blue,
child: InkWell(
child: Center(
child: Text("My Chip",
style: Theme.of(context).textTheme.body1)),
onTap: () {},
),
),
)
Solution 15 - Flutter
now using MaterialButton, in newer version flutter
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: MaterialButton(
child: Text(
labelText,
style: TextStyle(fontSize: 22),
),
onPressed: () {},
color: backgroundColor,
height: 45,
minWidth: double.infinity,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(16),
),
),
),
);
}
Solution 16 - Flutter
For handling ripple effect you should use the below rules:
onTap
shouldn't benull
(or empty).- InkWell must be inside any of the Material Widgets
Solution 17 - Flutter
I was hit by a similar problem adding an Inkwell to an existing complex Widget with a Container wrapping a BoxDecoration with a color. By adding the Material and Inkwell in the way suggested the Inkwell was still obscured by the BoxDecoration so I just made the BoxDecoration's color slightly opaque which allowed the Inkwell to be seen
Solution 18 - Flutter
The solution to circular widgets, do like below:
Material(
color: Colors.transparent,
child: Container(
alignment: Alignment.center,
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
enableFeedback: true,
iconSize: 40,
icon: Icon(
Icons.skip_previous,
color: Colors.white,
size: 40,
),
onPressed: () {}),
IconButton(
iconSize: 100,
enableFeedback: true,
splashColor: Colors.grey,
icon: Icon(Icons.play_circle_filled, color: Colors.white, size: 100),
padding: EdgeInsets.all(0),
onPressed: () {},
),
IconButton(
enableFeedback: true,
iconSize: 40,
icon: Icon(
Icons.skip_next,
color: Colors.white,
size: 40,
),
onPressed: () {}),
],
),
),
)
Solution 19 - Flutter
For me it was another problem. InkWell was not showing ripple effect when i had onTap function as parameter of my widget defined as below.
Function(Result) onTapItem;
...
onTap: onTapItem(result),
I don't know what's the difference, but next code is working well.
onTap: (){ onTapItem(result); },
Solution 20 - Flutter
Adding transparent color to Material worked in my case:
child: new Material(
color: Colors.transparent
child: new InkWell(
onTap: (){},
child: new Container(
width: 100.0,
height: 100.0,
color: Colors.amber,
),
),
),
Solution 21 - Flutter
> 1. Create a widget that supports tap. > 2. Wrap it in an InkWell widget to manage tap callbacks and ripple > animations.
thats 2 point mention in documentation
example:
InkWell(
child: TextButton(
onPressed: () {},
child: Text('Tapped'),
),
),
),
Solution 22 - Flutter
Quick solution in easy words:
This solution works in any place of the widget tree. Just add additional Material before InkWell, like so:
return Container(
.......code.......
),
child: Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {},
child: Container(
.......code.......
),
),
),
);
Reference: https://api.flutter.dev/flutter/material/InkWell-class.html Section called "The ink splashes aren't visible!"