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?

Answer 1

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

Answer 2

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: () => {}),
    ],
  ),
),