A Quick Guide to Remove Debug Banner in Flutter

flutter remove debug banner

While building any app, Flutter shows a debug banner on the top right corner of the screen. This is to indicate that the app is in debug mode and it’s not fully developed yet. Any changes are can be expected at the moment and the whole app might get revamped as well. Interestingly, it won’t need more than 2 minutes for you to remove the debug banner from any Flutter app.

In the previous blog, we discovered how to change package name in Flutter. Today, we will be figuring out the only reliable way to remove debug banner in Flutter. 

The debug banner may or may not bother you, but we thought why not find out how to remove it in Flutter? So, without belating, let’s jump right into it. 😉

How to Remove Debug Banner in Flutter? 

To remove debug banner in Flutter, simply need to use MaterialApp() widget and call the ‘debugShowCheckedModeBanner’ and set this property to false. This will disable the debug banner to display on the screen. 

Here is an example of removing debug banner in Flutter.

As you can see in the screenshot below, there is the debug banner is displayed on the app screen.

Now, let’s remove it. Here is the code.

return MaterialApp(
  title: 'Debug Banner',
  debugShowCheckedModeBanner: false,
/// any other arguments
);

Output:

That’s it. As you can see, there is no banner in the app anymore. This is the only way you can remove debug banner in Flutter.

What Does the Debug Banner do?

A debug banner in Flutter is a visual indicator that displays information about the current build configuration of the app. This information can include the current build mode (debug or release), the Flutter version, and the device information. The purpose of the debug banner is to provide developers with a quick and easy way to identify the build configuration of the app while they are testing and debugging. This can be especially helpful for identifying problems that may only occur in a specific build mode or on a specific device.

Conclusion

This was it for the quick guide to removing debug banner in Flutter. We hope you got to learn a new thing today. We, at FlutterDesk, keep sharing such valuable information related to Flutter app development. Feel free to reach out to us with any questions or suggestions that you may have. Or you can hire flutter developers to take on your app development and help your business build a substantial product.

Thank you for standing by! See you in the next blog. 😉

Leave a Comment

Your email address will not be published. Required fields are marked *

Share Post On

Haroon Ashraf

Flutter Developer

Detail-oriented full-stack engineer with 9+ years of industry experience. He’s been working on Flutter since 2018 and has delivered 30+ successful projects.He has experience in project management Trello, Github, Jira…..

Flutter
Xcode
IOS-Swift
Full Stack
Bloc/Cubit
Nodejs

Experience

Availability

9 years

Full-Time

Translate »