bottom sheet with initial height half of screen and if it scroll then height is increase to full screen
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.
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'));
},
),
);
},
);
},
);