Personalización de Temas Claros y Oscuros en Aplicaciones iOS

Clase 3 de 30 • Curso de Flutter con Firebase

Resumen

La personalización de temas en aplicaciones iOS es un elemento crucial para mejorar la experiencia del usuario y adaptarse a las preferencias visuales de cada persona. Implementar correctamente los modos claro y oscuro no solo mejora la accesibilidad, sino que también demuestra atención al detalle en el desarrollo de tu aplicación. Dominar esta técnica te permitirá crear interfaces más profesionales y coherentes con el ecosistema iOS.

¿Cómo implementar temas claros y oscuros en tu aplicación iOS?

Para comenzar a personalizar nuestra aplicación con temas claros y oscuros que se adapten al sistema operativo, necesitamos crear una estructura que nos permita gestionar todos nuestros estilos de manera centralizada. Esta aproximación nos ayudará a mantener la consistencia visual en toda la aplicación y facilitará futuros cambios en el diseño.

El primer paso es crear un nuevo archivo llamado app_team.dart que contendrá toda la configuración de nuestros estilos. Este archivo será fundamental para gestionar tanto el tema claro como el oscuro de nuestra aplicación.

import 'package:flutter/material.dart';

class AppTeams {
  // Configuración para el tema claro
  static final ThemeData greenFinanceTheme = ThemeData(
    // Colores principales
    primaryColor: Color(0xFF1B5E20),
    primaryColorLight: Color(0xFF4C8C4A),
    primaryColorDark: Color(0xFF003300),
    
    // Esquema de colores
    colorScheme: ColorScheme.light(
      primary: Color(0xFF1B5E20),
      error: Colors.red,
      onPrimary: Colors.white,
    ),
    
    // Tipografía
    textTheme: TextTheme(
      headline1: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
      headline2: TextStyle(fontSize: 22.0, fontWeight: FontWeight.bold),
      headline3: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w500),
      bodyText1: TextStyle(fontSize: 16.0),
      bodyText2: TextStyle(fontSize: 14.0),
    ),
    
    // Configuración de botones
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: Color(0xFF1B5E20),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8.0),
        ),
      ),
    ),
    
    // Configuración adicional
    appBarTheme: AppBarTheme(
      backgroundColor: Color(0xFF1B5E20),
      iconTheme: IconThemeData(color: Colors.white),
    ),
    iconTheme: IconThemeData(color: Color(0xFF1B5E20)),
    dividerTheme: DividerThemeData(color: Colors.grey[300]),
  );

  // Configuración para el tema oscuro
  static final ThemeData greenFinanceDarkTheme = ThemeData(
    // Colores principales
    primaryColor: Color(0xFF388E3C),
    primaryColorLight: Color(0xFF6ABF69),
    primaryColorDark: Color(0xFF00600F),
    
    // Esquema de colores
    colorScheme: ColorScheme.dark(
      primary: Color(0xFF388E3C),
      error: Colors.redAccent,
      onPrimary: Colors.white,
    ),
    
    // Tipografía
    textTheme: TextTheme(
      headline1: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold, color: Colors.white),
      headline2: TextStyle(fontSize: 22.0, fontWeight: FontWeight.bold, color: Colors.white),
      headline3: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w500, color: Colors.white),
      bodyText1: TextStyle(fontSize: 16.0, color: Colors.white70),
      bodyText2: TextStyle(fontSize: 14.0, color: Colors.white70),
    ),
    
    // Configuración de botones
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: Color(0xFF388E3C),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8.0),
        ),
      ),
    ),
    
    // Configuración adicional
    appBarTheme: AppBarTheme(
      backgroundColor: Color(0xFF1B5E20),
      iconTheme: IconThemeData(color: Colors.white),
    ),
    iconTheme: IconThemeData(color: Color(0xFF4CAF50)),
    dividerTheme: DividerThemeData(color: Colors.grey[800]),
  );
}

¿Cómo detectar el modo del sistema operativo?

Una vez que hemos definido nuestros temas, necesitamos configurar nuestra aplicación para que detecte automáticamente si el dispositivo está en modo claro u oscuro. Para esto, utilizaremos MediaQuery en nuestro archivo main.dart:

import 'package:flutter/material.dart';
import 'app_team.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Detectar si el dispositivo está en modo oscuro
    final isDarkMode = MediaQuery.of(context).platformBrightness == Brightness.dark;
    
    return MaterialApp(
      title: 'Green Finance App',
      theme: AppTeams.greenFinanceTheme,
      darkTheme: AppTeams.greenFinanceDarkTheme,
      themeMode: isDarkMode ? ThemeMode.dark : ThemeMode.light,
      home: HomePage(),
    );
  }
}

En este código, estamos utilizando MediaQuery.of(context).platformBrightness para detectar si el dispositivo está en modo oscuro. Luego, configuramos el themeMode de nuestra aplicación en función de esta información.

¿Cuáles son los beneficios de centralizar los estilos?

Centralizar los estilos en un archivo separado ofrece múltiples ventajas:

Reutilización de código: podemos aplicar los mismos estilos en toda la aplicación sin tener que redefinirlos.
Mantenimiento simplificado: si necesitamos cambiar un color o estilo, solo tenemos que modificarlo en un lugar.
Consistencia visual: asegura que todos los elementos de la interfaz tengan un aspecto coherente.
Adaptabilidad: facilita la implementación de diferentes temas (claro/oscuro) sin duplicar código.

¿Cómo personalizar los componentes con los temas definidos?

