How To Remove The Debug Banner In A Flutter Application

Flutter category image

A productive app should not have it. So here is how you can remove the Flutter debug banner in your applications.

The debug banner should indicate that an app is currently under development. By default, it is displayed when you launch your Flutter app. A lot of beginners struggle with it and need help. However, the change is quite simple. So here is how to remove the debug banner in a Flutter application.

In case you don’t know what we are talking about, here is a screenshot of the said debug banner in a Flutter application.

Flutter app with a visible debug banner in the upper right corner
Flutter app with a visible debug banner in the upper right corner

If you don’t want the banner to be visible, you just need to set the debugShowCheckedModeBanner property of your MaterialApp widget to false.

Here is the code:

Dart
@override Widget build(BuildContext context) { 
    return MaterialApp( 
        title: 'Flutter Demo', 
        debugShowCheckedModeBanner: false, 
        theme: ThemeData(primarySwatch: Colors.blue), 
        home: const Home2()); 
}
Flutter app without a debug banner
Flutter app without a debug banner

And then, the label is gone! Easy as that!

🔔 Hint

When your app is built in release mode, the banner is automatically disabled.

Conclusion

In this guide you learned how to remove the debug banner in a Flutter application that is shown by default. One property change is enough, so it’s a quick solution. For more basic guide, have a look at the related articles.

Related articles