El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com passar dades entre pantalles en una aplicació Flutter. Aquesta és una funcionalitat essencial per a qualsevol aplicació que necessiti compartir informació entre diferents vistes o components.

Objectius

Comprendre com passar dades entre pantalles utilitzant rutes.
Aprendre a rebre i utilitzar les dades en la pantalla de destinació.
Implementar exemples pràctics per reforçar els conceptes apresos.

Passar Dades amb Rutes Nomenades

Definir les Rutes

Primer, hem de definir les rutes en la nostra aplicació. Això es fa normalment en el widget MaterialApp.

import 'package:flutter/material.dart';

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

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

Passar Dades a la Segona Pantalla

Podem passar dades a la segona pantalla utilitzant el mètode Navigator.pushNamed.

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,
              '/second',
              arguments: 'Hello from HomeScreen',
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

Rebre Dades a la Segona Pantalla

A la segona pantalla, podem accedir a les dades passades a través de l'objecte ModalRoute.

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

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

Exemple Complet

import 'package:flutter/material.dart';

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

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

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,
              '/second',
              arguments: 'Hello from HomeScreen',
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

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

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

Exercicis Pràctics

Exercici 1: Passar un Objecte Complex

Crea una classe User amb els atributs name i age.
Passa una instància de User des de HomeScreen a SecondScreen.
Mostra el nom i l'edat de l'usuari a SecondScreen.

Solució

class User {
  final String name;
  final int age;

  User(this.name, this.age);
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            User user = User('John Doe', 25);
            Navigator.pushNamed(
              context,
              '/second',
              arguments: user,
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final User user = ModalRoute.of(context)!.settings.arguments as User;

    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text('Name: ${user.name}, Age: ${user.age}'),
      ),
    );
  }
}

Resum

En aquesta secció, hem après com passar dades entre pantalles en una aplicació Flutter utilitzant rutes nomenades. Hem vist com definir les rutes, passar dades a través del mètode Navigator.pushNamed, i com rebre aquestes dades a la pantalla de destinació. També hem practicat amb un exercici per passar un objecte complex entre pantalles. Amb aquests coneixements, estàs preparat per gestionar la navegació i la comunicació entre pantalles en les teves aplicacions Flutter.

Passar Dades Entre Pantalles

Objectius

Passar Dades amb Rutes Nomenades

Definir les Rutes

Passar Dades a la Segona Pantalla

Rebre Dades a la Segona Pantalla

Exemple Complet

Exercicis Pràctics

Exercici 1: Passar un Objecte Complex

Solució

Resum

Curs de Desenvolupament Flutter

Mòdul 1: Introducció a Flutter

Mòdul 2: Conceptes Bàsics de Programació en Dart

Mòdul 3: Widgets de Flutter

Mòdul 4: Gestió de l'Estat

Mòdul 5: Navegació i Enrutament

Mòdul 6: Xarxes i APIs

Mòdul 7: Persistència i Emmagatzematge

Mòdul 8: Conceptes Avançats de Flutter

Mòdul 9: Proves i Depuració

Mòdul 10: Desplegament i Manteniment

Mòdul 11: Flutter per a Web i Escriptori