Cómo definir una paleta de colores centralizada y reutilizable en Flutter (paleta.dart)

En Flutter no se emplean archivos XML de recursos como ocurría en el desarrollo clásico de Android (res/values/colors.xml). Siguiendo la filosofía code-first y fuertemente tipada de Dart (análoga a un archivo Color.kt en Jetpack Compose), la forma idiomática y limpia de centralizar los colores de una aplicación consiste en definir una clase dedicada con constantes estáticas.

Paso 1: Crear el archivo lib/themes/paleta.dart

import 'package:flutter/material.dart'; // Importa la clase Color y los componentes de Flutter

abstract class Paleta { // Clase abstracta que actúa como contenedor de constantes estáticas
  static const Color primario = Color(0xFF02569B); // Azul corporativo principal
  static const Color secundario = Color(0xFF0175C2); // Azul secundario para elementos complementarios
  static const Color acento = Color(0xFF13B9FD); // Azul claro para detalles destacados y focos

  static const Color fondo = Color(0xFFF8FAFC); // Tono claro de fondo general para pantallas
  static const Color superficie = Color(0xFFFFFFFF); // Blanco puro para tarjetas y diálogos

  static const Color textoPrincipal = Color(0xFF0F172A); // Color de texto principal de alto contraste
  static const Color textoSecundario = Color(0xFF475569); // Gris para subtítulos y textos secundarios

  static const Color botonVerde = Color(0xFF16A34A); // Verde para acciones afirmativas y éxito
  static const Color textoBotonVerde = Colors.white; // Blanco para texto sobre el botón verde
  static const Color error = Color(0xFFDC2626); // Rojo para mensajes de validación y fallos
} // Fin de la clase Paleta

Anatomía del formato Color(0xFF...) en Dart

El constructor Color en Flutter recibe un entero sin signo de 32 bits en notación hexadecimal bajo el formato AARRGGBB:

• 0x: Prefijo estándar del lenguaje Dart para denotar valores literales en base hexadecimal.
• FF: Canal Alfa (Opacidad). El valor FF representa el 100% de opacidad (completamente opaco). Si indicas 80 obtendrás un 50% de transparencia, mientras que 00 equivale a total transparencia.
• Los 6 caracteres restantes (02569B): Representan el valor cromático estándar en RGB (#02569B).

Paso 2: Cómo consumirlo en cualquier archivo del proyecto

Solo es necesario importar el archivo y referenciar las constantes de forma directa y limpia:

import 'themes/paleta.dart'; // Importa el catálogo centralizado de colores

Text( // Widget de texto estilizado con la paleta
  'Bienvenido', // Cadena de texto a renderizar
  style: const TextStyle(color: Paleta.textoPrincipal), // Aplica el color principal definido
); // Fin del widget Text

ElevatedButton( // Botón con estilo personalizado
  style: ElevatedButton.styleFrom(backgroundColor: Paleta.botonVerde), // Color de fondo verde corporativo
  onPressed: () {}, // Callback al presionar el botón
  child: const Text('Guardar'), // Etiqueta del botón
); // Fin de ElevatedButton