Crea tu propia aplicación de marca blanca usando flavors en Flutter

¿Qué es una aplicación de marca blanca?

Una aplicación de marca blanca, también conocida como white label en inglés, es una aplicación desarrollada por una empresa y luego distribuida y comercializada bajo la marca de otra empresa. En otras palabras, la empresa que desarrolla la aplicación proporciona la tecnología y el diseño, mientras que la empresa que la comercializa agrega su propio logotipo, nombre y otros elementos de identidad de marca, haciéndola parecer como si fuera su propia creación.

Este tipo de aplicaciones se utilizan con frecuencia en el contexto de empresas que desean ofrecer soluciones de software o plataformas a sus clientes sin necesidad de desarrollarlas internamente. Por ejemplo, una empresa que brinda servicios de gestión de finanzas personales podría utilizar una aplicación de marca blanca desarrollada por una empresa especializada en software financiero. De esta manera, pueden agregar su propia marca y personalizar la aplicación para adaptarla a sus necesidades específicas antes de ofrecerla a sus clientes.

Las aplicaciones de marca blanca ofrecen numerosas ventajas. En primer lugar, permiten a las empresas ahorrar tiempo y recursos al evitar la necesidad de desarrollar la tecnología subyacente por sí mismas. En segundo lugar, pueden aprovechar la experiencia y la calidad de una empresa especializada en la tecnología o el software específico que necesitan. Por último, las aplicaciones de marca blanca permite ofrecer una solución personalizada y adaptada a sus clientes, lo que mejora la experiencia del usuario y fomenta la lealtad a la marca.

Para más información al respecto, le recomendamos el artículo Remote Config: La herramienta para desarrollar tu app de marca blanca

Definición de flavors en Flutter

En Flutter, los flavors representan la capacidad de crear diferentes versiones de una aplicación con características específicas para distintos entornos o propósitos. Por ejemplo, puede tener una versión "de producción" que se distribuye a través de la tienda de aplicaciones, una versión "de prueba" que incluye características experimentales, y una versión "de desarrollo" que se utiliza para probar y depurar el código.

Los flavors en Flutter se implementan mediante la configuración de diferentes archivos, que luego se utilizan para construir diferentes versiones de la aplicación con diferentes propiedades, como el nombre de la aplicación, la clave de la API, la URL del servidor, el esquema de URL, el icono de la aplicación, y así sucesivamente.

Al crear aplicaciones de marca blanca los flavors en Flutter son especialmente útiles. Son aplicaciones que se personalizan para diferentes clientes o marcas, pero que se construyen a partir del mismo código base.

Al utilizar flavors en Flutter para aplicaciones de marca blanca, es posible ahorrar tiempo y esfuerzo en el desarrollo y la personalización de aplicaciones para diferentes clientes o marcas, lo que puede ser especialmente útil.

Ejemplo de implementación de flavors en Flutter para una aplicación de marca blanca

En el siguiente ejemplo construiremos una aplicación de marca blanca en Flutter con el empleo de flavors. Se personalizan el nombre, tema, nombre de paquete y número de versión de compilación de las aplicaciones para iOS y Android, y configuraciones de Firebase en correspondencia de la marca. Las marcas establecidas de ejemplo serán Octa y Brand.

Encapsulamiento de configuraciones del proyecto

Se creó una clase abstracta llamada Config con todos los parámetros de configuración de la aplicación móvil, posibilitando usarla como interfaz en otras clases. En este ejemplo se establecieron cómo parámetros: el tema local, la configuración de firebase (permite establecer varios proyectos de Firebase para cada marca), los nombres de la constantes empleadas en Remote Config para obtener los idiomas, las traducciones y el tema de la aplicación.

abstract class Config {
 ThemeData? localThemeData;
 FirebaseOptions? firebaseOptions;
 String? langs;
 String? translations;
 String? lightTheme;
}

En correspondencia a las marcas se adicionaron dos clases ConfigOcta y ConfigBrand, que implementan como interfaz la clase Config. De esta forma, se sobrescriben los parámetros de configuración establecidos en la clase Config, con los valores correspondientes para cada marca.

A continuación, presentamos la clase ConfigBrand con las implementaciones.

class ConfigBrand implements Config {
 @override
 FirebaseOptions? firebaseOptions = DefaultFirebaseOptions.currentPlatform;
 @override
 ThemeData? localThemeData = AppTheme.light;

 @override
 String? langs = "langs_brand";

 @override
 String? lightTheme = "light_theme_brand";

 @override
 String? translations = "translations_brand";
}

Se creó la clase AppConfig que recibe un objeto del tipo Config y ejecuta el método general runApp para la aplicación.

