How to Remove or Hide DEBUG Banner in Flutter?

To remove or hide the debug banner in your Flutter project, you can set the debugShowCheckedModeBanner value to false.

By default, the debugShowCheckedModeBanner value is set to true.

debugShowCheckedModeBanner property turns on a little “DEBUG” banner in debug mode to indicate that the app is in debug mode. This is on by default (in debug mode), to turn it off, set the constructor argument to false. In release mode, this has no effect.

flutter.dev

Here is an example of how the banner would like if you don’t set the debugShowCheckedModeBanner value to false.

Flutter DEBUG banner
Screen with debug banner

Sample Code to Remove or Hide DEBUG Banner in Flutter

In your main method, set debugShowCheckedModeBanner = false as stated earlier.

void main() {
  runApp(
    MaterialApp(
      home: Splash(),
      debugShowCheckedModeBanner: false,
      title: 'Learning How to Hide Debug Banner',
      theme: ThemeData(
        fontFamily: 'DDC_Uchen'
      ),
    ),
  );
}

Here the banner gets disappeared.

Flutter DEBUG banner removed
Flutter Screen without debug mode banner

In the sample code shown above, I have used the default custom font in the project. To learn how to do it refer to my post: Change Global Default Font in Flutter App

Leave a Comment

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

Scroll to Top