Flutter onTap method for Containers
Solution 1
You can wrap your Container
in an InkWell
or GestureDetector
. The difference is that InkWell
is a material widget that shows a visual indication that the touch was received, whereas GestureDetector
is a more general-purpose widget that shows no visual indicator.
Solution 2
You could wrap container inside an Inkwell() or in GestureDetector() as below
InkWell(
child: Container(...),
onTap: () {
print("tapped on container");
},
);
Using the Gesture Detector
GestureDetector(
onTap: () { print("Container was tapped"); },
child: Container(...),
)
The only difference between the two is InkWell provides a ripple effect when the pointer is in contact with the screen while this is no such visual feedback with GestureDetector.
Solution 3
Screenshot:
You can use both GestureDetector
and InkWell
but I'll suggest you to go for InkWell
as it can show ripple effects which a GestureDetector
can't.
Differences between GestureDetector
and InkWell
:
-
Both share many features in common like
onTap
,onLongPress
etc. The main difference is thatGestureDetector
has more controls like dragging and so on. On the other hand,InkWell
provides some nice ripple effects. -
You can use either of them according to your needs. If you want ripple effect choose
InkWell
, and if you need more controls then go withGestureDetector
or even combine both of them.Material( color: Colors.blue, // Background color child: InkWell( splashColor: Colors.grey, // Splash color onTap: () => print("Container pressed"), // Handle your onTap here. child: Container(height: 200, width: 200), ), )
Solution 4
Apart from what others have said in answers, if you use Card
inside InkWell
, then InkWell
will hide away the ripply effect on Android—you can see it happening in the background but not on the card itself.
Solution to that is to create an InkWell
inside the Card
.
return Card(
child: InkWell(
child: Row(
// Row content
),
onTap: () => {
print("Card tapped.");
},
),
elevation: 2,
);
This will help you gain the ripple effect and perform the tap captures on Android too.
Comments
-
Alexi Coard almost 2 years
Been developing a flutter app and dynamicly building some containers from some Firebase data. I wanted to know if there is a way to get a onTap method for containers (or any widget which is not a button ?
Here is a code sample :
child: new Container( //INSERT ONTAP OR ONPRESSED METHOD HERE margin: const EdgeInsets.symmetric(vertical: 10.0), child: new Row( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ new Container( margin: const EdgeInsets.only(right: 16.0), child: new GoogleUserCircleAvatar(snapshot.value['images'][0]), ), new Column( crossAxisAlignment: CrossAxisAlignment.start, children : [ new Container( padding: const EdgeInsets.only(bottom: 8.0), child: new Text("${snapshot.value['name']}", style: new TextStyle( fontWeight: FontWeight.bold, ), ), ), new Text("${snapshot.value['description']}", style: new TextStyle( color: Colors.grey[500], ), ), ] ) ], ),
-
Ito over 5 yearsAnother observation: InkWell spread out and cover all the container area to handle ontap event instead of GestureDector.
-
Reza Esfandiari over 4 yearsthanks, I used GestureDetector but onTap not worked in free space only work when I click on child widget in the container but Inkwell was very good.
-
Donatas over 4 yearsI had the same problem with GestureDetector. Surprisingly, by adding container's background color solved the problem.
-
BuffK over 4 yearsfor Reza and Donatas,maybe you need to set "behavior" option of GestureDetector
-
eikuh over 4 yearsIf you use background color "Colors.transparent", then the GestureDetector will recognize taps (but the visual appearance is still the same).
-
crollywood almost 4 yearsAs BuffK mentioned, setting
behavior: HitTestBehavior.opaque
fixes the empty-click issue.HitTestBehavior.translucent
also fixes the issue and the difference is that the underlying widget will also receive event. -
Hafiz Nordin almost 3 yearsI've been cracking my head trying to add the ripple effect to a Container with a InkWell. Thanks for this!