fluttersnackbar

How could use SnackBars within the Scaffold in stateless widget?


I have a class extends StatelessWidget. When try call SnackBars in Scaffold like:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          actions: <Widget>[
          IconButton(
            splashRadius: 18,
            icon: const Icon(Icons.thumb_up),
            tooltip: 'Like the app',
            onPressed: () {
              final SnackBar snackBar = SnackBar(
                duration: const Duration(seconds: 1),
                content: const Text('Registered as you like the application.'),
                action: SnackBarAction(
                  label: 'Undo',
                  onPressed: () {},
                ),
              );
              ScaffoldMessenger.of(context).showSnackBar(snackBar);
            },
          ),
        ],
        title: const Text('My Application'),),
        body: const Center(
        child: Text("Hello World!"),)
        );
     }
 }

when run the application show error like:

Exception has occurred. FlutterError (No ScaffoldMessenger widget found. MyApp widgets require a ScaffoldMessenger widget ancestor. The specific widget that could not find a ScaffoldMessenger ancestor was: MyApp The ancestors of this widget were: [root] Typically, the ScaffoldMessenger widget is introduced by the MaterialApp at the top of your application widget tree.)


Solution

  • I found the solution for the problem but first: why the error happened? It Fails because ScaffoldMessenger.of(context) doesn't find anything above this widget's context. the solution to use Builder class as follows:

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
              appBar: AppBar(
                actions: <Widget>[
    
                  Builder(
                    builder: (BuildContext context) {
                      return IconButton(
                        splashRadius: 18,
                        icon: const Icon(Icons.thumb_up),
                        tooltip: 'Like the app',
                        onPressed: () {
                          final SnackBar snackBar = SnackBar(
                            duration: const Duration(seconds: 1),
                            content: const Text(
                                'Registered as you like the application.'),
                            action: SnackBarAction(
                              label: 'Undo',
                              onPressed: () {},
                            ),
                          );
                          ScaffoldMessenger.of(context).showSnackBar(snackBar);
                        },
                      );
                    },
                  ),
                ],
                title: const Text('My Application'),
              ),
              body: const Center(
                child: Text("Hello World!"),
              )),
        );
      }
    }