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

[@StarBattle08]

1:09 Flutter & Dart 2:55 TabOut 4:01 Pubspec Assist 6:45 Awesome Flutter Snippets 8:22 Advanced New File 10:35 Bracker Pair Colorizer 12:08 bloc 14:28 Todo Tree

[@1LifeBest]

thanks

[@hossammohammed9727]

THX, I see your comment after I finish the video 😋

[@invideo1115]

Thanks...bro

[@Soner_Dev]

not all heroes wear capes

[@vinishakolla9677]

I have recently started exploring flutter . I see that you have benchmarked the way flutter apps needs to be implemented with best design patterns and architecture . Kudos to all your videos and your doing a great job by sharing these videos with us. Thanks a lot for doing this.

[@KevinGenus]

Love this ... I use Gruvbox Material Medium (theme) and FiraCode-Retina (font). All free, but most importantly, I can code from sun up, to sun down and my eyes feel no strain. In the audio industry, similar colors are used for that very reason.

[@codinginflow]

I think "the programming flow" is also called "coding in flow"

[@blacklilith6696]

Two of my favorite tutors, Coding in Flow for Java and Reso Coder for Flutter and Dart.

[@arifikhsanudin9724]

My favorite guys

[@snooringcode6594]

Coding in flow & Reso Coder are excellent Mobile app development tutors.

[@sibusisondlovu7509]

@@blacklilith6696 same here

[@havefun5519]

Finally, I know where is the 'UI Guide'. Thanks for the video.

[@dotnetdevni]

I just love this language i was using xamrian being an advance c# programmer for years but was frustrating doing a simple thing as a horizontal list

[@juanvieira8249]

Great, thanks! I also love: "Toggle Quotes" mostly for JS, "Surround" to wrap code with if, trycatch etc, "Project Manager" to save workspaces, "Settings Sync", "Prettier", "Log History", "Code Spell Checker" and "Auto Rename Tag" ^^

[@Flutterful]

I made a VS Code Extension Pack for this task called Ultimate Flutter Extension Pack. It contains all the amazing extensions pack and is updated every month.

[@sameerk12982]

Hello From India....Thank you very much for this wonderful tutorial....appreciated....really helpful.

[@gilsoncav]

Incredible job! congratulations for the video and obviously focused work routine that you must have stablished to achieve this level of quality over here!

[@ResoCoder]

Thank you, Gilson!

[@elijahluckey7852]

Navigating editors and terminals are so much better by using ONLY a keyboard (opinion)! I don't use the advance-new-file extension myself, but have used "cmd + J" for accessing the terminal and then "touch lib/path/to/new_file.dart" or "code lib/path/to/new_file.dart". Using "touch" will create a new file but not navigate to the editor, using "code" will create the new file and open it in the editor.

[@wish4129]

I appreciate it alot, especially the todo tree ! good day Reso.

[@Crisisdarkness]

Estimated instructor, I would like that in the near future if you could do a tutorial on how to create a basic application using Flutter, that would be great

[@Shanthakumar]

I remember days downloading visual studio in giga bytes and it was barely able to do even 5% of what's possible now.

[@danielmilyutin9914]

Thanks for hints and tips. I prefer Meslo font. I do not like ligatures since they can be confusing. Ex. ligature for ">=" can be detected by tired eye as ">".

[@ThePC007]

*About Tabout:* I've made something better. I've mapped my IJKL keys to the arrows keys and my U and O keys to the Home and End keys using an AutoHotkey script. Holding Win+Alt will enable the remap and it also works together with Shift and Control. This way I never have to reach to the arrow keys ever (except for keyboard shortcuts that require the Alt or Win key, but those are a little rarer).

[@ThePC007]

