September 11, 2020

How to remove debug banner with Flutter

How to remove debug banner with Flutter

In this tutorial you will learn how to remove the debug banner from your Flutter app. I find this debug banner to be quite annoying but luckily there is a one line fix for it.

To remove the debug banner set the following property on your MaterialApp widget:

debugShowCheckedModeBanner: false,

After adding this my MaterialApp widget code looks like this:

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
  ),
  debugShowCheckedModeBanner: false, // Remove Debug Banner
  home: MyHomePage(title: 'Flutter Demo Home Page'),
);

If you want the full source code, you can find it here.