How to set Bottom Sheet position to top

Question

I want to create a expandable container that have multiple controls like textentry and buttons.

So I have implemented a bottom sheet but I want to set this position on top.

Code:

Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: RaisedButton(
            child: Text('Show Buttom Sheet'),
            onPressed: () {
              showModalBottomSheet(context: context, builder: (context){
                return StreamBuilder(
                  stream: controller.stream,
                  builder:(context,snapshot) => GestureDetector(
                      onVerticalDragUpdate: (DragUpdateDetails details)
{
                        position = MediaQuery.of(context).size.height- 
                      details.globalPosition.dy;
                        print('position dy = ${position}');

                        position.isNegative?Navigator.pop(context)

                            :controller.add(position);

                      },
                      behavior: HitTestBehavior.translucent,
                      child:
                      Container(
                        color: Colors.red,
                        height: snapshot.hasData ? snapshot.data:200.0,
                        width: double.infinity,
                        child: Text('Child'),
                      )),
                );

              });

            }),
      ),
    );
  }

Answer 1

Looking at the Material Design reference for Bottom Sheets it does suggest that the usage be ergonomic, meaning it should be at the bottom because it's easier to reach with your thumb (when using a phone). There don't seem to be other examples of "Top Sheets", implying there are better ways of handling a click of a button that's located at the top of the screen. For example in Gmail, clicking your avatar produces a Card that's positioned a little below the button.

Having said that, here is one way to create a "Top Sheet":

IconButton(
  icon: Icon(Icons.star),
  onPressed: () {
    return showGeneralDialog(
      context: context,
      barrierDismissible: true,
      transitionDuration: Duration(milliseconds: 500),
      barrierLabel: MaterialLocalizations.of(context).dialogLabel,
      barrierColor: Colors.black.withOpacity(0.5),
      pageBuilder: (context, _, __) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width,
              color: Colors.white,
              child: Card(
                child: ListView(
                  shrinkWrap: true,
                  children: <Widget>[
                    ListTile(
                      title: Text('Item 1'),
                      onTap: () => Navigator.of(context).pop('item1'),
                    ),
                    ListTile(
                      title: Text('Item 2'),
                      onTap: () => Navigator.of(context).pop('item2'),
                    ),
                    ListTile(
                      title: Text('Item 3'),
                      onTap: () => Navigator.of(context).pop('item3'),
                    ),
                  ],
                ),
              ),
            ),
          ],
        );
      },
      transitionBuilder: (context, animation, secondaryAnimation, child) {
        return SlideTransition(
          position: CurvedAnimation(
            parent: animation,
            curve: Curves.easeOut,
          ).drive(Tween<Offset>(
            begin: Offset(0, -1.0),
            end: Offset.zero,
          )),
          child: child,
        );
      },
    );
  }
);

Answer 2

I think the widget you want is a BackDrop.

Example here

And from the Actual Flutter Gallery they also use it in the options