How to make Popup-menu on specific card in flutter?

Viewed 422

This is my first time asking a question here. I'm a newbie in flutter and trying to create this popup menu (Screenshot) to select the quantity, of a specific product.

I tried the method below (Put Image and Container in a Stack and set visibility to false, and onTap set visibility true). But when I drag or Tap anywhere else it didn't hide.

Stack(
  children: [
    Column(
      children: [
        Image.network(
          MyStrings.imgs[i],
          height: 100,
        ),
      ],
    ),
    Align(
      alignment: Alignment.topRight,
      child: InkWell(
        onTap: () {
          setState(() {
            flag = true;
            if (MyStrings.quantity[i] == 0) {
              MyStrings.quantity[i] = 1;
            }
          });
        },
        child: Row(
          children: [
            Visibility(
              visible: flag,
              child: Container(
                width: 25,
                child: Center(
                  child: Expanded(
                    child: IconButton(
                      onPressed: () {
                        setState(() {
                          if (MyStrings.quantity[i] > 1)
                            MyStrings.quantity[i]--;
                          else {
                            setState(() {
                              MyStrings.quantity[i]--;
                              flag = false;
                            });
                          }
                        });
                      },
                      icon: Icon(Icons.remove, color: Colors.green),
                    ),
                  ),
                ),
              ),
            ),
            Container(
              width: 40,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50),
                color: Colors.green,
              ),
              child: Center(
                child: Text(
                  MyStrings.quantity[i].toString(),
                  style: TextStyle(
                    color: Colors.green,
                  ),
                ),
              ),
            ),
            Visibility(
              visible: flag,
              child: Container(
                width: 25,
                child: Center(
                  child: Expanded(
                    child: IconButton(
                      onPressed: () {
                        setState(() {
                          MyStrings.quantity[i]++;
                        });
                      },
                      icon: Icon(
                        Icons.add,
                        color: Colors.green,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  ],
)

Code here is too messy as I am unable to explain much that's Why I attached a Screenshot with it.

l

0 Answers
Related