Layout Issue: Expanded Widget Overlapping when Keyboard Active

[Alexander Yurowkin]

Hello,

I am working on creating a page which will allow users to input into dynamically generated textfield boxes to search through a list of locations and select a specific location on tap.

SETUP:

Currently, the page build contains a Scaffold where the body is a column split into two Expanded widgets. 

The first expanded widget contains a ListView.builder which creates a new input textfield at the end of the list once the last textfield is filled.

The second expanded widget contains a ListView.builder which generates a results list for the search and allows the user to tap their desired location.

ISSUE:

We are running into two connected issues. 

First, for the top three textfields, there appears to be some buffer space in the first listview that pushes search output lower and only displays the first search result part way down the screen. We initially attempted to fix this with the Align widget and changing the mainAxisSize and alignment of the column but were not able to resolve the spacing issue. This is a minor visual bug and not as important as the second issue.

Second, once the first listview reaches the 4th input textField, the search result listview starts to overlap the textfield, making it impossible to click into the next textfield until the keyboard overlay is exited. With the keyboard out of view, there are no overlapping issues and only the first issue persists. When the keyboard is in view, the expanded widgets attempt to split the available space above the top of the keyboard between the two listviews but overlaps the listviews and limits the functionality of both. 

Is there are another widget I can use or a parameter I am not using that will allow the already completed textfields to be scrolled off screen and give more room for the search results? Is there a more proper layout scheme to use for this use case? Please let me know what can be done to fix these issues.

Thank you,

Alexander Yurowkin