List within Tab bar in a Stack: avoiding overflow + let user expand it

Hi.
I'm creating a "diary" style page with multiple sections.

I did it this way:

Stack (to overlap picture) -> Container (for style) -> Tab bar -> ListView

My main problem is that the container, which I'd like to be close to the navbar, overflows at the bottom. I can't set a fixed height, not even %, because it's different from device to device. I need it to be perfectly adjacent to the navbar, not leaving any "safe space". I'm sure there's a way.

My second thought is: on certain screen sizes the tab bar is big enough, but on smaller screens it's too small to be comfortable usable. For this reason and also for immersion purposes, it would be cool if they could swipe up above the list (let's say above menus) to trigger a little animation that expands the tab bar full screen (as seen here, which I did just setting the main column to "scrollable" and manually scroll all the way down)

Anyone has a guess? 🙌🏻

I checked the documentation about overflows, nothing about this complex (at least to me 🥲) case.
I searched here, and as seen in a community answer, I set the main column scrollable, achieving a partial solution but not ideal (FlutterFlow warns me because I have two main objects with scroll activated, the other one being ListView by default) and it's not what I'm looking for. I'd like the bottom section to "swipe up" in one swipe, giving the sensation of expanding over the diary picture, not scrolling a still page blog-style (which also requires more "thumb action")
I tried to fit to page every above column, stack, object, adding new types on top to see if the container could be "contained" (hah) but nothing. It's uncontainable.