🍟

透明のSnackBarを作ってみた!

に公開
Flutter
Dart
tech

💡Tips

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

withOpacityが非推奨になったので、withValuesに修正いたしました。

新しいコード

example
main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SnackBarWidget(),
    );
  }
}

class SnackBarWidget extends StatelessWidget {
  const SnackBarWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SnackBar Demo')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            final snackBar = SnackBar(
              backgroundColor: Colors.black.withValues(alpha: 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('コメントを送信しました'),
                ],
              ),
            );

            ScaffoldMessenger.of(context).showSnackBar(snackBar);
          },
          child: const Text('Show SnackBar'),
        ),
      ),
    );
  }
}

以前のコード

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,
  ),
)

Discussion