Flutter: How to remove the debug banner during development

By default, Flutter shows a debug banner on the top right corner of an app, that indicates that the app was build in debug mode.

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.

https://api.flutter.dev/flutter/material/MaterialApp/debugShowCheckedModeBanner.html

But sometimes you want to remove this banner because it overlaps UI elements or other view elements. To do so, you can simply remove the debug banner by setting the debugShowCheckedModeBanner property of the MaterialApp widget to false. For example:

MaterialApp(
  debugShowCheckedModeBanner: false,
  // ...
)

This will remove the banner at the top right corner that indicates the app is in debug mode.

This banner is only visible in debug mode. When you compile your app in release mode, this banner is not visible at all.