Aplicacions amb Flutter, Dart i Flame

Afegim les unitats a les dades d'entrada

De moment, quan entrem les dades numèriques (caiguda de tensió i corrent nominal) posem només un valor, però caldria especificar quines són les unitats. Anem a modificar l'aplicació per indicar-ho.

Primerament modificarem l'element EntraNum, afegint-li un nou paràmetre que servirà per indicar les unitats. Després, modificarem la visualització del valor per tal que mostri també les unitats, amb el preceptiu espai en blanc de separació.

entra_num.dart

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

class EntraNum extends StatefulWidget {
  final String titol;
  final String valor;
  final String unitats;
  final Function() incrementar;
  final Function() decrementar;
  const EntraNum({
    super.key,
    required this.titol,
    required this.valor,
    required this.unitats,
    required this.incrementar,
    required this.decrementar,
  });

  @override
  State<EntraNum> createState() => _EntraNumState();
}

class _EntraNumState extends State<EntraNum> {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: ColorsApp.component,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(widget.titol, style: Estils.estilTextTitols),
            Text('${widget.valor} ${widget.unitats}', style: Estils.estilTextValors),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  decoration: DecoraApp.decorBotons,
                  child: IconButton(
                    onPressed: () {
                      widget.decrementar();
                    },
                    icon: Icon(Icons.remove),
                    color: ColorsApp.text,
                  ),
                ),
                SizedBox(width: 15),
                Container(
                  decoration: DecoraApp.decorBotons,
                  child: IconButton(
                    onPressed: () {
                      widget.incrementar();
                    },
                    icon: Icon(Icons.add),
                    color: ColorsApp.text,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

A la pantalla principal caldrà afegir el paràmetre corresponent i indicar les unitats (V o mA, segons el cas).

pant_principal.dart

import 'package:flutter/material.dart';
import 'package:resistled_app/components/boto_calc.dart';
import 'package:resistled_app/components/entra_num.dart';
import 'package:resistled_app/components/req_result.dart';
import 'package:resistled_app/components/selector_tens.dart';

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

  @override
  State<PantPral> createState() => _PantPralState();
}

class _PantPralState extends State<PantPral> {
  double tensAlim = 3.3; // V
  double caigudaTens = 1.6; // V
  double correntNom = 10; // mA
  double resisten = -1;
  String txt = "";
  final double maxCaig = 3.3;
  final double minCaig = 0.4;
  final double maxCorr = 50.0;
  final double minCorr = 1.0;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SelectorTens(
          tensioAlim: tensAlim,
          canviTens: (double novaTensio) {
            setState(() {
              tensAlim = novaTensio;
              resisten = -1;
            });
          },
        ),
        Padding(
          padding: const EdgeInsets.only(left: 20, right: 20),
          child: Row(
            children: [
              Expanded(
                child: EntraNum(
                  titol: "Caiguda de tensió",
                  valor: caigudaTens.toStringAsFixed(1).replaceAll('.', ','),
                  unitats: "V",
                  incrementar: () {
                    setState(() {
                      if (caigudaTens < maxCaig) {
                        caigudaTens += 0.1;
                        resisten = -1;
                      }
                    });
                  },
                  decrementar: () {
                    setState(() {
                      if (caigudaTens > minCaig) {
                        caigudaTens -= 0.1;
                        resisten = -1;
                      }
                    });
                  },
                ),
              ),
              SizedBox(width: 20),
              Expanded(
                child: EntraNum(
                  titol: "Corrent nominal",
                  valor: correntNom.toStringAsFixed(0).replaceAll('.', ','),
                  unitats: "mA",
                  incrementar: () {
                    setState(() {
                      if (correntNom < maxCorr) {
                        correntNom++;
                        resisten = -1;
                      }
                    });
                  },
                  decrementar: () {
                    setState(() {
                      if (correntNom > minCorr) {
                        correntNom--;
                        resisten = -1;
                      }
                    });
                  },
                ),
              ),
            ],
          ),
        ),
        BotoCalc(
          calcRes: () {
            setState(() {
              resisten = (tensAlim - caigudaTens) / (correntNom / 1000);
            });
          },
        ),
        ReqResult(resistencia: resisten),
      ],
    );
  }
}

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