スナックバーを表示する

コンテンツ

特定のアクションが発生したときにユーザーに簡単に通知すると便利な場合があります。行われる。たとえば、ユーザーがリスト内のメッセージをスワイプして削除すると、メッセージが削除されたことを通知するとよいでしょう。アクションを元に戻すオプションを提供することもできます。

マテリアルデザインでは、これはSnackBar。このレシピでは、次の手順を使用してスナックバーを実装します。

を作成しますScaffold。
を表示しますSnackBar。
オプションのアクションを指定します。

1.`Scaffold`

マテリアルデザインガイドラインに従ったアプリを作成する場合、アプリに一貫した視覚構造を与えます。この例では、SnackBar画面の下部に、他の重要な要素と重ならないようにウィジェットなどFloatingActionButton。

のScaffoldウィジェットから、マテリアルライブラリ、この視覚的な構造を作成し、重要なことを保証します。ウィジェットは重なりません。

return MaterialApp(
  title: 'SnackBar Demo',
  home: Scaffold(
    appBar: AppBar(
      title: const Text('SnackBar Demo'),
    ),
    body: const SnackBarPage(),
  ),
);

2. を表示します。`SnackBar`

とともにScaffold所定の位置に、SnackBar。まず、SnackBarを使用して表示します。ScaffoldMessenger。

const snackBar = SnackBar(
  content: Text('Yay! A SnackBar!'),
);

// Find the ScaffoldMessenger in the widget tree
// and use it to show a SnackBar.
ScaffoldMessenger.of(context).showSnackBar(snackBar);

3. オプションのアクションを提供します

次のような場合にユーザーにアクションを提供したい場合があります。スナックバーが表示されます。たとえば、ユーザーが誤ってメッセージを削除した場合、回復するためにスナックバーのオプションのアクションを使用する場合があります。メッセージ。

提供例はこちら追加のactionにSnackBarウィジェット:

final snackBar = SnackBar(
  content: const Text('Yay! A SnackBar!'),
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      // Some code to undo the change.
    },
  ),
);

インタラクティブな例

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SnackBar Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SnackBar Demo'),
        ),
        body: const SnackBarPage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: const Text('Yay! A SnackBar!'),
            action: SnackBarAction(
              label: 'Undo',
              onPressed: () {
                // Some code to undo the change.
              },
            ),
          );

          // Find the ScaffoldMessenger in the widget tree
          // and use it to show a SnackBar.
          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        },
        child: const Text('Show SnackBar'),
      ),
    );
  }
}