[material_ui] Add ReorderableListView.separated constructor

packages/material_ui/example/lib/reorderable_list/reorderable_list_view.separated.0.dart

@@ -0,0 +1,86 @@
+// Copyright 2013 The Flutter Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// #region body
+import 'package:material_ui/material_ui.dart';
+
+/// Flutter code sample for [ReorderableListView.separated].
+
+void main() => runApp(const ReorderableApp());
+
+class ReorderableApp extends StatelessWidget {
+  const ReorderableApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        appBar: AppBar(
+          title: const Text('ReorderableListView.separated Sample'),
+        ),
+        body: const ReorderableExample(),
+      ),
+    );
+  }
+}
+
+class ReorderableExample extends StatefulWidget {
+  const ReorderableExample({super.key});
+
+  @override
+  State<ReorderableExample> createState() => _ReorderableExampleState();
+}
+
+class _ReorderableExampleState extends State<ReorderableExample> {
+  final List<int> _items = List<int>.generate(20, (int index) => index);
+
+  @override
+  Widget build(BuildContext context) {
+    final ColorScheme colorScheme = Theme.of(context).colorScheme;
+    final Color oddItemColor = colorScheme.primary.withValues(alpha: 0.05);
+    final Color evenItemColor = colorScheme.primary.withValues(alpha: 0.15);
+
+    return ReorderableListView.separated(
+      padding: const .symmetric(horizontal: 40.0),
+      itemCount: _items.length,
+      itemBuilder: (BuildContext context, int index) {
+        // ListTile.tileColor is painted by the nearest Material ancestor, so
+        // each tile brings its own Material: without it the color would be
+        // painted by the Scaffold's Material and would not move with the tile
+        // during a reorder drag (per the ListTile documentation).
+        return Material(
+          // Key each tile by its item rather than by its position, so a tile's
+          // identity follows the item it shows when the order changes.
+          key: ValueKey<int>(_items[index]),
+          child: ListTile(
+            tileColor: _items[index].isOdd ? oddItemColor : evenItemColor,
+            title: Text('Item ${_items[index]}'),
+          ),
+        );
+      },
+      // The separator index is a boundary index: separator `index` sits between
+      // the items built for `index` and `index + 1`, so it describes a position
+      // in the list rather than a particular item. The thick dividers therefore
+      // stay on the even boundaries no matter how the items are reordered, and
+      // every divider stays visible while an item is being dragged.
+      separatorBuilder: (BuildContext context, int index) {
+        return Divider(
+          height: 8.0,
+          thickness: index.isEven ? 4.0 : 1.0,
+          color: index.isEven
+              ? colorScheme.primary
+              : colorScheme.outlineVariant,
+        );
+      },
+      onReorderItem: (int oldIndex, int newIndex) {
+        setState(() {
+          final int item = _items.removeAt(oldIndex);
+          _items.insert(newIndex, item);
+        });
+      },
+    );
+  }
+}
+
+// #endregion body

packages/material_ui/example/test/reorderable_list/reorderable_list_view.separated.0_test.dart

@@ -0,0 +1,86 @@
+// Copyright 2013 The Flutter Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter_test/flutter_test.dart';
+import 'package:material_ui/material_ui.dart';
+import 'package:material_ui_examples/reorderable_list/reorderable_list_view.separated.0.dart'
+    as example;
+
+void main() {
+  testWidgets('Example separates each pair of items with a divider', (
+    WidgetTester tester,
+  ) async {
+    await tester.pumpWidget(const example.ReorderableApp());
+
+    expect(find.text('Item 0'), findsOneWidget);
+    expect(find.text('Item 1'), findsOneWidget);
+    expect(find.byType(Divider), findsAtLeast(2));
+
+    // Separator 0 is the boundary between items 0 and 1, so it occupies the gap
+    // between the two tiles rather than any space inside either of them.
+    final Finder firstItem = find.ancestor(
+      of: find.text('Item 0'),
+      matching: find.byType(ListTile),
+    );
+    final Finder secondItem = find.ancestor(
+      of: find.text('Item 1'),
+      matching: find.byType(ListTile),
+    );
+    final double firstSeparatorCenter = tester
+        .getCenter(find.byType(Divider).first)
+        .dy;
+    expect(
+      firstSeparatorCenter,
+      greaterThan(tester.getBottomLeft(firstItem).dy),
+    );
+    expect(firstSeparatorCenter, lessThan(tester.getTopLeft(secondItem).dy));
+  });
+
+  testWidgets(
+    'Example gives each tile its own Material, so its background moves with it during a drag',
+    (WidgetTester tester) async {
+      await tester.pumpWidget(const example.ReorderableApp());
+
+      // ListTile.tileColor is painted by the tile's nearest ancestor Material.
+      // Each tile must bring its own (the wrapper carrying the item's key):
+      // with a bare ListTile the nearest Material is the Scaffold's, and the
+      // background would stay put while the tile moves during a reorder drag.
+      final List<Element> tiles = find.byType(ListTile).evaluate().toList();
+      expect(tiles, isNotEmpty);
+      for (final Element tile in tiles) {
+        final Text title = (tile.widget as ListTile).title! as Text;
+        final int item = int.parse(title.data!.split(' ').last);
+        final Material? material = tile
+            .findAncestorWidgetOfExactType<Material>();
+        expect(
+          material?.key,
+          ValueKey<int>(item),
+          reason:
+              'the Material painting "${title.data}" must be its own wrapper',
+        );
+      }
+    },
+  );
+
+  testWidgets('Example thickens the separators on even boundaries', (
+    WidgetTester tester,
+  ) async {
+    await tester.pumpWidget(const example.ReorderableApp());
+
+    final List<Divider> separators = tester
+        .widgetList<Divider>(find.byType(Divider))
+        .toList();
+    expect(separators.length, greaterThan(1));
+
+    // The list starts unscrolled, so the separators onstage are boundaries 0, 1,
+    // 2, ... in order, and each one is built from its own boundary index.
+    for (int i = 0; i < separators.length; i += 1) {
+      expect(
+        separators[i].thickness,
+        i.isEven ? 4.0 : 1.0,
+        reason: 'separator at boundary $i',
+      );
+    }
+  });
+}