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

Hello Guys How are you all? Hope You all are fine. I want to show snackbar on tap of raisedButton but getting this following error Flutter Error: Scaffold.of() called with a context that does not contain a Scaffold. So today Here I come with all possible solutions for this error.

We are providing you all possible solutions to solve this error. let’s start this article without wasting your time.

How Scaffold.of() called with a context that does not contain a Scaffold Error Occurs ?

I want to show snackbar when tap on my RaisedButton. I have created showSnackBar but getting following error.

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown building HomePage(dirty):
Scaffold.of() called with a context that does not contain a Scaffold.

Here is my full source Code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlutterCorner'),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.black,
          textColor: Colors.white,
          onPressed: showSnackBar(context),
          child: Text('View'),
        ),
      ),
    );
  }
}

showSnackBar(BuildContext context) {
  final snackBar = SnackBar(content: Text('Are you Ready ?'));
  Scaffold.of(context).showSnackBar(snackBar);
}

How to solve Scaffold.of() called with a context that does not contain a Scaffold ?

Solution 1 : Use Diffrent Context

This Error Occurs cause of you’re using the context of the widget that instantiated Scaffold. Not the context of a child of the Scaffold. You can solve this Error by just using different context.

So Here We just saparete our context apart from our main BuildContext as shown in below code.

    return Scaffold(
      appBar: AppBar(
        title: Text('FlutterCorner'),
      ),
      body: Builder(
        builder: (context) => Center( //new context
          child: RaisedButton(
            color: Colors.black,
            textColor: Colors.white,
            onPressed: () => showSnackBar(context),
            child: Text('View'),
          ),
        ),
      ),
    );

This Solution Worked Perfectly for me. Comment below if its working for you too.

Solution 2 : Using Globle Key

You can solve this error by just define globlekey same like below.

1. Define Globle Key

  final globalKey = GlobalKey<ScaffoldState>();

2. Give Scaffold key as globalkey

    return Scaffold(
      key: globalKey,

3. Now you can use snackbar directly.

            onPressed: () {
              final snackBar = SnackBar(content: Text('Profile saved'));
              globalKey.currentState.showSnackBar(snackBar);
            },

Here Is My Full Source Code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  final globalKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: globalKey,
      appBar: AppBar(
        title: Text('FlutterCorner'),
      ),
      body: Builder(
        builder: (context) => Center(
          //new context
          child: RaisedButton(
            color: Colors.black,
            textColor: Colors.white,
            onPressed: () {
              final snackBar = SnackBar(content: Text('Profile saved'));
              globalKey.currentState.showSnackBar(snackBar);
            },
            child: Text('View'),
          ),
        ),
      ),
    );
  }
}

Don’t Forgot to add key property in Scaffold unless you will face another error Flutter showSnackBar called on null.

Solution 3

Simple way to solving this issue will be creating a key for your scaffold like this final with the following code:

First: GlobalKey<ScaffoldState>() _scaffoldKey = GlobalKey<ScaffoldState> ();

Scecond: Assign the Key to your Scaffold key: _scaffoldKey

Third: Call the Snackbar using _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text("Welcome")));

Summery

So it’s all About All possible solutions. Hope this above all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below on your suggestion.

Check Out Below Article

• How to make a blur Background Image effect in Flutter using BackdropFilter.
• Create Rounded Corners Image in Flutter.
• set Background Image to Scaffold in Flutter.
• How To Select multiple images with Flutter
• How to Set Network Image In Circular Avatar In Flutter?