Saltar al contenido

Pasando datos entre pantallas en Flutter

Posterior a de nuestra extensa búsqueda de datos pudimos resolver este dilema que tienen ciertos los usuarios. Te dejamos la respuesta y nuestro deseo es serte de gran apoyo.

Solución:

Esta respuesta cubrirá tanto la transferencia de datos hacia adelante como la transferencia de datos hacia atrás. A diferencia de las actividades de Android y los ViewControllers de iOS, las diferentes pantallas en Flutter son solo widgets. Navegar entre ellos implica crear algo llamado ruta y usar el Navigator para empujar y hacer estallar las rutas dentro y fuera de la pila.

Pasando datos a la siguiente pantalla

ingrese la descripción de la imagen aquí

Para enviar datos a la siguiente pantalla, haga lo siguiente:

  1. Hacer el SecondScreen constructor toma un parámetro para el tipo de datos que desea enviarle. En este ejemplo particular, los datos se definen como un String valor y se establece aquí con this.text.

    class SecondScreen extends StatelessWidget 
      final String text;
      SecondScreen(Key key, @required this.text) : super(key: key);
    
      ...
    
  2. Entonces usa el Navigator en el FirstScreen widget para empujar una ruta al SecondScreen widget. Pones los datos que quieres enviar como parámetro en su constructor.

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

El código completo para main.dart es aquí:

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 

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

Pasando datos a la pantalla anterior

ingrese la descripción de la imagen aquí

Al devolver los datos, debe hacer lo siguiente:

  1. En el FirstScreen, utilizar el Navigator para empujar (iniciar) el SecondScreen en un async y espere el resultado que devolverá cuando finalice.

    final result = await Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => SecondScreen(),
        ));
    
  2. En el SecondScreen, incluya los datos que desea devolver como parámetro cuando abre el Navigator.

    Navigator.pop(context, 'Hello');
    
  3. Entonces en el FirstScreen los await terminará y puedes usar el resultado.

    setState(() 
      text = result;
    );
    

Aquí está el código completo para main.dart para tu referencia.

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 

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

Obtenga la solución perfecta:

  1. Desde la primera pantalla, navegue a otras como:

    Navigator.pushNamed(context, "second",arguments: "name" : 
      "Bijendra", "rollNo": 65210);
    ,
    
  2. En la segunda pantalla en el método de compilación, obtenga lo siguiente:

    @override
    Widget build(BuildContext context) 
        final  MaprcvdData = ModalRoute.of(context).settings.arguments;
        print("rcvd fdata $rcvdData['name']");
        print("rcvd fdata $rcvdData");
    
        return Scaffold(appBar: AppBar(title: Text("Second")),
          body: Container(child: Column(children: [
          Text("Second"),
        ],),),);
    
    
    

La manera más fácil

FirstPage.dart

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

// usernameController es un valor de cadena, si desea pasar varios valores agregue todos

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 createState() => _PasswordPageState();


class _PasswordPageState extends State 
 @override
  Widget build(BuildContext context) 
...child: Text(widget.usernameController);


valoraciones y comentarios

Puedes proteger nuestra tarea ejecutando un comentario o puntuándolo te lo agradecemos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *