SnackBarを表示する

CoddyのFlutterジャーニー「アプリをインタラクティブにする」セクションの一部。レッスン 10/34。

SnackBarは、画面の下からスライドして表示され、約4秒後に自動的に消える短いメッセージです。アプリでは、操作が成功したことを伝えるために使います。「保存しました」「送信しました」「削除しました」などです。

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

内側から順に見ていきましょう。SnackBar(...)はメッセージで、showSnackBarはそれを画面に表示し、ScaffoldMessenger.of(context)はメッセージを表示するアプリの部分を見つけます。

contextはウィジェットツリー内でのウィジェットの位置で、buildが受け取るものです。.of(context)はそこからツリーを上方向に検索します。メッセンジャーはMaterialAppから提供されるため、自分より上にある必要があります。HomePageはMaterialAppの下にあるので、そのcontextからメッセンジャーを見つけられます。MyAppのcontextはその上にあるため、そこからSnackBarを表示しようとすると「No ScaffoldMessenger widget found」というエラーになります。これも、画面に独自のクラスがある理由のひとつです。

チャレンジ

簡単

Saveが押されたとき、Note savedと表示するSnackBarを表示します。

自分で試してみよう

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(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Notes')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Save'),
        ),
      ),
    );
  }
}