3 Easy Steps to Hide Debug Banner in Flutter

Have you ever noticed the debug banner at the top right corner of your Flutter app when you create a new project? If you want to get rid of it in your app’s iOS and Android versions, then you’re in luck. This tutorial will guide you through hide debug banner in Flutter app.

Is Debug Banner Really Required?

The debug banner in Flutter indicates that the app is running in debug mode. It is designed to help developers easily distinguish between a debug and a release version of the app.

How to Hide Debug Banner in Flutter

To easily hide the debug banner in your Flutter app, you can follow these simple steps:

Step 1: Navigate to the MaterialApp or CupertinoApp widget in your code.

Step 2: Inside the widget, add the parameter “debugShowCheckedModeBanner: false“.

Step 3: Save your changes and run the app.

By following these steps, the debug banner will no longer be visible in your app. Here’s an example of what your code should look like after you’ve made the necessary changes:

@override
Widget build(BuildContext context) {
  return MaterialApp(
    // this is the parameter you need to require in order to remove the debug banner
    debugShowCheckedModeBanner: false,
    title: 'IntendStuff Remove Debug Banner in Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.grey,
    ),
    home: const MyHomePage(title: 'IntendStuff'),
  );
}

Conclusion

In conclusion, disabling the debug banner in your Flutter app is a quick and easy process. By following the three simple steps outlined in this blog, you can disable debug banners in a flutter. Comment down if you have any questions related to flutter and check out our other blog as well on programming.