CODEWITHSUNDEEP
flutter
Alexei
Alexei

Reputation: 15664

Why can't alignment by Align widget?

I need to align "Scan check" in the center of Text widget. I try widget Align but it not help.

snippet:

 Widget _createScanCheckContainer() {
    return new Container(
        margin: const EdgeInsets.only(top: Constants.DEFAULT_MARGIN),
        height: 56.0,
        color: Color(Constants.COLOR_PRIMARY),
        child: Row(children: [
          new Align(
              alignment: Alignment.center,
              child: Text(
                "Scan check",
                style: TextStyle(
                    fontSize: 19.0, color: Colors.white),
              ))
        ]));
  }

Here result.

enter image description here

Why Scan check is not on the center?

Upvotes: 0

Views: 62

Answers (2)

Kirill Matrosov
Kirill Matrosov

Reputation: 6000

You don't need Align here, because its size is determined in accordance with its child.

Therefore it does not expand to Row's width. enter image description here

You should use mainAxisAlignment property for Row to align your Text

Row(
    mainAxisAlignment: MainAxisAlignment.center, 
    children: [
          Text(
            "Scan check",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 19.0, color: Colors.white),
          )
        ]
)

enter image description here

Upvotes: 1

Mohamed Abdou
Mohamed Abdou

Reputation: 451

Make the row center align all its children horizontally.

Widget _createScanCheckContainer() {
    return new Container(
        margin: const EdgeInsets.only(top: Constants.DEFAULT_MARGIN),
        height: 56.0,
        color: Color(Constants.COLOR_PRIMARY),
        child: Row(children: [
          new Align(
              alignment: Alignment.center,
              child: Text(
                "Scan check",
                style: TextStyle(
                    fontSize: 19.0, color: Colors.white),
              ))
        ], mainAxisAlignment: MainAxisAlignment.center));
  }

Upvotes: 1

Related Questions