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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more