Drag and drop inside expansion tile?

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

Solution

you can use following package on pub.dev : drag_and_drop_lists

package: link

and if you need a tutorial then link

Comments

[Vaidarbhi]

You did api calling in expansion tile?

[Yashraj]

@Vaidarbhi No currently I'm trying with static values.

[Yashraj]

I have tried with drag_and_drop_lists but not able to drag and drop list inside/outside folder that describe in code.

[Vaidarbhi]

Okay ! I am looking for API calling in expansion list in flutter. Need to implement foreach loop in it but can't find perfect example / solution :(

[Yashraj]

Okay I will try.

[Vaidarbhi]

Sorry , I am talking about Reorder listview... You may find official video at api.flutter.dev/flutter/material/ReorderableListView-class.h‌​tml

[Yashraj]

I have already implemented Reorderable list but I have no idea how to implement it with expansion tile.

[Yashraj]

Maybe this are you looking for : stackoverflow.com/questions/61790829/…

[Vaidarbhi]

Likewise , But I want to implement API integration in Expansion Tile. I try your solution link for sure. Thank you for that :)

[Yashraj]

Your Welcome...