how to Create and Use SnackBar for ReUse(Globally) in Flutter

Question

i want create SnackBar for reusable(globally)

i already created but its only for 1 page , i don't know how to create reusable.

below code:

import 'package:flutter/material.dart';

class SnackBarMain extends StatefulWidget {
  @override
  _SnackBarMainState createState() => _SnackBarMainState();
}

class _SnackBarMainState extends State<SnackBarMain> {
  final globalKey = GlobalKey<ScaffoldState>();
  String title = 'SnackBar';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: globalKey,
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        centerTitle: true,
        title: Text(title),
      ),
      body: Center(
        child: RaisedButton(
          shape: new RoundedRectangleBorder(
              borderRadius: new BorderRadius.circular(18.0),
              side: BorderSide(color: Colors.purple)),
          onPressed: () => snackBarMsg(context),
          color: Colors.purple,
          textColor: Colors.white,
          child: Text("SnackBar",
              style: TextStyle(fontSize: 18)),
        ),
      ),
    );
  }

snackBarMsg(BuildContext context) {
    final sb = SnackBar(
      elevation: 0.0,
      //behavior: SnackBarBehavior.floating,
      content: Text('SnackBar Bottom Message'),
      duration: new Duration(seconds: 5000000),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16.0), topRight: Radius.circular(16.0)),
      ),
      //backgroundColor: Colors.redAccent,
      action: SnackBarAction(
        textColor: Color(0xFFFAF2FB),
        label: 'OK',
        onPressed: () {},
      ),
    );
    globalKey.currentState.showSnackBar(sb);
  }
}

so any one please give me example for this

Will that snackBar show same message all across the app ? you want that accessible globally. — Ratnadeep, Feb 20 '20 at 12:13
no i want to show different message all across the app, and i want accessible globally — MohammedAli, Feb 20 '20 at 12:35

score 18 · Answer 1 · answered Feb 20 '20 at 14:45

You can have a class that has a static method show() which receives the context and shows a snackbar. Check te code below.

class GlobalSnackBar {
  final String message;

  const GlobalSnackBar({
    @required this.message,
  });

  static show(
    BuildContext context,
    String message,
  ) {
    Scaffold.of(context).showSnackBar(
      SnackBar(
        elevation: 0.0,
        //behavior: SnackBarBehavior.floating,
        content: Text(message),
        duration: new Duration(seconds: 5000000),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(16.0), topRight: Radius.circular(16.0)),
        ),
        //backgroundColor: Colors.redAccent,
        action: SnackBarAction(
          textColor: Color(0xFFFAF2FB),
          label: 'OK',
          onPressed: () {},
        ),
      ),
    );
  }
}

And you can call it from anywhere like this:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text('SHOW Snackbar'),
      onPressed: () => GlobalSnackBar.show(context, 'Test'),
    );
  }
}

Remember that the context you pass to show() method has to be a descendant from Scaffold in order to show the SnackBar

yaaah buddy! very thanks, It was what I needed – Felipe Sales Mar 08 '22 at 02:01 — Felipe Sales, Mar 08 '22 at 02:01

score 16 · Accepted Answer · answered Feb 20 '20 at 14:57

Just create a public class and put your custom functions inside, here you go for example:

//Custom class in project directory
class CustomWidgets {
 CustomWidgets._();
 static buildErrorSnackbar(BuildContext context, String message) {
  Scaffold.of(context)
     .showSnackBar(
    SnackBar(
      content: Text("$message"),
    ),
  );
 }
}

 // This is any page in your project

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
     backgroundColor: Colors.white,
      //        Always create body with Builder method so you can 
      //        get exact context to pass
      body: Builder(
      builder: (context) =>
          Center(
              child: RaisedButton(
              color: Colors.pink,
              textColor: Colors.white,
              onPressed: (){
                CustomWidgets.buildErrorSnackbar(context,"Your message here");
              },
              child: Text('Display SnackBar'),
          ),
         ),
     ),
  );
 }
}

