CODEWITHSUNDEEP
dartflutter
RIFAL
RIFAL

Reputation: 3627

how to set showModalBottomSheet to full height?

I use showRoundedModalBottomSheet, how can I adjust this modal height till the appbar?

enter image description here

Upvotes: 136

Views: 161257

Answers (16)

Charitha Ratnayake
Charitha Ratnayake

Reputation: 379

In the widget build your bottom sheet like the one below,

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Builder(builder: (context) {
        return Center(
          child: TextButton(
            child: Text("Show bottom sheet"),
            onPressed: () => _showBottomSheet(context),
          ),
        );
      }),
    );
  }

Now in the _showBottomSheet(context) add the below lines to set the height that you need (a percentage value from device height)

showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      constraints: BoxConstraints.loose(Size.fromHeight(mediaQueryData.size.height * 0.75)),
      builder: (context) {
        return Flex(
          direction: Axis.vertical,
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,

          children: [
            Flexible(
          child: ListView(
            shrinkWrap: true,
            children: [
               //list items
            ]
          );],
        );
      },
    );
  }
}

This will help you set the bottom sheet height as a percentage of the screen height.

Upvotes: 0

Thai Nguyen
Thai Nguyen

Reputation: 1

enter image description here

showModalBottomSheet(
        context: context,
        builder: (ctx) => Container(),
        isScrollControlled: true,
        **useSafeArea**: true);

Upvotes: 0

HJo
HJo

Reputation: 2205

A way to do it without isScrollControlled: true (which adds a scrollable field and can mess with layout)

return showModalBottomSheet(
      context: context,
      useSafeArea: true,
      constraints: BoxConstraints(
        maxHeight: double.infinity,
      ),
      scrollControlDisabledMaxHeightRatio: 1,
      builder: (context) {
        // your widget
      },
    );

you need to both allow the constraints to take up any space, and set the scrollControlDisabledMaxHeightRatio to 1 to allow it to go full screen useSafeArea stops it from expanding over the status bar

Upvotes: 6

Vahid Rajabi
Vahid Rajabi

Reputation: 359

You can also use DraggableScrollableSheet to adjust the height of the bottom sheet and handle scrolling :

  showModalBottomSheet(
  context: context,
  useRootNavigator: true,
  isScrollControlled: true,
  enableDrag: true,
  builder: (_) {
    return DraggableScrollableSheet(
      minChildSize: minSize,
      maxChildSize: maxSize,
      expand: false,
      initialChildSize: initSize,
      builder: (context, scrollController) {
        return YourWidget();
      },
    );
  },
);

Upvotes: 1

Marjan Davodinejad
Marjan Davodinejad

Reputation: 509

Using constraints and isScrollControlled fields like this:

 showModalBottomSheet(
                  context: context,
                   constraints: BoxConstraints(minHeight:  context.mediaQuerySize.height * .9, maxHeight: context.mediaQuerySize.height * .9),
                  isScrollControlled: true,
                  builder: (context) => YourWidget(),
                )

but we should implement both minHeight and maxHeight.

Upvotes: 3

MD. IBRAHIM KHALIL TANIM
MD. IBRAHIM KHALIL TANIM

Reputation: 817

You can control the height by using FractionallySizedBox and set useSafeArea to true to get the accurate useable height without notch.

 showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      useSafeArea: true,
      builder: (_) {
        return FractionallySizedBox(
          heightFactor: 0.85,
          child: Container(),
        );
      },
    );

Upvotes: 5

BalgabayevD
BalgabayevD

Reputation: 44

showModalBottomSheet(
    isScrollControlled: true,
    context: context,
    builder: (context) {
        return DraggableScrollableSheet(
            builder: (
                BuildContext context,
                // Use scrollController for listView inside content
                ScrollController scrollController,
            ) {
                // Your content here <---
                return Scaffold();
              },
            initialChildSize: 0.95,
            maxChildSize: 0.95,
            minChildSize: 0.90,
        );
    },
);

Upvotes: 0

zulkarnain shah
zulkarnain shah

Reputation: 1059

The default height for BottomSheet is half the screen size. If you want your BottomSheet to EXPAND according to your content DYNAMICALLY.

showModalBottomSheet<dynamic>(
isScrollControlled: true,
context: context,
builder: (BuildContext bc) {
  return Wrap(
      children: <Widget>[...]
  )
 }
)

This will automatically expand the BottomSheet according to the content inside.

