how to control the slidingUpPanel draggable

Question

i want a slidingUpPanel similar to YouTube comments section. that not open with the scrolling of the content but open and close only from the drag handle by tap or by swipe up/down).

the drag handle is the top section of the slidingUpPanel :

so the draggable should happen only from this drag handle not from the whole body. (you can try the code below to know what i mean)

it means if i scroll the body(the listView builder) the slidingUpPanel keep its place (either open or closed) until i swip it from the drag handle.

my current code:

PanelController panelController = PanelController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
      child: Stack(
        children: [
          SlidingUpPanel(
              controller: panelController,
              maxHeight: MediaQuery.of(context).size.height * .9,
              minHeight: MediaQuery.of(context).size.height * .7,
              borderRadius: BorderRadius.vertical(top: Radius.circular(40.0)),
              panelBuilder: (controller) => Stack(
                    alignment: Alignment.topCenter,
                    children: [
                      GestureDetector(
                        onTap: () {
                          panelController.isPanelOpen
                              ? panelController.close()
                              : panelController.open();
                        },
                        child: Container(
                          color: Colors.transparent,
                          height: 36.0,
                          width: MediaQuery.of(context).size.width,
                          child: Center(
                            child: Container(
                              width: 46.77,
                              height: 4.0,
                              decoration: BoxDecoration(color: Colors.grey),
                            ),
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(top: 40.0),
                        child: ListView.builder(
                            physics: const AlwaysScrollableScrollPhysics(),
                            controller: controller,
                            padding: EdgeInsets.zero,
                            itemCount: 20,
                            itemBuilder: (context, index) {
                              return Column(
                                children: [
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Container(
                                      height: 70.0,
                                      color: Colors.red,
                                    ),
                                  ),
                                ],
                              );
                            }),
                      ),
                    ],
                  )),
        ],
      ),
    ));
  }