Afficher une SnackBar

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

Une SnackBar est un court message qui apparaît en glissant depuis le bas de l’écran et disparaît de lui-même au bout d’environ quatre secondes. Les applications l’utilisent pour indiquer qu’une action a réussi : enregistré, envoyé, supprimé.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('Sent')),
);

Lisez-le de l’intérieur vers l’extérieur : SnackBar(...) est le message, showSnackBar l’affiche à l’écran et ScaffoldMessenger.of(context) trouve la partie de l’application qui affiche les messages.

context est l’emplacement du widget dans l’arbre, celui que build reçoit. .of(context) remonte l’arbre à partir de là pour effectuer une recherche. Le messager provient de MaterialApp : il doit donc se trouver au-dessus de vous. HomePage se trouve sous MaterialApp, son contexte le trouve donc. Le contexte de MyApp se trouve au-dessus, et un SnackBar lancé depuis là échoue avec « No ScaffoldMessenger widget found ». C’est une autre raison pour laquelle l’écran a sa propre classe.

Défi

Facile

Lorsque tu appuies sur Save, affiche une SnackBar qui dit Note saved.

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: HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Notes')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Save'),
        ),
      ),
    );
  }
}