web-dev-qa-db-fra.com

Passage de données entre les écrans dans Flutter

En apprenant Flutter, je suis arrivé à la navigation. Je souhaite transmettre des données entre écrans de la même manière que transmission de données entre Activités sous Android et transmission de données entre des contrôleurs d'affichage sous iOS . Comment puis-je le faire dans Flutter?

Questions connexes:

dartflutterflutter-navigation
20
Suragch

Cette réponse couvrira à la fois le transfert de données et le transfert de données. Contrairement à Android Activités et à ViewControllers iOS, différents écrans de Flutter ne sont que des widgets. La navigation entre eux implique la création de ce que l’on appelle une route et l’utilisation de la touche Navigator pour pousser et afficher les routes sur la pile.

Passing données forward à l'écran suivant

enter image description here

Pour envoyer des données à l'écran suivant, procédez comme suit:

  1. Faites en sorte que le constructeur SecondScreen prenne un paramètre pour le type de données que vous souhaitez lui envoyer. Dans cet exemple particulier, les données sont définies comme étant une valeur String et sont définies ici avec this.text.

    class SecondScreen extends StatelessWidget {
  final String text;
  SecondScreen({Key key, @required this.text}) : super(key: key);

  ...

  2. Ensuite, utilisez la variable Navigator dans le widget FirstScreen pour indiquer un itinéraire au widget SecondScreen. Vous mettez les données que vous souhaitez envoyer en tant que paramètre dans son constructeur.

    Navigator.Push(
    context,
    MaterialPageRoute(
      builder: (context) => SecondScreen(text: 'Hello',),
    ));

Le code complet pour main.Dart est ici:

import 'package:flutter/material.Dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter',
    home: FirstScreen(),
  ));
}

class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() {
    return _FirstScreenState();
  }
}

class _FirstScreenState extends State<FirstScreen> {

  // this allows us to access the TextField text
  TextEditingController textFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First screen')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [

          Padding(
            padding: const EdgeInsets.all(32.0),
            child: TextField(
              controller: textFieldController,
              style: TextStyle(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
          ),

          RaisedButton(
            child: Text(
              'Go to second screen',
              style: TextStyle(fontSize: 24),
            ),
            onPressed: () {
              _sendDataToSecondScreen(context);
            },
          )

        ],
      ),
    );
  }

  // get the text in the TextField and start the Second Screen
  void _sendDataToSecondScreen(BuildContext context) {
    String textToSend = textFieldController.text;
    Navigator.Push(
        context,
        MaterialPageRoute(
          builder: (context) => SecondScreen(text: textToSend,),
        ));
  }
}

class SecondScreen extends StatelessWidget {
  final String text;

  // receive data from the FirstScreen as a parameter
  SecondScreen({Key key, @required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second screen')),
      body: Center(
        child: Text(
          text,
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

Retour des données à l'écran précédent

enter image description here

Lors du transfert de données, vous devez effectuer les opérations suivantes:

  1. Dans la FirstScreen, utilisez la Navigator pour Pousser (démarrer) la SecondScreen dans une méthode async et attendez le résultat qui sera renvoyé à la fin.

    final result = await Navigator.Push(
    context,
    MaterialPageRoute(
      builder: (context) => SecondScreen(),
    ));

  2. Dans le SecondScreen, incluez les données que vous voulez transmettre en tant que paramètre lorsque vous ouvrez le Navigator.

    Navigator.pop(context, 'Hello');

  3. Ensuite, dans le FirstScreen le await se terminera et vous pourrez utiliser le résultat.

    setState(() {
  text = result;
});

Voici le code complet pour main.Dart pour votre référence.

import 'package:flutter/material.Dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter',
    home: FirstScreen(),
  ));
}

class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() {
    return _FirstScreenState();
  }
}

class _FirstScreenState extends State<FirstScreen> {

  String text = 'Text';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [

            Padding(
              padding: const EdgeInsets.all(32.0),
              child: Text(
                text,
                style: TextStyle(fontSize: 24),
              ),
            ),

            RaisedButton(
              child: Text(
                'Go to second screen',
                style: TextStyle(fontSize: 24),
              ),
              onPressed: () {
                _awaitReturnValueFromSecondScreen(context);
              },
            )

          ],
        ),
      ),
    );
  }

  void _awaitReturnValueFromSecondScreen(BuildContext context) async {

    // start the SecondScreen and wait for it to finish with a result
    final result = await Navigator.Push(
        context,
        MaterialPageRoute(
          builder: (context) => SecondScreen(),
        ));

    // after the SecondScreen result comes back update the Text widget with it
    setState(() {
      text = result;
    });
  }
}

class SecondScreen extends StatefulWidget {
  @override
  _SecondScreenState createState() {
    return _SecondScreenState();
  }
}

class _SecondScreenState extends State<SecondScreen> {
  // this allows us to access the TextField text
  TextEditingController textFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second screen')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [

          Padding(
            padding: const EdgeInsets.all(32.0),
            child: TextField(
              controller: textFieldController,
              style: TextStyle(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
          ),

          RaisedButton(
            child: Text(
              'Send text back',
              style: TextStyle(fontSize: 24),
            ),
            onPressed: () {
              _sendDataBack(context);
            },
          )

        ],
      ),
    );
  }

  // get the text in the TextField and send it back to the FirstScreen
  void _sendDataBack(BuildContext context) {
    String textToSendBack = textFieldController.text;
    Navigator.pop(context, textToSendBack);
  }
}
45
Suragch

moyen le plus simple

FirstPage.Dart

 Navigator.Push(
          context,
          MaterialPageRoute(
              builder: (context) => PasswordRoute(usernameController)));

// usernameController est une valeur de chaîne. Si vous souhaitez transmettre plusieurs valeurs, ajoutez tout

SecondPage.Dart

class PasswordRoute extends StatefulWidget {
  final String usernameController;//if you have multiple values add here
PasswordRoute(this.usernameController, {Key key}): super(key: key);//add also..example this.abc,this...

  @override
  State<StatefulWidget> createState() => _PasswordPageState();
}

class _PasswordPageState extends State<PasswordRoute> {
 @override
  Widget build(BuildContext context) {
...child: Text(widget.usernameController);
}
}
5
user11065582

Cette solution est très simple en passant des variables dans le constructeur:

première page:

Navigator.of(context).Push(MaterialPageRoute(builder:(context)=>SecondPage('something')));

deuxième page:

class SecondPage extends StatefulWidget {
  String something;
  SecondPage(this.something);
  @override
  State<StatefulWidget> createState() {
    return SecondPageState(this.something);
  }
}
class SecondPageState extends State<SecondPage> {
  String something;
  SecondPageState(this.something);
  @override
  Widget build(BuildContext context) {
   return Scaffold(
    appBar: AppBar(
    //now you have passing variable
    title: Text(something),
   ),
   ...
  }
3
Mahmoud salah eldien saber