Display Floating Action Button in Flutter

A floating action button (FAB) is a circular button that contains an icon in the center. FAB is used to perform the primary action on a screen. Recommend to use a single FAB per screen and for positive actions such as "add", "send", "call", etc.

FAB can be created using FloatingActionButton class. It usually used with the Scaffold.floatingActionButton property.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Floating action button')),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () {
            print('Pressed');
          },
        ));
  }
}