Flutterexperts

As Flutter becomes more and more popular, people keep coming with amazing ideas to make hard stuff easier and easier. The plugin I m about to talk about is the same, saving time by converting the JSON file to a dart class for you, so you can focus more on the logic building side of things.

---

The JSON to Dart plugin helps us achieve exactly that, Its a wonderful plugin with many build in features to make the life of developer easier.

Now, before we dive into installing and using the plugin, let us first discuss what exactly is JSON?

JSON stands for JavaScript Object Notation, It is a lightweight format used for storing and transporting the data, it is used when you make a call to server and it has to return some data, which the server returns in the form of JSON.

An example of JSON is :

{
  "names" : [
    {
      "first_name" : "Joe",
      "middle_name" : "Rio",
      "last_name" : "Morn"
    },
    {
      "first_name" : "Joe",
      "middle_name" : "Rio",
      "last_name" : "Morn"
    },
    {
      "first_name" : "Joe",
      "middle_name" : "Rio",
      "last_name" : "Morn"
    }
  ]
}

The main rules of creating a JSON is that you must use double quotes (“ “) and every values must be a pair of name and value, the name is the field name which is on the left side and on its right side is its corresponding value.

In the example, the names is a List which contains a Map of names of employee which have following fields

1. first_name
2. middle_name
3. last_name

To gather more information on JSON you can look up W3Schools.

Now we move onto getting the plugin itself, To install all you need to do is go to

File -> Settings -> Plugins

Then write in JSONtoDart and install the first one that comes up, and you are now done with the installation part

Here is some example JSON you use, curtesy of dummy.restapiexample.com

Alright after navigating to the page you can select all the text and copy it,

Now move onto your project and click on the folder you want to place your file in, personally i would keep it under lib/core/models

Now right click on models directory and then

New ->Json To Dart

Note : Alternatively you can also press Alt + shift + D

Now this will come up

Where you can put in all the JSON text you copied earlier, like this :

Be sure to press the format button right after you paste the data, so you can see it properly formatted.

All that’s left is now to give it a name in the Class Name field , since this is employee data you can give it something like Employees, there are also options as well like,

generate comments which will basically put in all the JSON data you entered as a comment so its better to turn it off,

or generate private fields which will generate variables with an ‘_’ before them,

you can even create separate inner classes if you wish to use them using the generate inner classes.

After that all you need to do is hit Generate button and in matter of seconds your class will be generated, completely ready for you to use.

This plugin helped me many times by instantly creating classes for me to use in my project instead of me manually seeing each and every field name and writing a variable for it, so I thought I should let everyone know about this amazing plugin too, If you have any issues installing or using let me know in the comments below, I will try to resolve it ASAP, see you guys in the next blog.

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.