In this Flutter post, we will learn how to practically implement Flutter InkWell OnTap. We’ll go over how to use Flutter InkWell OnTap by using an easy Flutter example, as well as the finer points related to its proper utilization.
After reading this post, I am confident you will be able to easily incorporate Flutter InkWell OnTap in your own Flutter programs.
What is Flutter InkWell OnTap?
It is used to make Flutter widgets respond to taps/clicks. Also, it allows to specify a particular action that will be performed after that widget is clicked.
Let’s understand the practical use of Flutter InkWell OnTap by using a proper Flutter example code.
Flutter InkWell OnTap Implementation(Easy Example)
Let’s use a Flutter icon widget to demonstrate how Flutter InkWell OnTap works. See below code:
Icon(Icons.ads_click, color: Colors.blue, size: 40)
- We have to wrap that icon with Flutter InkWell widget class.
- The InkWell class has an onTap constructor which takes a function.
- We can specify any action in the body of this onTap function. For demonstration, we’ll be using Flutter snackbar widget which will only show when the icon is being clicked. See below code:
InkWell(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Flutter icon is clicked')));
},
child:
Icon(Icons.ads_click, color: Colors.blue, size: 40))
Flutter InkWell OnTap Implementation Complete 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: InkWell(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Flutter icon is clicked')));
},
child:
Icon(Icons.ads_click, color: Colors.blue, size: 40)))));
}
}Conclusion
In conclusion, hope you now have a clear practical understanding of how to use Flutter InkWell OnTap in Flutter apps. Your valuable comments would be appreciated. Thank you for your time.
