I am working on Flutter application and I want to the functionality of toolbox. Drag and drop the elements from left panel to right panel. Currently I can drag drop element from left to right but the issue is once the element is dropped anywhere in the right panel I cannot drag drop it further in the same panel i.e. right. I want to change the location of dropped element but cannot do so. It remain there where is dropped it.
This is me code.
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
drawer: DrawerWidget(),
appBar: AppBar(
backgroundColor: Colors.white,
title: Text(
'Table Layout',
style: Theme.of(context).textTheme.title.merge(
TextStyle(letterSpacing: 1.3),
),
),
centerTitle: true,
elevation: 0,
),
body: Container(
child: Row(
children: [
Container(
color: Colors.blue[100],
width: MediaQuery.of(context).size.width * 0.30,
child: ListView.separated(
padding: const EdgeInsets.all(16.0),
itemCount: 3,
separatorBuilder: (context, index) {
return const SizedBox(
height: 12.0,
);
},
itemBuilder: (context, index) {
return MenuListItem(
photoProvider: images[index],
);
},
),
),
Expanded(
child: Container(
color: Colors.blue[200],
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 6.0,
),
child: Container(
height: double.infinity,
width: double.infinity,
color: Colors.grey,
child: DragTarget(
builder: (context, candidateItems, rejectedItems) {
return Container();
},
onAccept: (item) {
return Container(
height: 100,
width: 100,
color: Colors.pink,
);
},
),
),
),
),
),
],
),
),
);
}
}class MenuListItem extends StatelessWidget {
MenuListItem({
Key key,
@required this.photoProvider,
this.isDepressed = false,
}) : super(key: key);
final String photoProvider;
final bool isDepressed;
final GlobalKey _draggableKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Draggable(
dragAnchor: DragAnchor.pointer,
feedback: DraggingListItem(
dragKey: _draggableKey,
photoProvider: photoProvider,
),
child: Material(
elevation: 12.0,
borderRadius: BorderRadius.circular(20),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: SizedBox(
width: 120,
height: 120,
child: Center(
child: AnimatedContainer(
duration: const Duration(milliseconds: 100),
curve: Curves.easeInOut,
height: isDepressed ? 115 : 120,
width: isDepressed ? 115 : 120,
child: Image.asset(
photoProvider,
fit: BoxFit.cover,
),
),
),
),
),
),
),
);
}
}Can anyone help me how to achieve drag drop like I want. Thanks