Issue with Long Text Not Wrapping to the Next Line on iOS Devices

[cnrsbtogll]

Can we access your project?

• [X] 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

Hello, I’m developing an app with FlutterFlow and encountering an issue displaying long text properly on iOS devices. On Android, the text wraps to the next line when it exceeds the screen width, displaying as expected. However, on iOS, the text field does not expand downward, causing all text to stack in a single line, making it unreadable.

For example:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.

On iOS, this text does not wrap to the next line even when it exceeds screen width, resulting in a cramped display.

Is there a specific setting or adjustment in FlutterFlow to enable text wrapping on iOS devices? Any guidance would be greatly appreciated!

Thank you!

What have you tried so far? Container and Text Field Resizing: Attempted different container sizes and alignment settings to see if the text area would expand downward on iOS.

Padding and Margin Adjustments: Adjusted padding and margin around the text field to verify if spacing was affecting the wrap behavior.

Testing with Shorter Text: Tried with shorter text to confirm it wasn’t due to the length, but even moderately long text displayed the same behavior on iOS.

Cross-Platform Check: Verified that it’s only occurring on iOS devices, as Android displays the text correctly with line wrapping.

Expected Behavior

On Android, the text wraps to the next line when it exceeds the screen width, displaying as expected

Steps to Reproduce

Hello, I’m developing an app with FlutterFlow and encountering an issue displaying long text properly on iOS devices. On Android, the text wraps to the next line when it exceeds the screen width, displaying as expected. However, on iOS, the text field does not expand downward, causing all text to stack in a single line, making it unreadable.

For example:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.

On iOS, this text does not wrap to the next line even when it exceeds screen width, resulting in a cramped display.

Is there a specific setting or adjustment in FlutterFlow to enable text wrapping on iOS devices? Any guidance would be greatly appreciated!

Thank you!

What have you tried so far? Container and Text Field Resizing: Attempted different container sizes and alignment settings to see if the text area would expand downward on iOS.

Padding and Margin Adjustments: Adjusted padding and margin around the text field to verify if spacing was affecting the wrap behavior.

Testing with Shorter Text: Tried with shorter text to confirm it wasn’t due to the length, but even moderately long text displayed the same behavior on iOS.

Cross-Platform Check: Verified that it’s only occurring on iOS devices, as Android displays the text correctly with line wrapping.

Reproducible from Blank

• [ ] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

ITFTzcmA38lOxLhc+Kn6a8JoiWMvI0MdXOczitVEew4bCIj4EZoie877bRZCOOKzaH5IG1H/inwy0Nb8veDlC/kCOUyYbr1y+ZYJahPPbEClV5i0BZC8OH8nP+VWJ2mP05+3uRZ4Vc5tR3Bn706mHdy+cz2Cf9qOYwx5e6fDbOY=

Visual documentation

Environment

- FlutterFlow version: 3.24.2
- Platform: ios
- Browser name and version: chrome
- Operating system and version affected: ios 15 promax simulator

Additional Information

No response

[Alezanello]

Hello!

Have you tried placing the text inside a container and leaving the container’s height and width unset to allow the text to adapt freely?

You can also check our documentation for a similar example here: Text Widget Guide

Let us know if this helps!

[cnrsbtogll]

Yes, I tried wrapping it in a container and leaving the height and width values unset, but it didn’t resolve the issue on iOS.

[github-actions[bot]]

This issue is stale because it has been open for 7 days with no activity. If there are no further updates, a team member will close the issue.

[cnrsbtogll]

I was using Gotham as a font. This font is not recognized by iOS. I switched to Poppins font and my problem was fixed.