Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter: Inkwell does not work with Card

Tags:

I am trying to implement and inkWell wrap on a card widget, but it does not work at all. I am leaving on tap as null because this class takes 3 arguments that I populate later on to generate multiple cards. I cannot see what is going on that is preventing InkWell from rippling, so any help would be appreciated.

class FeedBackCardsImage extends StatelessWidget {   final String imagePath;   final String cardTitle;   final String cardTag;    FeedBackCardsImage({     this.imagePath,     this.cardTitle,     this.cardTag,   });    @override   Widget build(BuildContext context) {        return InkWell(           child: new Container(             child: new Card(               child: new Padding(                 padding: new EdgeInsets.all(15.0),                 child: new Column(                   children: <Widget>[                     new SizedBox(                       height: 184.0,                       child: new Stack(                         children: <Widget>[                           new Positioned.fill(                             child: new Image.asset(                               imagePath,                               //package: destination.assetPackage,                               fit: BoxFit.contain,                             ),                           ),                         ],                       ),                     ),                     new Padding(                       padding: new EdgeInsets.all(                         7.0,                       ),                       child: new Text(                         cardTitle,                         style: new TextStyle(                             fontSize: 14.0,                             fontWeight: FontWeight.w600,                             color: Colors.black87),                       ),                     ),                     new Padding(                       padding: new EdgeInsets.all(                         0.0,                       ),                       child: new Text(                         cardTag,                         style: new TextStyle(                             fontSize: 12.0,                             fontWeight: FontWeight.w400,                             color: Colors.black54),                       ),                     ),                   ],                 ),               ),             ),           ),         onTap: null,        );      } 
like image 348
Zeusox Avatar asked Jul 24 '18 22:07

Zeusox


People also ask

How do you use InkWell in Flutter?

We add an InkWell widget as the child of a Material widget. Then, we add an onTap handler. The InkWell splash effect is only visible when a gesture callback, onTap in this case, is added. With this code, the splash effect will be created when the fingerprint icon is tapped.

How do you add padding to InkWell in Flutter?

You should make it the parent. return Padding( padding:EdgeInsets. only(right:20), child:InkWell( // splashColor: Colors. orange, onTap: () { ProductModel.

What is the difference between InkWell and InkResponse widget in Flutter?

they both make a splash but InkWell is for rectangular shapes only while InkResponse can be clipped. when the splash starts in InkWell but InkResponse will move the splash center to the child center .


1 Answers

Explanation :

"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."

Workaround :

return Stack(children: <Widget>[             new Card(               child: new Padding(                 padding: new EdgeInsets.all(15.0),                 child: new Column(                   children: <Widget>[                     new SizedBox(                       height: 184.0,                       child: new Stack(                         children: <Widget>[                           new Positioned.fill(                             child: new Image.asset(                               imagePath,                               //package: destination.assetPackage,                               fit: BoxFit.contain,                             ),                           ),                         ],                       ),                     ),                     new Padding(                       padding: new EdgeInsets.all(                         7.0,                       ),                       child: new Text(                         cardTitle,                         style: new TextStyle(                             fontSize: 14.0,                             fontWeight: FontWeight.w600,                             color: Colors.black87),                       ),                     ),                     new Padding(                       padding: new EdgeInsets.all(                         0.0,                       ),                       child: new Text(                         cardTag,                         style: new TextStyle(                             fontSize: 12.0,                             fontWeight: FontWeight.w400,                             color: Colors.black54),                       ),                     ),                   ],                 ),               ),             ),             new Positioned.fill(                 child: new Material(                     color: Colors.transparent,                     child: new InkWell(                       onTap: () => null,                     )))           ]); 
like image 146
diegoveloper Avatar answered Sep 18 '22 14:09

diegoveloper