How to make a clickable Container in Flutter
Tags: flutter, beginners, dart
Published: 2020-03-16 02:16:17

---
title: How to make a clickable Container in Flutter
published: true
date: 2020-03-15 09:07:28 UTC
tags: flutter,beginners,dart
canonical_url: https://pythongeeks.net/flutter-tutorials/how-to-make-a-clickable-container-in-flutter/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-make-a-clickable-container-in-flutter
---

Many times while you are working in Flutter, you would like to allow onTap in the Container widget. However, the `Container` widget doesn’t have `onTap` or `onPress` method. So this post is exactly for you, at the end of this post we will know 2 ways to enable `onTap` method in a `Container`.

![clickable Container in Flutter](https://i1.wp.com/pythongeeks.net/wp-content/uploads/2020/03/Clickable-Button.png?fit=640%2C360&ssl=1)

By default, there is no `onTap` method in the `Container` widget. So it can make some developers, including me, confuse a lot because they don’t know how to make a clickable `Container`. I will introduce you 2 ways to do it easily:

- Wrap Container with `InkWell` widget
- Using `GestureDetector` to detect a click 

## Using `InkWell` widget to make a clickable `Container`

So what is `InkWell`? and how it can make a Container clickable? We will make it clear in this section.

In Flutter, `InkWell` is a material widget that responds to touch action.

Reference below code to see how to make a clickable Container with `InkWell`

```dart
InkWell(
    child: Container(...),
    onTap: () { 
        print("Tapped on container"); 
    },
);
```

## `GestureDetector` widget to detect a gesture

As its name can show exactly the widget ability. `GestureDetector` is a widget that detects the gestures.

It means if we wrap the `Container` inside a `GestureDetector`, we can make a clickable `Container`.

Now use below syntax to do what you want and enjoy the resolve:

```dart
GestureDetector(
    onTap: () { 
        print("Tapped a Container"); 
    },
    child: Container(...),
)
```

## Difference between 2 methods

We already know 2 methods to make a clickable `Container`. Now we try to point out the difference between it. So you can choose the most suitable method for your case.

- `InkWell` is a material widget and it can show you a visual effect whenever a touch was received.
- `GestureDetector` is more general-purpose, not only for touch but also for other gestures.
- Sometimes you can experience an issue that `GestureDetector` can’t detect touch action on free space, only detect the touch on child widget of `Container`.

## Conclusion

Now we can summarize 2 methods to make a `Container` clickable in Flutter:

- Using `InkWell` widget to wrap the `Container`.
- Detecting touch action by using `GestureDetector`.

In this scope of the post, we can’t show you more information about `InkWell` widget and `GestureDetector` widget. It’s highly recommended you find more information in the official document of Flutter:

- [InkWell Class](https://api.flutter.dev/flutter/material/InkWell-class.html)
- [GestureDetector](https://api.flutter.dev/flutter/widgets/GestureDetector-class.html)

How these 2 methods resolve your case? You can show us and other audiences in the comments of the post. Happy in programming!

The post [How to make a clickable Container in Flutter](https://pythongeeks.net/flutter-tutorials/how-to-make-a-clickable-container-in-flutter/) appeared first on [Python Geeks](https://pythongeeks.net).