Hi ha elements dels quals podem definir algun color. Per exemple, aquí definim el color de fons d'un contenidors:
class Columna extends StatelessWidget {
const Columna({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 400,
color: Colors.lightBlue,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: [
Text("Primera línia de text"),
Text("Segona línia de text"),
Text("Tercera línia de text"),
],
),
);
}
}
Quan escrivim Colors., ens surten un munt d'opcions, corresponents a colors predefinits. En molts casos, el més pràctic és triar-ne algun d'aquests.
Un cop triat un color, ens apareixerà un quadrat que ens mostra com és el color que hem escollit. Si volem un color més personalitzat, posant el cursor sobre aquest quadrat, es mostra una finestra on podem triar el color que desitgem. En la barra de la dreta podem triar la tonalitat i en el rectangle tenim, per aquell to, totes les opcions de lluminositat i saturació.
Un cop triat el color, ens sortiran els seus valors en format ARGB, amb valors entre 0 i 255. El format ARGB consta de quatre components: alpha indica la transparència (0 és totalment transparent i 255 és completament opac) i el contingut de vermell, verd i blau.
En lloc del format ARGB, en podem escollir un altre. Picant a la barra horitzontal superior de la finestra on es tria el color es pot escollir un altre format; per exemple l'hexadecimal, que és la forma més compacta.
...
color: const Color.fromARGB(255, 30, 90, 50),
color: const Color(0xFF1E5A32),
...
També tenim la possibilitat d'entrar manualment la transparència i les components RGB del color desitjat.
Normalment una aplicació té un petit conjunt de colors, el que s'anomena una paleta. Una paleta de colors pot tenir pocs colors (cinc, per exemple) o una bona colla (vint o més), depenent de la complexitat de l'aplicació i les seves vistes.
Una bona manera d'organitzar la paleta és creant una classe amb tots els colors que farem servir a l'aplicació o, com a mínim, amb aquells que es fan servir en diversos llocs. Així podem canviar el color en un únic lloc i la modificació s'aplica immediatament a tota l'aplicació.
Per exemple, podríem crear un fitxer colors.dart dins de la carpeta core que situem a la carpeta lib.
colors.dart
import 'package:flutter/material.dart';
class ColorsApp {
static const Color fons = Color(0xFF200B0E);
static const Color primari = Color(0xFFEA0062);
static const Color secundari = Color(0xFF45031F);
static const Color accentuar = Color(0xFF00C4FF);
static const Color component = Color(0xFF331E1D);
static const Color seleccionat = Color(0xFF8B544F);
static const Color text = Color(0xFFFFFFFF);
}
Cal definir-los com a estatics, perquè s'hi pugui accedir des de qualsevol lloc, i com a constant, perquè no volem que es pugui modificar per error des d'un altre lloc de l'aplicació.
Després podem utilitzar aquests colors en qualsevol lloc de l'aplicació. Per exemple, podem posar un fons a l'esquelet (en el MainApp).
main.dart
...
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
backgroundColor: ColorsApp.fons,
body: Center(
child: Text('Hello World!'),
),
),
);
}
...
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.