reorderables

The reorderables package provides various widgets (such as ReorderableTable, ReorderableRow, ReorderableColumn, ReorderableWrap, and ReorderableSliverList) that enable drag-and-drop reordering of their children.

To implement reordering, the parent widget must provide an onReorder callback function. This function is invoked whenever a child is moved, providing the old index and the new index of the reordered child.

A reorderable version of Flutter's Column. It supports optional header and footer widgets and allows for custom crossAxisAlignment. It can be used inside an IntrinsicWidth widget to create list-like views that adapt to their content width.

ReorderableColumn(
  header: Text('HEADER'),
  footer: Text('FOOTER'),
  crossAxisAlignment: CrossAxisAlignment.start,
  children: _rows,
  onReorder: (int oldIndex, int newIndex) {
    setState(() {
      Widget row = _rows.removeAt(oldIndex);
      _rows.insert(newIndex, row);
    });
  },
)

After adding the dependency, import the package to access the reorderable widgets.

import 'package:reorderables/reorderables.dart';

To use reorderables in your Flutter project, add it as a dependency in your pubspec.yaml file.

dependencies:
  reorderables: ^0.6.0

A reorderable version of Flutter's Wrap. It supports size-based wrapping and can also limit the minimum and maximum amount of children in each run.

Note: Since v0.2.5, children of ReorderableWrap do not need to have an explicit key specified.

ReorderableWrap(
  spacing: 8.0,
  runSpacing: 4.0,
  padding: const EdgeInsets.all(8),
  children: _tiles,
  onReorder: (int oldIndex, int newIndex) {
    setState(() {
      Widget row = _tiles.removeAt(oldIndex);
      _tiles.insert(newIndex, row);
    });
  },
  onNoReorder: (int index) {
    // Optional callback when reorder is cancelled
  },
  onReorderStarted: (int index) {
    // Optional callback when reorder starts
  },
)

The reorderables_example project provides several implementation patterns for using the reorderables package in Flutter. You can find specific implementation details in the following files:

• ReorderableTable: See lib/table_example.dart
• ReorderableWrap: See lib/wrap_example.dart
• Nested ReorderableWrap: See lib/nested_wrap_example.dart
• ReorderableColumn: See lib/column_example1.dart and lib/column_example2.dart
• ReorderableRow: See lib/row_example.dart
• ReorderableSliverList: See lib/sliver_example.dart

To change the launch screen image for your iOS application, you can either replace the image files directly in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory or use Xcode to manage the assets.

To use Xcode:

1. Open your Flutter project's iOS workspace using open ios/Runner.xcworkspace.
2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
3. Drag and drop your desired images into the asset catalog.

A reorderable version of Flutter's Table. Unlike a list, cells in a table are horizontally aligned across rows.

To make rows draggable, each row must be a ReorderableTableRow and every row must specify a key. This ensures the framework can track the identity of the rows during reordering.

ReorderableTable(
  header: ReorderableTableRow(
    children: [Text('Name'), Text('Math')],
  ),
  children: _itemRows.map((row) => ReorderableTableRow(
    key: ObjectKey(row), // A key is required for each row
    children: [Text('Alex'), Text('D')],
  )).toList(),
  onReorder: (int oldIndex, int newIndex) {
    setState(() {
      ReorderableTableRow row = _itemRows.removeAt(oldIndex);
      _itemRows.insert(newIndex, row);
    });
  },
)

A reorderable version of Flutter's SliverList. To implement it, replace SliverList with ReorderableSliverList and use either ReorderableSliverChildListDelegate or ReorderableSliverChildBuilderDelegate instead of the standard Sliver delegates.

Important: You must attach a ScrollController to the ScrollView (e.g., CustomScrollView) containing the ReorderableSliverList, otherwise an error will be thrown during dragging.

ReorderableSliverList(
  delegate: ReorderableSliverChildListDelegate(_rows),
  // or
  // delegate: ReorderableSliverChildBuilderDelegate(
  //   (BuildContext context, int index) => _rows[index],
  //   childCount: _rows.length
  // ),
  onReorder: (int oldIndex, int newIndex) {
    setState(() {
      Widget row = _rows.removeAt(oldIndex);
      _rows.insert(newIndex, row);
    });
  },
)