Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Flutter Align: not working for multiple line text

Flutter Align right: not align right for multiple line text.

       SizedBox(
              width: 108,
              child: Align(
                  alignment: Alignment.topRight,
                  child: Padding(
                    padding: const EdgeInsets.only(right: 16.0),
                    child: Text('Billing Address:'),
                  )),
            );

When the text "Billing Address:" is rendered as two lines, it is aligned left, not right.

---------------
Billing       |
Address:      |
---------------

It works for one line, e.g., "Name:"

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

---------------
        Name: |
---------------

>Solution :

In the "Name:" case, the Text widget takes only the required width for its text to fit, so it looks correctly aligned to the top-right of the parent widget.

In the "Billing Address:" case, the Text widget has its size reached the maximum width available, so it’s actually aligned to the top-right correctly by the Align widget. However, the internal text itself is still aligned to the start (left, in LTR direction) by default.

You have to align the text inside the Text widget itself, by setting the textAlign to TextAlign.end (when using LTR direction):

Text(
  // ...
  textAlign: TextAlign.end,
)
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading