How can I remove the debug banner in Flutter?

I'm using `flutter screenshot` and I expected the screenshot to not have a banner, but it has.

Note that I get a `not supported for emulator` message for profile and release mode.

The debug banner appears only while in development and is automatically removed in the release build.

To hide this there is a need to set `debugShowCheckedModeBanner` to `false`

MaterialApp(
debugShowCheckedModeBanner: false,
)

[![enter image description here][1]][1]


[1]:

On your MaterialApp set debugShowCheckedModeBanner to false.

MaterialApp(
debugShowCheckedModeBanner: false,
)
The debug banner will also automatically be removed on release build.

If you are using emulator or real device and you want to check it on release
mode then =>

flutter run release --apk

run this command on terminal Android Studio / Vs Code

In a Material app set `debugShowCheckedModeBanner` to `false`.

use this

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: AppTheme.appTheme,
home: HomePage(),
);
}
}

[official example][2]

MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Home'),
),
),
debugShowCheckedModeBanner: false, //setup this property
)

for more information, view the [official documentation][1].


[1]:

[To see links please register here]

[2]:

[To see links please register here]

If you are using [IntelliJ IDEA][1], there is an option in the Flutter Inspector to disable it.

Run the project:

[![Open the Flutter inspector][2]][2]

[![Hide the slow banner][3]][3]

When you are in the Flutter Inspector, click or choose "More Actions."

[![Picture of the Flutter Inspector][4]][4]

When the menu appears, choose "Hide Debug Mode Banner":

[![Picture of Hide Debug Mode Banner][5]][5]

[1]:

[To see links please register here]

[2]:

[3]:

[4]:

[5]:

There is also another way for removing the "debug" banner from the Flutter app. Now after a new release there is no `"debugShowCheckedModeBanner: false,"` code line in the main .dart file. So I think these methods are effective:

1. If you are using [Visual Studio Code][1], then install `*"Dart DevTools"* from extensions. After installation, you can easily find the *"Dart DevTools"* text icon at the bottom of Visual Studio Code. When you click on that text icon, a link will be opened in Google Chrome. From that link page, you can easily remove the banner by just tapping on the banner icon as shown in [this screenshot][2].

NOTE: [Dart DevTools][3] is a Dart language debugger extension in Visual Studio Code

2. If *Dart DevTools* is already installed in your Visual Studio Code, then you can directly open Google Chrome and open
the URL *"127.0.0.1: ZZZZZ/?hide=debugger&port=XXXXX"*

*Note*: In this link, replace "XXXXX" by 5 digit port-id (on which your Flutter app is running) which will vary whenever you use the `flutter run` command and replace "ZZZZZ" by your global (unchangeable) 5 digit debugger-id

*Note*: These Dart developer tools are only for the Google Chrome browser

[1]:

[To see links please register here]

[2]:

[3]:

[To see links please register here]

***Outdated***

- If you are using Android Studio, you can find the option in the Flutter Inspector tab → *More Actions*.

[![Android Studio][1]][1]

- Or if you're using Dart DevTools, you can find the same button in the top right corner as well.

[![Dart DevTools][2]][2]

[1]:

[2]:

Well, this is the simple answer you want.

```dart
MaterialApp(
debugShowCheckedModeBanner: false
)

CupertinoApp(
debugShowCheckedModeBanner: false
)
```

But if you want to go deep with the app (want a release APK file (which doesn't have a debug banner) and if you are using Android Studio then go to *Run* → *Flutter* → *Run 'main.dart' in Release mode*.