【Flutter】スナックバーを表示する

Flutterでスナックバーを表示したい！

概要

今回の記事では、Flutterでスナックバーを表示する手順を掲載する。

以前、パッケージfluttertoastを使ってスナックバーに似たトーストと呼ばれるUIを表示する記事を載せたんだけども

【Flutter】トーストを表示する【fluttertoast】

Flutterのパッケージfluttertoastを使ってトースト（ポップアップの一種）を表示したい！

こちらは専用のパッケージは不要。

仕様書

環境

Android Studio Giraffe | 2023.2.1 Patch 2
Flutter 3.19.6

手順書

TextButtonをタップすると下からニュッとスナックバーが表示される例。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: const SnackBarSample1()
      )
    )
  );
}

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

  @override
  Widget build(BuildContext context) {
    final snackBar = SnackBar(
      action: SnackBarAction(
        label: "Close",
        onPressed: () => {ScaffoldMessenger.of(context).hideCurrentSnackBar()},
      ),
      backgroundColor: Colors.lightBlue,
      content: const Text("Nyahhhhn!"),
      duration: const Duration(seconds: 5),
      behavior: SnackBarBehavior.floating,
    );

    return SafeArea(
      child: Center(
        child: SizedBox(
          width: double.infinity,
          child: TextButton(
            style: TextButton.styleFrom(
              backgroundColor: Colors.blue,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(4)),
              ),
              padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
            ),
            onPressed: () => {
              ScaffoldMessenger.of(context).showSnackBar(snackBar)
            },
            child: const Padding(
              padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
              child: Text("Show Snack Bar",
                  style: TextStyle(fontSize: 16.0, color: Colors.white)),
            ),
          ),
        ),
      ),
    );
  }
}

durationにスナックバーを表示する時間を入力する。
スナックバー内のCloseをタップすると即時スナックバーを閉じる。

まとめ（感想文）

Flutterにはだいたい必要なものが揃ってて良いね。