{"id":123,"date":"2022-12-01T19:56:28","date_gmt":"2022-12-01T11:56:28","guid":{"rendered":"https:\/\/www.adaycode.com\/dev\/?p=123"},"modified":"2022-12-01T22:09:52","modified_gmt":"2022-12-01T14:09:52","slug":"how-to-remove-debug-banner-or-label-in-flutter","status":"publish","type":"post","link":"https:\/\/www.adaycode.com\/dev\/how-to-remove-debug-banner-or-label-in-flutter\/","title":{"rendered":"How to remove DEBUG banner (or label) in Flutter?"},"content":{"rendered":"\n<p>All you need is just a single line of code.<\/p>\n\n\n\n<p>There may be an occasion you want to screenshot your app and show it to your client. Unfortunately, a DEBUG banner is marked on the top right corner in the debug (aka. development) build. It could look ugly when presenting your app project to the clients. How to get rid of this unwanted label?<\/p>\n\n\n\n<p>In <strong><mark style=\"background-color:#dddddd\" class=\"has-inline-color\">MaterialApp<\/mark><\/strong> widget, set <strong><mark style=\"background-color:#dddddd\" class=\"has-inline-color\">debugShowCheckedModeBanner<\/mark><\/strong> to <strong><mark style=\"background-color:#dddddd\" class=\"has-inline-color has-black-color\">false<\/mark><\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" style=\"font-size:.875rem;--cbp-line-number-color:#d8dee9ff;--cbp-line-number-width:16.859375px;--cbp-line-highlight-color:rgba(201, 218, 248, 0.2);line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import 'package:flutter\/material.dart';\n\nvoid main() {\n  runApp(const MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  const MyApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      debugShowCheckedModeBanner: false,\n      home: Scaffold(\n        appBar: AppBar(\n          title: const Text('Welcome to Flutter'),\n        ),\n        body: const Center(\n          child: Text('Hello World'),\n        ),\n      ),\n    );\n  }\n}\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #81A1C1\">import<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">&#39;package:flutter\/material.dart&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">void<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">main<\/span><span style=\"color: #D8DEE9FF\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #88C0D0\">runApp<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">MyApp<\/span><span style=\"color: #D8DEE9FF\">())<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">class<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">MyApp<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">extends<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">StatelessWidget<\/span><span style=\"color: #D8DEE9FF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">MyApp<\/span><span style=\"color: #D8DEE9FF\">({<\/span><span style=\"color: #81A1C1\">super<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9FF\">key})<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">@override<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #8FBCBB\">Widget<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">build<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #8FBCBB\">BuildContext<\/span><span style=\"color: #D8DEE9FF\"> context) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">MaterialApp<\/span><span style=\"color: #D8DEE9FF\">(<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #D8DEE9FF\">      debugShowCheckedModeBanner<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">false<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      home<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Scaffold<\/span><span style=\"color: #D8DEE9FF\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        appBar<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">AppBar<\/span><span style=\"color: #D8DEE9FF\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          title<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Text<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #A3BE8C\">&#39;Welcome to Flutter&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        )<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        body<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Center<\/span><span style=\"color: #D8DEE9FF\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          child<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Text<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #A3BE8C\">&#39;Hello World&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        )<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      )<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    )<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Here is the result after the DEBUG banner being removed.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"462\" height=\"462\" loading=\"lazy\" src=\"https:\/\/i0.wp.com\/www.adaycode.com\/dev\/wp-content\/uploads\/2022\/12\/debug_banner_comparision.jpg?resize=462%2C462&#038;ssl=1\" alt=\"\" class=\"wp-image-130\" srcset=\"https:\/\/i0.wp.com\/www.adaycode.com\/dev\/wp-content\/uploads\/2022\/12\/debug_banner_comparision.jpg?w=462&amp;ssl=1 462w, https:\/\/i0.wp.com\/www.adaycode.com\/dev\/wp-content\/uploads\/2022\/12\/debug_banner_comparision.jpg?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.adaycode.com\/dev\/wp-content\/uploads\/2022\/12\/debug_banner_comparision.jpg?resize=150%2C150&amp;ssl=1 150w\" sizes=\"auto, (max-width: 462px) 100vw, 462px\" \/><\/figure>\n\n\n\n<p>Even if you do not add this line of code, the DEBUG banner will still be removed in the release build.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>All you need is just a single line of code. There may be an occasion&#8230;<\/p>\n","protected":false},"author":2,"featured_media":132,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[16,9,27,25,6,26,31,5,13,15,30,28,11,29,24,23,22,42],"class_list":["post-123","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter-tutorials","tag-android-development","tag-app-development","tag-banner","tag-capture","tag-dart","tag-debug","tag-development","tag-flutter","tag-flutter-tutorial","tag-ios-development","tag-label","tag-mode","tag-programming","tag-remove","tag-screen","tag-screenshot","tag-tip","tag-ui"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.adaycode.com\/dev\/wp-content\/uploads\/2022\/12\/cut_debug_banner.jpg?fit=1024%2C737&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/posts\/123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/comments?post=123"}],"version-history":[{"count":11,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/posts\/123\/revisions"}],"predecessor-version":[{"id":155,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/posts\/123\/revisions\/155"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/media\/132"}],"wp:attachment":[{"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/media?parent=123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/categories?post=123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.adaycode.com\/dev\/wp-json\/wp\/v2\/tags?post=123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}