When you create a fresh new Flutter project, you must have observed the debug banner at the top right side of your app. You may want to remove the debug banner Flutter for iOS and Android in Android studio. So In this tutorial, we’ll learn how to remove debug banner in Flutter app.
Here’s what we’ll cover:
Why is Debug Banner Required
Debug banner can easily represent the build type i.e debug or release. When you run your app in debug mode, it is optimized for the development cycle. That means you may feel your app is slow in terms of performance which is not the case when you run your app in release mode.
How to Remove Debug Banner in Flutter
To remove the debug banner in Flutter for iOS and Android app, you can simply set the debugShowCheckedModeBanner to false inside the MaterialApp or CupertinoApp widget.
Here’s how you do it:
Step 1: Go to the MaterialApp or CupertinoApp widget.
Step 2: Add the debugShowCheckedModeBanner: false parameter inside the widget.
Step 3: Run your app.
Here’s how your code should look:
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
As you can see above, setting the debugShowCheckedModeBanner to false hides the debug banner.
Note: The debug banner will not appear when you run your app in release mode.
To run your app in release mode:
- Open the terminal.
- Enter the following command.
flutter run — release
Conclusion
In this tutorial, we learned how to remove debug banner in Flutter with a practical example.
More Articles:
