Flutter VSCode Extensions and Shortcuts | Flutter For Beginners

hey everyone i'm marcus ing and today we're going to go over my favorite clutter vs code extensions and shortcuts as a professional flutter developer i hope that these tips will help you increase your productivity and get your app on the app store also only a small percentage of people who watch my videos are actually subscribed so if you like my content remember to subscribe and hit that notification bell it really helps out the channel you can grab the full write-up of this video on marcusing.com linked in the description below and with that let's get started extensions are a big part of what makes vs code so great and customizable you can pick and choose whatever extensions you want in the extensions panel within vs code here are my top picks first off if you're going to be making flutter projects you're going to need the flutter and dart extensions these extensions provide a number of core features such as flutter integration syntax highlighting and automatic hot reload you can also quickly create stateless and stateful widgets by typing stl and stfl respectively another must-have is the awesome flutter snippets extension which provides autocomplete for boilerplate code and commonly used classes and methods a few of my favorite shortcuts are knit s for knit state this for dispose and list view b for creating a list view builder next up is bracket pair colorizer 2. since you're going to see a lot of parentheses in your flutter projects it helps add color cues to matching braces which makes it a lot easier to find those pesky mismatched braces material icon theme makes the icons in your file tree and tabs more appealing some of your folders will automatically change icons based on their names so that you can identify them at a glance for example auth will change to a folder with a lock this next extension is super helpful and saves me a lot of time with pubspec assist you can quickly add new dependencies to your pubspec.yaml file that's right you don't have to go to pub.dev search for your package and then manually type in the name and version number all you have to do is open the command palette ctrl shift p on windows or command shift p on mac type pub spec choose if you want a normal or dev dependency type your package name hit enter and then the package is magically added to your pub spec if block is your state management of choice then the block extension is a must have since it generates a bunch of boilerplate code in two seconds after right-clicking on any folder you can create a new default block with the block event and state files you also have the ability to wrap widgets with frequently used block related widgets the dart data class generator extension is a life saver when it comes to generating code for constructors copy with to and from map and to and from json methods in the settings you can choose to automatically annotate constructor parameters without required and automatically use the equatable package for value equality when creating a new class and adding instance variables you can hit control period on windows or command period on mac while your cursor is over the class or variables to get access to a new list of commands you can then choose to generate your constructor certain functions or the entire data class i often get asked about how i have these lines in my widget tree just open the settings search for dart flutter ui guides and tick preview flutter ui guides here are some useful shortcuts for working on flutter projects you can auto format your code with alt shift f or option shift f put commas after parenthesis to move them to the next line if your code has a blue squiggly line or if you want to wrap a widget you can open the quick fix menu with control period or command period as i mentioned earlier you can open the command palette with ctrl shift p or command shift p from here you can create a new flutter project access extensions like pubspec assist and more a quick way to change files is with ctrl p or command p from here you can type in a file name press enter and immediately start editing that file to move a line up or down hold down alt or option and then press the up or down arrow key this is useful for when you want to rearrange lines it also works on multiple lines if you highlight them first if you want to change multiple instances of the same text you can press ctrl d or command d to highlight the next instance of that text this creates multiple cursors that are manipulated at the same time all actions like typing cutting or pasting or duplicated press f2 to rename a class function or variable both in a file and across your project this is super useful when it comes to refactoring to view the implementation of a class or function hold down control or command and then click the text you can then see the code that you wrote or see the original flutter implementation if you imported files or packages and then later removed all the code that referenced them you can remove the unused imports with alt shift o or option shift o you can toggle a comment for a line or selected lines with ctrl forward slash or command forward slash you do comment your code right there are many more shortcuts that can be found in the vs code docs and i'll be sure to leave a link in the description below make sure to let me know what your favorite vs code extensions and shortcuts are in the comments and if you're interested in learning more flutter check out marcusing.com for complete flutter courses and projects thanks for watching and i'll see you in the next one you

Channel: Marcus Ng

Views: 47,882

Keywords: flutter vscode, extensions, shortcuts, flutter vscode setup, vscode extensions, vscode shortcuts, best vscode, beginner vscode, visual studio code flutter, flutter and dart, awesome flutter snippets, pubspec assist, bloc, bloc extension, dart data class generator, flutter ui guides, format, best code editor, efficient flutter, flutter ui, flutter beginner tutorial, flutter advanced tutorial, favorite flutter extensions, flutter keybinds, vscode keybinds, mobile app development

Id: tsqTCOnde8A

Length: 7min 52sec (472 seconds)

Published: Fri Oct 30 2020