すらぼうの開発ノート

flutterエンジニアのメモ

【Flutter】「DEBUG」バナーを消す方法、任意の文字のバナーを表示させる方法

Flutterアプリではデフォルトで右上に「DEBUG」と書かれたバナーが表示されている。

「DEBUG」バナー

本エントリでは以下の流れで「DEBUG」バナーを消す方法、また任意の文字のバナーを表示させる方法を説明する。

「DEBUG」バナーを消す方法

一般的にウィジェットツリーのルート付近にあるMaterialAppdebugShowCheckedModeBannerプロパティにfalseを指定すれば良い。

これで「DEBUG」バナーが非表示になる。

「DEBUG」バナー非表示状態

任意の文字のバナーを表示させる方法

Bannerを用いることで任意の文字が表示されたバナーを作成できる。

api.flutter.dev

例として次の画像のバナー作成方法を説明する。

画面左下に「test」バナーを表示

コードは以下。

各プロパティについて説明する。

message

必須プロパティ。表示される文字列を指定する。

location

必須プロパティ。enumBannerLocationの値で指定する。 画面上がtop、下がbottom。また左がstart、右がendという表記ルール。

api.flutter.dev

textStyle

文字列のスタイルを指定する。

バナーの幅が狭いので、あまり文字サイズを大きくすると見切れる為基本的にはデフォルトで良いと思う。

child

バナーを表示したいページのウィジェットを指定する。

バナーはこのchild上に表示されるので、ページ遷移をするとバナーが表示されないパターンもある点に注意。

color

バナーの色を指定する。