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.
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.
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.
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" ^^
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.
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
Incredible job! congratulations for the video and obviously focused work routine that you must have stablished to achieve this level of quality over here!
*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).
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.
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 ">".
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.
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
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 ?
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?
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
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
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!
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
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.
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!!
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.
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 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.
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.
What is the awesome extension or option wich we can see in all the video with the tree of white line between every part of widget. Like in 3:34 we can see the white line begin to appbar and end to title ? pls
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.
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
thanks
THX, I see your comment after I finish the video 😋
Thanks...bro
not all heroes wear capes
I think "the programming flow" is also called "coding in flow"
Two of my favorite tutors, Coding in Flow for Java and Reso Coder for Flutter and Dart.
My favorite guys
Coding in flow & Reso Coder are excellent Mobile app development tutors.
@@blacklilith6696 same here
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.
Finally, I know where is the 'UI Guide'. Thanks for the video.
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.
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
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.
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" ^^
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.
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
Hello From India....Thank you very much for this wonderful tutorial....appreciated....really helpful.
Incredible job! congratulations for the video and obviously focused work routine that you must have stablished to achieve this level of quality over here!
Thank you, Gilson!
I appreciate it alot, especially the todo tree ! good day Reso.
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?
After enabled it, need to restart vs code.
can someone help? after for example Column(children: []) ,
the is not showing after children.
*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).
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
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.
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 ">".
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.
I remember days downloading visual studio in giga bytes and it was barely able to do even 5% of what's possible now.
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
you can just print
dependencies:
flutter_bloc:
this will fetch the latest version
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
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?
Go to settings.. search and enable dart flutter ui guides..
Really appreciate your best practices to save me a lot of efforts.
when I enable Guides, I see very thin line, not like your video, how can I fix it?
I am not able to find name of extension that is marking the end of bracket by its name
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 ?
how can we get the code tree highlighted like this. as vs only shows straight line in default
Can you tell me, which keyboard keys are used to provide quotation marks to a selected string
Thanks for sharing! installing extensions now!
Really helpful video , appreciate it man
please how are you getting in the code the indentation tree that represents that widgets are nested?????????????
i hope you'll answer
@Amartya Gunjan no :')
if you find it tell me please
my codes auto-scroll when i save i dont want please help me
I just love your content 💪🏾
Thank you for this tutorial
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?
Use Android Studio :P
[HELP] , bloc installed, but `right click` and `blob:new bloc` not working.
Thank you very much. I installed 3:) Are you planning on making a tutorial on CI/CD? and stuff like testflight automation?
Need to create new files and folders? Press Ctrl + ~, use the terminal.
I use Purple theme and settings that the developer provides dang! Its beautiful
Which theme is that
@@honor9lite1337 Shades of Purple is my favourite theme!
Hey can you tell me how to get those white lines showing the widget tree?pls
Thanks your videos always are best! What is and for what is the extension below the todo-tree icon?
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
really amazing and helpful video..thanks alot👌
Maybe dumb question but how do you get your indent guides to connect to sub elements vertically like that?
Awesome , Channel Subscribed, Keep up good work..
What is that extension called which is like a line which shows the child or children of any widget clearly
Great video. Thanks!
Thanks for the info, but I’ll never use font ligatures. Does not make my code as readable. Guess it’s a personal thing...
Cascadia Code is also a good font with font ligatures made by Microsoft
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
good idea, thanks!
9:37 this doesn't work, how to fix it?
How to get those white lines which indicates children and parents?
very helpful video! Thanks a lot
Is there any extension for auto hot reload?
Or any settings related to that?
how can you make wiget name match with child with white line?
17:41 there is no open settings json on my vscode?
You can open it by searching in search bar
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!
Amazing video, thank you!
Thank you.
Have you tested JetBrains font? It's free and supports ligatures too.
Man, how do you put the indent lines as thick as the video ?
very helpful, thank you
Great Video!
Thank you ...
For this video...
3:30 how did you do that sir?
Just highlight a part of the code and hit the quotation mark key. It also works with parentheses and brackets.
@@ResoCoder Ohhh awesome.
Thanks!! Great channel BTW
+1 like for flutter ui guides.
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
thanku verymuch
Thanks sir
Anaheim is also good font to use
I fav one is tabout extension
Sir flutter from scratch playlist for beginners please ?
Really good suggestions!
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.
I'll look into it.
which ide is better for flutter vs or android studio?Waiting for your reply...
For me it's VS Code.
Is this usefull in 2023?
why you did not include marketplace.visualstudio.com/items?itemName=gornivv.vscode-flutter-files ?
Why does my Fira Code and Victor Mono look a lot different than yours?
you need to enable font ligatures, you can do this in the settings.json config file by coping "editor.fontLigatures": true,
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!!
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.
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?
Hey! I'm not sure if the typo is only present in the comment, but the setting is "editor.fontLigatures" without the additional dot.
@@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.
Using a mouse gives mental overhead and anxiety symptoms
Hi sir, could you tell me, what is the extension you are using below the Todo Tree, thank you.
gitlens?
oh I see, thank you bro @@zenzhu5690
thanks for the vídeo!
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.
you know how to do it but there is a specific issue , or you need to know how to do it ?
I'd recommend that u download wifi adb on your androd phone and run adb.exe in ur cmd.
then adb connect .
Thanks... SOLVED!!
super...
What is the awesome extension or option wich we can see in all the video with the tree of white line between every part of widget. Like in 3:34 we can see the white line begin to appbar and end to title ? pls
It's Flutter outline: dartcode.org/releases/v3-4/#flutter-outline
You can enable in in the settings.
@@ResoCoder Thanks you so much ^^
useful contents tn ks,
you rockzz
nice bro
Advanced New File , useless , already on VSCode , juste press new file and type folder/file.dart ....
Files and folder icons are cool. What extension you are using?
marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
amazing video IT is
Fira Code !=,
Make sure you enable ligatures
Nice video
The extension pubspec assist damaged my project!
Why is VS code more used than Android Studio?
Because we already get used for react and angular.
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.
make one for android studio pls
Ty jsi slovák? :D
Áno!
@@ResoCoder Máš super videa!
Ďakujem ❤️