Original subtitles

0 In order for our app to be able to play sound both on the iOS ecosystem as well as on Android, we're 1

gonna use some Flutter packages to help us to do that. Before we can start incorporating a package to 2

help us play sound in our Xylophone app, 3

we first have to understand what Flutter packages are and how they work. 4

So in order to do this we're gonna use a really simple package so we can see all steps of the process 5

and then we're gonna apply our knowledge to be able to use a package to get our Sylophone app to play 6

sound a little bit later on. 7

So first, what exactly is the package? 8

Flutter packages are open source libraries of code that other people have created which you can incorporate 9

into your project with minimal effort. 10

Now in order to browse all of the Flutter packages, head over to pub.dartlang.org/flutter. 11

And these are packages that are specially made to be compatible with Flutter projects. 12

Here you can see on the home page, they've got a whole bunch of the top packages. 13

So these are the most popular and the most frequently used packages. And we're going to be using some 14

of these a little bit later on. 15

But you can also search for Flutter compatible packages in the search bar here. And this is what we're 16

going to do. 17

We're going to search for a package that generates words. 18

And once you hit enter, you'll notice that there's a lot of packages that might vaguely match that search 19

term. But what's really helpful is that on this website, you'll see that each of the packages are shown 20

with a description but also a score. 21

For example, out of the ones on this page the ones that actually do what we want it to do, which is something 22

that generates words in English, 23

there's two that I can see so far. 24

There's the English word package and there's the random words package. 25

But you can see this one clearly has a much higher score. 26

So if we click on this, you can see that the score is made up of a number of things. 27

And it's ranked in the search by how popular it is, how many people have used it, 28

what is the health of the package, 29

so how good does the code look, 30

how frequently is this package of code updated by the author. 31

And finally we end up with an overall score. 32

And clearly the higher the better. 33

So you can see this one English words has a 100 points, but the other one, the random word, only has 34

85. 35

And it got some points docked because there were less people using it. 36

So when you're looking for packages, be mindful that there might be lots of packages that do the same 37

thing. But when you look at the score, you'll be able to pick from all of the packages one that might 38

be the most robust and best suited. A lot of these packages are also made by the Flutter team. 39

For example, on the home page we've got a Flutter package called shared preferences. 40

And when you look at the right bar here, you can see that the author is the Flutter team. And it's been 41

uploaded by a bunch of people who work at Google. 42

So when you're looking for a package, this might be another indicator that this is a good package to 43

trust and to use. 44

Let's go back to that package we found, the English words package. 45

And let's take a look at how we can use it. 46

You can see that this package contains about 5,000 most commonly used English words. And it also 47

has some functions that will be useful when you're trying to work with English words. 48

So for example you can print the top 50 most used nouns in the English language or calculate the number 49

of syllables in a word. 50

And we're going to take this package and use it inside our project just to see how it all works. 51

Whenever you find a package that you want to work with, the easiest way to get started is to click on 52

the installing tab and see what the authors say about installing this package. 53

So step one is to depend on it. 54

So we have to head into our pubspec.yaml file, and we have to paste in this line where it specifies 55

that we want to use the English words package as a dependency. 56

So we're saying that our project is going to depend on this package. 57

So let's open up our pubspec.yaml and under where you see it says cupertino icons, 58

we're going to paste in what we just copied over. 59

Notice that cupertino icons is also a package that you can find inside the Flutter packages. 60

And this is a Flutter package that's developed by the Flutter team. 61

And what this does is it allows you to use the iOS icons inside your Flutter app. 62

And this is usually included in all of these starting files when you're creating Flutter apps. 63

Now that we've added our dependency in here, what does these carat symbols mean exactly? There's a couple 64

of ways of adding these dependencies into your YAML file. 65

The easiest way is to simply add the name of the dependency. 66

So in this case it would be english_words and that should match with whatever you see at 67

the top here, before the numbers start. 68

So in this case this package would be cupertino_icons and our previous one would be called 69

english_words. 70

Now what this does is it will tell Flutter to grab this particular package called English words from 71

the default location which is that same website that I just showed you just now, pub.dartlang 72

.org. By not having any numbers 73

after this, we're saying grab any version you like, anyone that you can find essentially. 74

But if we go ahead and add a virgin number after the name of the package, we're telling Flutter to download 75

any version of this package that begins with the major version of three. 76

So this means that if the authors of this package updated their code to version 3.6 or 3 77

.7 or even 3.2.1 etc. It's all fine. 78

We're happy to use it. But if the authors have updated their package to version 4.0.0, 79

