Le bouton d’action flottant

Fait partie de la section Rendre l’application interactive du Journey Flutter de Coddy. Leçon 5 sur 34.

De nombreuses applications ont un bouton rond qui flotte dans le coin inférieur droit : nouveau message, nouvelle note, nouvelle photo. Flutter l’appelle FloatingActionButton.

Il ne va pas dans le body. Le Scaffold lui réserve un emplacement, à côté de appBar: et de body: :

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

Le Scaffold le place dans le coin et le maintient au-dessus de tout le reste à l’écran. Son child: est généralement une Icon.

Défi

Facile

Ajoutez au Scaffold un bouton d’action flottant avec Icons.add qui affiche New note lorsqu’on appuie dessus.

Essayez vous-même

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