Flutter App Development Tutorial for Beginners iOS | Android | Complex UI | Training App GetX

This is flutter app tutorial for beginners for training app development step by step using a complex UI with getx package for navigation for android and ios in 2021 from scratch. This would be a training or gym app ui. We covered how to make complex app ui using container and stack widget. You will also learn how to use overflowbox widget to draw complex ui shape to get rid of padding and margin.

Check out the second part with video player

Learn about Dart List and Map

Get the starter code from the link below

Full code and assets visit

Pay me $0.99 on youtube if you liked my contribution

Task management app

For flutter ios development if you need to buy apple computer check out the link below

Other getx tutorial

Follow me on twitter @dbestech

We have three complex ui sections in the app

1. on the home page we have the container using different borders and the container itself contains other widgets both in row and column
2. On the home page we have two images on each other, like overlapping. and Images sizes are different.
3. On the home we have two rows with two columns. In general in flutter we can not put two rows and columns next to each other. Two do that we used our own algorithms.

Important widgets used here are
1. container widget
2. stack widget
3. scaffold widget
4. boxdecoration
5. row and column widget
6. decorationImage
7. listview builder
8. getx navigation

We also covered how to put two columns next to each other using our algorithm. The algorithm is given below
int a = 2*i;
int b= 2*i+1;
using the above algorithm we can put two columns next to each other. You should run the algorithm in a for loop
If you have four items in your list then run it two times, if you have fifty items in your list then run it 25 times, you get the idea.

Follow me on twitter
Follow me on facebook

The JSON file
[
{
"title": "Glutes",
},
{
"title": "Abs",
},
{
"title": "Legs",
},
{
"title": "Arms",
},
{
"title": "Legs",
},
{
"title": "Arms",
},
{
"title": "Arms",
}
]

[mahmoudtokura]

This is awesome. I like tutorials that start from scratch and code line by line with explanations.
Makes it easier to follow along and remember.
I just subscribed. Nice job

[cubedev]

Seriously, l love this kind of tutorial...freindly for beginner

[josephstark]

I'm starting out flutter and you're helping me a lot.. Very friendly for beginners ❤️. Love you from Ghana 🇬🇭

[lmalasi]

Finally a good tutorial. Thank you! It opend my eyes on how to try and experiment with the widgets

[gururaser]

Today I was thinking about "Doing UI designs in flutter are hard for me?" and I am happy that I found this video because I am new in flutter and this video helped me a lot, This was the video that I've understood most and learned most . I couldn't reach so much documents about flutter because I think my English is not good enough for understanding documents but I understood this video easily) thanks for using not that hard English)
I would like to see more videos like this) Keep going

Greetings from Turkey

[thaliaamargianou]

Great explanation of everything! I liked the extra hint with the algorithm.. and the width calculation!!! Not very often seen that kind of staff in the video tutorials!!! Thanks for sharing your knowledge!!! Keep up the good work!!!

[AkashJadhavIT]

i like that you explain what you did and why you did it, not many videos out there you explins the details steps, thank you so much :), looking forward to next tutorials like this

[zainsamra]

thank you pro you make me save a lot of time .
your way in explaining i love it it's straight keep it that way .
i am about to launch my first app and i found what it was missing .
thank's keep it up .
Love from Sudan 🇸🇩🚀💕🌹

[eren]

teaching is an art and you are an artist. thanks for the video

[TheSclare]

A series about Firebase would be awesome!

[edbienes]

I'm a new fann!!! Very good teacher and quality coding organization.

[Calebol]

I am just starting with flutter and thanks to this video I can understand how to make screen design, better than official documentation thank you

[shnylljenner]

I have been working on same UI, it’s been three days so far, and it’s going very well, I have gone so far than this, but you have done great job though.

[Liv_Life]

This is the best ever tutorial in flutter for understanding the basic concepts and complex concept, from now I am big fan of you... :)

[felippemoniz]

You are a GREAT teacher! Your are so clear and friendly!

[RobertNicjoo]

Interesting on design part but you start to mess things up after stack widget (text child’s) and specially on listview builder (simply use gridview count)

[shivanshmishra]

Bro you should have more subs your content is amazing

[NewAreaTech]

You're so amazing 👏 bro, hope learning a lot of things from you

[mohammedshawket]

love you man ... I really like your style of explanations. I just subscribed. Nice job

[vishwajeetpawar]

SUBSCRIBED You are really a great teacher and really thanks for this content !!!