Show Snack Bar

The Snack Bar is used to convey a message about the action that an app has performed. Typically, it appears at the bottom of the screen for a few seconds. It disappears from the screen after the specified duration without requiring and any user interaction.

Adding Show Snack Bar Action

You can't show a bottom sheet and snack bar at the same time.

Go to your project page on FlutterFlow and follow the steps below to define a Show Snack Bar Action to any widget.

1. Select the Widget from the widget tree or from the canvas area.

2. Click on the Actions tab (on the right side of your screen).

3. Click on + Add Action and select the On Tap option.

4. Find the Action Type dropdown and change it to Show Snack Bar.

5. Under the Snack Bar Message section, find the Value input box and enter the text that you want to appear on the snack bar.

Styling Text

The Text Style property allows you to customize the Snack Bar to match your design.

See how to style a text.

Changing Background Color

The Background Color property allows you to change the background color of the snack bar.

See how to change color.

Changing Display Duration

Display duration is the amount of time Snack Bar stays visible on the screen. Sometimes you may want to change the default display duration (4000ms = 4 seconds) based on the length of the message.

Here's is how you change the display duration:

1. Add an action using instructions here if you haven't already done so.

2. Keep the Action tab open, Scroll down to the Duration(ms) section.

3. Use the slider to adjust the value or directly enter the value in the input box. If you want to display the snack bar only for a second enter the value as 1000.

Adding Action Inside Snack Bar

You can display a single text button inside the snack bar to take any action. For example, if you have the snack bar to display the item added message, you can add the Undo text button to revert to the item add action.

Here's how to add action inside the snack bar:

1. Add an action using instructions here if you haven't already done so.

2. Keep the Action tab open, Scroll down to the Add Action checkbox.

3. Checkmark the Add Action property.

4. Under the Label section, find the Value input box and enter the text that you want to appear on the text button.

5. Use the Label Color property to change the color of the text button.

6. Set the Action Type property to the desired one.