In order for our app to be able to play sound both on the iOS ecosystem as well as on Android, we're
gonna use some Flutter packages to help us to do that. Before we can start incorporating a package to
help us play sound in our Xylophone app,
we first have to understand what Flutter packages are and how they work.
So in order to do this we're gonna use a really simple package so we can see all steps of the process
and then we're gonna apply our knowledge to be able to use a package to get our Sylophone app to play
sound a little bit later on.
So first, what exactly is the package?
Flutter packages are open source libraries of code that other people have created which you can incorporate
into your project with minimal effort.
Now in order to browse all of the Flutter packages, head over to pub.dartlang.org/flutter.
And these are packages that are specially made to be compatible with Flutter projects.
Here you can see on the home page, they've got a whole bunch of the top packages.
So these are the most popular and the most frequently used packages. And we're going to be using some
of these a little bit later on.
But you can also search for Flutter compatible packages in the search bar here. And this is what we're
going to do.
We're going to search for a package that generates words.
And once you hit enter, you'll notice that there's a lot of packages that might vaguely match that search
term. But what's really helpful is that on this website, you'll see that each of the packages are shown
with a description but also a score.
For example, out of the ones on this page the ones that actually do what we want it to do, which is something
that generates words in English,
there's two that I can see so far.
There's the English word package and there's the random words package.
But you can see this one clearly has a much higher score.
So if we click on this, you can see that the score is made up of a number of things.
And it's ranked in the search by how popular it is, how many people have used it,
what is the health of the package,
so how good does the code look,
how frequently is this package of code updated by the author.
And finally we end up with an overall score.
And clearly the higher the better.
So you can see this one English words has a 100 points, but the other one, the random word, only has
85.
And it got some points docked because there were less people using it.
So when you're looking for packages, be mindful that there might be lots of packages that do the same
thing. But when you look at the score, you'll be able to pick from all of the packages one that might
be the most robust and best suited. A lot of these packages are also made by the Flutter team.
For example, on the home page we've got a Flutter package called shared preferences.
And when you look at the right bar here, you can see that the author is the Flutter team. And it's been
uploaded by a bunch of people who work at Google.
So when you're looking for a package, this might be another indicator that this is a good package to
trust and to use.
Let's go back to that package we found, the English words package.
And let's take a look at how we can use it.
You can see that this package contains about 5,000 most commonly used English words. And it also
has some functions that will be useful when you're trying to work with English words.
So for example you can print the top 50 most used nouns in the English language or calculate the number
of syllables in a word.
And we're going to take this package and use it inside our project just to see how it all works.
Whenever you find a package that you want to work with, the easiest way to get started is to click on
the installing tab and see what the authors say about installing this package.
So step one is to depend on it.
So we have to head into our pubspec.yaml file, and we have to paste in this line where it specifies
that we want to use the English words package as a dependency.
So we're saying that our project is going to depend on this package.
So let's open up our pubspec.yaml and under where you see it says cupertino icons,
we're going to paste in what we just copied over.
Notice that cupertino icons is also a package that you can find inside the Flutter packages.
And this is a Flutter package that's developed by the Flutter team.
And what this does is it allows you to use the iOS icons inside your Flutter app.
And this is usually included in all of these starting files when you're creating Flutter apps.
Now that we've added our dependency in here, what does these carat symbols mean exactly? There's a couple
of ways of adding these dependencies into your YAML file.
The easiest way is to simply add the name of the dependency.
So in this case it would be english_words and that should match with whatever you see at
the top here, before the numbers start.
So in this case this package would be cupertino_icons and our previous one would be called
english_words.
Now what this does is it will tell Flutter to grab this particular package called English words from
the default location which is that same website that I just showed you just now, pub.dartlang
.org. By not having any numbers
after this, we're saying grab any version you like, anyone that you can find essentially.
But if we go ahead and add a virgin number after the name of the package, we're telling Flutter to download
any version of this package that begins with the major version of three.
So this means that if the authors of this package updated their code to version 3.6 or 3
.7 or even 3.2.1 etc. It's all fine.
We're happy to use it. But if the authors have updated their package to version 4.0.0,
so as long as the first number changes to the next one, then we're not going to take it.
The reason is because when people update their code base, there can be breaking changes so they might
have done something that might just crash your app.
And because we're using these as dependencies which means that whenever we update our dependencies, we're
going to grab the latest version of the package and incorporate it into our project.
If something changes from their side, then it might break our code.
Now how do I know about this?
Well of course the Flutter documentation details this.
In this section of the documentation where they talk about using packages, they talk about all of these
different versions and what they will mean.
So my recommendation is whenever you're using a package from the Flutter packages, always specify the
version and add a caret or that little top hat symbol in front of the version to limit it to that major
version.
That way you get most of the benefits and less of the downsides.
Now that we've added this to our pubspec.yaml file, the next step is to actually install the package.
And in order to do this, we need to run pub get. And you can either do that in the terminal as they described
in the documentation, or if you're working inside Android Studio, all you need to click on is packages
get. And this will run the same command and it will go to that website
we were on previously. pub.dartlang and it will download this package and incorporate it into your
current project.
So now when you click on your external libraries folder, you'll notice that we have one extra Dart package.
And if you scroll down, you'll find our English word package now added into our project with very little
effort from our side.
So now the final thing we need to do to be able to use it,
we have to import it into our code. So let's copy this and paste it to the top of our main.dart and
then we can get started using it.
So most of the documentation for the packages should appear on the read me page and commonly you'll
see a few examples in the examples tab. And this kind of tells you how you could work with this package
and what it can do.
So in our case, what if we wanted to get a English adjective and we want to display it on the screen?
Well instead of having a container, I could have a text widget and the string that's going to be displayed
in the text widget is going to come from my brand new package.
Now I can see that here, they're tapping into something called nouns and I'm gonna do the same.
So for my text, I'm going to use nouns which you can see,
this comes from.
And if we wait here for a bit, you can see our quick docs tells us that this will list the top English
nouns, and the list is sorted in order of frequency of use in the English language.
And so if we select this and we write .first to get the first noun in that list of nouns, and we go
ahead and run our app, right here in the top left corner, you can see the word time,
if you have really good eyesight.
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
my list of nouns and instead pull out the one that's last in the list. And that happens to be the word
apology.
Now I can also instead of using nouns, I could get some adjectives. And let's see what the last adjective
is, naval.
Okay.
Now you might ask, well how did you know that there is this thing called adjectives? Because if you try
something else, like verbs, it doesn't really work. That doesn't exist.
How did I know that there's nouns and adjectives?
Well remember that we've already downloaded the entire package that's called English words into our
project. So you can always just look inside.
Have a look inside the source folder and you can see that there is a words folder which contains adjectives
.dart and nouns.dart and also all.dart.
So these are all of the top 5,000 English words.
These are the top English adjectives and these are the top English nouns. And you can see that this is
just a list of things.
And when I said nouns.first, it gave me time. But when I said nouns.last, it gave me the last
one in the list, which was apology.
So it's really easy. All that this package does is it contains a whole bunch of words. And depending on
what you need, you can pull it out and use it inside your app.
Now this is a really simple package that I picked to be had to demonstrate and show you how it all ties
together and how it works.
But if you search through here, there's all sorts of packages. There's packages that make it easy for
you to build an app that uses in app payments, or something that lets you work with Apple Health and
all sorts of packages.
Now the way that you should view packages is to think back to maybe the days when you played with Lego.
And I remember building a lot of Lego houses because they were just kind of easy to do.
I didn't have that much imagination. But sometimes you might need, I don't know, a tree right?
Like one of these tropical trees. I think that's how they looked,
right? Now you could probably build the tree from scratch yourself, but what if you had all these little
components like a tree or a window or a car already pre-built for you and all you need to do was to
click it into place? Then that would make the whole job of building out your tropical house way way easier,
right?
And that's how we work with packages.
Packages are essentially a bunch of code that somebody else wrote to achieve a specific goal. And because
they spend all the time building it, they're kind enough to upload it to the website to share it with
the world. So that you or I,
when you need that particular functionality, don't have to spend the three months or six months that
it took to actually build it.
Instead we can simply plug it in as easily as we plugged in that plastic tree. In the next lesson,
we're going to be looking at how we can use a sound playing package to be able to play our Xylophone
sounds.
So all of that and more, I see you on the next lesson.