CODEWITHSUNDEEP
androidflutterdartuser-interface
iamafasha
iamafasha

Reputation: 794

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

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?

stackeked circles

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:
...

Upvotes: 1

Views: 1250

Answers (1)

Ramin
Ramin

Reputation: 935

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.

Upvotes: 4

Related Questions