The Floating Action Button

Part of the Making It Interactive section of Coddy's Flutter journey. Lesson 5 of 34.

Many apps have one round button that floats in the bottom right corner: new message, new note, new photo. Flutter calls it a FloatingActionButton.

It does not go in the body. The Scaffold has its own place for it, next to appBar: and body::

Scaffold(
  body: ...,
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.edit),
  ),
)

The Scaffold puts it in the corner and keeps it above everything else on the screen. Its child: is usually an Icon.

Challenge

Easy

Give the Scaffold a floating action button with Icons.add that prints New note when pressed.

Try it yourself

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Text('No notes yet'),
        ),
      ),
    );
  }
}