Skip to content

Commit 48c6d07

Browse files
yiiimyiiim
authored
Added boundary feature to ReorderableList. (#146182)
Fixes: #146112 <details open><summary>Code sample</summary> ```dart import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( home: Scaffold( body: Center( child: Container( width: 200, color: Colors.green, child: DragBoundary( child: CustomScrollView( shrinkWrap: true, slivers: <Widget>[ SliverReorderableList( itemBuilder: (BuildContext context, int index) { return ReorderableDragStartListener( key: ValueKey<int>(index), index: index, child: Text('$index'), ); }, itemCount: 5, onReorder: (int fromIndex, int toIndex) {}, ), ], ), ), ), ), ), )); } ``` </details> | without `DragBoundary` | with the `DragBoundary` | | ------- | ------- | ![Screen Recording 2024-04-03 at 13 01 19](https://github.com/flutter/flutter/assets/12887926/b092e229-5fc6-40a4-acf0-1197ef04c0fb) | ![Screen Recording 2024-04-03 at 13 01 19](https://github.com/flutter/flutter/assets/12887926/561da112-c1ef-48f1-b043-3947f1f0012e) | ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/wiki/Tree-hygiene#overview [Tree Hygiene]: https://github.com/flutter/flutter/wiki/Tree-hygiene [test-exempt]: https://github.com/flutter/flutter/wiki/Tree-hygiene#tests [Flutter Style Guide]: https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo [Features we expect every widget to implement]: https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/wiki/Tree-hygiene#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/wiki/Chat [Data Driven Fixes]: https://github.com/flutter/flutter/wiki/Data-driven-Fixes
1 parent 9a04500 commit 48c6d07

File tree

4 files changed

+158
-2
lines changed

4 files changed

+158
-2
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ class ReorderableListView extends StatefulWidget {
102102
this.restorationId,
103103
this.clipBehavior = Clip.hardEdge,
104104
this.autoScrollerVelocityScalar,
105+
this.dragBoundaryProvider,
105106
}) : assert(
106107
(itemExtent == null && prototypeItem == null) ||
107108
(itemExtent == null && itemExtentBuilder == null) ||
@@ -171,6 +172,7 @@ class ReorderableListView extends StatefulWidget {
171172
this.restorationId,
172173
this.clipBehavior = Clip.hardEdge,
173174
this.autoScrollerVelocityScalar,
175+
this.dragBoundaryProvider,
174176
}) : assert(itemCount >= 0),
175177
assert(
176178
(itemExtent == null && prototypeItem == null) ||
@@ -292,6 +294,9 @@ class ReorderableListView extends StatefulWidget {
292294
/// {@macro flutter.widgets.SliverReorderableList.autoScrollerVelocityScalar.default}
293295
final double? autoScrollerVelocityScalar;
294296

297+
/// {@macro flutter.widgets.reorderable_list.dragBoundaryProvider}
298+
final ReorderDragBoundaryProvider? dragBoundaryProvider;
299+
295300
@override
296301
State<ReorderableListView> createState() => _ReorderableListViewState();
297302
}
@@ -446,6 +451,7 @@ class _ReorderableListViewState extends State<ReorderableListView> {
446451
onReorderEnd: widget.onReorderEnd,
447452
proxyDecorator: widget.proxyDecorator ?? _proxyDecorator,
448453
autoScrollerVelocityScalar: widget.autoScrollerVelocityScalar,
454+
dragBoundaryProvider: widget.dragBoundaryProvider,
449455
),
450456
),
451457
if (widget.footer != null)

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

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import 'package:flutter/scheduler.dart';
1212

1313
import 'basic.dart';
1414
import 'debug.dart';
15+
import 'drag_boundary.dart';
1516
import 'framework.dart';
1617
import 'inherited_theme.dart';
1718
import 'localizations.dart';
@@ -83,6 +84,37 @@ typedef ReorderCallback = void Function(int oldIndex, int newIndex);
8384
/// The returned value will typically be the [child] wrapped in other widgets.
8485
typedef ReorderItemProxyDecorator = Widget Function(Widget child, int index, Animation<double> animation);
8586

