Search code examples
flutterflutter-layoutflutter-showmodalbottomsheet

Flutter ModalBottomSheet remove white lines


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.

enter image description here

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

    enter image description here