Aplicacions amb Flutter, Dart i Flame

Fer els botons del selector de tensió amb elements reutilitzables

Els dos botons del selector de tensió són formalment idèntics. Les úniques diferències són dues: l'etiqueta de cada un i la funció que executa. Podríem crear un element genèric amb totes les característiques visuals d'un botó i fer que el selector de tensió cridi aquest element i implementi la funció.

Començarem creant un nou fitxer botons_sel.dart i hi posarem el farciment i tot el seu contingut. Aquest giny tindrà dues variables, una per a la tensió d'alimentació, que farem servir per saber si s'ha de marcar o no el botó, i una amb l'etiqueta que s'ha de posar en el botó. En el cas de l'etiqueta, hem optat per fer servir una variable real; així ens servirà també de referència de comparació a l'hora d'assignar el color del botó. El fet que aquesta variable sigui real implicarà que caldrà convertir-la a text (amb el número de decimals i la coma corresponents) i afegir-li les unitats.

botons_sel.dart

import 'package:flutter/material.dart';
import 'package:resistled_app/core/colors.dart';
import 'package:resistled_app/core/estils.dart';

class BotonsSel extends StatefulWidget {
  final double tensAct;
  final double etiqueta;
  const BotonsSel({super.key, required this.tensAct, required this.etiqueta});

  @override
  State<BotonsSel> createState() => _BotonsSelState();
}

class _BotonsSelState extends State<BotonsSel> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 20, bottom: 20, left: 20, right: 10),
      child: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: widget.tensAct == widget.etiqueta
              ? ColorsApp.compSelec
              : ColorsApp.component,
          borderRadius: BorderRadius.circular(12),
        ),
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Text(
            "${widget.etiqueta.toStringAsFixed(1).replaceAll('.', ',')} V",
            style: Estils.estilTextBotons,
          ),
        ),
      ),
    );
  }
}

Ara el contingut del fitxer selector_tens.dart quedarà més senzill, ja que només contindrà la filera i els detector d'accions dels dos botons.

selector_tens.dart

import 'package:flutter/material.dart';
import 'package:resistled_app/components/botons_sel.dart';

class SelectorTens extends StatefulWidget {
  final double tensioAlim;
  final Function(double novaTens) canviTens;
  const SelectorTens({
    super.key,
    required this.tensioAlim,
    required this.canviTens,
  });

  @override
  State<SelectorTens> createState() => _SelectorTensState();
}

class _SelectorTensState extends State<SelectorTens> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: GestureDetector(
            onTap: () {
              setState(() {
                widget.canviTens(3.3);
              });
            },
            child: BotonsSel(tensAct: widget.tensioAlim, etiqueta: 3.3),
          ),
        ),
        Expanded(
          child: GestureDetector(
            onTap: () {
              setState(() {
                widget.canviTens(5.0);
              });
            },
            child: BotonsSel(tensAct: widget.tensioAlim, etiqueta: 5),
          ),
        ),
      ],
    );
  }
}

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