Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

No Scaffold widget found : Getting exception while opening Bottom Dialog sheet

I'm using Scaffold widget but while opening a bottom dialog sheet I'm getting this exception

@override
Widget build(BuildContext context) {

return Scaffold(
  appBar: AppBar(
    title: Text("Calendar"),
  ),
  body: SafeArea(
  .......
  .......

    child: GestureDetector(
                        onTap: (){
                          //getting exception here
                          showBottomSheet(
                              context: context,
                              builder: (context) => Container(
                                color: Colors.red,
                              ));
                        },

I'm stuck on this code, it'll be very helpful if someone can give any suggestion. Thank you.

like image 632
Ankit Dubey Avatar asked Feb 05 '20 08:02

Ankit Dubey


3 Answers

Use showModalBottomSheet instead of showBottomSheet try out below eg.

void _settingModalBottomSheet(BuildContext context){
    showModalBottomSheet(
        context: context,
        builder: (BuildContext bc){
      return Container(
        child: new Wrap(
          children: <Widget>[
            new ListTile(
                leading: new Icon(Icons.music_note),
                title: new Text('Music'),
                onTap: () => {}
            ),
            new ListTile(
              leading: new Icon(Icons.videocam),
              title: new Text('Video'),
              onTap: () => {},
            ),
          ],
        ),
      );
    });
}
like image 89
A R Avatar answered Oct 17 '22 02:10

A R


The problem is that the context used to show the BottomSheet is not the context of the Scaffold. You can solve this issue by using GlobalKey or wrap your GestureDetector in a Builder widget so that it gives you the context that contains a reference of the Scaffold.

Here is a example using GlobalKey with the state of the Scaffold:

// created the ScaffoldState key    
final scaffoldState = GlobalKey<ScaffoldState>();
    
    class MyWidget extends StatelessWidget {
      void _showSheet() {
        // Show BottomSheet here using the Scaffold state instead ot«f the Scaffold context
        scaffoldState.currentState
            .showBottomSheet((context) => Container(color: Colors.red));
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            key: scaffoldState,
            appBar: AppBar(
              title: Text("Calendar"),
            ),
            body: SafeArea(child: GestureDetector(onTap: () {
              //getting exception here
              _showSheet();
            })));
      }
    }
like image 18
Pedro Massango Avatar answered Oct 17 '22 01:10

Pedro Massango


Wrap the widget tree with Builder widget

 @override
Widget build(BuildContext context) {

return Scaffold(
  appBar: AppBar(
    title: Text("Calendar"),
  ),
  body: Builder(  //HERE
     builder:(context){
    
     return SafeArea(
     .......
     .......

    child: GestureDetector(
                        onTap: (){
                          //getting exception here
                          showBottomSheet(
                              context: context,
                              builder: (context) => Container(
                                color: Colors.red,
                              ));
                        },
like image 1
Anant Avatar answered Oct 17 '22 02:10

Anant