close

Scaffold.of() called with a context that does not contain a Scaffold

Image for post
Image for postPhoto by Max Nelson on Unsplash

At times you need to execute a basic rationale that shows SnackBar. How about we envision there is a Button that shows a SnackBar.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          RaisedButton(
              child: Text('Show Snackbar'),
              onPressed: () {
                Scaffold.of(context).showSnackBar(SnackBar(
                      content: Text('Show Snackbar'),
                      duration: Duration(seconds: 3),
                    ));
              }),

In the wake of pressing the Button you can see the accompanying blunder:

Image for post

“Scaffold.of() called with a setting that doesn’t contain a Scaffold. No Scaffold precursor could be discovered beginning from the setting that was passed to Scaffold.of(). This typically happens when the setting gave is from a similar StatefulWidget as that whose assemble work really makes the Scaffold gadget being looked for. There are a few different ways to dodge this issue. The least difficult is to utilize a Builder to get a setting that is “under” the Scaffold. For an illustration of this, kindly observe the documentation for Scaffold.of(): https://docs.flutter.io/ripple/material/Scaffold/of.html

A more effective arrangement is to part your incorporate capacity into a few gadgets. This presents another setting from which you can acquire the Scaffold. In this arrangement, you would have an external gadget that makes the Scaffold populated by cases of your new inward gadgets, and afterward in these internal gadgets you would utilize Scaffold.of(). A less rich however more catalyst arrangement is allocate a GlobalKey to the Scaffold, at that point utilize the key.currentState property to acquire the ScaffoldState instead of utilizing the Scaffold.of() work. The setting utilized was … “

It happens in light of the fact that the current setting doesn’t contain a Scaffold. Despite the fact that we see that our fabricate work brings Scaffold back. Setting begins to search for a Scaffold in the parent and the momentum fabricate work is excused.

How about we execute all recommended strategies to fix the issue (from the screen capture above).

Manufacturer Widget

We start by wrapping the Button with a Builder Widget. It is a dispassionate Widget that calls a conclusion to acquire its kid gadget. To show the SnackBar it utilizes a setting from Builder.

Builder(
  builder: (context) => RaisedButton(
    child: Text('Show Snackbar'),
    onPressed: () {
      Scaffold.of(context).showSnackBar(SnackBar(
        content: Text('Show Snackbar'),
        duration: Duration(seconds: 3),
      ));
    }),
),

Split a form work

The following recommended approach is to part an incorporate capacity into a few gadgets. That is the reason we move our Button to a StatelessWidget.

class SeparateWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        child: Text("Button moved to separate widget"),
        onPressed: () {
          Scaffold.of(context).showSnackBar(SnackBar(
                content: Text('Button moved to separate widget'),
                duration: Duration(seconds: 3),
              ));
        });
  }

The assemble work has a kid setting and our SnackBar shows effectively.

Worldwide Key

The last prescribed methodology is to appoint a GlobalKey to the Scaffold. A key that is remarkable over the whole application. Worldwide keys interestingly distinguish components, give admittance to different items that are related with components, for example, a BuildContext and, for StatefulWidgets, a State. Worldwide keys are costly, and, as I would see it, it’s anything but a decent way to deal with take care of this issue if there are another two methodologies that are depicted previously. Yet anyway how about we view how to actualize this. We need to make a Global key example and relegate it to the Scaffold Widget:

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,

After that we will get a territory of Scaffold to show SnackBar:

_scaffoldKey.currentState.showSnackBar(
  SnackBar(
    content: Text('Assign a GlobalKey to the Scaffold'),
    duration: Duration(seconds: 3),
  ));

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment