Flutter: Sort, Drag and Drop between multiple lists or columns

Question

I've been researching some list sorting libraries like flutter_list_drag_and_drop, reorderable_list, flutter_reorderable_list, dragable_flutter_list, and others, but all work with only one list.

What I'm wanting to do can be understood in the image below, which is exactly what the Trello app has.

Any library suggestions or how to do this?

Drag and Drop

score 6 · Answer 1 · answered Feb 14 '19 at 08:53

I've been researching some list sorting libraries like flutter_list_drag_and_drop, reorderable_list, flutter_reorderable_list, dragable_flutter_list and others, but all work with only one list.

Right ! All current available libraries work with only one list.

I got one more plugin called orderable_stack which is based on a "data items" list

Please refer orderable_stack for more details.

Also you can refer this link for more draggable implementations.

Note: Currently orderable_stack is incompatible with Dart 2

Hope this will helps you

score 5 · Answer 2 · edited May 11 '20 at 03:34

I use boardview flutter plugin.

import 'package:boardview/board_item.dart';
import 'package:boardview/board_list.dart';
import 'package:boardview/boardview.dart';
@override
  Widget build(BuildContext context) {

List<BoardList> boardList = List<BoardList>();
List<BoardItem> boardItem = List<BoardItem>();
    boardItem.add(new BoardItem(
      boardList: BoardListState(),
      item: boarditem(),
      test: '1',
    ));

boardList.add(BoardList(
      index: 1,
      items: boardItem,
      header: header()
    ));

Widget header() {
    return Row( ... );}

Widget boarditem() {
    return Card( ... );}

 return BoardView(
      lists: boardList,
    );
}

For those seeking to drag items between vertically stacked lists, try [checklist](https://pub.dev/packages/checklist) by the same author as [boardview](https://pub.dev/packages/boardview). — holocronweaver, Jul 10 '20 at 05:21

score 3 · Answer 3 · answered Jul 14 '21 at 06:48

Just to complete this old question and for the case someone like me is searching in 2021 here is a package that can manage drag and drop items from one list to another and drag and drop these lists themselves. Flutter package from pub.dev

Tutorial can be found here: Tutorial by Johannes Milke

score 2 · Answer 4 · answered Sep 11 '19 at 15:04

2

If you still haven't found a good solution there's the boardview flutter plugin.

It has the same features as trellos draggable lists.

(P.S. I'm the developer for it I was lazy when creating it so there are no example gifs for it)

answered Sep 11 '19 at 15:04

Jacob Bonk

303
3
8

I found your repo before discovering this topic. Thanks for your contribution! I decided to search further because there was no docs and came across this. Several lines of usage in the README would make the lib hundred times more useful. :-) – Kaspi May 09 '20 at 11:17
E.g. copy/paste what Pak has written. – Kaspi May 09 '20 at 11:19
Do your `BoardList`'s support nested `BoardList`'s? – widavies Sep 06 '20 at 03:52

score 2 · Answer 5 · edited Apr 29 '23 at 08:49

If you are still exploring do checkout kanban_board. I am the developer of this package, adding the example to clear the implementation.

import 'package:flutter/material.dart';
import 'package:kanban_board/custom/board.dart';
import 'package:kanban_board/models/inputs.dart';

class Example extends StatefulWidget {
  const Example({super.key});

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  @override
  Widget build(BuildContext context) {
    return KanbanBoard(
      List.generate(
        8,
        (index) => BoardListsData(
            items: List.generate(
          50,
          (index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
                "Lorem ipsum dolor sit amet, Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. $index",
                style: TextStyle(
                    fontSize: 19,
                    height: 1.3,
                    color: Colors.grey.shade800,
                    fontWeight: FontWeight.w500)),
          ),
        )),
      ),
      onItemLongPress: (cardIndex, listIndex) {},
      onItemReorder:
          (oldCardIndex, newCardIndex, oldListIndex, newListIndex) {},
      onListLongPress: (listIndex) {},
      onListReorder: (oldListIndex, newListIndex) {},
      onItemTap: (cardIndex, listIndex) {},
      onListTap: (listIndex) {},
      onListRename: (oldName, newName) {},
      backgroundColor: Colors.white,
      displacementY: 124,
      displacementX: 100,
      textStyle: TextStyle(
          fontSize: 19,
          height: 1.3,
          color: Colors.grey.shade800,
          fontWeight: FontWeight.w500),
    );
  }
}

Demo in kanban_board : screen record kanban package

Flutter: Sort, Drag and Drop between multiple lists or columns

5 Answers5