Flutter White Label Apps Made Simple: What You Need to Know

I had been trying to create a white label product through Flutter for quite some time. All I was finding were resources for other frameworks like React Native and Vue.js. A little annoying but I also realize Flutter is fairly new.

After a bit of noodling around I figured out a solution. I know there is a concept of flavors in Flutter but for my specific use case it didn’t seem to be a perfect fit.

What is a white label?

In case you somehow find this article without the actually knowing what a white label app is: White labeling is when a product (I will be referring to the product as the platform) removes their labeling on it so that a purchaser can use their own branding (I’ll refer to this as the brand app) on the platform.

Enough with the chatter and get to it.

Ok.

So in our example we are going to use the default flutter counter app as a prime example.

In our example we would like to create a platform that uses different copy in the header. In the brand apps we would like one to say “What are they selling?” and in the other brand app we would like it to say “CHOCOLATE!”. Simple example but I think it does the trick in explaining how to do this.

Step 1

Create a brand new flutter app called platform (I’m using Android studio and it automatically creates the button counter for me).

Step 2

Create a config directory in the same root folder of your lib directory:

lib/
config/
  pubspec.yaml
  lib/
    Config.dart

Step 3

Set the pubspec.yaml in the config file to look like this:

# pubspec.yaml
name: config
description: Config for Clients.
version: 1.0.0
environment:
sdk: “>=2.2.0 <3.0.0”

Step 4

The Config.dart can contain the specific modifications for each brand app as follows:

Note: The Config.dart will be the file that holds all of your brand app specific variables

// Config.dart
const APP_HEADING_COPY = ‘BASE APP HEADING’;

Step 5

Now add your config to the pubspec.yaml of the platform as follows:

dependencies:
  config:
    path: config
  flutter:
    sdk: flutter

Step 6

Run pub get to pull the config library

Step 7

In your main.dart add the following import code to bring in the config data as a package. Make sure you do not bring it in as a relative path:

import ‘package:config/Config.dart’;

Step 8

Now that you have your config set up with the APP_HEADING_COPY use that in your main.dart in place of the ‘Flutter Demo Home Page’ copy.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: APP_HEADING_COPY),
    );
  }
}

Step 9

Now it’s time to set up a brand app!

Go through the same process of making a new flutter app that we highlighted before in step 1.

Our first one will be called brand_app1. Make sure it is in the same directory as your platform.

$WORKSPACE_DIR/platform/
$WORKSPACE_DIR/brand_app1

Step 10

Now add a config directory in the exact same way we did in step 2 (pubspec and all). Make sure to change the APP_HEADING_COPY to your desired copy. For us we did the following

// Config.dart
const APP_HEADING_COPY = ‘What are they selling?’;

Step 11

In the main.dart of the brand_app1 make sure update the pubspec.yaml as follows:

dependencies:
  base_project:
    path: ../base_project
dependency_overrides:
  config:
    path: config

Step 12

run pub get

Step 13

Now go to your main.dart in brand_app1, delete all of the code and replace it with the following:

import ‘package:base_project/main.dart’ as entry;
void main() => entry.main();

You can now run the app and you will see your newly branded brand_app1 app using the underlying platform application as a white label product.

Step 14

Now that you’ve set this up you can do the same with a brand_app2 and change the copy to “CHOCOLATE!”.

Example Repo:

For the fully realized repo see it here: https://github.com/ramiechaarani/whitelabel-flutter

What to do from here?

So assuming you made it this far you’ll have made your very first white label Flutter app. The beauty of this is that you can always hop into the platform codebase and continue creating a whole app, while the brand_app1 and brand_app2 will take on those changes.

I personally love the fact that all of my code can be managed in one place. I’ve tried so many different solutions and this one seems to be the best when it comes to managing white label products in Flutter.

So from here you can choose to keep building. Hopefully this helps you on your side project, business or whatever it is you’re trying to do at the moment.

If you have any questions or can think of any optimizations to this flow I’d love to hear it.

Shoutout

I’d love to give a special shoutout to the /r/FlutterDev community and in particular a user named HaMMeReD who has since deleted his account. He pretty much helped walk me through this solution. Without his help I’m not sure I would have found as robust of a solution.