Reply to thread

Message: <blockquote data-quote="ackasanka" data-source="post: 25483956" data-attributes="member: 49052">Even though post me this in message, I thought to give the answers here, because some else also get benefit form this.So, here is the thing, Flutter is all about how you structure things, you don't need much complex CSS thingsPlease follow these steps, afterword tell me what is your out put okSteps:  01. Flutter is all about rows and columns, since you have web development experience then as i said in this thread at the first you have to learn how to map components in each langues with other langues. For example to understand row and column concept you juts refer this <a href="https://www.w3schools.com/w3css/w3css_grid.asp" target="_blank">W3.css</a>This is the best framework anyone can master css skills, most of people go for bootstrap, but just use this and you will see how easy bootstrap afterwardsIn here you can see each screen consist of 12 columns - this is the key concept hereIn W3css they refer column asw3-col m6 - this means if you put a class into a div element then it will have 6 column occupied in the total screen (means 50%). Here m means medium size screens ok<div class="w3-col m6">    6 columns on a medium screen  </div>If you put like this it means 6 columns on a small screen.<div class="w3-col s6">    6 columns on a small screen.  </div>Read the docs for more...So next , the row is a row means if you want one row with two columns each has width of 50% on screens then you have to do like this<div class="w3-row">  <div class="w3-col m6">    6 columns on medium screen  </div>  <div class="w3-col m6">    6 columns on medium screen  </div></div>[ATTACH=full]83431[/ATTACH]So if you understand this concept, then next step is map this with Flutter,02.  For that read the Rows, Columns and Container section in this documents. Remember all about Rows & Columns[ATTACH=full]83432[/ATTACH][ATTACH=full]83433[/ATTACH]So, how to understand a complex screen, just simple, think all as Rows & Columns like this[ATTACH=full]83434[/ATTACH][ATTACH=full]83435[/ATTACH]<a href="https://flutter.dev/docs/development/ui/layout" target="_blank">Row&Colums</a> <---Read more03. Next just view these entire YouTube playlist , each one has 1 min videos and this explain everything to you<a href="https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG" target="_blank">Flutter Widgets</a>04. After that, you need to look into here, here they tell how you map your CSS knowledge into Flutter widgets<a href="https://flutter.dev/docs/get-started/flutter-for/web-devs" target="_blank">WebToFlutterMapping</a>05. After all these if you really like to learn more then go for here, these are the best resource available to learnFirst : <a href="https://www.udacity.com/course/build-native-mobile-apps-with-flutter--ud905" target="_blank">Udacity Flutter</a> - this is free watch this firstSecond: <a href="https://www.udemy.com/course/flutter-bootcamp-with-dart/" target="_blank">Udemy Flutter</a> - this is paid but worth for your moneySo this is the way you have to learn, you have to understand how to map your existing languages knowledge into another languages.Enjoy learning..and post your first app here after trying these in Flutter</blockquote>

Verification: Winadiyakata thappara keeyak tibeda?

Top Bottom

Search

Latest ads

Reply to thread