【Flutter】画面右上のDEBUG表示を消す方法

Flutter開発でデバッグのときのDEBUG帯を消したい場合の対処法

Flutterアプリ開発中、画面右上に「DEBUG」が表示されてしまう問題を解決する方法

問題

Flutterによるアプリ開発で動作確認する場合、実機やXcodeのシミュレーター、Androidのエミュレーターで確認することになりますが、デバッグビルドした場合には、画面右上に「DEBUG」という帯が表示されてしまいます。

動作確認上、DEBUGの表示に困ることはそれほどないのですが、
開発を始めたばかりの人は、アプリリリース時にも表示されてしまうのではないかと不安になるでしょう。
（リリースモードでビルドすればDEBUG表示はなくなります。アプリリリース時は、リリースモードでビルドすることになるので問題ありません）
アプリを関係者に配布する場合にも、配布された人が同じように不安になる可能性があります。

また、アプリストアに掲載するためのスクリーンショットを撮る場合にもDEBUG表示は邪魔になります。

解決方法

このDEBUG表示はコード1行で簡単に非表示にすることができます。

以下のとおり、main.dartの大元のWidget（ここではデフォルトで生成されるMyApp）のbuild内、MaterialAppのパラメータとして、「debugShowCheckedModeBanner: false」を１行追加すれば、DEBUGモードでビルドしてもDEBUGを消すことができます。

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
      debugShowCheckedModeBanner: false, //<-この行を追加
    );
  }
}