87+
/// Used to provide drag boundaries during drag-and-drop reordering.
88+
///
89+
/// {@tool snippet}
90+
/// ```dart
91+
/// DragBoundary(
92+
/// child: CustomScrollView(
93+
/// slivers: <Widget>[
94+
/// SliverReorderableList(
95+
/// itemBuilder: (BuildContext context, int index) {
96+
/// return ReorderableDragStartListener(
97+
/// key: ValueKey<int>(index),
98+
/// index: index,
99+
/// child: Text('$index'),
100+
/// );
101+
/// },
102+
/// dragBoundaryProvider: (BuildContext context) {
103+
/// return DragBoundary.forRectOf(context);
104+
/// },
105+
/// itemCount: 5,
106+
/// onReorder: (int fromIndex, int toIndex) {},
107+
/// ),
108+
/// ],
109+
/// )
110+
/// )
111+
/// ```
112+
/// {@end-tool}
113+
///
114+
/// See also:
115+
/// * [DragBoundary], a widget that provides drag boundaries.
116+
typedef ReorderDragBoundaryProvider = DragBoundaryDelegate<Rect>? Function(BuildContext context);
117+
86118
/// A scrolling container that allows the user to interactively reorder the
87119
/// list items.
88120
///
@@ -139,6 +171,7 @@ class ReorderableList extends StatefulWidget {
139171
this.restorationId,
140172
this.clipBehavior = Clip.hardEdge,
141173
this.autoScrollerVelocityScalar,
174+
this.dragBoundaryProvider,
142175
}) : assert(itemCount >= 0),
143176
assert(
144177
(itemExtent == null && prototypeItem == null) ||
@@ -271,6 +304,14 @@ class ReorderableList extends StatefulWidget {
271304
/// {@macro flutter.widgets.SliverReorderableList.autoScrollerVelocityScalar.default}
272305
final double? autoScrollerVelocityScalar;
273306

307+
/// {@template flutter.widgets.reorderable_list.dragBoundaryProvider}
308+
/// A callback used to provide drag boundaries during drag-and-drop reordering.
309+
///
310+
/// If null, the delegate returned by `DragBoundary.forRectMaybeOf` will be used.
311+
/// Defaults to null.
312+
/// {@endtemplate}
313+
final ReorderDragBoundaryProvider? dragBoundaryProvider;
314+
274315
/// The state from the closest instance of this class that encloses the given
275316
/// context.
276317
///
@@ -419,6 +460,7 @@ class ReorderableListState extends State<ReorderableList> {
419460
onReorderEnd: widget.onReorderEnd,
420461
proxyDecorator: widget.proxyDecorator,
421462
autoScrollerVelocityScalar: widget.autoScrollerVelocityScalar,
463+
dragBoundaryProvider: widget.dragBoundaryProvider,
422464
),
423465
),
424466
],
@@ -465,6 +507,7 @@ class SliverReorderableList extends StatefulWidget {
465507
this.itemExtentBuilder,
466508
this.prototypeItem,
467509
this.proxyDecorator,
510+
this.dragBoundaryProvider,
468511
double? autoScrollerVelocityScalar,
469512
}) : autoScrollerVelocityScalar = autoScrollerVelocityScalar ?? _kDefaultAutoScrollVelocityScalar,
470513
assert(itemCount >= 0),
@@ -515,6 +558,9 @@ class SliverReorderableList extends StatefulWidget {
515558
/// {@endtemplate}
516559
final double autoScrollerVelocityScalar;
517560

561+
/// {@macro flutter.widgets.reorderable_list.dragBoundaryProvider}
562+
final ReorderDragBoundaryProvider? dragBoundaryProvider;
563+
518564
@override
519565
SliverReorderableListState createState() => SliverReorderableListState();
520566

@@ -1348,9 +1394,15 @@ class _DragInfo extends Drag {
13481394
index = item.index;
13491395
child = item.widget.child;
13501396
capturedThemes = item.widget.capturedThemes;
1351-
dragPosition = initialPosition;
13521397
dragOffset = itemRenderBox.globalToLocal(initialPosition);
13531398
itemSize = item.context.size!;
1399+
_rawDragPosition = initialPosition;
1400+
if (listState.widget.dragBoundaryProvider != null) {
1401+
boundary = listState.widget.dragBoundaryProvider!.call(listState.context);
1402+
} else {
1403+
boundary = DragBoundary.forRectMaybeOf(listState.context);
1404+
}
1405+
dragPosition = _adjustedDragOffset(initialPosition);
13541406
itemExtent = _sizeExtent(itemSize, scrollDirection);
13551407
itemLayoutConstraints = itemRenderBox.constraints;
13561408
scrollable = Scrollable.of(item.context);
@@ -1364,6 +1416,7 @@ class _DragInfo extends Drag {
13641416
final ReorderItemProxyDecorator? proxyDecorator;
13651417
final TickerProvider tickerProvider;
13661418

1419+
late DragBoundaryDelegate<Rect>? boundary;
13671420
late SliverReorderableListState listState;
13681421
late int index;
13691422
late Widget child;
@@ -1375,6 +1428,7 @@ class _DragInfo extends Drag {
13751428
late CapturedThemes capturedThemes;
13761429
ScrollableState? scrollable;
13771430
AnimationController? _proxyAnimation;
1431+
late Offset _rawDragPosition;
13781432

13791433
void dispose() {
13801434
if (kFlutterMemoryAllocationsEnabled) {
@@ -1399,7 +1453,8 @@ class _DragInfo extends Drag {
13991453
@override
14001454
void update(DragUpdateDetails details) {
14011455
final Offset delta = _restrictAxis(details.delta, scrollDirection);
1402-
dragPosition += delta;
1456+
_rawDragPosition += delta;
1457+
dragPosition = _adjustedDragOffset(_rawDragPosition);
14031458
onUpdate?.call(this, dragPosition, details.delta);
14041459
}
14051460

@@ -1416,6 +1471,16 @@ class _DragInfo extends Drag {
14161471
onCancel?.call(this);
14171472
}
14181473

1474+
Offset _adjustedDragOffset(Offset offset) {
1475+
if (boundary == null) {
1476+
return offset;
1477+
}
1478+
final Offset adjOffset = boundary!.nearestPositionWithinBoundary(
1479+
(offset - dragOffset) & itemSize,
1480+
).shift(dragOffset).topLeft;
1481+
return adjOffset;
1482+
}
1483+
14191484
void _dropCompleted() {
14201485
_proxyAnimation?.dispose();
14211486
_proxyAnimation = null;

‎packages/flutter/test/material/reorderable_list_test.dart‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1925,6 +1925,46 @@ void main() {
19251925
expect(offsetForFastScroller / offsetForSlowScroller, fastVelocityScalar / slowVelocityScalar);
19261926
});
19271927

1928+
testWidgets('DragBoundary defines the boundary for ReorderableListView.', (WidgetTester tester) async {
1929+
await tester.pumpWidget(
1930+
MaterialApp(
1931+
home: Scaffold(
1932+
body: Container(
1933+
margin: const EdgeInsets.only(top: 100),
1934+
height: 300,
1935+
child: DragBoundary(
1936+
child: ReorderableListView.builder(
1937+
itemBuilder: (BuildContext context, int index) {
1938+
return ReorderableDragStartListener(
1939+
key: ValueKey<int>(index),
1940+
index: index,
1941+
child: Text('$index'),
1942+
);
1943+
},
1944+
itemCount: 5,
1945+
onReorder: (int fromIndex, int toIndex) {},
1946+
),
1947+
),
1948+
),
1949+
),
1950+
),
1951+
);
1952+
TestGesture drag = await tester.startGesture(tester.getCenter(find.text('0')));
1953+
await tester.pump(kLongPressTimeout);
1954+
await drag.moveBy(const Offset(0, -400));
1955+
await tester.pumpAndSettle();
1956+
expect(tester.getTopLeft(find.text('0')), const Offset(0, 100));
1957+
await drag.up();
1958+
await tester.pumpAndSettle();
1959+
1960+
drag = await tester.startGesture(tester.getCenter(find.text('0')));
1961+
await tester.pump(kLongPressTimeout);
1962+
await drag.moveBy(const Offset(0, 800));
1963+
await tester.pumpAndSettle();
1964+
expect(tester.getBottomLeft(find.text('0')), const Offset(0, 400));
1965+
await drag.up();
1966+
await tester.pumpAndSettle();
1967+
});
19281968
}
19291969

19301970
Future<void> longPressDrag(WidgetTester tester, Offset start, Offset end) async {

‎packages/flutter/test/widgets/reorderable_list_test.dart‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1677,6 +1677,51 @@ void main() {
16771677
await drag.up();
16781678
await tester.pumpAndSettle();
16791679
});
1680+
1681+
testWidgets('DragBoundary defines the boundary for ReorderableList.', (WidgetTester tester) async {
1682+
await tester.pumpWidget(
1683+
MaterialApp(
1684+
home: Scaffold(
1685+
body: Container(
1686+
margin: const EdgeInsets.only(top: 100),
1687+
height: 300,
1688+
child: DragBoundary(
1689+
child: CustomScrollView(
1690+
slivers: <Widget>[
1691+
SliverReorderableList(
1692+
itemBuilder: (BuildContext context, int index) {
1693+
return ReorderableDragStartListener(
1694+
key: ValueKey<int>(index),
1695+
index: index,
1696+
child: Text('$index'),
1697+
);
1698+
},
1699+
itemCount: 5,
1700+
onReorder: (int fromIndex, int toIndex) {},
1701+
),
1702+
],
1703+
)
1704+
),
1705+
),
1706+
),
1707+
),
1708+
);
1709+
TestGesture drag = await tester.startGesture(tester.getCenter(find.text('0')));
1710+
await tester.pump(kLongPressTimeout);
1711+
await drag.moveBy(const Offset(0, -400));
1712+
await tester.pumpAndSettle();
1713+
expect(tester.getTopLeft(find.text('0')), const Offset(0, 100));
1714+
await drag.up();
1715+
await tester.pumpAndSettle();
1716+
1717+
drag = await tester.startGesture(tester.getCenter(find.text('0')));
1718+
await tester.pump(kLongPressTimeout);
1719+
await drag.moveBy(const Offset(0, 800));
1720+
await tester.pumpAndSettle();
1721+
expect(tester.getBottomLeft(find.text('0')), const Offset(0, 400));
1722+
await drag.up();
1723+
await tester.pumpAndSettle();
1724+
});
16801725
}
16811726

16821727
class TestList extends StatelessWidget {

0 commit comments

Comments
 (0)