Upvotes: 6

Kartik Malhotra
Kartik Malhotra

Reputation: 257

You can wrap the contents in a Container and provide height to full height

  await showModalBottomSheet(
      context: context,
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(30), topRight: Radius.circular(30))),
      backgroundColor: Colors.white,
      builder: (BuildContext context) {
         return Container(
             height: MediaQuery.of(context).size.height,
             child: ListView(
         )
      )
   }
}

Upvotes: 0

ivanacorovic
ivanacorovic

Reputation: 2867

What worked for me was returning the modal's content wrapped in a DraggableScrollableSheet:

showModalBottomSheet(
  backgroundColor: Colors.transparent,
  context: context,
  isScrollControlled: true,
  isDismissible: true,
  builder: (BuildContext context) {
    return DraggableScrollableSheet(
      initialChildSize: 0.75, //set this as you want
      maxChildSize: 0.75, //set this as you want
      minChildSize: 0.75, //set this as you want
      expand: true,
      builder: (context, scrollController) {
        return Container(...); //whatever you're returning, does not have to be a Container
      }
    );
  }
)

Upvotes: 31

Muhammad Usman
Muhammad Usman

Reputation: 2846

You can control the height by using FractionallySizedBox and setting the isScrollControlled to true.

showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (context) {
      return FractionallySizedBox(
        heightFactor: 0.9,
        child: Container(),
      );
    });

Upvotes: 239

M A F
M A F

Reputation: 301

You can modify this method in the definition of the bottom sheet. Normally, it is 9.0, but as you can see here I changed it to 13.0. 16.0 is full screen.

@override
      BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
        return BoxConstraints(
          minWidth: constraints.maxWidth,
          maxWidth: constraints.maxWidth,
          minHeight: 0.0,
          maxHeight: isScrollControlled
            ? constraints.maxHeight
            : constraints.maxHeight * 13.0 / 16.0,
        );
      }

Upvotes: 0

ibhavikmakwana
ibhavikmakwana

Reputation: 10101

[Update]

In showModalBottomSheet(...) set the property isScrollControlled:true.

It will make bottomSheet to full height.

[Original answer]

You can Implement the FullScreenDialog instead.

Flutter Gallery app has an example of FullScreenDialog

You can open your Dialog using below code:

Navigator.of(context).push(new MaterialPageRoute<Null>(
      builder: (BuildContext context) {
        return Dialog();
      },
    fullscreenDialog: true
  ));

Check this blog post too for more:

Hope it will help you.

Upvotes: 243

Andrew
Andrew

Reputation: 37969

I guess the easiest way is:

showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (context) => Wrap(children: [YourSheetWidget()]),
    );

Upvotes: 27

jose.angel.jimenez
jose.angel.jimenez

Reputation: 2247

If you call showModalBottomSheet() with isScrollControlled: true, then the dialog will be allowed to occupy the whole height.

To adjust the height to the content, you can proceed as usually, for example, using Container and Wrap widgets.

Example:

final items = <Widget>[
  ListTile(
    leading: Icon(Icons.photo_camera),
    title: Text('Camera'),
    onTap: () {},
  ),
  ListTile(
    leading: Icon(Icons.photo_library),
    title: Text('Select'),
    onTap: () {},
  ),
  ListTile(
    leading: Icon(Icons.delete),
    title: Text('Delete'),
    onTap: () {},
  ),
  Divider(),
  if (true)
    ListTile(
      title: Text('Cancel'),
      onTap: () {},
    ),
];

showModalBottomSheet(
  context: context,
  builder: (BuildContext _) {
    return Container(
      child: Wrap(
        children: items,
      ),
    );
  },
  isScrollControlled: true,
);

Upvotes: 45

B&#233; Tập Code
B&#233; Tập Code

Reputation: 427

  1. You open class BottomSheet in library of flutter and change maxHeight

from 

BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
return BoxConstraints(
  minWidth: constraints.maxWidth,
  maxWidth: constraints.maxWidth,
  minHeight: 0.0,
  maxHeight: constraints.maxHeight * 9.0 / 16.0
);}

to 

BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
return BoxConstraints(
  minWidth: constraints.maxWidth,
  maxWidth: constraints.maxWidth,
  minHeight: 0.0,
  maxHeight: constraints.maxHeight
);}
  1. You can create a new class with other name and copy source code from class BottomSheet and change maxHeight

Upvotes: 8

Related Questions