Building for Android & iOS

[00:00:00]
>> So, now that we are done, what's the next step? Well, to compile the apps, it's actually pretty simple, you need open a terminal, and you type flutter build and the name of the platform that you wanna build. Android will actually let you build AABs or APKs, actually, if you go to the last section of the compiling website, compiling for Android, okay?

[00:00:29]
You can actually compile using flutter build APK or flutter build appbundle and that will give you the file. The problem is that by default you don't have icons, so you actually need to define your icons. Okay, for Android and for iOS, the same happens on both sides. So compiling is actually pretty simple, if you wanna compile for the web, you just say flutter build web.

[00:00:54]
And it's going to give you the final version that you can publish in your web server, but also icons are a problem. So the next steps, before polishing is setting up the icons, so let me do that quickly on both Android and IOS, and then finish with BWS on the web.

[00:01:13]
So to actually work with Android, you need to use Android Studio, and you need to open your projects Android sub-folder, okay. So you need to go to your project Android sub-folder, I'm going to think it's this one. There is an Android sub-folder, so you need to open that folder with Android Studio.

[00:01:41]
Even if you were not using Android Studio, it doesn't matter for creating your Flutter app, okay? Now we are actually opening the Android Studio project that is actually, you won't see any Flutter code here, okay. But here in the res folder in the mipmap folder, we do have a launcher, the launcher is actually the icon.

[00:02:04]
By default, it's the Flutter logo, the Flutter icon, we don't want that, okay? So to actually replace this launcher with a new one, you need to right click over the mipmap > New > Image Asset. Okay, and here, you will be able to design your icon for Android.

[00:02:30]
What we want typically is to take first for the foreground layer, I mean the foreground layer. I wanna take an asset that I have in my computer, so I need to just select the Path that I wanna use. In the assets that you downloaded, you have a section for icons.

[00:02:52]
So for example, it says icon PNG, if you've got one, this is how your Icon finder will look like. So it looks really bad, as you can see, because Android today supports different shapes for icons. So what you need to do is remove this sidebar until you are happy, you need to add more padding to the icon.

[00:03:15]
And to remove that the green borders that we have, we need to click on the Background layer here, and then select the Color, and we can use the color picker to just pick the right color. And this is how our icon will look like on different versions of Android.

[00:03:35]
If you select Next, it will tell you that you will replace to the existing icon, and we want that because we don't want the flutter logo. And now if you come back here, you will see that your icon is actually the right one. So now you're ready to make the final compilation, you can make the final compilation from here, from Android Studio using the build menu, and you can build an APK or a bundle if you select Build APK it will just build.

[00:04:05]
Or you can build it from the terminal asking flutter to create that APK for you. It's just the same thing, but we have already save the icons, okay, any question? Icon for Android? Nope, now the APK is ready, I can locate the APK and that's actually the Android app Okay?

[00:04:31]
On iOS, we need to do something similar, so I need to open Xcode, you need a Mac remember. So I need to open from the iOS folder of my flutter project. I need to open then on the iOS folder, I need to open the one that says, runner workspace.

[00:04:57]
So I open that runner workspace in Xcode, and here there is a file with the name assets. And within there I can click on the Icon by default, we have another set of flutter icons. iOS needs a lot of PNGs in different file sizes, so you can select all of them and press Delete.

[00:05:24]
So we delete the flutter logo, and you can see here all the sizes that you need. There are many tools out there that can take your icon and create all this version for you. I already have in the companion website assets, also a folder that says, icons iOS, where you have all the versions, okay?

[00:05:50]
I'm not going to do it one by one, but you can do that, I will do that on 1024 here at the bottom, the most important ones are 120 and 180. So 120 will go here, 180 will go there for example, and now you can compile your app for IOS as well.

[00:06:12]
You can do it from Xcode or from the Flutter terminal, it's up to you. But if you don't change the icons, or other metadata that you wanna change It will have the flutter icon. Of course here, it helps if you have some experience on iOS and Android development.

[00:06:28]
Okay, and for that here for the Masters, you have two other workshops that I did on Kotlin and Swift. And you can get some ideas on how to improve more things around that app.