How to Remove Debug Banner in Flutter
By default, when you run your projects in debug mode Flutter shows a debug banner on the top right of the app bar. In this tutorial let’s learn how to hide this debug banner in Flutter.
Following is basic Flutter example with a Text placed at the center of the screen.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hide Debug banner in Flutter',
home: FlutterExample(),
);
}
}
class FlutterExample extends StatelessWidget {
const FlutterExample({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Remove Debug Banner in Flutter')),
body: Center(child: Text('Flutter Example')));
}
}
You can see the debug label at the top of the screen.
![flutter debug banner](https://codingwithrashid.com/wp-content/uploads/2021/03/WhatsApp-Image-2021-03-12-at-4.52.21-PM-498x1024.jpeg)
Now, let’s set debugShowCheckedModeBanner property as false on MaterialApp class. See the code given below.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hide Debug banner in Flutter',
debugShowCheckedModeBanner: false,
home: FlutterExample(),
);
}
}
class FlutterExample extends StatelessWidget {
const FlutterExample({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Remove Debug Banner in Flutter')),
body: Center(child: Text('Flutter Example')));
}
}
See the output now.
![hide debug banner flutter](https://codingwithrashid.com/wp-content/uploads/2021/03/WhatsApp-Image-2021-03-12-at-4.52.21-PM-1-498x1024.jpeg)
That’s how you remove debug label in Flutter.