Positioning Row at bottom of stack Flutter

Question

I have a stack with a fixed height, I want to place a row that contains multiple elements at the bottom of this stack.

I wrapped my row that has

mainAxisAlignment: MainAxisAlignment.center

as a property in a positioned element, so the code looks like this now:

Stack(
  children: [
    //Other children,
    Positioned(
      bottom: 0,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          //children here
        ],
      ),
    ),
  ],
),

The weird thing is that before the row was inside a positioned element it took up the entire width of the screen. Now the row only has the width of its children. This is a problem since the children are now no longer centered.

Does anyone know what happens here and how to position a row at the bottom of a stack without shrinking the row to no longer be the width of the screen?

Accountant

Answer 1

You can use Align to bottom center your Row like this:

Container(
      height: 300,
      width: 400,
      child: Stack(
        children: [
          Positioned.fill(
            child: Container(
              color: Colors.cyan,
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              color: Colors.purple,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    width: 100,
                    height: 50,
                    color: Colors.red,
                    alignment: Alignment.bottomCenter,
                    child: Text('row child 1'),
                  ),
                  Container(
                    width: 100,
                    height: 50,
                    color: Colors.yellow,
                    alignment: Alignment.bottomCenter,
                    child: Text('row child 2'),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );

Extinctive

For some weird reason it just does not push it down – Accountant

@Accountant Push the row widget down ? – Extinctive

Answer 2

You should add width to your Positioned.

Positioned(
  bottom: 0, 
  width: MediaQuery.of(context).size.width, // <<<HERE - max width of the screen
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      //children here
    ],
  ),
),

Incrust

Answer 3

You can just use the crossAxisAlignment property in the Row. example below:

 child: Stack(
    children: [
      Image.asset('images/image.png'),
      Center(
        child: Row(
        **crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Text(
              'Your String',
              style: TextStyles.bold(
                color: kWhiteShadeColor,
                fontSize: 16.0,
              ),
            ),
            Row(
              children: [
                Text(
                  'Your string',
                  style: TextStyles.medium(
                    color: kWhiteShadeColor,
                    fontSize: 14.0,
                  ),
                ),
                const SizedBox(
                  width: 20.0,
                ),
                const Icon(
                  Icons.star,
                  size: 15.0,
                  color: kSecondaryColor,
                ),
                Text(
                  '5.0',
                  style: TextStyles.bold(
                    color: kWhiteShadeColor,
                    fontSize: 14.0,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ],
  ),

Tautonym