so as long as the first number changes to the next one, then we're not going to take it. 80

The reason is because when people update their code base, there can be breaking changes so they might 81

have done something that might just crash your app. 82

And because we're using these as dependencies which means that whenever we update our dependencies, we're 83

going to grab the latest version of the package and incorporate it into our project. 84

If something changes from their side, then it might break our code. 85

Now how do I know about this? 86

Well of course the Flutter documentation details this. 87

In this section of the documentation where they talk about using packages, they talk about all of these 88

different versions and what they will mean. 89

So my recommendation is whenever you're using a package from the Flutter packages, always specify the 90

version and add a caret or that little top hat symbol in front of the version to limit it to that major 91

version. 92

That way you get most of the benefits and less of the downsides. 93

Now that we've added this to our pubspec.yaml file, the next step is to actually install the package. 94

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

in the documentation, or if you're working inside Android Studio, all you need to click on is packages 96

get. And this will run the same command and it will go to that website 97

we were on previously. pub.dartlang and it will download this package and incorporate it into your 98

current project. 99

So now when you click on your external libraries folder, you'll notice that we have one extra Dart package. 100

And if you scroll down, you'll find our English word package now added into our project with very little 101

effort from our side. 102

So now the final thing we need to do to be able to use it, 103

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

then we can get started using it. 105

So most of the documentation for the packages should appear on the read me page and commonly you'll 106

see a few examples in the examples tab. And this kind of tells you how you could work with this package 107

and what it can do. 108

So in our case, what if we wanted to get a English adjective and we want to display it on the screen? 109

Well instead of having a container, I could have a text widget and the string that's going to be displayed 110

in the text widget is going to come from my brand new package. 111

Now I can see that here, they're tapping into something called nouns and I'm gonna do the same. 112

So for my text, I'm going to use nouns which you can see, 113

this comes from. 114

And if we wait here for a bit, you can see our quick docs tells us that this will list the top English 115

nouns, and the list is sorted in order of frequency of use in the English language. 116

And so if we select this and we write .first to get the first noun in that list of nouns, and we go 117

ahead and run our app, right here in the top left corner, you can see the word time, 118

if you have really good eyesight. 119

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

my list of nouns and instead pull out the one that's last in the list. And that happens to be the word 121

apology. 122

Now I can also instead of using nouns, I could get some adjectives. And let's see what the last adjective 123

is, naval. 124

Okay. 125

Now you might ask, well how did you know that there is this thing called adjectives? Because if you try 126

something else, like verbs, it doesn't really work. That doesn't exist. 127

How did I know that there's nouns and adjectives? 128

Well remember that we've already downloaded the entire package that's called English words into our 129

project. So you can always just look inside. 130

Have a look inside the source folder and you can see that there is a words folder which contains adjectives 131

.dart and nouns.dart and also all.dart. 132

So these are all of the top 5,000 English words. 133

These are the top English adjectives and these are the top English nouns. And you can see that this is 134

just a list of things. 135

And when I said nouns.first, it gave me time. But when I said nouns.last, it gave me the last 136

one in the list, which was apology. 137

So it's really easy. All that this package does is it contains a whole bunch of words. And depending on 138

what you need, you can pull it out and use it inside your app. 139

Now this is a really simple package that I picked to be had to demonstrate and show you how it all ties 140

together and how it works. 141

But if you search through here, there's all sorts of packages. There's packages that make it easy for 142

you to build an app that uses in app payments, or something that lets you work with Apple Health and 143

all sorts of packages. 144

Now the way that you should view packages is to think back to maybe the days when you played with Lego. 145

And I remember building a lot of Lego houses because they were just kind of easy to do. 146

I didn't have that much imagination. But sometimes you might need, I don't know, a tree right? 147

Like one of these tropical trees. I think that's how they looked, 148

right? Now you could probably build the tree from scratch yourself, but what if you had all these little 149

components like a tree or a window or a car already pre-built for you and all you need to do was to 150

click it into place? Then that would make the whole job of building out your tropical house way way easier, 151

right? 152

And that's how we work with packages. 153

Packages are essentially a bunch of code that somebody else wrote to achieve a specific goal. And because 154

they spend all the time building it, they're kind enough to upload it to the website to share it with 155

the world. So that you or I, 156

when you need that particular functionality, don't have to spend the three months or six months that 157

it took to actually build it. 158

Instead we can simply plug it in as easily as we plugged in that plastic tree. In the next lesson, 159

we're going to be looking at how we can use a sound playing package to be able to play our Xylophone 160

sounds. 161

So all of that and more, I see you on the next lesson.