Flutter Flavor— Multiple Environment setup with Firebase
Tags: iOS, Flutter, Android, Firebase, Dart

Feeling weird 😩 while on the search for flutter flavors? Do you need to do multiple environment setups for your projects? I don’t want to waste your precious time reading. Just follow the steps.

Here we go!

I have divided the post into three parts.

Part 1: VSCode Setup Part 2: Android Setup Part 3: iOS Setup

Part 1 : VSCode setup

Here we are going to create configuration files for multiple environments in VSCode.

Step 1: Create environment.dart file inside the lib folder and paste this code.

//environment.dart class Environment {

final String secret;

Environment(this.secret);

}

class EnvironmentValue {

static final Environment development = Environment('Development');

static final Environment production = Environment('Production');

}

Step 2: We are going to create files inside the lib folder for different enviroments like development, staging, production, etc. Here am doing only for development and production. First create main_dev.dart file and paste the code.

//main_dev.dart import 'package:flutter/material.dart';

import 'environment.dart';

import 'main.dart'; void main() => runApp(MyApp(environment: EnvironmentValue.development));

Then create main_prod.dart file and paste this.

//main_prod.dart import 'package:flutter/material.dart';

import 'environment.dart';

import 'main.dart'; void main() => runApp(MyApp(environment: EnvironmentValue.production));

You need to create Environment variable in the main.dart file for to check whether the current release types. For that,

//main.dart import 'package:flutter/material.dart';

import 'environment.dart'; class MyApp extends StatelessWidget { final Environment environment; const MyApp({Key key, @required this.environment}) : super(key: key); @overrideWidget build(BuildContext context) { return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

visualDensity: VisualDensity.adaptivePlatformDensity,

),

home: MyHomePage(env: environment),

);

}

}

Do the same thing in the MyHomePage class also.

class MyHomePage extends StatefulWidget { final Environment env;

MyHomePage({Key key, this.env}) : super(key: key); @override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> { @override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(""),

),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text(

'$_counter You are in ${widget.env.secret}',

style: Theme.of(context).textTheme.headline4,),],

),),

}

}

Note: You need to do some changes in the widget_test.dart inside the test folder

await tester.pumpWidget(MyApp(environment: EnvironmentValue.development)); //default development

Step 3: Add configuration JSON file in VSCode.

Create .vscode folder and then create launch.json file. Inside the launch file,

{

"version": "0.2.0",

"configurations": [

{

"name": "Development",

"request": "launch",

"type": "dart",

"program": "lib/main_development.dart",

"args": [

"--flavor",

"development"

]

},

{

"name": "Production",

"request": "launch",

"type": "dart",

"program": "lib/main_production.dart",

"args": [

"--flavor",

"production"

]

}

]

}

Thats it. VSCode setup is done. 😅