Text fields are taller on actual device than shown in flutterflow

[halvorot]

Expected behavior (required)

I would expect the text fields to be the same hight in the flutterflow builder view, the run/test mode, and on the actual device (iphone 13 pro).

Current behavior (required)

But it seems that the text fields are much taller on the actual device than in build and run/test mode in the browser. This makes it so that the height of containers and textfields look like they match in the editor but not on the actual device. It also makes it so that it looks like there is more vertical space than there is on the actual device on pages that have text fields

To Reproduce (required)

To reproduce:

1. Create new page
2. Add row widget
3. Add textfield widget inside row
4. Add container widget inside row
5. Set the height of the container so that it looks equal to the text field (in my case 55)
6. Run on actual device
7. observe that the container now is not the same height as the text field.

Bug Report Code (required, generate from Widget Tree)

IT4ozMrqx5BOseFK0L6JccBKjSQ4Ql9+bZIalcpBay0jF7KuDLMqY8/RVERvTb2rYW9YP06amWoW06nqiOOWV/YpAyeCbYRe+qtyazvwRkCjbqatU/HUACkbeacOQSj6

Context (required)

Screenshots / recordings

Content padding for the Price textfield:

Your environment

• Version of FlutterFlow used: v3.0 january 19
• Platform (e.g. Web, MacOS Desktop): web (device is iphone 13 pro)
• Browser name and version: chrome
• Operating system and version (desktop or mobile): desktop

[Pepino-GR]

Hi halvorot,

put each of the elements inside your row in its own container .

[Pepino-GR]

And put the Row inside a container

[halvorot]

I understand that I can "force" the elements to be the same height. This also works by just setting the height of the right elemet to 65 so that it looks taller in the builder and run/test mode but is the same size on actual device.

But the root problem that I am trying to highlight is that there is a difference between what is in the builder/test/run mode and what it looks like on the actual device. And I believe that is a bug

[Pepino-GR]

This is not the behaviour on different device sizes. The builder/test/run works on a web based output and is different from physical devices with different device sizes.

You can find more information on the following Websites
https://docs.flutterflow.io/widgets-and-components/ui-and-layout-101
https://blog.flutterflow.io/preventing-layout-overflows/

[wenkaifan0720]

Hi @halvorot. Have you tried enabling the device frame in the UI builder/preview mode and see if the two UI become consistent? On a real phone the top bar (with camera, battery info, etc) will push the UI downward (this is called the SafeArea).

[agreaves]

Closing due to inactivity.