Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the size of a showModalBottomSheet? [Flutter]

Tags:

flutter

I am using a showModalBottomSheet widget and i want to changed the size so that it occupies about 75% of the screen (by default it seems to be occupying 50%). I tried to follow the documentation but could not find a size property. Could someone suggest me a method to change the size of this widget?

currently looks like this


1 Answers

  • MediaQuery in Container or SizedBox
  • Flexible, Expanded widgets in Column or Row Widgets
  • Wrap, FractionallySizedBox widgets

Choose one of them which one is better for your architecture

       showModalBottomSheet(
          context: context,
          builder: (BuildContext builder) {
            return Container(
              height: MediaQuery.of(context).copyWith().size.height * 0.75,
              child: CupertinoDatePicker(
                initialDateTime: appointmentDate,
                onDateTimeChanged: (DateTime newDate) {
                  if (this.mounted) setState(() => appointmentDate = newDate);
                },
                use24hFormat: true,
                mode: CupertinoDatePickerMode.date,
                isScrollControlled: true,
              ),
            );
          },
        );
like image 74
Can Karabag Avatar answered Oct 26 '25 06:10

Can Karabag



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!