Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.
Ara crearem un botó que permeti passar a la pantalla següent; tindrà les vores arrodonides i la mateixa amplada que el rectangle on es mostra el color, ja que es situarà sota d'aquest. Aparentment, un botó no és gran cosa i sembla que el podríem posar directament a la pantalla principal; però haurem de fer servir alguns ginys per donar-li les característiques desitjades, de manera que es justifica el fet de posar-lo en un fitxer apart.
El primer que farem serà crear, dins de la carpeta components, el fitxer boto_seguir.dart. En aquest fitxer hi posarem un giny amb estat que anomenarem BotoSeguir. De moment, farem només la part visual del botó; més endavant ja li afegirem les variables i funcions.
L'element base serà un botó elevat amb les vores arrodonides i el color primari com a fons; amb un text a dins. Però aquest botó tindrà l'amplada del text; per donar-li tota l'amplada, el posarem dins d'una caixa. Amb això, el botó s'enganxaria als costats i a baix, per això l'hem posat dins d'un farciment.
boto_seguir.dart
import 'package:flutter/material.dart'; import 'package:selector_color/core/colors.dart'; import 'package:selector_color/core/estils.dart';
class BotoSeguir extends StatefulWidget {
const BotoSeguir({super.key});
@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: () {},
style: ButtonStyle(
shape: WidgetStateProperty.all(
RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
),
backgroundColor: WidgetStateProperty.all(ColorsApp.primari),
),
child: Text("Continuar...", style: Estils.estilTextBotons),
),
),
);
}
}
Cal afegir aquest element a la pantalla principal.
...
MostraColor(compColor: valors),
BotoSeguir(),
...
Ja tenim el botó; però, de moment, no fa res. Abans de continuar, cal crear la segona pantalla. Començarem per crear, dins de la carpeta screens, el fitxer pant_resultat.dart. En aquest fitxer hi posarem un giny amb estat que anomenarem PantResultat. De moment, en aquesta pantalla hi posarem un text; per tal que no es vegi buida.
pant_resultat.dart
import 'package:flutter/material.dart';
class PantResultat extends StatefulWidget {
const PantResultat({super.key});
@override
State<PantResultat> createState() => _PantResultatState();
}
class _PantResultatState extends State<PantResultat> {
@override
Widget build(BuildContext context) {
return Text("Pantalla de resultats");
}
}
L'acció del botó serà la típica per a un canvi de pantalla.
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 {
const BotoSeguir({super.key});
@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: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => PantResultat()),
);
},
style: ButtonStyle(
shape: WidgetStateProperty.all(
RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
),
backgroundColor: WidgetStateProperty.all(ColorsApp.primari),
),
child: Text("Continuar...", style: Estils.estilTextBotons),
),
),
);
}
}
La segona pantalla ha de rebre les tres components de color que s'han seleccionat a la primera. Per anar pas a pas, farem una versió molt bàsica de la segona pantalla que ens mostri els valors passats; així comprovem que arriben correctament. Per tal que els textos es puguin llegir bé, els donarem un estil; que afegirem al fitxer d'estils.
...
static const TextStyle estilTextNormal = TextStyle(
color: ColorsApp.text,
fontSize: 14,
fontWeight: FontWeight.normal,
);
...
Les components estan en una llista, aquest és el paràmetre que hem de passar. Posarem una columna, amb tres blocs de text. La pantalla de resultats tindrà, provisionalment, aquest contingut:
pant_resultat.dart
import 'package:flutter/material.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 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),
],
);
}
}
Però els valors estan a la pantalla principal i a la pantalla de resultats s'hi arriba prement el botó que està en un giny. Cal modificar el giny del botó perquè rebi els valors i els passi. Podem aprofitar per passar també el text del botó com a paràmetre.
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<double> vals;
final String textBoto;
const BotoSeguir({super.key, required this.vals, required this.textBoto});
@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: () {
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),
),
),
);
}
}
I a la pantalla principal hem d'afegir el pas del paràmetre:
...
BotoSeguir(vals: valors, textBoto: "Continuar..."),
...
Ara ja podem veure com els paràmetres arriben a la segona pantalla.
En aquest punt semblaria raonable anar a definir la mostra de resultats, però no és la millor opció. Si creem ara la mostra de resultats, ens trobarem que cada cop que vulguem provar l'aplicació ens cal reiniciar l'emulador. És preferible definir primer, en la pantalla de resultats, el botó de retorn a la pantalla principal.
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.