Flutter Project Setup: Android Studio

[00:00:00]
>> Let's create a project. We have more slides to see later. So again, let me start with Android Studio and I will finally use VS Code for the rest of the day. So I will show how to create the project in both platforms, in both IDs. So I will create one in Android Studio and then one in VS Code.

[00:00:21]
You pick the ID you want. In Android Studio if you have installed the plug in, you can create a new Flutter project from here. The Flutter project will ask you first the SDK path. Remember, the SDK is a big C file that you have downloaded in the morning.

[00:00:39]
And if everything works, it will ask me for a project name. It's not going to be my final project because I will use VS Code for that, so we'll reach out to FlutterDemo. Well, Description, Project Type, yeah, we wanna create an application. Organisation, this is asking for a package name.

[00:00:57]
Actually, when you're publishing apps In App Stores these days, you have to define a Package ID or a Package Name. That's a string that is mandatory on every app and it's going to be the primary key that will uniquely identify your app in the operating system and in the App Store.

[00:01:18]
And how can we guarantee you, how can we have better probability of not making conflicts with other developers in the world? How can we guarantee that we are not using the same name? We use the website of our company or our own website in reverse order. So actually Frontend Masters, I can do something like this, or in my case, I can use my own website.

[00:01:44]
And the idea is that no one else is owning the same name in the world, so technically, no one can actually use that. And then it will attach to that the name of your project. So the final package name will be com.frontendmasters, I cannot say workshops something like that.

[00:02:03]
I mean it doesn't need the DNS, it doesn't need to exist to make that work, it's just a string. So the final name will be comfrontendmastersworship.flutterdemo, and that will be must be unique in your operating system and within the store. So you will pick the Android language that you want the project to be created because actually it doesn't mentioned this, but when you create a Flutter application and you want to compile for Android, it creates an Android Studio project internally.

[00:02:35]
So it's asking you for that project, do you want to use Java or Kotlin? Kotlin is the modern Android version, so typically we select Kotlin and for iOS, By the way, you wont see iOS if you're on a Mac on the Windows or Linux, if you're on a Mac, you will see iOS.

[00:02:50]
I can pick Objective-C or Swift. Again, this is internal code in case you need to get later and add more stuff, that typically is not needed for the first demo. I'm going pick Swift as well. I can send it here if I want the web as well. And Linux, Macros and Windows need another plugin, so that's why it's disabled by default, but you can add more platforms from the common line interface later.

[00:03:15]
So if you pick web, it's going to target also the web, okay? Great project offline will actually download everything and make you compile and do everything offline because it's not you will need connection, okay? Because every time you compile, it is checking if there is a new version, so you wanna make the project offline be fine and finish.

[00:03:41]
And if you look here, I'm getting an error saying, Invalid module name. So what's going on here? Flutter supports only the snake case names for the project and for our files, so the project cannot be FlutterDemo like this. I need to use Flutter_demo. Make sense? So this is mandatory, it's not going to work if not.

[00:04:11]
And by the way, it's a good idea to have the SDK in a folder in your device without spaces. So if the footpath has no spaces, the same happens with other SDKs that you might be downloading. So instead of downloading this in in your main Windows, in C colon, my space programmes, no, use myprogrammes without spaces.

[00:04:39]
So store the Flutter SDK In a folder without spaces, okay? To avoid the issues with the command line interface. Okay, finish and this is actually creating the Flutter project. We will see the files that we have here in a minute so no worries. What I want to show you first is that at the top we have a section that says, No device selector.

[00:05:08]
And when you click there, you can actually see Chrome Web, Open iOS Simulator, or Refresh, okay? And here main.dart. And actually, also here it's Android. This says pixel 4 with Play Store, okay? But anyway, I can open now Chrome web, iOS Simulator or Android Emulators. So if I select Chrome Web and I hit Run, my Flutter app will appear.

[00:05:42]
The first time you open your Flutter application, you run your Flutter application in a platform, Web, Android or iOS, it takes some time, okay? And to be honest on Android, it takes minutes and sometimes it can take up to half an hour. So be careful with that because it happens that the first time you run your app, because it needs to download more Android requirements that sometimes it's 500 megabytes.

[00:06:14]
The problem is that sometimes you're downloading that from a server that is Is like busy, and it takes real time and you don't get the feedback in the meantime, you say, Okay what's going on? Well, be patient. And this is the default code that we receive here, it's actually a working app.

[00:06:29]
You can click on the browser, so this is a website, okay? And you can click in the button and you see the number in the middle, that's what you have as your default project, okay? So you you're right here and then you press the play button, at the bottom is actually saying that, Flutter supports hot reload.

[00:06:54]
So that means that if you make a change in this file for example here it says, Flutter demo homepage, I say, Frontend Masters. We will understand this in a minute, but if I change something, and I save Cmd+S on a Mac, Ctrl+S, now I go back to Chrome and it says, Frontend Masters.

[00:07:15]
So I don't need to recompile, I don't need to rerun, so I don't need to wait another half an hour in the case of Android. I just can keep my emulator, or my phone or whatever I'm using as my target running and everything I'm changing is really quick, it's a hot reload.

[00:07:30]
This is actually something that if you're a web developer, probably you're used to this, to a live reload, right? You'll save and you'll see immediately the changes. So, that's actually brand new on the mobile space. So I've been a mobile developer for 20 years, and actually it is the first time with Flutter, that we can actually have a real live reload system, that you make a change and you can immediately see that changing your phone.

[00:07:55]
So before that on any platform, even modern iOS, modern Android, typically you need to recompile, that takes seconds and sometimes minutes to actually get the result on your phone. With Flutter, this actually cool, this is actually a really high performance solution that is also highly efficient for developing, okay?

[00:08:18]
It's actually pretty cool, okay, make sense? So that how you work roughly with Android Studio.