How to read local json file in flutter & show json data in listview builder

Was this Tutorial helpful? Spread Motivation on me by supporting paypal.me/Raja... #flutter #json #flutterdev
Hi Guys Welcome to Proto Coders Point.
In this flutter Tutorial we will learn how to read a local json file in flutter, how to parse a json file, how to fetch data from json file and then display the json data in flutter listview builder.
Source Code : protocoderspoi...
or
github.com/Raj...
productlist.json file download from here: github.com/Raj...
Comment below for any queries 😀
Follow and support me:
🐦 Twitter: / rajatpalankar
💬 Facebook: / protocoderspoint
💸 Instagram: / protocoderspoint
Be sure to ask for help in the comments if you need any. Suggestions for future Flutter tutorials are also very welcome! :)
For mobile application development keep learning freely from proto coders point
Visit: protocoderspoi...
readjsondata,
fromjson,
rootbundle,
loadString
json data,
flutter json
json decode .
.
Support Proto Coders Point: www.buymeacoff...

[@thushankalana4940]

Great Lesson.❤🙂 you are save me. This lesson was helpfull for my project.❤❤❤ Thank you so much Sir❤️❤️❤️

[@ProtoCodersPoint]

It's my pleasure

[@diogosequeira4873]

Hi, good explanation and nice video.
If I can leave a quick tip, you should pay attention to naming conventions in functions and file names, for example ReadJsonData() should be start lower case, and file name should product_data_model.
This can encourage new flutter developers to follow good coding principles.
Thanks!!

[@ProtoCodersPoint]

Yes you are right, Thanks for the Tip
I will work on it and improve myself to teach beginner in better and clean way..

[@yerraguntavijayachandrared7769]

@@ProtoCodersPoint where is services.dart file??

[@mohammedahmed-wj8by]

This is the best free software Ive seen. Respect.

[@learningcurious5845]

well explained and worked fine with my json file thank you so much for this video. hope to see more videos like this from you.

[@nandarafi4294]

thanks, you are my savior, you give the source code too, god bless you man

[@ProtoCodersPoint]

You're welcome! I'm here to help with any questions you have. If you need assistance with code or have specific questions, feel free to ask!

[@NuwanThisara]

This helped me to understand the concept. thank you

[@ProtoCodersPoint]

Welcome 🤗

[@vvnavra]

The tutorial I needed

[@sachinmittal65]

can we use file like product .dart instead of .json file?

[@ezimaxtech]

Nice sharing

[@ProtoCodersPoint]

Thanks for liking

[@mahimeena6427]

Good Explanation Man !! Doubts got cleared .

[@ProtoCodersPoint]

Thanks 😊, always happy to help

[@Amankumar_Raone]

great video nyc explaination

[@ProtoCodersPoint]

Thanks and welcome 😍

[@nikhilkumarjamwal5322]

Nice Explanation.
Can you also make a video on how to write data on json file and read it and use the data in flutter application?

[@ProtoCodersPoint]

Sure

[@elquenoaplica3975]

Great tutorial and explanation.
Thanks

[@vinayghadigaonkar8215]

Thank you, brother.

[@ProtoCodersPoint]

You are very welcome

[@parfaittapsoba754]

Good video !
Just improve the sound quality ...

[@ProtoCodersPoint]

Thanks

[@Mohammed-sg4tr]

That's very good, thank you

[@xabibullohxalilov682]

thank you broo

[@rutugabani]

thank you so much

[@ProtoCodersPoint]

You're welcome!

[@aidaaqilahmohdzin5542]

thank you, this helps me a lot. But for example, if i want to add audio, it means i can just input the link in the json file?

[@faang29488]

thanks man, you helped me a lot. i don't even know, where are you living, but, man, god bless you

[@aadhithiyasrivatsan]

Kindly tell, how to insert the same in SQFLite table... That would be great....

[@ProtoCodersPoint]

Sure, I will create a video on same as soon as possible.

[@aadhithiyasrivatsan]

@@ProtoCodersPoint thanks for the quick response.... Kindly do asap....

[@aadhithiyasrivatsan]

You are the only video on internet... Who have used offline json... Glad that I found you.... Wish you all the best...

