Have you ever wondered how some mobile applications have admin and non-admin variants? The admin app has different UIs than the non-admin ones. Or have you seen some apps on the Play Store or App Store with premium and freemium versions? So, how do developers actually do it? How do they create multiple variants of the same project? Do they manage multiple codebases? Is there one team responsible for developing one variant and another team developing the other variant with 2 different codebases? And a clear and short answer to that is NO.
It would be costly for companies to hire two different teams to create two different app variants. So, how is it possible? And unsurprisingly, the answer to that is using Product Flavor.
As the name suggests, a product flavor (or a product variant) is a way to create multiple variants of your app from a single codebase. We can deploy these different apps independently in the relevant stores as well.
Implementation
Now, we will begin creating our flavors. We will have an admin flavor and a non-admin flavor. I will keep the apps very simple and have them display a text saying This is the admin UI and This is the non-admin UI. In a real-world application, you can follow the same techniques that I will show you and have UIs accordingly the way you want.
First, we will add a configuration in the app-level build.gradle file inside the android block.
android {
...
defaultConfig {...}
buildTypes {
debug{...}
release{...}
}
// Specifies one flavor dimension.
flavorDimensions "userTypes"
productFlavors {
admin {
dimension "userTypes"
resValue "string", "app_name", "Admin App"
applicationIdSuffix ".admin"
}
non_admin {
dimension "userTypes"
resValue "string", "app_name", "Non-Admin App"
applicationIdSuffix ".nonAdmin"
}
}
}
Because we will have two different apps created, we want two different names for each of our applications. To do so, we will have to navigate to /android/app/src/main/AndroidManifest.xml file and edit android:label.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.product_flavor_demo">
<application
android:label="@string/app_name" // Edit this line
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher">
<activity
android:name=".MainActivity"
android:exported="true"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
<!-- Specifies an Android theme to apply to this Activity as soon as
the Android process has started. This theme is visible to the user
while the Flutter UI initializes. After that, this theme continues
to determine the Window background behind the Flutter UI. -->
<meta-data
android:name="io.flutter.embedding.android.NormalTheme"
android:resource="@style/NormalTheme"
/>
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<!-- Don't delete the meta-data below.
This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
<meta-data
android:name="flutterEmbedding"
android:value="2" />
</application>
</manifest>
Now, we need to create two main.dart files in our lib directory. We shall name them main_admin.dart and main_non_admin.dart.
main_admin.dart
// Add necessary imports
void main() {
runApp(const MyApp());
}
main_non_admin.dart
// Add necessary imports
void main() {
runApp(const MyApp());
}
We will create our MyApp() widget in a moment but letβs first take care of some other things.
For VS Code Users
If you are a VS Code user, then you need to follow some of the steps that Iβll show you now.
First, create a .vscode folder in the root project directory. Then create a file launch.json inside it and add the following snippet.
{
"version": "0.2.0",
"configurations": [
{
"name": "admin_app",
"request": "launch",
"type": "dart",
"program": "lib/main_admin.dart",
"args": [
"--flavor",
"admin",
"--target",
"lib/main_admin.dart",
"--dart-define=appType=admin"
]
},
{
"name": "non_admin_app",
"request": "launch",
"type": "dart",
"program": "lib/main_non_admin.dart",
"args": [
"--flavor",
"non_admin",
"--target",
"lib/main_non_admin.dart",
"--dart-define=appType=nonAdmin"
]
}
]
}
Now, if you go to the Run and Debug option in your VS Code or hold Ctrl+Shift+D, you will see a drop-down menu. On clicking it, you should see an option to debug your two different app variants.
For Android Studio Users
If you use Android Studio then you need to follow some of the steps that Iβll show you now.
Navigate to Edit Configurations option under the Run tab. It should open up a new window. Then you need to add configurations for each flavor.
In the Dart entrypoint option, add the path to main_admin.dart file using the browse option on the right-hand side. In the Additional run args option, add
--flavor admin --dart-define=appType=admin
Now, add another configuration for the non-admin app.
Follow the same steps as mentioned above and in the Additional run args option, add
--flavor non_admin --dart-define=appType=nonAdmin
Now, we can select the proper configurations that we want to run and debug.
The dart-define option that we have attached in our command is important to find out the app type on run time. We will see how we can use it to identify the app types.
Create a new file app_config.dart inside the lib directory.
abstract class AppConfig {
static const isAdminApp = String.fromEnvironment('appType') == 'admin';
}
The value of String.fromEnvironment() comes from the dart-define option that we set earlier for each app variant. Now, using the isAdminApp boolean value, we can easily check if the app running currently is the admin app or the non-admin app and render UIs accordingly.
Now create a new file my_app.dart inside the lib directory which will contain code for our MyApp() class. I am keeping it very simple to display different UI for each app variant. You can however take the idea and create as complex UI as you want for each app variant.
// Add the necessary imports
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: AppConfig.isAdminApp ? 'Admin App' : 'Non-admin App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: AppConfig.isAdminApp ? _AdminBody(key: key) : _NonAdminBody(key: key),
);
}
}
class _AdminBody extends StatelessWidget {
const _AdminBody({super.key});
@override
Widget build(BuildContext context) {
return const Center(
child: Text(
'This is the admin UI.',
style: TextStyle(fontSize: 22),
),
);
}
}
class _NonAdminBody extends StatelessWidget {
const _NonAdminBody({super.key});
@override
Widget build(BuildContext context) {
return const Center(
child: Text(
'This is the non-admin UI.',
style: TextStyle(fontSize: 22),
),
);
}
}
As you can see, we have _AdminBody() class and _NonAdminBody() class which will help us render UIs depending on the app we are running.
On running both app flavors, we will have two different apps created with a single codebase.
Conclusion
We learned how we can have two different apps created with different UIs using a single codebase. I hope this blog post will be helpful for some of you reading if you ever encounter a situation where youβd have to create a similar project.
If you wish to see some Flutter projects with proper architecture, follow me on GitHub. I am also active on Twitter @b_plab.
My Socials:
Until next time, happy coding!!! π¨βπ»
β Biplab Dutta
Latest comments (4)
What's your color theme?
Sorry? What color theme?
If you were asking about my IDE theme then, it's
Github Dark Defaultin my VS Code andDarkerin my Android Studio.Thank You!