Remove debug ribbon or banner in Flutter

- Andrés Cruz

En español

Remove debug ribbon or banner in Flutter

The Flutter debug banner is a very useful tool for developers building applications using Flutter. When activated, the banner is displayed in the upper right corner of the screen and contains important information about the running application, such as the name of the running mode, version number, build number, and device identifier.

The debug banner is especially useful during the development process, as it allows the developer to quickly identify the version of the application they are using and to verify that the application is running in the correct mode. It can also help identify bugs or problems in the application and make debugging easier.

It is important to note that the debug banner is automatically displayed when running an application in debug mode. If you want to change the visibility or content of the banner, you can do so through the settings in the Flutter code.

The debug ribbon is an annoying red side banner that appears in the upper right corner of any application that we are developing in Flutter; this may seem useful or curious when we are developing our application,

The tape can be a bit annoying and of course we have to remove it when we go to for example production environment; For this purpose we can easily do it through a property called debugShowCheckedModeBanner that we have to import from:

import 'package:flutter/services.dart';

Así que, construyendo un ejemplo mínimo, quedaría para de la siguiente forma:

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.indigo
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Primera App"),
        ),
        body:Center(
          child: new Text("Hola Mundo", style: TextStyle(color :Colors.indigo, fontSize: 50),)
        )
      ),
    );
  }
}

Y con esto adiós al banner debug de Flutter; en esta entrada, aprendistes a eliminar la molesta cinta que indica que estamos desarrollando o testeando nuestras aplicaciones en Flutter para Android o iOS.

Andrés Cruz

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy

I agree to receive announcements of interest about this Blog.