El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Pasando Datos Entre Pantallas

Siguiente ►
►

En aplicaciones móviles, es común la necesidad de pasar datos entre diferentes pantallas. Flutter proporciona varias maneras de hacerlo, dependiendo de la complejidad y los requisitos de la aplicación. En esta lección, exploraremos las técnicas más comunes para pasar datos entre pantallas en Flutter.

Contenido

  1. Introducción
  2. Pasando Datos Usando el Constructor
  3. Pasando Datos Usando Navigator
  4. Ejercicio Práctico
  5. Conclusión

Introducción

Pasar datos entre pantallas es una tarea fundamental en el desarrollo de aplicaciones móviles. En Flutter, esto se puede lograr de varias maneras, incluyendo el uso de constructores y el paquete Navigator. A continuación, veremos cómo implementar estas técnicas con ejemplos prácticos.

Pasando Datos Usando el Constructor

La forma más sencilla de pasar datos entre pantallas es a través del constructor de la clase de la pantalla de destino. Este método es directo y fácil de entender.

Ejemplo

Supongamos que tenemos dos pantallas: HomeScreen y DetailScreen. Queremos pasar un mensaje desde HomeScreen a DetailScreen.

// HomeScreen.dart
import 'package:flutter/material.dart';
import 'detail_screen.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DetailScreen(message: 'Hello from HomeScreen!'),
              ),
            );
          },
          child: Text('Go to Detail Screen'),
        ),
      ),
    );
  }
}

// DetailScreen.dart
import 'package:flutter/material.dart';

class DetailScreen extends StatelessWidget {
  final String message;

  DetailScreen({required this.message});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Screen'),
      ),
      body: Center(
        child: Text(message),
      ),
    );
  }
}

Explicación

  1. HomeScreen: En HomeScreen, usamos Navigator.push para navegar a DetailScreen. Pasamos el mensaje como un argumento del constructor.
  2. DetailScreen: En DetailScreen, recibimos el mensaje a través del constructor y lo mostramos en un Text widget.

Pasando Datos Usando Navigator

Otra forma de pasar datos entre pantallas es usando el paquete Navigator y el método pushNamed. Este método es útil cuando se trabaja con rutas nombradas.

Ejemplo

Primero, definimos las rutas en el archivo principal de la aplicación.

// main.dart
import 'package:flutter/material.dart';
import 'home_screen.dart';
import 'detail_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/detail': (context) => DetailScreen(),
      },
    );
  }
}

Luego, modificamos HomeScreen y DetailScreen para usar rutas nombradas.

// HomeScreen.dart
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(
              context,
              '/detail',
              arguments: 'Hello from HomeScreen!',
            );
          },
          child: Text('Go to Detail Screen'),
        ),
      ),
    );
  }
}

// DetailScreen.dart
import 'package:flutter/material.dart';

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String message = ModalRoute.of(context)!.settings.arguments as String;

    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Screen'),
      ),
      body: Center(
        child: Text(message),
      ),
    );
  }
}

Explicación

  1. Definición de Rutas: En main.dart, definimos las rutas de la aplicación usando el parámetro routes de MaterialApp.
  2. HomeScreen: En HomeScreen, usamos Navigator.pushNamed para navegar a DetailScreen y pasamos el mensaje usando el parámetro arguments.
  3. DetailScreen: En DetailScreen, recuperamos el mensaje usando ModalRoute.of(context)!.settings.arguments.

Ejercicio Práctico

Ejercicio

Crea una aplicación con dos pantallas: InputScreen y DisplayScreen. En InputScreen, el usuario debe ingresar su nombre en un campo de texto. Al presionar un botón, navega a DisplayScreen y muestra el nombre ingresado.

Solución

// main.dart
import 'package:flutter/material.dart';
import 'input_screen.dart';
import 'display_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => InputScreen(),
        '/display': (context) => DisplayScreen(),
      },
    );
  }
}

// input_screen.dart
import 'package:flutter/material.dart';

class InputScreen extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Input Screen'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(labelText: 'Enter your name'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(
                  context,
                  '/display',
                  arguments: _controller.text,
                );
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

// display_screen.dart
import 'package:flutter/material.dart';

class DisplayScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String name = ModalRoute.of(context)!.settings.arguments as String;

    return Scaffold(
      appBar: AppBar(
        title: Text('Display Screen'),
      ),
      body: Center(
        child: Text('Hello, $name!'),
      ),
    );
  }
}

Conclusión

En esta lección, hemos aprendido cómo pasar datos entre pantallas en Flutter usando dos métodos principales: a través del constructor y usando Navigator con rutas nombradas. Ambas técnicas son útiles y pueden ser aplicadas dependiendo de las necesidades de tu aplicación. Practica estos métodos para familiarizarte con ellos y mejorar tus habilidades en Flutter.

En la próxima lección, exploraremos el concepto de Deep Linking y cómo implementarlo en tus aplicaciones Flutter.

◄ Anterior
◄
Siguiente ►
►

Curso de Desarrollo con Flutter

Módulo 1: Introducción a Flutter

Módulo 2: Conceptos Básicos de Programación en Dart

Módulo 3: Widgets en Flutter

Módulo 4: Gestión de Estado

Módulo 5: Navegación y Enrutamiento

Módulo 6: Redes y APIs

Módulo 7: Persistencia y Almacenamiento

Módulo 8: Conceptos Avanzados de Flutter

Módulo 9: Pruebas y Depuración

Módulo 10: Despliegue y Mantenimiento

Módulo 11: Flutter para Web y Escritorio

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados