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

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