Al principio, yo también me volví loco buscando cómo quitar esa bendita etiqueta "DEBUG" que aparece en la esquina superior derecha de las apps Flutter. De hecho, me costó entender que la solución no estaba donde yo creía, y que la plataforma ya tenía una forma simple de manejarlo.
Es un problema clásico. Estás desarrollando, todo funciona bien, y luego necesitas mostrarle un avance al cliente o tomar una captura de pantalla. ¡PUM! Ahí está la etiqueta. Me acuerdo una vez que un cliente me pidió unas capturas para una presentación y tuve que repetirlas porque salía la dichosa etiqueta. Fue una de esas frustraciones que te hacen pensar: ¿por qué no hay un botón gigante para esto?
La etiqueta "DEBUG": ¿Por qué existe?
Primero, entendamos por qué está ahí. Flutter te la pone para recordarte que estás corriendo tu aplicación en modo debug. Esto significa que tienes ciertas herramientas de desarrollo activas, un rendimiento diferente, y generalmente no es la versión final que verá un usuario. Es una señal visual, simple y directa, de que no es la compilación de producción.
El error común: Buscar botones en la UI
Muchos, incluyéndome en mis inicios, caemos en la trampa de buscar una opción en DevTools o en el inspector de Flutter de Android Studio para quitarla. Y sí, existen botones para ocultarla temporalmente, como los que mencionan algunas respuestas antiguas en Stack Overflow. Pero ojo, eso es como ponerle un parche. No es una solución permanente ni la forma correcta de controlarla a nivel de código.
La solución simple y definitiva: Una línea de código
La forma correcta, y la que realmente controla este comportamiento, es a través de un parámetro en tu widget MaterialApp. Es increíblemente sencillo. Solo tienes que añadir debugShowCheckedModeBanner: false.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // ¡Aquí está la magia!
title: 'Mi App Flutter',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Página de Inicio'),
);
}
}
Al configurar debugShowCheckedModeBanner en false, le estás diciendo a Flutter que no muestre ese banner cuando la app se ejecute en modo debug. Lo que me gusta de esto es que es una configuración declarativa, está en tu código base y se versiona como cualquier otra cosa.
¿Y en producción?
Aquí viene lo importante y lo que a veces se malinterpreta: esta propiedad solo afecta el modo debug. Cuando compilas tu aplicación en modo release (por ejemplo, para subirla a la Play Store o App Store), Flutter automáticamente elimina ese banner, sin que tengas que hacer nada. Nunca verás ese banner en una aplicación compilada en modo release.
En mi experiencia, la sobreingeniería o buscar soluciones complicadas donde no las hay, es un problema recurrente. A veces la solución más simple y directa, una línea de código bien puesta, es la que funciona y es la intención del framework.
El error más común que veo es preocuparse demasiado por esto en modo debug, o peor aún, creer que tienes que hacer algo especial para quitarlo en una compilación de producción. La verdad es que si tu app está en modo release, ya no estará. La clave es entender la diferencia entre los modos de compilación de Flutter y confiar en que el framework maneja estas cosas por ti.