---
description: In this tutorial, you will learn how to use the SnackBar.
---

# Widgets 18 | SnackBar

## Before Start

When we start our tutorial, we should create a page to show our `SnackBar`. I will use a button to click, if you click it, it will show you a snack bar.

```dart
import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';

class SnackPage extends StatefulWidget {
  @override
  _SnackState createState() => _SnackState();
}

class _SnackState extends State<SnackPage> {
  GlobalKey<ScaffoldState> _key = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: _key,
        appBar: AppBar(
          title: Text(PageName.SNACK_BAR),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
             // our code.
            },
            child: Text("Show the snack bar"),
            color: RED,
          ),
        ));
  }
}
```

It will show you like this. If we click the button, I want that the SnackBar will show on the bottom of the screen.&#x20;

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LYkOHrjZquvfmwgu64f%2F-LYkQuqAX7ZoMvG7wjQl%2Fsnack-bar-01.png?alt=media\&token=92e31c0d-c785-4edb-b1c1-bf17930f435c)

## Simple Use

I will give you a simple to show the `SnackBar`. First, we should create a `SnackBar`.

```dart
  Widget _snackSample() => SnackBar(
        content: Text(
          "You have a message!",
          style: TextStyle(
            color: TEXT_BLACK,
            fontSize: 20,
          ),
          textAlign: TextAlign.center,
        ),
        backgroundColor: BLUE_LIGHT,
      );
```

Then, we use them in the `onPressed` function.

```dart
final bar = _snackSample();
_key.currentState.showSnackBar(bar);
```

When you click the button, it will show you as follow.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LYl5ACsYQW1IgJoUEEI%2F-LYl7YUwwknCtRBPDDUk%2Fsnack-bar-02.png?alt=media\&token=1e9d4b0f-61e1-48fe-ba6f-c500a3136af0)

## Constructor

When we start to learn the widgets, we should have a custom that we should look at its constructor first.

```dart
SnackBar({
    Key key,
    @required this.content,
    this.backgroundColor,
    this.action,
    this.duration = _kSnackBarDisplayDuration,
    this.animation,
  })
```

The `content` is a widget, the `backgroundColor` is the `Color`, the `duration` is a `Duration`, the animation is an Animation. So let's talk about them one by one.

## action

This parameter is very special because we do not see it before. So we should look at its definition.

```dart
  final SnackBarAction action;
```

This class is also a widget, let's look at its constructor.

```dart
SnackBarAction({
    Key key,
    this.textColor,
    this.disabledTextColor,
    @required this.label,
    @required this.onPressed,
  })
```

The `label` is the String, the `onPressed` is a function. The other two  are the `Color`. Let's look at an example.

```dart
  Widget _snackAction() => SnackBar(
        content: Text(
          "Test the action in the SnackBar.",
          style: TextStyle(
            color: TEXT_BLACK,
            fontSize: 20,
          ),
          textAlign: TextAlign.center,
        ),
        action: SnackBarAction(
          label: "I Know!",
          textColor: Colors.white,
          disabledTextColor: TEXT_BLACK_LIGHT,
          onPressed: () {
            print("I know you are testing the action in the SnackBar!");
          },
        ),
        backgroundColor: BLUE_LIGHT,
      );
```

You can use it in the button.

```dart
final bar = _snackAction();
_key.currentState.showSnackBar(bar);
```

It will show like this.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LYl5ACsYQW1IgJoUEEI%2F-LYlBisB6Lg_FFCZOh24%2Fsnack-bar-03.png?alt=media\&token=254de7a1-7e54-4f15-89de-f67eff8601bd)

When you click the `I Know!`, the console will print some strings.

```dart
I/flutter ( 4202): I know you are testing the action in the SnackBar!
```

## duration

When you want to change the show time of the `SnackBar`, you should use the parameter.`duration`. Let's see an example.

```dart
 Widget _snackDuration() => SnackBar(
        content: Text(
          "You have a message!",
          style: TextStyle(
            color: TEXT_BLACK,
            fontSize: 20,
          ),
          textAlign: TextAlign.center,
        ),
        backgroundColor: BLUE_LIGHT,
        duration: Duration(milliseconds: 100),
      );
```

When you click the button , you can see that the show time become short than before.The effect is below.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LYl5ACsYQW1IgJoUEEI%2F-LYlD_Pq43nKP2B066fG%2Fsnack-bar.gif?alt=media\&token=c7c3a3e1-9ef8-4ba6-b0a8-1a88c503dd67)

## Conclusion

I have talked about the parameter `action`,`duration`. I just use the `content` and `backgroundColor`,because they are very easy and we have used its type before, so I don't talk about its detail. Also, I don't plan to talk about the `animation`, I will talk about them in the Animation Widget.

Thanks for your reading!

The end.

#### Whole code in [GitHub](https://github.com/FlutterOpen/flutter-widgets-examples),star to support. <a href="#whole-code-in-github-star-to-support" id="whole-code-in-github-star-to-support"></a>

| Facebook Page                                         | Twitter                                 | GitHub                             | Medium                                        |
| ----------------------------------------------------- | --------------------------------------- | ---------------------------------- | --------------------------------------------- |
| [Flutter Open ](https://www.facebook.com/flutteropen) | [NieBin](https://twitter.com/niebin_gg) | [NieBin](https://github.com/nb312) | [FlutterOpen](https://medium.com/flutteropen) |











