FloatingButton in Flutter

A circular button that floats above the content, is used to promote a primary action.

Properties:

• onPressed: The callback function when the button is pressed.
• tooltip: A message to display when the button is long-pressed.
• child: The icon or widget to display on the button.
• backgroundColor: The background color of the button.
• foregroundColor: The color of the icon or widget.
• elevation: The elevation of the button.
• highlightElevation: The elevation of the button when highlighted.
• disabledElevation: The elevation of the button when disabled.
• splashColor: The color of the splash effect when the button is pressed.

Types:

• FloatingActionButton: The default floating action button.
• FloatingActionButton.extended: A floating action button with a label.
• FloatingActionButton.small: A smaller floating action button.

floatingActionButton: FloatingActionButton(
  // Callback function executed when the button is pressed
  onPressed: () {
    // Handle button press action here
  },
  // Background color of the button
  backgroundColor: Colors.blue,
  // Tooltip displayed when the user long-presses the button
  tooltip: 'Increment',
  // Child widget of the button, in this case, an icon
  child: Icon(Icons.add), // Icon displayed inside the button
  // Custom shape of the button, here using rounded corners
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10), // Radius for rounded corners
  ),
  // Elevation of the button, which gives a shadow effect
  elevation: 5, // Shadow depth for the button
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, // Position of the FloatingActionButton on the screen

Code :

import 'package:flutter/material.dart';

class FloatingactionbuttonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Floating Action Button Example'),
          flexibleSpace: Container(
            decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.deepPurple, Colors.orangeAccent],
                  begin: Alignment.topLeft,
                  end: Alignment.topRight,
                )
            ),
          ),
        ),
        body: Center(child: Text('Press the floating action button below.')),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Handle button press
          },
          backgroundColor: Colors.blue,
          tooltip: 'Increment',
          child: Icon(Icons.add),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10), // Rounded corners
          ),
          elevation: 5, // Elevation
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      ),
    );
  }
}

Output: