How to Remove the DEBUG Banner in Flutter App

In this tutorial, you will learn how to remove the DEBUG banner in the Flutter app.

If you run Flutter mobile application on an Android emulator or iOS simulator it will show a DEBUG label in the right side upper corner.

Flutter DEBUG banner

Removing the DEBUG Banner

The DEBUG label will be automatically removed when you build your Flutter mobile application in a release mode. However, this label can be removed from a debug app as well. Let’s learn how to do it.

To remove or hide the DEBUG label in your Flutter app, set the debugShowCheckedModeBanner property to false in the MaterialApp widget of your application.

runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false
...

Below is a complete code example of a very simple Flutter mobile application. Notice the value of the debugShowCheckedModeBanner property in the MaterialApp widget. It is set to false. Setting the debugShowCheckedModeBanner to false will hide the DEBUG label.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: Center(child: Text('My first app')),
      ),
          body: Text('Hello'),
    )),
  );
}

Video Tutorial

I hope this very short Flutter tutorial was helpful to you. If you are interested to learn Flutter, there are many more tutorials in the Flutter category on this site. Have a look at it. You might find more tutorials that you will like.

Happy learning!


Leave a Reply

Your email address will not be published. Required fields are marked *

Free Video Lessons

Enter your email and stay on top of things,

Subscribe!