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

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

「DEBUG」バナーを消す方法

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

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

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

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

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

コードは以下。

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

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

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

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

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

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

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

バナーの色を指定する。