o7planning

Flutter SnackBar Tutorial

View more Tutorials:

1- SnackBar

In mobile application, SnackBar is a small interface component that provides a brief response after an user action. It appears at the bottom of the screen, and disappears automatically when time is up or when user interacts elsewhere on the screen.
SnackBar also provides a button as an option to perform an action. For example, undo an action you just performed, or retry the action you just performed if it fails.
SnackBar Constructor:
SnackBar Constructor
const SnackBar(
    {Key key,
    @required Widget content,
    Color backgroundColor,
    double elevation,
    EdgeInsetsGeometry margin,
    EdgeInsetsGeometry padding,
    double width,
    ShapeBorder shape,
    SnackBarBehavior behavior,
    SnackBarAction action,
    Duration duration: _snackBarDisplayDuration,
    Animation<double> animation,
    VoidCallback onVisible}
)
Flutter app follows Material Design consistency guidelines to ensure that when SnackBar shows up at the bottom of the screen it does not overlap with other important child widgets, such as FloatingActionButton. Therefore, SnackBar needs to be called via Scaffold.
Let's see a simple example:
main.dart (ex1)
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter SnackBar Example'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
      body: Center(
          child: Builder(
              builder: (BuildContext ctxOfScaffold)  {
                return ElevatedButton(
                    child: Text('Show SnackBar'),
                    onPressed: () {
                      this._showSnackBarMsgDeleted(ctxOfScaffold);
                    }
                );
              }
          )
      )
    );
  }

  void _showSnackBarMsgDeleted(BuildContext ctxOfScaffold) {
    // Create a SnackBar.
    final snackBar = SnackBar(
      content: Text('Message is deleted!'),
      action: SnackBarAction(
        label: 'UNDO',
        onPressed: () {
          this._showSnackBarMsgRestored(ctxOfScaffold);
        },
      ),
    );
    // Find the Scaffold in the widget tree
    // and use it to show a SnackBar.
    Scaffold.of(ctxOfScaffold).showSnackBar(snackBar);
  }

  void _showSnackBarMsgRestored(BuildContext ctxOfScaffold) {
    // Create a SnackBar.
    final snackBar = SnackBar(
      content: Text('Message is restored!')
    );
    // Find the Scaffold in the widget tree
    // and use it to show a SnackBar.
    Scaffold.of(ctxOfScaffold).showSnackBar(snackBar);
  }
}

2- content

content - The main content displayed on the SnackBar, normally a Text object.
@required Widget content

3- backgroundColor

backgroundColor - Background color of SnackBar
Color backgroundColor

4- elevation

elevation - SnackBar's Z-axis coordinates, its value affects the SnackBar's shadow size.
double elevation
Note: elevation property only works for floating SnackBar (behavior: SnackBarBehavior.floating).
elevation (ex1)
final snackBar = SnackBar(
  content: Text('Message is deleted!'),
  elevation: 15,
  behavior: SnackBarBehavior.floating,
  action: SnackBarAction(
    label: 'UNDO',
    onPressed: ()  {
    },
  ),
)

5- margin

margin property is used to create an empty space around SnackBar. However, this property only works if the value of behavior is SnackBarBehavior.floating and the width is not specified. Its default value is EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 10.0).
EdgeInsetsGeometry margin

6- padding

padding property is used to create an empty space within SnackBar and surround content and action.
EdgeInsetsGeometry padding

7- width

width property is the width of SnackBar and it only works if the behavior is SnackBarBehavior.floating. If width is specified, SnackBar will be placed in the center horizontally.
double width

8- shape

 ShapeBorder shape
  • TODO Link?

9- behavior

behavior property specifies SnackBar's behavior and position.
SnackBarBehavior behavior

// Enum values:
SnackBarBehavior.fixed
SnackBarBehavior.floating

10- action

action is displayed as a button on SnackBar. User can click on it to perform an action.
SnackBarAction action

11- duration

Duration duration: _snackBarDisplayDuration

12- animation

Animation<double> animation

13- withAnimation()

SnackBar withAnimation (
  Animation<double> newAnimation,
  {Key fallbackKey}
)

14- onVisible

VoidCallback onVisible

View more Tutorials:

Maybe you are interested

These are online courses outside the o7planning website that we introduced, which may include free or discounted courses.