New Reorderable list widgets #74299

darrenaustin · 2021-01-20T07:28:42Z

Description

To address some of the shortcomings described in #66080, this PR adds two new Reorderable lists widgets and overhauls the current ReorderableListView to fix a lot of problems.

There are now the following:

ReorderableList - a lower level flexible widget that allows the user to interactively move items around the list. It is design-language agnostic and lives in the widgets package.
SliverReorderableList - a SliverList version of the ReorderableList, also in the widgets package.
ReorderableListView - A Material Design implementation of the reorderable list updated to use the SliverRerorderableList internally.

The ReorderableList and SliverReorderableList allow you to customize how the drag operation starts. This is be done by wrapping each item in a drag listener that will tell the list to start dragging. We have provided two such listeners for the common cases:

ReorderableDragStartListener which triggers the drag from a single pointer down event (useful for wrapping just a drag handle instead of the whole item).
ReorderableDelayedDragStartListener which triggers after a long press.

Or you can subclass ReorderableDragStartListener and build your own listener.

One of these is required by the two widget lists, but the material ReorderableListView will automatically wrap the child in a delayed listener for mobile and adds a default 'dragHandle' on top of each item by default on desktops. These can be turned off if you want to build your own.

While this doesn't address all the issues, hopefully it will be a good improvement on what is currently there and make it easier for you to build what you need. We can follow this up with more enhancements in the future.

Updated Material `ReorderableListView`

`ReorderableList` with toggle for drag handles and refresh indicator

A horizontal list with custom proxy decorator

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I listed at least one issue that this PR fixes in the description above.
I added new tests to check the change I am making or feature I am adding, or Hixie said the PR is test exempt.
I updated/added relevant documentation (doc comments with ///).
I signed the CLA.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

packages/flutter/lib/src/widgets/reorderable_list.dart

packages/flutter/test/widgets/reorderable_list_test.dart

Piinks

Still working through, just submitting current review state since I saw there were updates. 🎉

Piinks · 2021-01-22T21:14:27Z

packages/flutter/lib/src/widgets/debug.dart

+        ErrorDescription(
+          '${context.widget.runtimeType} widgets require an Overlay '
+          'widget ancestor.\n'
+          'An overlay lets widgets float on top of other eidget children.'


Suggested change

'An overlay lets widgets float on top of other eidget children.'

'An overlay lets widgets float on top of other widget children.'

HansMuller

LGTM

HansMuller · 2021-01-22T21:15:51Z

packages/flutter/lib/src/material/reorderable_list.dart

+  /// A callback that allows the app to add an animated decoration around
+  /// an item when it is being dragged.
+  ///
+  /// The this is null, a default decoration of a Material widget with


The this => If this property

HansMuller · 2021-01-22T21:16:49Z

packages/flutter/lib/src/material/reorderable_list.dart

        );
-      },
+      }


Trailing comma

HansMuller · 2021-01-22T21:23:41Z

packages/flutter/lib/src/material/reorderable_list.dart

