DEV Community: Taniksha Sharma

Setting Up Flavors in Flutter for Android and iOS

Taniksha Sharma — Mon, 27 Oct 2025 13:51:35 +0000

Managing multiple environments in a Flutter app—like local, staging, and production—can be tricky if you don’t have a clean setup. In this blog, I’ll walk you through how I implemented flavors in my Flutter app, covering both Android and iOS, including MethodChannels, Xcode changes, and Flutter setup.

Why Flavors?
Flavors allow you to:

Keep separate configurations for local, staging, and production.
Use different API URLs, app names, and assets for each environment.
Avoid accidentally hitting production APIs during development.
Customize app behavior per environment (e.g., showing banners for staging/local builds).

Android Setup
For Android, I used product flavors in app/build.gradle. Here’s a simplified setup:

android {
    ...

    flavorDimensions "default"

    productFlavors {
        create("local") {
            dimension = "default"
            applicationId = "com.example.app"
            resValue("string", "app_name", "App Local")
            resValue("string", "flavor_name", "local")
            resValue("string", "base_url", "https://local.app")
        }

        create("staging") {
            dimension = "default"
            applicationId = "com.example.app"
            resValue("string", "app_name", "App Staging")
            resValue("string", "flavor_name", "staging")
            resValue("string", "base_url", "https://stg.app.com")
        }

        create("production") {
            dimension = "default"
            applicationId = "com.example.app"
            resValue("string", "app_name", "AppName")
            resValue("string", "flavor_name", "production")
            resValue("string", "base_url", "https://prod.app.com")
        }
    }
}

Reading Flavors in Kotlin

In your MainActivity.kt, you can read flavor-specific values using a MethodChannel:

class MainActivity : FlutterActivity() {
    private val CHANNEL = "app_config"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL)
            .setMethodCallHandler { call, result ->
                when (call.method) {
                    "getFlavor" -> result.success(getString(R.string.flavor_name))
                    "getBaseUrl" -> result.success(getString(R.string.base_url))
                    else -> result.notImplemented()
                }
            }
    }
}

iOS Setup

iOS requires a bit more configuration with schemes, configurations, and .xcconfig files.

Step 1: Create .xcconfig Files

Inside ios/Flutter, create three files:
local.xcconfig
staging.xcconfig
production.xcconfig

Example for production.xcconfig:

#include "Flutter/Generated.xcconfig"
#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.release-production.xcconfig"

APP_NAME = Jumpick
BASE_URL_SCHEME = https
BASE_URL_HOST = prod.app.com

Similarly, configure local.xcconfig and staging.xcconfig with the respective names and URLs as we did for android.

Step 2: Info.plist Changes
In Info.plist, use placeholders for app name and base URL:

<key>CFBundleDisplayName</key>
<string>$(APP_NAME)</string>

<key>BASE_URL</key>
<string>$(BASE_URL_SCHEME)://$(BASE_URL_HOST)</string>

Step 3: Create MethodChannel in Swift

In AppDelegate.swift, fetch the base URL for Flutter:

  // ✅ Create channel
       if let controller = window?.rootViewController as? FlutterViewController {
           let channel = FlutterMethodChannel(name: "app_config", binaryMessenger: controller.binaryMessenger)

           channel.setMethodCallHandler { (call: FlutterMethodCall, result: @escaping FlutterResult) in
                   if call.method == "getBaseUrl" {
                     if let baseUrl = Bundle.main.object(forInfoDictionaryKey: "BASE_URL") as? String {
                       result(baseUrl)
                     } else {
                       result(nil)
                     }
                   } else {
                     result(FlutterMethodNotImplemented)
                   }
                 }
               }

Step 4: Schemes and Configurations

Create new schemes for each flavor (Runner-local, Runner-staging, Runner-production).
Add Debug/Release configurations per flavor in Xcode.
Map each configuration to the corresponding .xcconfig file.

See below images for reference

Flutter Setup

Create a singleton AppConfig to fetch the base URL:

import 'dart:io';
import 'package:flutter/services.dart';

class AppConfig {
  static const _defaultBaseUrl = "https://prod.app.com";
  static const MethodChannel _channel = MethodChannel("app_config");
  static String? _cachedBaseUrl;

  static Future<String> get baseUrl async {
    if (_cachedBaseUrl != null) return _cachedBaseUrl!;
    if (Platform.isAndroid || Platform.isIOS) {
      try {
        _cachedBaseUrl = await _channel.invokeMethod<String>("getBaseUrl") ?? _defaultBaseUrl;
      } on PlatformException {
        _cachedBaseUrl = _defaultBaseUrl;
      }
    } else {
      _cachedBaseUrl = _defaultBaseUrl;
    }
    return _cachedBaseUrl!;
  }
}

