[Flutter Tips] Remove the "DEBUG" banner of your Flutter app

When you start coding a new application with Flutter, you  will surely see a banner with "Debug" text displayed on the top right corner of your app. To remove it, you will need to set the debugShowCheckedModeBanner property of the MaterialApp (or CupertinoApp) widget to false.

🟢Here’s an example on how to do it:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,  // This removes the debug banner
      home: Scaffold(
        appBar: AppBar(
          title: Text('No Debug Banner'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

> debugShowCheckedModeBanner: false: 
This line ensures that the debug banner (the banner with "DEBUG" in the top-right corner) 
is not shown when the app is running in debug mode.

💡This setting is useful when you want to take screenshots or record a video of your app without the debug banner being visible.