Flutterflow for Social Feed
Here is the schematic I am using to try to understand things better.
Widget | Axis | Flex | Size |
---|---|---|---|
Column | Max | - | - |
-- Reply container | - | default | Height: null |
--- column | Min | - | - |
---- textfield | - | default | Width: null |
The goal of the social feed is to have the following behavior
- When the keyboard shows up, the reply contain scrolls up so it is visible
- When someone starts to type in the text field in the reply section, the reply section scrolls over the underlying social feed
- As the User types more in the text field, the text field expands, continuing to cover more and more of the social feed
- The entire social screen is scrollable, while the reply field stays the same
- The layouts of the reply screen is the same height, despite the size of the viewport or device
According to the flutter API, there are different attributes for the widgets, but there isn't clear "logic" of the behavior to help create the above.
The available API's are:
Containers
- Height/Width (#, inf, %, null)
- Elevation (may not be relevant, perhaps just for drop shadows)
- Min/Max W/H
- Scrollable / Non Scrollable (
SingleChildScrollView
)
Additional attributes for non-top level
Column
MainAxisSize
- Flexible, Expanded, Flex
The desired outcome is to understand the logic of what will happen for these attributes.
For example, Expanded
is described as filling all available space. But there isn't logic around what gets pushed "out" or not.
Or behavior when a Keyboard appears....