A flutter list view which can drag & move item to change order.

Overview

draggable_flutter_list

A flutter list view which can drag & move item to change order.

  • some codes come from flutter_list_drag_and_drop
  • fix flutter_list_drag_and_drop's dart version support
  • optimize data structure and api
  • drag and drop items in List View
  • drag and drop are optional for specific item
  • animate when dragging

*Please use draggable_flutter_list for your dependency,

The old name dragable_flutter_list (lack g) has been deprecated

Usage

Pub package

import 'package:flutter/material.dart';
import 'package:draggable_flutter_list/draggable_flutter_list.dart';

void main() {
  runApp(new TestApp());
}

class TestApp extends StatelessWidget {
  TestApp({Key key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(primarySwatch: Colors.blue),
      home: new MyHomePage(
        title: 'Flutter Demo Home Page',
        key: key,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  MyHomePageState createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  List<String> items = [
    '0',
    '1',
    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
    '3',
    '4',
    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
    '6',
    '7',
    '8',
    '9',
    '10',
    '11',
    '12',
    '13',
    '14',
    '15',
  ];
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new DragAndDropList(
        items.length,
        itemBuilder: (BuildContext context, index) {
          return new SizedBox(
            child: new Card(
              child: new ListTile(
                title: new Text(items[index]),
              ),
            ),
          );
        },
        onDragFinish: (before, after) {
          print('on drag finish $before $after');
          String data = items[before];
          items.removeAt(before);
          items.insert(after, data);
        },
        canDrag: (index) {
          print('can drag $index');
          return index != 3; //disable drag for index 3
        },
        canBeDraggedTo: (one, two) => true,
        dragElevation: 8.0,
      ),
    );
  }
}

Getting Started

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

You might also like...

Flutter Bidirectional ListView - ListView with items that can be scrolled in both directions with a fixed item count and scroll boundaries.

Flutter Bidirectional ListView - ListView with items that can be scrolled in both directions with a fixed item count and scroll boundaries.

Flutter Bidirectional ListView ListView with items that can be scrolled and lazy loaded in up and down direction with a fixed item count and scroll bo

May 30, 2022

A page transition which supports drag-down-to-pop gesture.

drag_down_to_pop A page transition which supports drag-down-to-pop gesture. The main source code is copied from the cupertino/route.dart in Flutter SD

Aug 6, 2022

A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.

A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.

flutter_statusbarcolor A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically. Getting Starte

Nov 10, 2022

Grid-View-App - Grid View App For Flutter

Grid-View-App - Grid View App For Flutter

grid_view_app practice purpose flutter application Getting Started This project

Jun 9, 2022

Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

swipeable_button_view You can create ripple animated pages with swipeable_button

Apr 22, 2022

-UNDER DEVELOPMENT- a project built demonstrating model view view model architecture

mvvm_project A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

Nov 28, 2022

Music-App-Flutter - This is a flutter app which has some songs displayed in the form of a list and user can play any of them by clicking on the name of the song.

Music-App-Flutter - This is a flutter app which has some songs displayed in the form of a list and user can play any of them by clicking on the name of the song.

music_player_app A music player app made by me in flutter About the App This is a music player which i made to play audio files which we have passed i

Apr 1, 2021

Let's create a selectable Flutter Navigation Drawer with routing that highlights the current item within the Flutter Sidebar Menu.

Let's create a selectable Flutter Navigation Drawer with routing that highlights the current item within the Flutter Sidebar Menu.

Flutter Tutorial - Sidebar Menu & Selectable Navigation Drawer Let's create a selectable Flutter Navigation Drawer with routing that highlights the cu

Dec 26, 2022
Comments
  • Indexing Issue

    Indexing Issue

    Issue

    Hi there, I've started using your package because it's one of the simplest on pub.dev but I'm having some issues integrating this with Firestore. When trying to "pick up" the object, it's not setting the correct item. I was wondering if this is related to your package? I've tried wrapping this in a Listener widget but this causes the package to not work.

    Relevant Code

    DragAndDropList(
                          snapshot.data.documents.length,
                          itemBuilder: (BuildContext context, index) {
                            DocumentSnapshot documentSnapshot =
                                snapshot.data.documents[index];
                            _index = snapshot.data.documents[index];
    
    onDragFinish: (before, after) {
                            print('${_index.documentID} $after');
                            Firestore.instance
                                .collection('users')
                                .document(userDocPATH)
                                .collection(userDashboardPATH)
                                .document(_index.documentID)
                                .updateData({'Position': after.toString()});
                          },
    
    opened by ThomasValois 1
  • Drag&Drop reorder between two lists

    Drag&Drop reorder between two lists

    Hello!

    I am trying to create some sort of task manager exactly like in trello and your library solving my problem of drag&droping perfectly, but now fully. Can you please make possivle to drag&drop item of list between two and more lists.

    trello

    opened by godzeit 1
  • Drag and drop by dragging an icon, not the row itself?

    Drag and drop by dragging an icon, not the row itself?

    Hi!

    So to start dragging a list item you have to long press an item, and then drag to the desired position.

    Is it possible that we can isolate the draggable area to an icon? AND instead of needing to long press, can we just tap your finger and it immediately allows you to drag?

    For example: (sorry for the horrible quality) image

    Thanks!!

    opened by kevincherryholme 1
Owner
刘彦博
iOS Developer / Google Developer Expert in Flutter
刘彦博
A Fluter tabview that text color can change with animation and bg color change with animation

float_tab A Fluter tabview that text color can change with animation and bg color change with animation Getting Started This project is a starting poi

ventureli 1 Dec 8, 2021
Flutter package to create list of radio button, by providing a list of objects it can be a String list or list of Map.

Custom Radio Group List Flutter package to create list of radio button, by providing a list of objects it can be a String list or list of Map. Feature

Ashok Kumar Verma 0 Nov 30, 2021
Flutter list view - An unofficial list view for flutter

Flutter List View I don't like official list view. There are some features don't

null 24 Dec 15, 2022
Responsive Scaffold - On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item. Maintainer: @rodydavis

responsive_scaffold View the online demo here! On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item.

Flutter Community 346 Dec 2, 2022
Csv to list for web - Convert a CSV into a list in order to populate a firebase database

My goal is to convert a CSV into a list in order to populate a firebase database

null 0 Jan 26, 2022
Petrus Nguyễn Thái Học 193 Dec 29, 2022
It's a universal app template to have a great animated splash screen and liquid slider. Just change the animation if you want (rive) and change the images or colours according to your app.

liquid A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this i

Zikyan Rasheed 28 Oct 7, 2022
ITS A SIMPLE CRYPTO APP THAT GIVES OR DISPLAYS PRICES - %CHANGE AND CHANGE VALUE OF TICKER (VARIOUS CRYPTO ASSERTS)

btcpricetracker A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

jatin upadhyay 0 Dec 28, 2021
A Flutter plugin to rotate, resize, move, delete text, photo or any other widget.

sticker_view A Flutter plugin to rotate, resize, move, delete any text, image or any other widget. Available Features ✅ Rotate ✅ Resize ✅ Move ✅ Layer

Gopal Dhola 14 Nov 26, 2022
Sardor Makhmudov 0 Feb 7, 2022