Reputation: 31401

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.

Upvotes: 811

Answers (18)

Nehal Babu

Reputation: 90

If you're seeing the debug banner (DEBUG) in your Flutter app and want to remove it, you can do so by setting the debugShowCheckedModeBanner property of the MaterialApp (or CupertinoApp) widget to false.

Example:

MaterialApp(
  debugShowCheckedModeBanner: false, // Hides the debug banner
  home: YourHomePage(),
)

Why is the Debug Banner Appearing in Screenshots?

The debug banner appears because the app is running in debug mode. This banner is Flutter's way of indicating that the app isn't running in production.

If you're taking screenshots and don't want the banner:

Set debugShowCheckedModeBanner to false: This removes the banner while staying in debug mode.
Use Profile or Release Mode (Preferred for production-like screenshots):

Profile

flutter run --profile
Release

flutter run --release

Note: Profile and release modes aren't supported on emulators. You'll need a physical device for these modes.

Additional Tips: If you still need to take screenshots programmatically, you can use a package like flutter_native_screenshot to capture the UI without debug banners.

Let me know if you need more help!

Upvotes: 1

Naimish Patel

Reputation: 67

add debugShowCheckedModeBanner: false, into the materialApp Widget.

 MaterialApp(
  debugShowCheckedModeBanner: false
)

Upvotes: 0

Adeel Nazim

Reputation: 724

If you are using the Material library

MaterialApp(
  debugShowCheckedModeBanner: false
)

If you are using the GetX library

GetMaterialApp(
  debugShowCheckedModeBanner: false
)

If you are using the Cupertino library

CupertinoApp(
  debugShowCheckedModeBanner: false
)

Upvotes: 3

loopassembly

Reputation: 3883

Three ways to remove flutter debug banner:-

1. In the MaterialApp/ScaffoldApp

Snippet

MaterialApp(
  debugShowCheckedModeBanner: false,
)

ScaffoldApp(
             debugShowCheckedModeBanner: false,
        );

2.By making release version of your app

For running release version of your app, use this command

flutter run --release

Or if using real devices rather than emulators or simulators. make a build version of the app.

flutter build apk

3.BY using dart dev tool to remove debug banner

IN vs code type ctr+shift+pin windows and for mac cmd+shift+p and use this command to open dart dev tool

Dart: Open DevTools

Upvotes: 42

Rémi Rousselet

Reputation: 277567

On your MaterialApp set debugShowCheckedModeBanner to false.

MaterialApp(
  debugShowCheckedModeBanner: false,
)

The debug banner will also automatically be removed on the release build.

Upvotes: 1554

Mohit Khandelwal

Reputation: 57

This is the simplest way.

For : MaterialApp( debugShowCheckedModeBanner: false )

For : CupertinoApp( debugShowCheckedModeBanner: false )

If you are logically handle another flutter components them you use a bool variable & handle it. For Example bool isDebug === false ;

if(isDebug == true) { debugShowCheckedModeBanner: true }

else { debugShowCheckedModeBanner: false }

Thanks & Enjoy)):

Upvotes: 3

Sarthak Raval

Reputation: 1291

If you use Scaffold in Return Section so add on Top MaterialApp and Restart

void main() => runApp(
      const MaterialApp(
                 debugShowCheckedModeBanner: false, 
                 home: Home()),
      );

Upvotes: 8

vs97

Reputation: 5859

If you are still in debug mode, you can switch to release mode and the banner will be gone.

You can also open the same Run/Debug Configurations window via shortcuts:

ALT+SHIFT+F10, then Press 0 and Press ALT+a.

Now enter --release.

Upvotes: 10

alexbhandari

Reputation: 1398

All other answers are great for Android Studio, but if using Visual Studio Code there is a command you can use to toggle this easily. Open the command palette (Mac: Cmd + Shift + P or Windows: Ctrl + Shift + P). Then type toggle debug-mode banner as shown below:

Upvotes: 18

Muhammad Umair Saqib

Reputation: 1865

Use:

MaterialApp(
  debugShowCheckedModeBanner: false,
)

This is the code for removing this banner. The debug banner is due to MaterialApp, e.g., you can see this banner on all that pages that use MaterialApp.

There should be at least one MaterialApp in your app on main root.

Upvotes: 18

Kab Agouda

Reputation: 7289

To remove the Flutter debug banner, there are several possibilities:

The first one is to use the debugShowCheckModeBanner property in your MaterialApp widget.

Code:
```
MaterialApp(
  debugShowCheckedModeBanner: false,
)
```
And then do a hot reload.
The second possibility is to hide debug mode banner in Flutter Inspector if you use Android Studio or IntelliJ IDEA.
The third possibility is to use Dart DevTools.

Upvotes: 23

Shirsh Shukla

Reputation: 5993

It's the app.dart class property.

It displays a banner, saying "DEBUG" when running in checked mode. MaterialApp builds one of these by default.

For disabling this banner in debug mode also, you can set a Boolean false.

return MaterialApp(
  theme:....
  debugShowCheckedModeBanner: false,
  home: SplashScreen(),
);

In release mode this has no effect.

Upvotes: 10

vivek yadav

Reputation: 1547

Well, this is the simple answer you want.

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.

Upvotes: 82

tottomotto

Reputation: 2352

Outdated

If you are using Android Studio, you can find the option in the Flutter Inspector tab → More Actions.
Or if you're using Dart DevTools, you can find the same button in the top right corner as well.

Upvotes: 130

Surendra Kumar

Reputation: 429

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:

If you are using Visual Studio Code, 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.

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

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

Upvotes: 32

Mamnarock

Reputation: 1174

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

Run the project:

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

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

Upvotes: 52

Awais Rehman

Reputation: 674

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

Upvotes: 23

Javeed Ishaq

Reputation: 7105

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,
)

Upvotes: 45