How To Use Flutter Raisedbutton Icon OnPressed

flutter raisedbutton icon onpressed

In this post, we both will go through how to use Flutter RaisedButton Icon OnPressed using an easy Flutter example code. I will be explaining everything step by step so you can have a better practical idea of how to use Flutter RaisedButton Icon OnPressed. So why wait more, let’s get right into implementing Flutter RaisedButton Icon OnPressed.

What is Flutter RaisedButton Icon OnPressed?

Flutter RaisedButton Icon OnPressed is as the name suggests, it is used to specify actions when the Flutter RaisedButton Icon is pressed. Flutter RaisedButton.Icon is used to define Flutter RaisedButton Icon OnPressed. Let’s now understand it using a proper Flutter code example.

Implementing Flutter RaisedButton Icon OnPressed

In order to specify a function or action that the Flutter RaisedButton Icon will perform, we have to use the onPressed constructor of the Flutter RaisedButton.Icon. This onPressed constructor takes a functions so we will define a Flutter snack bar in its body so when the Flutter RaisedButton Icon is clicked then the Flutter snack bar is shown. See the below code:

 RaisedButton.icon(
                onPressed: () {
                      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                          content: Text('Raised Button Icon Clicked')));
                    },
                    icon: Icon(Icons.email),
                    label: Text('Icon'),
                  )
flutter raisedbutton icon onpressed
As you can see in the above code that we also have specified the required icon and label constructors by passing icon and Flutter text widget. For demonstration, I have clicked the Flutter RaisedButton Icon and as you can see in the above image that when it was clicked then it shows the Flutter snack bar which satisfies the usage of Flutter RaisedButton Icon OnPressed.
You can specify any other action in the body of function that is passed to the OnPressed constructor like navigation to some other screen, addition etc. Hope you now have a clear practical idea of how to use Flutter RaisedButton Icon OnPressed. Let me know in the comment section if you still face any errors regarding Flutter RaisedButton Icon OnPressed. I would love to answer all your queries. The complete source code for the above implementation is available in the below section.

Flutter RaisedButton Icon OnPressed Source Code

flutter raisedbutton icon 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 StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 40),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  RaisedButton.icon(
                    onPressed: () {
                      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                          content: Text('Raised Button Icon Clicked')));
                    },
                    icon: Icon(Icons.email),
                    label: Text('Icon'),
                  )
                ],
              ))),
    ));
  }
}

Conclusion

In conclusion, you will now be aware of what the Flutter RaisedButton Icon OnPressed is and how to use it in Flutter apps. Let me know what you think about this post. I would also highly recommend my other posts on Flutter widgets, Flutter app development, Flutter animations, Flutter books, Flutter templates with source code and many more. Links to some of these posts are listed below. Thank you for reading.

Leave a Comment

Your email address will not be published.