How to set the position of stack in flutter?-CodePudding

I face some problem while using stack in flutter. The problem is there are 9 container in a row. First of all I use stack to put the map pin image at the first container. Then after I roll the dices and get the number 6, I need to move the map pin image to the number 6 container. This are same as the monopoly game, I need to move the player based on the number. How can I do that?

Positioned(
        top: 310,
        left: 670,
        child: Container(
          height: 50,
          width: 30,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/player.png'),
              fit: BoxFit.fill,
            ),
          ),
        )),

This is how I set the image at the first position. How can I move the image to the sixth container?

CodePudding user response：

From your code, I assume that the first one's horizontal location is 670 and the width of each box is 30. Then, this should get you to the sixth box:

  int nth = 6;
  double boxWidth = 30; 
  Positioned(
    top: 310,
    left: 670   (nth - 1) * boxWidth,
    child: Container(
      height: 50,
      width: boxWidth,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/images/player.png'),
          fit: BoxFit.fill,
        ),
      ),
    )),

//     |-30-|-30-|-30-|-30-|-30-|-30-|
//     |                        | 
//    670                   670 5*30

And to have both X and Y positioning, you can use this:

  int nthX = 6;
  int nthY = 5;
  double boxWidth = 30; 
  double boxHeight = 50;
  Positioned(
    top: 310   (nthY - 1) * boxHeight,
    left: 670   (nthX - 1) * boxWidth,
    child: Container(
      height: boxHeight,
      width: boxWidth,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/images/player.png'),
          fit: BoxFit.fill,
        ),
      ),
    )),