🚀 Flutter Development Tools to Boost Productivity 📈
Check out some of the tools you could use that'll help you code better!
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(dot)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 | figma.com
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:
Thanks for reading!
If you'd like to talk about coding or other stuff. Here's some of my socials