Trending Articles       10 Flutter Listview Examples       Flutter Custom Button Example       Flutter Audio Recording       Flutter 2.0 Autocomplete TextField       Current Location Google Maps

Snackbar on Flutter (without Scaffold) using Flushbar

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.

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 


846 Views

Author: RRTutors

Flutter Questions

Android Questions