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();
      },
    ),
  ),
);
  }
}

CodePudding user response：

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(