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

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'),
                  )),
                );

              });

            }),