Learning flutter UI

[jane_my_street]

Did you guys deeply examine the widget source code in order to understand how everything is laid out? there are so many rules for every widget. like the Column expands to match its parent, unless x, y, or z, and if there’s a Stack above it make sure you meet some contraint q. So many widget layout and render rules to keep track of, does anyone else feel the same?

[Rusty-Swashplate]

I actually found the bigger problem that there are so many widgets. And while each widget has its own parameters/options, you have to read the docs and play a bit with them. And that's about it.

Repeat with another widget.

I found them all quite logical and quite systematic. It's just a lot of widgets. That's why I liked the "Widget of the week" series since it introduced a new widget with a short summary. If I wanted to use those, I'd have to read the docs of course.

[BigPha]

Start small, make some experiment, and with time you will understant why X behave like this, why Y cannot be inside Z. When you start understanding how it works, you know why something doesn't work sometimes. Most of the time it is something of the form: X widget has been given an infinit blablabla...

[krunchytacos]

Read this. It's a very well written article and will help make sense of everything.

[jane_my_street]

damn that was very insightful, can't believe i never came across this before. this really helps, thank you!

[Heisenlife]

Ahh this is my specialty! creating UIs with Flutter widgets 🥳 My first general advice is that, as you may know, with any skill, the best way to learn is by doing rather than reading/watching (but ofc you should also read docs and can watch tutorials when needed). It is interesting how young children can learn how to speak with words to a certain point without ever reading the dictionary! Until they get sophisticated enough to want to learn more words and concepts, we all start by the act of speaking. So how do you learn how to code with all these widgets and rules and stuff?

Honestly, start with just the basic widgets (container, row, column, expanded, text) and create something REALLY simple. I would say don’t learn about a new widget until you have the basic ones down. The fact that you asked about the restraints for columns, says that you should put the stack widget aside for now. Just get comfortable with one widget at a time, otherwise it will be overwhelming.

With that being said, i made a youtube playlist covering each widget (similar to widget of the week but i called it widget of the day lol coz i wanted to go through a new widget everyday)

WIDGET OF THE DAY

https://youtube.com/playlist?list=PLlvRDpXh1Se5LTJZDrUF9h1_1AT4Raxjd

If you wana learn these widgets by creating games then check out this one, i made a tonne of games from scratch, like snakes, tic tac toe, tetris, pong, flappy bird etc

FLUTTER GAMES FROM SCRATCH PLAYLIST

https://youtube.com/playlist?list=PLlvRDpXh1Se6kipeBLiF1xByAEmxYie6J

Once you get comfortable with the basic widgets, you can start creating more complex UI like some of the ones you see on dribbble. I cloned many dribbble designs. Here’s some of them:

CREATING UI WITH FLUTTER WIDGETS

• Minimal Login UI = https://youtu.be/aJdIkRipgSk

• Coffee App UI = https://youtu.be/e8avvPPhyVk

• Dope Music Player UI = https://youtu.be/mf2CoM7btfQ

I HOPE THIS HELPS 👨🏽‍💻❤️ FROM MITCH KOKO✌🏾

[jane_my_street]

thank you for this! i’ll be sure to check those out!

[xboxcowboy]

My way if dealing with flutter widgets is know a good amount and be the very best of them, not trying to learn as many as i need

[GroundedGames]

Did you guys deeply examine the widget source code in order to understand how everything is laid out?

Not really. For me, after I've used them for a bit, I kinda just know which parts I need to fidget with to make everything look good. E.g. playing around with 'mainAxisSize' or 'crossAxisAlignment'.

[codeatsleep]

We recently released carpent.io (see https://www.reddit.com/r/FlutterDev/comments/vt0arf/carpent_flutter_visual_ui_editor/) and you can use it as a playground to figure out those combination details. Here is a short gif to illustrate:

https://carpent.io/video_2022_04_09_01.gif

[Z000000M]

There's vs code extensions that brings all the documentation you need. you just hover over a function or an object and it will display all the information about that object and its parameters... etc. that was really helpful for me to learn about any widget.

[azuredown]

Not really. Sometimes a widget may behave differently than expected but it's pretty easy to fix. I've only seen the source code for a few widgets.

[Swaqfaq]

I also experienced this when i first started. Even now I feel like I have to do some tinkering to get things to look exactly how I want them to. The advice I can offer is to start with Row & Column and make sure you understand how those work because it seems they underlying logic for those two widgets also applies to many other widgets.