Flutterのスクリーンショット撮影時に右上の"DEBUG"バナーを消す方法

Flutterのスクリーンショット撮影時に右上の”DEBUG”バナーを消す方法

Flutterでアプリ開発中、ローカル実行した際に画面右上に表示される”DEBUG”バナー。App StoreやGoogle Playに提出する用のスクリーンショットにこのバナーが写り込むと、見栄えが悪くて困る……。

読者

本番用の見た目にしたいのに、DEBUGってダサい……。

このバナーはデバッグビルドでのみ表示されるもので、簡単な設定で非表示にできる。今回はその方法を紹介するよ。

ごりら

「debugShowCheckedModeBanner: false」って書くだけだから一瞬！

FlutterアプリのエントリーポイントであるMaterialAppやCupertinoAppのプロパティに、以下のように追記するだけ。

読者

どこに書けばいいの？main.dartの中？


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

このdebugShowCheckedModeBanner: falseの一行を追加するだけで、DEBUGバナーは表示されなくなる。

ごりら

releaseビルドなら元々出ないけど、ローカルのdebug実行でもスクショ撮る時はこれでOK！

iOSスタイルのUIを構築している場合はCupertinoAppを使っているはず。これにも同様のプロパティがある。

読者

CupertinoAppでも同じ？


return CupertinoApp(
  debugShowCheckedModeBanner: false,
  home: MyCupertinoHomePage(),
);

どちらの場合も、debugShowCheckedModeBannerをfalseにするだけで解決だ。

ごりら

Flutterの開発あるあるだけど、意外と忘れがちだからテンプレに入れとこう！

App Store用スクリーンショットを撮影するときは、debugShowCheckedModeBanner: falseの設定を忘れずに。リリースビルド以外でも見た目を整えたいときに便利だ。

ごりら

チェックリスト！「本番用スクショ？→debugShowCheckedModeBanner忘れてない？→背景色やステータスバーも要確認！」