How to Drag and drop inside expansion tile? - flutter

Question

How to handle drag and drop list into another list?
How can I achieve this?
Thanks for the help!
I have tried with drag_and_drop_lists package, but I'm stuck in handle inside and outside item.
Full Example :
import 'package:drag_and_drop_lists/drag_and_drop_lists.dart';
import 'package:flutter/material.dart';
Future<void> main() async {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ExpansionTileExample(),
);
}
}
class FolderData {
String name;
List<ListData> listData;
FolderData({this.name, this.listData});
}
class ListData {
String name;
ListData({this.name});
}
class ExpansionTileExample extends StatefulWidget {
ExpansionTileExample({Key key}) : super(key: key);
#override
_ListTileExample createState() => _ListTileExample();
}
class _ListTileExample extends State<ExpansionTileExample> {
List<dynamic> _lists = [];
#override
void initState() {
super.initState();
_lists.add(FolderData(name: "Folder1", listData: []));
_lists.add(FolderData(name: "Folder2", listData: []));
_lists.add(ListData(
name: "List1",
));
_lists.add(ListData(
name: "List2",
));
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Expansion Tiles with drag and drop'),
),
body: DragAndDropLists(
children: List.generate(_lists.length, (index) => _buildList(index)),
onItemReorder: _onItemReorder,
onListReorder: _onListReorder,
listGhost: Padding(
padding: const EdgeInsets.symmetric(vertical: 30.0),
child: Center(
child: Container(
padding: EdgeInsets.symmetric(vertical: 30.0, horizontal: 100.0),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(7.0),
),
child: Icon(Icons.add_box),
),
),
),
),
);
}
_buildList(int outerIndex) {
var innerList = _lists[outerIndex];
return (innerList is FolderData)
? DragAndDropListExpansion(
title: Text('List ${innerList.name}'),
subtitle: Text('Subtitle ${innerList.name}'),
leading: Icon(Icons.ac_unit),
children: List.generate(innerList.listData.length, (index) => _buildItem(innerList.listData[index].name)),
listKey: ObjectKey(innerList),
)
: DragAndDropList(
children: <DragAndDropItem>[
DragAndDropItem(
child: ListTile(title: Text(innerList.name)),
),
],
);
}
_buildItem(String item) {
return DragAndDropItem(
child: ListTile(
title: Text(item),
),
);
}
// ======== Stuck here ========
_onItemReorder(int oldItemIndex, int oldListIndex, int newItemIndex, int newListIndex) {
setState(() {
var movedDataOuter = _lists[oldListIndex];
if (movedDataOuter is ListData) {
// 1. drag list inside folder.
var movedItem = _lists.removeAt(oldListIndex);
_lists[newListIndex].listData.insert(newItemIndex, movedItem);
} else {
// 2. remove list from folder.
var movedItem = _lists[oldListIndex].listData.removeAt(oldItemIndex);
_lists.insert(newListIndex, movedItem);
// 3. drag & drop inner list inside folder
// var movedItem = _lists[oldListIndex].listData.removeAt(oldItemIndex);
// _lists[oldListIndex].listData.insert(newItemIndex, movedItem);
}
// 4. drag and drop list outsie folder
// var movedItem = _lists.removeAt(oldListIndex);
// _lists.insert(newListIndex, movedItem);
});
}
_onListReorder(int oldListIndex, int newListIndex) {
setState(() {
var movedList = _lists.removeAt(oldListIndex);
if (movedList is FolderData) {
_lists.insert(newListIndex, movedList);
} else {
_lists[newListIndex].listData.insert(newListIndex, movedList);
}
});
}
}

Answer 1

you can use following package on pub.dev : drag_and_drop_lists
package: link
and if you need a tutorial then link