Udemyセール開催中! 対象コースが1,220円から

【Flutter】SnackBarの使い方|ポップアップ通知にアクションを実装

今回は「SnackBar」の基本的な使い方について紹介します。

SnackBarを使えばポップアップ通知を表示したり、ポップアップにアクションを追加できます!

目次

SnackBarの使い方

actionなしをクリック
actionありをクリック

actionプロパティなしの場合

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Hello World'),
  ),
);

上記のようにSnackBarはScaffoldMessenger内で使用します。SnackBarでactionプロパティを使用しない場合は、ポップアップの非表示ボタンは表示されません。

actionプロパティありの場合

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    duration: Duration(days: 7),
    content: Text('クリックで非表示'),
    action: SnackBarAction(
      label: 'OK',
      onPressed: () {
        print('非表示されました!');
      },
    ),
  ),
);

actionプロパティを使用すればポップアップに非表示ボタンを表示できます。SnackBarActionでボタンのデザインやクリックされた際の処理を指定できます。

サンプルコード

//ソース
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: ShowSnackBar(),
      ),
    );
  }
}

class ShowSnackBar extends StatefulWidget {
  const ShowSnackBar({Key? key}) : super(key: key);

  @override
  ShowSnackBarState createState() {
    return ShowSnackBarState();
  }
}

class ShowSnackBarState extends State<ShowSnackBar> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            child: Text(
              'actionなし',
              style: TextStyle(
                fontSize: 20,
              ),
            ),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('ポップアップ成功!'),
                ),
              );
            },
          ),
          SizedBox(
            height: 10,
          ),
          ElevatedButton(
            child: Text(
              'actionあり',
              style: TextStyle(
                fontSize: 20,
              ),
            ),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  duration: Duration(days: 7),
                  content: Text('クリックで非表示'),
                  action: SnackBarAction(
                    label: 'OK',
                    onPressed: () {
                      print('非表示されました!');
                    },
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

以上です。

  • URLをコピーしました!
目次
閉じる