How do I expand a Stack Widget depending on positioned elements inside?-CodePudding

I have a Stack And A text widget in a row widget as in the photo below. How can I be able to make sure when I add an item in the stack, It expands accordingly instead of breaking?

Here is my code

 Widget build(BuildContext context) {
    return Row(children: [
      Stack(
        fit: StackFit.expand,
        children: [
          
          Positioned(
            child: Image(
              image: AssetImage('assets/images/profile.jpg'),
              width: 28,
              height: 28,
              fit: BoxFit.cover,
            ),
          ),
          Positioned(
            left: 14,
            child: Image(
              image: AssetImage('assets/images/profile.jpg'),
              width: 28,
              height: 28,
              fit: BoxFit.cover,
            ),
          ),
          Positioned(
            left: 28,
            child: Image(
              image: AssetImage('assets/images/profile.jpg'),
              width: 28,
              height: 28,
              fit: BoxFit.cover,
            ),
          ),
        ],
      ),
      Expanded(child: Text("4 people"))
    ]);
  }

I get this error

The following RenderObject was being processed when the exception was fired: RenderStack#1dfc2 relayoutBoundary=up7 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
  creator: Stack ← Row ← TaggedPeople ← Column ← Expanded ← Row ← Column ← DecoratedBox ← Container ←
    Padding ← _BodyBuilder ← MediaQuery ← ⋯
  parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
  constraints: BoxConstraints(unconstrained)
  size: MISSING
  alignment: AlignmentDirectional.topStart
  textDirection:
...

CodePudding user response：

This is probably closer to what you have in mind.

Widget build(BuildContext context) {
    return Row(
      children: [
        Stack(
          children: [
            Container(
              width: 100,
              height: 100,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.red,
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 14),
              child: Container(
                width: 100,
                height: 100,
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.blue,
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 28),
              child: Container(
                width: 100,
                height: 100,
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.pink,
                ),
              ),
            ),
          ],
        ),
        Text("4 people"),
      ],
    );
  }

Use Padding instead of Positioned to offset the widgets. The Stack will only take the space needed and you won't get any errors.

CodePudding user response：

wrap the stack widget inside an Expanded widget. that would fix your problem,

Row(
 children:[
 Expanded(child: Stack()),
    Expanded(child: Text()),
         ]
      ),