Flutter ModalBottomSheet remove white lines

July 28, 2022

I can’t seem to find a good way to remove these small white lines, changed the container color to fit with the ModalBottomSheet default background color.

Here is a part of code:

void mountainModalBottomSheet(context){
  showModalBottomSheet(context: context, builder: (BuildContext bc){
    return Container(
      color: Color(0xff757575),
      height: MediaQuery.of(context).size.height*.60,
      child:Column(
        children: [
          Container(
            width: double.infinity,
            height: 225,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(38),
                topRight: Radius.circular(38),
              ),
              image:DecorationImage(image: NetworkImage('https://hotelvilatina.hr/wp-content/uploads/2017/11/sljeme.jpg'),
                  fit: BoxFit.fill),
            ),

>Solution :

Update

You can use shape property but you need to make sure of providing clipBehavior:hardEdge

showModalBottomSheet(
    clipBehavior: Clip.antiAlias, // or hardEdge must 
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(38),
        topRight: Radius.circular(38),
      ),
    ),
    context: context,
    backgroundColor: Colors.white,
    builder: (c) {
      return Container();
    });

Wrap your Container with ClipRRect widget

showModalBottomSheet(
    context: context,
    backgroundColor: Colors.transparent, // make sure of it
    builder: (c) {
      return ClipRRect(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(38),
            topRight: Radius.circular(38),
          ),
          child: Container(
            color: Colors.white,
          ));
    });