How to remove the Development Debug Banner in Flutter
During the development process in Flutter, a red banner with the word "DEBUG" appears on the top right side of the screen. The debug banner is automatically removed when you build your application for release. However, if you want to remove the debug banner during development as well, it can be easily done. This post will guide you through the process for both the CupertinoApp and MaterialApp widgets.
When using the CupertinoApp
Let us start with the CupertinoApp widget. In the code below we set up a very basic application, with the main purpose of showing the debug banner.
import 'package:flutter/cupertino.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
backgroundColor: Color.fromRGBO(64, 156, 255, 1),
middle: Center(
child: Text(
'Remove the Debug Banner',
style: TextStyle(
color: Color.fromRGBO(255, 255, 255, 1),
),
),
),
),
child: SizedBox(),
),
);
}
}
When we run the main.dart file you will see the debug banner:
To remove the debug banner the only change we need to make is to add the following property inside our CupertinoApp widget: debugShowCheckedModeBanner and set its value to false.
return CupertinoApp(
debugShowCheckedModeBanner: false,
home: CupertinoPageScaffold( ... ),
);
In this code snippet, we set the debugShowCheckedModeBanner property of the CupertinoApp widget to false to remove the debug banner:
This change alone is enough to remove the debug banner.
When using the MaterialApp
For the MaterialApp widget, we can apply the same method. We only have to add the debugShowCheckedModeBanner property and set it to false, see the following code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Center(
child: Text('Remove the Debug Banner'),
),
),
body: SizedBox(),
),
);
}
}
In this code snippet, we set the debugShowCheckedModeBanner property of the MaterialApp widget to false to remove the debug banner:
Conclusion
Removing the debug banner during development in Flutter can easily be achieved by changing the value of the debugShowCheckedModeBanner property to false. Removing the debug banner can be great when you want to show your project to customers or your friends. Remember the debug banner will never be shown in your release build.