Show Environment Banner

In main.dart, show a small banner for local/staging:

 @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Demo App',
      debugShowCheckedModeBanner: false,
      theme: lightTheme,
      darkTheme: darkTheme,
      themeMode: themeController.theme,
      initialRoute: AppPages.initial,
      getPages: AppPages.routes,

      builder: (context, child) {
        final originalScaler = MediaQuery.of(context).textScaler;
        final clampedScaler = originalScaler.clamp(
          minScaleFactor: 1.0,
          maxScaleFactor: 1.4,
        );

        Widget content = MediaQuery(
          data: MediaQuery.of(context).copyWith(textScaler: clampedScaler),
          child: child!,
        );

        // Add banner only if staging
        if (ApiConstants.baseUrl.contains("stg")) {
          content = Banner(
            message: "STAGING",
            location: BannerLocation.topEnd,
            color: Colors.orange.withValues(alpha: 0.8),
            textStyle: const TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 12,
            ),
            child: content,
          );
        }
        else if (ApiConstants.baseUrl.contains("local")) {
          content = Banner(
            message: "LOCAL",
            location: BannerLocation.topEnd,
            color: Colors.green.withValues(alpha: 0.85),
            textStyle: const TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
            child: content,
          );
        }


        return content;
      },
    );


  }

This makes it visually clear which environment is running. See below images for reference.

To install your app through android studio or xcode refer below screenshots. For android create new configurations from top bar.

TO BUILD APP THROUGH COMMANDS:
ANDROID

flutter build appbundle \
                      --flavor staging \
                      -t lib/main.dart \
                      --release

IOS

 xcodebuild clean -workspace Runner.xcworkspace \
                                   -scheme Runner-staging \
                                   -configuration Release-staging

                  # Archive the build with explicit overrides
                     xcodebuild -workspace Runner.xcworkspace \
                     -scheme Runner-staging \
                     -configuration Release-staging \
                     -archivePath build/Runner-staging.xcarchive \
                     DEVELOPMENT_TEAM="$DEV_TEAM_ID" \
                     CODE_SIGN_STYLE=Automatic \
                     archive

Wrap Up

Setting up flavors properly saves a lot of headaches. With the above setup:
Android flavors are easy via build.gradle.
iOS flavors are manageable with .xcconfig files and schemes.
Flutter can dynamically fetch the correct base URL or flavor.
You can display banners to avoid confusion during testing.
This setup makes switching environments seamless, helps with testing, and prevents accidental API calls to production during development.

[Boost]

Taniksha Sharma — Mon, 27 Oct 2025 06:22:10 +0000

Flutter Write Less, Do More: Supercharge Your Flutter Apps with Mplix Extensions

Taniksha Sharma ・ Jul 2

#flutter #dart #mobile #pubdev

Flutter Zoom Meeting - Easily Integrate Zoom Meeting into Flutter with : flutter_zoom_wrapper

Taniksha Sharma — Wed, 02 Jul 2025 08:16:55 +0000

Introduction

Video conferencing is now a core part of many apps in domains like healthcare and educational — but integrating Zoom natively in Flutter has been a challenge for both Android and iOS platforms...

I developed flutter_zoom_wrapper to help you seamlessly integrate Zoom into your Flutter apps, without digging deep into native code.

This blog will guide you step-by-step on how to install, configure, and use the package to join Zoom meetings with ease.

Why I Built This -

While working on apps that required Zoom meetings, I found existing solutions were either incomplete or outdated

So we built flutter_zoom_wrapper:

Simple Dart API
Native Zoom SDK support for Android and iOS
JWT & SDK key-based auth
Highly customizable meeting options

And it’s now available for everyone on pub.dev.

How It Works - Let's Get Started

Step 1: In Your pubspec.yaml

dependencies:
  flutter_zoom_wrapper: ^0.0.4

Run - flutter pub get

Step 2: Download Zoom SDKs (Required)

Download SDKs from zoom marketplace : https://marketplace.zoom.us/

Create general app and from Embed section download below sdk versions or latest available compatible versions.

Android SDK: v6.3.1.26548
iOS SDK: v6.4.10.25465
SDK Key and SDK Secret will be on the marketplace.

