The Snackbar widget in Flutter, allows you to show a small message at the bottom of a screen. Generally, it is used to let users know about the action they have performed such as deleting an item, downloading an item, etc. But Sometimes when you add the Snackbar widget, you may get an error called scaffold.of() called with a context that does not contain a scaffold. So in this tutorial, we’ll see the right way to fix this error.
Here’s what we’ll cover:
- What Does the Error Look Like?
- Why Did you Get this Error?
- Steps to Fix Scaffold.of() Called with a Context that does not contain a Scaffold
- What is Scaffold of context showSnackBar deprecated
What Does the Error Look Like?
This is what the error looks like when you try to show the Snackbar message in your Flutter app.
Why Did you Get this Error?
You got this error because you have used the Scaffold.of(context) from the widget that actually creates the scaffold and not the child of the scaffold.
TLDR: Before you use the Scaffold.of(context) , scaffold widget must be created.
Steps to Fix Scaffold.of() Called with a Context that does not contain a Scaffold
To fix the error called ‘scaffold.of() called with a context that does not contain a scaffold’ in Flutter, you should use the ScaffoldMessenger. There are few other alternatives to overcome this error but it’s always a good idea to apply the best and right one.
Benefit: The main benefit of using ScaffoldMessenger is that it can show the snackbar in current scaffold and it can also keep the SnackBar being displayed as you navigate between pages.
Here are the steps to fix the error:
Step 1: Replace the Scaffold.of(context).showSnackBar(snackBar); with ScaffoldMessenger.of(context).showSnackBar(snackBar);.
Step 2: Restart the app.
Code Example:
ElevatedButton(
onPressed: () {
var snackBar = SnackBar(content: Text('Hello, I am here'));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
child: const Text(
'Show Snackbar',
style: TextStyle(fontSize: 24),
),
),Output:
What is Scaffold of context showSnackBar deprecated
If you see your code carefully, you’ll find that the IDE shows a deprecated message that says ‘showSnackbar is deprecated and shouldn’t be used’. This message simply inform you to replace Scaffold with ScaffoldMessenger.
Note: Showing deprecated messages on IDE is a way of letting users know the better alternative.
To get rid of this message:
Step 1: Replace the Scaffold.of(context).showSnackBar(snackBar); with ScaffoldMessenger.of(context).showSnackBar(snackBar);.
Step 2: Restart the app.
Code Example:
ElevatedButton(
onPressed: () {
var snackBar = SnackBar(content: Text('Hello, I am here'));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
child: const Text(
'Show Snackbar',
style: TextStyle(fontSize: 24),
),
),Conclusion
In this tutorial, we learned the right way to fix the error called scaffold.of() called with a context that does not contain a scaffold with practical examples. We first saw what this error looks like and then understood the cause of the error. Finally, we saw how to fix this error in the right way.
Would you like to check other interesting Flutter tutorials?
