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
Para enviar datos a la siguiente pantalla, haga lo siguiente:
-
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 unString
valor y se establece aquí conthis.text
.class SecondScreen extends StatelessWidget final String text; SecondScreen(Key key, @required this.text) : super(key: key); ...
-
Entonces usa el
Navigator
en elFirstScreen
widget para empujar una ruta alSecondScreen
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
Al devolver los datos, debe hacer lo siguiente:
-
En el
FirstScreen
, utilizar elNavigator
para empujar (iniciar) elSecondScreen
en unasync
y espere el resultado que devolverá cuando finalice.final result = await Navigator.push( context, MaterialPageRoute( builder: (context) => SecondScreen(), ));
-
En el
SecondScreen
, incluya los datos que desea devolver como parámetro cuando abre elNavigator
.Navigator.pop(context, 'Hello');
-
Entonces en el
FirstScreen
losawait
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:
-
Desde la primera pantalla, navegue a otras como:
Navigator.pushNamed(context, "second",arguments: "name" : "Bijendra", "rollNo": 65210); ,
-
En la segunda pantalla en el método de compilación, obtenga lo siguiente:
@override Widget build(BuildContext context) final Map
rcvdData = 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.