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

Flutter – BottomSheet is not shown at the bottom of the screen on phones with a large diagonal

On a phone with a diagonal of 6.7 the bottom sheet is shown starting from the middle of the screen, although on more "normal" screens, the bottom sheet is shown starting from the bottom of the screen as it should be

enter image description here

all widgets in the application are shown this way

void _showRegistrationTrustInfo(BuildContext context) {
showModalBottomSheet(
    isScrollControlled: true,
    context: context,
    useSafeArea: true,
    constraints: BoxConstraints(
      maxHeight: MediaQuery.of(context).size.height * 334 / 668,
    ),
    builder: (context) {
      return BottomSheetBody(children: [
        const Expanded(child: RegistrationForTrustInfo()),
        const SizedBox(
          height: 20,
        ),
        Row(
          children: [
            Expanded(
              child: ElevatedButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: const Text('Закрыть')),
            )
          ],
        )
      ]);
    });

}

BottomSheetBody

  class BottomSheetBody extends StatelessWidget {
  const BottomSheetBody({super.key, required this.children});

  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 9),
      child: Column(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          const TopLine(),
          const SizedBox(
            height: 20,
          ),
          ...children
        ],
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    Try removing the isScrollControlled and useSafeArea properties from the showModalBottomSheet. When you set isScrollControlled to true, the bottom sheet’s height can be larger than the screen’s height.

    showModalBottomSheet(
  context: context,
  builder: (context) {
    // bottom sheet content
  },
);
    Login or Signup to reply.
  2. 0

    I think that this fixed size is this limiting your component height:

      maxHeight: MediaQuery.of(context).size.height * 334 / 668,

    A modal is not supposed to cover the full screen, but just a part of it, usually somewhere in the center.
    Placing a modal covering the whole screen, removes the need of using that specific widget.
    Instead of using a Modal, you can just use an Expandable Widget to cover the whole screen or a Scaffold.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search