iOS-like proof of concept reorderable list with animations

Overview

Reorderable List in Flutter

iOS-like proof of concept reorderable list with animations

Preview

Getting Started

See example/lib/main.dart for example usage

Highlights

Unlike flutter's ReorderableListView this one

  • Works with slivers so it can be placed in CustomScrollView and used with SliverAppBar
  • Supports large lists (thousands of items) without any issues

Other features

  • Smooth reordering animations
  • Supports different item heights
  • iOS like reordering with drag handle
  • Android like (long touch) reordering

Caveats

There are no API stability guarantees.

If you used previous version of reorderable list keep in mind that ReorderableListener now needs to be placed somewhere in ReorderableItem hierarchy in order to detect touch and trigger actual reordering (see the example).

Alternatively, you can wrap entire row in DelayedReorderableListener to get material like long-press reordering behavior.

Comments
  • When dragging multiple times I get this error

    When dragging multiple times I get this error

    If you use the handle to change the order of an item, drop the handle then quickly try to move another handle, you get an error like update() called on null at line: (package:flutter_reorderable_list/flutter_reorderable_list.dart:243:17)

    I/flutter (32332): ══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════ I/flutter (32332): The following NoSuchMethodError was thrown while handling a gesture: I/flutter (32332): The method 'update' was called on null. I/flutter (32332): Receiver: null I/flutter (32332): Tried calling: update() I/flutter (32332): I/flutter (32332): When the exception was thrown, this was the stack: I/flutter (32332): #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5) I/flutter (32332): #1 _ReorderableListState._dragStart (package:flutter_reorderable_list/flutter_reorderable_list.dart:243:17) I/flutter (32332): #2 MultiDragGestureRecognizer._startDrag. (package:flutter/src/gestures/multidrag.dart:266:52) I/flutter (32332): #3 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24) I/flutter (32332): #4 MultiDragGestureRecognizer._startDrag (package:flutter/src/gestures/multidrag.dart:266:14) I/flutter (32332): #5 MultiDragGestureRecognizer.acceptGesture. (package:flutter/src/gestures/multidrag.dart:256:48) I/flutter (32332): #6 _VerticalPointerState.accepted (package:flutter_reorderable_list/flutter_reorderable_list.dart:736:12) I/flutter (32332): #7 MultiDragGestureRecognizer.acceptGesture (package:flutter/src/gestures/multidrag.dart:256:11) I/flutter (32332): #8 GestureArenaManager._resolveInFavorOf (package:flutter/src/gestures/arena.dart:263:12) I/flutter (32332): #9 GestureArenaManager._resolve (package:flutter/src/gestures/arena.dart:222:9) I/flutter (32332): #10 GestureArenaEntry.resolve (package:flutter/src/gestures/arena.dart:52:12) I/flutter (32332): #11 MultiDragPointerState.resolve (package:flutter/src/gestures/multidrag.dart:62:17) I/flutter (32332): #12 _VerticalPointerState.checkForResolutionAfterMove (package:flutter_reorderable_list/flutter_reorderable_list.dart:731:7) I/flutter (32332): #13 MultiDragPointerState._move (package:flutter/src/gestures/multidrag.dart:81:7) I/flutter (32332): #14 MultiDragGestureRecognizer._handleEvent (package:flutter/src/gestures/multidrag.dart:230:13) I/flutter (32332): #15 PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:75:13) I/flutter (32332): #16 PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:102:11) I/flutter (32332): #17 _WidgetsFlutterBinding&BindingBase&GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:218:19) I/flutter (32332): #18 _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:198:22) I/flutter (32332): #19 _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:156:7) I/flutter (32332): #20 _WidgetsFlutterBinding&BindingBase&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:102:7) I/flutter (32332): #21 _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:86:7) I/flutter (32332): #25 _invoke1 (dart:ui/hooks.dart:250:10) I/flutter (32332): #26 _dispatchPointerDataPacket (dart:ui/hooks.dart:159:5) I/flutter (32332): (elided 3 frames from package dart:async) I/flutter (32332): I/flutter (32332): Handler: "onStart" I/flutter (32332): Recognizer: I/flutter (32332): _Recognizer#1b65b I/flutter (32332): ════════════════════════════════════════════════════════════════════════════════════════════════════

    After that you can't move any of the handles anymore. It gets broken. Try around a few times then you will see. I use ListTiles.

    opened by hyperpanthera 12
  • Callback on drag complete

    Callback on drag complete

    Hi Matej, Thanks for this, been using it for a while now without any problems - more than a proof of concept, it's great! Fluid too!

    I want to write the reordered items to a backend. At the moment I am doing it async in the onReorder callback which is not ideal because it's called for each position change. i.e. while dragging. Would prefer to do on drag complete, i.e. when the user releases the drag and the item is in the final position.

    An onReorderComplete or onDragComplete callback might be useful.

    opened by myleftshoe 12
  • Added option to remove drag shadow decoration

    Added option to remove drag shadow decoration

    Hello.

    I didn't find any options to customize decorations. So I added an option to remove shadows while dragging as it was my requirement.

    Thank you for this cool library!

    opened by nuc134r 8
  • Error: No named parameter with the name 'nullOk'.

    Error: No named parameter with the name 'nullOk'.

    I got error after runing flutter build apk

    Please support for MediaQuery.maybeOf Flutter API breaking change.

    ../flutter_sdk/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_reorderable_list-0.1.5/lib/flutter_reorderable_list.dart:315:49: Error: No named parameter with the name 'nullOk'.
          MediaQueryData d = MediaQuery.of(context, nullOk: true);          
                                                    ^^^^^^                  
    ../flutter_sdk/flutter/packages/flutter/lib/src/widgets/media_query.dart:814:25: Context: Found this candidate, but the arguments don't match.
      static MediaQueryData of(BuildContext context) {                      
                            ^^                                              
                                                                            
                                                                            
    FAILURE: Build failed with an exception.                                
                                                                            
    * Where:                                                                
    Script '/Users/nickchen/Documents/flutter_sdk/flutter/packages/flutter_tools/gradle/flutter.gradle' line: 900
                                                                            
    * What went wrong:                                                      
    Execution failed for task ':app:compileFlutterBuildRelease'.            
    > Process 'command '/Users/nickchen/Documents/flutter_sdk/flutter/bin/flutter'' finished with non-zero exit value 1
    
    
    opened by nick45chen 5
  • [Feature]Flutter for Web

    [Feature]Flutter for Web

    Do you support future?

    stack_trace_mapper.js:265 Uncaught Bad state: Source maps are not done loading.
        at Object.a (http://localhost:3333/stack_trace_mapper.js:265:3)
        at cA.kg (http://localhost:3333/stack_trace_mapper.js:2723:23)
        at Object.iN (http://localhost:3333/stack_trace_mapper.js:220:69)
        at jA (http://localhost:3333/stack_trace_mapper.js:2442:10)
        at http://localhost:3333/stack_trace_mapper.js:2436:42
        at dart._StackTrace.new.toString (http://localhost:3333/dart_sdk.js:7060:19)
        at Object._toString [as toString] (http://localhost:3333/dart_sdk.js:4887:26)
    
    opened by shinriyo 4
  • Does not work properly with StatefulWidget.

    Does not work properly with StatefulWidget.

    When I change Item class from StatelessWidget to StatefulWidget, it does not work properly. A weird situation occurs in ui. New form of Item class:

    class Item extends StatefulWidget {
      Item({
        this.data,
        this.isFirst,
        this.isLast,
        this.draggingMode,
      });
    
      final ItemData data;
      final bool isFirst;
      final bool isLast;
      final DraggingMode draggingMode;
    
    @override
      State<StatefulWidget> createState() => new _ItemState(data: data, isFirst: isFirst, isLast: isLast, draggingMode: draggingMode);
    }
    
    class _ItemState extends State<Item> {
      _ItemState({
        this.data,
        this.isFirst,
        this.isLast,
        this.draggingMode,
      });
    
      final ItemData data;
      final bool isFirst;
      final bool isLast;
      final DraggingMode draggingMode;
    
    opened by AhmetAY 3
  • Example app warnings fixed + compilation fix on Flutter stable v2.8.0

    Example app warnings fixed + compilation fix on Flutter stable v2.8.0

    Hello there !

    Thanks for the package 😁 I upgraded my Flutter installation on v2.8.0 that was just released a few hours ago. Here is a PR that will fix every warnings/errors reported on this new version.

    opened by R0m4in-dooz 2
  • Wrongly marked incompatible with flutter-web?

    Wrongly marked incompatible with flutter-web?

    The analysis tab shows

    Package not compatible with runtime flutter-web on web

    Because:

    • package:flutter_reorderable_list/flutter_reorderable_list.dart that imports:
    • dart:io

    yet the example seems to run fine on web.

    Can someone confirm if this works with flutter-web?

    opened by SimonLammer 2
  • Features request: limited dragging range.

    Features request: limited dragging range.

    So my list have 2 section: pinned and regular. All pinned items is on the beginning of the list, the regular item is the rest. I would like when user drag the pinned item, the pinned item can not move out of the pinned section. It is the same with the regular section.

    opened by AverageChau 2
  • Drag&Drop reorder between two lists

    Drag&Drop reorder between two lists

    Hello!

    I am trying to create some sort of task manager exactly like in trello and your library solving my problem of drag&droping perfectly, but now fully. Can you please make possivle to drag&drop item of list between two and more lists.

    trello

    opened by godzeit 2
  • ListTile and ReorderableList

    ListTile and ReorderableList

    Would ListTile be incompatible with ReorderableList?

    I'm trying to place a ReorderableListener in the trailing widget of a ListTile and having problems (the ListTile layout gets messy).

    Is it me, or would that be expected?

    opened by ffeu 2
  • Change mouse cursor appropriately on Web/Desktop

    Change mouse cursor appropriately on Web/Desktop

    Before this change:

    https://user-images.githubusercontent.com/1255062/169477832-6d1aabe2-b7dd-4148-8a5e-635f2a7e9048.mov

    After this change:

    https://user-images.githubusercontent.com/1255062/169477759-615ccc0a-dc62-4756-85f3-73729e78904e.mov

    opened by mono0926 0
  • Error: Type 'DeviceGestureSettings' not found.

    Error: Type 'DeviceGestureSettings' not found.

    I am using FVM to run the project in differents version but in the differents version i tried to run it, i get an error : Error: Type 'DeviceGestureSettings' not found. package:flutter_reorderable_list/flutter_reorderable_list.dart:739 DeviceGestureSettings? gestureSettings) ^^^^^^^^^^^^^^^^^^^^^ Any idea why am i getting this error? Thank you.

    Ok when i use flutter 2.8.1 it works but what happen if i want to use flutter 2.10.5 ? it does not work.

    opened by DavidIjsud 0
  • Migrate to Flutter 2.6.0

    Migrate to Flutter 2.6.0

    When I try to build using Flutter 2.6.0+, I get this error:

    Error: Too few positional arguments: 3 required, 2 given.
    ../…/lib/flutter_reorderable_list.dart:740
          : super(initialPosition, kind) {
                 ^
    

    FAILURE: Build failed with an exception.

    opened by mersadcc 4
  • CRASH: Null check operator used on a null value

    CRASH: Null check operator used on a null value

    Logs:-

    ReorderableListener._startDragging (flutter_reorderable_list.dart:147) ReorderableListener._routePointer (flutter_reorderable_list.dart:125) ReorderableListener.build. (flutter_reorderable_list.dart:118) RenderPointerListener.handleEvent (proxy_box.dart:2829) GestureBinding.dispatchEvent (binding.dart:419) RendererBinding.dispatchEvent (binding.dart:287) GestureBinding._handlePointerEventImmediately (binding.dart:374) GestureBinding.handlePointerEvent (binding.dart:338) GestureBinding._flushPointerEventQueue (binding.dart:296) GestureBinding._handlePointerDataPacket (binding.dart:279) ._rootRunUnary (zone.dart:1370) _CustomZone.runUnary (zone.dart:1265) _CustomZone.runUnaryGuarded (zone.dart:1170) ._invoke1 (hooks.dart:182) PlatformDispatcher._dispatchPointerDataPacket (platform_dispatcher.dart:282) ._dispatchPointerDataPacket (hooks.dart:96)

    opened by dhirajhimani 0
Owner
Matej Knopp
Discord: matt_kn
Matej Knopp
pull_down_button is a rework of Flutter's PopupMenuButton to be styled like Pop-Up & Pull-Down Buttons from iOS 14+ with some additional customisation options.

pull_down_button is a rework of Flutter's PopupMenuButton to be styled like Pop-Up & Pull-Down Buttons from iOS 14+ with some additional customisation options.

ĐmĐrl 18 Dec 30, 2022
A flutter grouped list widget similar to the iOS UITableview method name.

group_tablelist A flutter grouped list widget similar to the iOS UITableview method name. Group tablelist package for Flutter. Features iOS tableview-

null 2 Aug 17, 2022
This app is a good example of how adding animations can liven up a digital clock.

Animal Clock This app is a good example of how adding animations can liven up a digital clock. The lion's head bobbles along without any care in the w

sei 7 Jun 29, 2022
RoundedLoadingButton is a Flutter package with a simple implementation of an animated loading button, complete with success and error animations.

rounded_loading_button RoundedLoadingButton is a Flutter package with a simple implementation of an animated loading button, complete with success and

Chris Edgington 223 Jan 4, 2023
A basic Flutter app that includes some native Widgets like alerts, cards, avatars, animated container, inputs, etc.

Flutter components This project was created with Flutter and some native Widgets like alerts, cards, avatars, animated container, inputs, etc. Getting

Paúl 4 Nov 15, 2021
A Facebook & Twitter Like Card Loading Shimmer Skeleton Library.

PKSkeleton A Facebook & Twitter Like Card Loading Shimmer Skeleton Library. The source code is 100% Dart, and everything resides in the /lib folder. S

Pawan Kumar 283 Nov 26, 2022
A button that looks like a Cupertino text button

Cupertino Text Button A button that looks like a Cupertino text button! Text Button A simple text button can be created like this: CupertinoTextButton

Nick Sirovsky 0 Nov 24, 2022
Experimental solution for web-like text selection across widgets

Better Selection Experimental solution for web-like text selection across widgets (text, images, et cetera). Better selection is dependent on, and is

Wilson Wilson 59 Oct 12, 2022
Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more.

flutter_donation_buttons Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more. Getting S

null 6 Dec 10, 2022
A Flutter widget for chat like a speech bubble in Whatsapp and others

A Flutter widget for chat like a speech bubble in Whatsapp and others

Victor Dunaev 262 Oct 25, 2022
A Flutter widget for Tinder like swipe cards

A Flutter widget for Tinder like swipe cards. The card can be swiped right, left and up for different responses

Abdul Basit 7 Nov 2, 2022
A Flutter package which provides helper widgets for selecting single or multiple account/user from the given list.

account_selector A Flutter package which provides helper widgets for selecting single or multiple account/user from a list Supported Dart Versions Dar

Harpreet Singh 49 Oct 7, 2021
Widget to let the user search through a keyword string typed on a customizable keyboard in a single or multiple choices list presented as a dropdown in a dialog box or a menu.

searchable_dropdown Widget to let the user search through a keyword string typed on a customizable keyboard in a single or multiple choices list prese

Bobby Stenly Irawan 108 Sep 11, 2022
A custom Slider which accepts a list of ordered values.

MultiSlider A custom Slider which accepts a list of ordered values. It's meant to be as simple as the original Slider! UI with it Usages Continuous sl

Sthefano Schiavon 7 Dec 3, 2022
A flutter demo app to practice List.generate with ListView.builder

ListView 3 A flutter demo app to practice List.generate with ListView.builder Developer Alexander Sosa (https://www.linkedin.com/in/alexander-sosa-asi

Alexander Sosa 0 Jan 3, 2022
Build a grouped list, which support expand/collapse section and sticky headers, support use it with sliver widget.

sticky_and_expandable_list Flutter implementation of sticky headers and expandable list.Support use it in a CustomScrollView. README i18n:中文说明 Feature

tp7309 114 Nov 16, 2022
A flutter package to select a country from a list of countries.

Country picker A flutter package to select a country from a list of countries. Getting Started Add the package to your pubspec.yaml: country_picker: ^

Daniel Ioannou 60 Dec 30, 2022
A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents.

Sliding Sheet A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents. Click here to view the full example. Ins

null 396 Mar 10, 2022
A collection of pixel-perfect iOS-styled components and properties for Flutter, following the official guidelines.

cupertinew ⚠️ Experimental and work in progress ⚠️ A collection of pixel-perfect iOS-styled components and properties for Flutter, following the offic

null 30 Nov 10, 2022