Debug banner is annoying

• while taking a screenshot
• if any widget behind it

Although it helps us to know it’s in debug mode.

Let’s remove that.

1. Use debugShowCheckedModeBanner with false value inside MaterialApp.

• Just use debugShowCheckedModeBanner property with MaterialApp.

just like below.

MaterialApp(
  debugShowCheckedModeBanner: false,
) 

Yes, that’s all you need.

Just put that property in MaterialApp and done. It works for the whole application.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'ANDROIDRIDE',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Remove Debug Banner Example'),
      ),
      body: Center(child: Text('Remove Debug Banner Example')),
    );
  }
}

For becoming a better Flutter developer, you should know the below ones too.

2. Use Flutter Inspector And Remove Banner In Android Studio

• If you are using Android Studio, you can easily select Flutter Inspector tab available at the right corner.

• Click on More Actions and select Hide Debug Mode Banner.

Yes..that’s done.

Run and check now.

3. Remove Debug Banner Using Flutter Commands

There are 3 modes available for Flutter App development

• Debug,
• Profile,
• Release,

Debug banner appeared to show developers that the app is in debug mode. In this mode, you can develop, fix bugs and Hot reload the application.

In Profile mode, you can analyze the performance of the Flutter app. Use DevTools, very useful.

You need to make a release version of your app to deploy it in the play store. In this mode, the debug banner will be avoided.

For running release version of your app, use this command

flutter run --release

• Use real devices rather than emulators or simulators.

Let’s make a build version of the app.

flutter build apk

• Flutter buid command – Make release version of the app

Check it out now.

Conclusion

While taking a screenshot, or updating a widget behind the debug banner (For example, the cart icon in the e-commerce app). Developers may get irritated due to the debug banner. So, sometimes it’s better to hide. Using the MaterialApp property is one of the easiest ways to remove it. Just one line of code, that’s done. But you can also test the other ways depending on your needs. If any steps I have missed, you can comment below.

• More Information: debugShowCheckedModeBanner MaterialApp
Keep Reading