Aplicacions amb Flutter, Dart i Flame

Pantalles i canvi de pantalla

Les pantalles no són elements en si mateixos però per gestionar diverses pantalles o vistes ens caldrà crear un giny per a cada una, que normalment serà un giny amb estat. Per exemple, si l'element principal de la pantalla és una columna:

pant_principal.dart

import 'package:flutter/material.dart';

class PantPrincipal extends StatefulWidget {
  const PantPrincipal({super.key});

  @override
  State<PantPrincipal> createState() => _PantPrincipalState();
}

class _PantPrincipalState extends State<PantPrincipal> {
  @override
  Widget build(BuildContext context) {
    return Column(
      ...
    );
  }
}

En aplicacions amb una sola pantalla, no és estrany que l'esquelet estigui en el programa principal (MainApp) però en aplicacions amb diverses pantalles és més raonable que estigui a la pantalla principal.

pant_resultat.dart

import 'package:flutter/material.dart';

class PantResultat extends StatelessWidget {
  const PantResultat({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
      ...
      ),
    );
  }
}

El fet que hi hagi l'esquelet ens permet posar-hi una barra de l'aplicació i ens facilita definir un color de fons.

Canvi de pantalla

Per passar d'una pantalla a una altra cal, d'entrada, tenir dos ginys de pantalla, en els seus respectius fitxers. Imaginem que tenim PantPral (al fitxer pant_principal.dart) i PantResultat al fitxer (pant_resultat.dart). Segurament tindrem un botó que farà el canvi de pantalla. En una de les accions del botó (típicament a onPressed hi haurem de posar un tros de programa que sempre és el mateix, excepte el nom de la pantalla de destí.

...
          onPressed: () {
            Navigator.push(context, 
            MaterialPageRoute(builder: (context) => PantResultat()));
          },
...

L'acció es podria posar amb la forma desenvolupada, en lloc de la compacta:

...
          onPressed: () {
            Navigator.push(context, 
            MaterialPageRoute(builder: (context) {return PantResultat()}));
          },
...

El pas de paràmetres d'una pantalla a una altra es fa de la mateixa manera que amb qualsevol altre giny.

Per retornar a la pantalla anterior és més senzill:

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

No s'ha de tornar enrere amb push, és probable que ens doni problemes.

En aquest apartat, que correspon a l'exemple de triar un color es pot veure com canviar de pantalla i passar paràmetres. En aquest altre apartat del mateix exemple hi ha un botó de retorn.

Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.