Transmettre les données entre pages dans Flutter

Transmettre les données entre pages dans Flutter

1. Objectif

• Dans cet article, nous allons voir comment transmettre des données à un widget « Stateful » dans Flutter avec des exemples pratiques.

2. Rappel

Les widgets avec état (stateless) sont modifiables et mettent à jour leurs données chaque fois qu’un setState((){data;}) est appelé.

Les widgets sans état (statefulwidget) , quant à eux, sont immuables, c’est-à-dire qu’ils contiennent des données qui ne doivent pas changer pendant l’exécution.

3. Transmission de données à une autre « Statefulwidget ».

• Lorsque vous passez des données d’un écran à un autre (qui est un Statefulwidget ), le problème est que vous ne pouvez pas accéder directement à la variable. Cela signifie que si vous avez une variable « title » comme paramètre et que la valeur est transmise à partir de la page précédente, vous ne pouvez pas simplement écrire le « title » et afficher la valeur sur le deuxième page.
• Pour transmettre des données au « Statefulwidget« , créez tout d’abord deux pages. Maintenant, à partir de la première page, ouvrez la deuxième page et transmettez les données. À l’intérieur de la deuxième page, accédez à la variable à l’aide de widget. Par exemple widget.title.

• Instructions étape par étape :

• Étape 1 : Créez la première page et ajoutez le ElevatedButton pour ouvrir la deuxième page.
• Étape 2 : Créez la deuxième page et écrivez une variable qui contiendra la valeur provenant de la première page.
• Étape 3 : Accédez à la première page, à l’intérieur de la méthode onPressed de ElevatedButton , ajoutez un code pour ouvrir la deuxième page et transmettez la valeur dans le nom du paramètre (défini dans la deuxième page).
• Étape 4 : Accédez à la deuxième page, à l’intérieur de la méthode de construction, accédez à la variable à l’aide du widget. Par exemple widget.title, widget.name, widget.age, etc.
• Étape 5 : Redémarrez l’application.

• Exemple complet :

Cliquez ici
fichier main.dart
import 'package:flutter/material.dart';
import 'home.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Home'),
        ),
        body: PageOne(),
      ),
    );
  }
}
fichier home.dart
import 'package:flutter/material.dart';
import 'affichage.dart';

class PageOne extends StatefulWidget {
  @override
  _PageOneState createState() => _PageOneState();
}

class _PageOneState extends State<PageOne> {
  String _textFieldValue = 'Le texte transmis est vide';
  String _enteredText = '';
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        padding: const EdgeInsets.all(32.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            TextField(
              onChanged: (String value) {
                setState(() {
                  _textFieldValue = value;
                  _enteredText = value;
                });
              },
              decoration: InputDecoration(
                prefixIcon: const Icon(Icons.send),
                hintText: 'Hint Text',
                helperText: 'Helper Text',
                counterText: '${_enteredText.length.toString()} caractère(s)',
                border: const OutlineInputBorder(),
              ),
            ),
            const Text(
                'Choose the color (value to be passed) of the Next Page:'),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                  textStyle: const TextStyle(
                      fontSize: 30, fontWeight: FontWeight.bold)),
              child: const Text('Pink'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    // ignore: prefer_const_constructors
                    builder: (_) => PageTwo(
                      passedColor: Colors.pink,
                      passedColorName: 'Pink',
                      variabletext: _textFieldValue,
                    ),
                  ),
                );
              },
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                  textStyle: const TextStyle(
                      fontSize: 30, fontWeight: FontWeight.bold)),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    // ignore: prefer_const_constructors
                    builder: (_) => PageTwo(
                      passedColor: Colors.blueGrey,
                      passedColorName: 'Blue',
                      variabletext: _textFieldValue,
                    ),
                  ),
                );
              },
              child: const Text('Blue'),
            ),
            const SizedBox(
              height: 250,
            )
          ],
        ),
      ),
    );
  }
}
fichier affichage.dart
import 'package:flutter/material.dart';

class PageTwo extends StatefulWidget {
  final Color passedColor;
  final String passedColorName;
  final String variabletext;
  const PageTwo(
      {Key? key,
      required this.passedColor,
      required this.passedColorName,
      required this.variabletext}) //key:key is used
      : super(key: key);
  @override
  _PageTwoState createState() => _PageTwoState();
}

class _PageTwoState extends State<PageTwo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 2'),
        automaticallyImplyLeading: false, //to disable going back
      ),
      body: Column(
        children: [
          Container(
            height: 400,
            width: double.infinity,
            color: widget.passedColor,
            child: Align(
              alignment: Alignment.center,
              child: Text(
                'Texte transmit\n ${widget.variabletext} ',
                style: const TextStyle(fontSize: 32),
              ),
            ),
          ),
          Text('${widget.passedColorName} color was passed'),
          ElevatedButton(
              style: ElevatedButton.styleFrom(
                  textStyle: const TextStyle(
                      fontSize: 30, fontWeight: FontWeight.bold)),
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text('<- Go back'))
        ],
      ),
    );
  }
}
// Use this if u want to later make changes to the passed value in the code. Full code in the file below
// NOTE: Here 'foo' means 'your value'
// class MyStateful extends StatefulWidget {
//   final String foo;
//   const MyStateful({Key key, this.foo}): super(key: key);
//   @override
//   _MyStatefulState createState() => _MyStatefulState(foo: this.foo);
// }
// class _MyStatefulState extends State<MyStateful> {
//   String foo;
//   _MyStatefulState({this.foo});
//   @override
//   Widget build(BuildContext context) {
//     return Text(foo);
//   },}