flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
166.34k stars 27.53k forks source link

Allow passing alignment to BottomSheet #117297

Open BenjiFarquhar opened 1 year ago

BenjiFarquhar commented 1 year ago

Can we pass in an alignment to the BottomSheet for use when it has constraints that make it not full width?

exaby73 commented 1 year ago

Hello @BenjiFarquhar. Could you elaborate on the issue you are highlighting here and the proposed solution? Would be great if you could include code samples and screenshots as well. Thank you

BenjiFarquhar commented 1 year ago

Hi @exaby73. When we pass the constraints below to showModalBottomSheet, it displays a bottom sheet that is half of the screen width wide, that comes up from the bottom-center of the screen.

    final result = await showModalBottomSheet(
        context: context,
        constraints: BoxConstraints(
          maxWidth: MediaQuery.of(context).size.width / 2
        ),
        shape: const RoundedRectangleBorder(
            borderRadius: MODAL_BOTTOM_SHEET_RADIUS),
        builder: (context) => ManageImagesModalBottomSheet(widget.sizingInfo));
Screenshot 2022-12-20 at 6 03 07 PM

I want to position it at the bottom-right of the screen instead.

Screenshot 2022-12-20 at 6 06 21 PM

There is this code inside bottom_sheet.dart:

    if (constraints != null) {
      bottomSheet = Align(
        alignment: Alignment.bottomCenter,
        heightFactor: 1.0,
        child: ConstrainedBox(
          constraints: constraints,
          child: bottomSheet,
        ),
      );
    }

And when I replace Alignment.bottomCenter with Alignment.bottomRight in that source code file, I get the result I want. So I would like to pass alignment: Alignment.bottomRight into showModalBottomSheet() which would then be used in the code snippet above as a solution to this issue.

exaby73 commented 1 year ago

Thanks for the detailed code sample and proposal :) Labelling the issue as this seems like a valid proposal

HansMuller commented 1 year ago

@esouthren - https://github.com/flutter/flutter/pull/116940 use size and alignment double values to scale and locate border edges. Maybe similar parameters could be used here? And for Snackbar?

JanikoNaber commented 1 month ago

Any updates on this topic? I have the same need to place the bottomSheet on bottomRight.

flutter-triage-bot[bot] commented 1 month ago

This issue is missing a priority label. Please set a priority label when adding the triaged-design label.