Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.
Quan vam crear el selector de tensió fèiem servir una variable anomenada tensio que havíem creat dins del giny SelectorTens. El selector funcionava correctament però, en tractar-se d'una variable interna en el giny, no disposàvem del seu valor a la resta de l'aplicació. Atès que aquest valor és necessari per al càlcul de la resistència, caldrà modificar el selector perquè treballi amb una variable de la pantalla principal; tal com hem fet per als elements per a les entrades de dades numèriques.
En el seu moment, el selector de tensió ens havia quedat així:
selector_tens.dart
import 'package:flutter/material.dart';
class SelectorTens extends StatefulWidget {
const SelectorTens({super.key});
@override
State<SelectorTens> createState() => _SelectorTensState();
}
class _SelectorTensState extends State<SelectorTens> {
double tensio = 3.3;
@override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
tensio = 3.3;
});
},
child: Padding(
padding: const EdgeInsets.only(top: 20, bottom: 20, left: 20, right: 10),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: tensio == 3.3 ? ColorsApp.compSelec : ColorsApp.component,
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text("3,3 V", style: Estils.estilTextBotons),
),
),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
tensio = 5.0;
});
},
child: Padding(
padding: const EdgeInsets.only(top: 20, bottom: 20, left: 10, right: 20),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: tensio == 5.0 ? ColorsApp.compSelec : ColorsApp.component,
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text("5,0 V", style: Estils.estilTextBotons),
),
),
),
),
),
],
);
}
}
I la pantalla principal la teníem així:
pant_principal.dart
import 'package:flutter/material.dart';
class PantPral extends StatefulWidget {
const PantPral({super.key});
@override
State<PantPral> createState() => _PantPralState();
}
class _PantPralState extends State<PantPral> {
double caigudaTens = 1.6; // V
double correntNom = 10; // mA
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(),
Padding(
padding: const EdgeInsets.only(left: 20, right: 20),
child: Row(
children: [
Expanded(
child: EntraNum(
titol: "Caiguda de tensió",
valor: caigudaTens.toStringAsFixed(1).replaceAll('.', ','),
incrementar: () {
setState(() {
if (caigudaTens < maxCaig) {caigudaTens += 0.1;}
});
},
decrementar: () {
setState(() {
if (caigudaTens > minCaig) {caigudaTens -= 0.1;}
});
},
),
),
SizedBox(width: 20),
Expanded(
child: EntraNum(
titol: "Corrent nominal",
valor: correntNom.toStringAsFixed(0),
incrementar: () {
setState(() {
if (correntNom < maxCorr) {correntNom++;}
});
},
decrementar: () {
setState(() {
if (correntNom > minCorr) {correntNom--;}
});
},
),
),
],
),
),
],
);
}
}
Podem observar que l'accés al selector de tensió és una crida simple.
En la pantalla principal, haurem de crear la variable global i definir la funció que s'executarà quan es premi un dels botons del selector.
...
class _PantPralState extends State<PantPral> {
double tensAlim = 3.3; // V
double caigudaTens = 1.6; // V
double correntNom = 10; // mA
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;
});
},
),
Padding(
padding: const EdgeInsets.only(left: 20, right: 20),
child: Row(
children: [
Expanded(
child: EntraNum(
titol: "Caiguda de tensió",
valor: caigudaTens.toStringAsFixed(1).replaceAll('.', ','),
incrementar: () {
setState(() {
if (caigudaTens < maxCaig) {caigudaTens += 0.1;}
});
},
decrementar: () {
setState(() {
if (caigudaTens > minCaig) {caigudaTens -= 0.1;}
});
},
),
),
SizedBox(width: 20),
Expanded(
child: EntraNum(
titol: "Corrent nominal",
valor: correntNom.toStringAsFixed(0),
incrementar: () {
setState(() {
if (correntNom < maxCorr) {correntNom++;}
});
},
decrementar: () {
setState(() {
if (correntNom > minCorr) {correntNom--;}
});
},
),
),
],
),
),
],
);
}
}
Hem anomenat tensAlim a la variable global que tindrà sempre el valor corresponent a la tensió d'alimentació. El selector de tensió tindrà un paràmetre tensioAlim al qual li passarem aquest valor, ja que el necessitem per saber quin dels dos botons ha d'estar marcat. Quan l'usuari premi un dels botons del selector, s'executarà la funció canviTens que està definida a la pantalla principal. Aquesta funció retorna el valor novaTensio que passarà a substituir el que hi havia a tensAlim.
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> {
double tensio = 3.3;
@override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
widget.canviTens(3.3);
});
},
child: Padding(
padding: const EdgeInsets.only(top: 20, bottom: 20, left: 20, right: 10),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: widget.tensioAlim == 3.3 ? ColorsApp.compSelec : ColorsApp.component,
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text("3,3 V", style: Estils.estilTextBotons),
),
),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
widget.canviTens(5.0);
});
},
child: Padding(
padding: const EdgeInsets.only(top: 20, bottom: 20, left: 10, right: 20),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: widget.tensioAlim == 5.0 ? ColorsApp.compSelec : ColorsApp.component,
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text("5,0 V", style: Estils.estilTextBotons),
),
),
),
),
),
],
);
}
}
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.