Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align Column in Center but align Text to left of screen in Flutter

Tags:

flutter

dart

Sorry for asking such a trivial question, but I am at my wits' end. I have just spent 3 hours trying to get a column to align in the center, which I couldn't manage to do without a Container, and now I cannot put my text to the left of the screen.

To explain it better, I have a column that I want in the center of my app. At the top there is text, which is moved to the left, but every other widget within the column is centered.

For the column I have tried mainAxisAlign and crossAxisAlign. The former does absolutely nothing, and the latter goes in the wrong direction (centers it vertically rather than horizontally, which is not what I want). I have resorted to using a Container after multiple other attempts, but now i cannot move my Text to the left. I used textAlign: TextAlign.Left and tried to expand the Container to fit the screen by putting it in a SizedBox.expand(), and yet nothing happens.

Can anyone please explain how you center Columns, and then align the text to the left?

This is what I have tried so far:

return SizedBox.expand(
                child: Container(
                alignment: Alignment.center,
                child: Column(
                    children:
                    [
                        Text(
                            text,
                            style: TextStyle(
                                fontSize: 25.0,
                            ),
                            textAlign: TextAlign.left,
                        ),
                        CircularProgressIndicator(
                            backgroundColor: Colors.white10,
                            strokeWidth: 5,
                        )
                    ],
                    crossAxisAlignment: CrossAxisAlignment.center,
                ),
                margin: EdgeInsets.all(10.0),
            )
        );

Just in case I'm explaining this terribly, here is a basic picture Thanks!

like image 697
Ironstone Avatar asked Dec 07 '22 10:12

Ironstone


1 Answers

use Align() widget

Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Align(
            alignment: Alignment.centerLeft,
            child: 
          Text(
              'text',
            ),
          ),
        ],
      ),
like image 174
Talha Javed Khan Avatar answered Jun 17 '23 13:06

Talha Javed Khan