Flutter floatingActionButton on modal bottom (without scaffold)

user_3041184 0
Viewed 4970

I have a situation in which I want a modal bottom sheet to be visible upon tapping a widget. This code works correctly (from the widget, which is basically a "card"):

    return Container(
        color: Colors.white,
        margin: EdgeInsets.symmetric(horizontal: 5.0),
        child: Material(
            child: InkWell(
            onTap: () {
                    showMaterialModalBottomSheet(
                                expand: false,
                                context: context,
                                builder: (context) =>
                                    customiseItemScreen(item: this.item,),
                                );

            },
            ...
            ...

However, I'd also like to display a floating action button in the customiseItemScreen widget. When there's a scaffold involved, it's easy, to wit:

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton:
...
...

But since customiseItemScreen returns a Material (without a scaffold), the above members do not exist. Is there a better way to go about this or a solution that I may be missing with the existing code?

Thanks in advance,

bottom-sheet flutter floating-action-button modal-dialog
2 Answers

You can use a Stack widget with Positioned widget

Stack(
 children: [
  Material(...),
  Positioned(...) //put a button inside and position it with bottom and right
)
user_110067290

You can use Align with alignment: Alignment.bottomRight instead of Positioned for the button as follows:

Stack(
    children: [
        Material(...),
        Align(
            alignment: Alignment.bottomRight,
            child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Ink(
                    decoration: const ShapeDecoration(
                        color: Colors.lightBlue,
                        shape: CircleBorder(),
                    ),
                    child: IconButton(
                        icon: const Icon(Icons.add),
                        color: Colors.white,
                        onPressed: () {...},
                    ),
                ),
            ),
        ),
    ],
user_33656670
Related