Constraints go down. Sizes go up. Parent sets position.
The notion behind this phrase is key if you're a developer that writes code that effectively generates HTML and CSS. Sizing and spacing is completely different in Flutter and forgetting how sizing works in HTML and CSS is the best way of keeping you enjoying Flutter.
This article from the Flutter docs is mandatory reading in your journey to becoming a layout genius. It will stop a lot of code smell (for which there'll be a lot in your first few components) and once again, keep you enjoying Flutter.
In my Flutter journey, working during the day with React and then the odd evening playing with Flutter, I found switching between the two sizing systems caused me to fill up the swear jar quite a bit. The root cause however, was that I'm kept trying to solve issues with a HTML brain. Don't do that.
There's not much more that I can add compared to what's already in the documentation, so seriously, please read it!
I'll add more to this list when I come around to issues
How big is this space?
Don't be tempted to use
MediaQuery.sizeOf(context) to work out how big a section of your app is, as this command will give you the size of the entire app (obviously this is okay if you really want to know this). What we really need is
Ellipsis don't work
Imagine you have the following:
One may expect this to just work out of the box, but it won't and this StackOverflow answer explains why: one needs to wrap the widget in a
Expanded to let your widget know that it's ok for it to be narrower than its intrinsic width.
Wrap widget makes everything full width
If you have a content in a
Row that you want to automatically wrap on to the next line, you can use the
Wrap widget. However, you may find that instead of having everything wrap on to the next line, all of the
children become full width. Inspect your
children to ensure that the
Row has a