O botão de ação flutuante

Parte da seção Tornando o app interativo do Journey de Flutter da Coddy. Lição 5 de 34.

Muitos aplicativos têm um botão redondo que fica flutuando no canto inferior direito: nova mensagem, nova nota, nova foto. No Flutter, ele é chamado de FloatingActionButton.

Ele não vai no body. O Scaffold tem um espaço próprio para ele, ao lado de appBar: e body::

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

O Scaffold o posiciona no canto e o mantém acima de tudo o mais na tela. Seu child: geralmente é um Icon.

Desafio

Fácil

Adicione ao Scaffold um botão de ação flutuante com Icons.add que imprime New note quando pressionado.

Experimente você mesmo

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