How To Use Flutter FloatingActionButton OnPressed [Flutter Easy Guide]

In this tutorial, we’ll learn how to properly use Flutter floatingActionButton onPressed with the help of an easy multiple Flutter examples.

After reading this post, I’m sure you’ll have a detailed practical knowledge of how to easily use Flutter floatingActionButton onPressed function.

Introduction: Flutter FloatingActionButton OnPressed

Its a widget that is shown(if implemented) at the bottom right position of an app’s screen. It can be used to perform an action.

In this post, we’ll use Flutter floatingActionButton onPressed function to show a Flutter snackbar widget and also to increment a number. So let’s get right into it.

Implementing Flutter FloatingActionButton OnPressed

We’ll be using two examples to demonstrate the usage of onPressed function of floating action button widget.

1. OnPressed Function To Show Snackbar
2. OnPressed Function To Increment Numbers

OnPressed Function To Show Snackbar

For that, we’ve to follow the below steps:

• First we’ve used the floating action button constructor of Flutter scaffold widget and pass it FloatingActionButton widget.
• We’ve passed a simple Flutter icon widget to the child constructor of floating action button to make it look more professional.
• After that, we’ve passed a function to the onPressed constructor of Floating action button widget.
• This function will be triggered whenever the user tap/press the button. Inside this function, we’ve implemented simple Flutter snackbar widget with a custom text.

Code for this theory is written below.

Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Floating Action Button Pressed')));
        },
        child: Icon(Icons.show_chart),
      ),
    )

For demonstration, we’ve clicked the floating action button and as expected, the snackbar shows up.

OnPressed Function To Increment A Number

We’ll create a logic in which whenever the user taps on the floating action button, then the number will get incremented.

int num = 0;   // value to be incremented

Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            num++;      // value will be incremented here
          });
        },
        child: Icon(Icons.add),
      ),
      body: Center(
          child: Text(
        num.toString(),   // incremented value will be shown using this line
        style: TextStyle(fontSize: 24),
      )),
    )

The initial value is 0 but for demonstration, we’ve tapped the button 3 times and as a result, the number is incremented to 3.

This is how we can easily use Flutter floatingActionButton onPressed function.

The complete source code of incrementing numbers using onPressed function of Flutter floating action button is given in the below section.

Flutter FloatingActionButton 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> {
  int num = 0;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            num++;
          });
        },
        child: Icon(Icons.add),
      ),
      body: Center(
          child: Text(
        num.toString(),
        style: TextStyle(fontSize: 24),
      )),
    ));
  }
}

      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: TextButton(
                    onPressed: () {
                      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                          content: Text('Text button is pressed')));
                    },
                    child: Text('Text button OnPressed')))));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to properly use Flutter floatingActionButton OnPressed function. I’d love to have your feedback on this post.

I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.