How can I remove the debug banner in Flutter?

Question

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.

add ```debugShowCheckModeBanner:false``` in MaterialApp() Widget and that should remove the banner on hot reload — Mahesh Jamdade, Aug 30 '19 at 15:34
debugShowCheckModeBanner: false in MaterialApp - most used one. You can also disable it using Android Studio. [3 Ways To Remove Debug Banner In Flutter](https://androidride.com/how-to-remove-debug-banner-in-flutter/) — c49, Jun 29 '21 at 07:09
In materialApp properties debugShowCheckedModeBanner make it false — harun_me, Aug 04 '23 at 01:34
*debugShowCheckedModeBanner*, _not_ debugShowCheckModeBanner as stated in some comments above — danronmoon, Aug 11 '23 at 17:30

score 1430 · Accepted Answer · edited Sep 13 '22 at 14:04

1430

On your MaterialApp set debugShowCheckedModeBanner to false.

MaterialApp(
  debugShowCheckedModeBanner: false,
)

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

edited Sep 13 '22 at 14:04

Ramesh R

7,009
4
25
38

answered Feb 20 '18 at 20:48

Rémi Rousselet

256,336
79
519
432

56

Usage: `return new MaterialApp( home: new LoginPage(), debugShowCheckedModeBanner: false, theme: new ThemeData( primarySwatch: Colors.green, ));` – Alex Angelico May 11 '18 at 13:10
3

do i need to use `debugShowCheckedModeBanner: false` on each class means activity ? – Ashish May 12 '19 at 04: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. – Eric Seidel Jul 01 '19 at 15:47
1

@EricSeidel Not by default it doesn't (Flutter 1.16.4-pre.18 • channel master • https://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 '20 at 07:40
1

Is there any way to show it in release build? I am building a release versions but for dev/production environments – Moti Bartov May 26 '20 at 12:32
1

ehmmm guys it's been outdated but I need to ask. what if I don't have a MaterialApp widget in my project? where should I put the debugshowcheck property? or maybe is there another way around getting rid of that debug text? – Obink Jul 06 '21 at 02:37
1

@AlexAngelico no need of `new` keyboard – Mohsin AR Jul 22 '21 at 00:18
@Obink If you are using `WidgetsApp`, `MaterialApp`, or `CupertinoApp`, the process is the same. Otherwise, there should be no debug banner by default. If you wish to have the banner, wrap your tree with a `CheckedModeBanner` widget. – Lee3 Jun 09 '22 at 19:43
@Moti Bartov Just show your own little picture? – The incredible Jan Nov 15 '22 at 12:45

score 124 · Answer 2 · edited Apr 26 '22 at 22:15

124

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.

edited Apr 26 '22 at 22:15

Peter Mortensen

30,738
21
105
131

answered May 13 '19 at 10:12

tottomotto

2,193
2
22
29

2

Disappeared on the DevTools View, but I have found it through AndroidStudio – stan Jan 25 '21 at 19:39

score 72 · Answer 3 · edited Apr 26 '22 at 22:17

72

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.

edited Apr 26 '22 at 22:17

Peter Mortensen

30,738
21
105
131

answered Jul 14 '19 at 19:52

vivek yadav

1,367
2
12
16

score 47 · Answer 4 · edited Apr 26 '22 at 21:57

47

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

edited Apr 26 '22 at 21:57

Peter Mortensen

30,738
21
105
131

answered Mar 09 '18 at 15:23

Mamnarock

1,128
1
9
5

4

This menu and related item doesn't exist in idea 2020.3 and flutter 55.0.3 – AaA Apr 13 '21 at 02:00

score 33 · Answer 5 · answered Dec 06 '20 at 09:15

33

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

answered Dec 06 '20 at 09:15

Javeed Ishaq

6,024
6
41
60

loopassembly · Answer 6 · 2022-12-19T13:15:58.067

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

score 29 · Answer 7 · edited Apr 26 '22 at 22:13

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

score 20 · Answer 8 · answered Sep 30 '21 at 07:43

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

score 18 · Answer 9 · edited Apr 26 '22 at 22:36

18

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.

edited Apr 26 '22 at 22:36

Peter Mortensen

30,738
21
105
131

answered Dec 10 '20 at 15:03

Kab Agouda

6,309
38
32

2

This menu and related item doesn't exist in idea 2020.3 and flutter 55.0.3 – AaA Apr 13 '21 at 02:00

score 15 · Answer 10 · edited Apr 26 '22 at 22:37

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.

edited Apr 26 '22 at 22:37

Peter Mortensen

30,738
21
105
131

answered Apr 07 '21 at 05:25

Muhammad Umair Saqib

1,287
1
9
20

score 15 · Answer 11 · edited Apr 26 '22 at 22:41

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:

edited Apr 26 '22 at 22:41

Peter Mortensen

30,738
21
105
131

answered Aug 04 '21 at 00:55

alexbhandari

1,310
12
21

score 11 · Answer 12 · edited Sep 30 '21 at 23:15

11

In a Material app set debugShowCheckedModeBanner to false.

edited Sep 30 '21 at 23:15

jmizv

1,172
2
11
28

answered Sep 25 '21 at 08:22

x86

489
1
6
16

score 9 · Answer 13 · answered Mar 22 '22 at 13:54

9

official example

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

for more information, view the official documentation.

answered Mar 22 '22 at 13:54

Aymen

1,476
18
28

score 8 · Answer 14 · answered May 23 '22 at 18:30

8

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

like this

MaterialApp(
  debugShowCheckedModeBanner: false,
)

answered May 23 '22 at 18:30

Adeel Nazim

640
6
17

score 7 · Answer 15 · edited Apr 26 '22 at 22:29

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.

edited Apr 26 '22 at 22:29

Peter Mortensen

30,738
21
105
131

answered Dec 04 '20 at 10:22

Shirsh Shukla

5,491
3
31
44

score 7 · Answer 16 · answered May 02 '22 at 17:01

7

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.

answered May 02 '22 at 17:01

vs97

5,765
3
28
41

score 7 · Answer 17 · answered Aug 04 '22 at 07:46

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

answered Aug 04 '22 at 07:46

Muhammad Mohsin

380
2
5

Muhammad Awais · Answer 18 · 2022-08-25T12:11:49.957

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
)

