In this Flutter post, we will practically understand how to use Flutter gestureDetector onTap in Flutter app. We will discuss what Flutter gestureDetector onTap is, its usage and how to properly use in in our app. After reading this post, I am sure you will be able to easily use it in your own Flutter applications.
So let’s get right into implementing Flutter gestureDetector onTap using a proper Flutter example.
What is Flutter GestureDetector OnTap?
It is used to make Flutter widgets clickable, so we are able to specify any actions after that Flutter widget is clicked. Let’s understand the implementation of Flutter gestureDetector onTap with the help of a practical Flutter code example.
Implementing Flutter GestureDetector OnTap (Easy Example)
To make any Flutter widget clickable, we have to wrap it with Flutter gestureDetector class. For demonstration, we will use a Flutter container and give it some height, width, a background color and a child Flutter text widget just to make it look good. See below code:
Container( height: 60, width: 150, color: Colors.green, alignment: Alignment.center, child: Text( 'Click here', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold), ))
- For that, we have to wrap this container with a Flutter gestureDetector widget class.
- We then have to use the onTap constructor of that class which takes a function. We can specify any action in the body of that function.
- For demonstration, we will specify a Flutter snackbar widget which will be shown when the container is clicked. See below code:
GestureDetector(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Container is clicked')));
},
child: Container(
height: 60,
width: 150,
color: Colors.green,
alignment: Alignment.center,
child: Text(
'Click here',
style:
TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
)),
)
Flutter GestureDetector OnTap Implementation Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: GestureDetector(
onTap: () {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('Container is clicked')));
},
child: Container(
height: 60,
width: 150,
color: Colors.green,
alignment: Alignment.center,
child: Text(
'Click here',
style:
TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
)),
),
)));
}
}Conclusion
To conclude this post, hope you now have a clear practical idea of how to use Flutter gestureDetector onTap in Flutter apps. Your feedback would be well appreciated. Thank you for reading.
