DEV Community

Nilanchal
Nilanchal

Posted on • Edited on • Originally published at stacktips.com

17

How to Create and Customize the Floating Action Button in Flutter

The Floating Action Button (FAB) represents the critical user action on that screen. This widget looks like a round button floating in the bottom right corner of the screen and hence it is very accessible and within the reach of the users.

Creating a Floating Action Button

The FloatingActionButton widget class in Flutter can be used to create a floating button. The following code shows how to create a simple floating button in Flutter.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.format_size_sharp, color: Colors.white),
          onPressed: () {
            // Do something
          },
        ),
      ),

    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Customize the Floating Action Button

The FloatingActionButton widget has a number of properties that can be used to customize its appearance and behavior. For example, we can use the backgroundColor property to set the button background colour and the onPressed property to set a callback that is executed when the button is pressed.

floatingActionButton: FloatingActionButton(
  tooltip: "Settings",
  backgroundColor: Colors.cyan.shade800,
  foregroundColor: Colors.white,
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18),
  ),
  onPressed: () {
    // Do something here.
  },
  child: const Icon(Icons.format_size_sharp, color: Colors.white),
)
`
## Displaying Icon and label on the floating action button

`floatingActionButton: FloatingActionButton.extended(
  tooltip: "Settings",
  backgroundColor: Colors.cyan.shade800,
  foregroundColor: Colors.white,
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18),
  ),
  onPressed: () {
    // Do something here.
  },
  icon: const Icon(Icons.format_size_sharp, color: Colors.white),
  label: const Text("Settings"),
)
Enter fullscreen mode Exit fullscreen mode

Small Floating Action Button

floatingActionButton: FloatingActionButton.small(
  tooltip: "Settings",
  backgroundColor: Colors.cyan.shade800,
  foregroundColor: Colors.white,
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18),
  ),
  onPressed: () {
    // Do something here.
  },
  child: const Icon(Icons.format_size_sharp, color: Colors.white),
Enter fullscreen mode Exit fullscreen mode

Large Floating Action Button

floatingActionButton: FloatingActionButton.large(
  tooltip: "Settings",
  backgroundColor: Colors.cyan.shade800,
  foregroundColor: Colors.white,
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18),
  ),
  onPressed: () {
    // Do something here.
  },
  child: const Icon(Icons.format_size_sharp, color: Colors.white),
),
Enter fullscreen mode Exit fullscreen mode

This article is first appeared on stacktips.com

AWS Q Developer image

Your AI Code Assistant

Ask anything about your entire project, code and get answers and even architecture diagrams. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Start free in your IDE

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay