Master Flutter in VSCode with these 5 mind-blowing tips & tricks!
Flutter is a great framework. VSCode is a great programming environment.
Why don’t we combine these two great powers and become real app development masters?
Today, we will look at 5 unbelievably easy VSCode tips that are especially helpful for every Flutter dev out there!
Cleaner folder structure
After creating a new Flutter project, there are way too many files. But we can structure these files with these simple steps in VSCode:
- Open the command palette (Ctrl/Cmd + Shift + P)
- type “preferences: Open Settings (JSON)”
- add the following lines to your settings.json:
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.expand": false,
"explorer.fileNesting.patterns": {
"pubspec.yaml": ".metadata, pubspec.lock, analysis_options.yaml",
}
These 5 lines will put the .metadata
, .pubspec.lock
, and analysis_options.yaml
files nested into the pubspec.yaml
file. The result? Here it is:
PS: I also do this for all my code generation files: I put files like *.g.dart
or *.freezed.dart
below the original .dart
file.
Auto Fix linters
It’s very annoying to fix all the linter problems one by one. Even if you use for example the “add const keyword” dialog, doing this every time is very time-consuming in the long term. That’s why we will create a way to automatically add these small things when saving a file. To do so, we go back to our settings.json (Instructions in the previous tip) and add the following:
"editor.codeActionsOnSave": {
"source.fixAll": true
}
Yes, it’s literally that easy. Now, every time you hit CTRL + S
or CMD + S
, all the tiny code fixes that Dart can automatically fix will get fixed. Nice!
Awesome Flutter Snippets
This extension is a must-have for every Flutter developer. It provides you with a huge amount of Flutter snippets that you can use right away to speed up your development. It has 40+ snippets for every use case and supports complex widgets too. This includes simple snippets, like a snippet for Stateful & Stateless Widgets, but also more complicated snippets, e.g., a ListView.separated or TweenAnimationBuilder.
Easier formatting
In the second tip, we have spoken about how to add things like const
keywords automatically. Now we want to format our file as soon as we save it. To do so, add the following line to your settings.json:
"editor.formatOnSave": true
Flutter Color
This extension is very helpful, and I use it several times a day. It detects in your code where you enter a color code and then shows you to the left of it what that color looks like. But that’s not all. If you then click on the box, you get a color picker with which you can select a color and then automatically apply it in your code.
So simple, yet so genius.
Wrapping Up
In this article, you have seen 5 extremely useful Flutter VSCode tips.
I tried my best to get the best tips that everyone likes. If you appreciate this work, I would be very grateful if you could support this quality content and give me some claps!
Have a great day!