you can add this code on view? I don't understand and add this correctly — Felipe Sales, Mar 08 '22 at 01:41

Rahul Kushwaha · Answer 3 · 2021-07-12T04:22:45.947

3

Scaffold.of(context).showSnackbar is deprecated now. You should use ScaffoldMessenger instead. Use like this:-

ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text('User Successfully Logged In...'),
        ));

edited Jul 12 '21 at 04:22

answered Feb 04 '21 at 10:31

Rahul Kushwaha

5,473
3
26
30

You mean Scaffold.of(context).showSnackbar(snackbar)... is deprecated. – Reinier Garcia Jul 08 '21 at 00:45
@ReinierGarcia Yes it is deprecated now . – Rahul Kushwaha Jul 08 '21 at 04:35
You don't understand yet. What is deprecated is Scaffold.of(context).showSnackbar. NOT SnackBar.showSnackbar. You are literally saying: "SnackBar.showSnackbar is deprecated now..." and that is not correct. – Reinier Garcia Jul 11 '21 at 05:23
@ReinierGarcia Yes you are true. Thanks for correcting me. – Rahul Kushwaha Jul 12 '21 at 04:23

score 0 · Answer 4 · answered Feb 20 '20 at 11:50

You can use the Snackbar you have already defined to reuse it everywhere by putting it in a public folder, that can be accessed from anywhere in your app. You don't need to enclose it inside a widget or a class. Then, you can show it by calling Scaffold.of(context).showSnackBar(...). For that, you will need to pass the current BuildContext, of course. This way, as long as the context from which you call showSnackBar has a parent Scaffold, the snackbar will be shown for your current page, and you can do this from anywhere.

Consider this example, that I myself have used in the past:

  void buildErrorSnackbar(BuildContext context) {
    Scaffold.of(context).showSnackBar(
      SnackBar(
        content: Text("Oops! Something went wrong."),
      ),
    );
  }

You can declare your own `buildSnackbar` method anywhere, you don't need to enclose it in a class. This way you can call if from anywhere, you just need to pass the corresponding `BuildContext`. — drogel, Feb 20 '20 at 13:48

score 0 · Answer 5 · answered Jun 13 '22 at 20:42

you can create a public snackbar class like this

//=========================================================
// PUBLIC SNACK BAR WIDGET
//=========================================================
class PublicSnackBar extends SnackBar {
  const PublicSnackBar({Key? key, required super.content}) : super(key: key);
}

and call it in any pages or files in the project, tho I am using public context here.

 ScaffoldMessenger.of(navigatorKey.currentContext as BuildContext)
        .showSnackBar(PublicSnackBar(content: Text('$result')));

this is my public context, just in case you were wondering,

//=========================================================================
// NAVIGATING WITH OUT CONTEXT
//=========================================================================
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

this is 2021 and i find this very clean to use, if i am mistaken please do let me know — Michael Stephen, Jun 13 '22 at 20:56

Anuj Kumar · Answer 6 · 2022-12-02T11:51:45.127

I suggest you try to build a Extension like that then your problem will be solve if you try to create a widget for that then you face some problems so try to use extension Output will be look like this

 extension SnackBarExt on BuildContext {
  void fluidSnackBar(String message) {
    ScaffoldMessenger.of(this)
      ..hideCurrentSnackBar()
      ..showSnackBar(SnackBar(
          behavior: SnackBarBehavior.floating,
          margin: const EdgeInsets.all(Dimension.d4),
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(Dimension.d1)),
          backgroundColor: secondarySwatch.shade800,
          duration: const Duration(seconds: 4),
          padding: const EdgeInsets.symmetric(
              vertical: Dimension.d3, horizontal: Dimension.d4),
          content: Text(message,
              style: fluidTextStyles.caption.colored(secondarySwatch.shade25),
              overflow: TextOverflow.ellipsis)));
  }

how to Create and Use SnackBar for ReUse(Globally) in Flutter

6 Answers6

Linked

Related