How to Remove the Flutter Debug Banner

If you’re developing a Flutter app, you may have noticed a red banner with the word “DEBUG” appearing at the top right corner of your app’s screen. This banner is known as the Flutter debug banner, and it’s used to indicate that your app is currently running in debug mode.

While this banner is useful for developers, it can be distracting for end-users. In this tutorial, we’ll show you how to remove the Flutter debug banner from your app.

To remove the Flutter debug banner, you’ll need to make a small change to your code. Open the ‘main.dart’ file in your Flutter project and add the following line of code at the beginning of the ‘main’ method:

debugShowCheckedModeBanner: false,

Your code should now look something like this:

void main() { 
  runApp(MyApp()); 
}
class MyApp extends StatelessWidget { 
  @override Widget build(BuildContext context) { 
   return MaterialApp( debugShowCheckedModeBanner: false, home: MyHomePage(), ); 
  } 
}

By setting the ‘debugShowCheckedModeBanner’ property to ‘false‘, you’re telling Flutter to hide the debug banner in your app.

Save the changes to your ‘main.dart’ file, and re-run your app. The debug banner should no longer appear at the top right corner of your app’s screen.

If you want to show the debug banner again, simply change the ‘debugShowCheckedModeBanner’ property to ‘true’.