Aplicacions amb Flutter, Dart i Flame

Botó de retorn

Encara que, amb el que tenim ara, els resultats es mostren d'una forma poc professional; definirem primer el botó de retorn, per poder tornar enrere a triar un nou color, quan fem proves. Aquest botó tindrà un aspecte similar al del botó que hem creat a la pantalla principal; per tant, el reutilitzarem.

El text del botó el podem posar fàcilment, ja que l'havíem posat com a paràmetre. El botó també tenia un paràmetre amb les components del color que ara no serviran per a res (atès que la pantalla principal no les necessita) i, per tant, hi podrem posar valors arbitraris. Ens faltarà canviar el comportament del botó. Atès que només anem endavant i endarrere (dues opcions), el més senzill, probablement, serà fer servir un paràmetre booleà.

boto_seguir.dart

import 'package:flutter/material.dart';
import 'package:selector_color/core/colors.dart';
import 'package:selector_color/core/estils.dart';
import 'package:selector_color/screens/pant_resultat.dart';

class BotoSeguir extends StatefulWidget {
  final List vals;
  final String textBoto;
  final bool retorn;
  const BotoSeguir({super.key, required this.vals, required this.textBoto, required this.retorn});

  @override
  State<BotoSeguir> createState() => _BotoSeguirState();
}

class _BotoSeguirState extends State<BotoSeguir> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 20, right: 20, bottom: 40),
      child: SizedBox(
        width: double.infinity,
        child: ElevatedButton(
          onPressed: () {
            if(widget.retorn){
              Navigator.pop(context);
            } else {
              Navigator.push(context, 
              MaterialPageRoute(builder: (context) => PantResultat(compon: widget.vals)));
            }
          },
          style: ButtonStyle(
            shape: WidgetStateProperty.all(
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
            ),
            backgroundColor: WidgetStateProperty.all(ColorsApp.primari),
          ),
          child: Text(widget.textBoto, style: Estils.estilTextBotons),
        ),
      ),
    );
  }
}

A la pantalla principal faltarà afegir el nou paràmetre:

...
        BotoSeguir(vals: valors, textBoto: "Continuar...", retorn: false),
...

Ens falta afegir el botó a la pantalla de resultats:

pant_resultat.dart

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

class PantResultat extends StatelessWidget {
  final List<double> compon;
  const PantResultat({super.key, required this.compon});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(compon[0].toStringAsFixed(0), style: Estils.estilTextNormal),
        Text(compon[1].toStringAsFixed(0), style: Estils.estilTextNormal),
        Text(compon[2].toStringAsFixed(0), style: Estils.estilTextNormal),
        BotoSeguir(vals: [0, 0, 0], textBoto: "Tornar", retorn: true),
      ],
    );
  }
}

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