[@thushankalana4940]

I cant load image from https get request. What is the reason for that?

[@mdshahed5364]

I have question Isn't we have to call the getuser function in statstate method

[@riku402]

thanks, this helped me

[@kolambiinarula9857]

thanks

[@Vin_5898]

thank you sir for great tutorial but I've a ques what if we create a image folder inside the assets folder and store our images then how we can get those images using json file...suppose assets/image/shoes.jpg and in the json file "image" : "assets/img/shoes.jpg"

[@ProtoCodersPoint]

Yes, you can
I will share you the code soon

[@Vin_5898]

@@ProtoCodersPoint thank you sir

[@ProtoCodersPoint]

In this video tutorial we have json file which have imageurl to show image from internet
instead of that you must define, in json the path of your assets folder Image like this "image": "assets/img/shoes.jpg"
and then in Flutter Code make use of
Image.asset(items[index].image.toString()),
instead of NetworkImage
That's it

[@Vin_5898]

@@ProtoCodersPoint Thank you sir it worked

[@Vin_5898]

@@ProtoCodersPoint sir i've one more ques I wanted to play audio when we tap on the one of the item in the list view using same code (title + image + audio) using json file how we can do that??

[@kapilpatidar1099]

i am getting error while importing "import 'package:read_json_file/ProductDataModel.dart'; ", pls guide

[@Aadidev7530]

Can we convert json files into photos or videos

[@daviddzgoev9024]

Thanks 😊

[@ProtoCodersPoint]

You’re welcome 😉
Always happy to help

[@gggg-no6rm]

if I went to press in the item and show all item details how i will doit ?????

[@codinggoIndonesia]

thank you

[@ProtoCodersPoint]

Welcome 🤗

[@hemantchauhan6437]

I have used image path in place of url. will that work? .If yes then how we will write it to display

[@faisalhukkeri6793]

i have a json file for user signup
how can i integrate it
i dont think there's a need to make a model
bcoz theres no need to save user info

[@faisalhukkeri6793]

I've tried few videos for past 4 days, none of them work
and there's no video tutorial in which they are using json signup api files

[@ProtoCodersPoint]

Ok ✅ I will try to make a video tutorial asap

[@faisalhukkeri6793]

Update: I found a way to integrate it.
Thank you for responding 🙂🤜🏼🤛🏼

[@ProtoCodersPoint]

@@faisalhukkeri6793 oh that’s great 😃

[@krutikabaraskar4211]

I'm having error on images

[@vishruta9761]

what if I want a grid view instead of list view?

[@ProtoCodersPoint]

U can use flutter GridView
Do you want the tutorial on gridview in flutter?

[@BrYarDJ]

nice bro how if image not url and also local ?

[@ProtoCodersPoint]

Sorry, I did not got your question
Say again

[@BrYarDJ]

@@ProtoCodersPoint ok, i mean how can use image assets in place URL, i mean if i have image in assets not i have url, how can use there, How do I call the image in place url, i hope you understand, thanks

[@ProtoCodersPoint]

Use
image.asset(‘asset image path ’)

[@BrYarDJ]

@@ProtoCodersPoint thanks

[@vayugnath1358]

Any link to source?

[@ProtoCodersPoint]

Check description bro

[@vayugnath1358]

@@ProtoCodersPoint I dont see it.. honestly. Don't mind it though. Good job with this one :) Can you make a tutorial on how to read into a json file from an app and store it, and read it back as a list or something

[@ProtoCodersPoint]

Check it
protocoderspoint.com/read-json-file-assets-flutter-display-data-listview/

[@ProtoCodersPoint]

@@vayugnath1358 I already make a video on same concept but it's not exactly same as you requested
Check it out ua-cam.com/video/ExgP_SAseN8/v-deo.html
Learn from this video and apply your logic
if you are not able to do tell me
I will soon make a video on the same

[@mdshahed5364]

A lot of problem in your code

[@ProtoCodersPoint]

Share the problem you faced

[@mdshahed5364]

it’s showing a null error "Expected a value type list datamodel but it gone type null and you have to use late keyword in the class property "

[@JOc17KER]

@@mdshahed5364 i got same problem, how to solve it?