753

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.

5
  • 10
    debugShowCheckedModeBanner: false
    – xgqfrms
    Jul 31, 2019 at 5:42
  • 23
    add debugShowCheckModeBanner:false in MaterialApp() Widget and that should remove the banner on hot reload Aug 30, 2019 at 15:34
  • 3
    debugShowCheckModeBanner: false in MaterialApp - most used one. You can also disable it using Android Studio. 3 Ways To Remove Debug Banner In Flutter
    – c49
    Jun 29, 2021 at 7:09
  • 1
    In materialApp properties debugShowCheckedModeBanner make it false
    – harun_me
    Aug 4 at 1:34
  • debugShowCheckedModeBanner, not debugShowCheckModeBanner as stated in some comments above
    – danronmoon
    Aug 11 at 17:30

31 Answers 31

1447
+50

On your MaterialApp set debugShowCheckedModeBanner to false.

MaterialApp(
  debugShowCheckedModeBanner: false,
)

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

9
  • 57
    Usage: return new MaterialApp( home: new LoginPage(), debugShowCheckedModeBanner: false, theme: new ThemeData( primarySwatch: Colors.green, )); May 11, 2018 at 13:10
  • 4
    do i need to use debugShowCheckedModeBanner: false on each class means activity ?
    – Ashish
    May 12, 2019 at 4:58
  • 14
    The flutter tool's built-in screenshot command also knows how to automatically remove the "debug" banner while taking a screenshot if that's helpful. Jul 1, 2019 at 15:47
  • 1
    @EricSeidel Not by default it doesn't (Flutter 1.16.4-pre.18 • channel master • github.com/flutter/flutter.git Framework • revision c8efcb632b (6 weeks ago) • 2020-03-27 22:31:01 -0700 Engine • revision 3ee9e3d378) Is there a trick to enable this?
    – Thomas
    May 11, 2020 at 7:40
  • 1
    Is there any way to show it in release build? I am building a release versions but for dev/production environments May 26, 2020 at 12:32
125

Outdated

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

    Android Studio

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

    Dart DevTools

1
  • 2
    Disappeared on the DevTools View, but I have found it through AndroidStudio
    – stan
    Jan 25, 2021 at 19:39
73

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 RunFlutterRun 'main.dart' in Release mode.

48

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

Run the project:

Open the Flutter inspector

Hide the slow banner

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

Picture of the Flutter Inspector

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

Picture of Hide Debug Mode Banner

1
  • 4
    This menu and related item doesn't exist in idea 2020.3 and flutter 55.0.3
    – AaA
    Apr 13, 2021 at 2:00
36

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

30

Three ways to remove flutter debug banner:-

1. In the MaterialApp/ScaffoldApp

Snippet

MaterialApp(
  debugShowCheckedModeBanner: false,
)

OR

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

enter image description here

29

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

  1. 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

0
20

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

18

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

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

    Code:

    MaterialApp(
      debugShowCheckedModeBanner: false,
    )
    

    And then do a hot reload.

  2. The second possibility is to hide debug mode banner in Flutter Inspector if you use Android Studio or IntelliJ IDEA.

    Enter image description here

  3. The third possibility is to use Dart DevTools.

1
  • 2
    This menu and related item doesn't exist in idea 2020.3 and flutter 55.0.3
    – AaA
    Apr 13, 2021 at 2:00
15

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.

15

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:

Enter image description here

11

In a Material app set debugShowCheckedModeBanner to false.

9

official example

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

for more information, view the official documentation.

8

Just do this in your MaterialApp or GetMaterialApp add this line debugShowCheckedModeBanner to false.

like this

MaterialApp(
  debugShowCheckedModeBanner: false,
)
7

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.

7

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

release

enter image description here

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.

7

set debugShowCheckedModeBanner to false in MaterialApp Widget and you are good to go. See the below example for a better understanding.

MaterialApp(
  debugShowCheckedModeBanner: false,
)
6

To hide the debug banner: For android: In MaterialApp widget select false, by default debugShowCheckedModeBanner. is true.

 MaterialApp(
      debugShowCheckedModeBanner: false,
    )

For IOS CupertinoApp:

CupertinoApp(
  debugShowCheckedModeBanner: false
)
5

use this

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

You can do like this

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
  debugShowCheckedModeBanner: false, // Remove the debug banner
  // ... other configurations and routes
);
}
}
3

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

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

You can use debugShowCheckedModeBanner inside MaterialApp:

return MaterialApp(
  debugShowCheckedModeBanner: false,
  ...
);
2

Just set debugShowCheckedModeBanner to false ->

return MaterialApp(
  debugShowCheckedModeBanner: false,
  home: Scaffold(
  body: Container(),
),
);
1

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

1
  • Though we thank you for your answer, it would be better if it provided additional value on top of the other answers. In this case, your answer does not provide additional value, since another user already posted that solution. If a previous answer was helpful to you, you should vote it up once you have enough reputation
    – lepsch
    Sep 16, 2022 at 6:26
1

set debugShowCheckedModeBanner to false

MaterialApp(
  debugShowCheckedModeBanner: false,
)
1

Simple: Go in ur main.dart or MyApp.dart and write this in MaterialApp

MaterialApp(
  debugShowCheckedModeBanner: false,
)
1

In case your project have multiple MaterialApp, you must put the debugShowCheckedModeBanner: false under every MaterialApp. I do that and it's work perfectly, hope this help someone like me.

1

The property debugShowCheckedModeBanner defaults to true so that the DEBUG banner showing on top right corner. You just change it to false and re-run the Flutter application, then the banner will disappear.

  @override
  Widget build(BuildContext context) {
    return ListenableBuilder(
      listenable: settingsController,
      builder: (BuildContext context, Widget? child) {
        return MaterialApp(

          debugShowCheckedModeBanner: false,

          restorationScopeId: 'app',
          localizationsDelegates: const [
            AppLocalizations.delegate,
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
            GlobalCupertinoLocalizations.delegate,
          ],
          supportedLocales: const [
            Locale('en', ''), // English, no country code
          ],
        )
     });
  }

0

MaterialApp( debugShowCheckedModeBanner: false, )

Make debugShowCheckedModeBanner is false then it will be invisible

0

Simply edit your main.dart file and set value of debugShowCheckedModeBanner to false.

Example:

MaterialApp(
  debugShowCheckedModeBanner: false
)

Happy Fluttering!

Not the answer you're looking for? Browse other questions tagged or ask your own question.