How do I round the edges of this panel in Flutter?

Question

I am using the https://pub.dev/packages/flutter_sliding_up_panel dependency and I want to round the edges of the panel below. This is the code I am using

 SlidingUpPanelWidget(
      child: Column(
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(35.0),
              topRight: Radius.circular(35.0),
            ),
            child: Container(
              color: Colors.red,
              alignment: Alignment.center,
              child: Row(
                children: <Widget>[
                  Icon(
                    Icons.menu,
                    size: 30,
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      left: 8.0,
                    ),
                  ),
                  Text(
                    'click or drag',
                  )
                ],
                mainAxisAlignment: MainAxisAlignment.center,
              ),
              height: 50.0,
            ),
          ),
          Divider(
            height: 0.5,
            color: Colors.grey,
          ),
          Flexible(
            child: Container(
              child: ListView.separated(
                controller: scrollController,
                physics: ClampingScrollPhysics(),
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('list item $index'),
                  );
                },
                separatorBuilder: (context, index) {
                  return Divider(
                    height: 0.5,
                  );
                },
                shrinkWrap: true,
                itemCount: 20,
              ),
              color: Colors.white,
            ),
          ),
        ],
        mainAxisSize: MainAxisSize.min,
      ),
      controlHeight: 50.0,
      anchor: 0.4,
      panelController: panelController,
    ),

and this is what the collapsed panel currently looks like:

I want the entire panel to be as rounded as the red container.

Answer 1

You can't do it. The library has a hardcoded Material widget around the widget you give it.

The only thing you can do is to copy the whole library and modify it. It is a small library only has one file you need to copy.

At line 192 in the library you have this code:

child: Material(
                key: _childKey,
                color: Theme.of(context).backgroundColor,
                elevation: widget.elevation,
                child: SizedBox(
                  height: MediaQuery.of(context).size.height,
                  child: widget.child,
                ),
              ),

Modify it like this:

child: Material(
                key: _childKey,
                color: Colors.transparent,
                shadowColor: Colors.transparent,
                elevation: widget.elevation,
                child: SizedBox(
                  height: MediaQuery.of(context).size.height,
                  child: widget.child,
                ),
              ),