Floatingactionbutton Flutter | A Detailed Overview in 2023

- Advertisement -

FloatingActionButton Flutter is particularly significant due to its special characteristics and usage guidelines. Flutter provides a variety of button types in accordance with the Material Design Guidelines for a range of use cases.

We’ll introduce you to these guidelines in this tutorial and walk you through using and personalizing FloatingActionButton flutter widget.

People, who read this article also read: Flutter Liquid Swipe Animation

What does FloatingActionButton flutter do?

Every element in Flutter is referred to as a widget, and FloatingActionButton flutter widget is no different. This widget, as its name implies, floats above other widgets on the screen.

- Advertisement -

The FloatingActionButton flutter widget typically has a circular shape and is positioned in the bottom-right corner of the screen. To further create the illusion of floating, it has an elevation. The best part is that each of these attributes can be changed.

Here is an illustration of a typical FloatingActionButton Flutter widget:

FloatingActionButton flutter- Floating Action Button
Floating Action Button

Use the floatingActionButton Flutter property of Scaffold in Flutter to use the floating action button:

Scaffold(
  floatingActionButton: FloatingActionButton(),
),

As a result, FAB will be added to the screen in its standard location:

Floating Action Button
Floating Action Button

Additionally, you can use FloatingActionButton.extended() to create an extended FAB:

Scaffold(
  floatingActionButton: FloatingActionButton(
    label: Text('Action'),
  ),
),
Default FAB
Default FAB

On the screen, we can see a default FAB.

Floatingactionbutton Flutter Rules And Principles

Let’s make sure we comprehend the guidelines and ideas to bear in mind when using FAB before we delve further and investigate the customization options. It’s crucial to follow these guidelines to keep your app in line with Material Design.

First action

In the UI, FAB is prominently displayed. Therefore, it should carry out the main function on the screen.

The selected action on the screen ought to be the most crucial and frequently used one. For instance, the main function of Twitter’s feed page is to compose tweets:

Twitter
Twitter

Minor operations like volume control, text copying, and drawer opening shouldn’t be done with FAB. Widgets that are hidden or discretely positioned in the UI can always be used to perform these actions.

Constructive Action

You must only use FAB for positive purposes; refrain from using it for negative ones. Constructive actions include things like adding something to your shopping cart, sharing a photo, and sending an email. Archiving, deleting, going to the previous page, and other destructive operations are examples.

Context is Key

The icon and action on the floating action button need to make sense together and be appropriate for the context of the screen.

Using the Twitter app as an example once more, the icon makes it obvious what the button does, which is to create a new tweet.

How could this be executed incorrectly? 

For instance, opening a profile page would obviously not be the most crucial action in the context of the screen if the button were set to open one.

Symbol and Label

If the FAB widget does anything other than display its icon by default, it somewhat defeats the purpose of using it.

This rule is reversed in the case of extended FAB, though. With an extended FAB, you can choose to show just the label or both the icon and label. In contrast, it’s forbidden to have an extended floating action button display nothing but the icon.

Customizing FloatingActionButton Flutter Widget

Let’s explore the customization possibilities available with FloatingActionButton Flutter widget now that you are aware of the key concepts and recommended procedures for developing a floating action button.

Colors

You can change the FloatingActionButton’s color. FAB’s background should be red as in this example:

FloatingActionButton(
	backgroundColor: Colors.red,
),
Red Icon
Red Icon

In the foregroundColor, a child’s color can be changed using the Color property; in this case, the icon’s color. Make it pink instead:

FloatingActionButton(
	foregroundColor: Colors.pink,
),
Foreground Color Pink
Foreground Color Pink

When you tap on the FAB, an animation begins in which a color spreads across the entire button area from the tapped position. This is called the splash color.

People, who read this article also read: Flutter SDK Installation on Windows, macOS, Linux

Constructor for the FloatingActionButton() Flutter Widget.

