How to set showModalBottomSheet to initally half height but expandable and dismissable - flutter

Question

Following code is dismissable but it takes up full height initially due to colorsList having a lot of colors:
onPressed: () {
showModalBottomSheet(
context: this.context,
isScrollControlled: true,
builder: (BuildContext context) {
return Wrap(
children: [
for (List<Color> colors in colorsList)
Container(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("${colorsName[colorsList.indexOf(colors)]}"),
Container(
height: 80,
child: ListView.builder(
padding: EdgeInsets.only(left: 8, right: 8,),
scrollDirection: Axis.horizontal,
itemCount: colors.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.only(left: 8,),
child: FloatingActionButton(
backgroundColor: colors[index],
tooltip: "Choose this color",
onPressed: () {
setState(() {
this.color = colors[index];
});
Navigator.pop(context);
},
),
);
},
),
),
],
),
),
],
);
}
);
},

Answer 1

wrap the content of the sheet by a stream builder ,and update the stream when drag occurs
StreamController<double> controller = StreamController.broadcast();
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'),
)),
);
});
}),