[Flutter] SnackBar を表示させる

Toastのようにユーザーにメッセージを出して認識してもらうためのWidgetとしてSnackBarがあります
Androidでは、そのまま SnackBar というのがありますが、iOSには同じものはありません
似たものとしては、メッセージを表示するToastやUIAlertControllerがあります

SnackBar

最初に、SnackBarはこちらにあるようにScaffoldが重要になります
また、メッセージの表示以外のアクションをさせることも可能です

Create a Scaffold
Display a SnackBar
Provide an optional action

「No ScaffoldMessenger widget found」のエラーが出る場合は #2 を確認してください

1. Create a Scaffold

return MaterialApp(
  // ここにScafforldがないとSnackBarが作れない
  home: Scaffold(
    appBar: AppBar(
      title: const Text('SnackBar'),
    ),
    body: const SnackBarPage(),
  ),
);

return MaterialApp(

// ここにScafforldがないとSnackBarが作れない

home: Scaffold(

appBar: AppBar(

title: const Text('SnackBar'),

body: const SnackBarPage(),

);

2. Display a SnackBar

snackBar = SnackBar(
  content: Text('Yay! A SnackBar!'),
  duration: Duration(seconds: 3),
);

// Widget tree から ScaffordMessenger を探して SnackBar を表示させるために使う
ScaffoldMessenger.of(context).showSnackBar(snackBar);

snackBar = SnackBar(

content: Text('Yay! A SnackBar!'),

duration: Duration(seconds: 3),

);

// Widget tree から ScaffordMessenger を探して SnackBar を表示させるために使う

ScaffoldMessenger.of(context).showSnackBar(snackBar);

ここまでをまとめて
ボタンタップでSnackBarが表示されるコードはこのようになります

import 'package:flutter/material.dart';

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

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

   @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // ここにScafforldがないとSnackBarが作れない
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SnackBar'),
        ),
        body: const SnackBarPage(),
      ),
    );
  }
}

class SnackBarPage extends StatelessWidget{
  const SnackBarPage({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('Show SnackBar'),
        onPressed: () {
          const snackBar = SnackBar(
            content: Text('Yay! A SnackBar!'),
            duration: Duration(seconds: 3),
          );
          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        }, 
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp( const MainApp());

}

class MainApp extends StatelessWidget {

const MainApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

// ここにScafforldがないとSnackBarが作れない

home: Scaffold(

appBar: AppBar(

title: const Text('SnackBar'),

body: const SnackBarPage(),

);

}

class SnackBarPage extends StatelessWidget{

const SnackBarPage({super.key});

@override

Widget build(BuildContext context) {

return Center(

child: ElevatedButton(

child: const Text('Show SnackBar'),

onPressed: () {

const snackBar = SnackBar(

content: Text('Yay! A SnackBar!'),

duration: Duration(seconds: 3),

);

ScaffoldMessenger.of(context).showSnackBar(snackBar);

);

}

スクリーン下にメッセージが表示されました

3. Provide an optional action

SnackBar の特徴として、単なるToastなどとは異なりボタンアクションなどを追加することができます

例えば、ボタンをタップしてSnackBarを表示させ
右端にButtonというテキストボタンを作成して
Textの表示を変えるアクションを入れるとこうなります

var message = 'OK?';
 
void changeText(){
  setState((){
    message = 'Yes!';
  });
}

...

ElevatedButton(
  child: const Text('Show SnackBar'),
  onPressed: () {
    var snackBar = SnackBar(
      content: Text('Yay! A SnackBar!'),
      duration: const Duration(seconds: 3),
      action: SnackBarAction(
        label: 'Button',
        onPressed: changeText,
      ),

    );
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }, 
),

var message = 'OK?';

void changeText(){

setState((){

message = 'Yes!';

});

}

...

ElevatedButton(

child: const Text('Show SnackBar'),

onPressed: () {

var snackBar = SnackBar(

content: Text('Yay! A SnackBar!'),

duration: const Duration(seconds: 3),

action: SnackBarAction(

label: 'Button',

onPressed: changeText,

);

ScaffoldMessenger.of(context).showSnackBar(snackBar);

目次
1. サンプルコード
2. No ScaffoldMessenger widget found

サンプルコード

以上をまとめて、多少見やすくすると

main.dart

import 'package:flutter/material.dart';

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

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

   @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // ここにScafforldがないとSnackBarが作れない
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SnackBar'),
        ),
        body: const SnackBarPage(),
      ),
    );
  }
}

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

  @override
  State<SnackBarPage> createState() => _SnackBarPageState();
}

class _SnackBarPageState extends State<SnackBarPage>{
  var message = 'OK?';
 
  void changeText(){
    setState((){
      message = 'Yes!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            message,
            style: const TextStyle(
              fontSize: 30,
            )
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            child: const Text(
              'Show SnackBar',
              style: TextStyle(
                fontSize: 24,
              )
            ),
            onPressed: () {
              var snackBar = SnackBar(
                content: const Text(
                  'Yay! A SnackBar!',
                  style: TextStyle(
                    fontSize: 18,
                  )
                ),
                duration: const Duration(seconds: 10),
                backgroundColor: Colors.blue,

                action: SnackBarAction(
                  label: 'Button',
                  onPressed: changeText,
                ),
              );
              ScaffoldMessenger.of(context).showSnackBar(snackBar);
            }, 
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp( const MainApp());

}

class MainApp extends StatelessWidget {

const MainApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

// ここにScafforldがないとSnackBarが作れない

home: Scaffold(

appBar: AppBar(

title: const Text('SnackBar'),

body: const SnackBarPage(),

);

}

class SnackBarPage extends StatefulWidget{

const SnackBarPage({super.key});

@override

State<SnackBarPage> createState() => _SnackBarPageState();

}

class _SnackBarPageState extends State<SnackBarPage>{

var message = 'OK?';

void changeText(){

setState((){

message = 'Yes!';

});

}

@override

Widget build(BuildContext context) {

return Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text(

message,

style: const TextStyle(

fontSize: 30,

)

const SizedBox(height: 20),

ElevatedButton(

child: const Text(

'Show SnackBar',

style: TextStyle(

fontSize: 24,

)

onPressed: () {

var snackBar = SnackBar(

content: const Text(

'Yay! A SnackBar!',

style: TextStyle(

fontSize: 18,

)

duration: const Duration(seconds: 10),

backgroundColor: Colors.blue,

action: SnackBarAction(

label: 'Button',

onPressed: changeText,

);

ScaffoldMessenger.of(context).showSnackBar(snackBar);

);

}

Show SnackBar ボタンをタップして

スクリーン下にSnackBarが表示されます

右端の Button をタップすると
OK? からYes! にTextが変更され
SnackBarのActionが確認されます

No ScaffoldMessenger widget found

SnackBar でこのようなエラーになった場合、

No ScaffoldMessenger widget found.
MainApp widgets require a ScaffoldMessenger widget ancestor.

　
こちらに説明がありますが
　

Flutter : No ScaffoldMessenger widget found

I am trying to create a snackbar on the click of a button in flutter, but getting exception that No ScaffoldMessenger widget found. The same code seems to work ...

stackoverflow.com

　
SnackBarを表示するために必要な ScaffoldMessenger が
context の上位に存在しないとエラーになり
Scaffoldを正しく親ウィジェットとして配置する必要があるようです

ScaffoldMessenger.of(context).showSnackBar(snackBar);
この context が Scaffold の子Widgetであることを確認しないといけません
　

References:
SnackBar class
Display a snackbar
ScaffoldMessenger class