Aplicacions amb Flutter, Dart i Flame

Mostrem el contrast de colors

Anem a crear l'espai on es veurà el color triat en contrast amb el seu complementari. Dins de la carpeta components crearem el fitxer mostra_contrast.dart. Atès que hi haurà paràmetres variables, crearem un giny amb estat que anomenarem MostraContrast. Aquest giny tindrà dos paràmetres, corresponents al color triat i al seu complementari.

L'element on mostrarem el color tindrà, de moment, un disseny molt semblant al que mostrava el color a la pantalla principal; En concret, serà un contenidor, ja que se li pot definir un color de fons i unes vores arrodonides. De moment en aquest contenidor el deixarem buit. Per defecte, el contenidor s'adapta al contingut i, per tant, quedaria molt petit; 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.

mostra_contrast.dart

import 'package:flutter/material.dart';

class MostraContrast extends StatefulWidget {
  final Color colTriat;
  final Color colCompl;
  const MostraContrast({super.key, required this.colTriat, required this.colCompl});

  @override
  State<MostraContrast> createState() => _MostraContrastState();
}

class _MostraContrastState extends State<MostraContrast> {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Container(width: double.infinity,
          alignment: Alignment.center,
          decoration: BoxDecoration(color: widget.colTriat,
            borderRadius: BorderRadius.circular(12),
          ),
        ),
      ),
    );
  }
}

A la pantalla de resultats caldrà calcular i passar els parèmetres.

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/components/mostra_contrast.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);
    Color colorTriat = colFromList(colorIntRGB);
    Color colorComp = colFromList(intRGBCompl(colorIntRGB));
    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)),
          ),
          MostraContrast(colTriat: colorTriat, colCompl: colorComp),
          BotoSeguir(vals: [0, 0, 0], textBoto: "Tornar", retorn: true),
        ],
      ),
    );
  }
}

Ara tenim un rectangle que mostra el color triat. Per poder veure el contrast entre el color i el seu complementari, posarem un altre rectangle dins del primer; per tal que quedi centrat verticalment, hi posarem un parell d'espaiadors.

...
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Container(width: double.infinity,
          alignment: Alignment.center,
          decoration: BoxDecoration(color: widget.colTriat,
            borderRadius: BorderRadius.circular(12),
          ),
          child: Column(
            children: [
              Spacer(),
              Container(width: 200, height: 150,
                alignment: Alignment.center,
                decoration: BoxDecoration(color: widget.colCompl,
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
              Spacer(),
            ],
          ),
        ),
      ),
    );
...

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