Drag and Drop Listview feature in Flutter

In today’s time, Everyone wants to have more and more features in the application they are using. More features make our application attractive, user-friendly, interactive.

Drag and drop is typical mobile application interaction. As the user long presses (at times called touch and hold) on a widget, another widget shows up underneath the user’s finger, and the user drags the widget to a last area and deliveries it.

In this article, we will explore the Drag and Drop Listview feature in Flutter. We will implement a drag-and-drop list view in a demo program.

Let’s begin the implementation.

Implementation

Step1:-create dragging item list

For implementing the Drag and Drop Listview feature in Flutter,

Firstly we need to create a stateful widget, in which we have a list of food items from which we will drag the items.

Also, we will make a customers list in which we drop the food items and dropped items are added as cart items in the customer’s list.

So below is the customer’s list.

  Widget _buildMenuList() {
    return ListView.separated(
      padding: const EdgeInsets.all(16.0),
      itemCount: _items.length,
      separatorBuilder: (context, index) {
        return const SizedBox(
          height: 12.0,
        );
      },
      itemBuilder: (context, index) {
        final item = _items[index];
        return _buildMenuItem(
          item: item,
        );
      },
    );
  }

  Widget _buildMenuItem({
    required Item item,
  }) {
    return LongPressDraggable<Item>(
      data: item,
      dragAnchorStrategy: pointerDragAnchorStrategy,
      feedback: DraggingListItem(
        dragKey: _draggableKey,
        photoProvider: item.imageProvider,
      ),
      child: MenuListItem(
        name: item.name,
        price: item.formattedTotalItemPrice,
        photoProvider: item.imageProvider,
      ),
    );
  }

