Which Version Did That Bug Appear In?

If you’ve ever had a long Slack thread (or JIRA) or meeting over a single bug screenshot, this might sound familiar:

“Which environment (DEV/QA/PROD) did this bug happen in?”
“iPhone or Android?”
“Which iPhone model?”
“Android? Which brand?”
“What’s the OS version?”
“Hmm… latest, I think.”
“Build number?”
“This screenshot’s from a few weeks ago… not sure.”
“Can you reproduce it now?”

Most teams try to avoid this mess by asking QA or developers to record device and app details manually in every bug report — but that’s slow, error-prone, and often forgotten.
And the worst part? During final release testing, someone accidentally runs a DEV build that connects to the development backend instead of the production one. It happens more often than we’d like.

That’s why env_indicator exists. It’s a tiny Flutter widget that displays environment, build, and device info over every screen. And in PRODUCTION builds — it hides itself automatically.

How do you see it when applied

• Android: DEV Environment, build #27, OS version 11, app version 0.1.0, device Google Pixel 6 Pro, API Level 36 (16)

• iOS: QA Environment, build #12, OS version 26.0.1, app version 0.1.0, device iPhone 13 (iPhone14,5), Build 23A355

It’s simple, but the motivation is practical: I was tired of copying the same snippet into every Flutter project.
Over time, slightly different versions started to appear across projects. Turning it into a package made sense — now, adding it is just:

flutter pub add env_indicator

Check out the full README on pub.dev, but here’s the gist.

Quick setup

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

/// Declare a global AppInfo instance
late AppInfo appInfo;

Future<void> main() async {

  /// Initialize based on environment
  appInfo = AppInfo();
  await appInfo.init(
    env: 'DEV',          // 'DEV' | 'QA' | 'PROD'
    dotColor: '284B29',  // Indicator color (RGB hex, no '#')
    textColor: '030206', // Label text color
    height: '120',       // Distance from top of screen
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Stack(
          children: [
            const Center(child: Text('Main content here')),

            /// Add this widget as an overlay
            EnvIndicator(appInfo: appInfo),
          ],
        ),
      ),
    );
  }
}

Using .env files (CI/CD friendly)

Separate configuration files like .env, .DEV.env, and .QA.env make it easier for CI pipelines and local builds.

.DEV.env

ENV_NAME=DEV
ENV_DOT_COLOR=284B29
ENV_TEXT_COLOR=030206
ENV_LABEL_HEIGHT=90

.QA.env

ENV_NAME=QA
ENV_DOT_COLOR=53015F
ENV_TEXT_COLOR=010101
ENV_LABEL_HEIGHT=90

.env (default for production)

ENV_NAME=PROD
ENV_DOT_COLOR=000000
ENV_TEXT_COLOR=000000
ENV_LABEL_HEIGHT=90

pubspec.yaml

dependencies:
  flutter_dotenv:
  env_indicator:

flutter:
  assets:
    - .env
    - .DEV.env
    - .QA.env

main.dart (using dotenv)

import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:env_indicator/env_indicator.dart';

late AppInfo appInfo;

/// Read environment from build parameter
const String kBuildEnv = String.fromEnvironment('BUILD_ENV', defaultValue: 'PROD');

Future<void> main() async {
  await dotenv.load(fileName: '.${kBuildEnv}.env');
  final env = dotenv.env['ENV_NAME'];
  final dot = dotenv.env['ENV_DOT_COLOR'];
  final txt = dotenv.env['ENV_TEXT_COLOR'];
  final top = dotenv.env['ENV_LABEL_HEIGHT'];

  appInfo = AppInfo();
  await appInfo.init(env: env, dotColor: dot, textColor: txt, height: top);
  runApp(const MyApp());
}

Now in CI/CD or locally, you can build or run each environment like this:

# DEV run
flutter run --dart-define=BUILD_ENV=DEV

# QA build
flutter build apk --release --dart-define=BUILD_ENV=QA

# PROD build
flutter build apk --release

How to make your team use it naturally

• Add screenshot rules to PR templates: “Attach a UI screenshot showing the env_indicator label.”
• QA devices: Only use QA builds, and the environment label makes it obvious.
• Color-code environments: DEV=green, QA=purple, STAGE=neon orange — slightly tacky, but unmistakable.

Notes

• Environment names aren’t fixed — you can use custom names. Only PROD automatically hides the label.
• If it overlaps with other UI elements, adjust the height value.
• While primarily for mobile (iOS/Android), it can work on other platforms too without device details.

License & contribution

• License: MIT
• Code Repository: GitHub cavecafe-cc/env_indicator
• Contributions are welcome — especially real-world usage stories or screenshots.

Conclusion

env_indicator may look small, but it can save your team from hours of repetitive “which build is that?” conversations.
It gives every screenshot clear context, raises test accuracy, and cuts confusion before release.
Give it a try — and maybe make it part of your Flutter project template.