CODEWITHSUNDEEP
flutterdart
TSR
TSR

Reputation: 20426

Stack Positionned not clip overflow

I am trying to place an icon at the bottom right and a little bit outside of a picture.

However, Flutter clipped the overflow of my icon. How to tell Flutter not to clip the icon without repeating twice the width of the below stack?

In other words, how can I freely position a positionned widget beyond the Stack by just specifying bottom and right

Stack(
    children: [
      CircleAvatar(
        backgroundImage: avatar1,
        radius: 50.0,
      ),
      Positioned(
        bottom: -15,
        right: -15,
        child: CircledIconButton(
          backgroundColor: Colors.grey.shade300,
          icon: Icon(
            Icons.photo_camera,
            color: Theme.of(context).accentColor,
          ),
        ),
      ),
    ],
  );

enter image description here

Upvotes: 2

Views: 717

Answers (2)

TSR
TSR

Reputation: 20426

overflow: Overflow.visible is deprecated.

Try:

Stack(
  clipBehavior: Clip.none,

Upvotes: 2

Kherel
Kherel

Reputation: 16185

You can add: overflow: Overflow.visible,

Stack(
  overflow: Overflow.visible,
  children: [
    CircleAvatar(
      backgroundImage: avatar1,
      radius: 50.0,
    ),
    Positioned(
      bottom: -15,
      right: -15,
      child: CircledIconButton(
        backgroundColor: Colors.grey.shade300,
        icon: Icon(
          Icons.photo_camera,
          color: Theme.of(context).accentColor,
        ),
      ),
    ),
  ],
);

Upvotes: 0

Related Questions