Flutter - Container onPressed? - flutter

Question

I have this container:
new Container(
width: 500.0,
padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
color: Colors.green,
child: new Column(
children: [
new Text("Ableitungen"),
]
),
),
When the user clicks on the Container, I want an onPressed() method to be fired (like it can be done with IconButton for example). How can I achieve this behaviour with Container?

Answer 1

I guess you can use GestureDetector widget like this:
new GestureDetector(
onTap: (){
print("Container clicked");
},
child: new Container(
width: 500.0,
padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
color: Colors.green,
child: new Column(
children: [
new Text("Ableitungen"),
]
),
)
);

Answer 2

Don't use GestureDetector, it doesn't show ripple effect. Use InkWell instead.
InkWell(
onTap: () {}, // Handle your callback
child: Ink(height: 100, width: 100, color: Colors.blue),
)
Output:

Answer 3

The simplest solution is to wrap the Container in a GestureRecognizer, but consider using an InkWell or FlatButton if you are building a Material design app. These widgets will show a visual splash response when touched.

Answer 4

The container itself doesn't have any click event, so to do that there are two ways
InkWell widget
GestureDetector
In Flutter, InkWell is a material widget that responds to touch action.
InkWell(
child: Container(......),
onTap: () {
print("Click event on Container");
},
);
GestureDetector is a widget that detects the gestures.
GestureDetector(
onTap: () {
print("Click event on Container");
},
child: Container(.......),
)
Difference
InkWell is a material widget and it can show you a Ripple Effect whenever a touch was received.
GestureDetector is more general-purpose, not only for touch but also for other gestures.

Answer 5

Heading
GestureDetector vs InkWell
You can use two widget
1) GestureDetector
GestureDetector(
onTap: (){
print("Container clicked");
},
child: new Container(child: ...)
);
This widget, doesn't have any effect.
2) InkWell
InkWell(
child: Container(......),
onTap: () {
print("Click event on Container");
},
);
This widget has animation effect.

Answer 6

Just wanted to add on to The Dumbfounds answer(accepted ans above)
If you are using GestureDetector or InkWell to handle the click of a group of icon and text, then use Icon widget instead of IconButton to display the icon as the onPressed method of IconButton will take over the onTap method of GestureDetector/InkWell and as a result the onTap then will only work if you click on the text.
Example -
#override
Widget build(BuildContext context) {
return Row(mainAxisSize: MainAxisSize.min, children: [
GestureDetector(
onTap: () {
_toggleFavorite();
},
child: Row(
children: [
Container(
padding: EdgeInsets.all(0.0),
child: _isFavorited ? Icon(Icons.star, color: Colors.red[500]) : Icon(Icons.star_border),
),
SizedBox(
width: 18.0,
child: Container(
child: Text('$_favoriteCount'),
),
)
],
),
)
]);
}
}

Answer 7

InkWell(
child: Container(
width: 500.0,
padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
color: Colors.green,
child: new Column(
children: [
new Text("Ableitungen"),
]
),
),
onTap: () {
print("Tapped on container");
},
);

Answer 8

User can make button of any widget using Inkwell and GestureDetector.
=====
InkWell(
onTap: () {
print("");
},
child: Container(......),
);
======
GestureDetector(
onTap: () {
print("");
},
child: Container(.......),
)

Answer 9

InkWell(
child: Container(......),
onTap: () {
print("Add your on tap event in this block");
},
);
Use InkWell it will provide you a nice material ripple effect.