In Flutter, bottomSheetDialog's radius is not working-CodePudding

To implement flutter bottomSheetDialog with dynamic height, I wrote a code like this.

void showCustomBottomSheetDialog(Widget body, BuildContext context) {
    showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (BuildContext ctx) {
        return Wrap(
          children: [
            Column(
              children: [
                Container(
                  height: 24.sp,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(10.0),
                      topRight: Radius.circular(10.0),
                    ),
                  ),
                ),
                body,
              ],
            ),
          ],
        );
      },
    );
  }

showCustomBottomSheetDialog(
                Container(
                  child: Column(
                    children: [
                      TextFormField(),
                      Text('asdfasdfds'),
                      Text('asdfasdfds'),
                      Text('asdfasdfds'),
                    ],
                  ),
                ),
                context,
              );

But with this code, the displayed bottomSheet did not have a rounded corner...

Could you tell me what is a problem of my code...?

CodePudding user response：

create rounded corner manually eg:

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  backgroundColor: Colors.transparent,
  builder: (contex) {
    return Container(
              decoration: BoxDecoration(
              color: Colors.white,
              borderRadius:
                      const BorderRadius.vertical(top: Radius.circular(18))),
              child: Column(
                children: []
....

also you can wrap it with DraggableScrollableSheet to make it scrollable widget

CodePudding user response：

This is because the Container with rounded corner is inside the Column widget. For this to work ,lift up the Container.

Code now:

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  builder: (BuildContext ctx) {
        return Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(10.0),
                  topRight: Radius.circular(10.0),
                ),
              ),
              child: Column(...)
         ),
  },
);

CodePudding user response：

Actually, we have shape property on showModalBottomSheet and can be used to make rounded corner, like

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  shape: const RoundedRectangleBorder(  //this
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(24),
      topRight: Radius.circular(24),
    ),
  ),

More about showModalBottomSheet