*Step 3: Android Native Setup - (As SDK files are large and not available on github so require to update .pub-cache folder for flutter_zoom_wrapper *

Go to ~/.pub-cache/hosted/pub.dev/flutter_zoom_wrapper-0.0.4/android
Create a libs folder inside android.

Copy Mobilertc.aar file which is available in the downloaded sdk folder and paste it in the above path.

Add required permissions in AndroidManifest.xml:
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>

Android side setup is done.

Step 4: iOS Native Setup

Go to ~/.pub-cache/hosted/pub.dev/flutter_zoom_wrapper-0.0.4/ios.

Create a ZoomSDK folder.

Copy MobileRTC.xcframework and MobileRTCResources.bundle which is available in the downloaded SDK folder and paste it in the above path.

Add required permissions in Info.plist of your project:

key>NSCameraUsageDescription</key>
<string>This app uses your camera for Zoom meetings</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app uses your mic for Zoom meetings</string>

Then in your project IOS project, Paste MobileRTCResources.bundle inside runner.
Run pod install.
IOS setup is done.

Important:

The .aar for android and .xcframework and .bundle files for ios must be placed in the correct location for the plugin to function properly.

If the package is updated in future, then the zoom SDK files need to be updated, in the updated package location according to the version number.. ~/.pub-cache/hosted/pub.dev/flutter_zoom_wrapper-0.0.4

Step 5: Now Let’s use this package in your flutter project.

import 'package:flutter_zoom_wrapper/flutter_zoom_wrapper.dart';

Give your SDK key and secret to generate a JWT token, which is required for initializing the SDK and joining the meeting.

Future<void> _initializeZoomSDK() async {
    final sdkKey = _sdkKeyController.text.trim();
    final sdkSecret = _sdkSecretController.text.trim();

    if (sdkKey.isEmpty || sdkSecret.isEmpty) {
      _appendLog('❗ Please enter both SDK Key and SDK Secret.');
      return;
    }

    try {
      final jwtToken = FlutterZoomWrapper.generateZoomJWT(sdkKey, sdkSecret);
      await FlutterZoomWrapper.initializeZoom(jwtToken);
      debugPrint('✅ Zoom SDK initialized successfully.');
    } catch (e) {
      debugPrint('❌ Error initializing Zoom SDK: $e');
    }
  }

Future<void> _joinZoomMeeting() async {
    final meetingId = _meetingIdController.text.trim();
    final meetingPassword = _meetingPasswordController.text.trim();
    final displayName = _displayNameController.text.trim();


    try {
      await FlutterZoomWrapper.joinMeeting(
        meetingId: meetingId,
        meetingPassword: meetingPassword,
        displayName: displayName,
      );
      debugPrint('📞 Attempting to join the Zoom meeting...');
    } catch (e) {
      debugPrint('❌ Error joining Zoom meeting: $e');
    }
  }

For full Example code, Refer -
Example

If you find it useful:
🌟 Star the project on GitHub and give like on pub.dev
🗣 Share feedback or feature requests

Let’s Zoom Together!
Start integrating Zoom into your Flutter app with just a few lines of code — and let us handle the complexity under the hood.

Happy coding.

Final Result

Flutter Write Less, Do More: Supercharge Your Flutter Apps with Mplix Extensions

Taniksha Sharma — Wed, 02 Jul 2025 08:00:39 +0000

Are you tired of writing the same Flutter boilerplate over and over?
Do you wish there was a cleaner, faster way to build beautiful UI without sacrificing flexibility?

Enter [mplix](https://pub.dev/packages/mplix) — a Flutter package designed to simplify your code and let you build powerful apps with fewer lines.

With mplix, you get a collection of production-ready extensions that make your widgets smarter, reusable, and just... fun to use!

**Why Mplix? — A Developer’s Problem
**Let’s be real: writing a Container, adding padding, applying rounded corners, adding a gradient, or just logging something during debug... takes too many lines.
What if you could go from this:

Container(
  height: 200,
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(16),
    color: Colors.white,
  ),
  child: Text('Hello'),
);

To this:
Text('Hello').asCard(height: 200),

Clean, readable, and reusable. With mplix, that’s the default.

How It Works - Let's Get Started

Using mplix is as simple as writing plain Flutter — but with superpowers. Once you install the package, you instantly unlock dozens of extensions that drastically reduce boilerplate and make your code more expressive.

Step 1: In Your pubspec.yaml

dependencies: mplix: ^0.0.11
Run - flutter pub get

Step 2: Use Extensions to Simplify Your UI

Instead of writing widgets the long way:

Container(
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
  ),
  child: Text('Hello'),
);

You can now write:

Text('Hello').asCard(),

Render Beautiful Images Instantly

Want a nice rounded image card with just a path -
'https://picsum.photos/800/300'.asImageCard(height: 200, radius: 16),

Whether it's an asset, file, or network image — it just works.

