Flutter Add onClick onPress on Image using GestureDetector InkWell

There are two different widgets available in flutter to implement onClick functionality on Image widget. GestureDetector widget and InkWell widget. The both widgets has their own separate functionality with some minor differences. We would use both of them in our current tutorial to see you the difference between them. The both supports onTap() click event. So in this tutorial we would Add onClick onPress on Image widget using GestureDetector InkWell in Flutter android iOS application.

Difference between GestureDetector and InkWell :

  1. GestureDetector : Used to add simple click event without any animation effect.
  2. InkWell : Used to add click event with material design ripple effect.

Contents in this project Add onClick onPress on Image using GestureDetector InkWell in Flutter:

1. Import material.dart package in your main.dart file.

2. Call our main MyApp class using void main -> runApp() function.

3. Creating a function named as tmpFunction(). In this function we would simply print a message on DOS – Terminal screen using Dart’s own print() function. We would call this function on Image Click event.

4. Creating our main class named as MyApp extends with StatelessWidget.

5. Creating Widget Build method in MyApp class using Scaffold default widget.

6. Create SafeArea widget in Scaffold body section. SafeArea widget move our main view just below the Status bar. Now we would put a Center Widget -> Column widget. We would put all content in Column Widget.

7. Creating GestureDetector widget with Image widget in Column.

  • onTap : Calling the tmpFunction on tap – on click event.
  • Image.network() : Calling the image directly from URL.
  • width: Image width.

8. Creating InkWell widget in Column widget after Gesture Detector widget.

9. Complete source code for main.dart file:

Screenshot of app:

Flutter Add onClick onPress on Image using GestureDetector InkWell

Screenshot of CMD:

Leave a Reply

Your email address will not be published. Required fields are marked *