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. On multitouch devices, various drags can happen simultaneously because there can be numerous pointers in contact with the devices without a moment’s delay. To restrict the number of concurrent drags, utilize the maxSimultaneousDrags property. The default is to permit a limitless number of concurrent drags.
In this article, we will explore the Drag And Drop GridView In Flutter. We will implement a drag-and-drop grid view demo program and creating a reorder of the GridViewItems simple by Drag And Drop using the drag_and_drop_gridview package in your flutter applications.
drag_and_drop_gridview | Flutter Package
Drag And Drop GridView extends the functionality of the GridView widget in Flutter and gives you the freedom of…pub.dev
Table Of Contents::
Introduction:
Drag And Drop GridView extends the usefulness of the GridView widget in Flutter and gives you the opportunity of making a reorder of the GridViewItems straightforward by Drag And Drop. It is too simple to execute and excellent to utilize.
Demo Module :
This demo video shows how to create a drag-and-drop grid view in a flutter. It shows how the drag-and-drop grid view will work using the drag_and_drop_gridview package in your flutter applications. It shows drag-and-drop interaction where the user long presses on a choice of item and then drags it to the picture using the drag and drop technique. Something like a grid view with drag and drop can change the position both horizontally and vertically. It will be shown on your device.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
drag_and_drop_gridview:
Step 2: Import
import 'package:drag_and_drop_gridview/devdrag.dart';
Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
We will create a list of strings of an image and define it on a staggered _imageUrls.
List<String> _imageUrls = [
'https://cdn.pixabay.com/photo/2020/12/15/16/25/clock-5834193__340.jpg',
'https://cdn.pixabay.com/photo/2020/09/18/19/31/laptop-5582775_960_720.jpg',
'https://media.istockphoto.com/photos/woman-kayaking-in-fjord-in-norway-picture-id1059380230?b=1&k=6&m=1059380230&s=170667a&w=0&h=kA_A_XrhZJjw2bo5jIJ7089-VktFK0h0I4OWDqaac0c=',
'https://cdn.pixabay.com/photo/2019/11/05/00/53/cellular-4602489_960_720.jpg',
'https://cdn.pixabay.com/photo/2017/02/12/10/29/christmas-2059698_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/01/29/17/09/snowboard-4803050_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/02/06/20/01/university-library-4825366_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/11/22/17/28/cat-5767334_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/12/13/16/22/snow-5828736_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/12/09/09/27/women-5816861_960_720.jpg',
"https://images.pexels.com/photos/1144687/pexels-photo-1144687.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
"https://images.pexels.com/photos/2589010/pexels-photo-2589010.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
];
We will create an integer variable set equal to zero, add scrollController and add double od width and height.
int variableSet = 0;
ScrollController? _scrollController;
double? width;
double? height;
In the body part, we will add DragAndDropGridView(). Inside, we will add a controller and gridDelegate. The gridDelegate argument must not be null. Add SliverGridDelegateWithFixedCrossAxisCount() means creates a delegate that makes grid layouts with a fixed number of tiles in the cross axis.
DragAndDropGridView(
controller: _scrollController,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3 / 4.5,
),
),
In DragAndDropGridView(), we will add itemBuilder that it will be called only with indices greater than or equal to zero and less than `itemCount.` LayoutBuilder(), set height, and width. We will return GridTile(), add an image dot network. Also, add itemCount.
itemBuilder: (context, index) => Card(
elevation: 2,
child: LayoutBuilder(
builder: (context, constrains) {
if (variableSet == 0) {
height = constrains.maxHeight;
width = constrains.maxWidth;
variableSet++;
}
return GridTile(
child: Image.network(
_imageUrls[index],
fit: BoxFit.cover,
height: height,
width: width,
),
);
},
),
),
itemCount: _imageUrls.length,
We will add onWillAccept means this function allows you to validate if you want to accept the change in the order of the gridViewItems. If you always want to accept the change, return true.
onWillAccept: (oldIndex, newIndex) {
if (_imageUrls[newIndex] == "something") {
return false;
}
return true;
},
We will add onReorder means this function deals with changing the index of the newly arranged gridItems. Add final temp is equal to the _imageUrls[oldIndex], _imageUrls[oldIndex] is equal to the _imageUrls[newIndex], and _imageUrls[newIndex] is equal to the temp.
onReorder: (oldIndex, newIndex) {
final temp = _imageUrls[oldIndex];
_imageUrls[oldIndex] = _imageUrls[newIndex];
_imageUrls[newIndex] = temp;
setState(() {});
},
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:drag_and_drop_gridview/devdrag.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
List<String> _imageUrls = [
'https://cdn.pixabay.com/photo/2020/12/15/16/25/clock-5834193__340.jpg',
'https://cdn.pixabay.com/photo/2020/09/18/19/31/laptop-5582775_960_720.jpg',
'https://media.istockphoto.com/photos/woman-kayaking-in-fjord-in-norway-picture-id1059380230?b=1&k=6&m=1059380230&s=170667a&w=0&h=kA_A_XrhZJjw2bo5jIJ7089-VktFK0h0I4OWDqaac0c=',
'https://cdn.pixabay.com/photo/2019/11/05/00/53/cellular-4602489_960_720.jpg',
'https://cdn.pixabay.com/photo/2017/02/12/10/29/christmas-2059698_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/01/29/17/09/snowboard-4803050_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/02/06/20/01/university-library-4825366_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/11/22/17/28/cat-5767334_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/12/13/16/22/snow-5828736_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/12/09/09/27/women-5816861_960_720.jpg',
"https://images.pexels.com/photos/1144687/pexels-photo-1144687.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
"https://images.pexels.com/photos/2589010/pexels-photo-2589010.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
];
int variableSet = 0;
ScrollController? _scrollController;
double? width;
double? height;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.blueGrey[100],
appBar: AppBar(
backgroundColor: Colors.black,
title: Text('Flutter Drag And Drop GridView'),
),
body: Center(
child: DragAndDropGridView(
controller: _scrollController,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3 / 4.5,
),
padding: EdgeInsets.all(20),
itemBuilder: (context, index) => Card(
elevation: 2,
child: LayoutBuilder(
builder: (context, constrains) {
if (variableSet == 0) {
height = constrains.maxHeight;
width = constrains.maxWidth;
variableSet++;
}
return GridTile(
child: Image.network(
_imageUrls[index],
fit: BoxFit.cover,
height: height,
width: width,
),
);
},
),
),
itemCount: _imageUrls.length,
onWillAccept: (oldIndex, newIndex) {
if (_imageUrls[newIndex] == "something") {
return false;
}
return true;
},
onReorder: (oldIndex, newIndex) {
final temp = _imageUrls[oldIndex];
_imageUrls[oldIndex] = _imageUrls[newIndex];
_imageUrls[newIndex] = temp;
setState(() {});
},
),
),
),
);
}
}
Conclusion:
In the article, I have explained the Drag And Drop GridView of the basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Drag And Drop GridView On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Drag And Drop GridView in your flutter projects. We will show you what the Introduction is?. Make a demo program for working Drag And Drop GridView, and show drag-and-drop interaction where the user long presses on a choice of item and then drags that item to the picture using the drag and drop technique. Something like a grid view with drag and drop can change the position both horizontally and vertically using the drag_and_drop_gridview package in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
