Stack wrap_content all the Widget inside?

Question

I have a Widget tree like this:

  Stack(
    children: [
      Text(
        '-',
        style: title,
      ),
      Positioned.fill(
        child: Center(
          child: Text(
            'FT',
            style: normal,
          ),
        ),
      )
    ],
  ),

I want the Stack to wrap_content both width and height to all the widget inside it like this:

But instead it look like this:

The Stack get the width and height from the un-fill Widget. If I wrap both Widget in Positioned.fill then the layout is empty. Any one know how to fix this? tks a lot.

Answer 1

You can use alignment property of Stack widget

Try this

     Stack(
            alignment: Alignment.center,
            children: [

              Text(
                'GAME',
                style: TextStyle(color: Colors.blue),
              ),
              Text(
                '  -  ',
                style: TextStyle(color: Colors.red),
              ),
            ],
          ),

OUTPUT

Answer 2

According to the docs:

The stack sizes itself to contain all the non-positioned children

So based on that we need to use a non-positioned child, though it still can be aligned with Align or an equivalent like Center.

Stack(
  children: [
    Center(
      child: Text(
        '  -  ',
      ),
    ),
    Center(
      child: Text(
        'FT',
      ),
    ),
  ],
);