top of page

Create your own white label app with flavors in Flutter

Andrés Piccardo

General concept of white label application

A white label application is an application developed by one company and then distributed and marketed under another company's brand. In other words, the company that develops the application provides the technology and design, while the company that markets it adds its own logo, name, and other brand identity elements, making it appear as if it were their own creation.

This type of application is often used in the context of companies that want to offer software solutions or platforms to their customers without the need to develop them internally. For example, a company providing personal finance management services could use a white-label application developed by a specialized financial software company. This way, they can add their own branding and customize the application to suit their specific needs before offering it to their customers.

White-label applications offer numerous advantages. Firstly, they allow companies to save time and resources by avoiding the need to develop the underlying technology themselves. Secondly, they can leverage the expertise and quality of a company specialized in the specific technology or software they require. Finally, white-label applications enable them to offer a personalized solution tailored to their customers, enhancing the user experience and fostering brand loyalty.


For more information on the subject, we recommend the article "Remote Config: The Tool for Developing Your White-Label App"


Definition of Flavors in Flutter

In Flutter, "flavors" represent the ability to create different versions of an application with specific features for different environments or purposes. For example, you can have a "production" version that is distributed through the app store, a "test" version that includes experimental features, and a "development" version that is used for testing and debugging the code.

Flavors in Flutter are implemented by configuring different files, which are then used to build different versions of the application with different properties, such as the application name, API key, server URL, URL scheme, app icon, and so on.

Flavors in Flutter are especially useful for creating white-label applications, i.e., applications that are customized for different clients or brands but are built from the same codebase. By using flavors in Flutter for white-label applications, it's possible to save time and effort in developing and customizing applications for different clients or brands, which can be particularly useful.


Example implementation of flavors in Flutter for a white-label application

In the following example, we will build a white-label application in Flutter using flavors. We will customize the name, theme, package name, and build version number of the iOS and Android applications, as well as Firebase configurations based on the brand. The example brands used will be Octa and Brand.


Encapsulation of project configurations

We created an abstract class called Config with all the configuration parameters of the mobile application, making it possible to use it as an interface in other classes. In this example, the parameters were established as the local theme, Firebase configuration (which allows setting up multiple Firebase projects for each brand), the names of the constants used in Remote Config to obtain the languages, translations, and application theme.

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

In correspondence to the brands, two classes were added: ConfigOcta and ConfigBrand, which implement the Config class as an interface. In this way, the configuration parameters established in the Config class are overwritten with the corresponding values for each brand.

Next, we present the ConfigBrand class with the implementations.

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";
}

The AppConfig class was created, which receives an object of type Config and executes the general runApp method for the application.

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

Configuration Environments (Flavors) in Flutter

In the application, two flavors (octa and brand) were configured for each brand. The respective run/debug configurations were added to the Flutter project associated with a main.dart file, in these cases main_octa.dart and main_brand.dart.


main_brand.dart file with the assignment of the Brand configuration.

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

Run/Debug Configurations in Flutter Project

The main.dart configuration is duplicated and customized for each flavor

Flavor Configuration for Android Compilation

Build Gradle

In the file android/app/build.gradle, the flavors used in the application were configured. For each flavor, the application ID, the app_name variable with the application name, the version, and the version code were declared.

android {
…
flavorDimensions "env"

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

In the file android/app/src/main/AndroidManifest.xml, the content of android:label was changed to android:label="@string/app_name". This ensures that each compiled application displays the name that corresponds to each flavor.


Icon Configuration

For each configured flavor, an icon was set by storing it in folders with the same name as the flavors within the src folder, as shown.

Adjustment of Package Names

Additionally, folders were added corresponding to the application identifiers (package names) declared in the flavors, along with their respective MainActivity class. For example: com.octa.brand.

The MainActivity class was declared as follows:

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

Flavor Configuration for iOS Compilation

Within the ios folder, .xcconfig files were created for each flavor: brand.xconfig and octa.xconfig.

These files point to the main.dart of each flavor.

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

Icon Configuration

Similar to how it was established in Android, icons are set for each flavor within the Assets.xcassets folder.

Configuration with Xcode

The ios folder was opened with Xcode to establish the configurations for additional flavors.

Runner Configurations

Configurations were defined for each flavor (Debug, Profile, Release) in the project's Runner.

Project Schemes

Next, the Runner scheme of the project was edited.

The schemes are duplicated and set up for each flavor.

Each scheme points to the corresponding build configuration of the flavor, as shown in the following image.

Bundle Display Name Configuration

Within the Runner Group, the value of the Bundle Display Name element was defined as $(APP_NAME) in the Info.plist file.

Then, these display names were loaded into a variable named APP_NAME within Runner/BuildSettings/Customized/User-Defined for each flavor.

Icon Configurations

Within the Runner, the names of the folders where the icons are located were also added.

Product Bundle Identifier Configuration

The Product Bundle Identifier was configured with the respective package names for each flavor.

In this way, the flavors of our Flutter project were established, allowing us to develop two customized applications for different brands on the same code base.

Flavors in Flutter are a useful tool for developing white-label applications, that is, applications that can be customized and used by different clients or companies.


By using flavors, different versions of the application with different configurations, resources, and business logic can be created, allowing the application to be adapted to the specific needs of each client without having to create a new application from scratch.


Don't miss out on more articles about app development with Flutter! Follow us and stay updated with all the exciting new content we have in store for you on our blog! In upcoming articles, we will learn how to set up multiple languages in a Flutter application.















Contact
Email
Telefono
ubicacion

Emails

info@octa.dev
jobs@octa.dev

Phones

Uruguay: +598 95 484 353

USA: +1 (307) 209 9642

Addresses

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

  • LinkedIn
  • X
  • Instagram
  • Facebook

Thank you for your message!

CUTI
Uruguay Technology
CUF
bottom of page