edited Aug 25 '22 at 12:11

answered Aug 25 '22 at 12:07

Muhammad Awais

141
1
5

score 5 · Answer 19 · edited Feb 26 '22 at 14:15

5

use this

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

edited Feb 26 '22 at 14:15

MNBWorld

529
1
5
25

answered Feb 15 '22 at 07:57

sumanth

318
1
6
25

score 5 · Answer 20 · answered May 30 '23 at 12:51

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
);
}
}

score 3 · Answer 21 · answered May 06 '22 at 08:09

3

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

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

answered May 06 '22 at 08:09

Sarthak Raval

1,001
1
10
23

score 3 · Answer 22 · edited Jul 05 '22 at 12:19

3

You can use debugShowCheckedModeBanner inside MaterialApp:

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

edited Jul 05 '22 at 12:19

murat

72
1
1
11

answered May 20 '22 at 04:27

Abin vs

103
5

score 1 · Answer 23 · answered Sep 12 '22 at 04:35

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

answered Sep 12 '22 at 04:35

Mohit Khandelwal

29
6

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](https://stackoverflow.com/help/privileges/vote-up) once you have enough [reputation](https://stackoverflow.com/help/whats-reputation) – lepsch Sep 16 '22 at 06:26

score 1 · Answer 24 · edited Mar 07 '23 at 02:59

1

set debugShowCheckedModeBanner to false

MaterialApp(
  debugShowCheckedModeBanner: false,
)

edited Mar 07 '23 at 02:59

Saad

539
2
19

answered Nov 27 '22 at 15:47

Mobasshir Imam

75
3

Xuân Cường · Answer 25 · 2023-04-08T16:33:04.680

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.

edited Apr 08 '23 at 16:33

answered Mar 23 '23 at 07:32

Xuân Cường

81
2
10

score 1 · Answer 26 · answered Mar 30 '23 at 06:50

1

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

MaterialApp(
  debugShowCheckedModeBanner: false,
)

answered Mar 30 '23 at 06:50

Syed Rehan

651
1
3
11

score 0 · Answer 27 · answered Aug 04 '23 at 01:33

0

MaterialApp( debugShowCheckedModeBanner: false, )

Make debugShowCheckedModeBanner is false then it will be invisible

answered Aug 04 '23 at 01:33

harun_me

111
1
4

score 0 · Answer 28 · answered Aug 21 '23 at 11:34

0

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

Example:

MaterialApp(
  debugShowCheckedModeBanner: false
)

Happy Fluttering!

answered Aug 21 '23 at 11:34

Pranav Dave

393
5
7

score -1 · Answer 29 · edited May 02 '23 at 07:10

-1

well, it is under MaterialApp().

MaterialApp(
  debugShowCheckedModeBanner: false,
)

It should work.

edited May 02 '23 at 07:10

Hamed

5,867
4
32
56

answered Apr 28 '23 at 10:53

Tanvir Akon

9
2

How can I remove the debug banner in Flutter?

29 Answers29

Three ways to remove flutter debug banner:-

1. In the MaterialApp/ScaffoldApp

2.By making release version of your app

3.BY using dart dev tool to remove debug banner

Linked

Related