How To Easily Use Flutter InkWell OnTap

flutter inkwell ontap

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)
flutter icon widget
We have implemented a simple Flutter icon widget with a custom size and color.
Let’s now make this icon widget respond to clicks. See below steps:
  • 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
You can see that we have Flutter snackbar in our screen. The reason is that we have clicked the Flutter icon which triggers the Flutter InkWell onTap function.
We have successfully implemented Flutter InkWell OnTap in our Flutter app. So by following the steps given above, you can make other Flutter widgets clickable like text widget, container widget etc.
Feel free to ask any questions you may have relating to Flutter InkWell OnTap. I’d be more than happy to answer all.
In the below section, the complete source code is available in which Flutter InkWell OnTap is implemented.

Flutter InkWell OnTap Implementation Complete Source Code

flutter icon widget

flutter inkwell ontap

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.

Leave a Comment

Your email address will not be published.