I wonder if you have tips you rely on when building pages or components.
I'm just getting started with FlutterFlow, and haven't done any mobile dev in ages.
One of my main struggle with FlutterFlow is to understand how I should be building my pages and component, this clearly takes up most of my time, as I almost never get it right the first time.
I'm constantly frustrated with clicking options which are reverted automatically because they would have caused a crash. I often don't understand the reason.
I've read and watched https://docs.flutterflow.io/widgets-and-components/ui-and-layout-101, which helped build some strong foundations for my mental model, but it's not enough. I don't have a good mental model at this point, and the whole experience could be improved.
I come from Web development, and there are many subtle differences about how to reason about elements, that make the transition not-so-smooth.
Example use-case
I'm not looking for a solution to this example, but I'm looking at the "journey" to arrive to the solution.
This UI is uninteresting, and still presented a challenge to me to get it right. (at time of writing, I'm not satisfied with my solution, I'd have built something better if it was for web)
Goal: Having to come up with the following design (Figma)
My unsatisfactory solution:
Here is the tree I came up with:
I didn't do that on a single go, I first did something like this:
Container
Column
Text
Image
Button
That's how I'd have built it for web, I'd probably have only a single container that would also act as a column, though.
Although, I felt like I needed to have the Image contained in its own Container at some point, because it wouldn't take the right height. I eventually figured out the default height was 100px and what was messing things up.
My issue with this solution is that I had to set a fixed height of 400px on the Container, and I still can't figure out why I have to do that. I don't want to have to set any height (except for the image), everything should just take the place it needs without having to be explicit, as it's how I'd do it for web.
I tried plenty of variations, I didn't have the Row at first, but then added it to try something and now when I try moving the Container to the "root", it crashes. I don't understand the Row's purpose here, I feel like it's unnecessary. (and yet, can't seem to do without it)
The summary of this little exercise is that I don't have a good intuition (or "mental model") about how to build this thing, I had to fail and try too many variations to my own taste, spent way too much time on this, and yet I'm still not satisfied about the result, as adding another element below could be hidden or cut, due to the fixed height of the Container.
So, I'm interested in learning how to think "the right way" about those things. For people who have the ability the build UI "the right way" rather fast, what are the advices and tips worth sharing? How do you reason about all of that?