ERROR ON MULTIPLE GRID VIEWS.

[Oti Temitope Emmanuel]

ERROR
I encounter a problem while utilizing multiple draggable grid views within a single page.

1. The elements in the initial view can be dragged to the secondary list.
2. The interface of the second list's is displayed on the first.
3. The first list is not using the children count of the second hence there are "out of range errors" as seen in the video below.

The code segments are somewhat lengthy, so I'll display only the pertinent portions, kindly note that both list contains items of different classes and have different lengths.

FIRST GRIDVIEW.

DraggableGridViewBuilder(
         key: UniqueKey(),
         physics: const NeverScrollableScrollPhysics(),
         shrinkWrap: true,
         padding: const EdgeInsets.all(0),
         gridDelegate: SliverQuiltedGridDelegate(
           crossAxisCount: 3,
           mainAxisSpacing: 0,
           crossAxisSpacing: 0,
           repeatPattern: QuiltedGridRepeatPattern.inverted,
           pattern: const [
             QuiltedGridTile(1, 1),
             QuiltedGridTile(1, 1),
             QuiltedGridTile(1, 1),
           ],
         ),

         children: uploadData.images.map(
           (image) {
             return DraggableGridItem(
               isDraggable: true,
               child: ProductImageAndStyle(
                 key: UniqueKey(),
                 image: image.imageUrl ?? '',
                 isFileImage: image.isFileImage,
                 onLongPressed: () => showRemoveItemDialog(() {
                   setState(() {
                     _uploadData.removeImage(image);
                   });
                 }),
               ),
             );
           },
         ).toList(),
         isOnlyLongPress: false,
         dragCompletion:
             (List<DraggableGridItem> list, int firstIndex, int secondIndex) {
           setState(() {
             _uploadData.swapImages(firstIndex, secondIndex);
           });
         },
         dragFeedback: (List<DraggableGridItem> list, int index) {
           return SizedBox(
             width: 150,
             height: 150,
             child: list[index].child,
           );
         },
         dragPlaceHolder: (List<DraggableGridItem> list, int index) {
           return PlaceHolderWidget(
             key: UniqueKey(),
             child: const SizedBox(),
           );
         },
       ),

SECOND GRIDVIEW

    DraggableGridViewBuilder(
          key: UniqueKey(),
          physics: const NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          padding: const EdgeInsets.all(0),
          gridDelegate: SliverQuiltedGridDelegate(
            crossAxisCount: 3,
            mainAxisSpacing: 0,
            crossAxisSpacing: 0,
            repeatPattern: QuiltedGridRepeatPattern.inverted,
            pattern: const [
              QuiltedGridTile(1, 1),
              QuiltedGridTile(1, 1),
              QuiltedGridTile(1, 1),
            ],
          ),
          children: uploadData.productStyles.map(
            (style) {
              return DraggableGridItem(
                isDraggable: true,
                child: ProductImageAndStyle(
                  image: style.imageUrl ?? '',
                  isFileImage: style.isFileImage,
                  name: style.name,
                  key: UniqueKey(),
                  onLongPressed: () => showRemoveItemDialog(
                    () {
                      setState(() {
                        _uploadData.removeProductStyle(style);
                      });
                    },
                  ),
                  onPressed: () async {
                    final index = uploadData.productStyles.indexOf(style);
                    final item = await context.showBottomBar<ProductStyle>(
                      child: AddProductStyleBar(
                        productStyle: style,
                      ),
                    );
                    if (item != null) {
                      uploadData.addEditProductStyle(index, item);
                    }
                    setState(() {});
                  },
                ),
              );
            },
          ).toList(),
          isOnlyLongPress: false,
          dragCompletion:
              (List<DraggableGridItem> list, int firstIndex, int secondIndex) {
            setState(() {
              _uploadData.swapProductStyles(firstIndex, secondIndex);
            });
          },
          dragFeedback: (List<DraggableGridItem> list, int index) {
            return SizedBox(
              width: 150,
              height: 150,
              child: list[index].child,
            );
          },
          dragPlaceHolder: (List<DraggableGridItem> list, int index) {
            return const PlaceHolderWidget(
              child: SizedBox(),
            );
          },
        ),

FURTHER EXPLANATION
Both Gridviews utilize a similar widget, albeit with distinct parameters sourced from separate lists. The initial Gridview draws from the 'image' list, whereas the subsequent one relies on the 'style' list. Upon rendering, these Gridviews are anticipated to exhibit distinct visual appearances.

However, a disparity arises during the rendering process, as both the first and second lists exhibit the same content—the second item—accompanied by some visual irregularities. Also an element can be dragged from the first to the second and this results in a disruptive confluence of content and this should not even work.

An endeavor was made to address this issue by rearranging the order of the lists within the column layout. Intriguingly, this modification led to a change in the widget rendered: the two lists no longer showed the same content of the second code but now showed that of the first.

LIBRARY VERSION
flutter_draggable_gridview: ^0.0.8

Here's a glimpse of the present state with both grids visible. Please be aware that the UI of the second grid is the one always rendered on both.

And this serves as a preview of the display when one of the grid is converted to the normal flutter grid view . It's important to highlight that no major code modifications were made (only changes back to the standard grid view) and under these circumstances, the list is rendered accurately.

The codes where tested on an iPhone 14 pro max simualator

[shahriarsaem]

Did the issue solve?
I'm encountering the similar problem.
I couldn't find the solution anywhere.

[FLEasy]

Did the issue solve?
I'm encountering the similar problem.
I couldn't find the solution anywhere.

[mi-raj04]

solve this issue in latest version of this package https://pub.dev/packages/flutter_draggable_gridview