Flutter – Remove DEBUG Banner
To remove DEBUG Banner that appears in Flutter application in the top right corner, set debugShowCheckedModeBanner property to false in MaterialApp widget.
Usually, the DEBUG banner appears in the the application, when you run the application in DEBUG mode.
Following is a quick code snippet to disable the DEBUG banner.
MaterialApp(
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
Example
In the following example Flutter project, we have used debugShowCheckedModeBanner property to hide the DEBUG banner.
main.dart
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Tutorial - googleflutter.com'),
backgroundColor: Color(0xFF444444),
),
body: Container(),
);
}
}
Screenshot
The following screenshot shows the difference between hiding DEBUG banner and showing DEBUG banner.
Summary
In this Flutter Tutorial, we learned how to hide DEBUG banner in the Flutter application while you are running in DEBUG mode.