If anybody is interested, here's the script: #InstallKeybdHook #^!Shift:: #^+Alt:: #!+Ctrl:: ^!+LWin:: ^!+RWin:: Send {Blind}{vk07} return #!j:: SendInput {Blind}{LWin up} SendInput {Left} SendInput {Blind}{LWin down} Return #!+j:: SendInput {Blind}{LWin up} SendInput +{Left} SendInput {Blind}{LWin down} Return #!^j:: SendInput {Blind}{LWin up} SendInput ^{Left} SendInput {Blind}{LWin down} Return #!+^j:: SendInput {Blind}{LWin up} SendInput +^{Left} SendInput {Blind}{LWin down} Return #!k:: SendInput {Blind}{LWin up} SendInput {Down} SendInput {Blind}{LWin down} Return #!+k:: SendInput {Blind}{LWin up} SendInput +{Down} SendInput {Blind}{LWin down} Return #!^k:: SendInput {Blind}{LWin up} SendInput ^{Down} SendInput {Blind}{LWin down} Return #!+^k:: SendInput {Blind}{LWin up} SendInput +^{Down} SendInput {Blind}{LWin down} Return #!l:: SendInput {Blind}{LWin up} SendInput {Right} SendInput {Blind}{LWin down} Return #!+l:: SendInput {Blind}{LWin up} SendInput +{Right} SendInput {Blind}{LWin down} Return #!^l:: SendInput {Blind}{LWin up} SendInput ^{Right} SendInput {Blind}{LWin down} Return #!+^l:: SendInput {Blind}{LWin up} SendInput +^{Right} SendInput {Blind}{LWin down} Return #!i:: SendInput {Blind}{LWin up} SendInput {Up} SendInput {Blind}{LWin down} Return #!+i:: SendInput {Blind}{LWin up} SendInput +{Up} SendInput {Blind}{LWin down} Return #!^i:: SendInput {Blind}{LWin up} SendInput ^{Up} SendInput {Blind}{LWin down} Return #!+^i:: SendInput {Blind}{LWin up} SendInput +^{Up} SendInput {Blind}{LWin down} Return #!u:: SendInput {Blind}{LWin up} SendInput {Home} SendInput {Blind}{LWin down} Return #!+u:: SendInput {Blind}{LWin up} SendInput +{Home} SendInput {Blind}{LWin down} Return #!^u:: SendInput {Blind}{LWin up} SendInput ^{Home} SendInput {Blind}{LWin down} Return #!+^u:: SendInput {Blind}{LWin up} SendInput +^{Home} SendInput {Blind}{LWin down} Return #!o:: SendInput {Blind}{LWin up} SendInput {End} SendInput {Blind}{LWin down} Return #!+o:: SendInput {Blind}{LWin up} SendInput +{End} SendInput {Blind}{LWin down} Return #!^o:: SendInput {Blind}{LWin up} SendInput ^{End} SendInput {Blind}{LWin down} Return #!+^o:: SendInput {Blind}{LWin up} SendInput +^{End} SendInput {Blind}{LWin down} Return

[@ThePC007]

If you're on Linux, AutoKey can be used to achieve the same effect, but you'll need multiple scripts (one for each keyboard shortcut), rather than just a single one.

[@kissu_io]

Hi ! Thanks for the video. :) Not a Flutter dev here but still, I was wondering how you do guest that kind of stepped indentation bars. Is it specific to Flutter or is it an extension/setting ?

[@pfote65]

nice list, installed some of the recommendations. i would have one suggestion for the list: back in the days, the vim guys where all jealous about the git migration of my emacs, actually i used a emacs extension called "magit", and i found out recently that it has been ported to vscode. its nothing to fancy, and not as nicely integrated as it was in emacs, but still worth a look

[@pavankalyan6013]

Can you tell me, which keyboard keys are used to provide quotation marks to a selected string

[@JeanPierreSchnyder]

On my VS Code editor, I do not have any end bloc comment like // Column or // Center or // Scaffold. How can I activate this functionality ? I am using the Bracket Pair Colorizer as well as the Guides extensions.

[@AndyBandi2000]

can someone help? after for example Column(children: []) , the is not showing after children.

[@mayank_upadhyay_19]

I am not able to find name of extension that is marking the end of bracket by its name

[@gravitstudio]

when I enable Guides, I see very thin line, not like your video, how can I fix it?

[@ablayekebe8595]

Bjr j'utilise le flutter avec vs code mais je vois que quand j'exécute sa prend beaucoup de temps est ce que vous pouvez m'aide mon cher

[@aytunch]

Thank you very much. I installed 3:) Are you planning on making a tutorial on CI/CD? and stuff like testflight automation?

[@vivekjunghamal5730]

how can we get the code tree highlighted like this. as vs only shows straight line in default

[@raulisesg]

Thanks your videos always are best! What is and for what is the extension below the todo-tree icon?

[@frdomirlo3361]

Thanks!, in your editor I can see that text is displayed as a "tree" with lines relying the hierarchy of your widgets on code. how can enable that?

[@yashgoyal7008]

Go to settings.. search and enable dart flutter ui guides..

[@nikdevops]

Hey can you tell me how to get those white lines showing the widget tree?pls

[@keremk13]

Have you tested JetBrains font? It's free and supports ligatures too.

[@ac130kz]

you can just print dependencies: flutter_bloc: this will fetch the latest version

[@bennguyen1313]

