A tiny but flashy UI detail when running your first Flutter apps can barely be missed: the debug banner on the top right. Questions arise:
- What is the actual purpose?
- Can it be configured or hidden?
- Can we make our own individual banner?
What is the purpose?
There are three supported modes which configure the compilation of a Flutter app. These are called build modes:
You probably already know about the main benefits of the
Debug build but you may not know that they’re exclusively available for this build mode:
- Hot reload is available
- Compilation times are reduced
- Debugging is enabled
As great as these attributes are for the development process, as problematic would they be if they were enabled in a production build.
Depending on your development process, you may often switch between
Release modes. To see at a glance whether you are building in
Debug mode or not, the banner is displayed (or hidden). Otherwise, you might see behaviors such as poor performance as a problem with your application, rather than an intentional behavior of the build mode.
The official purpose mentioned by flutter.dev is:
This banner is intended to deter people from complaining that your app is slow when it’s in debug mode. In debug mode, Flutter enables a large number of expensive diagnostics to aid in development, and so performance in debug mode is not representative of what will happen in release mode.
How to remove it
There are good reasons to temporarily or permanently remove it:
- Making screenshots (e. g. for marketing purposes)
- Preventing the banner to cover important parts of the UI during development
Using the respective parameter
As the name of the parameter suggests, it influences the debug mode builds and hides the banner, which is displayed by default.
Compiling a release build
By compiling a release build of your app, the banner will automatically be hidden. This mode is however not supported on simulators. In order to trigger such a build via CLI, use the following command:
1flutter run --release
Instead of directly running the release build, you can also build your app (e. g. an apk file), which will also create a release build like this:
1flutter build apk
How to create our own banner
What happens under the hood when we trigger a debug build and set
debugShowCheckedModeBanner not explicitly to
false, is that everything inside the widget tree is wrapped with a
But what is
build() function of it says it all:
It seems like the
CheckedModeBanner itself is nothing more than an a preconfigured
Banner widget with the label
DEBUG and its location on the top right.
debugShowCheckedModeBanneris evaluated inside the
WidgetsApp, which is the base for
- It determines whether everything is wrapped with
MaterialAppbuilds one of these by default when running in debug mode
CheckedModeBanneris nothing else than a configured
Doesn’t that mean that we can directly use the
Banner widget and configure it differently for our own purpose?
We can alter the
textStyle and the
location. Be aware that too long texts will be clipped, though.
The debug banner, as annoying as it can be when making screenshots, has its raison d’être. It drastically reduces the likeliness of situations in which the tester is tricked into thinking it’s a release build with a poor performance.
There are situations, in which it’s more appropriate to hide it. For this purpose, there is a respective parameter.
If one wants to customize the banner (e. g. put the current app version there), it’s possible using the