Inkwell not showing ripple when used with Container decoration
I found the solution:
I need one Material
for Inkwell
, and one Material
for elevation and rounded borders.
The inner Material
has a type of MaterialType.transparency
so that it doesn't draw anything over the box decoration of its parent and still preserve the ink effect. The shadow and borders are controlled by outer Material
.
Container(
margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
child: Material( // <----------------------------- Outer Material
shadowColor: Colors.grey[50],
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
elevation: 6.0,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: AlignmentDirectional.bottomStart,
end: AlignmentDirectional.topEnd,
colors: [
AppColors.pinkDark,
AppColors.pink,
],
),
),
child: Material( // <------------------------- Inner Material
type: MaterialType.transparency,
elevation: 6.0,
color: Colors.transparent,
shadowColor: Colors.grey[50],
child: InkWell( //<------------------------- InkWell
splashColor: Colors.white30,
onTap: () {},
child: Container(
padding: EdgeInsets.all(16.0),
child: Row(
children: <Widget>[
Icon(
Icons.work,
size: 40.0,
color: Colors.white,
),
SizedBox(
width: 20.0,
),
Column(
children: <Widget>[
Text(
widget.title,
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
),
),
],
)
],
),
),
),
),
),
),
);
Update in 2019:
You should use Ink
widget inside Material
, instead of Container
.
It takes decoration
parameter as well:
Material(
child: Ink(
decoration: BoxDecoration(
// ...
),
child: InkWell(
onTap: () {},
child: child, // other widget
),
),
);