How to make drag and drop from drawer in Flutter

954 views Asked by At

I've provide the code. So the dragable widget is in the drawer and the drag target is in the home screen. But when I drag the container to put it in the drag target(home screen) the drawer doesn't close

If anyone have the full code that's working just like I discribe plz feel free to share cuz I think there's a lot of people trying to do this as well

 `Drawer(
  child: Column(children: [
    Padding(
      padding: const EdgeInsets.only(top: 100.0),
      child: Draggable(
        child: Container(
          color: Colors.red,
          width: 250,
          height: 100,
        ),
        feedback: Container(
          color: Colors.green,
          width: 250,
          height: 100,
        ),
        childWhenDragging: Container(
          color: Colors.grey,
          width: 250,
          height: 100,
        ),
      ),
    ),
  ]),
);

FloatingActionButton(
                  onPressed: () {
                    Scaffold.of(context).openDrawer();
                  },
                  child: const Icon(
                    Icons.add,
                    color: Colors.white,
                    size: 29,
                  ),
                  backgroundColor: Colors.redAccent,
                  elevation: 0,
                ),`

this is what I want it to look like

when I create a drawer and put container and wrap with drag-able widget then I put a drag target inside the screen But when I try to drag it the drawer doesn’t close.So if you have any idea how to close the drawer when widget is drag plz answer down below

1

There are 1 answers

1
DEFL On

The Class Draggable provides a function called onDragStarted. If you place Navigator.pop in there it will close the drawer once the drag starts

Drawer(
  child: Column(children: [
    Padding(
      padding: const EdgeInsets.only(top: 100.0),
      child: Draggable(
        //This function should close the drawer
        onDragStarted: () {
          Navigator.pop(context);
        },
        child: Container(
          color: Colors.red,
          width: 250,
          height: 100,
        ),
        feedback: Container(
          color: Colors.green,
          width: 250,
          height: 100,
        ),
        childWhenDragging: Container(
          color: Colors.grey,
          width: 250,
          height: 100,
        ),
      ),
    ),
  ]),
);

FloatingActionButton(
    onPressed: () {
       Scaffold.of(context).openDrawer();
     },
      child: const Icon(
             cons.add,
                color: Colors.white,
                size: 29,
              ),
              backgroundColor: Colors.redAccent,
              elevation: 0,
       ),