Row contents in flutter not appearing in center despite MainAxisAlignment.center property

user_17879169 0
Viewed 27

in a row in flutter, there's a text which i want in the center. I want it to be from x length from top so I have used positioned. But why is the text not coming in the center? I can't make out. the text is glued to the left of the screen and not changing its position even if i do MainAxisAlignment.end

  Positioned(
                    top: MediaQuery.of(context).size.height * .08,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          "Add Offer",
                        ),
                      ],
                    ),
                  ),
dart flutter
3 Answers

Since you have a positioned widget I assume that you are using a stack. If you wish to center align a widget in a Positioned you can add left 0 and right 0 too. Like

Positioned(
     left: 0,
     right: 0,
     top: MediaQuery.of(context).size.height * .08,
          child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                 children: [
                     Text(
                       "Add Offer",
                      ),
                 ],
           ),
 ),
user_171690370

Try one of these two solutions:

1. First solution:

    Positioned(
        top: MediaQuery.of(context).size.height * .08,
        child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Text(
                    "Add Offer",
                    textAlign: TextAlign.center, // <- Add this.
                 ),
            ],
        ),
    ),

2. Second solution:

    Positioned(
        top: MediaQuery.of(context).size.height * .08,
        child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Expanded( // <- Wrap your Text widget into an Expandable.
                    child: Text(
                        "Add Offer",
                         textAlign: TextAlign.center, // <- Add this.
                    ),
                ),
            ],
        ),
    ),
user_141040200

Just use

left: 0,
right: 0,

inside your Positioned() Widget

user_51977120
Related