showModalBottomSheet rounded corner - flutter

Question

I am facing strange issue in showModalBottomSheet. Rounded corner is not working. Please see the code. But ff I add the Text('Title') before Expanded widget, it is showing rounded corner.
But I can't add the title here because DownloadedDharmaSongScreen has AppBar.
showModalBottomSheet(
context: context,
isScrollControlled: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(_radius),
topRight: Radius.circular(_radius),
),
),
builder: (BuildContext context) {
return DraggableScrollableSheet(
initialChildSize: 0.9,
expand: false,
builder: (context, scrollController) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: DownloadedDharmaSongScreen(
controller: scrollController,
destinationFavourite: widget.destinationFavourite,
sourceFavourite: favourite,
socialMode: widget.socialMode,
),
),
const SizedBox(
height: 60,
)
],
);
},
);
},
);
DownloadedDharmaSongScreen
class DownloadedDharmaSongScreen extends StatefulWidget {
static const routeName = '/downloaded_dharma_song';
final ScrollController? controller;
final Favourite? destinationFavourite;
final Favourite? sourceFavourite;
final SocialMode socialMode;
const DownloadedDharmaSongScreen({
Key? key,
this.controller,
this.destinationFavourite,
this.sourceFavourite,
required this.socialMode,
}) : super(key: key);
#override
State<DownloadedDharmaSongScreen> createState() =>
_DownloadedDharmaSongScreen();
}
class _DownloadedDharmaSongScreen extends
State<DownloadedDharmaSongScreen> {
List<FavouriteSong> favouriteSongs = [];
List<FavouriteSong> selectedFavouriteSongs = [];
bool isSelected = false;
_loadDownloadFiles() async {
BlocProvider.of<FavouriteSongBloc>(context).add(
GetAllDownloadedSongsByFavouriteId(
favouriteId: widget.sourceFavourite!.id!));
}
#override
void initState() {
super.initState();
_loadDownloadFiles();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
appBar: AppBar(
centerTitle: true,
backgroundColor: Theme.of(context).backgroundColor,
elevation: 0,
title: AutoSizeText(
widget.sourceFavourite!.name,
style: Theme.of(context).appBarTheme.titleTextStyle,
),
leading: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(
Icons.arrow_back,
color: Theme.of(context).primaryIconTheme.color!,
),
),
actions: [
Container(
padding: const EdgeInsets.only(left: 10, right: 10),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
CupertinoButton(
minSize: double.minPositive,
padding: const EdgeInsets.only(right: 5),
child: Icon(Icons.done,
color: selectedFavouriteSongs.isNotEmpty
? Theme.of(context).primaryIconTheme.color!
: Theme.of(context).disabledColor),
onPressed: selectedFavouriteSongs.isNotEmpty
? () {
BlocProvider.of<FavouriteSongBloc>(context).add(
AddSelectedSongs(
favourite: widget.destinationFavourite!,
favouriteSongs: selectedFavouriteSongs,
socialMode: widget.socialMode));
}
: null,
),
],
),
)
],
),
body: BlocListener<FavouriteSongBloc, FavouriteSongState>(
listener: (context, state) {
if (state is SelectedFavouriteSuccess) {
Navigator.of(context).pop();
}
},
child: BlocBuilder<FavouriteSongBloc, FavouriteSongState>(
builder: (context, state) {
if (state is SongError) {
return const SomethingWentWrongScreen();
} else if (state is DownloadedSongListLoaded) {
if (state.favouriteSongs.isEmpty) {
return const NoResultFoundScreen(
title: 'သိမ်းထားသေားတရားတော်များ မရှိသေးပါ။',
subTitle:
'ကျေးဇူးပြု၍ တရားတော်များကို အစီအစဉ်စာရင်းထဲသို့ ထည့်ပါ။',
);
}
favouriteSongs = state.favouriteSongs;
return ListView.separated(
separatorBuilder: (BuildContext context, int index) =>
const Divider(height: 1),
itemCount: state.favouriteSongs.length,
itemBuilder: (_, int index) {
return Material(
child: ListTile(
minLeadingWidth: 0,
onTap: () {
setState(() {
favouriteSongs[index].isSelected =
!favouriteSongs[index].isSelected;
if (favouriteSongs[index].isSelected == true) {
selectedFavouriteSongs.add(favouriteSongs[index]
.copyWith(isSelected: true));
} else if (favouriteSongs[index].isSelected ==
false) {
selectedFavouriteSongs.removeWhere((element) =>
element.id == favouriteSongs[index].id);
}
});
},
title: TitleWidget(
favouriteSong: favouriteSongs[index],
),
subtitle:
SubTitleWidget(favouriteSong: favouriteSongs[index]),
trailing: favouriteSongs[index].isSelected
? Icon(
Icons.check_circle,
color: Theme.of(context).primaryColor,
)
: const Icon(Icons.check_circle_outline),
),
);
},
);
}
return const CircularProgressIndicatorWidget();
},
),
),
);
}
}

Answer 1

You can wrap DraggableScrollableSheet with ClipRRect with providing borderRadius.
builder: (BuildContext context) {
return ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(_radius),
topRight: Radius.circular(_radius),
),
child: DraggableScrollableSheet(
This issue is coming from builder inner views, here it is from DownloadedDharmaSongScreen, You can also wrap it with ClipRRect instead of using it on builder.
builder: (context, scrollController) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(_radius),
topRight: Radius.circular(_radius),
),
child:DownloadedDharmaSongScreen(