Flutter

Transmettre les données entre pages dans Flutter

Un cours complet pour maîtriser Transmettre les données entre pages dans Flutter.

0 chapitres 0 QCM Accès gratuit

Commencer Retour aux cours

Transmettre les données entre pages dans Flutter

Objectif
- Dans cet article, nous allons voir comment transmettre des données à un widget "Stateful" dans Flutter avec des exemples pratiques.
Rappel

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);
//   },}

Cours Flutter

Télécharger ce cours en PDF 1

Cet article vous a-t-il aidé ?

Transmettre les données entre pages dans Flutter

Dans cet article

Sommaire du cours

Autres catégories

Transmettre les données entre pages dans Flutter

Objectif

Rappel

Transmission de données à une autre "Statefulwidget".

Instructions étape par étape :

Exemple complet :

Cours Flutter