Hide debug banner

This article shows how to remove debug banner in top of application depending on environment, development or production.

Download source code

Application config

Add a boolean property name named debugShowCheckedModeBanner.

// app_config.dart

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

class AppConfig extends InheritedWidget {
  AppConfig({
    @required this.appName,
    @required this.flavorName,
    @required this.apiBaseUrl,
    @required this.debugShowCheckedModeBanner,
    @required Widget child,
  }) : super(child: child);

  final String appName;
  final String flavorName;
  final String apiBaseUrl;
  final bool debugShowCheckedModeBanner;

  static AppConfig of(BuildContext context) {
    return context.inheritFromWidgetOfExactType(AppConfig);
  }

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) => false;
}

Set variable

Development

Set the debugShowCheckedModeBanner variable to true.

// main.dart

import 'app_config.dart';
import 'app.dart';

import 'package:flutter/material.dart';

void main() {
  var configuredApp = new AppConfig(
    appName: 'Build flavors DEV',
    flavorName: 'development',
    apiBaseUrl: 'https://dev-api.example.com/',
    debugShowCheckedModeBanner: true,
    child: new MyApp(),
  );
  
  runApp(configuredApp);
}

Production

Set the debugShowCheckedModeBanner variable to false.

// main_prod.dart

import 'app_config.dart';
import 'app.dart';

import 'package:flutter/material.dart';

void main() {
  var configuredApp = new AppConfig(
    appName: 'Build flavors',
    flavorName: 'production',
    apiBaseUrl: 'https://api.example.com/',
    debugShowCheckedModeBanner: false,
    child: new MyApp(),
  );

  runApp(configuredApp);
}

Application

In MaterialApp widget, set the debugShowCheckedModeBanner from our AppConfig

import 'package:flutter/material.dart';
import 'app_config.dart';
import 'home_page.dart';

class MyApp extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    // Call AppConfig.of(context) anywhere to obtain the 
    // environment specific configuration 
    var config = AppConfig.of(context);
    
    return new MaterialApp(
      title: config.appName,
      debugShowCheckedModeBanner: config.debugShowCheckedModeBanner,
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new HomePage(),
    );
  }
}

Run application

Development

flutter run

Production

flutter run -t lib/main_prod.dart