Horizontally centering Text widget inside Stack

Question

I need to center a Text widget inside a Stack widget.

This is my code for the Text widget:

 Positioned(
          top: alturaFondo + alturaAvatar/2,

          child:  Padding(
              padding: const EdgeInsets.all(8.0),
              child:
                  Text("username", textAlign: TextAlign.center, style: TextStyle(fontSize: 18,color: Colors.black54),)

              ),
            ),

I have tried putting the Text inside an Align widget, but not centering it either.

Ante Bule · Accepted Answer · 2022-07-26 13:07:40Z

1

You can do it like this

Stack(
  children: [
    Positioned.fill(
      child: Center(
        child: Text('centered'),
      ),
    )
  ],
)

answered Jul 26, 2022 at 13:07

Ante Bule

2,1561 gold badge7 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Md. Yeasin Sheikh · Accepted Answer · 2022-07-26 13:41:24Z

With Positioned(left:0,right:0) just horizontal-center

body: Stack(
  children: [
    Positioned(
      left: 0,
      right: 0,
      child: Text(
        "username",
        textAlign: TextAlign.center,
        style: TextStyle(fontSize: 18, color: Colors.black54),
      ),
    ),
  ],
),

You can use just Center

Stack(
  children: [
    Center(
      child: Text(
        "username",
        textAlign: TextAlign.center,
        style: TextStyle(fontSize: 18, color: Colors.black54),
      ),
    ),
  ],
),

with Aling widget,

Stack(
  children: [
    Align(
      alignment: Alignment.center,// default also center
      child: Text(
        "username",
        textAlign: TextAlign.center,
        style: TextStyle(fontSize: 18, color: Colors.black54),
      ),
    ),
  ],
),

Collectives™ on Stack Overflow

Horizontally centering Text widget inside Stack

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related