How to Remove the Debug Banner in a Flutter ?

In Flutter, the debug banner is displayed at the top-right corner of your app’s screen when running in debug mode. To remove the debug banner, you can follow these steps:

1. Check for Debug Mode

Make sure that you are running your app in release mode. You can do this by using the following command in the terminal:

flutter run --release

2. Use MaterialApp’s debugShowCheckedModeBanner Property

In your main.dart file, locate the MaterialApp widget and set the debugShowCheckedModeBanner property to false. Here’s an example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // Set this to false
      title: 'Your App Title',
      home: YourHomePage(),
    );
  }
}

class YourHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your App Title'),
      ),
      body: YourContent(),
    );
  }
}

// ... Your other widgets and classes

By setting debugShowCheckedModeBanner to false, you instruct Flutter to hide the debug banner even if you are running in debug mode.

3. Restart the App

After making these changes, restart your app to see the changes take effect. The debug banner should no longer be displayed.

Keep in mind that it’s a good practice to only set debugShowCheckedModeBanner to false in release mode, as it helps in identifying whether your app is running in debug or release mode during development. When testing or debugging, you might still want to see the debug banner to ensure that you are not accidentally working on the release build.

Remember to set it back to true when you are ready to release your app.