【Flutter】デバッグ実行時の画面右上の「DEBUG」表示を消す

Flutter のデバッグモードで実行している時に、「DEBUG」と書かれたリボンのようなバナーが表示されます。

これが出ていれば「あれ？今何モードだっけ？」とはならないので通常は問題ありませんが、スクリーンショットを撮りたい時や、アプリを人に見せたい時などに消しておきたい場合があります。

http://nao53.e1.valueserver.jp/cbtdev.net/ios-appstore-screenshot/

nao53.e1.valueserver.jp

このバナーは簡単に消せるので、その方法を解説します。

「DEBUG」バナーを消す方法

MaterialApp クラスの debugShowCheckedModeBanner プロパティを false にすれば消えます。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // ← ここです
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

公式の説明によると、このバナーは「アプリが遅いという不満を人々に思いとどまらせることを目的としています。」ということなので、そういう目的の時には表示しておくと良いですね。不満が思いとどまるはずです。

debugShowCheckedModeBanner property - MaterialApp class - material library - Dart API

API docs for the debugShowCheckedModeBanner property from the MaterialApp class, for the Dart programming language.

api.flutter.dev

Flutterには他にもデバッグに便利な「debug〇〇」というプロパティが色々用意されています。

尚、「debug〇〇」の設定はリリースビルド時は無視されるので、デバッグ表示のままリリースされることはありません。