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

HOME

En aquest tema, aprendrem sobre les rutes nomenades en Flutter, una manera eficient i organitzada de gestionar la navegació entre pantalles en una aplicació Flutter. Les rutes nomenades permeten definir i utilitzar noms per a les diferents pantalles, facilitant la navegació i el manteniment del codi.

Què són les Rutes Nomenades?

Les rutes nomenades són una manera de definir les rutes de navegació utilitzant noms en lloc de referències directes a les pantalles. Això permet una navegació més clara i fàcil de mantenir, especialment en aplicacions grans amb moltes pantalles.

Avantatges de les Rutes Nomenades

Claredat: Els noms de les rutes fan que el codi sigui més llegible.
Mantenibilitat: És més fàcil actualitzar i gestionar les rutes en un sol lloc.
Flexibilitat: Permet passar dades entre pantalles de manera més senzilla.

Configuració de les Rutes Nomenades

Pas 1: Definir les Rutes

Primer, definim les rutes en el fitxer principal de l'aplicació (main.dart). Utilitzem un mapa (Map<String, WidgetBuilder>) per associar els noms de les rutes amb els constructors de les pantalles.

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');
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back'),
        ),
      ),
    );
  }
}

Pas 2: Navegar Utilitzant les Rutes Nomenades

Per navegar a una ruta nomenada, utilitzem el mètode Navigator.pushNamed i passem el context i el nom de la ruta.

Navigator.pushNamed(context, '/second');

Per tornar a la pantalla anterior, utilitzem el mètode Navigator.pop.

Navigator.pop(context);

Passar Dades Entre Pantalles

Podem passar dades entre pantalles utilitzant les rutes nomenades. Això es fa passant arguments a la ruta.

Pas 1: Definir Arguments

Definim una classe per als arguments que volem passar.

class ScreenArguments {
  final String title;
  final String message;

  ScreenArguments(this.title, this.message);
}

Pas 2: Passar Arguments

Quan naveguem a la ruta, passem els arguments utilitzant la propietat arguments.

Navigator.pushNamed(
  context,
  '/second',
  arguments: ScreenArguments(
    'Hello',
    'This is a message from the first screen',
  ),
);

Pas 3: Rebre Arguments

A la pantalla de destinació, rebem els arguments utilitzant el mètode ModalRoute.of(context).settings.arguments.

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

    return Scaffold(
      appBar: AppBar(
        title: Text(args.title),
      ),
      body: Center(
        child: Text(args.message),
      ),
    );
  }
}

Exercici Pràctic

Objectiu

Crear una aplicació Flutter amb dues pantalles. La primera pantalla ha de tenir un botó que navegui a la segona pantalla passant un missatge. La segona pantalla ha de mostrar aquest missatge i tenir un botó per tornar a la primera pantalla.

Solució

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: ScreenArguments(
                'Hello',
                'This is a message from the first screen',
              ),
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

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

    return Scaffold(
      appBar: AppBar(
        title: Text(args.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(args.message),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Go back'),
            ),
          ],
        ),
      ),
    );
  }
}

class ScreenArguments {
  final String title;
  final String message;

  ScreenArguments(this.title, this.message);
}

Resum

En aquest tema, hem après a utilitzar les rutes nomenades en Flutter per gestionar la navegació entre pantalles de manera eficient. Hem vist com definir rutes, navegar utilitzant noms de rutes i passar dades entre pantalles. Les rutes nomenades fan que el codi sigui més clar i fàcil de mantenir, especialment en aplicacions grans.

Rutes Nomenades

Què són les Rutes Nomenades?

Avantatges de les Rutes Nomenades

Configuració de les Rutes Nomenades

Pas 1: Definir les Rutes

Pas 2: Navegar Utilitzant les Rutes Nomenades

Passar Dades Entre Pantalles

Pas 1: Definir Arguments

Pas 2: Passar Arguments

Pas 3: Rebre Arguments

Exercici Pràctic

Objectiu

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