Uno de los aspectos más importantes del diseño de aplicaciones móviles es la consistencia en la apariencia y la experiencia del usuario. Flutter, con su capacidad para personalizar la apariencia de los widgets, ofrece una manera fácil de utilizar los colores del tema en tus propios widgets personalizados. En este artículo, exploraremos cómo puedes aprovechar los colores del tema en widgets personalizados utilizando Material 3 en Flutter.

¿Qué son los Colores del Tema en Flutter?

Los colores del tema en Flutter son un conjunto predefinido de colores que se utilizan para dar coherencia visual a la aplicación. Estos colores están definidos en el tema de la aplicación y pueden ser personalizados para adaptarse al estilo de diseño de la aplicación.

Creando el main.dart

Esta es la estructura basica del archivo main.dart para poder configurar el uso de Theme en una aplicacion de Flutter.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mi Aplicación',
      theme: AppTheme().getTheme(), //En AppTheme vamos a configurar el tema.
      home: MyHomePage(),
    );
  }
}

Creando y personalizando nuestro Tema

En el archivo apptheme.dart haremos toda la configuracion de nuestro tema.

Elegi hacer en un archivo aparte para que contenga nada mas las configuraciones de nuestro tema, para sea mas facil facil de mantener y para que toda informacion del tema este centrada en un unico lugar.

import 'package:flutter/material.dart';


class AppTheme {
  ThemeData getTheme() {
    //Selecion de Thema Light o Dark, lo hago mediante a un Provider
    final bright = theme?.isDarkMode ?? false;
    return ThemeData(
      useMaterial3: true,
      brightness: bright ? Brightness.dark : Brightness.light,
      colorSchemeSeed: Colors.blue,
      //Ejemplo de como customizar la AppBar
      appBarTheme: const AppBarTheme(
        centerTitle: false,
        elevation: 0,
      ),
    );
  }
}

En el archivo de AppTheme personalizamos nuestro ThemeData, poniendo opcion de si estamos usando el Theme Light o Dark, tambien elegimos nuestro colosSchemeSeed para que nuestra App tenga el color de acuerdo al elegido.

Se agrego el useMaterial3 como true, pero ya no es necesario setarlo como true, ya que por Google lo esta poniendo por default en true para nuevas aplicaciones, pero de todos modos lo puso para que si o si lo utilizemos.

Al final, pongo un pequeño ejemplo de como customizar la AppBar, tenga en cuenta que pudes personalizar mucho mas cosas en la AppBar asi como en otros Widgets.

Beneficios de Utilizar los Colores del Tema:

• Consistencia Visual: Utilizar los colores del tema garantiza una apariencia coherente en toda la aplicación, lo que mejora la experiencia del usuario.
• Facilidad de Mantenimiento: Al utilizar los colores del tema en tus widgets personalizados, cualquier cambio en los colores del tema se reflejará automáticamente en todos los widgets de la aplicación.
• Flexibilidad: Puedes personalizar los colores del tema según las necesidades de tu aplicación, lo que te permite adaptar el diseño a diferentes estilos y preferencias.

Conclusión:

En resumen, utilizar los colores del tema en widgets personalizados es una práctica recomendada en el desarrollo de aplicaciones Flutter. Con Material 3 y su enfoque en el diseño consistente y centrado en el usuario, aprovechar los colores del tema garantiza una experiencia visualmente atractiva y coherente en toda tu aplicación. ¡No dudes en utilizar los colores del tema en tus propios widgets personalizados para darle un toque profesional y pulido a tu aplicación móvil en Flutter!

¿Que sigue?

En un siguiente post les enseñare como aplicar los colores del tema a Widgets y que se modifiquen de acuerdo al tema Light o Dark.