How do i show Snackbar in Flutter

Last updated Aug 11, 2022

How to Notify users for Error Messages, Warning Messages, or other quick information in Flutter application. Flutter provided a widget called Snackbar widget, which is used to show Quick information/messages to users on the current screen.

A SnackBar is an alert that is shown to the user and that remains visible on the screen for a predetermined time and automatically disappears from the screen after this time.

As a general rule, a SnackBar is displayed at the bottom of the screen and can be accompanied by an informational message and a button, if necessary, that triggers an associated event.

These types of messages are widely used on occasions, such as when an item is deleted from a list and we want to show a message to the user that said deletion has been carried out and we give the option to undo the action and restore the deleted item.

This exists for example in the Gmail app when we delete an email from our inbox

In this post we cover
1) How to fix Scaffold.of() called with a context that does not contain a Scaffold show exception
2) Show snackbar with flushbar plugin.

Before going to use this first check the default Snackbar.

What is Snackbar?
Snackbar is a window to show on the current screen with small messages like Error messages, Warning Messages...

SnackBar({
Key key,
@required this.content,
this.backgroundColor,
this.elevation,
this.shape,
this.behavior,
this.action,
this.duration = _snackBarDisplayDuration,
this.animation,
this.onVisible,
})

Create Simple Snackbar Window on Current Screen

class MyScaffoldWindow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Snackbar'),backgroundColor: Colors.green,),
body: Center(
child: RaisedButton(
child: Text('Show Default'),
onPressed: () => showDefaultSnackbar(context),
),
),
);
}

void showDefaultSnackbar(BuildContext context) {
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text('Hello from the default snackbar'),
action: SnackBarAction(
label: 'Click Me',
onPressed: () {},
),
),
);
}
}

While running the above code we may get an exception Scaffold.of() called with a context that does not contain a Scaffold.
No Scaffold ancestor could be found starting from the context that was passed to Scaffold.of()

To overcome the exception we need to update the above code inside Nested Class

import 'package:flutter/material.dart';
import 'package:flushbar/flushbar.dart';

class MyScaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Snackbar'),backgroundColor: Colors.green,),
body: Center(
child: MyScaffoldWindow(),
),
);
}
}

This means we are writing more lines of code to show simple Snackbar.
To overcome this we are going to show Snackbar with Flushbar plugin

Let's Create Snackbar with Flushbar plugin

Add Flushbar plugin

dependencies:
flutter:
sdk: flutter
flushbar: ^1.10.4

Import Flushbar on your widget by

import 'package:flushbar/flushbar.dart';

Use the below code to show Snackbar without Scaffold

showSnackbarWithFlushbar(BuildContext context) {
Flushbar(
// There is also a messageText property for when you want to
// use a Text widget and not just a simple String
message: 'Snackbar Message from Flushbar',
// Even the button can be styled to your heart's content
mainButton: FlatButton(
child: Text(
'Click Me',
style: TextStyle(color: Theme.of(context).accentColor),
),
onPressed: () {},
),
duration: Duration(seconds: 3),

// Show it with a cascading operator
)..show(context);
}

Flushbar solve all of the problems of the default Snackbar

Apply Styles for Snackbar

showInfoFlushbar(BuildContext context) {
Flushbar(
title: 'Info Snackbar with Flushbar',
message: 'Showing inofo about RRTutors',
icon: Icon(
Icons.info_outline,
size: 28,
color: Colors.white,
),
leftBarIndicatorColor: Colors.grey,
duration: Duration(seconds: 3),
)..show(context);
}

Dismiss Sanckbar on Swipe

showDismissableFlushbar(BuildContext context) {
Flushbar(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),

borderRadius: 8,
backgroundGradient: LinearGradient(
colors: [Colors.green.shade800, Colors.greenAccent.shade700],
stops: [0.6, 1],
),
boxShadows: [
BoxShadow(
color: Colors.black45,
offset: Offset(3, 3),
blurRadius: 3,
),
],
// All of the previous Flushbars could be dismissed by swiping down
// now we want to swipe to the sides
dismissDirection: FlushbarDismissDirection.HORIZONTAL,
// The default curve is Curves.easeOut
forwardAnimationCurve: Curves.fastLinearToSlowEaseIn,
title: 'This is a dismissable Flushbar',
message: 'Dismissable on swipe',
)..show(context);
}

How to display Snackbar Infinite

Conclusion: In this post we covered what is snackbar and how show snackbar in fltter application and fixed issue of snackbar deprecated

Article Contributed By :

2658 Views

Projects By category