Flutter package for drag-and-drop reordering of two-level lists

Overview

drag_and_drop_lists

Two-level drag and drop reorderable lists.

Features

  • Reorder elements between multiple lists
  • Reorder lists
  • Drag and drop new elements from outside of the lists
  • Vertical or horizontal layout
  • Use with drag handles, long presses, or short presses
  • Expandable lists
  • Can be used in slivers
  • Prevent individual lists/elements from being able to be dragged
  • Easy to extend with custom layouts

Known Issues

There is currently (as of flutter v. 1.24.0-1.0.pre) an issue only on web where dragging an item with some descendant that includes an InkWell widget with an onTap method will throw an exception. This includes having a ListTile with an onTap method defined.

This seems to be resolved by using a GestureDetector and its onTap method instead of the InkWell.

See the following issues:

Usage

To use this plugin, add drag_and_drop_lists as a dependency in your pubspec.yaml file. For example:

dependencies:
  drag_and_drop_lists: ^0.2.1

Now in your Dart code, you can use: import 'package:drag_and_drop_lists/drag_and_drop_lists.dart';

To add the lists, add a DragAndDropLists widget. Set its children to a list of DragAndDropList. Likewise, set the children of DragAndDropList to a list of DragAndDropItem. For example:

  // Outer list
  List<DragAndDropList> _contents;

  @override
  void initState() {
    super.initState();

    // Generate a list
    _contents = List.generate(10, (index) {
      return DragAndDropList(
        header: Text('Header $index'),
        children: <DragAndDropItem>[
          DragAndDropItem(
            child: Text('$index.1'),
          ),
          DragAndDropItem(
            child: Text('$index.2'),
          ),
          DragAndDropItem(
            child: Text('$index.3'),
          ),
        ],
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    // Add a DragAndDropLists. The only required parameters are children,
    // onItemReorder, and onListReorder. All other parameters are used for
    // styling the lists and changing its behaviour. See the samples in the
    // example app for many more ways to configure this.
    return DragAndDropLists(
      children: _contents,
      onItemReorder: _onItemReorder,
      onListReorder: _onListReorder,
    );
  }

  _onItemReorder(int oldItemIndex, int oldListIndex, int newItemIndex, int newListIndex) {
    setState(() {
      var movedItem = _contents[oldListIndex].children.removeAt(oldItemIndex);
      _contents[newListIndex].children.insert(newItemIndex, movedItem);
    });
  }

  _onListReorder(int oldListIndex, int newListIndex) {
    setState(() {
      var movedList = _contents.removeAt(oldListIndex);
      _contents.insert(newListIndex, movedList);
    });
  }

For further examples, see the example app or view the example code directly.

Comments
  • drag event

    drag event

    Great library. Can you please tell me if it is possible to intercept the drag and drop event? I want to display the position deletion area when starting dragging. Saw wrappers, but did not understand how to use it.

    opened by bystrovsv 16
  • Add option to drag with a handle

    Add option to drag with a handle

    Hi @philip-brink I've been looking for a decent, up to date, package which takes care of reorganizing lists. I've tried a few but they have all kinds of problems. Your project seems to be the most promising at the moment. One feature, which I'd like to see would be the option to have a custom handle to drag an item with. Currently I can only drag an item on longpress or, if it's set to false, drag the whole item. Both ways have their user experience problems. Dragging on longpress takes a lot of time if there's a lot of items. Dragging the whole item makes scrolling the list impossible without a scroll wheel. I believe the best option would be to have a customizable drag handle.

    opened by mivoligo 7
  • this ui is excepted ?

    this ui is excepted ?

    https://github.com/philip-brink/DragAndDropLists/blob/18228c8a112a9efa90f6be81dfa1aca0081e5d29/lib/drag_and_drop_list_target.dart#L48

    at bottom has 110 height blank , it's hope this ?

    image

    opened by qyu37 5
  • Add Flutter 3 support

    Add Flutter 3 support

    get this warning at runtime:

    ../../../.pub-cache/hosted/pub.dartlang.org/drag_and_drop_lists-0.3.2+2/lib/measure_size.dart:23:22: Warning: Operand of null-aware operation '!' has type 'SchedulerBinding' which excludes null.
     - 'SchedulerBinding' is from 'package:flutter/src/scheduler/binding.dart' ('../../../fvm/versions/3.0.0/packages/flutter/lib/src/scheduler/binding.dart').
        SchedulerBinding.instance!.addPostFrameCallback(postFrameCallback);
    

    My pull request fix this problem : https://github.com/philip-brink/DragAndDropLists/pull/75

    opened by mauriceraguseinit 3
  • rtl directionaity does not work

    rtl directionaity does not work

    I want to use this package in Arabic, but when I rtl, the program has a problem, the problem is that when it moves, the items that should be in the wrong position, for example, instead of moving from the left, you have to move from the right.

    opened by HamiidrezaRamezani 3
  • Unable to put DragAndDropLists as a child of ListView

    Unable to put DragAndDropLists as a child of ListView

    If DragAndDropLists is put under a parent ListView, the following exception is thrown:

    I/flutter ( 9482): The following assertion was thrown during performResize():
    I/flutter ( 9482): Vertical viewport was given unbounded height.
    I/flutter ( 9482): Viewports expand in the scrolling direction to fill their container. In this case, a vertical
    I/flutter ( 9482): viewport was given an unlimited amount of vertical space in which to expand. This situation
    I/flutter ( 9482): typically happens when a scrollable widget is nested inside another scrollable widget.
    I/flutter ( 9482): If this widget is always nested in a scrollable widget there is no need to use a viewport because
    I/flutter ( 9482): there will always be enough vertical space for the children. In this case, consider using a Column
    I/flutter ( 9482): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
    I/flutter ( 9482): the height of the viewport to the sum of the heights of its children.
    I/flutter ( 9482):
    I/flutter ( 9482): The relevant error-causing widget was:
    I/flutter ( 9482):   DragAndDropLists
    

    I checked from code that DragAndDropLists uses internally ListView. If you expose ListView.shrinkWrap this issue can be avoided. Other (maybe better) option would be to use Column instead of ListView when DragAndDropLists.disableScrolling is true.

    Workaround is to wrap DragAndDropLists to a Container with correct height, but it is very difficult to calculate the correct height of the Container if all items should be visible.

    opened by kinex 3
  • listDecorationWhileDragging is not applied

    listDecorationWhileDragging is not applied

    Based on my testing listDecorationWhileDragging is not applied. Dragged item has always a transparent background. I tried for example this:

    ...
    listDecorationWhileDragging: BoxDecoration(
      color: Colors.red,
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.5),
          spreadRadius: 2,
          blurRadius: 3,
          offset: Offset(0, 0), // changes position of shadow
        ),
      ],
    ),
    ...
    

    As a comparison itemDecorationWhileDragging seems to work.

    opened by kinex 3
  • Lazy loading in scaffold body gives scrollposition error

    Lazy loading in scaffold body gives scrollposition error

    I have a horizontal List that has vertical items. Whenever i try to scroll vertical items within each list I get

    ════════ Exception caught by animation library ═════════════════════════════════
    The following assertion was thrown while notifying status listeners for AnimationController:
    The provided ScrollController is currently attached to more than one ScrollPosition.
    
    The Scrollbar requires a single ScrollPosition in order to be painted.
    
    When the scrollbar is interactive, the associated Scrollable widgets must have unique ScrollControllers. The provided ScrollController must be unique to a Scrollable widget.
    

    This is minimum code I use:

      ScrollController scrollController = ScrollController();
    
    List<DragAndDropItem> _generateItems(ProjectColumn col) {
        List<DragAndDropItem> list = [];
        for (var c in col.cards) {
          // Card
          list.add(DragAndDropItem(
            child: Text(c.content),
          ));
        }
        return list;
      }
    
      List<DragAndDropList> _generateLists() {
        List<DragAndDropList> list = [];
        for (var i in project.columns) {
          // Each column
          list.add(
            DragAndDropList(         
              header: Text(i.title),
              children: _generateItems(i),
            ),
          );
        }
        return list;
      }
    
    body: Padding(
            padding: const EdgeInsets.all(10),
            child: DragAndDropLists(
              lastItemTargetHeight: 300,
              scrollController: scrollController,
              listWidth: 350,
              listPadding: const EdgeInsets.all(5),
              axis: Axis.horizontal,
              itemGhostOpacity: 0.5,
              children: _generateLists(),
            ),
          ),
    
    opened by emmggi 2
  • Add ability to remove top padding

    Add ability to remove top padding

    If there's a widget before ListView, unexpected padding is added to the top. This commit removes the unnecessary padding based on a boolean flag.

    Reference https://github.com/flutter/flutter/issues/14842

    opened by aliasgarlabs 2
  • Add Null safe version

    Add Null safe version

    After Flutter is upgraded to 2.0.2, it needs to support null safety.

    Currently version does not support null safety.

    Please support null safety.

    Thank you.

    opened by xinshengfan 2
  • itemDecorationWhileDragging only applied when dragHandle is provided?

    itemDecorationWhileDragging only applied when dragHandle is provided?

    First off, this library is awesome. Perfect for what I need it for.

    I have noticed that the itemDecorationWhileDragging does not seem to be applied unless a dragHandle is also provided to DragAndDropLists. Is this expected behavior? I'm more than happy to provide some sample code to show what is going on if you can't replicate.

    opened by kjmj 2
  • Add scrollPhysics attribute

    Add scrollPhysics attribute

    I found myself needing this when I had a DragAndDropLists inside a RefreshIndicator. When the list was small I could not overscroll to trigger a refresh from server. By being able to set the scroll physics I could force scrolling on and reload from the server more effectively.

    opened by markstory 0
  • Solution for multi-level lists?

    Solution for multi-level lists?

    Is there a solution for multi-level lists (3 levels nested for example) ?

    What I mean is if we can have a list of DragAndDropLists which have DragAndDropListExpansion and their children have others DragAndDropListExpansions.

    opened by sasiacob 0
  • Adding the capability to override the == operator

    Adding the capability to override the == operator

    With this change it will delegate the == to the child so that you can override it and it will avoid duplicated items.

    An example of this issue: You have two lists a food menu that you'd like to modify with current food and a food list. as the food menu list children has been pre-generated from DB the DragAndDropItem are different from food list, so you can drag an existing item and it will create duplications. If you delegate the == operator to the DragAndDropItem child the user can control how two objects are equals, if by reference or by something more complex like foodId

    opened by Pablo-Aldana 0
  • Unable to set specific list width for each individual horizontal DragAndDropLists

    Unable to set specific list width for each individual horizontal DragAndDropLists

    Im using the listWidth to set the width of each indivual horizontal list. This sets all the lists to the same width.

    Is there a method of doing something like this? listWidth: list.isEmpty ? widthWhenEmpty : widthWhenNotEmpty

    So that all empty lists have a different listWidth.

    Thanks to any responder!

    opened by Karo132 0
Owner
Philip Brink
Philip Brink
Native Drag and Drop for Flutter on iOS and MacOS

native_draggable A new flutter plugin project. Getting Started This project is a starting point for a Flutter plug-in package, a specialized package t

Rody Davis 59 Dec 4, 2022
Drag and Drop for Dart web apps with mouse and touch support.

Dart Drag and Drop Drag and Drop for Dart web apps with mouse and touch support. GitHub | Pub | Demos and Examples Features Use any HTML Element as Dr

Marco Jakob 136 Nov 18, 2022
Widgets to support native drag and drop in Flutter.

Drag and Drop Flutter This is the repository for a plugin implementing drag and drop functionality for Flutter. This is a federated plugin. There is a

Jesse 0 Dec 29, 2021
Drag and drop module for CITMATEL's 'strawberry' project

citmatel_strawberry_dnd Drag and drop module for CITMATEL's 'strawberry' project Getting Started This project is a starting point for a Flutter applic

null 2 Jan 6, 2023
A showcase app for displaying image lists, developed on Flutter.

flutter_showcase_app Pixabay: A Flutter demo application. A showcase app for displaying image lists, developed on Flutter. Uses BLOC pattern, SQFLite

Muhammad Umair Adil 26 Nov 25, 2022
A Flutter plugin that lists native gallery items.

