Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
0
1
00:00:00,450 --> 00:00:07,350
In order for our app to be able to play sound both on the iOS ecosystem as well as on Android, we're
1
2
00:00:07,350 --> 00:00:13,710
gonna use some Flutter packages to help us to do that. Before we can start incorporating a package to
2
3
00:00:13,710 --> 00:00:16,550
help us play sound in our Xylophone app,
3
4
00:00:16,560 --> 00:00:20,980
we first have to understand what Flutter packages are and how they work.
4
5
00:00:21,030 --> 00:00:26,520
So in order to do this we're gonna use a really simple package so we can see all steps of the process
5
6
00:00:26,880 --> 00:00:31,380
and then we're gonna apply our knowledge to be able to use a package to get our Sylophone app to play
6
7
00:00:31,380 --> 00:00:33,210
sound a little bit later on.
7
8
00:00:33,210 --> 00:00:36,060
So first, what exactly is the package?
8
9
00:00:36,070 --> 00:00:43,230
Flutter packages are open source libraries of code that other people have created which you can incorporate
9
10
00:00:43,260 --> 00:00:46,240
into your project with minimal effort.
10
11
00:00:46,290 --> 00:00:53,010
Now in order to browse all of the Flutter packages, head over to pub.dartlang.org/flutter.
11
12
00:00:53,190 --> 00:00:58,620
And these are packages that are specially made to be compatible with Flutter projects.
12
13
00:00:58,620 --> 00:01:03,690
Here you can see on the home page, they've got a whole bunch of the top packages.
13
14
00:01:03,690 --> 00:01:09,810
So these are the most popular and the most frequently used packages. And we're going to be using some
14
15
00:01:09,810 --> 00:01:11,470
of these a little bit later on.
15
16
00:01:11,700 --> 00:01:18,030
But you can also search for Flutter compatible packages in the search bar here. And this is what we're
16
17
00:01:18,030 --> 00:01:19,250
going to do.
17
18
00:01:19,320 --> 00:01:23,340
We're going to search for a package that generates words.
18
19
00:01:23,580 --> 00:01:29,010
And once you hit enter, you'll notice that there's a lot of packages that might vaguely match that search
19
20
00:01:29,010 --> 00:01:36,600
term. But what's really helpful is that on this website, you'll see that each of the packages are shown
20
21
00:01:36,900 --> 00:01:40,190
with a description but also a score.
21
22
00:01:40,200 --> 00:01:46,920
For example, out of the ones on this page the ones that actually do what we want it to do, which is something
22
23
00:01:46,920 --> 00:01:49,850
that generates words in English,
23
24
00:01:50,070 --> 00:01:51,930
there's two that I can see so far.
24
25
00:01:52,000 --> 00:01:55,950
There's the English word package and there's the random words package.
25
26
00:01:56,070 --> 00:01:59,090
But you can see this one clearly has a much higher score.
26
27
00:01:59,520 --> 00:02:04,450
So if we click on this, you can see that the score is made up of a number of things.
27
28
00:02:04,620 --> 00:02:09,310
And it's ranked in the search by how popular it is, how many people have used it,
28
29
00:02:09,360 --> 00:02:10,680
what is the health of the package,
29
30
00:02:10,680 --> 00:02:12,980
so how good does the code look,
30
31
00:02:13,050 --> 00:02:16,980
how frequently is this package of code updated by the author.
31
32
00:02:17,490 --> 00:02:19,680
And finally we end up with an overall score.
32
33
00:02:20,040 --> 00:02:22,140
And clearly the higher the better.
33
34
00:02:22,140 --> 00:02:28,740
So you can see this one English words has a 100 points, but the other one, the random word, only has
34
35
00:02:28,830 --> 00:02:29,920
85.
35
36
00:02:29,940 --> 00:02:33,420
And it got some points docked because there were less people using it.
36
37
00:02:33,810 --> 00:02:38,520
So when you're looking for packages, be mindful that there might be lots of packages that do the same
37
38
00:02:38,520 --> 00:02:43,680
thing. But when you look at the score, you'll be able to pick from all of the packages one that might
38
39
00:02:43,680 --> 00:02:51,560
be the most robust and best suited. A lot of these packages are also made by the Flutter team.
39
40
00:02:51,560 --> 00:02:57,470
For example, on the home page we've got a Flutter package called shared preferences.
40
41
00:02:57,470 --> 00:03:03,800
And when you look at the right bar here, you can see that the author is the Flutter team. And it's been
41
42
00:03:03,860 --> 00:03:06,560
uploaded by a bunch of people who work at Google.
42
43
00:03:07,220 --> 00:03:12,440
So when you're looking for a package, this might be another indicator that this is a good package to
43
44
00:03:12,440 --> 00:03:15,160
trust and to use.
44
45
00:03:15,330 --> 00:03:19,250
Let's go back to that package we found, the English words package.
45
46
00:03:20,010 --> 00:03:23,740
And let's take a look at how we can use it.
46
47
00:03:23,880 --> 00:03:30,930
You can see that this package contains about 5,000 most commonly used English words. And it also
47
48
00:03:30,930 --> 00:03:36,300
has some functions that will be useful when you're trying to work with English words.
48
49
00:03:36,300 --> 00:03:41,610
So for example you can print the top 50 most used nouns in the English language or calculate the number
49
50
00:03:41,610 --> 00:03:43,470
of syllables in a word.
50
51
00:03:43,470 --> 00:03:50,460
And we're going to take this package and use it inside our project just to see how it all works.
51
52
00:03:50,580 --> 00:03:55,680
Whenever you find a package that you want to work with, the easiest way to get started is to click on
52
53
00:03:55,680 --> 00:04:01,270
the installing tab and see what the authors say about installing this package.
53
54
00:04:01,290 --> 00:04:04,900
So step one is to depend on it.
54
55
00:04:04,920 --> 00:04:12,660
So we have to head into our pubspec.yaml file, and we have to paste in this line where it specifies
55
56
00:04:12,750 --> 00:04:16,650
that we want to use the English words package as a dependency.
56
57
00:04:16,680 --> 00:04:21,170
So we're saying that our project is going to depend on this package.
57
58
00:04:21,660 --> 00:04:27,620
So let's open up our pubspec.yaml and under where you see it says cupertino icons,
58
59
00:04:27,720 --> 00:04:30,990
we're going to paste in what we just copied over.
59
60
00:04:30,990 --> 00:04:38,010
Notice that cupertino icons is also a package that you can find inside the Flutter packages.
60
61
00:04:38,010 --> 00:04:43,020
And this is a Flutter package that's developed by the Flutter team.
61
62
00:04:43,020 --> 00:04:49,840
And what this does is it allows you to use the iOS icons inside your Flutter app.
62
63
00:04:50,070 --> 00:04:56,260
And this is usually included in all of these starting files when you're creating Flutter apps.
63
64
00:04:56,280 --> 00:05:03,970
Now that we've added our dependency in here, what does these carat symbols mean exactly? There's a couple
64
65
00:05:03,970 --> 00:05:07,330
of ways of adding these dependencies into your YAML file.
65
66
00:05:07,360 --> 00:05:11,320
The easiest way is to simply add the name of the dependency.
66
67
00:05:11,320 --> 00:05:16,930
So in this case it would be english_words and that should match with whatever you see at
67
68
00:05:16,930 --> 00:05:19,930
the top here, before the numbers start.
68
69
00:05:19,930 --> 00:05:25,660
So in this case this package would be cupertino_icons and our previous one would be called
69
70
00:05:25,750 --> 00:05:28,300
english_words.
70
71
00:05:28,300 --> 00:05:36,370
Now what this does is it will tell Flutter to grab this particular package called English words from
71
72
00:05:36,370 --> 00:05:41,860
the default location which is that same website that I just showed you just now, pub.dartlang
72
73
00:05:41,920 --> 00:05:44,600
.org. By not having any numbers
73
74
00:05:44,650 --> 00:05:50,240
after this, we're saying grab any version you like, anyone that you can find essentially.
74
75
00:05:50,620 --> 00:05:58,510
But if we go ahead and add a virgin number after the name of the package, we're telling Flutter to download
75
76
00:05:58,750 --> 00:06:05,250
any version of this package that begins with the major version of three.
76
77
00:06:05,290 --> 00:06:13,510
So this means that if the authors of this package updated their code to version 3.6 or 3
77
78
00:06:13,510 --> 00:06:19,720
.7 or even 3.2.1 etc. It's all fine.
78
79
00:06:19,720 --> 00:06:28,660
We're happy to use it. But if the authors have updated their package to version 4.0.0,
79
80
00:06:28,690 --> 00:06:33,820
so as long as the first number changes to the next one, then we're not going to take it.
80
81
00:06:33,820 --> 00:06:39,820
The reason is because when people update their code base, there can be breaking changes so they might
81
82
00:06:39,820 --> 00:06:42,800
have done something that might just crash your app.
82
83
00:06:42,910 --> 00:06:49,210
And because we're using these as dependencies which means that whenever we update our dependencies, we're
83
84
00:06:49,210 --> 00:06:53,940
going to grab the latest version of the package and incorporate it into our project.
84
85
00:06:54,070 --> 00:06:59,440
If something changes from their side, then it might break our code.
85
86
00:06:59,470 --> 00:07:01,330
Now how do I know about this?
86
87
00:07:01,330 --> 00:07:04,400
Well of course the Flutter documentation details this.
87
88
00:07:04,720 --> 00:07:10,300
In this section of the documentation where they talk about using packages, they talk about all of these
88
89
00:07:10,360 --> 00:07:13,210
different versions and what they will mean.
89
90
00:07:13,210 --> 00:07:20,410
So my recommendation is whenever you're using a package from the Flutter packages, always specify the
90
91
00:07:20,410 --> 00:07:28,060
version and add a caret or that little top hat symbol in front of the version to limit it to that major
91
92
00:07:28,060 --> 00:07:28,990
version.
92
93
00:07:28,990 --> 00:07:33,510
That way you get most of the benefits and less of the downsides.
93
94
00:07:33,610 --> 00:07:41,290
Now that we've added this to our pubspec.yaml file, the next step is to actually install the package.
94
95
00:07:41,830 --> 00:07:49,480
And in order to do this, we need to run pub get. And you can either do that in the terminal as they described
95
96
00:07:49,600 --> 00:07:56,080
in the documentation, or if you're working inside Android Studio, all you need to click on is packages
96
97
00:07:56,200 --> 00:08:00,880
get. And this will run the same command and it will go to that website
97
98
00:08:00,880 --> 00:08:07,990
we were on previously. pub.dartlang and it will download this package and incorporate it into your
98
99
00:08:07,990 --> 00:08:09,510
current project.
99
100
00:08:09,520 --> 00:08:16,780
So now when you click on your external libraries folder, you'll notice that we have one extra Dart package.
100
101
00:08:17,280 --> 00:08:24,730
And if you scroll down, you'll find our English word package now added into our project with very little
101
102
00:08:24,730 --> 00:08:25,790
effort from our side.
102
103
00:08:26,740 --> 00:08:30,340
So now the final thing we need to do to be able to use it,
103
104
00:08:30,340 --> 00:08:39,400
we have to import it into our code. So let's copy this and paste it to the top of our main.dart and
104
105
00:08:39,460 --> 00:08:41,920
then we can get started using it.
105
106
00:08:42,640 --> 00:08:48,040
So most of the documentation for the packages should appear on the read me page and commonly you'll
106
107
00:08:48,040 --> 00:08:55,090
see a few examples in the examples tab. And this kind of tells you how you could work with this package
107
108
00:08:55,090 --> 00:08:56,610
and what it can do.
108
109
00:08:56,830 --> 00:09:03,910
So in our case, what if we wanted to get a English adjective and we want to display it on the screen?
109
110
00:09:03,940 --> 00:09:10,750
Well instead of having a container, I could have a text widget and the string that's going to be displayed
110
111
00:09:10,900 --> 00:09:15,440
in the text widget is going to come from my brand new package.
111
112
00:09:15,490 --> 00:09:21,940
Now I can see that here, they're tapping into something called nouns and I'm gonna do the same.
112
113
00:09:21,970 --> 00:09:26,500
So for my text, I'm going to use nouns which you can see,
113
114
00:09:26,500 --> 00:09:27,960
this comes from.
114
115
00:09:28,180 --> 00:09:34,300
And if we wait here for a bit, you can see our quick docs tells us that this will list the top English
115
116
00:09:34,300 --> 00:09:40,340
nouns, and the list is sorted in order of frequency of use in the English language.
116
117
00:09:40,450 --> 00:09:49,300
And so if we select this and we write .first to get the first noun in that list of nouns, and we go
117
118
00:09:49,300 --> 00:09:55,750
ahead and run our app, right here in the top left corner, you can see the word time,
118
119
00:09:55,810 --> 00:09:57,400
if you have really good eyesight.
119
120
00:09:57,640 --> 00:10:07,000
But let's move it into the center to help you see it a bit better. So that says time and I could go into
120
121
00:10:07,010 --> 00:10:14,720
my list of nouns and instead pull out the one that's last in the list. And that happens to be the word
121
122
00:10:15,470 --> 00:10:16,880
apology.
122
123
00:10:16,880 --> 00:10:24,560
Now I can also instead of using nouns, I could get some adjectives. And let's see what the last adjective
123
124
00:10:24,710 --> 00:10:26,840
is, naval.
124
125
00:10:26,870 --> 00:10:27,490
Okay.
125
126
00:10:27,680 --> 00:10:33,440
Now you might ask, well how did you know that there is this thing called adjectives? Because if you try
126
127
00:10:33,440 --> 00:10:38,140
something else, like verbs, it doesn't really work. That doesn't exist.
127
128
00:10:38,210 --> 00:10:41,030
How did I know that there's nouns and adjectives?
128
129
00:10:41,030 --> 00:10:46,730
Well remember that we've already downloaded the entire package that's called English words into our
129
130
00:10:46,730 --> 00:10:50,060
project. So you can always just look inside.
130
131
00:10:50,060 --> 00:10:57,530
Have a look inside the source folder and you can see that there is a words folder which contains adjectives
131
132
00:10:57,530 --> 00:11:00,750
.dart and nouns.dart and also all.dart.
132
133
00:11:01,080 --> 00:11:04,550
So these are all of the top 5,000 English words.
133
134
00:11:04,730 --> 00:11:11,840
These are the top English adjectives and these are the top English nouns. And you can see that this is
134
135
00:11:11,840 --> 00:11:13,580
just a list of things.
135
136
00:11:13,610 --> 00:11:19,940
And when I said nouns.first, it gave me time. But when I said nouns.last, it gave me the last
136
137
00:11:19,940 --> 00:11:22,250
one in the list, which was apology.
137
138
00:11:22,250 --> 00:11:28,760
So it's really easy. All that this package does is it contains a whole bunch of words. And depending on
138
139
00:11:28,760 --> 00:11:33,410
what you need, you can pull it out and use it inside your app.
139
140
00:11:33,410 --> 00:11:38,810
Now this is a really simple package that I picked to be had to demonstrate and show you how it all ties
140
141
00:11:38,810 --> 00:11:40,210
together and how it works.
141
142
00:11:40,310 --> 00:11:45,080
But if you search through here, there's all sorts of packages. There's packages that make it easy for
142
143
00:11:45,080 --> 00:11:51,800
you to build an app that uses in app payments, or something that lets you work with Apple Health and
143
144
00:11:51,890 --> 00:11:53,760
all sorts of packages.
144
145
00:11:53,780 --> 00:11:59,930
Now the way that you should view packages is to think back to maybe the days when you played with Lego.
145
146
00:12:00,560 --> 00:12:05,290
And I remember building a lot of Lego houses because they were just kind of easy to do.
146
147
00:12:05,360 --> 00:12:11,540
I didn't have that much imagination. But sometimes you might need, I don't know, a tree right?
147
148
00:12:11,540 --> 00:12:15,110
Like one of these tropical trees. I think that's how they looked,
148
149
00:12:15,110 --> 00:12:21,200
right? Now you could probably build the tree from scratch yourself, but what if you had all these little
149
150
00:12:21,200 --> 00:12:28,880
components like a tree or a window or a car already pre-built for you and all you need to do was to
150
151
00:12:28,880 --> 00:12:36,240
click it into place? Then that would make the whole job of building out your tropical house way way easier,
151
152
00:12:36,240 --> 00:12:36,980
right?
152
153
00:12:37,070 --> 00:12:39,500
And that's how we work with packages.
153
154
00:12:39,650 --> 00:12:48,830
Packages are essentially a bunch of code that somebody else wrote to achieve a specific goal. And because
154
155
00:12:48,830 --> 00:12:54,920
they spend all the time building it, they're kind enough to upload it to the website to share it with
155
156
00:12:54,920 --> 00:12:57,390
the world. So that you or I,
156
157
00:12:57,410 --> 00:13:02,390
when you need that particular functionality, don't have to spend the three months or six months that
157
158
00:13:02,390 --> 00:13:04,420
it took to actually build it.
158
159
00:13:04,460 --> 00:13:11,340
Instead we can simply plug it in as easily as we plugged in that plastic tree. In the next lesson,
159
160
00:13:11,450 --> 00:13:18,650
we're going to be looking at how we can use a sound playing package to be able to play our Xylophone
160
161
00:13:18,650 --> 00:13:19,420
sounds.
161
162
00:13:19,520 --> 00:13:22,250
So all of that and more, I see you on the next lesson.
18629
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.