El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Navegació Bàsica

Següent ►
►

La navegació és una part fonamental de qualsevol aplicació mòbil, ja que permet als usuaris moure's entre diferents pantalles o seccions de l'aplicació. En Flutter, la navegació es gestiona mitjançant el Navigator i les rutes. En aquesta secció, aprendrem els conceptes bàsics de la navegació en Flutter i com implementar-la en les nostres aplicacions.

Conceptes Clau

  1. Navigator: És una pila de widgets que gestiona l'historial de navegació de l'aplicació.
  2. Rutes: Són les diferents pantalles o pàgines de l'aplicació. Cada ruta és un widget que es mostra quan es navega a aquesta ruta.
  3. MaterialPageRoute: És una implementació de ruta que utilitza una transició de pàgina de material design.

Navegació Bàsica amb Navigator

Pujar una Nova Pàgina

Per navegar a una nova pàgina, utilitzem el mètode Navigator.push. Aquest mètode afegeix una nova ruta a la pila de navegació.

import 'package:flutter/material.dart';

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

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

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Primera Pàgina'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Anar a la Segona Pàgina'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Segona Pàgina'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Tornar a la Primera Pàgina'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Explicació del Codi

  1. MaterialApp: És el widget principal de l'aplicació que configura el tema i la navegació.
  2. FirstPage: És la primera pàgina de l'aplicació. Conté un botó que, quan es prem, navega a la SecondPage.
  3. SecondPage: És la segona pàgina de l'aplicació. Conté un botó que, quan es prem, torna a la FirstPage utilitzant Navigator.pop.

Tornar a la Pàgina Anterior

Per tornar a la pàgina anterior, utilitzem el mètode Navigator.pop. Aquest mètode elimina la ruta superior de la pila de navegació i mostra la ruta anterior.

onPressed: () {
  Navigator.pop(context);
}

Exercicis Pràctics

Exercici 1: Navegació entre Tres Pàgines

Crea una aplicació amb tres pàgines. La primera pàgina ha de tenir un botó per anar a la segona pàgina, la segona pàgina ha de tenir un botó per anar a la tercera pàgina, i la tercera pàgina ha de tenir un botó per tornar a la primera pàgina.

Solució

import 'package:flutter/material.dart';

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

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

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Primera Pàgina'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Anar a la Segona Pàgina'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Segona Pàgina'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Anar a la Tercera Pàgina'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => ThirdPage()),
            );
          },
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tercera Pàgina'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Tornar a la Primera Pàgina'),
          onPressed: () {
            Navigator.popUntil(context, (route) => route.isFirst);
          },
        ),
      ),
    );
  }
}

Explicació del Codi

  1. Navigator.popUntil: Aquest mètode elimina les rutes de la pila fins que es compleixi la condició especificada. En aquest cas, elimina les rutes fins que arribi a la primera ruta.

Resum

En aquesta secció, hem après els conceptes bàsics de la navegació en Flutter utilitzant el Navigator i les rutes. Hem vist com navegar a una nova pàgina amb Navigator.push i com tornar a la pàgina anterior amb Navigator.pop. També hem practicat aquests conceptes amb un exercici pràctic. En la següent secció, explorarem les rutes nomenades per gestionar la navegació de manera més eficient.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats