[Flutter/dart] 通知数バッジを作る
概要
LINE とかでよく使われる通知数を表すあのバッジ。自分のアプリでも作る必要があったので作り方を紹介します。
方法
static Widget NotificationNumberBadge(int num, Color col, [double size]) {
return Stack(
alignment: Alignment.center,
children: [
Icon(
Icons.brightness_1,
color: col,
size: size,
),
Text(num.toString()),
],
);
}Icons.brightness_1が円形のアイコン。通知数をTextに入れてStackで重ねればOK。通知数、色、サイズを引数にしてメソッドにしました。
実際は他のアイコンに重ねて表示することが多いと思います。その場合は以下のようにします。
Stack(
overflow: Overflow.visible,
children: [
CircleAvatar(
child: Icon(Icons.person),
),
Positioned(
top: -8,
left: 20,
child: NotificationNumberBadge(1, Colors.red)
)
],
)先ほど作った通知数バッジをさらに別のアイコンと重ねます。
今はサンプルのため「1」を表示していますが、実際は通知数を取得して0か1以上かでアイコンを変えるという処理が必要になると思います。
以上
最新記事
すべて表示やりたいこと TextFieldで入力フォームを作りたい。 例えば入力内容が金額の場合、3桁区切りで頭に￥を付けた表記にしたい。 ただしユーザにこれらを入力させるのではなく、ユーザはあくまで数字を入力するだけで、アプリ側で自動でフォーマットしたい。 方法...
現象 やってること iosシミュレータで画像をデバイスのローカルに保存 保存したパスをデータベースに保存 アプリ立ち上げ時にデータベースから画像パスを取得し、そのパスの画像を画面上に表示 起きている現象 iosシミュレータを再起動した場合、上記3で「ファイルパスが見つからな...
やりたいこと 初期値さえ決まればあとは不変な変数がある ただし、コンストラクタ起動時にはまだ決定できない このような変数について late finalで変数を定義 （何らかのタイミングで）初期化されたかどうかをチェックし、されていなければ値を入れる（チェックしないとfina...
Comments