Flutter - Calling persistent bottom sheet from another class

Question

I have a persistent bottom sheet in Flutter which currently exists inside an icons onPressed(){} property.

I would like to move this persistent bottom sheet to a new class on its own but I can't seem to get it working. I am still new to flutter and can't work out how to build the structure for the persistent bottom bar.

I have currently tried the below but when I run my code, I get an exception that is thrown.

main.dart

@override
Widget build(BuildContext context) {
return Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    title: Text('Test App'),
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.open_in_new),
        onPressed: (){
          ShowBottomSheet(context);
        },
      )
    ],
  ),

bottom_modal_sheet.dart

final GlobalKey<ScaffoldState> _scaffoldKey = new 
GlobalKey<ScaffoldState>();

void ShowBottomSheet(BuildContext context) {
  _scaffoldKey.currentState.showBottomSheet<Null>((BuildContext context) 
{
return new Container(
  width: double.infinity,
  child: new Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Padding(
        padding: EdgeInsets.only(left: 24.0, top: 16.0),
        child: Text('Site Location',
          style: TextStyle(fontSize: 24.0, color: Color(0xFF1181A1), fontWeight: FontWeight.bold,),
        ),
      ),
      Padding(
        padding: EdgeInsets.only(left: 24.0, top: 16.0),
        child: Text('11 Carr Road, Three Kings, Auckland 1042',
          textAlign: TextAlign.left,
          style: TextStyle(fontSize: 16.0, color: Color(0xFF8596AC)),
        ),
      ),
      Padding(
        padding: EdgeInsets.only(left: 24.0, top: 24.0, right: 24.0, bottom: 16.0),
        child: RasiedGradientButton(
          child: Text('Set Location', style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold, color: Colors.white)),
          gradient: LinearGradient(
            colors: <Color>[Color(0xFFFCCF58), Color(0xFFFEAA00)]
          ),
          onPressed: (){
            print('button clicked');
          },
        )  
      ),
    ],
));
  });
}

I am getting the error:

I/flutter (19024): ══╡ EXCEPTION CAUGHT BY GESTURE 
╞═══════════════════════════════════════════════════════════════════
I/flutter (19024): The following NoSuchMethodError was thrown while 
handling a gesture:
I/flutter (19024): The method 'showBottomSheet' was called on null.
I/flutter (19024): Receiver: null
I/flutter (19024): Tried calling: showBottomSheet<Null>(Closure: 
(BuildContext) => Container)
I/flutter (19024): 

Answer 1

You just need call showBottomSheet in your screen widget that you want show the bottom sheet and return the widget of your custom bottom sheet. The snippet show how to do this. Read the source comments.

// our Screen widget class
class MyScreen extends StatefulWidget {
  @override
  _MyScreenScreenState createState() => _MyScreenScreenState();
}

class _MyScreenState extends State<MyScreenScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
        title: Text('Test App'),
      actions: <Widget>[
        IconButton( icon: Icon(Icons.open_in_new),
        onPressed: (){
          _showMyBottomSheet();
        },
        )
      ],
        ),
    );
  }

  void _showMyBottomSheet(){
    // the context of the bottomSheet will be this widget
    //the context here is where you want to showthe bottom sheet
    showBottomSheet(context: context,
        builder: (BuildContext context){ 
          return MyBottomSheetLayout(); // returns your BottomSheet widget
        }
    );
  }
}

//your bottom sheet widget class
//you can put your things here, like buttons, callbacks and layout
class MyBottomSheetLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(); // return your bottomSheetLayout
  }
}