bottom sheet with initial height half of screen and if it scroll then height is increase to full screen

Question

I have a bottom sheet with below code in where i put a height 300.0 but I want increase height to full screen when user scroll ..how can i do that ..please

void _showBottomSheet() {
    setState(() {
      _showPersBottomSheetCallBack = null;
    });

    _scaffoldKey.currentState
        .showBottomSheet((context) {
      return new Container(
        height: 300.0,
        color: Colors.greenAccent,
        child: new Center(
          child: new Text("Hi BottomSheet"),
        ),
      );
    })
        .closed
        .whenComplete(() {
      if (mounted) {
        setState(() {
          _showPersBottomSheetCallBack = _showBottomSheet;
        });
      }
    });
  }

Answer 1

If all you want is a full-screen bottom sheet (as @edmond demonstrates), you can now use isScrollControlled: true without having to maintain your own hacked version of BottomSheet.

Regardless, the question is about first loading the sheet to half height, with the ability to extend to full height on scroll. For that fine-grained control, you'll still want to use isScrollControlled: true, but also you can wrap the content of the modal sheet in DraggableScrollableSheet. This Github comment shows you how to do it, which I'm copying here for reference:

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (BuildContext context) {
    return DraggableScrollableSheet(
      initialChildSize: 0.5, // half screen on load
      maxChildSize: 1,       // full screen on scroll
      minChildSize: 0.25,
      builder: (BuildContext context, ScrollController scrollController) {
        return Container(
          color: Colors.white,
          child: ListView.builder(
            controller: scrollController,
            itemCount: 25,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(title: Text('Item $index'));
            },
          ),
        );
      },
    );
  },
);

Answer 2

The flutter package bottom sheet is not meant to occupy the full screen, though a little tweak can produce the behavior you expect. If you look at the BottomSheet constructor, you will find the following:

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    return new BoxConstraints(
      minWidth: constraints.maxWidth,
      maxWidth: constraints.maxWidth,
      minHeight: 0.0,
      maxHeight: constraints.maxHeight * 9.0 / 16.0
    );
  }

If you remove the 9.0/16.0 height constraint, the bottom sheet will occupy the full screen height.