Building Intuitive Drag and Drop UI for Next-Level App Interactions

As one of the pivotal tools for creating visually compelling and highly interactive mobile apps, Flutter is increasingly receiving recognition amid the mobile development community. With its rich set of widgets and UI builder functionality, Flutter allows developers to create beautiful UI for apps. Arguably, the drag-and-drop UI is one of the most captivating features it harbors.

Utilizing drag and drop in your Flutter apps can significantly enhance the user experience by offering an intuitive interactivity mechanism. In this blog, you'll learn how to craft a drag-and-drop UI builder in Flutter, harnessing this feature to take your app's screens to a new height of user interaction.

‍

Understanding the Drag-and-Drop Interaction

At its core, drag-and-drop interaction involves three crucial steps. First, the user initiates a "long-press" on a widget. Secondly, a new widget appears beneath the user's finger which can be moved around the screen. Finally, upon releasing their input, the widget "drops" to a final position.

Imagine designing a food ordering app where customers can drag their preferred dishes and drop them on their cart to order. This intuitive interaction enhances your app's UI design and provides a seamless user experience.

‍

Essential Widgets for Drag-and-Drop Interaction in Flutter

Flutter UI has a key widget to build a drag and drop UI: LongPressDraggable.

‍

LongPressDraggable and its properties

LongPressDraggable is a widget specifically designed for the drag part of our interaction. It recognizes a long press on itself and provides a responsive UI that follows the user's finger on the screen. The movement of the UI elements is made possible by the dragAnchorStrategy property.

1     LongPressDraggable<Item>(
2      data: item,
3      dragAnchorStrategy: pointerDragAnchorStrategy
4    );
5     

You should pay special attention to this property value. pointerDragAnchorStrategy is responsible for how the DraggableListItem moves in reaction to the user moves.

‍

Combining LongPressDraggable with MenuListItem

The MenuListItem is our own custom widget from which our draggable will be created. To decouple the functionalities, we'll wrap MenuListItem inside a LongPressDraggable.

1     LongPressDraggable<Item>(
2      data: item,
3      dragAnchorStrategy: pointerDragAnchorStrategy,
4      child: MenuListItem(
5        name: item.name,
6        price: item.formattedTotalItemPrice,
7        photoProvider: item.imageProvider,
8      ),
9    );
10     

Here's where the interplay between the widgets starts. If a user long presses on a MenuListItem, the LongPressDraggable widget comes to the forefront, displaying a DraggingListItem - a photo of the selected food item, docked right under the user's finger.

‍

Implementing the Drop Function

The essence of the drop in drag and drop lies in where the user releases the draggable item. This isn't of much consequence unless it's dropped on top of a DragTarget widget — Flutter's built-in tool for this job. Only when a draggable is dropped onto a DragTarget does the latter have the ability to accept or reject the data from the former.

Imagine our food ordering app once again; the CustomerCart widget should offer the functionality to add a specific menu item to the user's cart when the item is dropped on it.

1     CustomerCart(
2      hasItems: customer.items.isNotEmpty,
3      customer: customer,
4    );
5     

In order to bring this functionality to life, we wrap the CustomerCart widget with a DragTarget widget.

1     DragTarget<Item>(
2      builder: (context, candidateItems, rejectedItems) {
3        return CustomerCart(
4          hasItems: customer.items.isNotEmpty,
5          customer: customer,
6        );
7      },
8      onAccept: (item) {
9        _itemDroppedOnCustomerCart(
10          item: item,
11          customer: customer,
12        );
13      },
14    )
15     

Here, DragTarget has two main purposes. Firstly, it serves as a receptacle for the dragged item, recognizing when the draggable is dropped on top of itself. Secondly, it provides visual feedback during the drag and drop interaction, serving as a cue of where the user could potentially drop the draggable. The moment the dragged item hovers over DragTarget, the latter plays its role to either accept or reject the dropped item.

‍

Adding Menu Items to a Customer’s Cart

Each customer in your app is represented by a Customer object, which maintains a list of items and a total price.

1     class Customer {
2      Customer({
3        required this.name,
4        required this.imageProvider,
5        List<Item>? items,
6      }) : items = items ?? [];
7    
8      final String name;
9      final ImageProvider imageProvider;
10      final List<Item> items;
11    
12      String get formattedTotalItemPrice {
13        final totalPriceCents =
14            items.fold<int>(0, (prev, item) => prev + item.totalPriceCents);
15        return '\$${(totalPriceCents / 100.0).toStringAsFixed(2)}';
16      }
17    }
18     

To update the customer's cart when a food item is selected, we add the item to the currently associated Customer object.

1     void _itemDroppedOnCustomerCart({
2      required Item item,
3      required Customer customer,
4    }) {
5      setState(() {
6        customer.items.add(item);
7      });
8    }
9     

In this way, by adding the dropped item to the specific customer's cart and invoking setState() to update the layout, the UI refreshes to display the updated total and item count for each customer. With this, you've fully implemented a drag-and-drop interaction for a food delivery app!

‍

Interactive Experience: Running the Application

To fully grasp the implementation of a Flutter drag and drop UI builder, you should try running the completed app. Traverse through the various food items. Long press or click and hold over a delightful dish and drop it on one of the customers displayed on your screen.

As you add items to a user's cart, the total bill undergoes real-time updates. Witness how you've enhanced the interactive experience of your Flutter app!

This ends our technical walkthrough of creating drag and drop UI builder in Flutter. By following this guide, you can incorporate this essential feature into your future Flutter apps, making your mobile apps more intuitive and enjoyable for users.

‍

Wrapping Up: Enriching User Experience with Flutter's Drag and Drop

Crafting intuitive and engaging UI design for Flutter apps propels an ordinary mobile application experience into an extraordinary one. Flutter's drag and drop UI builder unlocks an exciting user interaction that can enrich the functionality of your apps.

This easy-to-follow guide illustrated a food-ordering app to demonstrate how you can spotlight your customers by directly dragging a dish to their cart. Such thoughtfully designed experiences are sure to make your app designs stand out.

Lastly, Flutter equips developers with a great toolkit of widgets, allowing them to create, customize, and control their app's features as per their requirements. By optimizing such features, you're one step closer to creating an exceptional app that captivates users on any platform.

Mastering Flutter's drag and drop UI builder truly opens up a spectrum of possibilities. Dive into it today and enhance your Flutter UI design skills. Happy coding!

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.