Web Analytics Made Easy -
StatCounter
a-step-by-step-guide-to-remove-debug-tag-in-flutter-say-goodbye-to-it

The debug tag is by default shown by the flutter when we run the application at the right top. It’s good to show if we are debugging the application but it should be hidden if our app is in production. In this article, we will discuss multiple ways how to remove debug tag in flutter application.

debugShowCheckedModeBanner property

The MaterialApp widget which is the core component of flutter that can be used to set the app title, theme, etc also has a debugShowCheckedModeBanner property to hide the debug tag.

Example using MaterialApp Widget

MaterialApp(
  debugShowCheckedModeBanner: false,
),

In the above example, we set the value of the debugShowCheckedModeBanner property to false to hide the debug tag because it has a type of bool and it is by default set to true.

DebugConfiguration Class

We can create a separate class to check if the app is in debug mode then show the tag otherwise hides the tag.

Example using DebugConfiguration Class

class DebugConfiguration {
 static bool get isInDebug {
   return const bool.fromEnvironment("dart.vm.product");
 }
}

Then assign the value of getter isInDebug to debugShowCheckedModeBanner property.

MaterialApp(
debugShowCheckedModeBanner: DebugConfiguration.isDebug,
),

In the above example, we use the getter isInDebug from the DebugConfiguration class to check if the app is running in the debug mode with the help of dart.vm.product environment variable to show the debug tag otherwise hide it.

Conditional Constant

What if we want to show the debug tag in the debug mode but want to hide it in the release and profile mode, then we can use conditional constant from the foundation package.

Example using Conditional Constant

import the foundation package

import 'package:flutter/foundation.dart';

Then in the MaterialApp widget right the below code next to the debugShowCheckedModeBanner property

MaterialApp(
debugShowCheckedModeBanner: kDebugMode ? true : false,
),

In the above example, we use the kDebugMode constant which returns the true value if the app is in debug mode otherwise false to show the debug banner in our application if the app is in debug mode and to hide it if our application is in profile or release mode.

Conclusion

We discuss the 3 ways to remove debug banner in flutter.

Avatar

By AmmarJaved

Ammar Javed possesses a unique combination of skills and expertise in web, desktop, and mobile app development, and content writing. Ammar Javed is a strategic thinker and has problem-solving abilities. Ammar Javed can work independently and in a team. Ammar Javed is dedicated to continuous learning and professional development.

Leave a Reply

Your email address will not be published. Required fields are marked *