đ Flutter Development Tools to Boost Productivity đ
Hello everyone! Here are some tools I use that help me be productive when building apps with Flutter.
JSON to Dart
When it comes to parsing JSON, we have to model out our data and sometimes it costs time and is difficult to type all the fields or properties line by line, and sometimes we encounter problems with the nested properties and models.
Here are a few sites I found that could help
JSON to Dart by Javier Lecuona
https://javiercbk.github.io/json_to_dart/
Specifically made for Dart, just paste the JSON text then click on âGenerate Dartâ and it automatically creates a class for you to copy to your code.
quicktype.io
https://app.quicktype.io/
This is quite similar to the recent one, but offers more languages (e.g. Java, C#, JavaScript, etc.). This automatically converts JSON to the language of your choice. Just paste in your JSON and youâre good to go.
Would you look at that, itâs also available as an extension in VS Code! Hereâs the link to that if youâre interested đ. Link here
Rainbow Brackets
While developing Flutter apps, I often get lost looking for where the brackets end, especially forgetting adding the commas that donât automatically format the code when saving.
Here is the link to the extension
Something like this. If youâre interested hereâs the link to the theme I use(Synthwave â84)
Where the heck does the Text widget end?!?!
The problem I am trying to show here is that once you have so many nested widgets, it gets difficult to look for the ending bracket for a widget youâre trying to edit.
Hereâs what it looks like with Rainbow Brackets installed
Much better right? Well if I added commas at the end of each widget, it would look a lot better lol
With this extension, you can now easily see where each widget ends. Going back to the Text widget⊠since the bracket is colored green, we can easily identify where it ends by finding the closing bracket with the same color.
You right now installing the extension:
Figma
Before you start building Flutter apps, it is better to have a wireframe or design as a guide when thinking of how to layout different widgets. Having a guide will save you time since it makes deciding things like the dimensions of a widget, what widget to use for a component, image assets for your app , etc. quicker.
Some may use other tools similar to this (e.g. AdobeXD), but I prefer using Figma due to its availability in the browser.
Here is a sample
Flutter Hack
Letâs end this off with a Flutter hack. After creating a new flutter project with âflutter create my-cool-appâ youâd usually have a lot of boilerplate comments in your dart files. One way to remove all of this is to delete it one by one, but it surely takes some time moving your hand back and forth from your mouse to your keyboard. So exhausting⊠*remains seated 4 hours later*
Another way to get rid of these annoying comments is through a simple Regular Expression. You would just have to do the following as shown in the gif demo: