【Flutter】通常のsnackbarとGet.snackbarの動きの比較

Get.snackbarはご存知でしょうか？　GetXの機能の一つです。通常のsnackBarと異なり、context無しでsnackBarが呼び出せるのがメリットです。

しかし、実際に実装してみると、通常のsnackBarと動きが異なりました.個人的に戸惑う点であったので、今回は2つのsnackbarの動きに着目して、その違いとをご紹介します。

通常のsnackBarとは、SacaffoldMessenger.of(context)〜で始まる Flutter
標準のSnackBarのことをここでは指します。

結論

3パターンに分かれました。ただし、実際はコンストラクターの数が通常のsnackbarの方が多いため、非常にカスタマイズ性が高いです。初心者や簡単に実装したい場合はGet.snackbar。少しデザインとかも気にする場合は通常のsnackbarが良さそうです。

	通常のSnackBar	Get.snackbar
fixed	O	X
floating（Fade）	O	X
floating（slide）	X	O

1. 通常のsnackbar

2種類のパターンがあります。

a. fixed

下から出てきます。下端にくっついています。

ScaffoldMessenger.of(context).showSnackBar(
  const SnackBar(
    content: Text('text'),
    behavior: SnackBarBehavior.fixed, //デフォルト設定
  ),
）;

b. floating(Fade)

ふわっと出てきて出現します。また、下端にくっつかず浮いたデザインなのが特徴です。
floatingと言う動きですが、次に示すGet.snackBarのモーションと分けるために、floating(Fade)とこの記事では名付けています。

ScaffoldMessenger.of(context).showSnackBar(
  const SnackBar(
    content: Text('text'),
    behavior: SnackBarBehavior.floating,
  ),
);

2. Get.snackbar

1種類しかありません。カスタマイズ性は上から出すか下から出すか、アニメーションの変化の調整ぐらいしかできません。

floating(Slide)

下からふわっと出てきます。こちらはfloating(slide)と読んで分けています。

Get.snackbar(
  'title',
  'text',
  snackPosition: SnackPosition.BOTTOM,
);

まとめ

特にこだわりがない、簡単に実装したい、初心者だったりコードを単に短くしたい、と言う場合はGet.snackBarがいいと思います。
しかし、多少デザインだったりUXの面もこだわりたい場合は、カスタマイズ性の高い通常のsnacBarを使うのをオススメします。

サンプルコードはこちら

import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const GetMaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("snackbarの比較"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('通常のsnackbar'),
            ElevatedButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text('text'),
                    behavior: SnackBarBehavior.fixed, //デフォルト設定
                  ),
                );
              },
              child: const Text('fixed'),
            ),
            ElevatedButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text('text'),
                    behavior: SnackBarBehavior.floating,
                  ),
                );
              },
              child: const Text('floating(Fade)'),
            ),
            const SizedBox(height: 16),
            const Text('Get.snackbar'),
            ElevatedButton(
              onPressed: () {
                Get.snackbar(
                  'title',
                  'text',
                  snackPosition: SnackPosition.BOTTOM, //デフォルトはTOP
                );
              },
              child: const Text('floating(slide)'),
            ),
          ],
        ),
      ),
    );
  }
}