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

HOME

La navegació és una part fonamental de qualsevol aplicació mòbil, ja que permet als usuaris moure's entre diferents pantalles i seccions de l'aplicació. En Flutter, la navegació es gestiona mitjançant el sistema de rutes, que permet definir i controlar les transicions entre pantalles.

Conceptes Clau

Rutes: Una ruta és una pantalla o pàgina en l'aplicació. En Flutter, les rutes es gestionen mitjançant el Navigator.
Navigator: El Navigator és un widget que gestiona un conjunt de widgets de rutes amb una pila. Permet afegir, eliminar i substituir rutes en la pila.
MaterialPageRoute: Una implementació comuna de rutes en aplicacions Flutter que utilitzen el disseny Material.

Navegació Bàsica

Afegir una Ruta

Per afegir una nova ruta, primer hem de definir una nova pantalla com un widget. Per exemple, creem una pantalla senzilla anomenada SecondScreen:

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text('This is the second screen'),
      ),
    );
  }
}

Navegar a una Nova Ruta

Per navegar a la SecondScreen, utilitzem el Navigator.push:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

Tornar a la Ruta Anterior

Per tornar a la ruta anterior, utilitzem el Navigator.pop:

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 to First Screen'),
        ),
      ),
    );
  }
}

Exercici Pràctic

Objectiu

Crea una aplicació Flutter amb dues pantalles. La primera pantalla ha de tenir un botó que navegui a la segona pantalla. La segona pantalla ha de tenir un botó que torni 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(
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          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 to First Screen'),
        ),
      ),
    );
  }
}

Errors Comuns i Consells

Oblidar el MaterialApp: Assegura't que la teva aplicació estigui embolicada en un MaterialApp o CupertinoApp per gestionar les rutes correctament.
Ús incorrecte del context: Quan utilitzis el Navigator, assegura't que el context que passes és el correcte. Normalment, és el context del widget actual.
No gestionar correctament la pila de navegació: Recorda que cada vegada que utilitzes Navigator.push, afegeixes una nova ruta a la pila. Utilitza Navigator.pop per eliminar la ruta superior de la pila.

Conclusió

En aquesta secció, hem après els conceptes bàsics de la navegació en Flutter, incloent com afegir rutes, navegar entre pantalles i tornar a la ruta anterior. Aquests conceptes són fonamentals per crear aplicacions mòbils amb múltiples pantalles i una experiència d'usuari fluida. En la següent secció, explorarem la navegació bàsica amb més detall, incloent l'ús de rutes nomenades.

Introducció a la Navegació

Conceptes Clau

Navegació Bàsica

Afegir una Ruta

Navegar a una Nova Ruta

Tornar a la Ruta Anterior

Exercici Pràctic

Objectiu

Solució

Errors Comuns i Consells

Conclusió

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