Transmettre des données entre les écrans en Flutter

Transmettre des données entre les écrans en Flutter

1. Objectif

• Etre capable de passer des données d’un écran à un autre en Flutter en utilisant le constructeur du widget de destination et Navigator.push.

2. Présentation

• Dans de nombreuses applications Flutter, vous devez transmettre des données entre les écrans lorsque vous accédez à une nouvelle page. Flutter fournit des mécanismes pour envoyer et recevoir des données efficacement, garantissant ainsi le fonctionnement transparent de votre application. Explorons comment accomplir cette tâche.
• Transmettre des données entre les écrans en Flutter est une tâche courante qui peut être réalisée de plusieurs façons. Voici un tutoriel détaillé qui montre comment passer des données d’un écran à un autre en utilisant Navigator.push et en récupérant les données avec Navigator.pop.
• Avant de commencer permettez-moi de vous donner un petit aperçu de la classe Navigator. Nous utilisons généralement les fonctions suivantes :
• Navigator.push
• Description :
• Navigator.push est une méthode utilisée pour ajouter une nouvelle route au sommet de la pile de navigation du navigateur qui encapsule le plus étroitement le contexte donné. Cela signifie qu’une nouvelle page ou écran est poussé sur la pile, et l’utilisateur est dirigé vers cette nouvelle page.
• Cette méthode prend un argument de type Route, qui représente la nouvelle route à ajouter.
• Exemple d’utilisation :

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NouvellePage()),
);

• Navigator.pop
• Description :
• Navigator.pop est une méthode utilisée pour retirer la route la plus haute de la pile de navigation du navigateur qui encapsule le plus étroitement le contexte donné. Cela signifie que la page actuelle est fermée et que l’utilisateur revient à la page précédente dans la pile de navigation.
• Exemple d’utilisation :

Navigator.pop(context);

• Navigator.pushNamed
• Description :
• Navigator.pushNamed est une méthode utilisée pour ajouter une nouvelle route nommée au sommet de la pile de navigation du navigateur qui encapsule le plus étroitement le contexte donné. Cette méthode utilise une chaîne de caractères pour identifier la route à ajouter. Cela est particulièrement utile pour la navigation basée sur des noms de routes prédéfinis.
• Exemple d’utilisation :

Navigator.pushNamed(context, '/nouvellePage');

• Navigator.pushNamedAndRemoveUntil
• Description :
Navigator.pushNamedAndRemoveUntil est une méthode utilisée pour ajouter une nouvelle route nommée au sommet de la pile de navigation du navigateur qui encapsule le plus étroitement le contexte donné, puis supprimer toutes les routes précédentes jusqu’à ce que le prédicat fourni renvoie true. Cela est utile pour réinitialiser la pile de navigation à un certain point après l’ajout d’une nouvelle route.
• Exemple d’utilisation :

Navigator.pushNamedAndRemoveUntil(
  context,
  '/nouvellePage',
  (Route route) => route.isFirst,
);

• Ces méthodes sont couramment utilisées dans les applications Flutter pour gérer la navigation entre différentes pages ou écrans, permettant une expérience utilisateur fluide et intuitive.

3. Envoi de données vers un nouvel écran

• Pour envoyer des données à un nouvel écran en Flutter, vous pouvez transmettre les données comme arguments lors de la navigation. Voici comment le faire :
• Étape 1 : Configuration de l’écran de départ
• Créer un écran de départ (FirstScreen) :
• Dans cet écran, ajoutez un bouton qui, lorsqu’il est pressé, envoie des données à l’écran de destination (SecondScreen).

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Data Passing Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondScreen(data: 'Hello from FirstScreen!'),
              ),
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

4. Réception de données sur la page de destination

• Créer un écran de destination (SecondScreen) :
• Dans cet écran, recevez les données transmises depuis FirstScreen via le constructeur et affichez-les.

class SecondScreen extends StatelessWidget {
  final String data;

  SecondScreen({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text(data),
      ),
    );
  }
}

5. Explication du Code

