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

In this post, we are going to show you how to solve "Scaffold.of() called with a context that does not contain a Scaffold" error in Flutter. This error may occur when you are using the context of Scaffold. See the post below:

Error Message:

══╡ EXCEPTION CAUGHT BY GESTURE ╞═════════════════════
The following assertion was thrown while handling a gesture:
Scaffold.of() called with a context that does not 
contain a Scaffold. No Scaffold ancestor could be found 
starting from the context that was passed to Scaffold.of().
This usually happens when the context provided is from the 
same StatefulWidget as that whose build
function actually creates the Scaffold widget being sought.

Solution of Error:

First, declare the key for the scaffold:

final scaffoldKey = GlobalKey<ScaffoldState>();

Now, assign the key to Scaffold:

Scaffold(
   key: scaffoldKey,
)

Now, replace:

Scaffold.of(context)

//to

scaffoldKey.currentState!

For Example:

Scaffold.of(context).closeDrawer();

//to

scaffoldKey.currentState!.closeDrawer();

or, in case of bottomsheet:

scaffoldKey.currentState!.showBottomSheet(
   return Container();
)

If you are getting errors during showing Snackbar, see this example: How to Show Snackbar in Flutter

ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text("Hello This is FlutterCampus"))
);

Full App Example: 

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {  

  final scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          key: scaffoldKey,
          appBar: AppBar(
            title: Text("My AppBar"),
            leading: IconButton(
               icon: Icon(Icons.person),
               onPressed: (){
                  if(scaffoldKey.currentState!.isDrawerOpen){
                       scaffoldKey.currentState!.closeDrawer();
                       //close drawer, if drawer is open
                  }else{
                       scaffoldKey.currentState!.openDrawer();
                       //open drawer, if drawer is closed
                  }
               },
            ),
          ),
          drawer: Drawer(),
          
          body: Container(
              child: ElevatedButton( 
                onPressed: (){
                    scaffoldKey.currentState!.showBottomSheet(
                      (context){
                         return Container(
                            height: 300,
                            width: double.infinity,
                            color: Colors.lightGreen,
                            child: Text("Hello world"),
                         );
                      }
                    );
                },
                child: Text("Show Bottom Sheet"),
              ),
          )
       );
  }
}

In this way, you can solve "Scaffold.of() called with a context that does not contain a Scaffold" error in Flutter.