Original subtitles

So let's dive into Flutter then and for this, let's create a brand new project. For that,

open up your terminal or command prompt on your machine,

so the default MacOS terminal or your windows command prompt and in there, make sure that with the help

of the cd command which allows you to change directories, you navigate into the path where you want to create

that new project,

so here I navigated into a playground folder for example.

It doesn't matter how you name that folder but it should be the path where all your project files are stored

thereafter or where this new project folder is created in to be precise.

Once you're in that path, we can use the Flutter command which is available since we installed the Flutter

SDK in the first course module and we can run the create command there to create a new Flutter project in

that place where we navigated too.

So now with that, you can give this project anything you want,

like flutter_course or I'll name it flutter_complete_guide,

the name is up to you

and this just wrapped over two lines, so it's one name here.

Make sure that in that name however, you only have one word,

so flutter_complete_guide,

it's one word where the individual words are separated with underscores.

Don't use dashes or blanks there, that will not be allowed and you'll get an error, instead

use underscores for that project name

and this will then go ahead once you hit enter and scaffold out this new Flutter project for you.

So now this creates this new folder, the flutter_complete_guide folder in the path where you navigated

to and inside of that folder,

it gives you all the base set up for a new Flutter project and by the end, you should see an output that looks

something like this,

you can ignore warnings you might be getting here if Flutter doctor basically showed you the same,

it should work here and now you can run these two commands to navigate into that newly created Flutter

project folder and to then also run your Flutter project.

However I'll not do that here,

instead I opened up the project here in Visual Studio Code which is the IDE I'll be using throughout the

course.

Now as you learned in the first course section, you can use either Visual Studio code with the Flutter

extension installed as we did it in the first course section or you use Android Studio which is also absolutely

fine,

however I prefer Visual Studio Code and therefore, that's the IDE I will use throughout this course.

Now this is Visual Studio Code

just configured as I showed it in the first course section, nothing else

and this is this Flutter project which we just created here in the command line, so this is a project

and all the default files and folders we get in there.

Now in the next lecture, I will walk you through all these folders and files and explain what they do

and with which files we will work mostly

but first of all, let's make sure that we can also see our app not just in code but on a device and for

that, you could use a real device connected to your machine

and of course I also will show you how that works in detail later but for now, let's simply use an emulator,

a virtual device and I will pick a virtual Android device since that works on both Windows and MacOS and

Linux whereas iOS devices, iOS simulators,

iPhone simulators only work on MacOS. Nonetheless

later down the course, I will also show you how to run this app on an iOS simulator so you will also

learn that. Now to launch the app onto an Android emulator, we first of all need to create an emulator

and for that, you should start Android Studio which you had to install anyways and you should see that

welcome screen there.

Now in there if you click on configure, you should have the option to choose the AVD Manager.

If you don't have that option here, you can open an existing Android Studio project and there, simply

navigate to the Flutter project you just created,

so that's the Flutter project I created with Flutter create and in there, choose your Android folder

as an Android project because that is a real Android project

that's part of your Flutter project, of your Flutter app.

Now once this opens, you could write code here,

Android code which we certainly don't want to do, we want to write Flutter and Dart code and get an Android

app automatically,

I only opened this because here under tools once this initialization here finished which will take

a couple of seconds,

you'll also find that AVD Manager.

So in case you didn't see that on the welcome screen, then you can go here to tools and find the AVD

Manager here.

So you should find it in either of the two places,

if you find it in neither of these places, you should try to reinstall the Android SDK and possibly the

entire Android Studio but once you found it and you opened it, you should see a screen that looks something

like this,

here I already got a couple of virtual devices, you might not have them yet and you can simply create

a new one with the button here in the lower left corner,

if you click on create virtual device. Now in here, you can create different virtual devices and we'll use

a phone in this course for testing and you have different blueprints here,

for example you can create a Pixel 2 or Pixel 3 device,

you've got other blueprints here,

also depends on the point of time you're watching this, you've got really old or small devices as well which

we'll also use for testing later, to see if our app works well on these devices as well.

But for the moment, I'll go with the Pixel 2 and I would recommend that you also pick an image where you

have this image here next to play store,

this play button style here because if you have that icon here,

that means that this image actually comes with certain extra services installed which make development

with things like Google Maps and so on easier

or which makes testing these features easier and that will help us later down the course,

however you could also launch a new simulator with that feature once we need it and go with a different

one for now.

Nonetheless, I will go with the Pixel 2 here and click next thereafter.

Now you can install and you should install a system image which is basically the Android version that

runs on the device.

Now I would recommend that you use the latest stable version here.

Now I could use Android queue here

and when you're viewing this, this might already be the latest version

but right now when I'm recording this video here, this is the latest Android version that is available,

the latest stable Android version and I don't want to develop for an unstable or under development version

where certain features might not work and therefore I'll use this.

Now if you don't have that already, you might need to simply download this image first by clicking that

download button.

So choose that latest stable version here and click next again

and now you can give this emulator a name if you want to, I'll stick to default and all the default settings

here should be fine.

You could configure some advanced things but only do that if you really know what you're doing,

I will instead go with all the defaults and then click finish

and now this creates this new virtual device, adds it to the list here and now you can always launch it

here by clicking that play button.

So that's exactly what I'll do here,

I'll click that play button here and this will bring up that new virtual device which is now booting

up here. This is the virtual device on which we will now run our app as soon as it is done booting up.

Here we go,

this just finished booting

and now if we go back here into our project, we can run this Flutter app on this device.

Now for running this, we got a couple of options.

You can open up the terminal in here by going into your menu here and clicking on new

terminal

and this is now your normal system

terminal or command prompt just running inside of Visual Studio Code and it automatically navigated

into this project folder,

so you don't have to do this manually with the cd command.

Now here, you can run Flutter run and it will run your app and it should automatically find this application

here.

You could absolutely do that

but with the help of this IDE and the Flutter extension which we installed in the first course section,

we get an even more convenient way of running our app.

You can go to debug here and now you have two options of starting your app,

you can start it in debugging mode or either by clicking here or by using this shortcut here

and this is something I'll show you later in a separate module where I will show you how you can debug

your Flutter application and find and fix errors.

You can also run it without debugging, which is a bit faster because with debugging, a lot of extra features

get added to your app

so to say for debugging only and if you run it in non-debug mode, you simply have a bit of a faster app

which is a bit nicer for normal development. That can be run by clicking here or using this shortcut

and if you click this, it should also automatically spot your device,

however first of all you have to choose, at least if you have multiple different extensions installed,

with which environment you want to run your code

and that would be Dart and Flutter here,

so choose that if you are prompted

and now it will auto-detect the emulator and launch this application that we have in this folder here

on that device.

So as you can see here in the bottom right, it's now building the project with the help of Android Studio

and the Android SDK

and here, the top right, you have that control bar which allows you to control the execution of this app.

You can always stop it by clicking that red stop button,

you can reload the app, restart the app on the device with that green refresh icon. You can hot reload

with that flash and hot reload means that changes that you made are added to the already running application

which is a really cool feature Flutter supports for development, makes development much faster because

you don't have to restart your app all the time. You can also pause if you want and you can then these buttons

are helpful for debugging later.

That's the control panel we'll get here

and the build process here takes a couple of seconds up to minutes. The first time you run this subsequent

reloads, when you change something in code and you want to see that in the device or on the device, that

will be much faster,

so it's just that first load which takes a while.

So let's wait for this first launch to finish here, in the meantime, let me also mention that it probably

automatically switched here to the debug console,

so not the terminal anymore but the debug console

and that is the console where you will see all the output whilst the app is running, so any errors will

be shown here

but also some system messages which you might want to print will also be shown here and we'll work with

this quite a bit to fix errors

we might be getting or to see a certain output to validate that everything is working correctly in our

application.

So here it's now starting up,

these are all default log messages which we're seeing here and you should then see your app run on

that emulator as I do it here and you then can press this button here in the bottom right corner to

interact with your application.

Now the first time this is loaded, the first few clicks, it might be a bit slow here but thereafter, it should be

back to normal interaction speed.

So this is the Flutter app which we just created running on that emulator and this is the code or the

project in which we'll work on the code.

Speaking of that, let's now walk through all the folders and files we have here and understand what they're

doing.