Aplicacions amb Flutter, Dart i Flame

Pantalla de resultats

La segona pantalla tenia, de moment, un contingut bàsic. Anem a donar-li forma.

Atès que és una pantalla, el normal és que tingui un esquelet, això ens ajudarà a que la navegació sigui més ràpida; però, a més, ens permetrà posar-li una barra de l'aplicació. En l'esquelet ja posarem també un color de fons, que serà el mateix que a la pantalla principal.

pant_resultat.dart

import 'package:flutter/material.dart';
import 'package:selector_color/components/boto_seguir.dart';
import 'package:selector_color/core/colors.dart';
import 'package:selector_color/core/estils.dart';

class PantResultat extends StatefulWidget {
  final List<double> compon;
  const PantResultat({super.key, required this.compon});
  @override
  State<PantResultat> createState() => _PantResultatState();
}

class _PantResultatState extends State<PantResultat> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Color triat"),
        backgroundColor: ColorsApp.primari,
        foregroundColor: ColorsApp.text,
      ),
      backgroundColor: ColorsApp.fons,
      body: Column(
        children: [
          Text(widget.compon[0].toStringAsFixed(0), style: Estils.estilTextNormal),
          Text(widget.compon[1].toStringAsFixed(0), style: Estils.estilTextNormal),
          Text(widget.compon[2].toStringAsFixed(0), style: Estils.estilTextNormal),
          BotoSeguir(vals: [0, 0, 0], textBoto: "Tornar", retorn: true),
        ],
      ),
    );
  }
}

Si ara provem l'aplicació amb l'emulador, observarem que a la barra de l'aplicació ens hi apareix també un botó per anar enrere. En tot cas, en les aplicacions on tornar enrere estigui contemplat com una acció habitual, és convenient afegir un botó específic en un lloc destacat.

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