+  @override
+  void didUpdateWidget(ReorderableListView oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _listOverlayEntry.markNeedsBuild();


The overlay entry depends on on a ton of widget properties, so OK to do this unconditionally. Maybe a comment explaining as much..

HansMuller · 2021-01-22T21:25:14Z

packages/flutter/lib/src/material/reorderable_list.dart

+    final Map<CustomSemanticsAction, VoidCallback> semanticsActions = <CustomSemanticsAction, VoidCallback>{};
+
+    // Create the appropriate semantics actions.
+    void moveToStart() => reorder(index, 0);


These actions are OK if the list is reversed? I think they're OK, not sure.

Good question. I think so, as the indices all work the same in reverse, just the display is inverted. So moving to 0 is still moving to the start of the list, but the start of the list is displayed at the bottom instead of the top.

HansMuller · 2021-01-22T21:34:01Z

packages/flutter/lib/src/widgets/reorderable_list.dart

+/// These will take care of recognizing the start of a drag gesture and call
+/// the list state's start item drag method.
+///
+/// This widget's [ReorderableListState] can be used manually start a item


can be used => can be used to

HansMuller · 2021-01-22T23:04:49Z

packages/flutter/lib/src/widgets/reorderable_list.dart

+  /// Most applications will not use this directly, but will wrap the item
+  /// (or part of the item, like a drag handle) in either a
+  /// [ReorderableDragStartListener] or [ReorderableDelayedDragStartListener]
+  /// which call this for the application.


call this for the application => call this method when they detect the gesture that triggers a drag start/

HansMuller · 2021-01-22T23:10:06Z

packages/flutter/lib/src/widgets/reorderable_list.dart

+    setState(() {
+      if (_insertIndex! < widget.itemCount - 1) {
+        // Find the location of the item we want to insert before
+        final RenderBox itemRenderBox =  _items[_insertIndex!]!.context.findRenderObject()! as RenderBox;


Maybe factor out an Offset _itemOffsetAt(int index) method?

Offset _itemOffsetAt(int index) { final RenderBox itemRenderBox = _items[index]!.context.findRenderObject()! as RenderBox; return itemRenderBox.localToGlobal(Offset.zero); }

HansMuller · 2021-01-22T23:13:58Z

packages/flutter/lib/src/widgets/reorderable_list.dart

+  @override
+  void dispose() {
+    _offsetAnimation?.dispose();
+    super.dispose();


Don't we need to _listState._unregisterItem(this) here? If the item was (somehow) explicitly disposed, then it wouldn't have been deactivated first...

Ah, my bad. I thought it had to go through deactivate before dispose. Good catch.

HansMuller · 2021-01-22T23:16:05Z

packages/flutter/lib/src/widgets/reorderable_list.dart

+
+  @override
+  void deactivate() {
+    _listState._unregisterItem(index, this);


What happens if the item is activated later? Isn't that possible when the item is moved within the list?

Yeah, I should probably catch that in the build method.

HansMuller · 2021-01-22T23:21:08Z

packages/flutter/lib/src/widgets/reorderable_list.dart

+    return itemPosition & itemRenderBox.size;
+  }
+
+  void _update() {


This appears to be the only method with a _foo private name. Maybe it should get a regular name, like rebuild()

goderbauer

Haven't looked at tests

goderbauer · 2021-01-22T22:40:29Z

packages/flutter/lib/src/material/reorderable_list.dart

@@ -62,25 +31,30 @@ typedef ReorderCallback = void Function(int oldIndex, int newIndex);
 /// {@tool dartpad --template=stateful_widget_scaffold}
 ///
 /// ```dart
-/// List<String> _list = List.generate(5, (i) => "${i}");
+/// final List<int> items = List<int>.generate(50, (int index) => index);


nit: items => _items (this would probably be private in a real app)

goderbauer · 2021-01-22T22:42:42Z

packages/flutter/lib/src/material/reorderable_list.dart

+  /// To change the appearance or the layout of the drag handles, make
+  /// this parameter false and wrap each list item, or a widget within
+  /// each list item, with [ReorderableDragStartListener] or
+  /// [ReorderableDelayedDragStartListener].


nit: PR description said that you could also have a custom ReaorderableListener, maybe mention that here as well?

goderbauer · 2021-01-22T22:43:16Z

packages/flutter/lib/src/material/reorderable_list.dart

+  /// {@tool dartpad --template=stateful_widget_scaffold}
+  ///
+  /// ```dart
+  /// final List<int> items = List<int>.generate(50, (int index) => index);


nit: _items ?

goderbauer · 2021-01-22T22:44:11Z

packages/flutter/lib/src/material/reorderable_list.dart

@@ -102,6 +74,8 @@ class ReorderableListView extends StatefulWidget {
    this.scrollDirection = Axis.vertical,
    this.padding,
    this.reverse = false,
+    this.buildDefaultDragHandles = true,
+    this.proxyDecorator,
  }) : assert(scrollDirection != null),


nit: assert(buildDefaultDragHandles != null)

goderbauer · 2021-01-22T22:44:42Z

packages/flutter/lib/src/material/reorderable_list.dart

+  /// A callback that allows the app to add an animated decoration around
+  /// an item when it is being dragged.
+  ///
+  /// The this is null, a default decoration of a Material widget with


typo: "The this"

goderbauer · 2021-01-22T23:51:35Z

packages/flutter/lib/src/widgets/reorderable_list.dart

+
+  @override
+  void deactivate() {
+    _listState._unregisterItem(index, this);


After deactivate has been called, the object may be added to a different part of the tree. In that case, you'd have to re-register the item, but I don't think the state has a hook for that... Maybe just do the unregistering in dispose?

goderbauer · 2021-01-22T23:53:31Z

packages/flutter/lib/src/widgets/reorderable_list.dart

+  }
+}
+
+/// A wrapper widget that will recognize the start of a drag on a by a


typo: "on a by a"

goderbauer · 2021-01-22T23:53:55Z

packages/flutter/lib/src/widgets/reorderable_list.dart

+///  * [ReorderableListView], a material design list that allows the user to
+///    reorder its items.
+class ReorderableDragStartListener extends StatelessWidget {
+  /// Creates a listener for an drag immediately following a pointer down


typo: an -> a

goderbauer · 2021-01-22T23:55:39Z

packages/flutter/lib/src/widgets/reorderable_list.dart

+  /// subclasses can use this to customize the drag start gesture.
+  @protected
+  MultiDragGestureRecognizer<MultiDragPointerState> createRecognizer({
+    Object? debugOwner,


Does it make sense to have the debug owner passed in? Isn't that always gonna be "this"?

goderbauer · 2021-01-22T23:58:49Z

packages/flutter/lib/src/widgets/reorderable_list.dart

+  @protected
+  MultiDragGestureRecognizer<MultiDragPointerState> createRecognizer({
+    Object? debugOwner,
+    PointerDeviceKind? kind,


I don't fully understand the signature of this method. Why is kind passed in here?

Piinks · 2021-01-22T21:58:32Z

packages/flutter/lib/src/material/reorderable_list.dart

+  /// A callback that allows the app to add an animated decoration around
+  /// an item when it is being dragged.
+  ///
+  /// The this is null, a default decoration of a Material widget with


Suggested change

/// The this is null, a default decoration of a Material widget with

/// When this is null, a default decoration of a Material widget with

Piinks · 2021-01-23T00:52:35Z

packages/flutter/lib/src/material/reorderable_list.dart

 class ReorderableListView extends StatefulWidget {
-
  /// Creates a reorderable list.


Can we add more docs here? - usually about the required params and defaults.

Piinks · 2021-01-23T00:56:27Z

packages/flutter/lib/src/material/reorderable_list.dart

+    final EdgeInsets padding = widget.padding ?? const EdgeInsets.all(0);
+    late EdgeInsets outerPadding;
+    late EdgeInsets listPadding;
+    if (widget.scrollDirection == Axis.vertical) {


This should be a switch statement

Piinks · 2021-01-23T01:02:36Z

packages/flutter/lib/src/widgets/reorderable_list.dart

+  /// Defaults to false.
+  final bool reverse;
+
+  /// An object that can be used to control the position to which this scroll


Are there already some macros on these types of parameters we can just sub in?

Piinks · 2021-01-23T01:04:22Z

packages/flutter/lib/src/widgets/reorderable_list.dart

+  /// scroll view needs to be recomputed whenever the scroll position changes.
+  ///
+  /// Defaults to false.
+  final bool shrinkWrap;


Should we assert this and others like it are not null above? I think we are still null checking in the framework for folks that have not migrated to null safety yet. I may be wrong though.

Piinks · 2021-01-23T01:10:56Z

packages/flutter/lib/src/widgets/reorderable_list.dart

+  }
+
+  SliverChildDelegate _createDelegate() {
+    return SliverChildBuilderDelegate(_itemBuilder, childCount: widget.itemCount + (_reorderingDrag ? 1 : 0));


Is it to account for a placeholder space?

…t widgets.

…hen they are moved to the overlay during drag. Thanks Hans!

…causing the dragged item to appear in the wrong place.

…e autoscroll.

…ans!

…a failure

…onal 100px drop target

flutter-dashboard bot added f: material design framework labels Jan 20, 2021

google-cla bot added the cla: yes label Jan 20, 2021

This comment has been minimized.

Sign in to view

google-cla bot added cla: no and removed cla: yes labels Jan 21, 2021

shihaohong reviewed Jan 22, 2021

View reviewed changes

packages/flutter/lib/src/widgets/reorderable_list.dart Show resolved Hide resolved

shihaohong reviewed Jan 22, 2021

View reviewed changes

packages/flutter/test/widgets/reorderable_list_test.dart Outdated Show resolved Hide resolved

shihaohong reviewed Jan 22, 2021

View reviewed changes

packages/flutter/test/widgets/reorderable_list_test.dart Outdated Show resolved Hide resolved

darrenaustin marked this pull request as ready for review January 22, 2021 20:06

darrenaustin changed the title ~~WIP: New Reorderable list widgets~~ New Reorderable list widgets Jan 22, 2021

darrenaustin requested review from goderbauer, Piinks and HansMuller January 22, 2021 20:08

Piinks added f: scrolling c: new feature labels Jan 22, 2021

Piinks reviewed Jan 22, 2021

View reviewed changes

HansMuller approved these changes Jan 22, 2021

View reviewed changes

goderbauer reviewed Jan 23, 2021

View reviewed changes

Piinks reviewed Jan 23, 2021

View reviewed changes

darrenaustin added 8 commits January 22, 2021 18:53

Introduced new widget/ReorderableList and widget/SliverReorderableLis…

3353f08

…t widgets.

Bug fix from Hans for correctly inheriting theme settings for items w…

b6dfe63

…hen they are moved to the overlay during drag. Thanks Hans!

Fixed a problem when the overlay has different origin than the list, …

b3cd134

…causing the dragged item to appear in the wrong place.

Fixed a couple problems with horizontal scrolling.

934dc0c

Made the autoscroll logic use the scrollable's location to trigger th…

6e8fcc3

…e autoscroll.

Some initial tests from Hans. Thanks!

35fdbac

Added tests for the the inherited item styles when dragging. Thanks H…

53b3b6b

…ans!

Fixed couple of bugs while working on tests.

9039c48

goderbauer and others added 19 commits January 22, 2021 18:53

naming

b11ec33

Fix crash when only 1 item in list

c4ca5c5

Added buildDefaultDragHandles feature

b9399b8

Was using wrong _dragInfo that had already been disposed and causing …

158983b

…a failure

enable skipped tests

1860793

Fix ScrollController test that failed due to the removal of an additi…

58d423c

…onal 100px drop target

fix another skipped test

1448295

Updated the ReorderListView sample

d4040c6

fix forward autoscroll

d41381a

Added a sample for buildDefaultDragHandles:false

990f156

Better handle some widget updates.

200d9b0

Expose the proxyDecorator in the ReorderableListView.

9e08920

Added a missing end-tool for the a doc snippet.

942aa11

Added an assert for any list item that doesn't have a key.

2d7c977

Fixed the reversed lists.

28561f4

Updates from review comments.

0065afd

Fixed a typo.

633525b

Changes from review feedback. Thanks folks.

21d1578

Fixed a broken doc link.

3bab1bc

darrenaustin merged commit 8529e5a into flutter:master Jan 23, 2021

This was referenced Jan 26, 2021

Added some tests and comments for the Reorderable Lists. #74689

Merged

☂️ ReorderableListView updates #66080

Closed

wph144 mentioned this pull request Feb 2, 2021

Please create Widget like Android RecyclerView #75256

Closed

darrenaustin mentioned this pull request Feb 3, 2021

Need a way to construct a ReorderableListView without requiring all children items at creation time #75367

Closed

darrenaustin deleted the reorderable_list branch April 26, 2021 20:53

	'An overlay lets widgets float on top of other eidget children.'
	'An overlay lets widgets float on top of other widget children.'

	/// The this is null, a default decoration of a Material widget with
	/// When this is null, a default decoration of a Material widget with

		class ReorderableListView extends StatefulWidget {

		/// Creates a reorderable list.

New Reorderable list widgets #74299

New Reorderable list widgets #74299

Conversation

darrenaustin commented Jan 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Updated Material ReorderableListView

ReorderableList with toggle for drag handles and refresh indicator

A horizontal list with custom proxy decorator

Pre-launch Checklist

Uh oh!

This comment has been minimized.

Uh oh!

Uh oh!

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

goderbauer left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

darrenaustin commented Jan 20, 2021 •

edited

Loading

Updated Material `ReorderableListView`

`ReorderableList` with toggle for drag handles and refresh indicator