Flutter: responsive Positioned in Stack

Issue

I want to place icon out of parent bounds and make it responsive (relative to parent’s height).

enter image description here

There is no problem to place an icon outside from parent bounds with Stack and Positioned widgets.

But there is a problem to make it responsive.

So, if container height decreases, then the icon size should also decrease.

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Color(0xff2577ff),
      width: 5.0,
    ),
    borderRadius: BorderRadius.all(
      Radius.circular(15.0),
    ),
  ),
  width: 200.0,
  height: 80.0,
  child: Stack(
    clipBehavior: Clip.none,
    children: [
      Center(
        child: Text('Text'),
      ),
      Positioned( // <-- doesn't work
        top: -20.0, // <-- how to make it also relative to parent's height parameter?
        right: -20.0, // <-- how to make it also relative to parent's height parameter?
        child: FractionallySizedBox( // <-- doesn't work
          heightFactor: 0.5,
          child: Image.network('https://i.stack.imgur.com/dOkkG.png'),
        )
      )
    ],
  ),
)

I’ve tried to make some sample but with no success. I really don’t know how to implement such logic with Flutter and I can’t find any reliable example.

Solution

Use LayoutBuilder. You can get the parent’s constraints using that. So, for example:

Container(
        decoration: BoxDecoration(
          border: Border.all(
            color: Color(0xff2577ff),
            width: 5.0,
          ),
          borderRadius: BorderRadius.all(
            Radius.circular(15.0),
          ),
        ),
        width: 200.0,
        height: 160.0,
        child: LayoutBuilder(builder: (context, constraint) {
          return Stack(
            clipBehavior: Clip.none,
            children: [
              Positioned(
                // <-- doesn't work
                top: -(constraint.maxHeight /
                    4), // relative to parent's height
                right: -(constraint.maxHeight /
                    4), // relative to parent's height
                child: Container(
                    height: constraint.maxHeight / 2, // relative to parent's height
                    width: constraint.maxHeight / 2, // relative to parent's height
                    child:
                        Image.network('https://i.stack.imgur.com/dOkkG.png')),
              ),
              Container(
                child: Center(
                  child: Text('Text'),
                ),
              )
            ],
          );
        }));

Answered By – Riwen

Answer Checked By – Senaida (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.