Load JSON data using Flutter in different ways

Most of the mobile apps need to load Json data from assets or API calls.I came across a interesting article which details on how to load Json data , in this quick tutorial i will use the same code in the article and try to explain how JSON data can be displayed inside the flutter Widget.I have been working with C# + Asp.net for a long time and it was easy for me to understand how a Future works in Dart as this is the same as async Task<T> in C#.

Method 1: Load JSON data inside the main() function

I found this method easy but this might slow the load time , all you have to do is mark the main method as async and wait for the JSON data to load.I did not find this method so elegant , but it can still be used when the amount of JSON data to be loaded is very minimal and needs to be displayed when the App is initialized.

Method 2: Load JSON data using setState()

This method is uses the setState method to reload the UI once the JSON data is fetched.I have added a wait timer for 5 seconds to simulate a slow load and show a loading image.This method is much better as it does not block the main thread and updates the UI only when the JSON data is loaded.

Method 3: Load JSON data using FutureBuilder Widget

I found this method most elegant and non blocking , using a FutureBuilder you can load data in the background and build a widget when the data is ready to be served (from a api call / assets).Future builder takes a future method and a datatype(class) argument using generics , it then injects the datatype returned by the future method once it returns data which can be instantly be used the build the widget.

Conclusion: I would definitely prefer using Method 3:FutureBuilder to load JSON data from API calls which may take some time to respond