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?

Solution

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")),
                    )
                  ],
                ),
              ),
            ),

Comments

[Eslam Sameh Ahmed]

left: 0, right: 0, is working for me. But what is its meaning?

[monalisa717]

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