How To Remove The Debug Banner In A Flutter Application

Introduction

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.

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:

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

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

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

How to use location services in your Flutter application

In this article, we are having a look at location services and how we can get the current position of the device in our Flutter application.

How to install packages in your Flutter app

This short article shows how to add packages to a Flutter application so that you can use existing code and you don’t have to write everything yourself.

How to use the Flutter command-line interface

In this article, we are looking at the Flutter CLI and its most common use cases for building, testing, deploying, and running Flutter applications.