Developing apps is hard enough. Doing repetitive tasks, writing all the code manually and wasting time by opening the browser every time you want to copy a version of a Dart package isn't productive at all. You want to be in the programming flow as long as possible and not be disturbed by mundane tasks.
The only thing which you cannot abolish are the frequent trips to StackOverflow and filtering through the "works on my machine" responses over there. Oh well, I guess that's just the nature of being a developer...
I assume you already have the Flutter extension and Dart extension installed. Still, I receive quite a few comments on my tutorials asking me "How did you wrap a widget with another one so easily?"
There is at least one setting which you should change for an optimal Flutter coding experience. As of now, Flutter UI guides are only in preview so you need to enable them manually.
Enable UI guides in settings
This will make Flutter's widgets parent-child relationships visible at first glance by drawing lines on the left side.
UI guides in action
Talk about keystroke savers... Your hands are in the "letter area" of the keyboard. Reaching for the arrow keys is a pain! Navigating out of a sea of brackets becomes a time consuming operation.
TabOut allows you to hit the Tab key (which is well reachable) a couple of times and you are out even from code looking like this: function1(function2(["x", "y"]));
You know the drill - to add a dependency to pubspec.yaml, go to pub.dev, search for the package, copy the latest version, come back to VS Code and paste.
Pubspec Assist does all of this for you and, of course, it has search capabilities so that you don't have to know the exact name of the package. It is initiated by running a command from the command palette (Ctrl + Shift + P).
#1 - run the command
#2 - search for a package
#3 - select a package to be added
If you don't have this extension yet, you are definitely missing out. While the core Flutter extension does provide a handful of useful snippets, Awesome Flutter Snippets takes it to another level.
ListView.Builder, FutureBuilder or StreamBuilder in just a few keystrokes? AwesomeFlutter snippets has got you covered.
To create a file, you have to right click on the folder, select "New File" and interrupt your coding flow by using the mouse. This sucks! Instead, you can use the Advanced New File extension.
With it, simply hit Ctrl + Alt + N (Cmd + Alt + N for Mac), specify the file location and name and it's done! Of course, you don't have to type the whole path manually - it's autocompleted for you.
First, select the location
Then input the name an press Enter
Dart and Flutter use brackets. A lot of brackets. Why not make your code more read-friendly by knowing which opening and closing brackets match?
It will also highlight the currently selected scope in between brackets.
The scope of myMap brackets is highlighted
BLoC (Business Logic Component) is a reactive state management pattern for Flutter. There is an amazing library which makes managing state with BLoC streamlined and pleasant. Still, even with this library there's quite a bit of boilerplate code to write. Learn how to do state management the easy way from the tutorial below:
The Bloc extension will spare you from all the boilerplate. It has been created by the author of the Bloc library himself, so you know it will be always up-to-date with all the snippets and commands!
Todo comments are a way to remind yourself to implement some functionality later. You have to remember to actually do it later though, otherwise these comments lose their purpose.
Todo Tree takes all of the // TODO: xyz and also // FIXME: xyz comments and shows them in a clean way so that you can begin working on what needs to be done.
Tree view of TODOs and FIXMEs
BONUS: My theme and font
I am bombarded with comments and even emails (!!!) asking me about the visual side of my setup. Let's answer this question once and for all.
My go-to theme is the Material Theme, specifically Material Theme Darker. Also, please make sure that you change the status bar color when debugging if you don't want to be distracted by that bright ugliness.
Distracting color of the status bar while debugging
Just add the following into the settings.json file:
settings.json
"workbench.colorCustomizations": {
"[Material Theme Darker]": {
"statusBar.debuggingBackground": "#212121"
}
}As for the icon theme, I use Material Icon Theme with the following folder associations to make certain custom folders stand out.
settings.json
"material-icon-theme.folders.associations": {
"global_state": "global",
"ui": "layout",
"bloc": "controller"
}Finally, the font I use (for now) is called Fira Code. Another one, which I'm currently only experimenting with, is the Victor Mono font. No matter which one you choose, enable font ligatures in the settings for optimal experience.
Enable font ligatures to...
...have programming symbols looking like this.
Conclusion
All of these extensions will surely boost your developer productivity in Flutter but also in other frameworks. If you know of any other extensions which you think should have absolutely be mentioned, let us know and leave a comment below!
Good work. I’m a big fan of your site. You have made a tutorial on how to make an app international using a json file. I wish you to make another one by using flutter_localizations, intl_translation packages, and managing the app state with flutter_bloc and aquatable.
It will be very nice if you can use the same bloc package to show app themes management.
Sorry for my English.
Thanks again.
Thank you! I will add these topics to my TODO list.
My VS code doesn’t display the option to turn on font ligatures just like yours. It displays a link to “Edit in settings.json” only, or allows more actions like “Reset setting”, “Copy setting ID” and “Copy setting as json”. I myself set the option “editor.fontLigatures”: true, to settings.json, but the ligatures weren’t turned on! =/
have you tried to install font supporting ligatures? As the Fire Mono were not installed on mine
This subject is completely superficial and does not add value, in the opinion of many friends of mine.
I definitely don’t agree with them.
Thanks for sharing this high quality tutorials.
JetBrains Mono the best of the best
Kindly check the below extenstion,
https://marketplace.visualstudio.com/items?itemName=circlecodesolution.ccs-flutter-color