Is there a way to keep FloatingActionButton at fixed position (with an opened BottomSheet)?

Viewed 331

I'm developping a flutter application which has a page with a (Circular notched rectangle) BottomAppBar, a FloatingActionButton and a BottomSheet that appears when the user is clicking on a marker on a map. My problem is, when the BottomSheet is displayed on the screen, it moves the FloatingActionButton up to the top of the BottomSheet. Here are the screenshots of what's happening in my app :

FAB

FAB when BottomSheet is opened

I want to keep this FloatingActionButton at the same position (so in middle of BottomAppBar) even when the BottomSheet is opened. Is it possible to do it, changing some existing properties ? Or do I have to build my own BottomSheet element so it doesn't interact this way with the FloatingActionButton ?

This the fragment of code for the FloatingActionButton/Scaffold in Home.dart :

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      extendBody: true,
      bottomNavigationBar: bottomAppBar(),
      floatingActionButton: Container(
        height: MediaQuery.of(context).size.width * 0.1625,
        width: MediaQuery.of(context).size.width * 0.1625,
        child: FittedBox(
          child: FloatingActionButton(
            elevation: 0.0,
            onPressed: () {},
            child: Icon(
              Icons.bolt,
              size: MediaQuery.of(context).size.width * 0.075,
            ),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      body: someWidget,
    );
  }

This is the one for the BottomSheet in my Map.dart (Map.dart here is just a widget in the Home.Dart PageView) :

showBottomSheet(
      context: context,
      builder: details(marker),
      backgroundColor: Colors.transparent,
);

Finally this is BottomAppBar code in Home.dart :

Widget bottomAppBar() {
    return BottomAppBar(
      color: lightBlackApp,
      shape: CircularNotchedRectangle(),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: options(),
      ),
);

Some requirements :

  • The BottomSheet needs to be displayed behind the BottomAppBar and FloatingActionButton, so ModalBottomSheet doesn't work in this scenario (also I need the user to be able to interact with other UI elements)
  • I need to keep this specific shape for the BottomAppBar

Thank you for your time !

0 Answers
Related