class AppConfig {
 static late Config config;
 Future<void> initialize({required Config configuration}) async {
   config = configuration;
   WidgetsFlutterBinding.ensureInitialized();
   ...
   runApp(
...
     const App(),
   );
 }
}

Ambientes de Configuración (Flavors) en Flutter

En la aplicación se configuraron dos flavors (octa y brand) para cada marca. Se agregaron las respectivas configuraciones de ejecución/depuración en el proyecto de Flutter asociadas a un fichero main.dart, para estos casos main_octa.dart y main_brand.dart.

Fichero main_brand.dart con la asignación de la configuración de Brand.

void main() async {
 await AppConfig().initialize(configuration: ConfigBrand());
}

Configuraciones de Ejecución/Depuración en el proyecto de Flutter.

Se duplica la configuración de main.dart y se personaliza para cada flavor.

Configuración de flavors para la compilación en Android

Build Gradle

En el fichero android/app/build.gradle se configuraron los flavors empleados en la aplicación. En cada flavor se declaró el Id de la aplicación, la variable app_name con el nombre de la aplicación, la versión y el código de la versión.

android {
…
flavorDimensions "env"

productFlavors {
   ...
   brand {
       dimension "env"
       applicationId "com.octa.brand"
       resValue "string", "app_name", "Brand"
       versionName "1.0.0"
       versionCode 1
   }
  }
}

En el fichero android/app/src/main/AndroidManifest.xml se cambió el contenido del android:label por android:label="@string/app_name". De esta forma se asegura que cada aplicación compilada muestre el nombre que le corresponde a cada flavor.

Configuración de íconos

Para cada flavor configurado se estableció un ícono, almacenándose en carpetas con igual nombre que los flavors dentro de la carpeta src, tal como se muestra.

Ajuste de nombres de paquetes

Adicionalmente, se agregaron las carpetas en correspondencia a los identificadores de aplicación (nombres de paquetes) declarados en los flavors, con su respectiva clase MainActivity. Ejemplo: com.octa.brand

La clase MainActivity se declaró de la siguiente forma:

package com.octa.brand;
import io.flutter.embedding.android.FlutterFragmentActivity;
public class MainActivity extends FlutterFragmentActivity {
}

Configuración de flavors para la compilación en iOS

Dentro de la carpeta ios se crearon los ficheros .xcconfig para cada flavor: brand.xconfig y octa.xconfig.

En estos ficheros se apunta al main.dart de cada flavor.

#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"
#include "Generated.xcconfig"FLUTTER_TARGET=lib/main_brand.dart

Configuración de íconos

Similar a cómo se estableció en Android para cada flavor se establecen los íconos dentro de la carpeta Assets.xcassets.

Configuración con Xcode

Se abrió la carpeta ios con Xcode para establecer las configuraciones de los flavors adicionales.

Configuraciones del Runner

En el Runner del proyecto se definieron las configuraciones para cada flavor (Debug, Profile, Release).

Esquemas del Proyecto

A continuación se editó el esquema Runner del proyecto.

Se duplica y establecen los esquemas para cada flavor.

Cada esquema apunta a la configuración de compilación correspondiente del flavor, como se muestra en la siguiente imagen.

Configuración del nombre de visualización del paquete (Bundle Display Name)

Dentro del Runner Group en el fichero Info.plist se definió el valor del elemento Bundle display name como $(APP_NAME).

Luego, estos nombres de visualización se cargaron en una variable llamada APP_NAME dentro de Runner/BuildSettings/Customized/User-Defined para cada flavor.

Configuraciones de los íconos

Dentro del Runner también se agregaron los nombres de las carpetas donde se encuentran los íconos.

Configuración del Product Bundle Identifier

Se configuró el Product Bundle Identifier, con los respectivos nombres de paquetes para cada flavor.

De esta forma, quedaron establecidos los flavors de nuestro proyecto Flutter, permitiendo sobre una misma base de código desarrollar 2 aplicaciones personalizadas para marcas diferentes.

Los flavors en Flutter son una herramienta útil para desarrollar aplicaciones de marca blanca, es decir, aplicaciones que pueden ser personalizadas y utilizadas por diferentes clientes o empresas. Al usar flavors, se pueden crear diferentes versiones de la aplicación con diferentes configuraciones, recursos y lógica de negocio, lo que permite adaptar la aplicación a las necesidades específicas de cada cliente sin tener que crear una nueva aplicación desde cero.

¡No te pierdas más artículos sobre el desarrollo de aplicaciones con Flutter!

¡Síguenos y mantente actualizado con todo lo nuevo que tenemos preparado para ti en nuestro blog! En próximos artículos aprenderemos a configurar múltiples idiomas en una aplicación Flutter.