Great video! Will need to check out Bloc Library - Painless State Management for Flutter! Aside from the settings/extensions mentioned... Enable UI Guides / Custom Tracking, TabOut, PubSpec Assist, Awesome Flutter Snippets, Bracket Pair Colorizer 2, flutter_bloc/bloc, Todo Tree Any tips for how to get VS Code / Flutter to debug on actual hardware instead of a virtual/emulated device? I've enabled the Android for USB debugging, but it's not listed under Start Debugging!

[@angthoang5994]

2:11 how can I get the whiteline to show parent-child relationship ?, I tried to add dart.flutteroutline true on json file but it's not working?

[@leelaitw]

After enabled it, need to restart vs code.

[@kirayamato6128]

Is vs code also have an extensions for line guides for JavaScript file? Something similar to dart ui guidelines? I know bracket pair extension but i just want to know if it has something similar from dart ui guidelines. Thanks for answering

[@MrLyonliang]

Really appreciate your best practices to save me a lot of efforts.

[@oussamakhalfi1751]

please how are you getting in the code the indentation tree that represents that widgets are nested????????????? i hope you'll answer

[@oussamakhalfi1751]

@Amartya Gunjan no :') if you find it tell me please

[@devonplaza8054]

Maybe dumb question but how do you get your indent guides to connect to sub elements vertically like that?

[@birsenbozkurt6923]

my codes auto-scroll when i save i dont want please help me

[@zeeshanmazharmehar5149]

Awesome , Channel Subscribed, Keep up good work..

[@stackingflow]

I use Purple theme and settings that the developer provides dang! Its beautiful

[@honor9lite1337]

Which theme is that

[@ketankshukla]

@@honor9lite1337 Shades of Purple is my favourite theme!

[@mockingloris]

Thanks for sharing! installing extensions now!

[@dipanshparmar3769]

How to get those white lines which indicates children and parents?

[@flarecodeflit4823]

Really helpful video , appreciate it man

[@cuongduongmanh5644]

how can you make wiget name match with child with white line?

[@roysmith5711]

Need to create new files and folders? Press Ctrl + ~, use the terminal.

[@sheetalguragain]

What is that extension called which is like a line which shows the child or children of any widget clearly

[@ritiksaxenaofficial]

Is there any extension for auto hot reload? Or any settings related to that?

[@ammarmiyaji6726]

really amazing and helpful video..thanks alot👌

[@BooleanDev]

Cascadia Code is also a good font with font ligatures made by Microsoft

[@alibaltschun2302]

[HELP] , bloc installed, but `right click` and `blob:new bloc` not working.

[@DaveDeDog]

I just love your content 💪🏾

[@felix9368]

Man, how do you put the indent lines as thick as the video ?

[@bodyhanger7137]

Thanks for the info, but I’ll never use font ligatures. Does not make my code as readable. Guess it’s a personal thing...

[@colephelps7321]

Is there any way to use intellij key bindings with vscode? Especially ctrl+w to successively select code block. That's the shortcut I use mostly. I couldn't get that option in any ide other than jet brain's. For the same reason I'm still using Android studio for flutter dev. If I can get ctrl+w function in vscode. I'm not gonna use AS anymore

[@martinrupertbulquerin228]

Thank you for this tutorial

[@runer007]

Auto Generate Constructors with named parameters in Dart? I constantly need to create constructors with named parameters when I create models and Widgets in Dart? How can I auto generate this mundane, repetitive, task in VC Code?

[@10thYugiohmaster10]

Use Android Studio :P

[@glyphicon330]

Great video. Thanks!

[@snooringcode6594]

I fav one is tabout extension

[@blessenalex9794]

very useful stuff in this video...thanks man...i am facing an issue with prettier extension, it is not working with dart files??? Can you please help!!

[@jardeshna]

The dart / flutter extension has its own formtter, it's called dartfmt I think. Just hit Shift + Alt + F to format the text in the current file. Keep in mind it won't work if you have errors in the file.

[@bakiKaradeniz]

17:41 there is no open settings json on my vscode?

[@moizchauhan7993]

You can open it by searching in search bar

[@dideadnyana]

9:37 this doesn't work, how to fix it?

[@Moneybefehl]

very helpful video! Thanks a lot

[@sameerwadhwa6973]

Great Video!

[@patricioeb]

Great! I'm starting on developing with VSC and Flutter but can't get my Android device connected properly (USB debugging enabled) via USB or net) for testing my apps. Can you help or refer me to a good tutorial on the subject. Thx & greets from Tenerife.

[@muhammadnasreldin]

you know how to do it but there is a specific issue , or you need to know how to do it ?

[@noelpinto47_]

I'd recommend that u download wifi adb on your androd phone and run adb.exe in ur cmd. then adb connect .

[@patricioeb]

Thanks... SOLVED!!

[@nhexplorers]

