How to remove a DEBUG banner in Flutter App

When you run a Flutter app for the first time, you probably notice a debug banner in the upper right of the screen.

What is the purpose of DEBUG banner

Flutter has three build modes, debug, profile, and release^[1]. By default, Flutter shows the debug banner to indicate that the app is running in debug mode. This banner won't show up in the release mode, so you can leave it as-is if you don't mind.

This banner is intended to prevent people from complaining that your app is slow when running under debug configuration. In debug mode, Flutter enables many expensive diagnostics to aid in development. So performance in debug mode does not represent what will happen in release mode.

In my case, developers and designers are the only people who use debug mode. So, I don't see any benefits and want it to be gone.

You can easily support sarunw.com by checking out this sponsor.

Note Taking:Quickly take note using Voice, Camera, or Typing

Try it for Free

How to remove a DEBUG Banner

A debug banner is controlled by the debugShowCheckedModeBanner property of a MaterialApp and CupertinoApp widget. To remove or hide the debug banner in your Flutter app, set the debugShowCheckedModeBanner property to false in the constructor argument of a MaterialApp/CupertinoApp.

MaterialApp(
  debugShowCheckedModeBanner: false,
  home: Scaffold(
    appBar: AppBar(
      title: const Text('Home'),
    ),
  ),  
);

Set the debugShowCheckedModeBanner property to false to hide the debug banner.