How To Easily Use Flutter Elevated Button OnPressed

In this Flutter post, we’ll learn how to properly use Flutter elevated button onPressed with the help of an easy Flutter example for practical demonstration.

A step by step explanation will be provided on the onPressed function of Flutter elevated button so you can have an in-depth idea of how to implement it.

So let’s not wait anymore and dive right into it.

What is Flutter Elevated Button OnPressed?

As the name suggests, it’s used to trigger some actions after the elevated button is clicked by the user. We’ll be using a proper example to demonstrate how you can use it.

So let’s get right into its practical implementation.

Implementing Flutter Elevated Button OnPressed (Easy Example Code)

We first have to define a simple Flutter elevated button widget. Then we will use its required onPressed constructor which takes a function. We can specify any action we want in the body of that function.

To demonstrate how it works, we’ll be using a Flutter snackbar widget inside that function’s body. So whenever the user clicks on the elevated button, the snackbar widget will appear on the screen. See below code in which this theory is practically implemented.

ElevatedButton(
               onPressed: () {
               ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                          content: Text('Elevated button is pressed')));
                    },
               child: Text('Elevated button OnPressed'))

As you can see that we have specified the snackbar inside the onPressed function. We also have passed the Flutter text widget to the child constructor of elevated button class to make the button looks a bit professional.

Let’s now press the button and see if we get the snackbar on our screen.

You can see here that after the button was pressed, the onPressed function was triggered and as a result, the snackbar widget was shown on the screen.

You can specify any action in the body of onPressed function, like navigation to some other screen, validation, addition etc.

So this is how you can use the Flutter elevated button onPressed with ease. Hope you like this post.

Don’t hesitate to ask if you still have any questions related to the implementation of Flutter elevated button onPressed function. I’d be more than happy to answer all your questions.

Below section features the complete source code of the above implemented Flutter elevated button onPressed function.

Flutter Elevated 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 StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
                child: ElevatedButton(
                    onPressed: () {
                      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                          content: Text('Elevated button is pressed')));
                    },
                    child: Text('Elevated button OnPressed')))));
  }
}

Conclusion

As a conclusion, hope you now have an in-depth knowledge of how to properly use Flutter elevated button onPressed. I’d love to see you share your valuable thoughts on this post. Thank you for reading this post.