Flutter – Remove the Debug Banner

In this article, we will implement How to Remove the Debug Banner in Flutter. Debug Banner is a red color strip that is placed top right of the Flutter Application. A sample image is given below to get an idea about what we are going to do in this article.

Debug Banner

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the material package

Add the material package that gives us the important functions and calls the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';
void main() {
   runApp(RunMyApp());
}

Step 3: Creating Stateless Widget

Now we have to make a stateless widget because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more.

class RunMyApp extends StatelessWidget {
   const RunMyApp({super.key});
   
   @override
   Widget build(BuildContext context) {
       return MaterialApp();
   }
}

Step 4: Now in MaterialApp we can use the property debugShowCheckedModeBanner that accepts the bool value and if we make it false debugShowCheckedModeBanner is removed.

debugShowCheckedModeBanner: false,

Final Code

Dart

import 'package:flutter/material.dart';

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

class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
     debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(appBar: AppBar(title: Text('Remove Debug Banner'),),
      body: Center(child: Text('Debug Banner is  removed'),),
      ),
    );
  }
}

Output

Without Debug Banner