[Flutter] How to drag and drop items inside expansion tile and also drag n drop outside...

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);
}
});
}
}

Continue reading...