How To Use Flutter Icon Button OnPressed

Flutter icon button onPressed implementation. 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.

Outline

What is Flutter Icon Button OnPressed?
Implementing Flutter Icon Button OnPressed
Flutter Icon Button OnPressed Implementation Source Code
Conclusion

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

Flutter icon button onPressed

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, Flutter books, and many more. Links to some of them are listed below, others can be found using the search box or the menu navigation bar. Thanks for reading.

Flutter app articles you might like to read: beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions, flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development.