Making Http requests and Using Json in Dart's Flutter Framework
HTML-код
- Опубликовано: 3 мар 2018
- In this tutorial, we build a basic flutter application that requests information from the starwars API.
Dart-Code Extension for VS-Code: github.com/Dart-Code/Dart-Code
Source Code: github.com/tensor-programming... 
Наука
Wow! Very well explained, and very well executed
Thank you, Glad you like the content and are finding it useful.
Your explanation is really awesome.Keep uploading.
Thank you. Got a load of content ready to go, just need to find the time to make it.
Thank you very much for the tutorials!
Glad you enjoy them. There are more in the pipeline. Got a few larger ones I want to do.
Awesome tutorial. I really appreciate your efforts.
Thank you, I am glad you are finding it useful.
Love your creations...
thank you! really helpful for me.
Thanks a lot man. I was messing with it from around whole day due to the missing initState() part. Your video helped a lot. :heart:
Cheers, glad you found your problem.
@@TensorProgramming Yeah.. :)
Very helpful, thank you so much!
Thank for this tutorial, very helpful!!!
I am glad you found it useful.
To the point ! No bullshit
I love it !!!!
Great work, thank a lot
It's very helpful for me!
Awesome Tutorial!
Glad you enjoyed it.
many thanks Tensor, very good series of videos. you are a great developer and teacher. may I ask you what is the name of the vs code extension that turn the (arrow function => to an actual arrow ) and the (greater than or equal to >= to its mathematical form)?
Its not an extension, its the font called Fira code which has a feature called code ligatures. Fira code is free, just download it and enable code ligatures in your VSCode settings.
Thank you!
Superb!
Thank you.
Flutter is awesome
Yeah, Flutter is great.
Thaaaank yooou!!!
Awesome
Thank you
Great Tutorial. Just one question, how do I integrate this code with infinite gridview. I have a json that throws data by page (?page=1)
Well, you could make it so that the json gets pulled when you hit a certain offset on the gridview. You want to calculate the offset of each element and then multiply that by roughly the amount of elements on each page of the json request. From there you can use the scroll controller's offset to initiate a new API call with the next page to populate the data as you are moving down the list.
One of the other ways that you could "simulate" the infinite scroll view is to use a StreamBuilder and a stream to call the API. As you move down the scrollview, the API grabs new elements and puts them into the stream which initiates a rebuild of the StreamBuilder. For the user, it would look like the application is loading the data (for a few milliseconds) when it hits the next page but it would still seem like the listview is infinite.
The final way that you could do it is by pre-calling the API with all of the pages up front (or a few of them at a time). Fetching all of the data and then pushing it into the scrollview.
usefull
More layout than HTTP. What solutions are there for retry if no etwork connection, for example?
There are various libraries that you can use to see if there is a network connect and to see what kind of network connection the user is using. Remember, flutter is just a layer on top of android or iOS, so anything on their API can be access via a library/plugin or by writing a small little piece of code.
Good tut. May I make local, ofline json database, with this method?
You could but you would have better luck making an object to serialize and deserialize the json from and then using an existing database like sembast or shared_prefs. I've got tutorials on all of these things. You can find info on shared_prefs here: pub.dev/packages/shared_preferences and sembast here: pub.dev/packages/sembast
Hello, excuse me, can you help me? Please. I can't get a single Object of my API, I Can get 2 or more Objects (Json), but when I get API/Shoes/id/ returns a single Object, and I can't show in a ListView, but with API/Shoes/ returns all ahora and I Can show them. Do you have any idea?
If you are using this example as a template, then you are pulling in your objects as a list. Just call to the list by index and you'll get a single item. You can then of course increment and decrement the list index depending on some action to show each object one at a time.
@@TensorProgramming Thanks but I think I need to be more precise to make myself understood. When I get URL: API/Shoes/ the results in postman are
{
id:1,
name: "shoe1"
},
{
id:2,
name:"shoe2"
},
{...},
Is a List and I Can show in ListView,
But when I get URL: API/Shoes/id/
where id=1 for example, the result is
{
id:1,
name:"shoe1"
}
And It is not a list y I can't show in ListView. I have this error: type'_InternalLinkedHashMap' is not a subtype of type 'List'. If you can help me, I Will thank you so much.
Can you pass me your email?
@@MCAHHSOFICIAL Its because you are trying to put a single object into a list from a Hashmap. If you are following this particular tutorial, the way I've setup things is just by directly deserializing the JSON into a global List variable called data through a Hashmap called resData.
Instead of declaring data as a List type, just declare it with var or build a small model object that represents the JSON you are deserializing and then declare the data object as that type. For instance if I wanted to represent the JSON that you are talking about the class would look something like this:
Class Shoes {
int id;
String name;
Shoes(this.id, this.name);
Shoes.fromJson(Map json)
: this.id = json["id"], this.name = json["name'];
}
You now have the ability to covert the JSON objects into Dart Shoes objects by calling to the Shoes.fromJson named constructor. In this example, I write; var resBody = json.decode(res.body); Instead, now I would just add something along these lines;
var resBody = json.decode(res.body).then((json) => Shoes.fromJson(json));
The resBody variable has become a Shoes type (that is if you are calling to the API/Shoes/ API the query parameter for id = 1).
You really don't have to do it in this way though, as I said in my first reply, you can bring the data into your application as a list or a stream and then just increment the index as you need the items. That way, you only make one single request to the API even if you've got 100 different shoe items that you want to present. In this case, you would still make a Shoes class type like before but instead of just calling .then on the json.decode call, you would do something more like this:
List shoes = json.decode(res.body).then((json) => json.forEach((shoe) => Shoes.fromJson(shoe)).toList());
Another thing to keep in mind is that in my example for this video, the JSON had a results key. When I call to resData["results"] I am specifically getting that key in the Dart hashmap which contains a List of the JSON objects (which at this point are inside of a Dart map; its just a List type). With your API example there is no key before the JSON list appears so you don't have to call to resData["results"]. The same goes for when you are unwrapping the single JSON object from the API query; you're just getting a single JSON object and coverting it into a hashmap and then trying to push that hashmap into a List type hence the error message.
I have tons of other examples that show different ways that you can access APIs from Flutter and showcase some of the ideas that I just talked about here. The dynamic lists with streams video, the movie searcher app series, the flux crypto tracker app, the weather application, the BLoC examples etc.
BTW, the email that I use for the channel is on my channel page, but if you need more help you can always go into my discord: discord.gg/EDavvX
I used this for Login page that posts json to a REST API on my server, I found that when the user enters the incorrect password or username they receive an error but if they then enter the correct credentials the json.decode method returns the same error, they have to close the app and login again for it to work :(
I would recommend asking the flutter community about the error message that you are receiving; they should be able to point you in the right direction at least.
Thanks, I will do more debugging then ask
I have a similar issue where the user has to reopen the app to see the list of starships. It has the same issue if i use the github original. Were you able to find the cause?
While running a code it simply showing only appbar rest of the things are not printing
Works fine for me. You should take a look at the source code in the description and make sure you didn't make a typo.
Thank you so much for this wonderful toturial |I used it with my API and it works like sharm :),
but I have a question what if the api contains only one named object not list of objects like:
StoryDetails: {
StoryId: 1000292
ViewedCount: 0
StoryTitle: "Hello from New york"
CategoryId: 22
CategoryName: "world "
}
how to get the "StoryTitle" from this API, for example, in the same way of importing the data from a list API?
You're asking how to get the one item from the JSON? you can just make a simple data class that has that one item in it and then serialize the json into that object. You don't need to serialize all of the JSON fields when you parse an API, you can choose which ones you want to parse or not.
I am getting an error
(Elided 4 frames from package dart:async)
I check my code again there's no error before pressing a hot reload I restart my app too still didn't work
Thats not an error but a warning. Regardless you should compare your code with my code in the repo to see if its the same. If you are still seeing problems let me know.
@@TensorProgramming I solve it :) ty
Thanks
Thank you as well.
SocketException: Failed host lookup: 'swapi.co' (OS Error: No address associated with hostname, errno = 7)
help?
Hmm, seems like for whatever reason you can't access the SWAPI api. Try navigating to the site with your browser to make sure: swapi.co/ and swapi.co/api/starships/
There is no problem while browsing that site and neither with the json data..@@TensorProgramming
@@karanshrestha8280 read this: github.com/dart-lang/http/issues/185 the problem is a DNS lookup error. You can also try importing the http library as a dependency in your pubspec yaml.
Try cloning the github repo and see if that gives you an error or not. I just ran it personally, and had no issues. I did go ahead and import http just in case though. I also guess that its possible that your emulator isn't hitting the network properly, check to see if its running a proxy or not getting through your firewall.
I have a website and there is a member registration system
I want to create an app by flutter & dart
How to create a new login and registration system Using api authentication
Please don't spam the same comment on multiple videos. I answer all of the comments on my channel within a day in most cases. See your other comment for a reply.
Thank you.
Has anyone else experienced this? I followed the tutorial and double checked my code, but I get this error:
FormatException: Unexpected character (at character 1)
^
Have you tried just cloning the github repo and seeing if the code runs? If it doesn't let me know what errors you get. Doing a simple google search with this error gave me an example where the pub server was offline so perhaps it has something to do with that? Maybe try rebuilding the flutter app but running flutter clean etc.
Edit: Actually I think I have figured out the problem here. So the issue is coming from the Json decode execution and it seems like you might have the wrong URL and are trying to decode HTML as JSON. Make sure you are using the swapi.co/api/starships/ url for the code and you also include the appropriate headers in the request so that it does get the JSON request, {"Accept": "application/json"} Accept needs to be capital and application/json is all lowercase.
I added a forward slash to the end of my url variable for the api url and it started working. Thanks for the quick reply!
I am glad you were able to get it to work.
errors.dart:187 Uncaught (in promise) Error: Expected a value of type 'int', but got one of type 'String'
How to
Likely a problem with the video being very old and the API changing over that period of time. Look at the JSON and see where there is an int where there used to be a string and change the type.
not bad
i hope next coming videos will be on AS))
AS? not sure what you mean.
@@TensorProgramming Android Studio)
@@TensorProgramming I am waiting your. Videos bro)
@@dangerhoggish5142 I won't be using Android Studio; I find the workflow to be too clunky. Can do everything I need to do using either Emacs or VsCode.
Should we use vs too instead of as?
And what about to post the data???
I have many videos on the subject but its generally the same process, just with http.post rather than http.get
Kinggggggggggggggggg
You sound just like levelcapgaming RUclipsr
Dunno who that is. Got the monotone voice so yeah, anyone else with a monotone voice sounds like me.
You should show yourself writing out the code instead of jump cutting, makes it a little harder to keep up when you do that.
I jump cut because these videos are 1-2 hours long before I edit them out. I'd rather have a more concise video that you can pause anywhere then make a video that is boring because it is so long.
Tensor Programming okay. Just giving you feedback as a viewer.
@@TensorProgramming Yup, great thinking.
Tensor, are you using some sort video editor that parses through your video and removes any silence that are between your sentences? If yes, PLEASE don't.
Generally when people speak to others, they just don't finish a sentence and IMMEDIATELY start a new one, they generally pause to make sure the listener has observed what was said then get ready for the new sentence. Your videos are great, but I feel like I'm listening to a robot and the screen segments just pop fast. What's the rush? Why try to squeeze the videos in the shortest time that is no longer a pleasure to watch.
I love your content and your knowledge, but I get become anxious watching them, because of this style of editing your videos. Just let it be the way you spoke it.
Thanks!
No, I edit my videos that way manually often times because they end up much longer then I want them to be otherwise. People are less likely to sit through an entire 30 minute video then a 20 minute video. Yes, there have been times when I've cut them too close together but I've gotten better at not doing that in my newer videos. Hopefully you don't encounter this problem as much. I know many of my subs also tend to put the videos on 1.25x or 1.5x anyhow.
@@TensorProgramming
Thanks for the reply;
There are lots of videos out there which I consider them as "Demos" than teaching. I could sit back and watch them as "Demo"
But I consider your materials as "Teaching/training" materials and if someone is watching your videos, that's because they are new to Flutter. You cover a lot of grounds in your videos and requires ALL these new materials to sink in and all the dots get connected.
*IF* someone wants to learn from you, 30 minutes is not going to kill them.
My suggestion is, just leave the videos alone just as you spoke it. [Good things should be altered] :-)
There was a video on Udemy that the instructor had done exact thing, cutting the silence parts out. He got so many 1 star and returns that even Udemy customer service acknowledged many people had complained.
Just because some people do not bother themselves to give you feedback, it doesn't mean, everything is ok.
Hope this helps!
..Ben