Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.
Anem a crear l'espai on es veuran els resultats numèricament. Dins de la carpeta components crearem el fitxer mostra_valors.dart. Atès que hi haurà paràmetres variables, crearem un giny amb estat que anomenarem MostraValors.
Anem a crear el contenidor on es mostrarà el text dels resultats. De moment, hi posarem un text de prova. El contenidor ens permetrà definir un color de fons i unes vores arrodonides; però, per evitar que el text quedi massa proper a les vores del contenidor, hi posarem un farciment entre el contenidor i el text. El contenidor anirà dins d'un altre farciment, per evitar que s'enganxi a les vores de la pantalla.
mostra_valors.dart
import 'package:flutter/material.dart'; import 'package:selector_color/core/colors.dart'; import 'package:selector_color/core/estils.dart';
class MostraValors extends StatefulWidget {
const MostraValors({super.key});
@override
State<MostraValors> createState() => _MostraValorsState();
}
class _MostraValorsState extends State<MostraValors> {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 20, left: 20, right: 20),
child: Container(
width: double.infinity,
alignment: Alignment.center,
decoration: BoxDecoration(color: ColorsApp.primari,
borderRadius: BorderRadius.circular(12)),
child: Padding(
padding: const EdgeInsets.all(12),
child: Text("Aquí aniran els resultats",
style: Estils.estilTextNormal),
),
),
);
}
}
A la pantalla de resultats, haurem de cridar aquest giny.
body: Column(
children: [
MostraValors(),
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),
BotoSeguir(vals: [0, 0, 0], textBoto: "Tornar", retorn: true),
],
),
En el requadre que acabem de crear hi volem posar quatre textos que mostraran, respectivament, el color triat en format ARGB, el color triat en format hexadecimal i el color complementari del triat en els mateixos dos formats. Els valors que ens arriben de la pantalla anterior són reals i ens caldrà canviar-los de format, per poder-los escriure on toca. Per fer-ho d'una manera fàcil i ordenada, crearem el fitxer funcions.dart dins de la carpeta core. Alguna d'aquestes funcions encara no la necessitem, però així ja les tenim totes definides.
funcions.dart
import 'dart:ui';
// Converteix una llista de tres reals en una de tres enters
List<int> intRGBfromDouble(List<double> rebut){
List<int> resposta = [0, 0, 0];
for(int i = 0; i < 3; i++){
resposta[i] = rebut[i].toInt();
}
return resposta;
}
// Agafa una llista de tres enters que codifiquen un color i
// en genera el color corresponent
Color colFromList(List<int> rebut){
return Color.fromARGB(255, rebut[0], rebut[1], rebut[2]);
}
// Agafa una llista de tres enters que codifiquen un color i
// en genera una nova amb el color complementari
List<int> intRGBCompl(List<int> rebut){
List<int> resposta = [0, 0, 0];
for(int i = 0; i < 3; i++){
resposta[i] = 255 - rebut[i];
}
return resposta;
}
// Genera un text que representa un vector de tres components
// a partir d'una llista entera de tres components
// Resultat: (R, G, B)
String txtListFromInt(List<int> rebut){
String resposta = "(";
for(int i = 0; i < 3; i++){
if(i > 0){ // Posem la coma entre components
resposta += ", ";
}
resposta += rebut[i].toString();
}
resposta += ")";
return resposta;
}
// Genera un text amb la codificació hexadecimal d'un color
// a partir d'una llista d'enters que el representen
// Resultat: 0xRRGGBB
String hexFromInt(List<int> rebut){
String resposta = "0x";
for(int i = 0; i < 3; i++){
String prov = rebut[i].toRadixString(16);
if(prov.length == 1){
resposta += "0"; // Forcem que tingui dos dígits
}
resposta += prov.toUpperCase();
}
return resposta;
}
Un cop tenim les funcions, escriure els resultats és relativament senzill. Recordem que volem escriure quatre textos que mostraran, respectivament, el color triat en format ARGB, el color triat en format hexadecimal i el color complementari del triat en els mateixos dos formats. Aquests quatre valors els calcularem a la pantalla de resultats i els passarem com a paràmetres.
mostra_valors.dart
import 'package:flutter/material.dart'; import 'package:selector_color/core/colors.dart'; import 'package:selector_color/core/estils.dart';
class MostraValors extends StatefulWidget {
final String txtRGB;
final String hexRGB;
final String txtRGBcomp;
final String hexRGBcomp;
const MostraValors({super.key, required this.txtRGB, required this.hexRGB,
required this.txtRGBcomp, required this.hexRGBcomp});
@override
State<MostraValors> createState() => _MostraValorsState();
}
class _MostraValorsState extends State<MostraValors> {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 20, left: 20, right: 20),
child: Container(
width: double.infinity,
alignment: Alignment.center,
decoration: BoxDecoration(
color: ColorsApp.primari,
borderRadius: BorderRadius.circular(12)
),
child: Padding(
padding: const EdgeInsets.all(12),
child: Column(
children: [
Text("El color és ${widget.txtRGB}", style: Estils.estilTextNormal),
Text("En hexadecimal és ${widget.hexRGB}", style: Estils.estilTextNormal),
SizedBox(height: 12,),
Text("El complementari és ${widget.txtRGBcomp}", style: Estils.estilTextNormal),
Text("En hexadecimal és ${widget.hexRGBcomp}", style: Estils.estilTextNormal),
SizedBox(height: 12,),
Text("Mira la combinació en el requadre següent", style: Estils.estilTextNormal),
],
),
),
),
);
}
}
A la pantalla de resultats caldrà calcular i passar els parèmetres; podem aprofitar per eliminar els textos que hi teníem, ja que deixen de ser necessaris.
pant_resultat.dart
import 'package:flutter/material.dart'; import 'package:selector_color/components/boto_seguir.dart'; import 'package:selector_color/components/mostra_valors.dart'; import 'package:selector_color/core/colors.dart'; import 'package:selector_color/core/funcions.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) {
List<int> colorIntRGB = intRGBfromDouble(widget.compon);
return Scaffold(
appBar: AppBar(
title: Text("Color triat"),
backgroundColor: ColorsApp.primari,
foregroundColor: ColorsApp.text,
),
backgroundColor: ColorsApp.fons,
body: Column(
children: [
MostraValors(
txtRGB: txtListFromInt(colorIntRGB),
hexRGB: hexFromInt(colorIntRGB),
txtRGBcomp: txtListFromInt(intRGBCompl(colorIntRGB)),
hexRGBcomp: hexFromInt(intRGBCompl(colorIntRGB)),
),
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.