Flutter: Hide debug banner

Nitish Kumar Singh
Nitish Kumar Singh
Clock Image 2 minutes
Posted on
December 25, 2020

Flutter: Hide debug banner

In order to hide the debug banner you just need to add one like of code.

debugShowCheckedModeBanner : false

Now, you will ask where to add this line of code. It’s very simple, just find the MaterialApp widget it’s usually in main.dart.

import 'package:flutter/material.dart';

void main() {

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // Add this line
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      home: MyHomePage(title: 'Flutter Demo Home Page'),

Suppose, we have a counter application: the default application comes when we create a new flutter app. Now you want to remove the banner from that application then move to main.dart file and you will find the similar code to above.

Do you know why this banner is there? #

This banner is intended to deter people from complaining that your app is slow when it’s in checked mode. In checked mode, Flutter enables a large number of expensive diagnostics to aid in development, and so performance in checked mode is not representative of what will happen in release mode.

Conclusion #

I hope this helped you and you got the idea that how to remove the debug banner. If you like and would like thank me then please share this with your friends.

Last updated at Saturday, Dec 26, 2020 by Nitish Kumar Singh
comments powered by Disqus

Subscribe to our Newsletter

Tweet this article Tweet this article