Question 264259 in Flutter Question posted in
The official Flutter documentation can be found here.

How to set maximum height of a Bottom Sheet as 2/3 of screen height in Flutter

I am currently trying to make a bottom sheet as below:

Container(
  child: TextButton(
    onPressed: () {
      showModalBottomSheet(
        context: context,
        builder: (context) {
          return LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              double maxHeight = (2 / 3) * MediaQuery.of(context).size.height;
              return Container(
                height: constraints.maxHeight > maxHeight
                    ? maxHeight
                    : constraints.maxHeight,
                child: _BottomSheetWidget(),
              );
            },
          );
        },
        isScrollControlled: true, // Ensures the sheet is fully visible on smaller screens
      );
    },
    child: Text('Open Bottom Sheet'),
  ),
)

Here is my bottom sheet widget:

class _BottomSheetWidget extends StatelessWidget {
    const _BottomSheetWidget();

    @override
    Widget build(BuildContext context) {
        return SafeArea(
            child: SingleChildScrollView(
                child: Column(
                    [
                        // ...Some dynamic content 
                    ]
                )
            )
        )
    }
}

What I currently do is make the bottom sheet always have 2 / 3 screen width (even if the content height is less than 2 / 3 of the screen size, and therefore always make an empty section in the bottom sheet).

The column content is dynamic (based on the count data fetched). I want the bottom sheet height to fit with the content if the content height is less than 2 / 3 of the screen size. But if the content height is more than 2 / 3 of the screen size, I want the bottom sheet height is 2 / 3 of the screen size, and therefore the bottom sheet to be scrollable. How to do it then?

Tags:

3

Answers


  1. 0 
    Container(
  child: TextButton(
    onPressed: () {
      showModalBottomSheet(
        context: context,
        builder: (context) {
          return ConstrainedBox(
                      constraints:  BoxConstraints(
                        maxHeight: (2 / 3) * MediaQuery.of(context).size.height,
                      ),
                child: _BottomSheetWidget(),
              );
            },
          );
        },
      );
    },
    child: Text('Open Bottom Sheet'),
  ),
)
    Login or Signup to reply.
  2. 0

    Instead of using LayoutBuilder, you can wrap your Modal with SizedBox

    showModalBottomSheet(
    context: context,
    builder: (context) {
      return SizedBox(
        height: (2 / 3) * MediaQuery.of(context).size.height,
        child: _BottomSheetWidget(),
      );
    },
    isScrollControlled: true, // Ensures the sheet is fully visible on smaller screens
  );

    Don’t use SingleChildScrollView as your parent in BottomSheetWidget, cause the SingleChildScrollView’s height will adjust it child’s height. You can move it inside the Column like this

      SafeArea(
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        /// Bottom Sheet Header or NULL
        Expanded(
          child: SingleChildScrollView(
            child: /// list widgets,
          ),
        ),
        /// Bottom Sheet Footer or NULL
      ],
    ),
  ),
    Login or Signup to reply.
  3. 0

    You are close to your desired output. Just add width: double.infinity

    Container(
    child: TextButton(
      onPressed: () {
        showModalBottomSheet(
          context: context,
          builder: (context) {
            return LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
                double maxHeight =
                    (2 / 3) * MediaQuery.of(context).size.height;
                return SizedBox(
                  height: constraints.maxHeight > maxHeight
                      ? maxHeight
                      : constraints.maxHeight,
                  // Add this line to limit the width of the bottom sheet
                  width: double.infinity,
                  child: _BottomSheetWidget(),
                  
                );
              },
            );
          },
          isScrollControlled: true,
             
        );
      },
      child: Text('Open Bottom Sheet'),
    ),
  ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search