Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
0
1
00:00:00,370 --> 00:00:00,700
All right.
1
2
00:00:00,720 --> 00:00:07,860
So now that we've pretty much created all of the interface of our 'I Am Rich' app, we have a scaffold with
2
3
00:00:07,980 --> 00:00:14,010
a app bar, a body, an image that comes from our assets in our images folder.
3
4
00:00:14,100 --> 00:00:21,690
But there's just one thing that we still haven't got. We haven't got a custom app icon. For every single
4
5
00:00:21,690 --> 00:00:23,640
app that you create using Flutter,
5
6
00:00:23,670 --> 00:00:28,130
you get a default Flutter logo as your app icon.
6
7
00:00:28,140 --> 00:00:34,290
Now if you start creating lots of apps, they can get very confusing very quickly. And besides, when you're uploading
7
8
00:00:34,290 --> 00:00:37,500
it to the App Store, you don't want it to look like a default Flutter app.
8
9
00:00:37,530 --> 00:00:38,330
Right?
9
10
00:00:38,340 --> 00:00:42,090
So how do we give our apps an app icon.
10
11
00:00:42,090 --> 00:00:43,410
Now first things first.
11
12
00:00:43,410 --> 00:00:50,100
I want you to go ahead and download the 'I Am Rich' app icon from this current lesson.
12
13
00:00:50,100 --> 00:00:55,290
There's a file that you can download and once you've downloaded it and open it, you should see an image
13
14
00:00:55,320 --> 00:00:57,720
that looks something like this.
14
15
00:00:57,720 --> 00:01:03,060
And then what you're going to do is you're gonna go to a website called appicon.co
15
16
00:01:03,390 --> 00:01:06,680
And you're going to drag and drop your image
16
17
00:01:06,690 --> 00:01:10,260
that's pretty large, into the place holder there.
17
18
00:01:10,470 --> 00:01:14,670
And then we're going to select for all the platforms that we want to create an app icon for.
18
19
00:01:14,760 --> 00:01:21,570
So we're going to uncheck iPad, watch and Mac. We're only going to generate icons for the iPhone and
19
20
00:01:21,630 --> 00:01:22,520
Android.
20
21
00:01:22,650 --> 00:01:24,570
Go ahead and click generate.
21
22
00:01:24,900 --> 00:01:31,440
And you should be able download a zipped file that contains all of the icons that they've generated
22
23
00:01:31,470 --> 00:01:32,430
for you.
23
24
00:01:32,640 --> 00:01:35,880
If you have a peek inside here, you can see inside Android,
24
25
00:01:35,880 --> 00:01:40,280
we've got some folders that contain different sized icons.
25
26
00:01:40,290 --> 00:01:43,470
So for example this one is the smallest.
26
27
00:01:43,470 --> 00:01:50,410
And this one is the largest Android icon. And it's done the same for iOS as well.
27
28
00:01:50,430 --> 00:01:54,300
And it's inside the assets.xcassets folder.
28
29
00:01:54,300 --> 00:02:01,950
The next thing we have to do is to actually move these assets into our current project. And to do that,
29
30
00:02:02,010 --> 00:02:05,310
we're going to need the project navigator over here.
30
31
00:02:05,910 --> 00:02:14,010
So remember I said that we have our iOS folder which contains all the files of our iOS app, and our Android
31
32
00:02:14,010 --> 00:02:21,720
folder that contains all the files of our Android app. And these files include the actual launcher icon
32
33
00:02:21,780 --> 00:02:25,070
or the app icon if you will.
33
34
00:02:25,080 --> 00:02:27,330
So let's first start with the Android app.
34
35
00:02:27,360 --> 00:02:35,910
If you go into the app folder, then you go into src, then you go into main, and finally you go into
35
36
00:02:35,910 --> 00:02:36,520
res.
36
37
00:02:36,600 --> 00:02:43,900
You can see that we've got a whole bunch of folders here. And all of these that start with a mipmap
37
38
00:02:44,100 --> 00:02:47,130
are your app icon folders.
38
39
00:02:47,130 --> 00:02:53,930
So if you select the res folder, right click and open 'Reveal in Finder',
39
40
00:02:54,240 --> 00:02:56,630
it will locate that folder for you.
40
41
00:02:56,670 --> 00:03:01,920
And if you're working on Windows, then when you right click on the folder, you should find something that
41
42
00:03:01,920 --> 00:03:07,610
says, 'Show in Explorer' which is the equivalent of Finder on Windows.
42
43
00:03:07,680 --> 00:03:15,230
But once we've got that folder found and we can open it up, we can have it side by side with the downloads
43
44
00:03:15,240 --> 00:03:17,120
that we had from the app
44
45
00:03:17,130 --> 00:03:21,320
icon.co website. And we open up the Android folder,
45
46
00:03:21,390 --> 00:03:26,000
you can see that there's a couple of files that look pretty much the same as over here.
46
47
00:03:26,010 --> 00:03:26,610
Right.
47
48
00:03:26,610 --> 00:03:28,930
We've got a lot of mipmap folders.
48
49
00:03:28,980 --> 00:03:34,890
So what I want you to do is to select everything inside the res folder that says mipmap, and you're
49
50
00:03:34,890 --> 00:03:38,490
going to move it into your trash.
50
51
00:03:38,490 --> 00:03:44,400
Now instead you're going to select all the ones that came from your android folder, your download off
51
52
00:03:44,410 --> 00:03:48,240
of the appicon website, and you're going to drag it in.
52
53
00:03:48,870 --> 00:03:56,240
And now that adds all of the app icons that were generated from our website, into our project.
53
54
00:03:56,340 --> 00:04:02,460
So we're done with our Android project and we can collapse it. So onto the iOS project.
54
55
00:04:02,640 --> 00:04:08,660
Now inside the iOS folder, we're going to open up the folder that's called Runner, not runner.xco
55
56
00:04:08,670 --> 00:04:09,790
project, not runner
56
57
00:04:09,790 --> 00:04:11,000
.xcoworkspace
57
58
00:04:11,130 --> 00:04:18,210
but the actual runner folder. And here, we have something called assets.xcassets which is where our
58
59
00:04:18,300 --> 00:04:20,850
app icons actually live.
59
60
00:04:20,850 --> 00:04:27,540
And you can see that at the moment, there are different resolutions of the Flutter default icon.
60
61
00:04:27,540 --> 00:04:29,380
So let's change that.
61
62
00:04:29,460 --> 00:04:36,630
We're going to right click on the assets.xcassets folder, and we're going to, again 'Reveal in Finder'
62
63
00:04:36,780 --> 00:04:41,980
or 'Show in Explorer' and we're going to have our windows side by side again.
63
64
00:04:42,190 --> 00:04:45,530
And on the left the Runner is of course, our iOS app.
64
65
00:04:45,610 --> 00:04:49,650
And on the right we've got the images from our app icons download.
65
66
00:04:50,320 --> 00:04:56,630
And then we're going to delete the assets.xcassets folder from our Runner over here.
66
67
00:04:56,800 --> 00:05:02,500
So we're just going to drag that again to trash or COMMAND + backspace, to delete. And then I'm going to
67
68
00:05:02,500 --> 00:05:07,060
drag the same one from the downloaded file into here.
68
69
00:05:07,720 --> 00:05:15,310
And if you've done everything that I've just said we should now have app icons for both our iOS and Android
69
70
00:05:15,310 --> 00:05:15,880
app.
70
71
00:05:15,940 --> 00:05:20,070
I'm going to go ahead and launch my Android emulator.
71
72
00:05:20,230 --> 00:05:26,290
So now I'm going to make sure I've got my Android emulator selected, and I'm going to go ahead and click
72
73
00:05:26,380 --> 00:05:27,660
run.
73
74
00:05:27,970 --> 00:05:31,730
And we now have our app showing up on our Android phone.
74
75
00:05:31,780 --> 00:05:34,090
And if I click on the home button,
75
76
00:05:38,700 --> 00:05:45,240
and drag up to show all of my apps, you can see that we've got our 'I Am Rich' app right here with the
76
77
00:05:45,240 --> 00:05:47,710
custom icon.
77
78
00:05:47,710 --> 00:05:52,800
Now if you're an Android user, you might have noticed that within the past few years, Google has pretty
78
79
00:05:52,800 --> 00:05:57,240
dramatically changed the styling of the app icons.
79
80
00:05:57,360 --> 00:06:04,770
What used to be square icons with transparencies and different shapes, has now been pretty much unified
80
81
00:06:04,800 --> 00:06:12,000
into these circular icons. And you can see with our 'I Am Rich' icon even though we're providing the right
81
82
00:06:12,000 --> 00:06:15,030
sized assets for the app icon,
82
83
00:06:15,030 --> 00:06:20,970
it gets this white circle around it which some of you may or may not like.
83
84
00:06:21,120 --> 00:06:29,040
And in the wild, I've seen some app designers deciding to go along with this style, but others have decided
84
85
00:06:29,040 --> 00:06:31,230
to embrace the circular icon.
85
86
00:06:31,230 --> 00:06:33,680
So I want to quickly show you how you can do this
86
87
00:06:33,690 --> 00:06:42,240
also. Inside our project folder, if we expand the Android folder and we go to app, source, main, then we're
87
88
00:06:42,240 --> 00:06:48,540
going to right click on the res folder, gonna click on new and were gonna select 'Image Asset'. And then
88
89
00:06:48,540 --> 00:06:56,480
we get into our image asset configuration wizard. And we get to pick a path, or namely the starting image.
89
90
00:06:56,640 --> 00:07:03,690
I'm gonna go ahead and pick our 'I Am Rich' app icon, and I'm going to click on open and then it's going
90
91
00:07:03,690 --> 00:07:07,460
to show you your icon in all sorts of different configurations.
91
92
00:07:07,560 --> 00:07:11,070
Square, rounded square, square called circle etc.
92
93
00:07:11,130 --> 00:07:18,930
And what you can do is you can resize the image so that it fits into the space that you want it to be
93
94
00:07:18,930 --> 00:07:19,550
seen in.
94
95
00:07:19,740 --> 00:07:26,580
If you're going for your round icon, or your legacy icon, you can see in all of these scenarios, it still
95
96
00:07:26,580 --> 00:07:27,690
looks good.
96
97
00:07:27,690 --> 00:07:30,840
The diamond is still within the circle.
97
98
00:07:31,020 --> 00:07:38,030
So once you're done adjusting, go ahead and click next. And then it's going to replace all of the places
98
99
00:07:38,090 --> 00:07:41,440
we had our previous images with the new ones.
99
100
00:07:41,450 --> 00:07:43,610
It's going to be overwritten by this.
100
101
00:07:43,610 --> 00:07:44,990
And that's exactly what we want.
101
102
00:07:44,990 --> 00:07:46,900
So go ahead and click finish.
102
103
00:07:47,810 --> 00:07:55,080
And now it added the files that we've edited, and we can go ahead and run our up again. Now that our app
103
104
00:07:55,110 --> 00:07:56,040
has started again,
104
105
00:07:56,040 --> 00:08:01,800
I'm going to click on the home button, and when we drag up our menu, you can see our new icon fills the
105
106
00:08:01,800 --> 00:08:04,000
entire space of the circle.
106
107
00:08:04,110 --> 00:08:07,400
And to my eyes at least, I think that looks a lot better.
107
108
00:08:08,030 --> 00:08:10,650
It's up to you which style you want to choose.
108
109
00:08:10,650 --> 00:08:16,230
You can go for sort of like the calculator app, the calendar app style, where you've got your square icon
109
110
00:08:16,230 --> 00:08:20,670
within a circle, or you can fill up the entire circle with your design.
110
111
00:08:21,030 --> 00:08:24,810
But these are the two ways that you can incorporate your Android app icon.
111
112
00:08:25,020 --> 00:08:34,280
And if I run the app on the iPhone, you can see that my app icon has also updated to the one that I want.
112
113
00:08:34,280 --> 00:08:40,100
So this is a really easy way of updating your Android and iOS app icons.
113
114
00:08:40,550 --> 00:08:47,480
And if you want different app icons, then you can simply use a different image and only generate the
114
115
00:08:47,480 --> 00:08:53,840
iPhone sets, or only generate the Android sets and replace them as you need to.
115
116
00:08:53,840 --> 00:08:55,250
So this has been pretty fun.
116
117
00:08:55,250 --> 00:09:02,030
We've built an app complete with an app icon, with image assets, and all the good parts of any mobile
117
118
00:09:02,030 --> 00:09:02,700
app.
118
119
00:09:02,720 --> 00:09:09,890
So now we have to do is to run it on a physical device. For all of that and more, I'll see on the next lesson.
12791
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.