You've set up your IDE installed the required components and libraries and you're ready to start working on your Flutter project. In this video you're introduced to the basic Flutter project configurations and learn to navigate the project structure.
Welcome to the one o'clock tour of your Flutter development environment. My name is Angela, and I'm going to be your tour guide. Now, I want you to imagine that you've started a new job and I'm basically going to take you on a tour of your work environment, right? So, I'm going to take you on a tour of where the bathrooms are, where the snacks are, and what we can do with each of those. Now, Android Studio is made by a company called IntelliJ, and they are really good at making these so-called IDEs, or integrated development environments. And they're integrated because they integrate lots of different things. So it can take a while to learn all of the things and all of the functionality that they have integrated. But I want to point you to some of the most important ones that is going to make your life a lot easier. And if you're coming from a simple text editor, such as Sublime, or Atom, or other ways of coding, then you're going to find that IDEs such as Android Studio are a little bit complicated initially. But once you get going, it's a much more powerful tool and will make your experience of developing things and coding really a lot more delightful. So let's start from the top, and you can see right off the top we've got a navigation bar of sorts. And it's basically showing you the location of the current file relative to your project. So, in the last episode, we created a new sort of dummy Flutter app just to configure our app and to show you what it looks like. Now, if this is the location of your project, remember that I created this Flutter app inside my Android Studio project folder. So, if I locate this project folder, then I can follow the sequence of navigation to get to this current file that's open inside the editor. And this is the main.dart file, which is pretty much the starting point for any of our Flutter apps, so it's a really important file to locate. Now, if I follow along with that navigation, inside Flutter app, let's go into the lib folder. And inside the lib folder, we find our main.dart file. So, this was the root for us to be able to reach this current file. Now the next thing I want to show you is this Project pane over here, which you can collapse or expand by clicking on the tab on the left. Now, inside here you'll find a folder for your Android apps and a folder for your iOS apps. Now, if you've ever developed iOS or Android apps, when you expand these folders, the contents will look very familiar to you, because these are things that you're used to working with. Now, if you've never made iOS or Android apps, then just know that when you're creating your apps using Flutter, it will automatically create your iOS and Android apps in the background, and update them as you create your Flutter app. We're going to be spending most of our time inside this lib folder here where we're going to write Dart code and we're going to be creating most of our Flutter app. Inside the project navigator, when you want to open up a file to inspect, you double click on it. So, for example, if I double click on this pubspec.yaml file, then you can see it how's up inside here on a new tab. Now this is an important file because it's our configuration file. It helps us configure our Flutter apps, and here you'll be adding things such as third-party libraries or other packages, and you'll be setting up your asset folder, et cetera. So we're going to be dividing deep into our configuration in the coming lessons. But for now, just know that this is where it resides and this is where we'll find it when we need to change it. Now, here's a really helpful button. If you find that when you open up your project, The next thing I want to show you is the Flutter Inspector. But in order for something to show up in the Flutter Inspector, your app has to be running on a device, or on a simulator, or on an emulator. Let's go ahead and click run to run our app on the iPhone XR. And if you ever see this little pop-up on the right here, that tells you that an IDE error occurred, don't worry, it's not your fault. It isn't related to what you've done. It's just relating to how the plugins are working with each other in the background, and Google will automatically report these issues back home to try and figure out what it is that might be going wrong. So, don't scared if you see that red box over there. So, now that our app is up and running on a simulator or on a device, then we now have something actually inside our Flutter Inspector. Now, for those of you who've ever made a website, the Flutter Inspector can feel quite familiar, because it's very, very similar to the Chrome Developer Tools. And you have to remember that the people who built Flutter originally came from the Chrome team, so a lot of this gets inspired by the same tools. For example, over here, you can see that we have a floating action button right at the bottom here. Now, if I click on this floating action button, the bottom pane here tells me all of its properties. So, it tells me, for example, that the color is this blue color with that particular hex code or other things such as what is the text size that's inside the button, and this a list of all the properties that you can inspect whenever you're kind of miffed as to why does my app look like this, why does it not look like the way I want to. So, it's really useful for debugging and generally just checking to see what's going on with your app. Another really useful thing is you can go ahead and click on this little button here. Now, this looks similar to the one that we saw over here, but what this one does is it allows you to select anything that you see on screen here to locate it inside the code. So, for example, if I want to figure out where this zero comes from, I click on that after clicking on the locate button, and you can see it's highlighted to me the part of my code that's actually creating this zero here. Now, if you're doe with that and you want to select something else, then just click on this little icon on the bottom left, and you now get to select something else. Let's select maybe up here, and you can see it's taken me to the AppBar. So, that's a really, really useful thing that we can do. Another really cool feature is you can click on this button here. You can see right now my app looks like a normal app. But once I click on this, then you can see it shows me how my app is actually laid out. So, what are all the layout rules actually doing to the layout of my screen? So, for example, you can see this little plus button, it has arrows pointing to it from all four corners, and that tells me that there's something in there that's keeping that plus symbol right in the middle of this particular button. And so, this also helps you to diagnose what's actually going on with your layout. And especially if you have problems with the way that things are laid out, this is really helpful for you to figure out what went wrong or what you should change. The final thing I want to show you is the Run tab down here. And this is your console. Whenever something goes wrong while your app is running and you get messages back from the device, telling you what went wrong, that's usually displayed right here. And this is a little bit different from Dart Analysis. This part is really useful as you're writing your code. But when you've run your code and something goes wrong, then it's usually over here that you'll find it. So, that's our tour of Android Studio for Flutter development, and don't worry if you've forgotten about a button that I've shown you or a feature that I've shown you. I'm going to be using it as we learn how to develop Flutter apps and you'll hear it mentioned again. Before we get started, I wanted to familiarize you with the environment, so that you're not just thrown into our workplace here, and you actually get a little bit of an idea for what each part of Android Studio is useful, so that when we come to it next time when we're actually building it for real, it doesn't feel so foreign. So, I hope you enjoyed the tour. Be sure to leave me a review on TripAdvisor. Just kidding. But we are now finally ready to actually build a real app. So, all of that and more. I'll see you on the next module.
This course was created by London App Brewery. We are pleased to host this content in our library.