ahmadajah03 Sat Oct 2021 1 year ago

Flutter App Development Tutorial For Beginners Ios | Android | Complex Ui | Training App Getx 2021

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
https://youtu.be/OXQ5ee6p9ZA

Learn about Dart List and Map
https://youtu.be/Uz0FgKxXt2o

Get the starter code from the link below
https://www.dbestech.com/tutorials/flutter-app-development-tutorial-for-beginners-step-by-step-2021

Full code and assets visit
Check out https://www.patreon.com/dbestech

Pay me $0.99 on youtube if you liked my contribution
https://www.paypal.com/paypalme/dbestech

For flutter ios development if you need to buy apple computer check out the link below
https://amzn.to/3nrE6Ii

Apple EarPods with Lightning Connector - White
https://amzn.to/39iwfVp

The 7 Habits of Highly Effective People: Powerful Lessons in Personal Change
https://amzn.to/3lFwxv5

Other getx tutorial
https://youtu.be/M0OwOYPFkrM

Follow me on twitter @dbestech
Follow me on facebook page https://www.facebook.com/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
https://twitter.com/dbestech
Follow me on facebook
https://facebook.com/dbestech
flutter app development build flutter app flutter app flutter app step by step flutter app for beginners flutter app development for beginners flutter getx app flutter video app build flutter app from scratch flutter for beginners flutter tutorials for beginners 2021 dart flutter tutorial flutter