VS Code Extensions Every FLUTTER Developer Should Have + Bonus Theme & Fonts

developing apps is hard enough doing repetitive tasks writing all the code manually and wasting time by opening the browser whenever you want to add a dependency to the pops pajama file to copy a version of dart package isn't productive at all you want to be in the programming flow as long as possible and not to be disturbed by mundane tasks Oh [Music] welcome to ESL coder the only thing which you cannot abolish are the frequent trips to Stack Overflow and filtering through the works on my machine responses over there oh well I guess that's just the nature of being a developer as for the other things though in this tutorial we are going to take a look at how to have higher productivity as a flatter developer by using certain extensions for vs code and be sure to check out the written tutorial from the link in the description where you can find everything what's going on in this video and also links to all of the extensions and themes and fonts and all of that good stuff let's talk about the obvious things first and those are flutter and the dart extension so just go into the extension tab in vs code and search for flutter and dart and I assume that you already have these two extensions installed but still I receive quite a few comments on my tutorials asking me how do I wrap a widget with another one so easily and so on so it's clear that they just do not know either how to use their extensions or they do not have the flutter extension installed so just make sure you have dart extension and flutter extension installed and also there is one setting which you should definitely enable because currently it's not enabled by default that's because this setting is currently only experimental and that is these nice guides on the side these white lines they make parent-child relationships in flutter visible at first glance which is definitely a good thing because with flutter there is just so much going on in the code that it can become quite messy even if you structure your code properly and these flurry UI guides help a lot to enable them go to the settings by hitting ctrl + comma or command + , I believe on the Mac and just search for guides and you want to make sure that you enable preview flutter UI guides and maybe even preview flutter UI guides custom tracking although only the first setting is required and once you restart vyas code you will be able to see these awesome UI guides another extension which you definitely must have if you are a flutter developer or really any kind of developer is tap out tap out allows you to really tap out of brackets and parentheses it will save you a lot of time because reaching for the arrow keys is a pain what do I mean by that well whenever you are inside some kind of a parenthesis or before a parenthesis and you want to go to the other side so to say you have to hit an arrow key but with tap out you can also hit the tab key this also applies to strings so let's just say we have some string here and now I can here just app key and again tap key and I have tapped out of the quotation mark and also out of the parentheses which is definitely nice it also works with square brackets so you can tap out even out of lists and also out of maps so you are going to love this extension in the next extension and the list is top-spec assist and pop swag assist is an awesome extension for adding dependencies to dart projects or to flutter projects because with it you do not have to leave the comfort of vs code in order to add some kind of a dependency from pub dot dev site because usually what you do is you go to top the gamma for your project and you open up Bob da dev and you search for a package let's say flutter block now I'm going to do it the old-fashioned way Here I am in pub dad F and I searched for flutter block I've already searched for it before and i select it and i will go to installing and now copy the dependency string and then go over back to vs code and paste this dependency under the list of dependencies this is quite a long process which takes you out of vs code you need to search on another website and it is overall not really time friendly if you want a save time obviously it's just like five seconds of time that you can say but still five seconds or 5 seconds and also you have to open a new tab in the browser and so on so really it's just not the best way to do things however if you have the pub spec assist extension installed you can just go to pops pagamo and hit ctrl shift P or command shift P to open up the command palette of vs code and now you can just hit up spec assist and dependency you can possibly search for a package name so we can just say block right and we can choose from multiple packages which have the name which we have searched for inside of them so we want to select flutter block and now flora blog was added to the dependencies and we did not need to leave the comfort of the vs cold now we can just save the path spec diamo file and all of the dependencies will be gotten for us using the flutter extension or maybe it's actually the door extension that does the fetching of the packages but either way we have all the dependencies here without leaving vs code using a spec assist the next extension on the list is maybe an obvious one for some of you but still I have to include it in this list because without it flower development is just much harder that extension is awesome flutter snippets because awesome flutter snippets adds a lot of snippets for example status widget and stateful widget and yes some of these snippets like this status widget and stateful which--it are already available from the regular flower extension but awesome flower snippets has much more to offer for example you can create a string builder animated builder also you can have a future builder and even a list builder so this view builder right here in just a matter of few keystrokes so let's test it out inside the column for example we are going to add another child which will be 3 builder here we go we can add stream initial data and its child and we're good to go we can also add a list builder or ListView B which is the shortcut for adding LSBU builder are also a future builder future B LDR and we have a future builder over here really in a matter of keystrokes a few keystrokes we can add really complex widget into our apps without needing to remember their precise syntax without needing to write redundant boilerplate code ourselves what's now delete what we have added here because we do not need these three widgets the next extension which you should definitely have if you are any kind of a developer is advanced new file how do you usually create new files well you go into the Explorer and you either right click and select new file or you can also click here to create a new file and also you have to create new folders and then inside that folder you create new file so new file that dart for example but this process can be simplified you still going to have to write what you want to create yourself but you will not have to use the mouse and using the mouse is somewhat limiting because you have your hands on the keyboard and you just have to pick up your right hand place it on the mouse move the mouse cursor and open up your folders if you have multiple folders maybe you have collapsed them before and you have to open them and then you can click on them so it's really not all that great to create folders and files with a mouse however if you have the advanced new file extension you can just hit ctrl alt N or command alt and on Mac and now you can choose the path to which the file will be relative to so for example a label then you can enter a file name or a relative path to a file so you can also basically create new folders so let's create a folder called new folder and then inside of it will be a file called new file again so new falda dart and hit enter and a new folder with a new file will be created for you you are automatically placed into the new file where you can enter some code using for example the awesome flower snippets to create a material up here and you're good to go you did not have to place your hand on the mouse at all everything was done through the keyboard the next one on the list is the bracket pair colorizer because dart and flutter use brackets and I mean a lot of brackets just look at this everywhere is a bracket and with bracket pair colorizer you can make your code more read French Lee by being immediately able to recognize which bracket or which parenthesis matches with which one in addition to making the brackets colorful it also kind of highlights the currently selected so say scope of brackets as you can see here hopefully on YouTube it's visible because it's quite a thin line but for example this scaffold bracket is yellow and also the scope is highlighted with a yellow color in between the two brackets which belong to the scaffold also the same is true for the air bar now the scope will be highlighted with a purple color and the same goes for every single bracket that there is it works for curly braces parentheses and also the square brackets so be sure to add bracket pair colorizer version two over to your via scope you want to use version two because as it writes in the faq of this extension version two uses the same bracket parsing engine as vs code which increases speed and accuracy the next extension on the list is block if you are not already using the block pattern or the block library in your projects you definitely should be because otherwise you are seriously missing out blog which stands for business logic component is a reactive state management pattern for flutter there is also an amazing library which makes managing state with block streamlined and Pleasant still even with this library there is quite a bit of boilerplate code to write this block extension which by the way comes from the author of the library himself Felix Angelo will spare you from writing all of that boilerplate and also if you want to learn more about block and how to do state management the easy way you can do so from the cart in the corner one thing that this blog extension is capable of doing is to create a bunch of files at once because every block needs the block class itself then it needs the States which the block outputs and events which are an input for the block with the block extension creating these files is like a breeze you just right-click select block new block from the context menu specify the name of the block for example my blog hit enter you can even use equatable package to simplify or override equality comparisons so we can say yes and now we have successfully generated the block files and as we can see we have my block my block event and my block state and by the way we have errors here because we have not added equatable to the project that we can do so fairly quickly now that we know that we can use the pop spec assist so let's just hit pop spec assist let's search for equatable and select equatable we didn't even have to select it because we have specified the full name correctly and there is only one package which is called equatable so it added it automatically because we did not have any option to choose from and now once this package is in here we aren't gonna have any errors inside the event class and state class the last extension on the list is to do tree you know to do comments our way to remind yourself to implement some functionality later you have to remember to actually do it later though because otherwise these comments really lose their purpose what to do tree does is that it takes all of the to-do comments and fix me comments and shows them in a nice clean way so that you can begin working on what needs to be done for example you have a to comment here so to do do something and you also have fix me so fix this and by the way this highlighting of to do comments doesn't come from the to do tree extension it rather comes from a different extension called better comments so this is something like a bonus extension for you better comments just allows you to highlight certain comments in a different color so if this is a nice extension but it's not a must-have extension so that's why I have not really included it in the list but you definitely wanna have to do tree so if you search for it and the first one that comes up is the one that you want to use to do tree so now that we have added these two comments in here we can select the two dews from the left side from the left sidebar and here we have all the to do is inside main dodd arts so we wanna do something and also we have fixed me fix this so really to do tree keeps your to dues and fix me is organized lastly as a complete bonus i want to mention the theme and fund which i use that's because i am bombarded with comments and even emails asking me about the visual side of my setup so let's just answer these questions once and for all my go-to theme is material theme because it looks really amazing so just search for material theme over here and i'm using material darker to be more precise so to install this theme you just want to hit the command palette so control shift P and say theme so preferences color theme and select material theme darker this is my theme which I am using there is some additional setup regarding this theme if you do not want to lose your eyesight whenever you start debugging that's because as soon as you start bugging the default implementation of material theme will change the status bar the bottom one to look like this to me that's quite distracting so if you wanna get rid of this purple color or this magenta kind of color which is not all that great in my opinion you want to go to settings actually open up the settings JSON file by clicking on the bracket icon in the upper right corner and now you wanna add this bit of code and of course all of these settings and all of the links also are available from the written tutorial to which you can get by clicking on the link in the video description this setting will simply change the status bar debugging color to be a nice dark grey color and not that purple one which is enabled by default when it comes to the icon theme I am using again material theme but now material icon theme and even here I have some additional setup done so again back in Settings JSON you can create folder associations for the material icon theme and what I have done here is that I have global state so whenever a folder is called global state I want to assign a global looking icon to it what does that mean well let's see let me create a folder global state and it's looking like this with that Earth icon and it's purple by default only the folder called global is looking like this but with the help of this folder Association even global state has this kind of an icon and also I have folder Association for UI folders and also for the block folder and finally let's talk about the font which I use this fund is called fira code and it looks in my opinion really nice again the link is available in the written tutorial but I've got to be frank with you because there is another fund which I am currently only experimenting with which is really promising because usually these kinds of fonts are really expensive for being just funds because upwards of 50 euros or 50 dollars so I really just do not want to spend this kind of money on just font but there is a really promising font called victor man oh so if I change this font family from Fira code to victor mano and save it if i now go back to main dot dart it will look something like this and I would also probably bump up the weight of the font so let's search for font weight to be nine hundred maybe so it will look much better now and you can see why the flatter UI guidelines are still on in preview because they cut through the text so they have to fix their things in the flutter extension but still flutter guides are awesome but anyway this is the font as you can see whenever something is in italic it's written with this kind of a hand written script which is definitely good-looking every return statement is also in italic and a bunch of other keywords are also in italic and all of the comments are italic and they look kind of cool I'm not yet certain whether or not I will use this font for real but this is just a good option and it's completely free it's called victor mono and the link is available from the link in the video description from the recent tutorial one thing which you absolutely must do whether you use victor mono or Fira code is to enable font ligatures right here font ligatures will make sure that whenever you have for example a greater or equal sign so if I add a random if statement here five is greater or equal than six we have nice font ligature also and has a fun ligature so does equals equals so equality check so six equals equals six or seven it doesn't matter and also not equal so or five not equal four it has the font ligature so definitely enable font ligatures to have the best experience using fear code or victor mono which are funds which support ligatures alright so this was quite a list and all of these extensions will surely boost your developer productivity in flutter but also in other frameworks also subscribe to this channel and also hit the bell button to join the notification squad and not miss any of my new videos because here on reso coder i am determined to provide you with the best ab development tutorials and resources out there like this one on extensions for BS code but also overall tutorials on flutter and making clean nicely designed and functional and testable apps if this video helps you to make your vs code experience better definitely give it a like and also share it with our developers who will definitely benefit from it too if you know of any other extensions which you think should have definitely been mentioned here let us all know and leave a comment follow me on instagram because over there i post the most raw most up-to-date stuff from what's going on behind the scenes and see you in the next video [Music]

Channel: Reso Coder

Views: 113,769

Keywords: resocoder, tutorial, programming, code, visual studio code, vscode extensions, vscode tutorial, top vscode extensions, best visual studio code extensions, vs code, vs code flutter, vs code flutter setup, vs code flutter extension, vscode for flutter, vs code extension for flutter, flutter tutorial vscode, flutter extension for vscode, flutter extension for visual studio, flutter intellij vs vscode, flutter android studio vs vscode, flutter android studio vs visual studio code

Id: VHhksMa2Ffg

Length: 24min 1sec (1441 seconds)

Published: Thu Jul 04 2019

Reddit Comments

[u/GoldenJoe24]

TLDW?

[u/relativityboy]

They forgot one. Intellij