Search code examples
flutterdraggablefloating-action-buttonscrollablemovable

How to Flutter Movable & Draggable & Scrollable Menu Floating Action Button


I'm trying to Flutter Movable & Draggable & Scrollable Menu Floating Action Button


Here is layout screen I have been changed many offset. It doesn't work. Point me if you have any flutter libraries that movable

I've been tried this movable & draggable & scrollable menu for flutter floating action button. I have a problem floating action button is not aligned in center of movable menu. when I drag this menu is moved other side. Please tell me if you have Flutter Floating Action Button that movable & draggable & Scrollable menu Floating Action Button Package Libraries.


  Offset offset = Offset(100, 100);

  return Scaffold(
      backgroundColor: Colors.green,
      body: SafeArea(
          child: Container(
        child: StreamBuilder<bool>(
            initialData: false,
            stream: _menuController.stream,
            builder: (context, snapshot) {
              return Stack(
                children: [
                  Positioned(
                    left: offset.dx,
                    top: offset.dy,
                    child: GestureDetector(
                      onPanUpdate: (details) {
                        setState(() {
                          offset = Offset(offset.dx + details.delta.dx,
                              offset.dy + details.delta.dy);
                          print('offset is' +
                              offset.dx.toString() +
                              offset.dy.toString());
                        });
                      },
                      child: FloatingActionButton(
                          child: Icon(CustomIcons.menu),
                          onPressed: () {
                            _changeMenuState();
                          }),
                    ),
                  ),
                  Container(
                    alignment: Alignment.center,
                    child: AnimatedContainer(
                        duration: Duration(milliseconds: 200),
                        height: snapshot.data ? 200 : 0,
                        child: CircleMenu(
                          icons: icons,
                          onItemClicked: (menuItem, index) {
                            selectedIndex = index;
                            _changeMenuState();
                          },
                          drawpointdx: offset.dx,
                          drawpointdy: offset.dy,
                        )),
                  ),
                  
                ],
              );
            }),
      )),
    );

Solution

  • You can use my draggable and expandable fab package. draggable_expandable_fab