anonymous-dev
anonymous-dev

Reputation: 3489

Is there a way to get expanded like behaviour in a stack?

I have a stack widget and I want the containers in the widget to have the same behaviour as an expanded has in a row. I am not using a row since I need the AnimatedPositioned widget for my animations. This is my structure

  return Stack(
    alignment: Alignment.center,
    children: [
      for (int i = 0; i < state.list.length; i++)
        AnimatedPositioned(
          curve: Curves.easeOut,
          duration: Duration(milliseconds: 300),
          left: state.order[i] * height,
          child: SizedBox(
            width: height,
            height: height,
            child: DragTarget<Item>(
              builder: (context, list, list2) => Container(width: 100, height:100),
            ),
          ),
        )
    ],
  );

So I have this now

enter image description here

But I want this nice and evenly ditributed in my stack

enter image description here

So right now the containers overflow at the end of the stack. I want them evenly distributed like you would have with an expanded in a row. So if I were to put the stack into a larger container the width of the containers would scale up to fill all the available space they can get.

Upvotes: 0

Views: 148

Answers (1)

anonymous-dev
anonymous-dev

Reputation: 3489

It turns out I just had to wrap my stack with a LayoutBuilder and use the width from the constraint and devide that by the amount of items to get the desired effect.

Upvotes: 2

Related Questions