Justified text not working

[KlausGrosser]

Has your issue been reported?

• I have searched the existing issues and confirm it has not been reported.
• I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

I have a text block and when I apply the justified alignment, the UI builder shows an appropriate justification, but when the app is in test mode, the justification is not the same and has excessive spacing.

UI builder:

Test mode:

Expected Behavior

The justification of text should look the same in all places as the UI builder.

Steps To Reproduce

1. Create a text block
2. Add text
3. Justify test
4. Run app in test mode

Bug Report Code

ITFXkvHlvIZNrsRE7arbKPlKhSgwFjsaU40V0tcbdEsaIZSrOpkie+r+VxBVcMeUfFV+DFb/inox09bJkd7qGPJfBxWqQoNozYdQWzryWnm6VKqDO6uVOHZCI8JhChG8yqS7rgl+XdZeWGwgw1r/cq3qNleeY8aSfxBlZ7vfcPo=

Context

Texts needs to look good so app can be launched.

Additional info

No response

Environment

- FlutterFlow version: v1.1.52 Flutter 3.7.3
- Platform: MacOS Desktop
- Browser name and version: Version 111.0.5563.64 (Official Build) (x86_64)
- Operating system and version affected: macOS Monterey 12.6

[hariprasadms]

Hi @KlausGrosser - Thanks for reporting the issue. I can test the steps and confirm that it is working fine. In your app, in test mode, I can see that text widget alignment style is set to 'justify', thats the reason the text content is distributed for available space ( This is the expected behaviour of 'Justify' alignment style ). In the above image from builder, I think it was taken when alignment is set to 'Align left' In the editor. I have tested the same text content with the property set to 'Align left' and it shows as below.

To get the expected result, you should change the alignment style to 'Align left'. Please check and confirm. Thanks

[agreaves]

Hi @KlausGrosser, thanks for the bug report! In this case, the difference is actually between how the text is rendered in MacOS vs Web (Test mode). This is due to Flutter's underlying text rendering. What you see in the MacOS version is what you would see on native iOS or Android, but Web seems to be rendered differently when justified.

Unfortunately at the moment there isn't much we can do, as this arises from Flutter itself. Sorry about that! Closing this issue for now, but if you're not targeting web then this won't be an issue for you, otherwise you'll likely have to left align.