Transmission des informations entre widgets dans Flutter

Pourquoi et comment transmettre des informations entre widgets ?

Lorsque vous construisez une application Flutter, le mieux est d’organiser votre interface en widgets imbriqués. C’est à dire que chaque widget remplit son propre rôle, en étant un petit bout spécifique de votre application. Mais bien souvent, un widget enfant aura besoin d’accéder à des données contenues dans celui qui le précède.

Il est alors tentant, lorsqu’on débute, de déclarer des variables globales pour les rendre accessibles à tous les widgets. Cependant, cette approche complique la maintenance et la compréhension du code (comprendre où est utilisée chaque variable). Flutter encourage donc à transmettre les données de manière explicite entre widgets, en passant par leurs constructeurs.

Comment transmettre une valeur à un widget enfant

Cette notion est simple à mettre en place, car les widgets sont naturellement fait pour pouvoir recevoir des informations, du widget au-dessus d’eux. Ainsi, pour passer une valeur d’un widget parent vers un widget enfant dans Flutter, il vous suffit de modifier les paramètres du constructeur de ce dit widget.

Par exemple, imaginons que notre ParentWidget contienne une information qu’il souhaite transmettre à ChildWidget pour l’afficher. Par exemple, un message de bienvenue. Voici comment transmettre cette variable de l’un à l’autre :

class ParentWidget extends StatelessWidget {
  final String welcomeMessage = "Bienvenue sur notre application !"; // Message à transmettre

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Widget A (ParentWidget)")),
      body: Center(
        child: ChildWidget(message: welcomeMessage), // Passe le message au widget enfant
      ),
    );
  }
}

class ChildWidget extends StatelessWidget {
  final String message; // Message reçu du parent

  ChildWidget({required this.message}); // Constructeur pour recevoir le message

  @override
  Widget build(BuildContext context) {
    return Text(
      message, // Affiche le message transmis par le parent
      style: TextStyle(fontSize: 20),
    );
  }
}

Explication simple

1. Déclaration de la valeur dans le parent : Dans ParentWidget, on définit une variable welcomeMessage qui contient le message « Bienvenue sur notre application ! ».
2. Transmission de la valeur à l’enfant : En créant ChildWidget dans la méthode build de ParentWidget, on passe welcomeMessage via le paramètre message.
3. Affichage de la valeur dans l’enfant : Dans ChildWidget, on utilise message dans un Text pour afficher le contenu transmis par le parent.

Résultat

Le widget enfant ChildWidget affiche le texte « Bienvenue sur notre application ! » envoyé par ParentWidget.

Comment transmettre des informations de manière montante, ou horizontale

Dans certains cas, vous ne souhaitez pas seulement transmettre une valeur d’un widget parent vers un widget enfant, mais plutôt dans l’autre sens (de l’enfant vers le parent). Il peut aussi arriver que deux widgets de même niveau aient besoin de partager des informations.

Par exemple, un bouton « Valider » doit pouvoir vérifier que tous les TextFields ont été remplis avant d’envoyer les informations.

Ce besoin de transmettre et mettre à jour les données dans l’interface est ce qu’on appelle la gestion d’état. Il existe plusieurs manières de gérer l’état dans Flutter, adaptées à différents niveaux d’expérience :

• setState → La méthode de base, idéale pour débuter.
• Provider → Une approche plus structurée et flexible.
• Riverpod → Une solution moderne et optimisée, qui simplifie la gestion d’état.