Scaffold not found error in Flutter for BottomModalSheet widget even when it is defined inside a Scaffold

Question

I was trying to implement a BottomModalSheet for a test App. But every time the same error pops up saying that Scaffold not found. The code for the app is below. The error shows the Scaffold is implemented by the MaterialApp Widget, So I removed the MaterialApp Widget and tried but the same error popped up again.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello,World"),
      ),
      body: Center(
        child: Container(
          height: 300,
          width: 400,
          child: Column(
            children: <Widget>[
              //Container(color: Colors.blue, child: Text("Hello,World")),
              Container(
                height:200,
                width:500,
                child: FlatButton(
                  onPressed: (){
                    print("I Was clicked");
                    var sheetController = showBottomSheet(
                        context: context,
                        builder: (context) => BottomSheetWidget());
                    sheetController.closed.then((value) {
                    });
                  },
                  child: Container(
                    color: Colors.red,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}


class BottomSheetWidget extends StatefulWidget {
  const BottomSheetWidget({Key key}) : super(key: key);

  @override
  _BottomSheetWidgetState createState() => _BottomSheetWidgetState();
}

class _BottomSheetWidgetState extends State<BottomSheetWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 5, left: 15, right: 15),
      height: 160,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Container(
            height: 125,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(15),
                boxShadow: [
                  BoxShadow(
                      blurRadius: 10, color: Colors.grey[300], spreadRadius: 5)
                ]),
            child: Column(
              children: <Widget>[
                Container(
                  height:200,
                  width: 500,
                  child:Text("This is bottom Sheet")
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

The Error log is as follows:

Syncing files to device AOSP on IA Emulator...
Reloaded 1 of 478 libraries in 2,727ms.
I/flutter (31983): I Was clicked

════════ Exception caught by gesture ═══════════════════════════════════════════════════════════════
The following assertion was thrown while handling a gesture:
No Scaffold widget found.

MyHomePage widgets require a Scaffold widget ancestor.
The specific widget that could not find a Scaffold ancestor was: MyHomePage
  state: _MyHomePageState#d2d59
The ancestors of this widget were: 
  : MaterialApp
    state: _MaterialAppState#d6736
  : MyApp
  ...

Typically, the Scaffold widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree.

When the exception was thrown, this was the stack: 
#0      debugCheckHasScaffold.<anonymous closure> (package:flutter/src/material/debug.dart:112:7)
#1      debugCheckHasScaffold (package:flutter/src/material/debug.dart:123:4)
#2      showBottomSheet (package:flutter/src/material/bottom_sheet.dart:534:10)
#3      _MyHomePageState.build.<anonymous closure> (package:flutter_app/main.dart:42:43)
#4      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:706:14)
...
Handler: "onTap"
Recognizer: TapGestureRecognizer#6c46a
  debugOwner: GestureDetector
  state: possible
  won arena
  finalPosition: Offset(169.5, 356.2)
  finalLocalPosition: Offset(163.8, 124.4)
  button: 1
  sent tap down
════════════════════════════════════════════════════════════════════════════════════════════════════

Answer 1

As stated here Use Builder widget instead of Keys. So here is the code:

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Hello,World"),
        ),
        body: Builder( // Wrap widget tree with Builder widget
          builder: (context) {
          return Center(
            child: Container(
              height: 300,
              width: 400,
              child: Column(
                children: <Widget>[
                  Container(
                    height: 200,
                    width: 500,
                    child: FlatButton(
                      onPressed: () {
                        print("I Was clicked");
                        var sheetController = showBottomSheet(
                            context: context,
                            builder: (context) => BottomSheetWidget());
                        sheetController.closed.then((value) {});
                      },
                      child: Container(
                        color: Colors.red,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        }));
  }
}```

Answer 2

You can use "showModalBottomSheet".

var sheetController = showModalBottomSheet(
    context: context,
    builder: (context) => BottomSheetWidget());
sheetController.then((value) {});

Answer 3

You can copy paste run full code below
You can use var scaffoldKey.currentState.showBottomSheet

code snippet

final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();

return Scaffold(
  key: scaffoldKey,

 ...

 onPressed: () {
                print("I Was clicked");
                var sheetController = scaffoldKey.currentState
                    .showBottomSheet((context) => BottomSheetWidget());
                sheetController.closed.then((value) {
                  print("closed");
                });
              },

working demo

full code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();

    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        title: Text("Hello,World"),
      ),
      body: Center(
        child: Container(
          height: 300,
          width: 400,
          child: Column(
            children: <Widget>[
              //Container(color: Colors.blue, child: Text("Hello,World")),
              Container(
                height: 200,
                width: 500,
                child: FlatButton(
                  onPressed: () {
                    print("I Was clicked");
                    var sheetController = scaffoldKey.currentState
                        .showBottomSheet((context) => BottomSheetWidget());
                    sheetController.closed.then((value) {
                      print("closed");
                    });
                  },
                  child: Container(
                    color: Colors.red,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class BottomSheetWidget extends StatefulWidget {
  const BottomSheetWidget({Key key}) : super(key: key);

  @override
  _BottomSheetWidgetState createState() => _BottomSheetWidgetState();
}

class _BottomSheetWidgetState extends State<BottomSheetWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 5, left: 15, right: 15),
      height: 160,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Container(
            height: 125,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(15),
                boxShadow: [
                  BoxShadow(
                      blurRadius: 10, color: Colors.grey[300], spreadRadius: 5)
                ]),
            child: Column(
              children: <Widget>[
                Container(
                    height: 100,
                    width: 500,
                    child: Text("This is bottom Sheet")),
              ],
            ),
          )
        ],
      ),
    );
  }
}