Eliminar cinta debug en Flutter

¿Qué es el Banner Debug y Por Qué Aparece?

El banner "DEBUG" se muestra automáticamente cuando ejecutas tu aplicación Flutter en modo debug (depuración).

• Propósito: Sirve como una clara señal visual para que los desarrolladores y testers sepan que la aplicación que están usando no es una versión final de producción, sino una versión de desarrollo que podría tener hot reload y otras herramientas de depuración activas.

• Aparición: Está controlado por la propiedad debugShowCheckedModeBanner del widget principal de tu aplicación.

---

💻 Tutorial Paso a Paso: Eliminar la Cinta Debug

Para desactivar y ocultar el banner, simplemente debes establecer la propiedad debugShowCheckedModeBanner a false.

 

Paso 1: Localiza tu Widget Principal

 

Abre el archivo principal de tu aplicación, que suele ser lib/main.dart. Busca el widget que devuelve la función runApp(). En la mayoría de los casos, será un MaterialApp o un CupertinoApp.

 

Paso 2: Modifica la Propiedad en MaterialApp

 

Dentro de la declaración de tu widget MaterialApp, añade o modifica la propiedad debugShowCheckedModeBanner y establécela en false.

Dart

 

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 🔑 ¡Esta es la línea clave para eliminar el banner!
      debugShowCheckedModeBanner: false, 
      title: 'Mi Aplicación Flutter Limpia',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

 

Paso 3: Realiza un Hot Reload o Reinicia la App

 

Guarda el archivo. Cuando Flutter aplique el Hot Reload, la cinta roja desaparecerá inmediatamente. Si no es así, reinicia completamente la aplicación (Hot Restart).

---

✨ Código Completo de Ejemplo

Este es un ejemplo completo y moderno de cómo se vería tu archivo main.dart con la propiedad desactivada, siguiendo la estructura recomendada de separación de widgets:

Dart

 

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(
      // Propiedad clave para quitar el banner "DEBUG"
      debugShowCheckedModeBanner: false, 
      title: 'Tutorial Flutter',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
        useMaterial3: true, // Recomendado para versiones modernas de Flutter
      ),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("App sin Banner Debug"),
        backgroundColor: Theme.of(context).primaryColor,
      ),
      body: Center(
        child: Text(
          "¡Hola Mundo!", 
          style: TextStyle(
            color: Theme.of(context).primaryColor, 
            fontSize: 50,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

---

 

⚠️ Consideraciones Importantes

 

• Modo Release (Producción): Cuando construyes tu aplicación para producción (flutter build apk o flutter build appbundle), el banner NO aparecerá automáticamente, incluso si dejas la propiedad en su valor por defecto (true). Esta propiedad solo afecta el modo debug.

• Modo Profile: Si ejecutas tu aplicación en modo Profile (usado para medir el rendimiento), el banner tampoco se mostrará.

Desactivar el banner mejora la experiencia de desarrollo cuando necesitas la interfaz limpia, pero recuerda que es una buena práctica mantenerlo activo cuando no es estrictamente necesario, ya que te da una indicación instantánea del modo de ejecución.

---