Flutter: Part 05 Flutter and Dart Packages

All right. Load up on the coffee because we're going to get started making the Xylophone app. And in this app, we're going to be diving deeper into Dart programming, which also means that we'll get to build an app with far more functionality. And so, by the end of the module, not only will you understand some key concepts in Dart programming, but also we're going to be looking at how we can use use Flutter Packages, so open source packages of code, to level up our app and make it have even more functionality without having to spend months and months coding it up. 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 to be really fun. And by the end of the module, this is what you'll build. You'll build a music app, which will allow you to play sounds, or if you're super talented, then you'll actually be able to play a real song. The starting project, as always, is on GitHub, and you'll find the link to this repository And as always, we're going to clone our app onto our local system by checking it out from version control. Now let's paste our URL in and click Clone. And once that's done, as always, we're going to say No to Android Studio creating an Android project for us. Instead, we're going to open it up as a Flutter project. So we're going to go over to where we cloned it, which in my case, was under Android Studio Projects. We're going to click on the folder that contains our project, xylophone-flutter. We're going to click Open to open it up. Now as always, we start off with loads of errors, but we can get rid of all of those just by clicking on Get dependencies. And it fetches all the things that makes a Flutter app, a Flutter app, and once it's done in 4.8 seconds, then it will be able to recognize all of our Flutter code and all our errors go away. Now feel free to run the app if you need to. But you can pretty much see that this is just an empty scaffold. We've got a body, which has a Container that's contained within a safe area so that it doesn't bleed out to the edges. The only thing that we've added to this project is a folder called assets, and inside that folder, we've got seven sounds and these will be the seven sounds that our Xylophone app will be able to play. Now the sound files are added to our project in exactly the same way that we added our image files. We went into the pubspec.yaml configuration folder. We specified that our Flutter project requires some local assets, so some local files that we're going to use inside our project and then we specified the folder under which it's contained. And this folder is, of course, called assets. So previously we had an images folder, so it looked like this. But now we have an assets folder. And a little bit later on, we're going to find out why we named it this. But essentially what I'm trying to show you is that when you add sound files or when you add text files or when you add image files, it's all done in the same way. You create a folder, you drag in those files, you create an assets entry under your Flutter app, and you specify the name of the folder where your assets exist. This is the same for images and it's the same for sounds. Now if you want to run the app just to see what it looks like, feel free to do so. But once you're done with setup, we're going to get started building out our Xylophone app.