Il pulsante di azione mobile

Fa parte della sezione Rendere l’app interattiva del percorso Flutter di Coddy. Lezione 5 di 34.

Molte app hanno un pulsante rotondo che fluttua nell'angolo in basso a destra: nuovo messaggio, nuova nota, nuova foto. Flutter lo chiama FloatingActionButton.

Non va nel body. Scaffold ha uno spazio apposito, accanto a appBar: e body::

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

Scaffold lo posiziona nell'angolo e lo mantiene sopra ogni altro elemento sullo schermo. Il suo child: di solito è un Icon.

Sfida

Facile

Aggiungi allo Scaffold un pulsante di azione flottante con Icons.add che stampi New note quando viene premuto.

Provalo tu

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