top of page

Cómo cambiar dinámicamente el tema de una aplicación Flutter desde Remote Config

Alejandro Carrazana

El cambio de apariencia en una aplicación móvil en tiempo real puede ser difícil debido a la necesidad de desplegar una nueva versión. Sin embargo, Remote Config ofrece una solución eficaz para hacer estos ajustes rápidamente.


Remote Config permite a los desarrolladores realizar cambios en la apariencia de la aplicación sin tener que publicar una nueva versión, lo que ahorra tiempo y esfuerzo. Además, esto permite a los usuarios tener acceso a las actualizaciones y mejoras de forma inmediata sin tener que descargar una nueva versión de la aplicación.


En este artículo, vamos a ver como cargar un tema en una aplicación Flutter desde Remote Config.


Uso de temas en aplicaciones Flutter


En Flutter, los temas se utilizan para establecer la apariencia y el estilo de una aplicación. Puedes crear temas personalizados utilizando el widget Theme y proporcionando valores para diferentes atributos visuales, como el color de fondo, el tamaño de fuente y los estilos de botones.


También puedes utilizar temas predefinidos proporcionados por Flutter, como ThemeData.light() y ThemeData.dark(). Puedes aplicar un tema a toda la aplicación colocando un widget Theme en la raíz de tu árbol de widgets o aplicar un tema a una parte específica de la aplicación colocando un widget Theme en esa parte del árbol de widgets.


Además de los atributos visuales, también puedes establecer otros aspectos del tema, como la tipografía. Para establecer la tipografía, puedes utilizar el atributo fontFamily en el widget ThemeData. También puedes especificar diferentes tipografías para encabezados y cuerpos de texto utilizando los atributos headline y body, respectivamente.


También puedes personalizar los estilos de botones utilizando el atributo buttonTheme en el widget ThemeData. Esto te permite establecer el tamaño, el color y el borde de los botones.


Cargar el tema de una aplicación Flutter desde Remote Config


Remote Config es un servicio de Firebase que te permite configurar y cambiar valores en tu aplicación de forma remota, sin necesidad de que el usuario tenga que actualizar la aplicación, con la facilidad de que la configuración permanezca cargada en la memoria caché hasta que existan nuevos cambios en el servidor remoto.


Para personalizar una aplicación podemos crear un parámetro con tipo de datos JSON en Remote Config, cuyo valor sea el tema que queremos aplicar. Con el objetivo de interpretar los valores configurados desde Remote Config dentro de la aplicación, es posible emplear el paquete de Flutter json_theme, que permite generar dinámicamente un objeto ThemeData a partir de un archivo JSON o un objeto de mapa dinámico.


El paquete json_theme es una forma sencilla de personalizar la apariencia de tu aplicación sin tener que escribir código adicional para cargar los temas. Con este paquete, puedes definir tus temas en archivos JSON y cargarlos fácilmente en tu aplicación. Una de las principales ventajas de utilizar este paquete es que te permite mantener tus temas en un lugar centralizado y fácil de editar.


Si necesita más información sobre el paquete json_theme le recomendamos leer la documentación oficial en Github.


Para poder continuar con la carga remota del tema de la aplicación deberá tener previamente configurado Remote Config y el paquete json_theme en el fichero pubspec.yaml (en caso de que requiera más detalles al respecto, puede dirigirse a nuestro artículo Cómo cambiar el comportamiento y apariencia de una app Flutter utilizando Remote Config).


Sugerimos crear primero el tema de la aplicación con los widgets de Flutter para luego trasladarlo al formato Json, manejado por el paquete json_theme, y poder publicarlo en Remote Config.


Código de ejemplo


En el siguiente ejemplo transformamos un tema que se encuentra en la forma tradicional de widgets de Flutter a formato Json, y luego lo cargamos en la aplicación desde Remote Config. Presentamos el tema a convertir:

ThemeData(
 primarySwatch:
     AppTools.convertToMaterialColor(color: AppColors.primary),
 primaryIconTheme: IconThemeData(color: AppColors.primary),
 colorScheme: ColorScheme.light(
   secondary: AppColors.secondary,
   primary: AppColors.primary,
 ),
 elevatedButtonTheme: ElevatedButtonThemeData(
   style: ElevatedButton.styleFrom(
     fixedSize: const Size(150, 45),
     shape: RoundedRectangleBorder(
       borderRadius: BorderRadius.circular(10.0),
     ),
   ),
 ),
);

Resultado de la conversión realizada con los estándares que establece el paquete json_theme:

{
 "primarySwatch": {
   "primary": "#213871",
   "swatches": {
     "50": "#213871",
     "100": "#213871",
     "200": "#213871",
     "300": "#213871",
     "400": "#213871",
     "500": "#213871",
     "600": "#213871",
     "700": "#213871",
     "800": "#213871",
     "900": "#213871"
   }
 },
 "primaryIconTheme": {
   "color": "#213871"
 },
 "colorScheme": {
   "background": "#ffffff",
   "brightness": "light",
   "secondary": "#02a4b6",
   "error": "#b00020",
   "onBackground": "#111111",
   "onError": "#ffffff",
   "onPrimary": "#ffffff",
   "onSecondary": "#111111",
   "onSurface": "#111111",
   "primary": "#213871",
   "surface": "#ffffff"
 },
 "elevatedButtonTheme": {
   "style": {
     "fixedSize": {
       "width": 150,
       "height": 45
     },
     "shape": {
       "type": "rounded",
       "borderRadius": 10
     }
   }
 }
}

Este Json se almacena en el parámetro que definimos para el tema en Remote Config, en nuestro caso el parámetro es light_theme_octa.


A continuación, obtenemos la configuración desde Remote Config con la función getTheme de la clase FirebaseRemoteRepository. El método decodeThemeData nos ayudará a decodificar la información contenida en el Json que obtuvimos desde el servidor remoto.

class FirebaseRemoteRepository {
 ...
 //Parameters
static const String lightTheme = "light_theme_octa";
Map<String, dynamic> getData({required String parameterName}) {
   var remoteValue = _remoteConfig.getAll()[parameterName];
   Map<String, dynamic> result = {};
   try {
     result = json.decode(remoteValue!.asString());
   } catch (e) {
     debugPrint(e.toString());
   }
   return result;
 }

 ThemeData? getTheme({required String themeType}) {
   Map<String, dynamic> themeJson = getData(parameterName: themeType);
   if (themeJson.isNotEmpty) {
     ThemeData? themeData = ThemeDecoder.decodeThemeData(themeJson);
     return themeData;
   }
   return null;
 }
}

Seguido, aplicamos la configuración obtenida en el widget MaterialApp.

class OctaApp extends StatelessWidget {
 const OctaApp({Key? key}) : super(key: key);
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     title: AppConstants.appTitle,
     theme: FirebaseRemoteRepository()
             .getTheme(themeType: FirebaseRemoteRepository.lightTheme),
     ...
    );
 }
}

De esta manera queda configurada la aplicación con los parámetros que definimos en Remote Config, la posibilidad de cambiarlos en cualquier momento y sin que el usuario deba actualizar la aplicación.


¡Síguenos para más contenidos sobre el desarrollo de aplicaciones Flutter!



Contacto
Email
Telefono
ubicacion

info@octa.dev
jobs@octa.dev

Uruguay: +598 95 484 353

USA: +1 (307) 209 9642

Uruguay: Sinergia Design, Colonia 2235, Montevideo 11200.
USA: Coffeen Ave 1200, Sheridan WY 82801.

  • LinkedIn
  • X
  • Instagram
  • Facebook

¡Gracias por tu mensaje!

CUTI
Uruguay Technology
CUF
bottom of page