SnackBar class

A lightweight message with an optional action which briefly displays at the bottom of the screen.

Learn more about SnackBar on the Flutter YouTube channel.

To display a snack bar, call ScaffoldMessenger.of(context).showSnackBar(), passing an instance of SnackBar that describes the message.

To control how long the SnackBar remains visible, specify a duration.

A SnackBar with an action will not time out when TalkBack or VoiceOver are enabled. This is controlled by AccessibilityFeatures.accessibleNavigation.

During page transitions, the SnackBar will smoothly animate to its location on the other page. For example if the SnackBar.behavior is set to SnackBarBehavior.floating and the next page has a floating action button, while the current one does not, the SnackBar will smoothly animate above the floating action button. It also works in the case of a back gesture transition.

Here is an example of a SnackBar with an action button implemented using SnackBarAction.

To see it in action, copy and run this code snippet on DartPad.

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [SnackBar].

void main() => runApp(const SnackBarExampleApp());

class SnackBarExampleApp extends StatelessWidget {
  const SnackBarExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('SnackBar Sample')),
        body: const Center(child: SnackBarExample()),
      ),
    );
  }
}

class SnackBarExample extends StatelessWidget {
  const SnackBarExample({super.key});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: const Text('Show Snackbar'),
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: const Text('Awesome Snackbar!'),
            action: SnackBarAction(
              label: 'Action',
              onPressed: () {
                // Code to execute.
              },
            ),
          ),
        );
      },
    );
  }
}

Here is an example of a customized SnackBar. It utilizes behavior, shape, padding, width, and duration to customize the location, appearance, and the duration for which the SnackBar is visible.

To see it in action, copy and run this code snippet on DartPad.

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [SnackBar].

void main() => runApp(const SnackBarExampleApp());

class SnackBarExampleApp extends StatelessWidget {
  const SnackBarExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('SnackBar Sample')),
        body: const Center(child: SnackBarExample()),
      ),
    );
  }
}

class SnackBarExample extends StatelessWidget {
  const SnackBarExample({super.key});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: const Text('Show Snackbar'),
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            action: SnackBarAction(
              label: 'Action',
              onPressed: () {
                // Code to execute.
              },
            ),
            content: const Text('Awesome SnackBar!'),
            duration: const Duration(milliseconds: 1500),
            width: 280.0, // Width of the SnackBar.
            padding: const .symmetric(
              horizontal: 8.0, // Inner padding for SnackBar content.
            ),
            behavior: .floating,
            shape: RoundedRectangleBorder(borderRadius: .circular(10.0)),
          ),
        );
      },
    );
  }
}

This example demonstrates the various SnackBar widget components, including an optional icon, in either floating or fixed format.

To see it in action, copy and run this code snippet on DartPad.

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [SnackBar].

void main() => runApp(const SnackBarExampleApp());

/// A Material 3 [SnackBar] demonstrating an optional icon, in either floating
/// or fixed format.
class SnackBarExampleApp extends StatelessWidget {
  const SnackBarExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: SnackBarExample());
  }
}

class SnackBarExample extends StatefulWidget {
  const SnackBarExample({super.key});

  @override
  State<SnackBarExample> createState() => _SnackBarExampleState();
}

class _SnackBarExampleState extends State<SnackBarExample> {
  SnackBarBehavior? _snackBarBehavior = .floating;
  bool _withIcon = true;
  bool _withAction = true;
  bool _multiLine = false;
  bool _longActionLabel = false;
  double _sliderValue = 0.25;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SnackBar Sample')),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(_snackBar());
        },
        icon: const Icon(Icons.play_arrow),
        label: const Text('Show Snackbar'),
      ),
      body: ListView(
        children: <Widget>[
          RadioGroup<SnackBarBehavior>(
            groupValue: _snackBarBehavior,
            onChanged: (SnackBarBehavior? value) {
              setState(() {
                _snackBarBehavior = value;
              });
            },
            child: const ExpansionTile(
              title: Text('Behavior'),
              initiallyExpanded: true,
              children: <Widget>[
                RadioListTile<SnackBarBehavior>(
                  title: Text('Fixed'),
                  value: SnackBarBehavior.fixed,
                ),
                RadioListTile<SnackBarBehavior>(
                  title: Text('Floating'),
                  value: SnackBarBehavior.floating,
                ),
              ],
            ),
          ),
          ExpansionTile(
            title: const Text('Content'),
            initiallyExpanded: true,
            children: <Widget>[
              SwitchListTile(
                title: const Text('Include close Icon'),
                value: _withIcon,
                onChanged: (bool value) {
                  setState(() {
                    _withIcon = value;
                  });
                },
              ),
              SwitchListTile(
                title: const Text('Multi Line Text'),
                value: _multiLine,
                onChanged: (bool value) {
                  setState(() {
                    _multiLine = value;
                  });
                },
              ),
              SwitchListTile(
                title: const Text('Include Action'),
                value: _withAction,
                onChanged: (bool value) {
                  setState(() {
                    _withAction = value;
                  });
                },
              ),
              SwitchListTile(
                title: const Text('Long Action Label'),
                value: _longActionLabel,
                onChanged: !_withAction
                    ? null
                    : (bool value) => setState(() {
                        _longActionLabel = value;
                      }),
              ),
            ],
          ),
          ExpansionTile(
            title: const Text('Action new-line overflow threshold'),
            initiallyExpanded: true,
            children: <Widget>[
              Slider(
                value: _sliderValue,
                divisions: 20,
                label: _sliderValue.toStringAsFixed(2),
                onChanged: (double value) => setState(() {
                  _sliderValue = value;
                }),
              ),
            ],
          ),
          // Avoid hiding content behind the floating action button
          const SizedBox(height: 100),
        ],
      ),
    );
  }

  SnackBar _snackBar() {
    final SnackBarAction? action = _withAction
        ? SnackBarAction(
            label: _longActionLabel ? 'Long Action Text' : 'Action',
            onPressed: () {
              // Code to execute.
            },
          )
        : null;
    final double? width = _snackBarBehavior == SnackBarBehavior.floating
        ? 400.0
        : null;
    final String label = _multiLine
        ? 'A Snack Bar with quite a lot of text which spans across multiple '
              'lines. You can look at how the Action Label moves around when trying '
              'to layout this text.'
        : 'Single Line Snack Bar';
    return SnackBar(
      content: Text(label),
      showCloseIcon: _withIcon,
      width: width,
      behavior: _snackBarBehavior,
      action: action,
      duration: const Duration(seconds: 3),
      actionOverflowThreshold: _sliderValue,
    );
  }
}

See also:

• ScaffoldMessenger.of, to obtain the current ScaffoldMessengerState, which manages the display and animation of snack bars.
• ScaffoldMessengerState.showSnackBar, which displays a SnackBar.
• ScaffoldMessengerState.removeCurrentSnackBar, which abruptly hides the currently displayed snack bar, if any, and allows the next to be displayed.
• SnackBarAction, which is used to specify an action button to show on the snack bar.
• SnackBarThemeData, to configure the default property values for SnackBar widgets.
• material.io/design/components/snackbars.html

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatefulWidget
• SnackBar

Constructors

SnackBar({Key? key, required Widget content, Color? backgroundColor, double? elevation, EdgeInsetsGeometry? margin, EdgeInsetsGeometry? padding, double? width, ShapeBorder? shape, HitTestBehavior? hitTestBehavior, SnackBarBehavior? behavior, SnackBarAction? action, double? actionOverflowThreshold, bool? showCloseIcon, Color? closeIconColor, Duration duration = _snackBarDisplayDuration, bool? persist, Animation<double>? animation, VoidCallback? onVisible, DismissDirection? dismissDirection, Clip clipBehavior = Clip.hardEdge})

Creates a snack bar.

const

Properties

action → SnackBarAction?

(optional) An action that the user can take based on the snack bar.

final

actionOverflowThreshold → double?

(optional) The percentage threshold for action widget's width before it overflows to a new line.

final

animation → Animation<double>?

The animation driving the entrance and exit of the snack bar.

final

backgroundColor → Color?

The snack bar's background color.

final

behavior → SnackBarBehavior?

This defines the behavior and location of the snack bar.

final

clipBehavior → Clip

The content will be clipped (or not) according to this option.

final

closeIconColor → Color?

An optional color for the close icon, if showCloseIcon is true.

final

content → Widget

The primary content of the snack bar.

final

dismissDirection → DismissDirection?

The direction in which the SnackBar can be dismissed.

final

duration → Duration

The amount of time the snack bar should be displayed.

final

elevation → double?

The z-coordinate at which to place the snack bar. This controls the size of the shadow below the snack bar.

final

hashCode → int

The hash code for this object.

no setter, inherited

hitTestBehavior → HitTestBehavior?

Defines how the snack bar area, including margin, will behave during hit testing.

final

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

margin → EdgeInsetsGeometry?

Empty space to surround the snack bar.

final

onVisible → VoidCallback?

Called the first time that the snackbar is visible within a Scaffold.

final

padding → EdgeInsetsGeometry?

The amount of padding to apply to the snack bar's content and optional action.

final

persist → bool

Whether the snack bar will stay or auto-dismiss after timeout.

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

shape → ShapeBorder?

The shape of the snack bar's Material.

final

showCloseIcon → bool?

(optional) Whether to include a "close" icon widget.

final

width → double?

The width of the snack bar.

final

Methods

createElement() → StatefulElement

Creates a StatefulElement to manage this widget's location in the tree.

inherited

createState() → State<SnackBar>

Creates the mutable state for this widget at a given location in the tree.

override

debugDescribeChildren() → List<DiagnosticsNode>

Returns a list of DiagnosticsNode objects describing this node's children.

inherited

debugFillProperties(DiagnosticPropertiesBuilder properties) → void

Add additional properties associated with the node.

inherited

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode

Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.

inherited

toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String

A string representation of this object.

inherited

toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String

Returns a string representation of this node and its descendants.

inherited

toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String

Returns a one-line detailed description of the object.

inherited

toStringShort() → String

A short, textual description of this widget.

inherited

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

Creates a copy of this snack bar but with the animation replaced with the given animation.

Operators

operator ==(Object other) → bool

The equality operator.

inherited

Static Methods

createAnimationController({required TickerProvider vsync, Duration? duration, Duration? reverseDuration}) → AnimationController

Creates an animation controller useful for driving a snack bar's entrance and exit animation.