How to Implement ReorderableGridView and ReorderableListView in Flutter Applications

In the realm of Flutter development, creating an intuitive and seamless user experience is paramount. One aspect that significantly contributes to this experience is the ability for users to reorder items within their applications effortlessly.

In this blog, we will dive deep into how to implement ReorderableGridView and ReorderableListView widgets in your Flutter applications, providing users with the seamless item reordering experience they expect.

Understanding Reorderable Lists in Flutter

A reorderable list allows users to change the order of list items through drag-and-drop gestures. This is particularly useful in applications where the arrangement of items is subject to user preference or when prioritizing tasks within a to-do list. Flutter provides the ReorderableListView widget, a stateful widget that supports reordering its list items.

Getting Started with ReorderableListView

To create a reorderable list, you must ensure each child of the ReorderableListView has a unique key. This is crucial for Flutter to track items correctly and maintain state during the reorder operation. The required ReorderCallback onReorder parameter is a callback that updates the data model when an item is moved to a new position.

Here's an example of a simple reorderable list:

1class MyApp extends StatelessWidget {
2  @override
3  Widget build(BuildContext context) {
4    return MaterialApp(
5      home: MyReorderableList(),
6    );
7  }
8}
9
10class MyReorderableList extends StatefulWidget {
11  @override
12  _MyReorderableListState createState() => _MyReorderableListState();
13}
14
15class _MyReorderableListState extends State<MyReorderableList> {
16  final List<String> _items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
17
18  @override
19  Widget build(BuildContext context) {
20    return Scaffold(
21      appBar: AppBar(
22        title: Text('Reorderable List Example'),
23      ),
24      body: ReorderableListView(
25        children: _items.map((String item) => ListTile(key: Key(item), title: Text(item))).toList(),
26        onReorder: (int oldIndex, int newIndex) {
27          setState(() {
28            if (newIndex > oldIndex) {
29              newIndex -= 1;
30            }
31            final String item = _items.removeAt(oldIndex);
32            _items.insert(newIndex, item);
33          });
34        },
35      ),
36    );
37  }
38}
39

In the above code snippet, we define a StatefulWidget called MyReorderableList that contains a ReorderableListView. Each list item is a ListTile widget with a unique key. The onReorder callback updates the order of the _items list when an item is dragged to a new location.

Enhancing User Experience with ReorderableGridView

While ReorderableListView is perfect for vertical lists, you might need a more grid-like layout. This is where the reorderable_grid_view package comes into play, offering a ReorderableGridView that supports reordering in a grid layout.

To use ReorderableGridView, add the following dependency to your pubspec.yaml file:

1dependencies:
2  reorderable_grid_view: ^2.2.8
3

After adding the dependency, you can implement a ReorderableGridView as shown in the following example:

1class MyReorderableGrid extends StatefulWidget {
2  @override
3  _MyReorderableGridState createState() => _MyReorderableGridState();
4}
5
6class _MyReorderableGridState extends State<MyReorderableGrid> {
7  final List<int> _data = [1, 2, 3, 4, 5];
8
9  @override
10  Widget build(BuildContext context) {
11    return Scaffold(
12      appBar: AppBar(
13        title: Text('Reorderable Grid Example'),
14      ),
15      body: ReorderableGridView.count(
16        crossAxisCount: 3,
17        children: _data.map((int item) => Card(
18          key: ValueKey(item),
19          child: Center(child: Text('$item')),
20        )).toList(),
21        onReorder: (int oldIndex, int newIndex) {
22          setState(() {
23            if (newIndex > oldIndex) {
24              newIndex -= 1;
25            }
26            final int element = _data.removeAt(oldIndex);
27            _data.insert(newIndex, element);
28          });
29        },
30      ),
31    );
32  }
33}
34

In this example, ReorderableGridView.count creates a grid with a specified number of columns (crossAxisCount). Each grid item is wrapped in a Card widget with a unique key. The onReorder callback is similar to the ReorderableListView, handling the reordering logic by updating the _data list based on the old and new indices.

Customizing the Reorderable Grid

The reorderable_grid_view package offers several options to customize the behavior and appearance of the reorderable grid. For instance, you can use the dragWidgetBuilderV2 to customize the widget that appears when dragging an item. This is useful if you want to provide visual feedback, such as changing the appearance of the dragged item or using a screenshot of the item for smoother animations.

Handling Reorder Callbacks

Both ReorderableListView and ReorderableGridView require you to implement reorder callbacks. These are functions that handle the logic when an item is reordered. The onReorder callback is mandatory and is triggered when a user has completed the reorder action. Additionally, you can implement void onReorderStart(int index) and void onReorderEnd(int index) to perform actions at the start and end of the reorder operation, respectively.

Adding Interactivity with Long Press and Drag Handles

By default, ReorderableListView and ReorderableGridView allow users to drag items to reorder them. On desktop platforms, a drag handle is added to each item, while on mobile platforms, a long press on the item initiates the drag. This behavior can be customized to suit the needs of your application.

Conclusion

In this article, we've explored how to implement reorderable lists and grids in Flutter applications. By using the ReorderableListView widget and the reorderable_grid_view package, developers can create interactive and user-friendly interfaces that easily allow items to be reordered. Whether you're building a to-do list, a photo gallery, or any other application where item order is essential, these tools are invaluable for enhancing the user experience.

Remember to consistently provide a unique key for each item, handle the reordering logic in the onReorder callback, and customize the appearance and behavior of the reorderable list or grid to match your design requirements. With these tips in mind, you're on your way to creating highly interactive and engaging Flutter applications.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.