El botón de acción flotante

Parte de la sección Cómo hacerla interactiva del Journey de Flutter de Coddy. Lección 5 de 34.

Muchas aplicaciones tienen un botón redondo que flota en la esquina inferior derecha: para crear un mensaje, una nota o una foto. Flutter lo llama FloatingActionButton.

No va en el body. El Scaffold tiene un lugar propio para él, junto a appBar: y body::

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

El Scaffold lo coloca en la esquina y lo mantiene por encima de todo lo demás en la pantalla. Su child: suele ser un Icon.

Desafío

Fácil

Añade a Scaffold un botón de acción flotante con Icons.add que imprima New note al presionarlo.

Pruébalo tú mismo

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'),
        ),
      ),
    );
  }
}