Aplicacions amb Flutter, Dart i Flame

Creació d'un element on mostrar el color triat

Ara crearem un element on es mostri el color que s'està ajustant amb els cursors. Hem decidit posar un rectangle amb les vores arrodonides que situarem a la part inferior de la pantalla, ocupant tot l'espai disponible.

El primer que farem serà crear, dins de la carpeta components, el fitxer mostra_color.dart. En aquest fitxer hi posarem un giny amb estat que anomenarem MostraColor.

L'element on mostrarem el color serà un contenidor, ja que se li pot definir un color de fons i unes vores arrodonides. Aquest contenidor el deixarem buit, ja que el nostre objectiu és mostrar el color. Per defecte, el contenidor s'adapta al contingut i, per tant, no es veuria; per això li hem donat una amplada infinita, el que implica que ocuparà tot l'ample disponible. Però no volem que arribi fins a la vora de la pantalla, per això l'hem posat dins d'un farciment. Finalment, per a que ocupi tota l'alçada disponible, l'hem situat dins d'un bloc d'expandir.

Les components del color que cal mostrar les passarem, en forma de llista, des de la pantalla principal. El color del contenidor el creem a partir de les components ARGB, posant l'alpha a 255 (no volem transparència) i les altres components segons el valor seleccionat als cursors. ELs cursors treballen amb reals i les components han de ser enteres; per això cal fer la corresponent conversió.

mostra_color.dart

import 'package:flutter/material.dart';

class MostraColor extends StatefulWidget {
  final List<double> compColor;
  const MostraColor({super.key, required this.compColor});

  @override
  State<MostraColor> createState() => _MostraColorState();
}

class _MostraColorState extends State<MostraColor> {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.only(bottom: 20, left: 20, right: 20),
        child: Container(
          width: double.infinity,
          decoration: BoxDecoration(
            color: Color.fromARGB(
              255,
              widget.compColor[0].toInt(),
              widget.compColor[1].toInt(),
              widget.compColor[2].toInt(),
            ),
            borderRadius: BorderRadius.circular(12),
          ),
        ),
      ),
    );
  }
}

Cal afegir aquest element a la pantalla principal.

...
    body: Column(
      children: [
        Cursor(
          titol: "Vermell:", valor: valors[0], colCurs: ColorsApp.colCursors[0],
          siCanvia: (nouValor) {
            setState(() {valors[0] = nouValor;});
          },
        ),
        Cursor(
          titol: "Verd:", valor: valors[1], colCurs: ColorsApp.colCursors[1],
          siCanvia: (nouValor) {
            setState(() {valors[1] = nouValor;});
          },
        ),
        Cursor(
          titol: "Blau:", valor: valors[2], colCurs: ColorsApp.colCursors[2],
          siCanvia: (nouValor) {
            setState(() {valors[2] = nouValor;});
          },
        ),
        MostraColor(compColor: valors),
      ],
    ),
...

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