Show images in selected indexes In GridView in Flutter

Question

I'm Building a screen to allow user to selected multiple boxes in the gridview and I'm using DragSelectGridView package which does the what I want for now.

But after the user select let's say 2 boxes (boxes should be next to each other), I wanna be able to show a certain image in them, I mean the boxes combined. explained in the image bellow

This what I've built so far

This is what I wanna have after the user select a certain amount of boxes

return Scaffold(
  appBar: DigitalBusinessGuideCustomAppBar(
    title: title,
    showAddIcon: true,
    showBackArrowIcon: true,
    showOptionsIcon: !isSelected,
    addIcon: isSelected ? AppImages.roundedPlusFilled : AppImages.roundedPlusGrayed,
    addIconFunction: () {
      isSelected
          ? Navigator.of(context)
              .pushNamed(AppRoutes.digitalBusinessGuideInstructions, arguments: selectedAmount)
          : '';
    },
    backArrowIcon: !isSelected ? AppImages.backArrow : AppImages.exit2,
    backArrowFunction: () {
      Navigator.of(context).pop();
    },
    optionsFunction: () {
      var userToken = CacheHelper.getData(key: AppConstants.userToken);
      var userType = CacheHelper.getData(key: AppConstants.userType);
      if (userToken != null) {
        if (userType == 0 || userType == 2) {
          Navigator.of(context).pushNamed(AppRoutes.viewerAndMarketerOptionsScreen);
        } else {
          Navigator.of(context).pushNamed(AppRoutes.advertiserOptionsScreen);
        }
      } else {
        Navigator.of(context).pushNamed(AppRoutes.homeOptionsScreen);
      }
    },
  ),
  body: Padding(
    padding: EdgeInsets.only(left: 14.w, right: 14.w, top: 16.h),
    child: DragSelectGridView(
      gridController: gridController,
      itemCount: 50,
      triggerSelectionOnTap: true,
      dragStartBehavior: DragStartBehavior.start,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        childAspectRatio: 1.26,
        crossAxisCount: 4,
        mainAxisSpacing: 1,
        crossAxisSpacing: 1,
      ),
      itemBuilder: (context, index, isSelected) {
        return GridTile(
          child: AnimatedContainer(
            duration: const Duration(milliseconds: 400),
            curve: Curves.easeInOut,
            decoration: BoxDecoration(
                color: isSelected ? AppColors.secondaryColor : Colors.transparent),
            child: Center(
              child: Text(
                AppStrings.adSpace,
                style: mediumStyle(
                    fontSize: 13.sp,
                    color: isSelected ? AppColors.whiteColor : AppColors.redColor),
              ),
            ),
          ),
        );
      },
    ),
  ),
);

} }

Your help will be apricated, thanks in advance.

Answer 1

fortunately, there's a package for you which will make your work much easir, try this docs:

https://pub.dev/packages/flutter_staggered_grid_view