This package supports drag & drop widgets inside the GridView.builder for multiplatform

Overview

flutter_draggable_gridview

flutter_draggable_gridview version flutter_draggable_gridview Git Stars MIT License

This package supports drag & drop widgets inside the GridView.builder for multiplatform. It provides all the properties which are available in Gridview.builder and easy to implement with the few lines of code.

Draggable GridView.

Draggable GridView

Usage

Example

DraggableGridViewBuilder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      childAspectRatio: MediaQuery.of(context).size.width /
          (MediaQuery.of(context).size.height / 3),
    ),
    listOfWidgets: listOfWidgets,
    dragCompletion: this,
    dragFeedback: this,
    dragPlaceHolder: this,
    isOnlyLongPress: false,
  );

Required parameters

gridDelegate:

A delegate that controls the layout of the children within the GridView.

listOfWidgets:

This property contains list of widgets and it is use to show the widget inside the GridView.builder to provide the drag & drop functionality.

dragCompletion:

This property contains DragCompletion implementation. You have to override and store updated list (if needed).

Optional parameters

isOnlyLongPress:

This property contains bool value. If this property is false then it works with simple press draggable or else it works with long press. default value is 'true'.

dragFeedback:

This property contains DragFeedback implementation. If this property overrides then you have to return a Widget and we will use this widget in feedback. Learn more about feedback from Draggable class.

dragPlaceHolder:

This property contains DragPlaceHolder implementation. If this property overrides then you have to return a PlaceHolderWidget and we will use this widget in place holder.

dragChildWhenDragging:

This property contains DragChildWhenDragging implementation. If this property overrides then you have to return a Widget and we will display this widget instead of child when drags are under way. Learn more about childWhenDragging from Draggable class.

Last But Not Least 😍

You can use all the GridView.builder properties with DraggableGridViewBuilder class.

Note:

The result returns in List. so it can be lost later, you are responsible for storing it somewhere permanent (if needed).

Guideline for contributors

Contribution towards our repository is always welcome, we request contributors to create a pull request to the develop branch only.

Guideline to report an issue/feature request

It would be great for us if the reporter can share the below things to understand the root cause of the issue.

  • Library version
  • Code snippet
  • Logs if applicable
  • Device specification like (Manufacturer, OS version, etc)
  • Screenshot/video with steps to reproduce the issue

LICENSE!

Flutter Draggable GridView is MIT-licensed.

Let us know!

We’d be really happy if you send us links to your projects where you use our component. Just send an email to [email protected] And do let us know if you have any questions or suggestion regarding our work.

Comments
  • Your test example fails to drag image to new position with version 0.0.3

    Your test example fails to drag image to new position with version 0.0.3

    I was using flutter_draggable_gridview 0.0.1, before you refactored your code without any issues.

    After upgrading to 0.0.3 and you drag the image, it doesn't move the other images to make place for the dragged image on the gridview, as it did in the past, but the gird just remains static, and when you drop the image, it returns to its original place.

    I tested using your example code from this repo, and exactly the same thing happens when I run your example code.

    Can you please look into this problem.

    Thx

    bug 
    opened by wreyford 7
  • Unable to get any dragging to happen

    Unable to get any dragging to happen

    I've been looking at this repo's example, and a Medium article using this package, but I haven't been able to see any dragging work. Neither does the UI demonstrate any click-and-drag behavior, neither is the dragging callback function ever being called.

    What might be happening?

    opened by parulsingh23 4
  • Feature request: provide 'isDragging' details to DraggableGridItem

    Feature request: provide 'isDragging' details to DraggableGridItem

    DraggableGridItem currently has no way to know if it's being dragged. Instead of a Widget child argument, a builder argument with (BuildContext context, bool isDragging) could be provided

    enhancement 
    opened by lukepighetti 1
  • There is a bug in darg_target_grid.dart

    There is a bug in darg_target_grid.dart

    version: 0.0.4

    file drag_target_grid.dart, line 84: DraggableGridItem(child: EmptyItem(), isDraggable: true);

    should be :

    DraggableGridItem(child: widget.placeHolder ?? EmptyItem(), isDraggable: true);

    Could you please fix this ASAP and release a new version 0.0.5? Otherwise I have to use source code to integrate into my project. Thanks a lot!

    bug 
    opened by buptwsg 1
  • Can this package automatically reorder with animation when data source is changed?

    Can this package automatically reorder with animation when data source is changed?

    In my app, I don't need the user to reorder the contents but they are done when some filters are enabled.

    Use case:

    Grids show cars. When user presses red color, I want to show only the red colored cars And I want this filtering to happen in an animated way. So there might be several cars that are removed from different places of the cars array. When the filter is removed, all cars should be added in place with ordering animation.

    Can I use this package for this need?

    enhancement 
    opened by aytunch 1
  • How are you supposed to track grid changes?

    How are you supposed to track grid changes?

    Right now the only callback I see for when the grid changes is onDragAccept(List<DraggableGridItem> list). However, DraggableGridItem doesn't have any provisions for attaching a data payload, and it doesn't contain before or after indices, so it's not clear how we're expected to handle these grid changes.

    opened by lukepighetti 0
  • Enhancement request: reduce abstract classes

    Enhancement request: reduce abstract classes

    There are a lot of abstract classes where a callback would do. I have had to build three wrapping classes to get callback functionality.

    
    class DragCompletionCallback extends DragCompletion {
      DragCompletionCallback(this.callback);
    
      final void Function(List<DraggableGridItem> list) callback;
    
      @override
      void onDragAccept(List<DraggableGridItem> list) {
        callback(list);
      }
    }
    
    class DragChildWhenDraggingCallback extends DragChildWhenDragging {
      DragChildWhenDraggingCallback(this.callback);
    
      final Widget Function(List<DraggableGridItem> list, int index) callback;
    
      @override
      Widget dragChildWhenDragging(List<DraggableGridItem> list, int index) {
        return callback(list, index);
      }
    }
    
    class DragPlaceHolderCallback extends DragPlaceHolder {
      DragPlaceHolderCallback(this.callback);
    
      final PlaceHolderWidget Function(List<DraggableGridItem> list, int index)
          callback;
    
      @override
      PlaceHolderWidget placeHolder(List<DraggableGridItem> list, int index) {
        return callback(list, index);
      }
    }
    
    opened by lukepighetti 0
Owner
MindInventory
MindInventory works with Enterprises, Startups, and Agencies since 2011 providing web, mobile app development, enterprise mobility solutions & DevOps services.
MindInventory
Flutter multiplatform navigation sidebar / side navigationbar / drawer widget

SidebarX ?? Flutter multiplatform navigation sidebar / side navigationbar / drawer widget Show some ❤️ and star the repo to support the project! Mobil

Stanislav Ilin 138 Jan 5, 2023
A Flutter GridView whose items the user can interactively reorder by dragging

A GridView whose items the user can interactively reorder by dragging. Compared to the given ReorderableListView, it is possible to reorder different

null 57 Dec 19, 2022
A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

MohammadAminZamani.afshar 22 Dec 13, 2022
Custom bottom sheet widget, that can resize by drag and then scroll.

Bottom Sheet This package is part of the SurfGear toolkit made by Surf. About Custom bottom sheet widget that can be resized in response to drag gestu

Surf 92 Dec 16, 2022
A flutter demo app to practice List.generate with ListView.builder

ListView 3 A flutter demo app to practice List.generate with ListView.builder Developer Alexander Sosa (https://www.linkedin.com/in/alexander-sosa-asi

Alexander Sosa 0 Jan 3, 2022
Listview builder with image and text

listview_builder_with_image_and_text A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resource

null 0 May 4, 2022
Flutter package: Assorted layout widgets that boldly go where no native Flutter widgets have gone before.

assorted_layout_widgets I will slowly but surely add interesting widgets, classes and methods to this package. Despite the package name, they are not

Marcelo Glasberg 122 Dec 22, 2022
A dart package to display a horizontal bar of customisable toggle tabs. Supports iOS and Android.

toggle_bar A dart package to display a horizontal bar of customisable toggle tabs. Supports iOS and Android. Installation Depend on it. dependencies:

Prem Adithya 9 Jul 13, 2022
Custom widgets and utils using Flutter framework widgets and Dart language

reuse_widgets_and_utils The custom widgets and utils using Flutter framework widgets and Dart programming language. Getting Started This project is a

null 1 Oct 29, 2021
Flutter-useful-widgets - Flutter Useful Widgets

useful_widgets This package makes it easy to build apps by providing a list of simple and useful widgets. import 'package:useful_widgets/useful_widget

Ricardo Crescenti 6 Jun 20, 2022
Widgets beginner - Widgets beginner with flutter

Widgets beginner - Widgets beginner with flutter

Tukhtamurodov Sardorbek 2 Feb 6, 2022
A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

null 6 Jun 7, 2022
Flutter Package for Easier Creation of Home Screen Widgets

Home Widget HomeWidget is a Plugin to make it easier to create HomeScreen Widgets on Android and iOS. HomeWidget does not allow writing Widgets with F

Anton Borries 405 Dec 31, 2022
A Flutter package which provides helper widgets for selecting single or multiple account/user from the given list.

account_selector A Flutter package which provides helper widgets for selecting single or multiple account/user from a list Supported Dart Versions Dar

Harpreet Singh 49 Oct 7, 2021
A new flutter package for collection of common popular social media widgets

Social Media Widgets - package A new flutter package for collection of common popular social media widgets Currently available widgets Snapchat screen

theboringdeveloper 34 Nov 12, 2022
Multi select flutter tejpal - A package for creating multi-select widgets in a variety of ways

Multi select flutter tejpal - A package for creating multi-select widgets in a variety of ways

Tejpal Singh 3 Jul 11, 2022
A flutter package which provides most commonly used widgets with their normal and neon version

This is a flutter package which provides most commonly used widgets with their normal and neon version. There are multiple different types of widgets under this package, which can be used to create more neon theme widget

ojas 24 Oct 7, 2022
Pal-Widgets - A flutter package for better onboarding

Pal widgets A flutter package for better onboarding. A set of amazing onboarding widgets for your flutter applications. Install package add in your pu

Dominique Rwema Bagirishya 31 Oct 6, 2022
Flutter UI Widgets Flutter Package

Flutter UI Widgets Flutter Package This package makes different Flutter UI widgets implementation easy for you. Flutter UI Widgets The list of widgets

Hassan Ur Rahman 0 May 6, 2022