Flutter Project Setup: VS Code

[00:00:00]
>> But then I think that most of you will prefer Visual Studio Code because you're more used to that IDE, it's the cool IDE in town. So, let's see how to do the same, the project directly in Visual Studio Code. I can keep it minimized or something like that, I will close chrome.

[00:00:19]
So, back in VS Code, how do you create a flutter project? First, remember that we need the plugins, so you need to go the extension and install the flutter extension, so you need to have the flutter extension and install and enable. When you have that, you need to go to the view command palette, or use the shortcut that we're already used to in Visual Studio Code.

[00:00:46]
And you just start typing flutter and you will see a couple of commands available for flutter, including creating a new project,okay? So I'm going to create a new project, and I can pick here which kind of template do I wanna use, application, module, package, plugin, skeleton. A skeleton will also give you a List View Detail View flutter application.

[00:01:12]
Anyway, we are going to create an application, it's a default application that we got in Android Studio, okay? So application, and okay where do you wanna store that? I'm going to store that probably here, and I will submit, I will publish this into GitHub in a minute. So you will be able to get my code or follow my code from GitHub, if you want to.

[00:01:38]
By doing this from scratch, what's the project name? I'm going to call this coffee_masters, that's gonna be the name of our app. You can use underscore or you can join the two words, it's just the same, okay? So if you wanna just say coffeemasters, it will work. So, you press Enter, and that will actually create The project, you can see it's running something, it's using actually the SDK.

[00:02:12]
The first time you do that, is probably Visual Studio Code will try to locate your flutter SDK. If it's not finding your flutter SDK in the normal places, it will ask you to locate the SDK. Remember the SDK is the flutter downloader, the flutter package that you downloaded this morning, makes sense?

[00:02:39]
And here I have something, in fact, it's the same code that we have before on Android Studio. And now instead of looking up, we need to look down where it says here a Chrome (web-javascript). So at the bottom of VS Code, you can click where it says Chrome, and you can choose a different device.

[00:03:04]
You can open an iOS simulator if you're on a Mac, or you can open an Android emulator if you are on any OS with Android Studio installed, or you can use the Chrome Web. For now, I think that if we just select from Web, it's okay. How do you run the app?

[00:03:23]
There are many ways, you can use the run, debug button you have there at the top right, VS Code. You can go to the section for debugging and select run and debug. Different ways to do the same, or you can also select the main, you run, start debugging.

[00:03:43]
Because we are in our flutter project, Visual Studio Code knows exactly what to do. So, I'll click run and debug, and this will launch Chrome, by the way it's going to use a new instance of Chrome without plugins. So if you are using Chrome as your main browser, you will see now we will have two instances of Google Chrome running.

[00:04:06]
The first time it takes some time, some seconds, and or minutes. And finally, I have the same experience that we saw before from Android Studio, okay? We have this little app, little counter up and running. In my case, okay? I can show you that from here now I have a like floating toolbar in VS Code that you can move around, without floating toolbar you can pause the current app, you can stop the current app, you can reload it, or hot reload it.

[00:04:46]
But hard reload works automatically every time you save, okay? So you don't need to go and click on that light icon, okay, that lightning icon, it will work automatically. For some reason you wanna force a reload, you can use this button. And this one, it's an explorer, an inspector, okay?

[00:05:04]
We're going to see that later. Anyway, I'm going to stop this with a stop. And now I will pick, just to show you something different, the iOS simulator. So now it's going to open the iOS simulator that comes with Xcode. So if you have a Mac and if you have already installed Xcode, this should work.

[00:05:27]
And when I have selected this, I can try to run again. But now I have selected the iOS simulator. So, the first time will take a couple of seconds again, so we need to wait. If it's not working for you at this point, I will show you what to do.

[00:05:47]
How you can see what's missing, so which steps are missing? As you can see here it says running Xcode build. So actually the flutter SDK is talking to Xcode, the native iOS IDE to compile the application. And now I have on my iPhone, the same counter application is working, and it looks like any other app in the system.

[00:06:14]
Yeah, it doesn't contain an icon and that sort of things, but yeah, it's a default template, it's actually an app installed on my simulator. And if I have my own iPhone connector in this computer, I might be able to get this app directly in my iPhone. There are a couple of steps to be done, that we can see later.

[00:06:33]
But you can actually run this on your own iPhone or iPad. What about Android? I can change here, again at the bottom, remember I'm using the bottom selector where it says iPhone 13. I can click there and select one of the pixels that I have here, you probably have only one because the first time you installed Android Studio, it includes only one emulator.

[00:06:58]
So I will select that one, now it's open, the emulator. And now if I just stop the previous execution, that's the iOS execution and run it again, it will open in Android, it will compile an Android application, okay. It says running Gradle task, Gradle is a tool coming with Android Studio.

[00:07:24]
It will compile an Android application and install that in the emulator. The first time it takes time, and as I mentioned before, it might take half an hour if you have a slow connection. So, it's something that happened with me because I already have the data. And now I have the same app running on Android, it looks like any other Android app, okay?

[00:07:49]
And it's even installed, okay? It's that one, it doesn't contain an icon, okay, but it's actually a real app. If I connect through USB, my Android device, and I'm going to do that later, you will be able to install and see your app on your own phone as well.

[00:08:12]
So you can see it's the same app, it looks exactly the same on iOS, on Android, and in Chrome, I said website.