The Container widget is one of the most commonly used widgets in Flutter. It is like a <div> element in HTML that groups the child elements together and then applies some common styles such as padding, margin, background, etc. to them.
Many times when we are working with the Container widget, we need to detect the onTap event. But by default, the Container widget does not support the onTap or onPressed methods i.e. you can’t click on a Container widget.
So if you want to make a Container widget clickable in Flutter, you have two options. First, wrap the Container in an InkWell widget, or second, wrap the container in a GestureDetector widget.
Both the InkWell and the GestureDetector widgets support the onTap and a few other gesture callback methods such as onDoubleTap, onLongPress, etc. which you can choose according to your need.
In this article, I will show you two ways to make a Container clickable with the help of some relevant examples. So without any further ado, let’s get started.
1. Using the InkWell Widget to Make the Container Widget Clickable
InkWell widget is a material widget that responds to the touch action. It is mostly used as a parent widget for the non-tappable widgets such as a Container, Text, etc. to make them respond to the touch actions.
You can refer to the below code to see how to make a Container clickable by putting it inside InWell:
InkWell(
onTap: () {
print('The container is tapped');
// Add other stuff
},
child: Container(
// Add your stuff
),
)
Full example with InkWell widget:
In the following example, we have wrapped the Container widget inside the InkWell widget to make it tappable.
As soon as you tap the container, the code inside the onTap callback runs and toggles the container color between yellow and blue on tapping.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
// App and app bar title
static const String _title = 'Inkwell Widget Demo';
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
// Set the initial color
var containerColor = Colors.yellow;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: MyApp._title,
home: Scaffold(
appBar: AppBar(title: const Text(MyApp._title)),
body: InkWell(
onTap: () {
setState(() {
// Toggle the container color
if (containerColor == Colors.yellow) {
containerColor = Colors.blue;
} else {
containerColor = Colors.yellow;
}
});
},
child: Container(
color: containerColor,
width: 200,
height: 200,
margin: const EdgeInsets.all(20),
padding: const EdgeInsets.all(10),
child: const Text(
'This is a container',
style: TextStyle(fontSize: 25),
),
),
)),
);
}
}
After running the above code, you will get the following output:
As you can see from the above output, the container is now responding to the touch action and toggling its color between yellow and blue.
2. Using the GestureDetector Widget to Make the Container Widget Clickable
You can also use the GestureDetector widget to make a Container widget clickable.
The GestureDetector widget is used to detect different gestures such as onTap, onDoubleTap, onLongPress, etc. So if you put the Container widget inside the GestureDetector, it will become clickable.
The implementation of the GestureDetector widget is same as the InkWell widget. You can refer to the below example to see how to make a Container clickable using the GestureDetector:
GestureDetector(
onTap: () {
print('The container is tapped');
// Add other stuff
},
child: Container(
// Add your stuff
),
)
Below is a complete example that uses the GestureDetector widget to make the Container clickable and toggles the background color of the Container between yellow and blue on tapping:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
// App and app bar title
static const String _title = 'GestureDetector Widget Demo';
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
// Set the initial color
var containerColor = Colors.yellow;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: MyApp._title,
home: Scaffold(
appBar: AppBar(title: const Text(MyApp._title)),
body: GestureDetector( // Wrap the Container inside the GestureDetector
onTap: () {
setState(() {
// Toggle the container color
if (containerColor == Colors.yellow) {
containerColor = Colors.blue;
} else {
containerColor = Colors.yellow;
}
});
},
child: Container(
color: containerColor,
width: 200,
height: 200,
margin: const EdgeInsets.all(20),
padding: const EdgeInsets.all(10),
child: const Text(
'This is a container',
style: TextStyle(fontSize: 25),
),
),
)),
);
}
}
Below is the outcome of the above code:
Which Method Should You Choose?
We have seen two ways to make a Container clickable in Flutter. But how do I know which method is suitable for me?
Well, both methods respond to the on-tap action but there is a difference between the two which is that the InkWell widget adds a visual ripple effect when you tap on the Container(or any other child widget) but the GestureDetector widget does not add any such effect.
Moreover, the GestureDetector widget is a general-purpose widget for detecting gestures. Whereas, the InkWell widget is mainly designed for adding touch events.
Conclusion
In this article, we learned how we can make a Container widget clickable in Flutter.
In summary, there are two ways to make a Container widget clickable in Flutter. First, by wrapping it inside the InkWell widget and second by wrapping it inside the GestureDetector widget.
Both widgets provide an onTap callback where you can put any code you want based on your requirements.
Thanks for reading.