• Importation des packages :
• import 'package:flutter/material.dart'; : Importation du package Flutter nécessaire pour construire l’interface utilisateur.
• Fonction principale :
• void main() { runApp(MyApp()); } : Point d’entrée principal de l’application qui lance MyApp.
• Classe MyApp :
• MyApp est un widget sans état qui initialise l’application Flutter.
• MaterialApp configure le titre, le thème et la première page (FirstScreen) de l’application.
• Classe FirstScreen :
• FirstScreen est un widget sans état qui représente la première page de l’application.
• Utilise Scaffold pour créer une structure de page avec une AppBar et un bouton centré.
• Le bouton utilise Navigator.push pour naviguer vers SecondScreen en passant des données (ici une chaîne de caractères « Hello from FirstScreen! »).
• Classe SecondScreen :
• SecondScreen est un widget sans état qui prend une chaîne de caractères en paramètre et affiche cette donnée.
• Utilise Scaffold pour créer une structure de page avec une AppBar et un texte centré affichant la donnée reçue.
• Fonctionnement
• Envoi de données depuis FirstScreen :
• Lorsque le bouton « Go to Second Screen » est pressé dans FirstScreen, Navigator.push est utilisé pour naviguer vers SecondScreen en passant des données via le constructeur de SecondScreen.
• Réception et affichage des données dans SecondScreen :
• SecondScreen reçoit les données transmises depuis FirstScreen via le paramètre data dans le constructeur.
• Les données reçues sont affichées dans un Text widget au centre de SecondScreen.

6. Application:

• Créer une application Flutter simple avec deux pages. L’application permettra de démontrer la navigation de base entre les pages, la transmission de données d’une page à une autre, et l’utilisation d’itinéraires nommés pour la navigation. En bonus, nous ajouterons une page supplémentaire pour afficher la pile de navigation et montrer comment les pages persistent entre les navigations.

• Description des Pages

• Page #1 : Homepage
• Contiendra un ListView où toutes les villes saisies par l’utilisateur seront affichées.
• Page #2 : AddDataPage
• Contiendra un TextField pour ajouter des données à la liste. Cette page comprendra également deux boutons : Cancel et Add.
• Tâches à Réaliser
• Tâche n°1 : Navigation de Base
• Implémentez la navigation entre les pages en utilisant un objet de page connu.
• Tâche n°2 : Envoi de Données avec Navigation
• Ajoutez la fonctionnalité pour envoyer des données d’une page à l’autre en utilisant la navigation.
• Tâche n°3 : Utilisation d’un Itinéraire Nommé pour la Navigation
• Modifiez l’application pour utiliser des itinéraires nommés au lieu d’objets de page pour la navigation.
• Tâche Bonus n°4 : Gestion de la Pile de Navigation
• Ajoutez une page supplémentaire pour afficher la pile de navigation et montrez comment les pages persistent entre les navigations.

• Fonctionnalités de l’Application

• Page 1 : Homepage
• Affichera tout le texte saisi par l’utilisateur dans une liste.
• Page 2 : AddDataPage
• Fournira un formulaire pour saisir des données avec deux boutons : Cancel pour annuler l’opération et revenir à la page précédente, et Add pour ajouter les données saisies à la liste et revenir à la page d’accueil.

• Instructions

• Naviguer entre les Pages :
• Utilisez Navigator.pushNamed pour naviguer de Homepage vers AddDataPage.
• Envoyer et Recevoir des Données :
• Utilisez Navigator.pop avec des arguments pour retourner les données saisies dans AddDataPage à Homepage.
• Utiliser des Itinéraires Nommés :
• Configurez les itinéraires nommés dans MaterialApp et utilisez-les pour la navigation.
• Gérer la Pile de Navigation :
• Ajoutez une page supplémentaire pour afficher et manipuler la pile de navigation, en montrant comment les pages persistent entre les navigations.
Solution

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation and Data Passing Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => Homepage(),
        '/add': (context) => AddDataPage(),
        '/navigation_stack': (context) => NavigationStackPage(),
      },
    );
  }
}

class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State {
  List cities = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Homepage'),
        actions: [
          IconButton(
            icon: Icon(Icons.list),
            onPressed: () {
              Navigator.pushNamed(context, '/navigation_stack');
            },
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: cities.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(cities[index]),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final result = await Navigator.pushNamed(context, '/add');
          if (result != null) {
            setState(() {
              cities.add(result as String);
            });
          }
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

class AddDataPage extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add Data'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(labelText: 'Enter city name'),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: Text('Cancel'),
                ),
                ElevatedButton(
                  onPressed: () {
                    Navigator.pop(context, _controller.text);
                  },
                  child: Text('Add'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class NavigationStackPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Navigation Stack'),
      ),
      body: Center(
        child: Text('This is where you can display the navigation stack.'),
      ),
    );
  }
}