Flutterで右上の「DEBUG」の帯を消す方法

Flutterアプリを開発していると、画面右上に表示される「DEBUG」の帯が気になることがあります。特に、AppBarにアクションを設定している場合、この帯がアイコンを隠してしまい、非常に邪魔です。開発中はデバッグモードでの表示が役立つこともありますが、UIの確認やスクリーンショットを撮る際には、帯を非表示にしたいと思うこともあるでしょう。

「DEBUG」の帯を消す方法

この「DEBUG」の帯を消す方法は簡単です。
MaterialAppウィジェットのプロパティであるdebugShowCheckedModeBannerをfalseに設定することです。これにより、「DEBUG」の帯を非表示にすることができます。

サンプルコード

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: const IndexPage(),
    );
  }
}

上記のコードでは、MaterialAppウィジェットのプロパティとしてdebugShowCheckedModeBannerをfalseに設定しています。これにより、デバッグモードでアプリを実行しても、画面右上に「DEBUG」の帯が表示されなくなります。

まとめ

デバッグの帯が邪魔だと感じたことがある開発者は多いでしょう。
その場合は、このように簡単に消すことができます。