All language subtitles for 022 [Optional] Configure Android Studio for Flutter Development.en_US

All right.

So now that you finally installed all the software, it's time to configure Android Studio so that we

have the optimal experience when we're developing Flutter apps.

So first things first.

Go ahead and startup Android Studio, and you should see this

welcome screen here.

And we're going to click on Start a new Flutter project, and we're just going to select the default Flutter

application.

We're going to leave the project name as the default name, flutter_app, or you can rename it

to whatever you wish.

This is just going to be a demo.

We're just going to use this as a blank canvas.

Then if you want to change the place where you want to create your project,

so currently by default, it's created under a folder called Android Studio projects.

Now if you want to change that, then go ahead and click on that little icon, and you can select whichever

folder you want to create your project in.

Now I'm going to leave mine as the default.

I'm going to leave the description and then we're just going to click next, and then it's going to ask

you for a company domain.

So that means that if you have a company website, for example, ours is appbrewery.co, then go ahead and

just type that in there.

Now if you don't have a company, then just change this to your name.

So it could be angelayu.com. As long as this entire line can uniquely identify your app on the

App Store, then that's fine.

So I'm going to change that back to our company domain and then we're going to go ahead and click finish

and you're going to leave everything else as it is.

We'll talk about the different options a little bit later on.

For now, we just want to get set up and configure our Android Studio. Now the first thing we're going

to configure, is the appearance of Android Studio.

So especially if you're not used to working with Android Studio, there's a couple of things that I would

recommend to change to its appearance.

And the first thing is that the default appearance is this kind of white background.

And I don't know about you but I tend to find it easier to have a little bit more contrast in the code

so I can read the text with less effort.

And so we're going to change the theme to have a dark background. And to do that on a Mac,

you would go to Android Studio and click on preferences. And if you're want Windows, you're going to go

to file and you going to click on settings. And both of these things will take you to the same destination

which is the preferences window.

And over here if you select on appearance and behavior, and then click on that drop down and go to appearance,

you can change the theme.

So we're going to change a theme from light to dark which is also called Darcula in Android Studio.

And if you go ahead and click apply, you can see the changes applied everywhere.

So basically you have this dark menu system and dark windows.

Now if you're running Andrew studio on a Mac, and you're running an operating system that is Mac OS Mojave

or later, then you can also select this little tick box, that allows you to have dark window headers

as well.

So everything becomes black, essentially. Which is quite nice, because it means that all the text is a lot

more contrasty.

And I like to code at night a lot,

so it really really helps my eyes.

Now the next thing we gonna do to help our eyes a little bit while we're coding, is we're going to change

the font size and to do that, we're going to go into the editor and we're going to click on the drop down

list and go to font. Now here,

you want to change the font size to around 18.

And this just means that the text is just a little bit larger.

And after a little while coding, your eyes will start to get tired and it just makes it that much

easier.

And feel free to fiddle around with the appearance as much as you like.

But these are two things that I find really helpful.

Now the next thing we'll do, is we're going to set up some of the behavior of Android Studio, especially

relating to the Flutter plugin again.

Bring up your preferences pane however you do it.

If you scroll down to languages and frameworks and expand that, you'll see that we've got the settings

for Dart and Flutter.

Now these are here because we installed the Flutter and Dart plugins when we installed Android Studio.

Now there's just a few things I want you to check while you're here.

Make sure that the checkbox for Perform hot reload on save, is checked, and also, make sure that under

the general section, that Format code on save, is also checked. And then you can go ahead and click OK.

So this just means that every single time we hit save either through file and then clicking on save

all, or as you can see over here, we have a little shortcut which is on Mac, COMMAND + S, which just does

the saving.

And when we hit COMMAND + S, it will just reload our app and reformat our code. So that means that if I messed

up a lot of my tabbing, or a lot of my indentation, or I haven't really been paying attention to how neatly

I've been formatting my code,

as soon as I go ahead and click save, then Flutter will go ahead and reformat everything for me to make

it look pretty.

But more importantly make it easier to see what's actually going on in the code. Now that we're done

with the behavior of the Flutter plugin in Android Studio,

the final thing we're gonna configure is the key mapping. And the key map is simply just a really good

way of binding shortcuts on the keyboard to anything you use frequently.

Now most of people will have personal preferences as regarding key mapping, and you'll have to monitor

what are the things that you use very frequently, and to try and save time or just make it easier for

yourselves by binding a keystroke to it.

So pretty much anything that you see in the menus.

So for example if I wanted to go ahead and create a new flutter project, I would go to File, New, New Flutter

project.

Now I kind of took a while right?

What if I could simply have a shortcut that does that.

Well you can. If you go into again the preferences window, and go into key map then we can go ahead and

change the key bindings.

Now the easiest way is to simply search for what it is that you want to bind a key to.

So I want to make a shortcut for new Flutter project, and it's usually a good bet just typing in what

it is that you see in the menu,

the exact words and it should come up. So you can see here that in the main menu, when I go to file,

New, New Flutter project, there's actually no keys bound to this particular action.

So let's go ahead and right click on that, and then click on Add keyboard shortcut. And now we're

going to use our keyboard to type in the shortcut that I want.

Now if I wanted to, for example, use COMMAND + F to bind this shortcut to this action of creating a new

Flutter project,

so on Windows that would be CONTROL + F, and on Mac that's COMMAND + F. But you can see that I get a little

warning here, and it says that this keystroke, COMMAND + F is already assigned to find, and we know that from

using the computer, COMMAND + F or CONTROL + F pretty much everywhere is find.

So I don't recommend changing this behavior inside Android Studio.

It usually makes it very very confusing.

So try to come up with a keystroke that is not bound to something already.

So let's go ahead and change this.

So let's just click on this box and type in a new shortcut.

So I'm gonna go for a COMMAND + SHIFT + F, and you can see, I no longer get a warning because this shortcut

isn't used for anything else.

So I'm gonna set it to mean that I can create a new flatter project when I hold down SHIFT COMMAND and

F. So let's go ahead and click OK.

And you can see that added in here.

And now when I click apply and OK, and I hold down COMMAND SHIFT and F, you can see I create a new Flutter

project.

So as you go along using Android Studio and developing, you'll come across things that you do very very

frequently. And it's in those moments that you go into the key map and add shortcuts as you need.

So I'm going to leave that customization to you, sometime down the line when you find yourself wanting

some shortcuts.

And the final thing to mention on the key map is that whenever you go for something in the menu, say

for example I want to create a new Flutter project or I want to create a new Dart file,

you can see the key bindings that already exist for it.

And if there's nothing next to it then that means it's completely blank and you can set up your own

version. When you see a menu item that you often use,

you can simply just learn the existing shortcut for it, or you can override it and bind your own shortcut.

It's completely up to you.

And this really is more about your convenience and your preferences rather than any sort of hard and

fast rule.

That's all we need to do in order to configure Android Studio before we can get started.

Now you'll notice that Android Studio has a lot of tiny buttons and a lot of functionality and it's

a really really powerful editor.

So in the next lesson I want to take you on a guided tour of Android Studio for Flutter development.

So for all of that, and more, I'll see there.