Snackbar on Flutter (without Scaffold) using Flushbar

Last updated Sep 27, 2021


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 Scaffoldshow 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(),
      ),
    );
  }
}

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: () {},
        ),
      ),
    );
  }
}

 

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);
  }

 

Flutter Snackbar

 

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 :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

1607 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions