Original subtitles

All right.

Roll up roll up.

Welcome to the 1 o'clock tour of your Flutter development environment.

My name's Angela and I'm gonna be your tour guide.

Now I want you to imagine that you've just started a new job and I'm basically going to take you on

a tour of your work environment.

Right.

So I'm gonna take you on a tour of where the bathrooms are, where the snacks are,

what are the best snacks that we stock in this office environment etc..

So before I get carried away listening my favorite snacks, let's get started and show you what Android

Studio has to offer.

This is going to be our workspace.

This is gonna be our office.

We're developing our Flutter apps so it's really important that we get familiar with all the different

areas 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 we 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 at 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 projects folder. So if I locate this project folder then I can follow this 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 in to the lib folder, and inside

the lib folder we find our main.dart file.

So this was the route 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 shows 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 assets folder etc..

So we're going to be diving 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, all the folders are all collapsed, and you want to locate

the current file that's open,

then just go ahead and click on this little sort of locate-me button here. And you'll see that it'll

expand the folders as needed to show you where you currently are inside your project structure.

So that's kind of neat.

I'll be sharing some of these tips as we go along whenever it's relevant.

So feel free to use it or not, it's totally up to you.

The next thing I want to show you is this editor pane here. And this is where you're gonna be writing most

of your code.

So feel free to give yourself more space by dragging that separator there, or just collapsing the things

that you don't really need. Inside this editor pane,

you see a margin over here and the margin has certain helpful tools such as, for example here, when the

code specifies a particular color. It'll actually show you a little swatch of that color so that as

a human, you know what that color is because very often, when we're creating colors, it just kind of is

like code right> what is light blue? What is blue?

What is, you know, a hex code?

And this just helps you see all of that.

The other thing that you can do using this margin here is you can collapse parts of the code that you're

kind of done with, to keep your work space tidy.

So for example if we're done writing this particular part of the code, and I just want to get it out

of the way, then I can click on either this one or this button. And it's almost like closing a book.

It just collapses that part of the code so that you're not distracted by all the code that's in there.

And if you're working on different parts, just collapsing these sections can make it so much easier to

figure out what's actually going on on the page, especially when there's a lot of code. And you can click

on these three dots to expand them again when you need to. The next thing I want to show you is, down

here,

we've got this section called Dart Analysis, and this comes from the Dart plugin we installed.

And what this does is that it'll very helpfully point out parts of the code that it thinks is wrong,

that you might have made an error or warnings telling you that you might be doing the wrong thing.

So for example over here, if I just accidentally delete this comma here or I forgot to put it in, then

it tells me that, oh look, it expected to find a little comma. And if you're lost somewhere in the code

and you see this little warning and you don't know what it is or where it refers to, just double click

on it and it'll show you where it expected to find a comma. So if we added a comma there, then that warning

goes away.

And if I right click and click on reformat code with dartfmt, then it will reformat my code to make

it look proper

again. Remember if you configured Android Studio to reformat your code every time you hit save, it'll

be the same thing as right clicking and clicking on this.

So let's just try that again and I'm going to hit COMMAND + S to save.

And you can see it does exactly the same thing, and just formats the code, which is kind of neat.

So keep an eye out inside Dart Analysis for any errors or warnings you might be getting, so that you

can fix your code before you run it or make a mess of it.

The next part I want to show you is the flutter outline on the right side here.

So this kind of builds up a tree structure if you will, of your entire code base.

So you can see that, for example, inside here, we've got a scaffold and in the scaffold there's an app

bar. In addition to the app bar,

there's also a center widget and there's a column widget and it shows you that tree structure of all

of your widgets.

This can be really helpful when you have a long file full of code, and you're trying to locate a specific

thing.

So you can just click on it and it will highlight that part inside your code.

So it's really useful when you're navigating around your code and seeing kind of at a glance what your

code looks like.

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 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 popup

on the right here that tells you then 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 get 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 have 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 is 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 0 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 done 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 app bar.

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 all talk 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 gonna be using it

as we learn how to develop flutter apps and you 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 used for.

So that when we come to it next time, 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 review on TripAdvisor.

Just kidding.

But we are now finally ready to actually build a real app. So for all of that, and more.

I'll see you on the next module.