How to remove the Flutter debug banner

Question

How to remove the debug banner in flutter  I am using flutter screenshot and I would like the screenshot not to have banner  Now it does have  Note that I get not supported for emulator message for profile and release mode

User · Accepted Answer

On your MaterialApp set debugShowCheckedModeBanner to false  MaterialApp    debugShowCheckedModeBanner  false     The debug banner will also automatically be removed on release build

User · Answer

Here are 3 ways to do it  1   On your MaterialApp set debugShowCheckedModeBanner to false   MaterialApp     debugShowCheckedModeBanner  false     The slow banner will also automatically be removed on release build   2   If you are using Android Studio  you can find the option in the Flutter Inspector tab -- gt  More Actions    3   There is also another way for removing the  quot debug quot  banner from the flutter app  Now after new release there is no  quot debugShowCheckedModeBanner  false  quot  code line in main  dart file  So I think these methods are effective  -- gt  If you are using VS Code  then install  quot Dart DevTools quot  from extensions  After installation  you can easily find  quot Dart DevTools quot  text icon at the bottom of VS Code  When you click on that text icon  a link will be open in google chrome  From that link page  you can easily remove the banner by just tapping on the banner icon as shown     For more info  How to remove debug banner in flutter on android emulator

User · Answer

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

User · Answer

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

User · Answer

MaterialApp  debugShowCheckedModeBanner  false

User · Answer

You can give simply hide this by giving a boolean parameter----- gt  debugShowCheckedModeBanner  false  void main       Bloc observer   SimpleBlocDelegate       runApp MyApp        class MyApp extends StatelessWidget        This widget is the root of your application     override   Widget build BuildContext context        return MaterialApp        debugShowCheckedModeBanner  false        title   Prescription Writing Software         theme  ThemeData          primarySwatch  Colors blue          scaffoldBackgroundColor  Colors white          visualDensity  VisualDensity adaptivePlatformDensity                 home  SplashScreen

User · Answer

Just add debugShowCheckedModeBanner  false in MaterialApp  3 ways - Remove Debug Banner In Flutter

User · Answer

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    3- The third possibility is to use Dart DevTools

User · Answer

Well this is simple answer you want   MaterialApp   debugShowCheckedModeBanner  false     But if you want to go deep with app  Want a release apk  which don t have debug banner  and if you are using android studio then go to      Run -  Flutter Run  main dart  in Relese mode

User · Answer

There is also another way for removing the  quot debug quot  banner from the flutter app  Now after new release there is no  quot debugShowCheckedModeBanner  false  quot  code line in main  dart file  So I think these methods are effective   If you are using VS Code  then install  quot Dart DevTools quot  from extensions  After installation  you can easily find  quot Dart DevTools quot  text icon at the bottom of the VS Code  When you click on that text icon  a link will be open 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 VS Code  If Dart DevTools is already installed in your VS Code  then you can directly open the google chrome and open this URL    quot 127 0 0 1  ZZZZZ  hide debugger amp port XXXXX quot   NOTE --  In this link  replace  quot XXXXX quot  by 5 digit port-id  on which your flutter app is running  which will vary whenever you use  quot flutter run quot  command and replace  quot ZZZZZ quot  by your global unchangeable  5 digit debugger-id NOTE --  these dart dev tools are only for  quot Google Chrome Browser quot

User · Answer

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

[flutter] How to remove the Flutter debug banner?

Examples related to flutter

Examples related to android-emulator