Part - 7 | Flutter Get API call with Null Safety | Building List with JSON Data using Future Builder
HTML-код
- Опубликовано: 27 ноя 2024
- In this video we will fetch the data from server via API and then display the data into out ListView Builder using Future Builder. We will also see how we can create model or how we can convert JSON data into Dart model classes
► API Link ➜ jsonplaceholde...
source code: github.com/axi...
► PlayList ➜ • Flutter REST API Tutor...
► Join Facebook Group ➜ / 983554978866765
_____________/Connect On Social Media\____________
► linkedin:➜ / axiftaj
► Instagram:➜ / axif_taj
► Facebook:➜ / aaxiftaj
► Twitter:➜ / axiftaj
► GitHub:➜ github.com/axi...
► Hire me on Fiver:➜ www.fiverr.com...
=========================================
► Flutter Blog App Playlist: • Flutter Blog App with ...
► How to capture image from camera in flutter:
► Link : • How to capture Image f...
► My Card App Flutter :
► User Circular Avatar Part 1 : • My Card App || Flutter...
► Use fonts in flutter Part 2 : • My Card App || Flutter...
► Final Part 3 : • My Card App || Flutter...
►Covid-19 Tracker App using Rest API's :
• Create Coronavirus (CO...
►Firebase Blog App Android Java:
• Firebase Blog App - Ho...
►C++ Tutorials :
• C++ Programming Tutori... .
rest apis, flutter rest api tutorials crash course,
For business queries : axiftaj@gmail.com
Thank you for watching my channel do give feedback about this video.
#flutter #fluttertutorial #form #components #flutter #asiftajtech
![Hunxho - Ball Forever [Official Video]](http://i.ytimg.com/vi/nki9ZTF9Uls/mqdefault.jpg)
source code:
github.com/axiftaj/Flutter-Rest-Api-Tutorials-With-Example
do give a start if you it helped.
already given you star and shared with friends, wish you, to get more stars. amazing tutorials series
for those people who are facing issue in map function in for loop, map function is a little bit modified so here is the code that u have to copy paste
for (Map i in data) {
postList.add(PostsModel.fromJson(i));
}
It's not necessary , it will work the way i taught them but most of the student didn't follow carefully that's why they faced isssues
Yes you are right. I face this problem for one whole day.
@@thetechbrotherss Sir he says right.
Thanks for helping
I was also facing that issue thanks for sharing
struggling from past 4 days with APIs integration now finally understand it very well ........love from INDIA sir
Share with your friends
1st time I feel like APi's are easy to integrate ❤️ big respect for you!
Share with your friends
Dhanyawad bro. Yadi apke jese guru ho sikhane ko to kisi ko koi doubt nahi rahega and again thanks bro...❤️
Thank you subscribe kr dain share kr dain doston k sath
You deserve millions of subscriber sirr, jus t love how you explained APIs so easily, I was finding it difficult to understand from a very long time
Share with your friends
Appreciate your Sophistication of HardWork for Public 😍
Thank you so much 😀
Sir one by one tut dekha bhaut ache se apne explained kiya hai. Eager for next continue tut video post.
Hopefully we will cover this series this week.
The explanation was awosome. I would never need to ask Google for the materials you have covered in the lecture... Love from Flutter Interns : )
Thank you sir
Thanks you sir muje bohot kuch sikhne ko mila muje bohot problem hoti jab api call karta tha par ab muje dout clear hogye Thanks
Great it helped, do subscribe, like the video and share it with your friends.
JAZAKAllah sir aaj bhi aap ki waja sy kuch new sekhny ko mila
glad to hear this
sir proper smj aaya best tutorial sir ji👍👍😊 i'm from india ❤
mazy kro
Wow sir thankyou so much fir this! I need this kind of tutorial thankyou sir 🙂love from india💌
Thank you pleas share with your friends
Thanks, Buddy finally Caught all the concepts till here IDK why but I took 5 retakes then I got it
hahahahhah this is experience, support me on insta: instagram.com/thetechbrotherss/
best tutorial I have seen in youtube
Thank you
explained very well... wait for next video
Will upload very soon. Hopefully will complete this series this week.
very nice and easy explanation sir
Thank you do share with your friends
sir when we started the loop
for (map i in data){
postlist.add(postmodel.formjson(i));
}
in this code the i is not working in fromjson code. it through the error and not working.
Check you must he doing something wrong
for those people who are facing issue in map function in for loop, map function is a little bit modified so here is the code that u have to copy paste
for (Map i in data) {
postList.add(PostsModel.fromJson(i));
}
Bro v nice keep it up i follow your play list and learn a lot about api and abele to integrate api in my freelance projects.
Glad to hear that, so subscribe and share with your friend.
@@thetechbrotherss sure sir
Amazing video brother! Keep it up!
Thank you subscribe
If anyone have error
in for loop
Use
for (map i in data)
Sahi ho gya to comment ko update kr dain
Crystal Clear explaination.thank you sirr :)
Go ahead you will love it, make sure to read the description and first comment. Do subscribe and share with your friends
excellent video. very nice explanation
thank you do subscribe and share with your friends
The argument type 'Map' can't be assigned to the parameter type 'Map' this erroe showing up when doing step you did at 12:02 min in video
Error is self explanatory click on this error go to the model and change string to dynamic and please watch video carefully till end.
Change the Map to "Map
Not working - 14:58 when you print postList length in list view
I write exact same code but my phone screen is empty not getting any data in listview.
Try everything.
test api in postman and then follow the process carefully
@@thetechbrotherss Already didi it API works well in postman
End level 💯
Subscribe
very well explained
Thanks for liking
I Love your video great work sir ❤
Share within your circle
Great explanation sir 👍👍👍
Thank you please share with in your circle.
bro love from india
Glad you liked it bro, do share with your friends.
Apko bolne ki zaroorat nhi hai phele hi krdia yeh sab
Apki instagram I'd kiya hai ?
I have a question.. please give me reply. Why we are creating model for JSON? I don't understand, why it is need?
To parse data and show them on front end
@@thetechbrotherss ok.thanks
Sir you explained everything very greatly in this video, but I don't know why this entire concept of creating List and FutureBuilder seemed very difficult to me, or maybe I need to watch it multiple times to understand it properly.
First time it's always difficult with practice and as you move forward it will be very easy
@@thetechbrotherss In Shaa Allah sir I'll try practicing it!
The body might complete normally, causing 'null' to be returned, but the return type, 'Widget', is a potentially non-nullable type. this error is coming
Please follow the video carefully it say data is coming null
salam sir sir ma na ya poucha na tha ka ap na for loop ka bahar q return kar wa ya hai data ku andar bhi tu hu sakhta tha
Taky data return ho
Assalam O Alekum.....
Jesa k aap ne kaha k agar post API ka jo response hai agar us mai se list yani k array ka naam hota to hamara model achay se ban jaata, kya model ko sahi tarah se banane k liye hum us response ko explicitly change nahi kar saktay ? kya hum is pooray response ko object mai wrap kar k is list ko naam nahi de saktay?
JSON response backend engineer bnata ha ap usko jaise kahin gy wo set kr dy ga r ap easyly handle kr lain
The argument type 'Map' can't be assigned to the parameter type 'Map'.dart
It's clear, go the model and change string to dynamic
@@thetechbrotherss thanks ho gya he
@@hammadahmad7963 bro can you tell me how you did this, mera nahi ho rha asy
ho gyaaaa.....
Hi sir Im getting an error, please help
for (Map i in data) {
postList.add(PostsModel.fromJson(i));
}
The i value in line postList.add(PostsModel.fromJson(i)); is giving the following error
The argument type 'Map' can't be assigned to the parameter type 'Map'
user 'Map as message is self explanatory.
Go to your model and change it.
write for(Map i in data) insted of for(Map i in data)
@@muhammadjavedrafique4592 brother i used this but now its give me this error for data ( the type string used in for loop must implemnt iterable)
bro when i print "i" it throw error 😑
Sir I got error in postList.add(PostModel.fromJson(i));
in (i)
share the error
thanks for making this video
It's my pleasure
if statment ko execute kr k loading show ho rha screen pr agy move nai kr rha else tk?aysa q ho rha hy ..JsonToDart plugin kamnai krr rr to google pr Json to dart use key ta kya uss wja sy data show nai ho rha yaa kia issue ho skta hy?
aise is liye ho raha ha k q k ap check ni kr rahy k error kahan par ha
use try and catch
Sir using this methos app runs smmoth on emulator and show response but on physical device it gives error after giving internet acces in .xml file and building apk it it showing blank screen
it means ap k parent widget ma issues ha, use expanded and write place
Thanks soo much for this
subscribe and share with you friends
Excellent Sir ! Sir tell me command in android studio for wrap with widgets. What command you type for wrap with widgets? Here control+ Enter not working for wrap with widgets
Btaie ro ha alr + shift
@@thetechbrotherss
Alt+Enter se huwa thanks Sir..
Can you please provide the JSON to dart model convertor extension in visual studio code because I am trying to download different Jason to dart converter it was not workin
You can use any online website for JSON to dart converter. I have not used VS code so i don't know.
did u solve this error
Asalam u Alaikum Respected Sir,
in line 24 where you use for loop
for(Map I in data){
postList.add(myModel.fromJson(i)); is not working for me
with the help of gemini I got this code which is working correctly
postList = (data as List).map((i) => myModel.fromJson(i)).toList();
nice
@@thetechbrotherss Thanks Sir,
Looking forward to meet you someday''
Yesterday a friend told me that I usually see Asif Taj in IT Park Peshawar,donno if its true or not
why i am not familiar with this code i think i am missing some pre-requisite for this code to understand i cant understand this syntax
Start from first video
Can't get output of api integrarion in chrome?
yes
sir Assalam walikom
sir mai vscode use kar raha hu mai konsi extension use karu please sir i am stucked off.
search json to dart on google
FormatException (FormatException: Unexpected character (at character 1)
^
)
I am getting this error
i think url is not correct, test the api in postman
Sir mera code run hogya h pr mujhe steps yaad nhi rehti h...mujhe prior knowledge nhi h programming ki dart hi first language h jo me sikh rha hu...plz guide what i have to do
Bhai muje bhi yad ni rehta, ap concepts clear kro
yeh error sy pareshan hu kya kru _TypeError (type '_InternalLinkedHashMap' is not a subtype of type 'Iterable')
Please follow the video carefully it's not list
nice
hello brother please help me with this ---------- The name 'PostsModel' isn't a type so it can't be used as a type argument.-------- I am getting this error but you are not
watch video carefully
you are doing something wrong
Nice video....
Thanks, do subscribe and share within your friend circle.
@@thetechbrotherss i have already done..sir will u plz make this video....?
Bro i have already provided your the content you need to learn how to utilise things according to your requirements based on concepts you have learn. This is actual development.
Sir can tell me what the difference between if I use that "AsyncSnapshot snapshot" or only "snapshot"?
List is returning list data in async you can define whatever the data type returning it could be bool, i suggest you watch my widget of the week series for better understanding of future and stream builder with snapshot.
do subscribe and share with your friends.
support me on insta: instagram.com/thetechbrotherss/
sir kindly also explain the model .from json, tojson,encoe,decode,etc..
already explained
@@thetechbrotherss can u please share yhe video link
11:24 I was not able to follow the process there. Could you explain the for loop again?
These are type of loops, we are looping on data
Sir i got error when i create class name PostsModel it's not show posts-model.dart
Please follow carefully 🥲
Sir I wants to make Netflix clone app with authentication features using firebase and I will use apis to get movies so the problem here is that how should I make my folder structure so that it looks professional
check my clean code playlist
Hello brother! everything is fine but i don't understand the line object.fromJson/toJson ? what is the functinality of these two functions ? if u would discuss then would be more helpful for me!
it map the values if you change the parameter name in model you will null values
can you please explain the use of postList.clear() that you added ?
It clear the data to avoid duplicating the data
I am subscribed to utr videos. Please explain How to use JsonToDart using android studio build json model
please watch part 5 and 6 i teach how you can do that
@@thetechbrotherss Yes Thank you for that and I have watched it , but in settings of jsonToDart which to be preffered. It is very canfusing as I have tried it.
i dint get the API only loading is showing at top of the screen
so plzz help
Please print snapshots, test api in postman
sir jab ma postmodel ki file bna raha hn to mera pas 4 files create ho rahi hain,,
1 address.dart
2 company.dart
3 geo.dart
aur json place holder sa data copy kia ha and same data ha array sa start ha
ap extra parameter select kr rahy ho
@@thetechbrotherss Thank sir.
Give me same project done with expansion list with builder and data from local json file... Plz....sir reply......
Please watched my video on expansion list and then part 10 of this video series. You will get your answers. And yes i reply to every comment and feel free to contact via social media platform.
@@thetechbrotherss give ur fb contact....
See description
In part 10 just place the the code of my expansion tile video into your if block snapshot.has and see the magic.
hello, I am not able to select that option new file Json to dart, how to solve this?
Watch part 5 and 6 to create models for api
This API code is not working
It’s working bro check the comments working with everyone
so hamein pehle api se model nikalna hoga postman se, and than usko convert krna hoga?
g
sir sime aap jaisa code kia hai likin screen per Text k ilawa kuch or show nahi ho raha
ap ny kuch mistake ki hogi double check it
nice sir
thank you
Hi, thanks for the video. I have issue. when i am trying to display the id and userid. it is showing error. Can you please explain how to do that
share the error please always
@@thetechbrotherss it was resolved thank you.
sir, you have shown only 3 screens in this video, but there are lot of screens in the source code.
it's a complete playlist
@@thetechbrotherss oops! sorry. I didn't notice. Thankyou sir
how to pass a query when i log in and the id from that login will go to the url?
I didn't understand your question
tnx bro..
do share with your friend
Sir i coded it in android studio and in this code i have no error, when i run it in chrome web it is showing me no data, its showing blank page is there any solution for this issue. How can I run it in Google Chrome as well?
Wrap the futurebuilder with expanded widget
check for exceptions, add internet permissions
Hello maine same code likha hai phir bhi loading ... Hii show hota hai what is the reason behind this ???
use try catch to catch the error
I skipped the ! operator in the following code. Check if you made the same mistake.
if (!snapshot.hasData) {
return const Text('loading');
sir please yeah answer kardain ky for(map i in data) yeah ju likhna hai woh list ma jason ky object ko add karna ky liya likha hai na or yeah map kuhn use kiya hai plz
g
Matlab toh samjhaye ki Aap ne if else and for loop kyu use kiya..
sub kuch smjhaya ha bar bar smjhaya ha k kiss condition ma use krna ha kiss ma ni
ap pehle api k structure ko smjho
Sir I have watched this video multiple time even with full concentration but I'm not getting a single concept. What should I do please guide me. Thank you
Start the playlist from start
Osm video
Thank you
Is it necessary to create Live REST API's to integrate them with flutter?
You must know to integrate apis with flutter
am getting error at homescreen page, Map i in data=> in getting error
Please watch video carefully, understand the concepts and fix it. You must be doing something wrong
hey brother the api response returns null.
any solution
check api again and test it in postman.
19:28 pr custom list jo banai hai us ko clear ku karty hain? can someone expalin reason behind it.
taky api hit ho to data replicate na ho
sir this Api code is not working .
It’s working bro
I dont understand , what is null safety ? and how i understand when null safety or not ?
null safety means value cannot be null for variable
very nicely explain.can you kindly make an edit in this video, i need to take the token and user id through the login and keep it along in all pages including this list view plus add search to the ist view as well thankyou
Store the value of user id in shared preference in the get the value via future function or using async your own method then pass it to query. For searching listview builder go ahead your watch covid app tutorials i have explain how we can implement it. Do subscribe and share with your friends.
@@thetechbrotherss thankyou for the quick respnse. i am trying all the methods but coudnt succed...can you give me any example code where i can get the shared prefrences as well as can get the list itm values from the api as well.
here is the code i cant get the values in bidy.dont know what i am doing wrong.
please help me out so i can get my next step.i need these prefrences in all the pages.
//defined to collect the data in String values
String token = "";
String userid = "";
String databaseid = "";
@override
void initState() {
//TODO:implement initState
super.initState();
//Function called
_showItemList();
}
// Variable for collecting data from database
var data;
//_login function is built to call data from the server
Future _showItemList() async {
try {
//Fetch Saved Variables Data from SharedPreferences to send in Header
SharedPreferences prefs = await SharedPreferences.getInstance();
setState(() {
token = prefs.getString("Token")!;
userid = prefs.getString("UserId")!;
databaseid = prefs.getString("DatabaseId")!;
print('prefs->token=' + token);
print('prefs->userid=' + userid);
print('prefs->database=' + databaseid);
});
Map apiHeader = {
"Content-type": "application/json",
'token': token,
'userID': userid,
'databaseID': databaseid,
};
Map apiBody = {
"ItemCategory": "",
"DepartmentID": "",
"VendorNumber": "",
"StoreID": "1001"
};
//For GetItemsList
final String url =
" api url here";
Uri uri = Uri.parse(url);
//final finalUri = uri.replace(queryParameters: apiBody); //USE THIS
final finalUri = uri; //USE THIS
http.Response response = await http.get(
finalUri,
headers: apiHeader,
);
if (response.statusCode == 200) {
data = jsonDecode(response.body.toString());
print('response.body=' + response.body);
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text("Data : ${data}")));
} else {
// showAlertDialog(context);
print('There was an error while connecting to the server.');
print(response.statusCode);
}
} catch (e) {
print(e.toString());
}
}
Sir, how to create your own api(i mean real API) ? is there any specific platform for it...
use node js
@@thetechbrotherss thanks
sir why we use snapshot in the future builder widget
this is just a name you can use any name, it returns different states
I want to show data one by one, like after pressing next button, next item should be shown how to implement that
Create an api for that and use it accordingly
Boss Please make video about dio...plz
ok
what is the purpose of postList.clear().
to clear the list before adding the data into list to avoid duplication
brother snaps hot data hasData is true but kuch b show hii ho rha?? na title na id
Data parse ni ho raha hoga na
waaah Taj
thank you
Sir i think the line 22 code should be inside the if statement starting at line 23
I don't remember right now but you can learn the procedure and implement it
we can't decode data without checking response code (10:15) this is flow error
to decode you have to wait for the response
Can you post full code or a github repo?
very good tutorial
Don't forget to give a start.
github.com/axiftaj/Flutter-Rest-Api-Tutorials-With-Example
Sir g humna jo i use kiya ha wo tu kahi declear ni krwaya tu wo kesy use ho gya
Bhai loop ha na
should i call async func inside build
you can using future widgets
Bhai pura flutter bootcamp follow kr ra hu pichle sare videos samjh aye but seriously ye video m kuch bhi samjh nhi aya mujhe
koi bat ni bro, practice kro smjh jao gy
@@thetechbrotherss ok brother