Flutter UI: Absolute positioned element with fixed height and 100% width

Question

In flutter, I'd like to have a Container with a fixed height and 100% width.

To accomplish this, I used:

              Row(
                children: <Widget>[
                  Flexible(
                    child: Container(
                      color: Colors.blue,
                      height: 40.0,
                    ),
                  ),
                ],
              ),

Now, I'd like to offset this row a few pixels offscreen. To accomplish this, I'm attempting to use:

        Stack(
          children: <Widget>[
            Positioned(
              left: -5.0,
              child: Row(
                children: <Widget>[
                  Flexible(
                    child: Container(
                      color: Colors.blue,
                      height: 40.0,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),

This gives me the error:

The following assertion was thrown during performLayout(): RenderFlex children have non-zero flex but incoming width constraints are unbounded.

How would I create this layout effect?

score 11 · Accepted Answer · answered Mar 16 '19 at 00:21

Try giving specific size of children widgets. Positioned widget can't have flexible size of children.

So I gave screen width to Positioned(parent widget) and height 40. And you just need to give width of each children in Row. If you want to give them some flexible relationship, try MainAxisAlignment property inside Row widget.

Here is my example.

Positioned(
              width: MediaQuery.of(context).size.width,
              height: 40.0,
              left: -5.0,
              child: Container(
                color: Colors.grey,
                child: Row(
                  children: <Widget>[
                    Container(
                      color: Colors.green,
                      width: MediaQuery.of(context).size.width / 3,
                      child: Center(
                          child: Text("Green")
                      ),
                    ),
                    Container(
                      color: Colors.pink,
                      width: MediaQuery.of(context).size.width / 3,
                      child: Center(child: Text("Pink"))
                    ),
                    Container(
                      color: Colors.blue,
                      width: MediaQuery.of(context).size.width / 3,
                      child: Center(child: Text("Blue")),
                    )
                  ],
                ),
              ),
            ),

monalisa717 · Answer 2 · 2021-11-02T18:38:41.017

If you have a scenario where you don't want to set a fixed width for your children, you can set left and right both to 0 to stretch the Positioned element to the full width:

Positioned(
  left: 0,
  right: 0,
  bottom: 0,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      ElevatedButton(child: Text('Previous'), onPressed: () => {}),
      ElevatedButton(child: Text('Next'), onPressed: () => {}),
    ],
  ),
),

You can also achieve the same effect with Positioned.fill() (passing null or a value for properties you want to override. https://api.flutter.dev/flutter/widgets/Positioned/Positioned.fill.html https://youtu.be/EgtPleVwxBQ?t=66

Positioned.fill(
  top: null,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      ElevatedButton(child: Text('Previous'), onPressed: () => {}),
      ElevatedButton(child: Text('Next'), onPressed: () => {}),
    ],
  ),
),

left: 0, right: 0, is working for me. But what is its meaning? — Eslam Sameh Ahmed, Mar 21 '22 at 21:52
I'm not sure I could explain it honestly other than this is a known trick on web for CSS positioning, and flutter must calculate positions similarly. If that's the case, this guy takes a pretty good stab at explaining how web calculates it: https://stackoverflow.com/a/44488046/1411056 Also, note that `Positioned.fill` under the covers is defaulting `top`, `left`, `right` and `bottom` to 0, so my 2 proposed options do the exact same thing. — monalisa717, Mar 29 '22 at 02:48

Flutter UI: Absolute positioned element with fixed height and 100% width

2 Answers2