Jaime's Blog

Jaime's Blog

🚀 Flutter Development Tools to Boost Productivity 📈

🚀 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.

image.png

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.

image.png

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

image.png


Rainbow Brackets

image.png

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

image.png

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

image.png

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:

via GIPHY


Figma | figma.com

image.png

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

image.png


Flutter Hack

via GIPHY

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

image.png

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:

1_nAbfbz7zVKNd5gOLWOZxsw.gif


Thanks for reading!

If you'd like to talk about coding or other stuff. Here's some of my socials

#flutter#mobile-development#productivity#developer-tools#tools
 
Share this