Flutter Code Tour

[00:00:00]
>> So before actually touching our code, let's briefly understand the folders that we have in our project, both in VS code and in Android Studio. To be honest, the Android Studio project is actually much more complex in terms of the files that you have inside, okay? But it's kind of the same thing.

[00:00:17]
So let's see. We are going to keep all the folders starting with dart. We know that dart means it's a private folder for some tools. So this is part of the Dart compiler or the Flutter SDK, so we don't care about those. Then we have an android folder.

[00:00:32]
So what is the android folder? This is actually the Android Studio project that Flutter is going to use to compile your app. If you know Android development, native development, you can go out and open that folder in Android Studio and customize the native part of your Flutter application.

[00:00:53]
It will be like the container of your Android application. Okay, it makes sense. If you're on a Mac, you will also find the iOS application. The iOS folder contains an Xcode project. The same idea, this is actually the project that is used as a wrapper for the Flutter application.

[00:01:14]
Every time you build an app in Flutter, it's not going to change the contents of those projects. Those projects are static, meaning that it's safe to open these projects in Android Studio or Xcode and touch the project to customize the project to your needs. So it's not going to be overriding this.

[00:01:34]
I'm telling you this because if you have ever played with PhoneGap or Apache Cordova, if you know what that is, they were using the same technique. But the Android project and the Xcode project were actually being overwritten every time you compile. So it's actually a very bad idea to use those projects but here in Flutter, you can use a project.

[00:01:56]
Then we have a build folder where the final build will actually appear later. We'll talk about that later. We have a web folder. And what is the folder? The web folder is similar to the the iOS folder and the Android folder. What we have here is the wrapper of our web version.

[00:02:16]
And what's a wrapper for the web? An index html. So you can actually open the index html and customize the html. So changing the title, the metadata because this is going to be the container, the wrapper of your Flutter application. Okay, make sense? Well, on tests, we will insert our test suites for unit testing.

[00:02:43]
Windows, it's something similar for the Windows environment. I think if you want to compile the Windows executable. And lib the for from library or lib, is where our code will reside. To be honest, I prefer SRC as a folder name, not lib because it's just like standard libraries typically.

[00:03:04]
But anyway, this is where Flutter will store your dart files, okay? So we're going to integrate all our files here. And the other file that we're going to use a couple of times, so it's an important file. It's pubspec.yaml. There's a YAML file in case we haven't played with YAML files before.

[00:03:26]
It's a configuration file. So where we can actually change some properties. We can add dependencies. We can set some things that are used by the Flutter SDK. So every time we compile, every time we build our app, it's going to take information from here. So this is like package.json in an NPM project.

[00:03:50]
It's the pubspec.yaml. So far, we've seen Dart as the language. And quickly, how would you create a project. So what if you try to run your app on an Android emulator or an IOS simulator in case you have a Mac and it's not working. One thing that you can do if you have already installed your Flutter SDK and the SD is, actually in the path, you can open a terminal or use any terminal in your OS.

[00:04:20]
And you can type flutter doctor. That will actually make a couple of analysis within your computer. And it's going to check if you have the SDKs. If you have the Android emulator set up. If you have everything set up. And in my case, you can see everything is green, so I'm good to go.

[00:04:39]
But you may have some reds there and every red item will give you instructions on what to do. For example, the first time you open the Android emulator, you need to actually accept some licenses from Google. And flutter doctor will actually tell you exactly what to do. You just need to copy and paste something in the terminal to accept all those terms and conditions, so then the emulator will work.

[00:05:11]
So in any case, when you have a problem with an emulator or with the Flutter compilation system, just go and run flutter doctor.