Guide Fluttertoast 2025 : Créez des toasts dans Flutter

Qu’est-ce que Fluttertoast ?

Fluttertoast est une bibliothèque Flutter qui permet d’afficher des messages pop-up temporaires, appelés toasts, sur Android, iOS, et Web. Vous pouvez par exemple les utiliser pour :

• Confirmer une action (ex. : « Profil mis à jour »).
• Signaler une erreur (ex. : « Champ obligatoire manquant »).
• Fournir un feedback rapide à l’utilisateur.

Fluttertoast prend en charge deux types de toasts :

• Sans BuildContext : Simple, rapide, mais limité en personnalisation.
• Avec BuildContext : Plus flexible, avec un contrôle total sur l’apparence et le comportement.

Installer FlutterToast

Pour commencer, ajoutez le package Fluttertoast à votre projet, dans sa dernière version. Deux méthodes sont disponibles :

Via le terminal, en exécutant la commande suivante dans votre terminal (par exemple, dans Visual Studio Code) :

flutter pub add fluttertoast

Via pubspec.yaml en ajoutant manuellement la dépendance dans votre fichier pubspec.yaml :

dependencies:
  fluttertoast: ^8.2.12

Ensuite, exécutez flutter pub get pour télécharger le package. Enfin, importez Fluttertoast dans vos fichiers .dart :

import 'package:fluttertoast/fluttertoast.dart';

Afficher un toast sans BuildContext

La méthode la plus simple pour afficher un toast est d’utiliser Fluttertoast.showToast. Voici un exemple de base :

Fluttertoast.showToast(
  msg: "Opération réussie !",
  toastLength: Toast.LENGTH_SHORT,
  gravity: ToastGravity.BOTTOM,
  backgroundColor: Colors.green,
  textColor: Colors.white,
  fontSize: 16.0,
);

Ce code vous permet d’affiche un toast en bas de l’écran pendant une courte durée. Voici les paramètres disponibles :

Afficher un toast avec BuildContext

Utiliser la classe FToast avec un BuildContext vous permet de créer des toasts avec des widgets personnalisés.

Étape 1 : Configurer MaterialApp

Ajoutez un builder à votre MaterialApp dans main.dart :

MaterialApp(
  builder: FToastBuilder(),
  home: MyApp(),
  navigatorKey: GlobalKey<NavigatorState>(),
)

Étape 2 : Initialiser FToast

Puis initialisez FToast dans le widget où vous souhaitez l’utiliser, avec initState :

FToast fToast;

@override
void initState() {
  super.initState();
  fToast = FToast();
  fToast.init(context);
}

Étape 3 : Afficher un toast personnalisé

Enfin, créez une fonction que vous n’aurez plus qu’à appeler pour afficher le toast :

void _showToast() {
  Widget toast = Container(
    padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(25.0),
      color: Colors.greenAccent,
    ),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.check),
        SizedBox(width: 12.0),
        Text("Opération réussie !"),
      ],
    ),
  );

  fToast.showToast(
    child: toast,
    gravity: ToastGravity.BOTTOM,
    toastDuration: Duration(seconds: 2),
  );

  // Toast avec position personnalisée
  fToast.showToast(
    child: toast,
    toastDuration: Duration(seconds: 2),
    positionedToastBuilder: (context, child) {
      return Positioned(
        top: 16.0,
        left: 16.0,
        child: child,
      );
    },
  );
}

Personnaliser un toast sur Android

Pour créer un toast personnalisé sur Android (versions antérieures à Android 11), vous devez définir un fichier XML de mise en page et l’utiliser avec Fluttertoast.showCustomToast.

Étape 1 : Créer le fichier toast_custom.xml

Créez un fichier nommé toast_custom.xml dans le dossier android/app/src/main/res/layout de votre projet Flutter :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginStart="50dp"
    android:layout_marginEnd="50dp"
    android:background="@drawable/corner">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#CC000000"
        android:paddingStart="16dp"
        android:paddingTop="10dp"
        android:paddingEnd="16dp"
        android:paddingBottom="10dp"
        android:textStyle="bold"
        android:textColor="#FFFFFF"
        android:text="Toast personnalisé !" />
</FrameLayout>

Étape 2 : Utiliser le toast personnalisé

Puis, pour afficher le toast personnalisé, utilisez la méthode Fluttertoast.showCustomToast dans votre code Flutter. Voici un exemple :

Fluttertoast.showCustomToast(
  msg: "Action confirmée !",
  toastLength: Toast.LENGTH_SHORT,
  gravity: ToastGravity.CENTER,
);

Ici, le toast utilise la mise en page définie dans toast_custom.xml pour son apparence.

Annuler un toast

Pour annuler un toast en cours ou vider la file d’attente, vous pouvez utiliser ces deux fonctions :

// Annuler le toast actuel
Fluttertoast.cancel();

// Vider la file d’attente (pour FToast)
fToast.removeQueuedCustomToasts();

Ceci peut s’avérer utile dans les scénarios où plusieurs actions se succèdent rapidement, comme lors de requêtes réseau.

Erreurs courantes et solutions

Le toast ne s’affiche pas sur le Web

• Cause : La position ToastGravity.CENTER n’est pas supportée sur le Web.
• Solution : Utilisez ToastGravity.TOP ou ToastGravity.BOTTOM.

Le toast personnalisé ne fonctionne pas sur Android 11+

• Cause : Les toasts personnalisés sont limités sur Android 11 et versions supérieures.
• Solution : Utilisez FToast avec BuildContext pour plus de contrôle.

Le toast reste affiché trop longtemps

• Cause : La durée par défaut peut être trop longue pour certaines plateformes.
• Solution : Ajustez toastDuration (pour FToast) ou timeInSecForIosWeb (pour showToast).