La interacción con la interfaz de usuario es una parte esencial de cualquier aplicación. Durante el mismo, puede surgir la necesidad de devolver datos de la pantalla. Este tipo de interacción puede variar desde seleccionar una opción hasta navegar a diferentes rutas a través de los distintos botones de la interfaz de usuario. En este artículo, exploraremos el proceso de devolución de datos desde una pantalla en una aplicación Flutter.
En Flutter, se puede hacer usando el método Navigator.pop() . Probaremos esto implementando una aplicación simple. Para hacerlo, siga los siguientes pasos:
- Añadir una pantalla de inicio
- Agregue un botón para iniciar la pantalla de selección
- Mostrar las opciones
- Transición a la pantalla de inicio después de la selección de opciones
- Mostrar la selección en la pantalla de inicio
Construyamos una aplicación simple ahora:
Crear una pantalla de inicio:
Necesitaremos una pantalla de inicio con un botón. El botón cuando se toca debería cargarse en una pantalla de opciones. Se puede hacer como se muestra a continuación:
Dart
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('GeeksForGeeks'),
backgroundColor: Colors.green,
),
body: const Center(child: SelectionButton()),
);
}
Agregar el botón de inicio y la pantalla de selección:
Para crear un botón de inicio para iniciar la pantalla de selección y agregar la pantalla de selección, use lo siguiente:
Dart
class SelectionButton extends StatelessWidget {
const SelectionButton({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
),
onPressed: () {
_navigateAndDisplaySelection(context);
},
child: const Text('Launch Option Screen'),
);
}
_navigateAndDisplaySelection(BuildContext context) async {
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SelectionScreen()),
);
// Do not use BuildContexts across async gaps.
// 'removeCurrentSnackBar' is deprecated and shouldn't be used. Use ScaffoldMessenger.removeCurrentSnackBar.
// 'showSnackBar' is deprecated and shouldn't be used. Use ScaffoldMessenger.showSnackBar.
// ignore: use_build_context_synchronously
ScaffoldMessenger.of(context)
..removeCurrentSnackBar()
..showSnackBar(SnackBar(content: Text("$result")));
// Scaffold.of(context)
// ..removeCurrentSnackBar()
// ..showSnackBar(SnackBar(content: Text("$result")));
}
}
Mostrando las opciones:
Tendremos 2 opciones en aras de la simplicidad y tendremos datos asociados con ambos que, cuando se tocan, se pueden devolver a la pantalla de inicio.
Dart
class SelectionScreen extends StatelessWidget {
const SelectionScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Select Option'),
backgroundColor: Colors.green,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.green),
),
onPressed: () {
Navigator.pop(context, ' You selected the Option 1');
},
child: const Text('Option 1'),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.green),
),
onPressed: () {
Navigator.pop(context, 'You selected the Option 2');
},
child: const Text('Option 2.'),
),
)
],
),
),
);
}
}
Agregando datos a las opciones:
Adjuntaremos una devolución de llamada onPressed() tanto a la opción 1 como a la opción 2 que devuelve los datos asociados con cada una de ellas, como se muestra a continuación:
Dart
child: ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.green),
),
onPressed: () {
Navigator.pop(context, ' You selected the Option 1');
},
child: const Text('Option 1'),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.green),
),
onPressed: () {
Navigator.pop(context, 'You selected the Option 2');
},
child: const Text('Option 2.'),
),
Visualización de la selección:
Usaremos snackbar usando el método _navigateAndDisplaySelection() en SelectionButton :
Dart
_navigateAndDisplaySelection(BuildContext context) async {
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SelectionScreen()),
);
// Do not use BuildContexts across async gaps.
// 'removeCurrentSnackBar' is deprecated and shouldn't be used. Use ScaffoldMessenger.removeCurrentSnackBar.
// 'showSnackBar' is deprecated and shouldn't be used. Use ScaffoldMessenger.showSnackBar.
// ignore: use_build_context_synchronously
ScaffoldMessenger.of(context)
..removeCurrentSnackBar()
..showSnackBar(SnackBar(content: Text("$result")));
// Scaffold.of(context)
// ..removeCurrentSnackBar()
// ..showSnackBar(SnackBar(content: Text("$result")));
}
}
Código fuente completo:
Dart
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
title: 'Returning Data',
home: HomeScreen(),
));
}
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('GeeksForGeeks'),
backgroundColor: Colors.green,
),
body: const Center(child: SelectionButton()),
);
}
}
class SelectionButton extends StatelessWidget {
const SelectionButton({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
),
onPressed: () {
_navigateAndDisplaySelection(context);
},
child: const Text('Launch Option Screen'),
);
}
_navigateAndDisplaySelection(BuildContext context) async {
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SelectionScreen()),
);
// Do not use BuildContexts across async gaps.
// 'removeCurrentSnackBar' is deprecated and shouldn't be used. Use ScaffoldMessenger.removeCurrentSnackBar.
// 'showSnackBar' is deprecated and shouldn't be used. Use ScaffoldMessenger.showSnackBar.
// ignore: use_build_context_synchronously
ScaffoldMessenger.of(context)
..removeCurrentSnackBar()
..showSnackBar(SnackBar(content: Text("$result")));
// Scaffold.of(context)
// ..removeCurrentSnackBar()
// ..showSnackBar(SnackBar(content: Text("$result")));
}
}
class SelectionScreen extends StatelessWidget {
const SelectionScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Select Option'),
backgroundColor: Colors.green,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.green),
),
onPressed: () {
Navigator.pop(context, ' You selected the Option 1');
},
child: const Text('Option 1'),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.green),
),
onPressed: () {
Navigator.pop(context, 'You selected the Option 2');
},
child: const Text('Option 2.'),
),
)
],
),
),
);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por ddeevviissaavviittaa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA