Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Mindinventory/flutter_draggable_gridview
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.
https://github.com/Mindinventory/flutter_draggable_gridview
collection-view draggable draggable-collection flutter flutter-collection-view flutter-draggable-gridview graggable-gridview gridview
Last synced: 4 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/Mindinventory/flutter_draggable_gridview
- Owner: Mindinventory
- License: mit
- Created: 2021-10-06T05:38:29.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-12T18:42:20.000Z (4 months ago)
- Last Synced: 2024-07-26T20:57:54.898Z (3 months ago)
- Topics: collection-view, draggable, draggable-collection, flutter, flutter-collection-view, flutter-draggable-gridview, graggable-gridview, gridview
- Language: Dart
- Homepage: https://www.mindinventory.com/flutter-app-development.php
- Size: 14 MB
- Stars: 97
- Watchers: 6
- Forks: 19
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# flutter_draggable_gridview
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](https://github.com/Mindinventory/flutter_draggable_gridview/blob/main/assets/draggable_gridview.gif)## Usage
### Example
```dart
DraggableGridViewBuilder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: MediaQuery.of(context).size.width / (MediaQuery.of(context).size.height / 3),
),
children: _listOfDraggableGridItem,
isOnlyLongPress: false,
dragCompletion: (List list, int beforeIndex, int afterIndex) {
print( 'onDragAccept: $beforeIndex -> $afterIndex');
},
dragFeedback: (List list, int index) {
return Container(
child: list[index].child,
width: 200,
height: 150,
);
},
dragPlaceHolder: (List list, int index) {
return PlaceHolderWidget(
child: Container(
color: Colors.white,
),
);
},
);
```
### Required parameters##### gridDelegate:
A delegate that controls the layout of the children within the GridView.##### children:
This property contains list of [DraggableGridItem] and it is use to show the widget inside the GridView.builder to provide the drag & drop functionality. Also, it contains isDraggable parameter which manages enable/disable the drag & drop functionality.##### dragCompletion:
This callback provides updated list and old and new indexes.### 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:
With this callback, you have to return a Widget and we will use this widget in feedback. Learn more about feedback from [Draggable](https://api.flutter.dev/flutter/widgets/Draggable-class.html#:~:text=Draggable%20class%20Null%20safety,user's%20finger%20across%20the%20screen) class.##### dragPlaceHolder:
TWith this callback, you have to return a PlaceHolderWidget and we will use this widget in place holder.##### dragChildWhenDragging:
With this callback, 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](https://api.flutter.dev/flutter/widgets/Draggable-class.html#:~:text=Draggable%20class%20Null%20safety,user's%20finger%20across%20the%20screen) class.### Last But Not Least :heart_eyes:
#### 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](https://github.com/Mindinventory/flutter_draggable_gridview/blob/main/LICENSE "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.