Search code snippets, questions, articles...

How to remove debug banner in Flutter app

banner
The debug banner is a visual indicator that appears in the top right corner of the screen when running a debug build of a Flutter app. While the debug banner can be helpful when developing and debugging an app, it can be annoying when running a release build of the app. This article will show you how to remove the debug banner in a Flutter app.
MaterialApp(
    title: 'My App',
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: const HomePage(),
);
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place.

The code that is used to remove or hide the debug banner in the Flutter app is:

debugShowCheckedModeBanner: false,

We can use it inside the MaterialApp() widget and set debugShowCheckedModeBanner to false. Now the red color ribbon of debug text will not appear on the screen when you are debugging the Flutter app.

If you are building your app in release mode then the debug ribbon will be removed itself as it is only present if the app is building in debugging mode.

If you are using ScaffoldApp() widget then you can use the below code in your flutter app to hide the debug banner.

ScaffoldApp(
  debugShowCheckedModeBanner: false,
);

# Using android studio

If you are developing the Flutter app using Android Studio IDE then you can go to:

Flutter Inspector tab > More Actions > Hide Debug Mode banner

Was this helpful?
0 Comments