Media Gallery plugin for Flutter A Flutter plugin that lists native gallery items. Installation First, add media_gallery as a dependency in your pubsp

Aloïs Deniel 84 Dec 7, 2022
A flutter deskstop package that allows you to drag the native file into app support.

FileDragAndDrop A flutter deskstop package that allows you to drag the native file into app support. Platform Support Now only support on macOS, if an

逸风 13 Oct 24, 2022
Drop shadow effect for any widget in Flutter

DropShadow Drop shadow effect for any widget in flutter Parameters Widget child; // required double blurRadius; // default: 10.0 double borderRadius;

null 10 Nov 26, 2022
SoundVolumeView that displays general information and the current volume level for all active sound components in your system, and allows you to instantly mute and unmute them

SoundVolumeView that displays general information and the current volume level for all active sound components in your system, and allows you to instantly mute and unmute them

Domingo 4 Mar 4, 2022
A flutter list view which can drag & move item to change order.

draggable_flutter_list A flutter list view which can drag & move item to change order. some codes come from flutter_list_drag_and_drop fix flutter_lis

刘彦博 40 Sep 22, 2022
A flutter plugin to support drag-out functionality on native platforms

flutter_native_drag_n_drop A flutter plugin to support the native drag and drop, especially to drag files (only files) out of the application boundary

