flutterdartconditional-statementspreviewgesturedetector

How to create conditions for product preview of selected index?


I am creating a product details page. The first container should show a preview of the selected product in the row below.

The below row has 2 images. Running the code should show the preview container to display the default asset image until the user selects one of the images below. The default image should not be in the bottom row.

I tried but the default image is also shown in the row. How to achieve this?

here's what I get:

enter image description here

The third in the row is the default preview image, it shouldn't be in that row, it should only be displayed in the container until the first two are selected.

code:

int selectedImage = 2;

  List<String> imagePaths = [
    "images/tp1.png",
    "images/tp3.png",
    "images/tp2.png"
  ];
Container(
                  height: 360,
                  width: double.infinity,
                  color: const Color(0xffefefef),
                  child: Padding(
                    padding: const EdgeInsets.only(right: 30),
                    child: selectedImage != 0
                        ? Image.asset(
                            imagePaths[selectedImage],
                            fit: BoxFit.cover,
                          )
                        : Image.asset(
                            'images/wonder_woman.png',
                            fit: BoxFit.cover,
                          ),
                  ),
                ),
Padding(
              padding: const EdgeInsets.only(left: 15, top: 12),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  ...List.generate(
                    imagePaths.length,
                    (index) => buildSmallPreview(index),
                  ),
                ],
              ),
            ),


  GestureDetector buildSmallPreview(int index) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selectedImage = index;
        });
      },
      child: Container(
        margin: const EdgeInsets.only(right: 15),
        padding: const EdgeInsets.all(8),
        height: 80,
        width: 80,
        decoration: BoxDecoration(
          color: const Color(0xffefefef),
          borderRadius: BorderRadius.circular(4),
        ),
        child: Image.asset(
          imagePaths[index],
          width: 70,
          height: 70,
        ),
      ),
    );
  }

Solution

  • Add default image in list at index 0 and make currentImageIndex = 0

    int currentImageIndex = 0;
    
      List<String> imagePaths = [
        "default image path",
        "images/tp1.png",
        "images/tp3.png",
        "images/tp2.png",
      ];
    
        // preview of image
        Container(
          height: 360,
          width: double.infinity,
          color: const Color(0xffefefef),
          child: Padding(
            padding: const EdgeInsets.only(right: 30),
            child: Image.network(
              imagePaths[currentImageIndex],
              fit: BoxFit.cover,
            ),
          ),
        ),
        
        // image list for selection
        Padding(
          padding: const EdgeInsets.only(left: 15, top: 12),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              ...List.generate(
                imagePaths.length,
                (index) => buildSmallPreview(index),
              ),
            ],
          ),
        ),
    

    If index == 0 then display Container() instead of image:

      GestureDetector buildSmallPreview(int index) {
        return GestureDetector(
          onTap: () {
            setState(() {
              currentImageIndex = index;
            });
          },
          child: index == 0
              ? Container()
              : Container(
                  margin: const EdgeInsets.only(right: 15),
                  padding: const EdgeInsets.all(8),
                  height: 80,
                  width: 80,
                  decoration: BoxDecoration(
                    color: const Color(0xffefefef),
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: Image.network(
                    imagePaths[index],
                    width: 70,
                    height: 70,
                  ),
                ),
        );
      }