Una vez que hemos configurado nuestros temas, podemos utilizarlos en cualquier parte de nuestra aplicación. Para acceder a los estilos definidos, utilizamos el objeto Theme.of(context):

class CustomButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  
  CustomButton({required this.text, required this.onPressed});
  
  @override
  Widget build(BuildContext context) {
    // Acceder a los colores del tema actual
    final theme = Theme.of(context);
    
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(
        text,
        style: theme.textTheme.bodyText1?.copyWith(color: Colors.white),
      ),
      // El estilo del botón ya está definido en nuestro tema
    );
  }
}

¿Cómo adaptar componentes específicos según el modo?

En algunos casos, es posible que necesitemos adaptar componentes específicos según el modo (claro u oscuro) actual. Podemos detectar el modo actual y ajustar nuestros componentes en consecuencia:

class CustomCard extends StatelessWidget {
  final String title;
  final String content;
  
  CustomCard({required this.title, required this.content});
  
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final isDark = theme.brightness == Brightness.dark;
    
    return Card(
      // Ajustar la elevación según el modo
      elevation: isDark ? 4.0 : 2.0,
      // Ajustar el color de fondo según el modo
      color: isDark ? Colors.grey[800] : Colors.white,
      child: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(title, style: theme.textTheme.headline3),
            SizedBox(height: 8.0),
            Text(content, style: theme.textTheme.bodyText2),
          ],
        ),
      ),
    );
  }
}

¿Cómo probar los diferentes modos de tema?

Para probar cómo se ve tu aplicación en diferentes modos, puedes cambiar la configuración de tu dispositivo o emulador:

En dispositivos iOS reales: ve a Configuración > Pantalla y brillo > selecciona "Claro" u "Oscuro".
En el simulador de iOS: puedes cambiar entre los modos claro y oscuro desde el menú Hardware > Appearance.

Es importante probar tu aplicación en ambos modos para asegurarte de que todos los elementos se visualizan correctamente y que la experiencia del usuario es óptima independientemente del tema seleccionado.

La implementación de temas claros y oscuros en tu aplicación iOS no solo mejora la experiencia del usuario, sino que también demuestra atención al detalle y profesionalismo en tu desarrollo. Con la estructura que hemos creado, podrás mantener una coherencia visual en toda tu aplicación y adaptarte fácilmente a las preferencias del usuario. ¿Has implementado temas en tus aplicaciones? Comparte tu experiencia en los comentarios.

JUAN PABLO POSADA SEPULVEDA

student•

Hola, para los que les sale error al nombrar los TextTheme, encontre lo siguiente:

Por ende la correcta configuracion del TextTheme: Para Light:

    // Tipografía
    textTheme: TextTheme(
      // Usando los nuevos estilos de Material 3
      displayLarge: TextStyle(
        fontSize: 24.0,
        fontWeight: FontWeight.bold,
      ), // Equivalente a 'headline1'
      displayMedium: TextStyle(
        fontSize: 22.0,
        fontWeight: FontWeight.bold,
      ), // Equivalente a 'headline2'
      displaySmall: TextStyle(
        fontSize: 20.0,
        fontWeight: FontWeight.w500,
      ), // Equivalente a 'headline3'
      // Estilos de texto para cuerpo
      bodyLarge: TextStyle(fontSize: 16.0), // Equivalente a 'bodyText1'
      bodyMedium: TextStyle(fontSize: 14.0), // Equivalente a 'bodyText2'
    ),
```Para Dark:

```js
    // Tipografía
    textTheme: TextTheme(
      // Estilos de encabezado usando la nueva convención de Material 3
      displayLarge: TextStyle(
        fontSize: 24.0,
        fontWeight: FontWeight.bold,
        color: Colors.white, // Color de texto para encabezado
      ),
      displayMedium: TextStyle(
        fontSize: 22.0,
        fontWeight: FontWeight.bold,
        color: Colors.white, // Color de texto para encabezado
      ),
      displaySmall: TextStyle(
        fontSize: 20.0,
        fontWeight: FontWeight.w500,
        color: Colors.white, // Color de texto para encabezado
      ),

      // Estilos de texto del cuerpo
      bodyLarge: TextStyle(
        fontSize: 16.0,
        color: Colors.white70, // Color de texto más tenue para el cuerpo
      ),
      bodyMedium: TextStyle(
        fontSize: 14.0,
        color: Colors.white70, // Color de texto más tenue para el cuerpo
      ),
    ),

Elias Cruz

student•

cual es la clase que importa MaterialApp? dice que la hemos visto anteriormente, que clase me perdi?

Carlos José Moh Lugo

student•

Esa parte la muestran en el curso anterior: https://platzi.com/cursos/flutter/

Alex Henrry Naupay Ferrer

student•

https://github.com/platzi/curso-flutter-firebase

Rodrigo Cambray

student•

Qué onda con los instructores que no pronuncian bien los términos que deberían ser parte de su acervo técnico? Y qué onda con tanto código generado con IA sin explicar? Crítica sin hate y con el debido respeto, pero mejor buscaré otro curso.

Joan hac

student•

Tienes toda la razón, no entendí ni mie*** de este curso por culpa de estos tipos de videos

Johann Enrique Hurtado Salas

student•

las rutas sirven para algo especifico, no es simplemente codigo generado con IA si no cosas que ya para este curso uno deberia saber porque se vio los temas o cursos anteriores a este, en lo particular yo lo entiendo por lo mismo ya se lo que esta explicando, mas bien esta tratando de avanzar rapido para poder llegar al verdadero punto del curso.