Any chance you could do a tutorial on a complex flutter UI that has a column that scrolls on the page and has one of its children being a listview.builder? When I try, the listview.builder scrolls independently from the column elements. Thanks.

[@ResoCoder]

I'll look into it.

[@vietanhnguyen5485]

good idea, thanks!

[@BotaParaFlutter.-ll7co]

Is this usefull in 2023?

[@kazanagasaivishnu5283]

which ide is better for flutter vs or android studio?Waiting for your reply...

[@ResoCoder]

For me it's VS Code.

[@gorniv]

why you did not include marketplace.visualstudio.com/items?itemName=gornivv.vscode-flutter-files ?

[@jamesogletree5257]

Reso Coder, I just start trying to use vs code. I am new to Dart/Flutter. I followed along, installing all the extensions and checking the changes to my editor screen. All were successful except when I turned on the font ligatures and it did not work on the == sign. Then I tried to set the font family but was directed to the setting.json file. I enter the following string: "editor.fontFamily": "Fira Code", and it was accepted. My color scheme is Material Theme Darker. Also, I set "editor.font.ligatures": true, I am using Visual Studio Code version 1.44.1 on Windows 10. Any suggestions for me?

[@ResoCoder]

Hey! I'm not sure if the typo is only present in the comment, but the setting is "editor.fontLigatures" without the additional dot.

[@jamesogletree5257]

@@ResoCoder I double-checked my code and I did enter it correctly: "editor.fontLigatures": true, It was just a typo in my comments adding a dot between font and ligatures. But still when I type => it still shows as two operators instead of the one solid arrow. I will just move on to thoroughly learn the editor and return later when I have more knowledge of how it works, to tackle this issue again.

[@fuadikurniawan2850]

Hi sir, could you tell me, what is the extension you are using below the Todo Tree, thank you.

[@zenzhu5690]

gitlens?

[@fuadikurniawan2850]

oh I see, thank you bro @@zenzhu5690

[@glyphicon330]

3:30 how did you do that sir?

[@ResoCoder]

Just highlight a part of the code and hit the quotation mark key. It also works with parentheses and brackets.

[@glyphicon330]

@@ResoCoder Ohhh awesome. Thanks!! Great channel BTW

[@shaikabbas3277]

Files and folder icons are cool. What extension you are using?

[@CodeWhizbang]

marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

[@MuhammadAdnan-gx6rd]

Sir flutter from scratch playlist for beginners please ?

[@alvin3171997]

Amazing video, thank you!

[@logicgates8944]

very helpful, thank you

[@Vellutia]

Why does my Fira Code and Victor Mono look a lot different than yours?

[@Moneybefehl]

you need to enable font ligatures, you can do this in the settings.json config file by coping "editor.fontLigatures": true,

[@GrafritzDesign]

Thank you ... For this video...

[@mayank_upadhyay_19]

Using a mouse gives mental overhead and anxiety symptoms

[@narcodico]

Really good suggestions!

[@cuong1112035]

make one for android studio pls

[@THEMithrandir09]

If on multiple devices, use SettingsSync, it lets you syncronize your extensions, settings and settings.json via a Github Gist. Great if you have to use multiple devices or just to have a backup or like to share your current setup with others! marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

[@WilliamDeboer]

+1 like for flutter ui guides.

[@mabdurrafeyahmed9256]

thanku verymuch

[@dejanbaric4193]

Anaheim is also good font to use

[@omeryilmaz2K]

Thank you.

[@moazelsawaf2000]

Thanks sir

[@sohedulislam1652]

Fira Code !=,

[@ResoCoder]

Make sure you enable ligatures

[@saharamanson1970]

nice bro

[@gogogogi3070]

Why is VS code more used than Android Studio?

[@superman2guntur]

Because we already get used for react and angular.

[@ResoCoder]

I am coming from native Android, so I wanted to use AS at first. It's just so laggy and the text doesn't scale properly (dealbreaker for recording tutorials). VS Code is light and gets the job done just as well.

[@Kyorazo]

thanks for the vídeo!

[@mohidden]

useful contents tn ks,

[@christiankerviche7219]

Advanced New File , useless , already on VSCode , juste press new file and type folder/file.dart ....

[@kroketin]

The extension pubspec assist damaged my project!

[@chakroid]

you rockzz

[@carterv.31]

Nice video

[@printfmit9744]

amazing video IT is

[@solomon5050]

super...

[@Filiq.]

Ty jsi slovák? :D

[@ResoCoder]

Áno!

[@Filiq.]

@@ResoCoder Máš super videa!

[@ResoCoder]

Ďakujem ❤️

[@ahmadullah.saikat]

Dart coding structure is so immature.