Flutter GridView Drag and Drop Example

In this article, we are going to integrate flutter drag and drop gridview in mobile application. You can also check out flutter gridview related articles.

We are using drag_and_drop_gridview package to create gridview with drag and drop functionality. When user long presses on any grid item then item is dragged to any other position to drop in any direction by user. DragAndDropGridView has many properties to customize gridview in flutter app.

We can control scrolling effect of grid view using controller property of DragAndDropGridView widget. gridDelegate property is used to set fix number of tiles in grid layout using SliverGridDelegateWithFixedCrossAxisCount class. We can customize our grid item UI using itemBuilder property.

itemCount property is used to set number of grid items in grid view. onWillAccept property is used to approve order of grid items after drag and drop by giving value true. onReorder attribute is used to make changes in grid view when grid item is dragged and dropped.

 

Add required library in pubspec.yaml file

drag_and_drop_gridview: ^1.0.8
 
 

Flutter GridView Example

import ‘package:drag_and_drop_gridview/devdrag.dart’;
import ‘package:flutter/material.dart’;

class MyDragDropGridViewScreen extends StatefulWidget {
@override
_MyDragDropGridViewScreenState createState() => _MyDragDropGridViewScreenState();
}

class _MyDragDropGridViewScreenState extends State<MyDragDropGridViewScreen> {

double itemWidth;
double itemHeight;
ScrollController myScrollController;
int myVariableSet = 0;
List<String> listImageUrls = [
‘https://images.unsplash.com/photo-1621847468516-1ed5d0df56fe?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8bmF0dXJlJTIwbGFuZHNjYXBlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60’,
‘https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8bmF0dXJlJTIwbGFuZHNjYXBlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60’,
‘https://images.unsplash.com/photo-1597910037283-e728413e079c?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fG5hdHVyZSUyMGxhbmRzY2FwZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60’,
‘https://images.unsplash.com/photo-1610552050890-fe99536c2615?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fG5hdHVyZSUyMGxhbmRzY2FwZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60’,
‘https://images.unsplash.com/photo-1614254631212-fd9aab382bb3?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fG5hdHVyZSUyMGxhbmRzY2FwZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60’,
‘https://images.unsplash.com/photo-1613551356373-29802c78b577?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjJ8fG5hdHVyZSUyMGxhbmRzY2FwZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60’,
‘https://images.unsplash.com/photo-1608853898358-0a2f9f91e304?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjV8fG5hdHVyZSUyMGxhbmRzY2FwZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60’,
‘https://images.unsplash.com/photo-1614620273949-7f2cdee28eb8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mzd8fG5hdHVyZSUyMGxhbmRzY2FwZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60’,
];

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Drag & Drop GridView Sample’)),
body: Center(
child: DragAndDropGridView(
controller: myScrollController,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 3 / 4.5,
crossAxisCount: 2,
),
padding: EdgeInsets.all(10),
itemBuilder: (context, index) => Card(
elevation: 2,
child: LayoutBuilder(
builder: (context, constrains) {
if (myVariableSet == 0) {
itemWidth = constrains.maxWidth;
itemHeight = constrains.maxHeight;
myVariableSet++;
}
return GridTile(
child: Image.network(
listImageUrls[index],
width: itemWidth,
height: itemHeight,
fit: BoxFit.cover,
),
);
},
),
),
itemCount: listImageUrls.length,
onWillAccept: (oldIndex, newIndex) {
if (listImageUrls[newIndex] == “something”) {
return false;
}
return true;
},
onReorder: (oldIndex, newIndex) {
final temp = listImageUrls[oldIndex];
listImageUrls[oldIndex] = listImageUrls[newIndex];
listImageUrls[newIndex] = temp;
setState(() {});
},
),
),
);
}
}

 
 
 
flutter gridview
 
 
flutter gridview
 

Leave a Reply