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://www.mindinventory.com/flutter-app-development.php
MIT License
100 stars 19 forks source link

Unable to get any dragging to happen #16

Closed parulsingh23 closed 2 years ago

parulsingh23 commented 2 years ago

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?

bilalahmad6354 commented 2 years ago

Faced the same issue and found a fix, You need to set the isDraggable flag. See the following code, it might help you.


  List<DraggableGridItem> _listOfDraggableGridItem(List<AppMenuItem> menuList) {
    var listOfChildds = menuList.map((e) => DraggableGridItem(
      isDraggable: true,
      child:
    Container(
      margin: EdgeInsets.all(10),
      child: ClipPath(
        clipper: AppFlowingClipper(),
        child: Container(
          decoration:  BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0)
          ),

          child: Stack(
            alignment: AlignmentDirectional.center,
            children:  [
              Icon(
                e.iconName,
                size: 20.0,
                color: Colors.white,
              ),
              Positioned(
                bottom: 10,
                left: 0,
                right: 0,
                child: Text(e.title,
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white, fontSize: 12),),
              ),

            ],
          ),
        ),

      ),
    ),),);

    return listOfChildds.toList();
  }
parulsingh23 commented 2 years ago

@bilalahmad6354 Thanks so much for the response! But I had already set the isDraggable flag. Here's the isolated problem (can be copy & pasted into a single main.dart file to recreate my issue):

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: ChooseCategoryPage(),
    );
  }
}

class ChooseCategoryPage extends StatefulWidget {
  ChooseCategoryPage({Key? key}) : super(key: key);

  late List<DraggableGridItem> listOfWidgets;
  @override
  ChooseCategoryPageState createState() => ChooseCategoryPageState();
}

class ChooseCategoryPageState extends State<ChooseCategoryPage> {

  @override
  void initState() {
    final List<String> images = ["stuff", "another block", "red", "orange "];
    widget.listOfWidgets = List<DraggableGridItem>.generate(
        images.length,
        (index) => DraggableGridItem(
              isDraggable: true,
              child: Container(
                padding: EdgeInsets.only(
                  left: 4.0,
                  right: 4.0,
                  top: 8.0,
                ),
                child: Text(images[index]),
              ),
            ));

    super.initState();

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [

          Text("Top of app"),

          Expanded(
            child: DraggableGridViewBuilder(
              padding: EdgeInsets.symmetric(vertical: 5),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                childAspectRatio: MediaQuery.of(context).size.width /
                    (MediaQuery.of(context).size.height / 2.8),
              ),
              children: widget.listOfWidgets,
              dragCompletion: onDragAccept,
              dragFeedback: feedback,
              dragPlaceHolder: placeHolder,
            ),
          ),
        ],
      ),
    );
  }

  void onDragAccept(
      List<DraggableGridItem> list, int beforeIndex, int afterIndex) {
    print('onDragAccept: $beforeIndex -> $afterIndex');
  }

  Widget feedback(List<DraggableGridItem> list, int index) {
    return SizedBox(
      child: list[index].child,
      width: 110,
      height: 80,
    );
  }

  PlaceHolderWidget placeHolder(List<DraggableGridItem> list, int index) {
    return PlaceHolderWidget(
      child: Container(
        color: Theme.of(context).scaffoldBackgroundColor,
      ),
    );
  }
}
sahilmind commented 2 years ago

@parulsingh23 I apologize for the delay, I have tested your code and it is working with the long press you can verify it from your end. also, If you are looking for the drag without a long press then you can passisOnlyLongPress = false. I am happy to help you if required. Thanks!

deep-mindinventory commented 2 years ago

closing issue due to no response. Please reopen if require. Thanks