const FloatingActionButton(

    {Key? key,
    Widget? child,
    String? tooltip,
    Color? foregroundColor,
    Color? backgroundColor,
    Color? focusColor,
    Color? hoverColor,
    Color? splashColor,
    Object? heroTag: const _DefaultHeroTag(),
    double? elevation,
    double? focusElevation,
    double? hoverElevation,
    double? highlightElevation,
    double? disabledElevation,
    required VoidCallback? onPressed,
    MouseCursor? mouseCursor,
    bool mini: false,
    ShapeBorder? shape,
    Clip clipBehavior: Clip.none,
    FocusNode? focusNode,
    bool autofocus: false,
    MaterialTapTargetSize? materialTapTargetSize,
    bool isExtended: false}
) 

Below are listed the characteristics of this constructor:

1. child – Widget

Using this property, a widget can be added below it in the tree. You can put Icons or text to represent the purpose of this button.

FloatingActionButton( 
    child: Icon(Icons.add), //child widget inside this button
)

2. tooltip – String

With the help of this property, the user can see a brief badge message. 

FloatingActionButton( 
     tooltip: "Press to open link",
)

3. backgroundColor – Color

FloatingActionButton( 
    backgroundColor: Colors.redAccent,
)

Change the background color of the button by passing a color value to this property.
4. foregroundColor – Color

The icon and font color that are located beneath this button widget tree can be changed using this property.

FloatingActionButton( 
    foregroundColor: Colors.white,
)

5. elevation – double

Change the height of the elevation using this property; the more value you pass, the more shadow will be cast on the button.

FloatingActionButton( 
    elevation: 5.0
)

6. splashColor – Color

The button’s splash color can be modified using this property. You can tap the button to see the splash.

FloatingActionButton( 
     splashColor: Colors.blueAccent,
)

7. onPressed – VoidCallback

This property is used to give the button its desired function. The button will be pressed, which will cause the code block inside this function to run.

FloatingActionButton( 
    onPressed: (){
       //task to execute when this button is pressed
    },
)

The Floating action button’s position can be changed:

Using the Scaffold() widget’s floatingActionButtonLocation property, you can move the floating action button’s position on the screen.

Scaffold(
    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat
)

Flutter App Example

import 'package:flutter/material.dart';

void main() {
   runApp(MyApp()); 
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return DefaultTabController( //controller for TabBar
      length: 2, //lenght of tabs in TabBar
      child: MaterialApp(
         home: HomePage(),
      )
    );
  }
}

class HomePage extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: FloatingActionButton( 
          backgroundColor: Colors.redAccent,
          foregroundColor: Colors.white,
          elevation: 5.0,
          tooltip: "Press to open link",
          child: Icon(Icons.add), //child widget inside this button
          splashColor: Colors.blueAccent,
          onPressed: (){
            print("Button is pressed.");
            //task to execute when this button is pressed
          },
        ),
        backgroundColor: Colors.blue[100], //background color of scaffold
        appBar: AppBar(
            title:Text("Floating Action Button"), //title of app
            backgroundColor: Colors.redAccent, //background color of app bar
        ),
  
        body: Center( //content body on scaffold
            child: Text("Floating Action Button Example"),
        )
     );
  }
}

Output:

Conclusion

After finishing this tutorial, you ought to know:

  1. The definition of FloatingActionButton Flutter widget and how to use it in a Flutter application
  2. When using FAB, remember the following guidelines and ideas:
  3. FAB customization techniques
  4. Adding a hero animation to FAB: How-to’s

With this knowledge, I hope you’ll be able to apply FAB to your Flutter applications and enhance their aesthetic appeal and usability. I appreciate you reading!

Refer to the following video for further details:

- Advertisement -

Help Us!!!

We are expert developer providing free content to help the flutter learner. We need your support. Your little support inspire us šŸ¤—

Sarhan Bakshi
Sarhan Bakshi
I am a Writer, Designer, and Artist who is professional in all sectors. I am someone who can prove his worth and is witty and smart enough to handle any situation. I have photography skills and quick-to-act leadership abilities. I am young and sporty. Moreover, I have great social skills and can hold a conversation with people of more than one language. I am well adept in English, Bengali, and Hindi languages.

Related blog posts