Skalio GmbH 5 Oct 28, 2022
Binding and high-level wrapper on top of libssh - The SSH library!

Dart Binding to libssh version 0.9.6 binding and high-level wrapper on top of libssh - The SSH library! libssh is a multiplatform C library implementi

Isaque Neves 2 Dec 20, 2021
An app that randomly draws Japanese vocabularies from N5 to N1 level to test your listening skill, providing pronunciation and answer checking.

An app that randomly draws Japanese vocabularies from N5 to N1 level to test your listening skill, providing pronunciation and answer checking.

Eric Lau 13 Jul 17, 2022
A powerful past paper downloader for IGCSE and A-Level.

Past Paper Finder Past Paper Finder is a past paper downloader for IGCSE and A-Level. It is designed to be as simple as possible and easy to use. Feat

SCIE.DEV 2 Dec 12, 2022
A page transition which supports drag-down-to-pop gesture.

drag_down_to_pop A page transition which supports drag-down-to-pop gesture. The main source code is copied from the cupertino/route.dart in Flutter SD

nekocode 16 Aug 6, 2022
Simple Flutter text highlighting at the character-level.

substring_highlight Highlight Flutter text at the character-level. Designed for case-insensitive search-term highlighting, a single search term sub-st

Peter Alvin 39 Nov 16, 2022
Low-level link (text, URLs, emails) parsing library in Dart

linkify Low-level link (text, URLs, emails) parsing library in Dart. Required Dart >=2.12 (has null-safety support). Flutter library. Pub - API Docs -

Charles C 60 Nov 4, 2022
One Dungeon is a ​1-Bit-style platformer game that consists of one level

One Dungeon is a ​1-Bit-style platformer game that consists of one level. It developed during the Midyear 2022 Flame Game Jam.

Bulent Baris Kilic 6 Sep 21, 2022
Note provider - Note App using Provider state management, Sqflite and Localization for two language Arabic and English.

note_provider Sqflite with provider statemanagement Getting Started This project is a starting point for a Flutter application. A few resources to get

Mohanned Anwar 0 Jan 1, 2022