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.
Select the Widget from the widget tree or from the canvas area.
Click on the Actions tab (on the right side of your screen).
Click on + Add Action and select the On Tap option.
Find the Action Type dropdown and change it to Show Snack Bar.
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.
Here's an example of how you can change the text style of the Snack Bar:
Add an action using instructions here if you haven't already done so.
Keep the Action tab open, Scroll down to the Text Style section.
Find the Theme Text Style dropdown. Click on Dropdown and select Custom (at the bottom).
Click on the button below the Font Family. Choose the font from the list. If the list doesn't contain the font you are looking for, you can search for it.
Find the Font Weight dropdown and select the appropriate weight.
To change the size, enter the value in the Font Size property.
Now, find the Text Color property, Click on the box next to Unset, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
Make it Italic by marking the Italic checkbox.
Changing Background Color
The Background Color property allows you to change the background color of the snack bar.
Here are the steps to change background color:
Add an action using instructions here if you haven't already done so.
Keep the Action tab open, Scroll down to the Background Color section.
Click on the box next to Unset, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
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:
Add an action using instructions here if you haven't already done so.
Keep the Action tab open, Scroll down to the Duration(ms) section.
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:
Add an action using instructions here if you haven't already done so.
Keep the Action tab open, Scroll down to the Add Action checkbox.
Checkmark the Add Action property.
Under the Label section, find the Value input box and enter the text that you want to appear on the text button.
Use the Label Color property to change the color of the text button.
Set the Action Type property to the desired one.
​
Hide Snackbar
Last modified 1yr ago