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 C
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'),
),
)
],
),
)
]);
}
}
The container itself doesn't have any click event, so to do that there are two ways
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.
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.
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"),
]
),
)
);
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:
If you want a simple tap event then you can do it by GestureDetector
GestureDetector(
onTap: (){
print("Container clicked");
},
child: new Container(...)
);
If you want ripple animation on tap event then use InkWell
InkWell(
onTap: (){
print("Container clicked");
},
child: new Container(...)
);