All language subtitles for 1. Xylophone - A Simple Musical Instrument App

All right. Load up on the coffee because we're going to get started making the Xylophone app.
1

And in this app we're going to be diving deeper into Dart programming, which also means that we'll have
2

to build an app with far more functionality.
3

And so by the end of the module, not only will you understand some key concept in Dart programming, but
4

also we're going to be looking at how we can use a Flutter packages,
5

so open source packages of code, to level up our app and make it have even more functionality without
6

having to spend months and months coding it up.
7

So I hope you're as excited as I am to get started on this module because it's jam-packed and it's going
8

to be really fun.
9

And by the end of the module, this is what you'll build. You'll build a music app which allow you to play
10

sounds. Or if you're super talented, then you'll actually be able to play a real song.
11

The starting project as always is on Github and you'll find the link to this repository in the course
12

resources.
13

And as always, we're going to clone our app onto our local system by checking it out from version control.
14

Now let's paste our URL in, and click clone. And once that's done,
15

as always, we're going to say no to Android Studio creating an Android project for us.
16

Instead we're going to open it up as a Flutter project.
17

So we're going to go over to where we cloned it which in my case was under Android Studio projects, going
18

to click on the folder that contains our project xylophone-flutter.
19

We're going to click open to open it up. Now,
20

as always, we start off with loads of errors but we can get rid of all of those just by clicking on get
21

dependencies, and it fetches all the things that makes a Flutter app a Flutter app.
22

And once it's done, in 4.8 seconds, then it will be able to recognize all of our Flutter
23

code and all our errors go away.
24

Now feel free to run the app if you need to, but you can pretty much see that this is just a empty scaffold.
25

We've got a body which has a container that's contained within a safe area so that it doesn't bleed
26

out to the edges.
27

The only thing that we've added to this project is a folder called assets. And inside that folder, we've
28

got seven sounds and these will be the seven sounds that are Xylophone app will
29

be able to play. Now the sound files are added to our project in exactly the same way that we added our
30

image files.
31

We went into the pubspec.yaml configuration folder,
32

we specified that our Flutter project requires some local assets so some local files that we're going
33

to use inside our project, and then we specified the folder under which it's contained. And this folder
34

is of course called assets.
35

So previously we had an images folder so it looked like this, but now we have an assets folder and a
36

little bit later on, we're going to find out why we named it this.
37

But essentially what I'm trying to show you is that when you add sound files or when you add text files
38

or when you add image files, it's all done in the same way. You create a folder, you drag in those files,
39

you create an assets entry under your Flutter app and you specify the name of the folder where your
40

assets exist.
41

This is the same for images and it's the same for sounds.
42

Now if you want to run the app just to see what it looks like, feel free to do so.
43

But once you're done with setup we're going to get started building out our Xylophone app.