How To Easily Customize Flutter FloatingActionButton Widget

flutter floatingactionbutton

In this Flutter post, we’ll learn how to implement and customize Flutter FloatingActionButton widget. We’ll first see what the default Flutter FloatingActionButton looks like, then we’ll customize it using an easy but proper Flutter example code.

After reading this post, you’ll be able to easily implement and customize Flutter FloatingActionButton in your own apps as well.

So let’s not wait anymore and jump right into its implementation phase.

What is Flutter FloatingActionButton Widget?

It is the widget that’ll always display on the screen, no matter if you have a listview of large amount of items or any other scrolling widget. It means even if you scroll the screen, this Flutter FloatingActionButton widget will always show on the screen. 

Its default position is bottom right with some distance from the screen borders.

Let’s now understand it using proper practical example.

Default Floating Action Button Style

For that, we have to use the floating action button constructor of the scaffold widget and pass it the floating action button widget. See below code:

      floatingActionButton: FloatingActionButton( 
                                     onPressed: (){} ) 
Default flutter Floating Action Button Style
This is the default style of our Flutter FloatingActionButton widget. We’ve to specify its required onPressed constructor. In our case, we have passed it an empty function. You can specify any action in its body like navigation, validation, addition etc.

Customizing Flutter FloatingActionButton Widget (Easy Example)

Let’s now customize our floating action button using its constructors.


This constructor takes a function, which means you can specify any action that’ll be triggered after this floating button is pressed/clicked. These actions can be navigation to some other screen or validation of some data etc.

Let’s use a Flutter snackbar widget inside that function so when it’s clicked then we’ll see a snackbar on our screen.

onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('I am a snackbar')));
flutter floating action button onpressed
We’ve clicked the floating button and as a result, we can see a snackbar on our screen.


child: Icon(
          size: 26,
flutter floating action button child
We have passed a Flutter icon widget to its child constructor. You can pass other flutter widgets to it as well.

Background Color

flutter floating action button background color
The background color constructor of floating action button widget is used to change the color of that button. It takes a color so we have passed it a green color to demonstrate how it works.


elevation: 0
flutter floating action button background elevation
The elevation constructor is used to set the extend of floating button shadow. Setting it to zero will remove that shadow effect from floating button which can be seen in the above image. Giving it a higher value will increase the extend of shadow.


This constructor is used to specify the shape of floating button. See below examples:

shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))
flutter floating action button shape
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10).copyWith(topRight: Radius.circular(0)))
flutter floating action button widget shape
shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(20),bottomRight:Radius.circular(20)))
flutter floating action button widget round border shape
RoundedRectangleBorder(borderRadius: BorderRadius.horizontal(left: Radius.circular(20))),
flutter floating action button widget border shape
RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(20))),

flutter floating action button top border circular


 mini: true


flutter floating action button mini

This constructor makes the size of Flutter FloatingActionButton small. It takes a Boolean value and by default, it is false.

So this is how you can easily customize the Flutter FloatingActionButton widget in your own Flutter apps. I’ve a task for you. I would love to see you use the other remaining constructors of the floating action button class and share your experience here with us.
Feel free to ask if you still have any questions regarding the customization of Flutter FloatingActionButton widget. I’d be glad to answer all.
The complete source code is given below in which Flutter FloatingActionButton is implemented and customized.

Customized Flutter FloatingActionButton Widget Source Code

flutter floatingactionbutton

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
class Homepage extends StatefulWidget {
  State<Homepage> createState() => _HomepageState();
class _HomepageState extends State<Homepage> {
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
              .showSnackBar(SnackBar(content: Text('I am a snackbar')));
        elevation: 10,
        mini: false,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(50)
                .copyWith(topRight: Radius.circular(0))),
        child: Icon(
          size: 26,


In conclusion, hope you now have a clear idea of Flutter FloatingActionButton widget as we’ve practically customize it with a proper example. I’d be very happy to have your feedback on this post. Thank you for reading this post.

Leave a Comment

Your email address will not be published.