💬
Get Help
SG
Sveva Guida

Issue with overflows and positioning of elements

Widgets & Design

I have just started exploring FlutterFlow since a few weeks. I am not a Flutter developer however I can build backends with .Net.

I am struggling to understand how the positioning and, generally speaking the overflows works. I used a template to build a login page and changed a little bit. The page is shown in the login.png attachment. In the widget_tree.png attachment the widget tree is shown. From a visual perspective this is exactly what I would like to achieve.

When launching it on the device however, I am facing some problems:

  1. Depending on the height of the dataColumn the device shows a message saying "Bottom overflowed by 14 pixels"

  2. When #1 happens I am not able to scroll the form while the keyboard is showing

login.png
72.29KB

widget_tree.png
38.85KB

What have you tried so far?

Actually the widget three has 4 nested columns. The scrolling column is dataColumn. If I change the scrolling column to any other of the existing then the page show differently, e.g. I loose the ability to stick the actionColumn on the bottom of the page.

I don't have any fixed pixel height element but I am using padding around the widgets for proper spacing.

I am also attaching the screenshot of the error that appear in the developer console .

I have found a post on the FlutterFlow blog that explain how to prevent overflows. However I am not able to find the Show Overflows button anywhere...

Did you check FlutterFlow's Documentation for this topic?
Yes
1