How to remove the debug banner in Flutter?

Flutter is a popular mobile application development framework that enables developers to create high-quality and visually appealing applications for both Android and iOS platforms. While building an application in Flutter, a debug banner is displayed at the top of the screen, which can be useful during the development phase, but it is not desirable in the final product. In this blog post, we will discuss how to remove the debug banner in Flutter.

What is the debug banner in Flutter?

The debug banner is a text banner that is displayed at the top of the screen when running a Flutter application in debug mode. This banner is designed to indicate that the application is running in debug mode and not in production mode.

While the debug banner can be useful during development, it is not suitable for a final product. Therefore, it is essential to remove the debug banner before publishing your application.

How to remove the debug banner in Flutter?

There are several ways to remove the debug banner in Flutter. In this blog post, we will discuss two of the most commonly used methods.

1. Remove the banner using the MaterialApp widget

The MaterialApp widget is the top-level widget in a Flutter application, and it is used to define the theme, routes, and other properties of the application. To remove the debug banner, you can set the debugShowCheckedModeBanner property of the MaterialApp widget to false.

Here’s an example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // Add this line
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Container(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

In the code above, we set the debugShowCheckedModeBanner property to false to remove the debug banner from the application.

2. Remove the banner using the ThemeData widget

Another way to remove the debug banner in Flutter is by setting the brightness property of the ThemeData widget to Brightness.dark. This method will not remove the debug banner completely, but it will change the banner’s color to match the dark theme.

Here’s an example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.dark, // Add this line
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Container(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

In the code above, we set the brightness property of the ThemeData widget to Brightness.dark to change the banner’s color to match the dark theme.

Conclusion

In conclusion, the debug banner in Flutter can be removed by setting the debugShowCheckedModeBanner property of the MaterialApp widget to false or setting the brightness property of the ThemeData widget to Brightness.dark. It is essential to remove the debug banner before publishing your application to ensure a professional and polished appearance.