Flutter - How to Remove Debug Banner Tag

This tutorial shows you how to remove the debug banner in Flutter.

While you're developing a Flutter application and running the application in debug mode, usually you will see a debug banner at the top right of the application, as shown in the picture below.

You may not like the presence of that tag. How to hide the banner? Find out in this tutorial.

Remove Debug Banner Tag

Set debugShowCheckedModeBanner to False

Actually the banner will not be shown if you don't use MaterialApp. However, you need to use MaterialApp in most cases. In order to remove the banner, you have to set debugShowCheckedModeBanner to false when calling the constructor of MaterialApp.

  MaterialApp(
    debugShowCheckedModeBanner: false,
    // other arguments
  )

Output:

Use Profile/Release Mode

For non-debug modes (profile or release), the banner will be removed automatically. To run the application in profile or release mode, you need to add --profile or --release flag respectively. Below is an example of how to run a Flutter application in release mode.

  flutter run --release {filePath}

If you build APK files, you can do the similar thing by adding the --profile or --release flag. The below command is for building an APK in release mode.

  flutter build apk --release --target={filePath}

Full Code

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Woolha.com Flutter Tutorial',
        home: HomePage(),
        debugShowCheckedModeBanner: false,
      );
    }
  }
  
  class HomePage extends StatelessWidget {
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('Woolha.com Flutter Tutorial'),
        ),
        body: const Center(
          child: const Text('Woolha.com'),
        ),
      );
    }
  }

Summary

That's how to hide the debug banner tag in Flutter. If you're still developing the application, you can pass debugShowCheckedModeBanner to the constructor of MaterialApp and set the value to false. The debug banner will not be displayed in profile and release modes.