🧩 All Built With Extension Methods

Mplix uses Dart's extension methods to make any widget smarter:

Add tap functionality using .onTap()

Animate easily with .fadeIn() or .tapScale()

Add spacing with 16.spacingY() or 8.spacingX()

Build cards, glassmorphism, gradients, and blur effects in one line

Try This Mini Demo

Column(
  children: [
    'https://picsum.photos/800/300'.asImageCard(height: 200, radius: 24),
    16.spacingY(),
    Text('Tap Me')
        .asCard()
        .onTap(() => context.showSnackbar('Hello from Mplix!')),
  ],
);

Text('Glass Card').asGlassCard();                         // Frosted glass blur card

Image.asset('pic.png').clipRounded(12);                                       // Clip with corner radius

Image.network(url).clipRounded(12).onImageTapPreview(context, imageProvider: NetworkImage(url)); // Zoomable full preview

'https://picsum.photos/800/300'.asImageCard(
height: 180,
radius: 20,
shadow: true,
onTap: () => print('Image tapped'),
), //resuable image card, (asset,network or file image)

🤖 Convert :emoji: Codes to Real Emojis

Need to add emoji support in user-generated content like chat messages, bios, or notes?

With Mplix, just use .withEmojis() on any string:

'I love :pizza: and :flutter:'.withEmojis();  
// Output: I love 🍕 and 🐦

You can now let users type natural :emoji: codes, and your app handles the rest—no third-party libraries needed.

🗓️ Date & Time Utilities — Format in Style

Dealing with date formatting and time calculations in Flutter can be verbose and repetitive.

Mplix brings you intuitive extensions on DateTime and Duration so you can format and compare time with just one-liners.

DateTime.now().format();               // e.g. "26 Jun 2025"
DateTime.now().format('yyyy-MM-dd');  // e.g. "2025-06-26"
DateTime.now().short;                 // "26/06/25"
DateTime.now().time;                  // "01:15 PM"
DateTime.now().fullDateTime;          // "26 Jun 2025, 01:15 PM"

Duration(seconds: 75).formatted;  // "01:15"
Duration(minutes: 5).formatted;   // "05:00"

🕵️ Smart Date Comparisons

myDate.isToday;                      // true if the date is today
myDate.isSameDate(anotherDate);     // compares only day/month/year

🚀 And That’s Just the Beginning…

Mplix isn’t just about styling widgets — it’s about supercharging your Flutter experience from top to bottom.

Here’s what else you get:

🎯 Smarter Context = Cleaner Code

context.width  // Instead of MediaQuery.of(context).size.width
context.height // Instead of MediaQuery.of(context).size.height
context.showSnackbar('Something went wrong');
context.showLoader(message: 'Please wait...');
context.divider          // A themed divider
context.spacing(16)

🌀 Full-Screen Loading & Shimmer Effects
Mplix also provides professional full-screen loading overlays and shimmer animations, making your apps feel more modern and responsive with minimal effort.

Show a loading spinner with a message:

Container().asLoadingScreen(
  message: "Fetching data...",
  subMessage: "Please wait a moment",
  spinnerColor: Colors.deepPurple,
  spinnerSize: 50,
  spinnerType: LoadingSpinnerType.doubleBounce,
  blur: 6.0,
  backgroundColor: Colors.black.withOpacity(0.6),
);

Add custom icons or images above the spinner:

Container().asLoadingScreen(
  blur: 8.0,
  backgroundColor: Colors.black.withOpacity(0.6),
  customChild: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.cloud_download, size: 60, color: Colors.deepPurple),
      SizedBox(height: 20),
      SpinKitFadingCube(color: Colors.deepPurpleAccent, size: 50),
      SizedBox(height: 20),
      Text("Fetching data...", style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.w600)),
      Text("Please wait a moment", style: TextStyle(color: Colors.white70, fontSize: 14)),
    ],
  ),
);

Add shimmer animations to any widget:

Container(height: 20, width: 100, color: Colors.grey).asShimmer(
  baseColor: Colors.grey.shade300,
  highlightColor: Colors.grey.shade100,
);

Benefits

Faster development
Cleaner widget trees
Reusable and composable
Works with any existing Flutter project
No learning curve — just shorter syntax

To know more about mplix visit : https://pub.dev/packages/mplix/example

If you find it useful:
🌟 Star the project on GitHub and hit like on pub.dev
🗣 Share feedback or feature requests

Mplix helps you focus on what you want to build, not how to structure boilerplate Flutter code.
Start using Mplix in your Flutter app with just a few lines of code — and let us take care of the heavy lifting behind the scenes.

Happy coding.