How to remove the Flutter debug banner?

To eliminate DEBUG Banner that shows up in Flutter application in the upper right corner, set debugShowCheckedModeBanner property to bogus in MaterialApp gadget.

For the most part, the DEBUG standard shows up in the application, when you run the application in DEBUG mode.

Following is a fast code bit to debilitate the DEBUG standard.

MaterialApp(
  home: MyHomePage(),
  debugShowCheckedModeBanner: false,
);

Example

In the accompanying model Flutter venture, we have utilized debugShowCheckedModeBanner property to conceal the DEBUG flag.

main.dart

import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tutorial - googleflutter.com'),
        backgroundColor: Color(0xFF444444),
      ),
      body: Container(),
    );
  }
}

ScreenShot

The accompanying screen capture shows the distinction between concealing DEBUG pennant and indicating DEBUG standard.

Flutter - Remove DEBUG Banner

Summary

In this Flutter Tutorial, we learned how to hide DEBUG banner in the Flutter application while you are running in DEBUG mode.

Thank you….

Leave a Comment