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 :
- GestureDetector : Used to add simple click event without any animation effect.
- 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.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main -> runApp() function.
|
1 |
void main() => runApp(MyApp()); |
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.
|
1 2 3 4 |
void tmpFunction() { print('Function Called.'); } |
4. Creating our main class named as MyApp extends with StatelessWidget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
5. Creating Widget Build method in MyApp class using Scaffold default widget.
|
1 2 3 4 5 6 7 8 9 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: )); } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Column(children: [ ]))))); } } |
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.
|
1 2 3 4 5 6 7 8 |
GestureDetector( onTap: tmpFunction, child: Image.network( 'https://flutter-examples.com/wp-content/uploads/2019/09/image_button.png', width: 200, fit: BoxFit.cover, ), ), |
8. Creating InkWell widget in Column widget after Gesture Detector widget.
|
1 2 3 4 5 6 7 8 |
InkWell( onTap: tmpFunction, child: Image.network( 'https://flutter-examples.com/wp-content/uploads/2019/09/image_button.png', width: 200, fit: BoxFit.cover, ), ) |
9. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); void tmpFunction() { print('Function Called.'); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Column(children: [ GestureDetector( onTap: tmpFunction, child: Image.network( 'https://flutter-examples.com/wp-content/uploads/2019/09/image_button.png', width: 200, fit: BoxFit.cover, ), ), InkWell( onTap: tmpFunction, child: Image.network( 'https://flutter-examples.com/wp-content/uploads/2019/09/image_button.png', width: 200, fit: BoxFit.cover, ), ) ]))))); } } |
Screenshot of app:
