How To Use Flutter Icon Button OnPressed

In this post, Ill demonstrate how to make use of Flutter icon button onPressed with an uncomplicated yet effective Flutter example. Please read each point carefully to get a clear understanding of how to properly use Flutter icon button onPressed. So let’s not wait anymore and get right into implementing Flutter icon button onPressed.

What is Flutter Icon Button OnPressed?

As the name suggests, Flutter icon button onPressed is used to make the Flutter icon button clickable. Onpressed is used to define an action that will be triggered when the user clicks on that particular Flutter icon button. Let’s now understand it with an easy Flutter example code.

Implementing Flutter Icon Button OnPressed

In order to implement Flutter icon button onPressed, we to make use of the onPressed constructor of the Flutter icon button widget class. It takes a function and for demonstration, we will use a Flutter snackbar widget in the body of the function that is passed to the onPressed constructor. See the below code:

IconButton(
        iconSize: 50,
        color: Colors.blue,
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Icon button is pressed')));
        },
        icon: Icon(
          Icons.ads_click,
        ),
      )

As seen in the above image, I have pressed the Flutter icon button, after that the Flutter icon button onPressed triggers the function passed to it and the Flutter snackbar widget is shown.

You can pass navigation to other pages, addition etc. Now you have a complete idea of how Flutter icon button onPressed works and how you can make use of it. Let me know if you still face any problems regarding the usage of Flutter icon button onPressed. The complete source code for the above implementation is given in the next section.

Flutter Icon Button OnPressed 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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
      child: IconButton(
        iconSize: 50,
        color: Colors.blue,
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Icon button is pressed')));
        },
        icon: Icon(
          Icons.ads_click,
        ),
      ),
    )));
  }
}

Conclusion

To conclude, we have gained a practical understanding of what needs to be done in order to use the Flutter icon button onPressed. I hope you’ve enjoyed this post and would love to have your feedback. I also have prepared other amazing articles about Flutter widgets, Flutter app development, Flutter animations, amazing Flutter templates with source code, and many more. Thanks for reading.