Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,830 --> 00:00:05,810
We've now successfully refactored our app widget over to a stateful widget now ready to move forward
2
00:00:05,810 --> 00:00:10,370
and make sure that any time a user presses on our button, we fetch an image to show on the screen.
3
00:00:10,940 --> 00:00:14,810
We're going to first get started on this process by taking a look at the API that we're going to use
4
00:00:14,810 --> 00:00:15,920
to fetch images from.
5
00:00:16,550 --> 00:00:22,820
So inside my browser, I'm going to navigate to the APIs documentation, which is at JSON Placeholder
6
00:00:22,820 --> 00:00:25,460
DOT Type I code dot com.
7
00:00:26,650 --> 00:00:29,250
So inside my browser, I'm going to navigate over there.
8
00:00:30,430 --> 00:00:37,720
This is what we call a fake JSON API, so it is a bunch of fake data solely out here to give us a better
9
00:00:37,720 --> 00:00:41,320
source of data for testing and prototyping stuff rather quickly.
10
00:00:41,830 --> 00:00:45,370
So all the images that we're going to see working with are just totally fake in nature.
11
00:00:45,400 --> 00:00:46,720
There's nothing special about them.
12
00:00:47,650 --> 00:00:53,650
We can scroll down and get a better idea of how this API works by finding the resources section, so
13
00:00:53,650 --> 00:00:57,490
one of the possible endpoints that is available to us is the photos endpoint.
14
00:00:58,270 --> 00:01:03,370
If you click on photos right here, it'll show you all the different photos that are available over
15
00:01:03,370 --> 00:01:04,150
this API.
16
00:01:04,780 --> 00:01:09,880
So this is an array of objects where every object represents one distinct photo.
17
00:01:10,600 --> 00:01:15,580
Inside this object, you'll see that there is a Eurail property, this Eurail right here.
18
00:01:16,820 --> 00:01:23,750
Is a link to an actual image, so if I copy that link and open it up inside of a new tab, I'll see
19
00:01:23,750 --> 00:01:25,340
the actual image appear on the screen.
20
00:01:26,360 --> 00:01:26,810
There we go.
21
00:01:27,200 --> 00:01:30,030
So very ugly, but it's going to get us started for right now.
22
00:01:30,860 --> 00:01:35,060
Now, as you might have seen just a moment ago, when we're looking at that endpoint, there's a total
23
00:01:35,060 --> 00:01:39,440
of five thousand images that are loaded on this photo's endpoint.
24
00:01:39,710 --> 00:01:44,750
And chances are that when our application boots up, we don't want to immediately fetch five thousand
25
00:01:44,750 --> 00:01:45,730
different records.
26
00:01:46,280 --> 00:01:51,800
So rather than trying to fetch all five thousand in one go, we're going to instead get just one image
27
00:01:51,800 --> 00:01:52,460
at a time.
28
00:01:53,180 --> 00:01:58,770
So to get one image at a time, you'll notice that every image object has a ID property tied to it.
29
00:01:58,910 --> 00:02:02,960
So this is I.D. one, two, three and so on.
30
00:02:03,920 --> 00:02:10,430
To get some very specific image, we can slightly modify the URL that we are visiting so I can try going
31
00:02:10,430 --> 00:02:19,280
to photos one and that will return the JSON data for just image one by itself where I can do image or
32
00:02:19,280 --> 00:02:23,980
photos one thousand and that will give me the photo with ID one thousand like so.
33
00:02:24,770 --> 00:02:27,950
So I think you can kind of get idea of how we're going to approach this.
34
00:02:28,370 --> 00:02:33,320
We're going to say that every time a user presses that button, we're going to increment a little ID
35
00:02:33,320 --> 00:02:40,220
counter by one, will make a HTTP request to fetch this data and then we'll show the world that is reflected
36
00:02:40,220 --> 00:02:41,330
right here on the screen.
37
00:02:42,270 --> 00:02:43,140
So that's the plan.
38
00:02:44,050 --> 00:02:49,770
Now, one thing that you might notice here is that when we get this data back, it is pure JSON data.
39
00:02:50,770 --> 00:02:54,370
So we're definitely going to figure out how to work with JSON data with DART.
40
00:02:54,760 --> 00:02:56,180
So let's take a quick pause right here.
41
00:02:56,230 --> 00:03:01,240
We're going to come back to the next section and we'll take a quick glance at a dart pad program and
42
00:03:01,240 --> 00:03:04,050
get a better idea of how to work with JSON data like this.
43
00:03:04,060 --> 00:03:06,090
So quick break and we'll see you in just a minute.
4503
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.