Widget _buildMenuList() {

return ListView.separated(

padding: const EdgeInsets.all(16.0),

itemCount: _items.length,

separatorBuilder: (context, index) {

return const SizedBox(

height: 12.0,

);

itemBuilder: (context, index) {

final item = _items[index];

return _buildMenuItem(

item: item,

);

}

Widget _buildMenuItem({

required Item item,

}) {

return LongPressDraggable<Item>(

data: item,

dragAnchorStrategy: pointerDragAnchorStrategy,

feedback: DraggingListItem(

dragKey: _draggableKey,

photoProvider: item.imageProvider,

child: MenuListItem(

price: item.formattedTotalItemPrice,

photoProvider: item.imageProvider,

);

}

Step2:-create dropping item list

Now we will create a customer list for dropping items.

Here we are using a DragTarget widget which will help us in dragging the particular item.

  Widget _buildPeopleRow() {
    return Container(
      padding: const EdgeInsets.symmetric(
        horizontal: 8.0,
        vertical: 20.0,
      ),
      child: Row(
        children: _people.map(_buildPersonWithDropZone).toList(),
      ),
    );
  }

  Widget _buildPersonWithDropZone(Customer customer) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 6.0,
        ),
        child: DragTarget<Item>(
          builder: (context, candidateItems, rejectedItems) {
            return CustomerCart(
              hasItems: customer.items.isNotEmpty,
              highlighted: candidateItems.isNotEmpty,
              customer: customer,
            );
          },
          onAccept: (item) {
            _itemDroppedOnCustomerCart(
              item: item,
              customer: customer,
            );
          },
        ),
      ),
    );
  }

Widget _buildPeopleRow() {

return Container(

padding: const EdgeInsets.symmetric(

horizontal: 8.0,

vertical: 20.0,

child: Row(

children: _people.map(_buildPersonWithDropZone).toList(),

);

}

Widget _buildPersonWithDropZone(Customer customer) {

return Expanded(

child: Padding(

padding: const EdgeInsets.symmetric(

horizontal: 6.0,

child: DragTarget<Item>(

builder: (context, candidateItems, rejectedItems) {

return CustomerCart(

hasItems: customer.items.isNotEmpty,

highlighted: candidateItems.isNotEmpty,

customer: customer,

);

onAccept: (item) {

_itemDroppedOnCustomerCart(

item: item,

customer: customer,

);

}

Step3:-Dummy customer and items list

Here are the dummy customers and items list.

///dummy item's list

const List<Item> _items = [
  Item(
    name: 'Spinach Pizza',
    totalPriceCents: 1299,
    uid: '1',
    imageProvider: NetworkImage('https://flutter'
        '.dev/docs/cookbook/img-files/effects/split-check/Food1.jpg'),
  ),
  Item(
    name: 'Veggie Delight',
    totalPriceCents: 799,
    uid: '2',
    imageProvider: NetworkImage('https://flutter'
        '.dev/docs/cookbook/img-files/effects/split-check/Food2.jpg'),
  ),
  Item(
    name: 'Chicken Parmesan',
    totalPriceCents: 1499,
    uid: '3',
    imageProvider: NetworkImage('https://flutter'
        '.dev/docs/cookbook/img-files/effects/split-check/Food3.jpg'),
  ),
];

///dummy Customers list

 final List<Customer> _people = [
    Customer(
      name: 'Makayla',
      imageProvider: const NetworkImage('https://flutter'
          '.dev/docs/cookbook/img-files/effects/split-check/Avatar1.jpg'),
    ),
    Customer(
      name: 'Nathan',
      imageProvider: const NetworkImage('https://flutter'
          '.dev/docs/cookbook/img-files/effects/split-check/Avatar2.jpg'),
    ),
    Customer(
      name: 'Emilio',
      imageProvider: const NetworkImage('https://flutter'
          '.dev/docs/cookbook/img-files/effects/split-check/Avatar3.jpg'),
    ),
  ];

///dummy item's list

const List<Item> _items = [

Item(

totalPriceCents: 1299,

uid: '1',

imageProvider: NetworkImage('https://flutter'

'.dev/docs/cookbook/img-files/effects/split-check/Food1.jpg'),

Item(

totalPriceCents: 799,

uid: '2',

imageProvider: NetworkImage('https://flutter'

'.dev/docs/cookbook/img-files/effects/split-check/Food2.jpg'),

Item(

totalPriceCents: 1499,

uid: '3',

imageProvider: NetworkImage('https://flutter'

'.dev/docs/cookbook/img-files/effects/split-check/Food3.jpg'),

];

///dummy Customers list

final List<Customer> _people = [

Customer(

imageProvider: const NetworkImage('https://flutter'

'.dev/docs/cookbook/img-files/effects/split-check/Avatar1.jpg'),

Customer(

imageProvider: const NetworkImage('https://flutter'

'.dev/docs/cookbook/img-files/effects/split-check/Avatar2.jpg'),

Customer(

imageProvider: const NetworkImage('https://flutter'

'.dev/docs/cookbook/img-files/effects/split-check/Avatar3.jpg'),

];

Now the code implementation is completed.We will see the output.

Step4:-Output

Here is the output of the drag and drop in list view in flutter.

In the above-attached video, you can see that items are dragging from the food list and dropping in the customer’s list.

And food items are updating as cart count in the customer’s list.

Congratulations!!!! you have learned drag and drop in listview in flutter.

For more details and methods you can refer to the official doc of flutter here.

For more interesting blogs check out here – https://mobikul.com/blog/

Hope this blog helped you with a better understanding in

Hope this blog helped you with a better understanding in implement drag and drop in listview in flutter.

Thanks for reading.😇

Vandana Sharma 21 February 2022

. . .

2 comments

dara Jul 20, 2022 at 2:07 pm

Can I have full source code?

Vandana Sharma (Moderator) Jul 25, 2022 at 4:16 pm
Sorry as per the company rules,we can’t share the source code with you.But we can help you in your problem.please elaborate your problem by attaching screenshot or share your code ,we’ll fix your issue.

Reply

Drag and Drop Listview feature in Flutter

Implementation

Step1:-create dragging item list

Step2:-create dropping item list

Step3:-Dummy customer and items list

Step4:-Output

Leave a Comment Cancel Reply

2 comments

Message Sent!