🍟

透明のSnackBarを作ってみた!

2024/03/11に公開

Flutter

Dart

tech

💡Tips

ボタンを押すと、check iconがあるスナックバーってありませんか?
それを出してみたいと思った。背景色は透明なのかな...
薄いブラックで、その中にRowでラップして、iconとTextを表示するので、再現してみました。

SnackBar(
      backgroundColor: Colors.black.withOpacity(0.3),
      content: Row(
        children: [
          DecoratedBox(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(
                color: Colors.white,
                width: 2,
              ),
            ),
            child: const CircleAvatar(
              backgroundColor: Colors.transparent,
              child: Icon(
                Icons.check,
                color: Colors.white,
              ),
            ),
          ),
          const SizedBox(width: 10),
          const Text('コメントを送信しました'),
        ],
      ),
    ),

コードの説明をすると、Containerでiconの白い枠線を再現しています。CircleAvatarを使用して、icon Widgetを丸くして背景色を透明にしてます。これで、外枠が白のcheck iconが作れます。

こんな感じになります。

もしWebページでよく見かける緑の丸のiconが欲しい時は、こっちを使ってみてください。

CircleAvatar(
  backgroundColor: Colors.green,
  child: Icon(
    Icons.check,
    color: Colors.white,
  ),
)

💡Tips

Discussion