Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,080 --> 00:00:03,839
this massive flutter course will take
2
00:00:01,839 --> 00:00:06,000
you from being an absolute beginner to
3
00:00:03,839 --> 00:00:08,480
being able to release apps on the google
4
00:00:06,000 --> 00:00:10,879
play store and the app store bandit is a
5
00:00:08,480 --> 00:00:13,120
very experienced software developer and
6
00:00:10,880 --> 00:00:15,280
an excellent teacher hello everyone and
7
00:00:13,119 --> 00:00:17,038
welcome to this free flota course my
8
00:00:17,039 --> 00:00:21,679
developer expert for flutter and dart
9
00:00:19,920 --> 00:00:23,840
and let's jump and jump right in who's
10
00:00:21,679 --> 00:00:26,399
this course for i designed this course
11
00:00:23,839 --> 00:00:28,719
mainly for absolute beginners so whoever
12
00:00:26,399 --> 00:00:31,038
hasn't even done a written a single line
13
00:00:28,719 --> 00:00:32,399
of code before i actually when designing
14
00:00:31,039 --> 00:00:34,000
this course i designed it for two
15
00:00:32,399 --> 00:00:35,679
specific personas one was a graphic
16
00:00:34,000 --> 00:00:36,880
designer who was working mainly with
17
00:00:36,880 --> 00:00:40,320
actually it doesn't really matter what
18
00:00:38,000 --> 00:00:42,799
graphical tool you're using photoshop
19
00:00:42,799 --> 00:00:46,159
and the other persona was a project
20
00:00:44,159 --> 00:00:49,199
manager who's mainly working with jira
21
00:00:46,159 --> 00:00:50,799
so um i've made the assumption that you
22
00:00:49,200 --> 00:00:52,879
pretty much don't know anything about
23
00:00:50,799 --> 00:00:54,718
software development from before and
24
00:00:52,878 --> 00:00:56,640
even if you're a software developer you
25
00:00:54,719 --> 00:00:59,198
could perhaps jump over the things that
26
00:00:56,640 --> 00:01:00,878
you might know but if you haven't done a
27
00:00:59,198 --> 00:01:02,159
flutter development from before i
28
00:01:00,878 --> 00:01:03,919
strongly suggest that you actually
29
00:01:02,159 --> 00:01:05,280
follow the chapters chronologically
30
00:01:03,920 --> 00:01:07,359
which is the way i've designed this
31
00:01:07,359 --> 00:01:11,920
so um as i mentioned i want when i
32
00:01:10,319 --> 00:01:14,000
design this course i want i wanted
33
00:01:11,920 --> 00:01:15,920
everybody to just follow the chapters
34
00:01:14,000 --> 00:01:18,719
one at a time and one after each other
35
00:01:15,920 --> 00:01:20,478
chronologically so um i highly recommend
36
00:01:18,719 --> 00:01:22,158
that you don't jump over chapters just
37
00:01:20,478 --> 00:01:24,239
because there's so much information
38
00:01:22,159 --> 00:01:26,240
provided in each chapter and i will be
39
00:01:24,239 --> 00:01:27,679
referring back to information that i
40
00:01:26,239 --> 00:01:29,839
provided in previous chapters in each
41
00:01:27,680 --> 00:01:32,479
chapter so i think it's very good if you
42
00:01:29,840 --> 00:01:34,240
can just follow the course the way i
43
00:01:32,478 --> 00:01:36,478
design it to be consumed which is
44
00:01:36,478 --> 00:01:41,200
and what you learn in this course is not
45
00:01:38,879 --> 00:01:43,920
only the basics but you'll also go from
46
00:01:41,200 --> 00:01:45,040
a complete beginner to being able to
47
00:01:45,040 --> 00:01:49,759
applications in apple's app store and
48
00:01:47,280 --> 00:01:51,359
google's play store and we're going to
49
00:01:51,359 --> 00:01:54,478
blend of different tools and software
50
00:01:53,200 --> 00:01:56,159
we're going to be using visual studio
51
00:01:54,478 --> 00:01:59,200
code we're using firebase for the
52
00:01:56,159 --> 00:02:01,040
backend which i'll teach you all about
53
00:01:59,200 --> 00:02:03,200
we're using even figma as a graphic
54
00:02:01,040 --> 00:02:04,880
designer to create our icons and
55
00:02:06,718 --> 00:02:11,598
loading screens so and there's lots to
56
00:02:09,758 --> 00:02:12,878
be learned and i'll take you through
57
00:02:11,598 --> 00:02:14,479
those steps and i don't make any
58
00:02:12,878 --> 00:02:17,120
assumptions about what you may know from
59
00:02:14,479 --> 00:02:18,878
before so i'll explain everything along
60
00:02:17,120 --> 00:02:21,360
the way so you'll go from absolute
61
00:02:18,878 --> 00:02:23,359
beginner to be able to be able to
62
00:02:21,360 --> 00:02:25,280
actually release your two applications
63
00:02:23,360 --> 00:02:27,920
which is the same code base in apple's
64
00:02:25,280 --> 00:02:29,520
app store and google's play store
65
00:02:27,919 --> 00:02:31,039
uh if you if you're attending this
66
00:02:29,520 --> 00:02:33,040
course please do follow me on social
67
00:02:31,039 --> 00:02:36,079
media and i'll really really appreciate
68
00:02:33,039 --> 00:02:38,560
it i'm evan.mp on twitter and also you
69
00:02:36,080 --> 00:02:40,640
can find me by my full name on linkedin
70
00:02:38,560 --> 00:02:42,878
that'd be much appreciated this course
71
00:02:42,878 --> 00:02:46,079
but for those who want to and are able
72
00:02:46,080 --> 00:02:51,280
support me um then you can do that by
73
00:02:51,280 --> 00:02:57,039
buy me a coffee.com van that so without
74
00:02:54,479 --> 00:02:58,318
further ado let's just jump right into
75
00:03:00,639 --> 00:03:04,559
to the first chapter of our flutter
76
00:03:06,400 --> 00:03:10,959
there are so many different topics that
77
00:03:08,719 --> 00:03:12,158
i could choose for the first chapter
78
00:03:15,280 --> 00:03:19,680
however after going through the material
79
00:03:18,158 --> 00:03:22,239
that i've been preparing for you for
80
00:03:19,680 --> 00:03:25,599
this course i realized that one of the
81
00:03:22,239 --> 00:03:28,319
absolute basic points that we have to go
82
00:03:25,598 --> 00:03:29,598
through is the developer accounts
83
00:03:29,598 --> 00:03:34,158
for apple and google now if you're not
84
00:03:32,560 --> 00:03:35,840
familiar with the term of developer
85
00:03:36,639 --> 00:03:39,759
basically what a developer account
86
00:03:37,919 --> 00:03:43,598
allows you to do is to release your
87
00:03:39,759 --> 00:03:46,719
applications on um apple's app store and
88
00:03:47,280 --> 00:03:52,640
as i mentioned in the introduction
89
00:03:49,759 --> 00:03:53,840
you may choose to follow along this
90
00:03:56,080 --> 00:04:00,879
application to the app store and the
91
00:04:02,000 --> 00:04:06,560
even if you do decide to not release the
92
00:04:06,560 --> 00:04:10,158
on the aforementioned stores you will
93
00:04:10,158 --> 00:04:15,919
for the optimal experience of
94
00:04:12,400 --> 00:04:19,280
development for ios and android you will
95
00:04:15,919 --> 00:04:20,639
most definitely need a developer account
96
00:04:24,399 --> 00:04:29,839
i mean it is quite deep to try to
97
00:04:26,560 --> 00:04:31,040
explain the actual reason behind it
98
00:04:31,040 --> 00:04:33,919
from my perspective one of the most
99
00:04:32,560 --> 00:04:35,839
important reasons you may want to have a
100
00:04:33,918 --> 00:04:38,319
developer account is to create the
101
00:04:41,120 --> 00:04:45,519
so every application on ios and every
102
00:04:45,519 --> 00:04:51,519
an identifier which is usually something
103
00:04:48,478 --> 00:04:53,439
called a reverse domain identifier and
104
00:04:59,199 --> 00:05:03,439
some were somehow it was decided that
105
00:05:01,918 --> 00:05:05,758
every application needs to have an
106
00:05:03,439 --> 00:05:08,160
identifier and every identifier is kind
107
00:05:05,759 --> 00:05:09,520
of like associated with a domain name
108
00:05:08,160 --> 00:05:11,600
and a domain name is kind of like a
109
00:05:09,519 --> 00:05:12,359
website for instance if you have
110
00:05:12,360 --> 00:05:17,840
yourname.com uh as your website
111
00:05:17,839 --> 00:05:21,679
you would say that okay i'm gonna create
112
00:05:20,000 --> 00:05:25,600
an application for ios and android in
113
00:05:21,680 --> 00:05:26,560
flutter and i'm gonna call it fubar
114
00:05:26,560 --> 00:05:29,600
it was somehow decided that your
115
00:05:28,000 --> 00:05:32,319
applications identifier would then in
116
00:05:34,800 --> 00:05:39,600
then it would literally be your domain
117
00:05:50,720 --> 00:05:53,840
if somebody knows the reasoning behind
118
00:05:52,240 --> 00:05:55,519
it i would be glad to hear that and i'm
119
00:05:53,839 --> 00:05:57,198
sure that there's resources out there
120
00:05:55,519 --> 00:05:59,198
explaining why that is the case but it
121
00:05:57,199 --> 00:06:00,240
kind of feels like it's become
122
00:06:01,918 --> 00:06:06,478
and we just have to roll with it
123
00:06:06,478 --> 00:06:09,199
the reason i explained the app
124
00:06:12,079 --> 00:06:17,918
when you set up your back end later when
125
00:06:14,560 --> 00:06:20,079
we set up the back end later together
126
00:06:17,918 --> 00:06:21,758
in that the client that we write in
127
00:06:20,079 --> 00:06:24,478
flutter is going to talk with our
128
00:06:21,759 --> 00:06:26,560
backend and store the notes retrieve the
129
00:06:33,120 --> 00:06:38,720
setup also will require you to have your
130
00:06:41,279 --> 00:06:46,638
even though you don't necessarily need
131
00:06:44,000 --> 00:06:48,399
to have a developer account to get an
132
00:06:46,639 --> 00:06:50,720
app identifier because an app identifier
133
00:06:48,399 --> 00:06:52,959
is just something that you decide
134
00:06:50,720 --> 00:06:54,800
okay here's my app identifier i think my
135
00:06:54,800 --> 00:06:57,919
blah blah and even though you don't
136
00:06:56,319 --> 00:06:59,520
actually need a website that's the thing
137
00:06:57,918 --> 00:07:01,598
but an app identifier is usually
138
00:06:59,519 --> 00:07:02,639
associated with a website so don't worry
139
00:07:02,639 --> 00:07:05,598
you don't have to have a website in
140
00:07:04,079 --> 00:07:08,478
order to follow along with these steps
141
00:07:08,478 --> 00:07:12,719
but it is still good practice to create
142
00:07:10,879 --> 00:07:15,199
your developer account in order to
143
00:07:19,839 --> 00:07:25,279
another reason that you will need
144
00:07:22,319 --> 00:07:27,199
a developer account for apple and google
145
00:07:41,038 --> 00:07:44,959
then you will need to register a
146
00:07:44,959 --> 00:07:49,519
use some resources that apple provides
147
00:07:46,959 --> 00:07:50,959
you in forms of certificates and keys
148
00:07:50,959 --> 00:07:58,038
in order to deploy your application to a
149
00:07:53,120 --> 00:07:58,038
telephone or an ipad for instance
150
00:07:58,399 --> 00:08:01,839
and android the world is a little bit
151
00:08:00,478 --> 00:08:04,719
different in that you don't have to do
152
00:08:04,720 --> 00:08:09,120
in order to then submit your application
153
00:08:10,160 --> 00:08:15,360
later so that it can be available for
154
00:08:12,478 --> 00:08:17,519
everybody who has an android telephone
155
00:08:15,360 --> 00:08:19,280
or a tablet you will still need a
156
00:08:19,279 --> 00:08:22,559
it goes without saying that it is a very
157
00:08:29,680 --> 00:08:33,599
deploy your application later to app
158
00:08:33,599 --> 00:08:38,879
it's still a very fundamental step so
159
00:08:36,559 --> 00:08:40,799
i suggest that you actually go through
160
00:08:38,879 --> 00:08:42,240
these steps that i'm gonna provide you
161
00:08:42,240 --> 00:08:47,759
and that's why i actually decided to
162
00:08:48,720 --> 00:08:51,600
sorry i have to just edit my notes a
163
00:08:51,600 --> 00:08:55,120
if you haven't watched the introduction
164
00:08:53,278 --> 00:08:56,639
to this course and you're just jumping
165
00:08:55,120 --> 00:08:58,959
here i suggest that you go to the
166
00:08:56,639 --> 00:09:00,720
introduction and watch it i know it was
167
00:08:58,958 --> 00:09:03,359
about 34 minutes it was quite a long
168
00:09:00,720 --> 00:09:05,600
introduction but there are so many
169
00:09:03,360 --> 00:09:07,680
important points that i feel everybody
170
00:09:05,600 --> 00:09:09,920
needs to know before you get started
171
00:09:07,679 --> 00:09:11,838
with the course so please watch those if
172
00:09:09,919 --> 00:09:13,838
you see me moving my head around then
173
00:09:13,839 --> 00:09:18,160
and i explain a lot of things
174
00:09:16,240 --> 00:09:19,039
that are like the fundamentals of this
175
00:09:21,839 --> 00:09:25,760
all those decisions which i believe are
176
00:09:23,759 --> 00:09:27,360
so important that i still suggest
177
00:09:25,759 --> 00:09:30,958
everybody watched an introduction before
178
00:09:27,360 --> 00:09:32,320
they actually start with the course so
179
00:09:39,679 --> 00:09:44,159
why we need a developer account i
180
00:09:41,120 --> 00:09:47,600
believe i've already covered this
181
00:09:47,600 --> 00:09:52,560
the utility is an account that you
182
00:09:52,559 --> 00:09:56,958
that gives you extra resources as a
183
00:09:54,958 --> 00:09:58,799
developer in order to be able to deploy
184
00:09:56,958 --> 00:10:01,039
your application and deploy your
185
00:10:11,440 --> 00:10:16,240
there are two main types of developer
186
00:10:13,440 --> 00:10:20,240
accounts one is an individual account
187
00:10:16,240 --> 00:10:22,480
and the other one is a company account
188
00:10:23,360 --> 00:10:27,278
for me the biggest difference between
189
00:10:25,440 --> 00:10:28,720
these two different accounts is the
190
00:10:33,519 --> 00:10:40,799
if you register an individual account
191
00:10:36,480 --> 00:10:43,519
then you as an individual are liable for
192
00:10:40,799 --> 00:10:45,120
that application and as users download
193
00:10:43,519 --> 00:10:47,039
your application and interact with it if
194
00:10:45,120 --> 00:10:48,639
they have any problems any for instance
195
00:10:52,879 --> 00:10:57,600
if someone for some reason believes that
196
00:10:55,120 --> 00:10:59,278
you're storing their data in the wrong
197
00:10:57,600 --> 00:11:01,040
way or that you're storing their
198
00:10:59,278 --> 00:11:03,120
personal information without exposing
199
00:11:01,039 --> 00:11:06,240
that and telling the users about that
200
00:11:03,120 --> 00:11:07,919
then they can personally hold you liable
201
00:11:07,919 --> 00:11:12,838
for for instance breach of information
202
00:11:12,839 --> 00:11:18,800
infringements or whatever it is so
203
00:11:16,799 --> 00:11:20,879
just know that you can register yourself
204
00:11:21,839 --> 00:11:25,600
app store apple's app store and google's
205
00:11:25,600 --> 00:11:30,079
but you need to also be aware that
206
00:11:28,000 --> 00:11:32,159
should you wish to do that then you're
207
00:11:30,078 --> 00:11:32,879
personally liable for any problems that
208
00:11:34,799 --> 00:11:38,399
occurring in the future so that's the
209
00:11:38,399 --> 00:11:42,720
or an individual account and as a
210
00:11:44,958 --> 00:11:48,000
based on what type of company you've
211
00:11:49,839 --> 00:11:53,839
you may or may not be personally liable
212
00:11:55,120 --> 00:11:59,600
any damages that may be caused to your
213
00:11:57,839 --> 00:12:01,279
users and if they bring it up to you now
214
00:11:59,600 --> 00:12:02,639
i know this is all sounding a lot
215
00:12:02,639 --> 00:12:08,480
in reality what we are trying to do is
216
00:12:05,360 --> 00:12:10,639
not that big a deal but we are still
217
00:12:08,480 --> 00:12:14,240
trying to store i mean the goal of this
218
00:12:10,639 --> 00:12:16,079
course is to um at this course is to
219
00:12:17,679 --> 00:12:22,838
an application and create an application
220
00:12:19,278 --> 00:12:25,278
that can store users notes notes can be
221
00:12:25,278 --> 00:12:30,240
and you're storing those notes then um
222
00:12:28,240 --> 00:12:31,278
on a backhand that you have full access
223
00:12:31,278 --> 00:12:35,039
so you're kind of like storing user
224
00:12:35,039 --> 00:12:38,879
so it is very important that you
225
00:12:36,799 --> 00:12:40,240
actually treat that data correctly make
226
00:12:40,240 --> 00:12:45,680
except those who are authorized
227
00:12:54,879 --> 00:12:58,159
company account you want to create if
228
00:12:57,039 --> 00:12:59,919
that's what you want to create now
229
00:12:58,159 --> 00:13:01,039
because for instance in sweden where i
230
00:13:02,320 --> 00:13:07,920
a personal company account in that or
231
00:13:06,000 --> 00:13:09,519
sorry a personal company so you can
232
00:13:07,919 --> 00:13:12,000
register a personal company it means
233
00:13:09,519 --> 00:13:13,600
that you are personally liable for that
234
00:13:15,120 --> 00:13:18,399
and you can also create a company that
235
00:13:20,399 --> 00:13:24,399
it's like an umbrella basically sits on
236
00:13:22,320 --> 00:13:26,720
top and then there are people who are
237
00:13:24,399 --> 00:13:29,519
directors of the company and blah blah
238
00:13:26,720 --> 00:13:30,399
so you're not personally liable
239
00:13:30,399 --> 00:13:34,399
and that is the same structure that you
240
00:13:32,159 --> 00:13:36,319
can find in many other countries
241
00:13:38,879 --> 00:13:42,000
and many other countries you can set up
242
00:13:43,958 --> 00:13:47,518
proprietorship or something called
243
00:13:46,159 --> 00:13:49,120
english is not my first language but
244
00:13:47,519 --> 00:13:50,639
it's something like that or you can
245
00:13:49,120 --> 00:13:52,240
create like a limited company that you
246
00:13:50,639 --> 00:13:54,560
have limited liability and you're not
247
00:13:54,559 --> 00:13:59,359
these are the different types of
248
00:13:56,799 --> 00:14:01,519
developer accounts that you can set up
249
00:14:01,519 --> 00:14:06,480
we can i mean that point i think we all
250
00:14:04,078 --> 00:14:10,159
understand now that you can create an
251
00:14:06,480 --> 00:14:10,159
individual or a company account
252
00:14:12,159 --> 00:14:17,838
i think i mean i personally registered
253
00:14:18,159 --> 00:14:24,159
as an ios developer and an android app
254
00:14:24,320 --> 00:14:29,839
and since i registered a company account
255
00:14:26,958 --> 00:14:31,838
i can't go through setting up the exact
256
00:14:31,839 --> 00:14:36,959
but at least i can show you some of the
257
00:14:44,879 --> 00:14:50,799
now you can't see the screen right now
258
00:14:54,879 --> 00:14:59,278
now i'm gonna bring my studio here
259
00:14:57,278 --> 00:15:01,600
and i'm going to make this screen a
260
00:14:59,278 --> 00:15:04,078
little bit bigger so that you can see my
261
00:15:05,039 --> 00:15:10,639
let me also make this a little bit
262
00:15:06,399 --> 00:15:14,720
smaller on top so that you can see
263
00:15:10,639 --> 00:15:17,600
the content a little bit better
264
00:15:14,720 --> 00:15:19,040
so you can see here that there are two
265
00:15:17,600 --> 00:15:21,839
options available to you either you
266
00:15:19,039 --> 00:15:24,319
enroll as an individual or you enroll as
267
00:15:24,320 --> 00:15:29,120
and it is strongly recommended actually
268
00:15:29,440 --> 00:15:35,040
so you need to make sure that you have
269
00:15:31,039 --> 00:15:37,439
two-factor authentication turned on and
270
00:15:35,039 --> 00:15:39,198
so that's that's not a problem all this
271
00:15:37,440 --> 00:15:41,199
means basically as an individual it
272
00:15:39,198 --> 00:15:42,958
means that just you you will need an
273
00:15:41,198 --> 00:15:45,359
account you will need to set up an
274
00:15:45,600 --> 00:15:49,278
however if you want to set up as an
275
00:15:46,879 --> 00:15:51,198
organization like if you have a limited
276
00:15:49,278 --> 00:15:53,120
company and you want to create an apple
277
00:15:51,198 --> 00:15:54,719
developer account that is linked to that
278
00:15:53,120 --> 00:15:56,320
organization is a little bit different
279
00:15:57,919 --> 00:16:02,319
you will need to set up something called
280
00:15:59,919 --> 00:16:04,639
addons or duns or i don't know how you
281
00:16:07,039 --> 00:16:12,559
it's a new thing for me at least but it
282
00:16:10,078 --> 00:16:15,919
is an identifier for your company that
283
00:16:12,559 --> 00:16:18,078
you either have been assigned to already
284
00:16:18,958 --> 00:16:24,799
i think there is a company called dmb
285
00:16:24,958 --> 00:16:31,039
so if we go to let me see if i can bring
286
00:16:33,519 --> 00:16:38,560
learn more if you go to learn more here
287
00:16:41,120 --> 00:16:45,198
is called by done and bradstreet
288
00:16:46,559 --> 00:16:51,919
there then we have uh the ability to
289
00:16:53,278 --> 00:16:58,159
for me i was one of the lucky people to
290
00:16:55,679 --> 00:16:59,919
have already been assigned a duns number
291
00:17:02,559 --> 00:17:07,838
because you either have um let's see if
292
00:17:07,838 --> 00:17:11,359
you see it says dmv may have already
293
00:17:09,599 --> 00:17:13,038
assigned your organization a free uh
294
00:17:13,038 --> 00:17:16,480
before enrolling look up your
295
00:17:14,640 --> 00:17:19,520
organization to see if you have a duns
296
00:17:16,480 --> 00:17:21,279
number so you can just click on the link
297
00:17:22,640 --> 00:17:26,720
you can then select your region for me
298
00:17:24,880 --> 00:17:28,640
it would be sweden then i would write my
299
00:17:28,640 --> 00:17:32,480
some address information contact
300
00:17:34,400 --> 00:17:38,880
whether there is a duns number assigned
301
00:17:36,640 --> 00:17:40,720
to your company so i suggest that you
302
00:17:38,880 --> 00:17:41,760
actually do this by going to this
303
00:17:46,000 --> 00:17:50,160
so that's for a duns number if you
304
00:17:48,160 --> 00:17:52,720
already have one but if you don't have
305
00:17:50,160 --> 00:17:56,880
one then you will have to create
306
00:17:52,720 --> 00:17:58,960
and request a duans number from dnb
307
00:17:56,880 --> 00:18:01,520
i would show you the website for dmb and
308
00:18:01,519 --> 00:18:06,079
my browser is set up so that my locale
309
00:18:04,240 --> 00:18:07,839
is already provided to the browser which
310
00:18:06,079 --> 00:18:09,199
is swedish and then if i go to the dmv
311
00:18:07,839 --> 00:18:10,639
website you're gonna see everything in
312
00:18:10,640 --> 00:18:15,679
and that doesn't make any sense just to
313
00:18:12,558 --> 00:18:19,918
read the information in swedish but
314
00:18:15,679 --> 00:18:20,960
i believe you can go to dmb's website um
315
00:18:23,440 --> 00:18:28,080
duns or dunes or here so this is a
316
00:18:31,839 --> 00:18:36,399
let's see if it can change the language
317
00:18:37,519 --> 00:18:43,839
actually i can see here that they're
318
00:18:39,599 --> 00:18:43,839
very they're actually in sweden
319
00:18:44,720 --> 00:18:48,240
and i wonder if we can here change
320
00:19:03,919 --> 00:19:08,240
if there's any way to actually request a
321
00:19:16,319 --> 00:19:22,159
and i can't see anything related to that
322
00:19:18,160 --> 00:19:22,160
to be honest with you so if you go back
323
00:19:24,960 --> 00:19:30,160
i can see i can request the duns and
324
00:19:33,038 --> 00:19:38,079
so what happens if we just go back to
325
00:19:34,798 --> 00:19:40,639
this url that we were on before
326
00:19:38,079 --> 00:19:42,879
and then i just change the locale
327
00:19:48,079 --> 00:19:54,879
get a duns number okay that's good
328
00:19:52,079 --> 00:19:56,639
and then and you can hear say i'm an
329
00:20:07,679 --> 00:20:12,320
it says look up your organization
330
00:20:15,679 --> 00:20:21,919
when you try to get a uns number
331
00:20:18,319 --> 00:20:24,240
it tells you to go to apple's website
332
00:20:25,440 --> 00:20:30,480
if we say that then okay legal business
333
00:20:30,480 --> 00:20:35,120
so you will you will need to go through
334
00:20:33,038 --> 00:20:36,798
this process which doesn't seem to be
335
00:20:36,798 --> 00:20:40,798
to get a duns number you see requested
336
00:20:39,038 --> 00:20:44,119
the uns number so you probably just want
337
00:20:46,480 --> 00:20:51,519
and i i can't explain this complete
338
00:20:49,519 --> 00:20:53,038
process to be honest with you because
339
00:20:51,519 --> 00:20:54,558
first of all it will be a waste of time
340
00:20:54,558 --> 00:21:00,158
uh because these are so many moving
341
00:20:57,038 --> 00:21:02,240
parts and a third-party company that i
342
00:21:00,159 --> 00:21:04,240
have no control over so if i even try to
343
00:21:02,240 --> 00:21:06,079
explain their process it may change
344
00:21:06,079 --> 00:21:11,038
it's not a good investment of our time
345
00:21:08,880 --> 00:21:12,640
but everybody else has figured it out
346
00:21:11,038 --> 00:21:14,798
and i'm pretty sure that if you just go
347
00:21:12,640 --> 00:21:15,520
and say request the uns number you can
348
00:21:17,679 --> 00:21:23,120
get your uns number but begin by going
349
00:21:26,798 --> 00:21:31,599
you may already have been assigned a
350
00:21:31,599 --> 00:21:36,399
do that first please but but if you have
351
00:21:34,000 --> 00:21:38,640
to request the uns number i believe
352
00:21:36,400 --> 00:21:41,600
there is a little bit of a cost to it
353
00:21:38,640 --> 00:21:43,440
and that is about 70 dollars if i'm 70
354
00:21:41,599 --> 00:21:44,719
to 80 dollars at the time of recording
355
00:21:45,599 --> 00:21:49,519
count with almost about a hundred
356
00:21:51,679 --> 00:21:56,720
uh hopefully actually a lot less about
357
00:21:59,440 --> 00:22:03,840
does that make sense i said so many
358
00:22:01,119 --> 00:22:05,439
numbers seventy dollars at least
359
00:22:05,440 --> 00:22:09,279
try to get your duns number at least
360
00:22:07,440 --> 00:22:10,558
that that's what apple says you will
361
00:22:10,558 --> 00:22:16,079
now of course if you want to register
362
00:22:13,359 --> 00:22:18,558
as a company i can't stress this enough
363
00:22:18,558 --> 00:22:24,079
i remember vividly when i registered
364
00:22:21,679 --> 00:22:27,759
a developer account at apple
365
00:22:24,079 --> 00:22:28,639
and they rejected my request saying that
366
00:22:28,640 --> 00:22:33,600
your website doesn't have any content
367
00:22:31,759 --> 00:22:36,558
and they were right because i just
368
00:22:33,599 --> 00:22:38,079
created an empty website like a domain i
369
00:22:36,558 --> 00:22:42,240
regis i know i didn't actually create an
370
00:22:38,079 --> 00:22:44,720
empty website i registered a domain
371
00:22:42,240 --> 00:22:46,720
and there was no website so when you
372
00:22:44,720 --> 00:22:50,880
typed my website's name it was it would
373
00:22:46,720 --> 00:22:53,038
just not show you anything so
374
00:22:50,880 --> 00:22:54,159
um and they came back and said no your
375
00:22:53,038 --> 00:22:55,359
application is rejected because you
376
00:22:54,159 --> 00:22:57,360
don't have a website what kind of
377
00:22:57,359 --> 00:23:02,240
so then i had to actually get like a
378
00:22:59,839 --> 00:23:04,558
hosting service and i have some content
379
00:23:07,519 --> 00:23:12,879
a website sorry as a company as an
380
00:23:10,159 --> 00:23:15,440
organization you will need a hosting
381
00:23:12,880 --> 00:23:16,240
service you will need a domain provider
382
00:23:16,240 --> 00:23:20,079
you will need to ensure that you have a
383
00:23:18,319 --> 00:23:22,480
website because they're not the same
384
00:23:22,480 --> 00:23:27,519
and you have a domain provider it still
385
00:23:24,159 --> 00:23:30,159
doesn't mean that you have content
386
00:23:27,519 --> 00:23:32,000
on your web page but what i realize is
387
00:23:32,000 --> 00:23:36,480
register your domain and have hosting
388
00:23:34,480 --> 00:23:38,319
service make sure that you have a
389
00:23:38,319 --> 00:23:42,240
content in there say hello we are this
390
00:23:43,200 --> 00:23:47,440
we work with this and this if you have
391
00:23:45,519 --> 00:23:48,879
any questions contact this email and
392
00:23:47,440 --> 00:23:51,519
here's our phone number here's their
393
00:23:48,880 --> 00:23:52,640
address etc so you need to ensure that
394
00:23:52,640 --> 00:23:58,080
an organization it is actually an
395
00:23:55,359 --> 00:24:01,678
organization it's not just like hi my
396
00:23:58,079 --> 00:24:03,599
name is fubar i'm sitting at home
397
00:24:01,679 --> 00:24:04,480
contact me if you have any questions not
398
00:24:05,839 --> 00:24:09,359
and of course after you made your
399
00:24:07,359 --> 00:24:12,319
decision you start the enrollment
400
00:24:13,679 --> 00:24:16,880
learn more continue enrollment on the
401
00:24:16,880 --> 00:24:20,400
and then you come here and you will
402
00:24:18,480 --> 00:24:21,839
basically need to provide your
403
00:24:21,839 --> 00:24:25,519
and continue with the process now we're
404
00:24:23,519 --> 00:24:27,119
not going to go through this but
405
00:24:25,519 --> 00:24:28,960
the important thing i have to mention
406
00:24:29,839 --> 00:24:36,000
go through the enrollment process as a
407
00:24:33,038 --> 00:24:37,519
an apple developer unfortunately there
408
00:24:37,519 --> 00:24:42,639
uh last time which is about a few months
409
00:24:40,400 --> 00:24:44,400
ago when i registered or i had to renew
410
00:24:42,640 --> 00:24:45,919
my registration you have to renew your
411
00:24:48,880 --> 00:24:52,480
apple's developer account you have to
412
00:24:57,359 --> 00:25:00,399
process is not free unfortunately it
413
00:25:01,278 --> 00:25:05,679
last time i registered or renewed my
414
00:25:03,359 --> 00:25:08,079
registration it costs 99 and i believe
415
00:25:05,679 --> 00:25:09,519
it's been 99 for a very long time so if
416
00:25:08,079 --> 00:25:10,960
you're in sweden it costs about a
417
00:25:10,960 --> 00:25:15,200
crowns if you're in england it probably
418
00:25:12,640 --> 00:25:18,080
costs about 80 pounds or something
419
00:25:15,200 --> 00:25:21,519
um and in the us it's about yeah just
420
00:25:18,079 --> 00:25:23,038
count with almost a hundred dollars so
421
00:25:21,519 --> 00:25:24,319
i used to be able to provide this like
422
00:25:23,038 --> 00:25:25,919
you have to have some sort of credit
423
00:25:24,319 --> 00:25:27,038
card or debit card to be able to pay for
424
00:25:27,038 --> 00:25:31,679
um after you've done that after you
425
00:25:29,679 --> 00:25:33,679
register your account as an organization
426
00:25:31,679 --> 00:25:36,080
you will have direct access then
427
00:25:33,679 --> 00:25:38,400
or an immediate access to your developer
428
00:25:36,079 --> 00:25:42,399
account and you can start developing
429
00:25:42,400 --> 00:25:47,840
if you're following along with this um
430
00:25:45,200 --> 00:25:49,759
course and you want to deploy your
431
00:25:47,839 --> 00:25:52,000
application to the app store and play
432
00:25:52,000 --> 00:25:57,839
get your developer account either as an
433
00:25:59,519 --> 00:26:03,918
get that process out of the way because
434
00:26:02,000 --> 00:26:05,919
a developer account especially if you're
435
00:26:03,919 --> 00:26:09,600
an organization as i mentioned here is
436
00:26:05,919 --> 00:26:12,080
not a super fast process i mean when you
437
00:26:09,599 --> 00:26:15,038
get the account then it's simple it's
438
00:26:12,079 --> 00:26:18,319
fast and you're in there immediately but
439
00:26:15,038 --> 00:26:20,240
the process itself is a long process so
440
00:26:18,319 --> 00:26:22,319
um i remember for me it took about two
441
00:26:20,240 --> 00:26:24,480
weeks because i got one rejection took
442
00:26:22,319 --> 00:26:27,519
about one week for them to renew like to
443
00:26:24,480 --> 00:26:28,480
review the process the documents again
444
00:26:28,480 --> 00:26:34,159
is not a fast process uh unfortunately
445
00:26:34,798 --> 00:26:41,440
it's yeah it's just long long
446
00:26:41,440 --> 00:26:43,919
get that out of the way if you can
447
00:26:58,480 --> 00:27:02,640
one more thing that i need to mention is
448
00:27:02,640 --> 00:27:06,320
if you're registering and you want to
449
00:27:04,720 --> 00:27:08,558
sell applications which is not the
450
00:27:06,319 --> 00:27:10,158
purpose of this course but if you want
451
00:27:08,558 --> 00:27:12,000
to sell applications then you will have
452
00:27:13,919 --> 00:27:17,440
so they need to ensure that the stuff
453
00:27:16,240 --> 00:27:19,278
that you're selling in different
454
00:27:19,278 --> 00:27:23,200
then being sent to your bank account
455
00:27:21,519 --> 00:27:24,558
will be accounted for when you're paying
456
00:27:24,558 --> 00:27:28,558
so and i believe that if you're trying
457
00:27:28,558 --> 00:27:34,720
apps on the app store then you will have
458
00:27:31,038 --> 00:27:36,640
to fill in some forms with the u.s tax
459
00:27:36,640 --> 00:27:42,640
i don't even remember irs i think
460
00:27:39,839 --> 00:27:44,079
internal revenue services or something
461
00:27:42,640 --> 00:27:46,399
like the irs i believe that you have to
462
00:27:44,079 --> 00:27:47,759
fill some forms like send the forms to
463
00:27:46,398 --> 00:27:50,079
them then they will come back with some
464
00:27:47,759 --> 00:27:52,398
sort of identifier to you and then you
465
00:27:50,079 --> 00:27:54,798
will need to use that identifier
466
00:27:52,398 --> 00:27:56,558
on apple's website in order to basically
467
00:27:54,798 --> 00:27:58,879
say that yeah yeah i know i'm selling
468
00:27:56,558 --> 00:28:01,519
stuff in the u.s i'm selling stuff in
469
00:27:58,880 --> 00:28:03,039
japan i'm selling stuff in sweden norway
470
00:28:03,038 --> 00:28:07,919
gonna pay taxes for them here in my
471
00:28:06,000 --> 00:28:09,038
country and that's what the form says
472
00:28:09,038 --> 00:28:15,278
here is my name here's my company
473
00:28:12,880 --> 00:28:17,440
i'm an organization or i'm an individual
474
00:28:18,319 --> 00:28:21,439
personal identification number my
475
00:28:21,440 --> 00:28:26,480
um is my address my phone number etc and
476
00:28:26,480 --> 00:28:31,120
to irs and then they come back and say
477
00:28:28,240 --> 00:28:33,519
okay now we know who you are and here is
478
00:28:33,519 --> 00:28:37,119
identifier number like a business
479
00:28:35,359 --> 00:28:38,798
identifier number bin or something they
480
00:28:37,119 --> 00:28:40,719
call it i think i don't remember exactly
481
00:28:38,798 --> 00:28:42,240
but i believe depending on whether
482
00:28:40,720 --> 00:28:45,038
you're a business or an individual then
483
00:28:42,240 --> 00:28:46,798
the number is a little bit different
484
00:28:45,038 --> 00:28:48,558
so if you're a business i think it's bin
485
00:28:46,798 --> 00:28:49,679
and if you're an individual is in i
486
00:28:50,640 --> 00:28:54,000
um i don't know what that dialogue was
487
00:28:52,319 --> 00:28:56,158
some bluetooth devices wants to connect
488
00:28:54,000 --> 00:28:58,880
to my computer i don't know what it is
489
00:28:58,880 --> 00:29:05,039
that's that part it can be long and it's
490
00:29:05,919 --> 00:29:10,960
that was a lot of information um
491
00:29:10,960 --> 00:29:16,319
now uh what we can do now is to talk a
492
00:29:13,919 --> 00:29:17,520
little bit about android as well
493
00:29:17,519 --> 00:29:22,319
the good thing about the android process
494
00:29:19,679 --> 00:29:24,640
like setting up your account for
495
00:29:22,319 --> 00:29:26,639
as a google developer is that it's a lot
496
00:29:24,640 --> 00:29:30,240
more straightforward as you would expect
497
00:29:26,640 --> 00:29:31,440
from google and given that they're um
498
00:29:31,440 --> 00:29:35,600
sending updates to an android app to the
499
00:29:33,679 --> 00:29:37,440
google developer console is a lot more
500
00:29:35,599 --> 00:29:40,558
straightforward than it is for ios i
501
00:29:37,440 --> 00:29:42,320
don't want to scare you but it is a fact
502
00:29:40,558 --> 00:29:44,319
and you will know that later when we
503
00:29:42,319 --> 00:29:46,558
actually get to the end of this course
504
00:29:46,558 --> 00:29:51,440
for ios and android that it is a little
505
00:29:48,720 --> 00:29:54,600
bit more straightforward for google
506
00:29:55,278 --> 00:29:58,880
but you still need to sign up for a
507
00:30:01,440 --> 00:30:05,840
i'm gonna take in my notes uh that i've
508
00:30:06,558 --> 00:30:11,119
what we also need to know is that there
509
00:30:11,119 --> 00:30:14,959
i'm going to copy that and paste it over
510
00:30:13,519 --> 00:30:16,480
here so you see which one i'm talking
511
00:30:18,398 --> 00:30:24,000
then you can see that you can set up a
512
00:30:21,839 --> 00:30:25,439
developer account and once you've logged
513
00:30:24,000 --> 00:30:27,679
in so i'm assuming that you're logged in
514
00:30:25,440 --> 00:30:31,360
then you go to play.google.com slash
515
00:30:27,679 --> 00:30:34,080
console slash user or you zero sign up
516
00:30:35,278 --> 00:30:40,079
what you can do is just google
517
00:30:37,679 --> 00:30:42,320
google play console developer account or
518
00:30:40,079 --> 00:30:43,918
google developer account then you will
519
00:30:42,319 --> 00:30:45,278
end up in a url that looks kind of like
520
00:30:45,278 --> 00:30:48,640
so don't count with this url that i
521
00:30:46,880 --> 00:30:51,760
mentioned here because it may change
522
00:30:51,759 --> 00:30:55,359
you can as it is for ios development you
523
00:30:53,759 --> 00:30:56,640
can either set it up personally as an
524
00:30:55,359 --> 00:30:58,319
individual or you can set up as an
525
00:30:58,319 --> 00:31:01,759
happen to have set it up for myself as
526
00:31:00,240 --> 00:31:04,000
an organization because i do have a
527
00:31:01,759 --> 00:31:06,079
company here in sweden so it is a lot
528
00:31:04,000 --> 00:31:09,038
easier for me to tie all my business
529
00:31:06,079 --> 00:31:13,119
relations with apple and google into one
530
00:31:09,038 --> 00:31:13,119
entity which is my developer account for
531
00:31:17,359 --> 00:31:21,278
it wouldn't make so much sense for me to
532
00:31:18,960 --> 00:31:22,960
explain this either to go through all
533
00:31:21,278 --> 00:31:24,960
the details but if you want to set it up
534
00:31:22,960 --> 00:31:26,558
for yourself as an individual just press
535
00:31:24,960 --> 00:31:27,919
on get started or if you want to set it
536
00:31:26,558 --> 00:31:30,000
as an organization just press get
537
00:31:27,919 --> 00:31:32,000
started there as you can see you can
538
00:31:30,000 --> 00:31:33,679
provide information about your
539
00:31:32,000 --> 00:31:35,359
organization and you can see here as
540
00:31:33,679 --> 00:31:36,720
well as soon as you say i'm an
541
00:31:35,359 --> 00:31:37,839
organization then they say okay what's
542
00:31:39,038 --> 00:31:42,158
uh you can see if i don't have a website
543
00:31:40,798 --> 00:31:44,240
we recommend adding a website that
544
00:31:42,159 --> 00:31:45,840
represents your organization well
545
00:31:44,240 --> 00:31:47,839
kind of makes sense i mean if you're a
546
00:31:45,839 --> 00:31:49,439
company where's your website every
547
00:31:47,839 --> 00:31:51,759
company should have a website unless
548
00:31:49,440 --> 00:31:53,440
you're like a pizza restaurant or
549
00:31:51,759 --> 00:31:55,359
something even a pizza restaurant
550
00:31:53,440 --> 00:31:56,880
probably needs a website but we have a
551
00:31:55,359 --> 00:31:58,558
pizza restaurant here in our town that
552
00:32:02,558 --> 00:32:05,918
and you don't you probably don't want to
553
00:32:04,240 --> 00:32:07,440
say that your company's website is on
554
00:32:12,398 --> 00:32:15,678
and if you say you're an individual then
555
00:32:15,679 --> 00:32:20,720
and they ask for some other stuff
556
00:32:18,240 --> 00:32:22,558
but still interesting because
557
00:32:20,720 --> 00:32:24,558
it says enter the url of your website or
558
00:32:24,558 --> 00:32:29,038
uh so here you kind of have to need
559
00:32:27,519 --> 00:32:30,319
you kind of need to enter that as well
560
00:32:29,038 --> 00:32:33,200
so maybe you can get away with a
561
00:32:30,319 --> 00:32:34,639
facebook url i laughed about it but
562
00:32:33,200 --> 00:32:35,440
maybe you can get away with it i don't
563
00:32:35,440 --> 00:32:38,880
but i don't recommend that to be honest
564
00:32:36,880 --> 00:32:41,039
with you because as you will see later
565
00:32:38,880 --> 00:32:43,919
in the course when we actually submit
566
00:32:41,038 --> 00:32:46,798
our apps to app store and play store
567
00:32:46,798 --> 00:32:52,960
data points that you have to provide to
568
00:32:48,319 --> 00:32:54,879
both stores one is a privacy policy url
569
00:33:09,200 --> 00:33:14,080
the support email and the other one is a
570
00:33:11,119 --> 00:33:15,918
contact email and if you're if you're
571
00:33:14,079 --> 00:33:17,519
setting up a business account
572
00:33:15,919 --> 00:33:19,440
then i really suggest that you actually
573
00:33:17,519 --> 00:33:21,519
set up a website because if you set up a
574
00:33:19,440 --> 00:33:24,240
website and you have a domain you have
575
00:33:21,519 --> 00:33:27,038
an email provider then your email will
576
00:33:31,599 --> 00:33:36,398
professional to set up an email that is
577
00:33:34,240 --> 00:33:40,000
bound to that it's connected to your
578
00:33:36,398 --> 00:33:42,479
email to your domain than it is to say
579
00:33:43,278 --> 00:33:47,440
i wouldn't trust a business that has a
580
00:33:49,200 --> 00:33:52,399
i kind of want to know that yeah here's
581
00:33:50,960 --> 00:33:55,600
a serious business that they have their
582
00:33:52,398 --> 00:33:55,599
own website and blah blah blah
583
00:33:58,480 --> 00:34:02,159
setting up a website setting up some
584
00:34:00,720 --> 00:34:04,000
emails doesn't necessarily mean you're
585
00:34:04,000 --> 00:34:08,878
but it makes it more dedicated if you
586
00:34:14,000 --> 00:34:18,838
the process for setting up an account
587
00:34:18,838 --> 00:34:23,679
developer i think that's that's about it
588
00:34:21,599 --> 00:34:28,639
uh that's all i wanted to mention in
589
00:34:23,679 --> 00:34:30,800
this uh first chapter of our course uh
590
00:34:28,639 --> 00:34:36,079
i highly recommend that you get your
591
00:34:30,800 --> 00:34:36,079
developer accounts for apple and for
592
00:34:39,358 --> 00:34:44,319
what you'll also need to know is that
593
00:34:42,159 --> 00:34:47,760
i mean i've talked a lot about now apple
594
00:34:44,320 --> 00:34:49,838
account and a google developer account
595
00:34:49,918 --> 00:34:55,838
if you're if you're developing uh your
596
00:34:56,079 --> 00:34:59,440
on a windows machine for instance if
597
00:34:57,838 --> 00:35:00,960
you're if you're trying to learn how to
598
00:34:59,440 --> 00:35:02,240
develop flutter applications and you
599
00:35:00,960 --> 00:35:03,838
don't care about releasing your
600
00:35:03,838 --> 00:35:07,759
you don't have to do any of this
601
00:35:06,239 --> 00:35:09,598
just follow along with the course as
602
00:35:11,679 --> 00:35:15,118
if you want to actually release your
603
00:35:15,119 --> 00:35:19,119
most definitely need to also have a mac
604
00:35:17,440 --> 00:35:21,519
because you can't build your application
605
00:35:19,119 --> 00:35:22,880
otherwise there are some tricks you can
606
00:35:23,838 --> 00:35:28,320
photo application then later on like a
607
00:35:26,480 --> 00:35:30,480
friend's macintosh if they have one or
608
00:35:28,320 --> 00:35:32,559
you can send to a service that's in the
609
00:35:30,480 --> 00:35:33,760
cloud and they build the app for you and
610
00:35:32,559 --> 00:35:36,559
then they will send it back to you and
611
00:35:36,559 --> 00:35:39,679
or maybe they even have to submit it
612
00:35:38,320 --> 00:35:40,480
it's a bit hairy to be honest with you
613
00:35:41,599 --> 00:35:46,480
it's it's a complicated topic it is a
614
00:35:44,480 --> 00:35:48,000
little bit difficult to explain
615
00:35:48,000 --> 00:35:52,400
for instance if you're on a windows
616
00:35:49,199 --> 00:35:53,679
machine you can't even have xcode xcode
617
00:35:53,679 --> 00:35:59,919
and the the entire like a chain of
618
00:35:58,000 --> 00:36:02,800
tool sets that gets installed on a
619
00:36:02,800 --> 00:36:07,599
an application for ios platform
620
00:36:05,679 --> 00:36:08,799
now why am i talking about this and
621
00:36:07,599 --> 00:36:10,838
the reasoning behind that is that if
622
00:36:08,800 --> 00:36:13,680
you're developing a flutter application
623
00:36:14,719 --> 00:36:19,679
can be deployed on a windows machine um
624
00:36:17,760 --> 00:36:21,280
macintosh or collectively called as
625
00:36:21,280 --> 00:36:26,720
web android ios five platforms at the
626
00:36:30,079 --> 00:36:34,800
release your application and build it
627
00:36:31,679 --> 00:36:38,078
for ios for instance and test on an
628
00:36:34,800 --> 00:36:41,039
iphone or an ipad you can't do that on a
629
00:36:38,079 --> 00:36:42,960
windows machine unfortunately that's not
630
00:36:41,039 --> 00:36:45,519
there's nothing wrong with a windows
631
00:36:42,960 --> 00:36:48,000
machine it's just apple's fault for
632
00:36:45,519 --> 00:36:51,039
locking down their build systems and all
633
00:36:48,000 --> 00:36:51,460
their tools to macintosh so they haven't
634
00:36:55,920 --> 00:37:02,240
yeah they haven't made the decision to
635
00:36:59,119 --> 00:37:05,680
bring their tool system and tooling to
636
00:37:02,239 --> 00:37:07,838
windows unfortunately or linux
637
00:37:05,679 --> 00:37:10,799
swift which is the language to write
638
00:37:10,800 --> 00:37:17,119
can be run i believe on linux um on
639
00:37:17,119 --> 00:37:22,440
but its main platform is still
640
00:37:22,960 --> 00:37:28,159
i know that this is a lot of information
641
00:37:25,280 --> 00:37:29,200
also to learn but if there is anything i
642
00:37:29,199 --> 00:37:34,319
close this chapter the first chapter of
643
00:37:34,320 --> 00:37:38,400
you can learn flutter and follow along
644
00:37:36,480 --> 00:37:40,639
with the steps i'm going to provide in
645
00:37:38,400 --> 00:37:43,358
this course without having to register
646
00:37:47,119 --> 00:37:52,559
you will need a macintosh if you want to
647
00:37:50,159 --> 00:37:54,799
release if you want to comfortably build
648
00:37:59,280 --> 00:38:03,599
want to release your application on
649
00:38:01,440 --> 00:38:05,440
google play store which is point three
650
00:38:03,599 --> 00:38:08,559
if you want to do that you will need to
651
00:38:05,440 --> 00:38:09,920
register a developer account on google
652
00:38:13,760 --> 00:38:17,280
i believe that's all that's all you need
653
00:38:17,280 --> 00:38:20,079
some of you may already have all these
654
00:38:18,800 --> 00:38:21,200
accounts and don't have to worry about
655
00:38:22,800 --> 00:38:26,560
know all this like if you're coming from
656
00:38:24,639 --> 00:38:29,118
a design and design background if you
657
00:38:26,559 --> 00:38:30,799
all you do is work with figma et cetera
658
00:38:29,119 --> 00:38:32,000
and this is somebody for important
659
00:38:30,800 --> 00:38:33,440
information that you'll need to know
660
00:38:32,000 --> 00:38:36,239
about because i don't want you to get
661
00:38:33,440 --> 00:38:37,679
like frustrated during the process
662
00:38:36,239 --> 00:38:39,598
so i just want you to have some
663
00:38:37,679 --> 00:38:43,118
information so that you can get started
664
00:38:39,599 --> 00:38:45,599
at least without without too much hassle
665
00:38:43,119 --> 00:38:46,400
all right that's it i think for
666
00:38:46,400 --> 00:38:51,119
chapter i can take in my notes that i've
667
00:38:48,880 --> 00:38:53,519
explained everything i want to explain
668
00:38:54,639 --> 00:38:58,480
it's not unexpected to be honest it's a
669
00:38:58,480 --> 00:39:01,838
and i kind of want to take my time with
670
00:39:01,838 --> 00:39:05,119
and for me as well to understand all
671
00:39:05,119 --> 00:39:09,920
so great i think um that's it for this
672
00:39:09,920 --> 00:39:14,800
so i'll see you in the next chapter
673
00:39:12,639 --> 00:39:17,920
hi everyone and welcome to the second
674
00:39:14,800 --> 00:39:19,839
chapter of our course now if you haven't
675
00:39:17,920 --> 00:39:22,000
watched the introduction to this course
676
00:39:19,838 --> 00:39:23,440
i really suggest that you do that before
677
00:39:22,000 --> 00:39:24,800
continuing with the course because there
678
00:39:23,440 --> 00:39:25,679
are so many points that i've explained
679
00:39:25,679 --> 00:39:29,039
introduction that i believe are so
680
00:39:29,039 --> 00:39:34,079
continuing with the course so
681
00:39:32,000 --> 00:39:35,519
in this chapter what we're going to do
682
00:39:34,079 --> 00:39:38,160
is we're going to take care of some
683
00:39:35,519 --> 00:39:39,599
setup steps that are required for
684
00:39:40,960 --> 00:39:44,960
this course and all the other chapters
685
00:39:42,800 --> 00:39:47,200
that follow along after this one chapter
686
00:39:47,199 --> 00:39:50,559
um we're going to talk about flutter
687
00:39:50,559 --> 00:39:55,679
and how to install flutter whether
688
00:39:56,559 --> 00:40:00,000
and we're also going to talk about
689
00:40:00,239 --> 00:40:06,479
xcode android studio and we're going to
690
00:40:06,480 --> 00:40:11,358
extensions to our code editor so
691
00:40:09,679 --> 00:40:13,039
if you're coming from a background where
692
00:40:11,358 --> 00:40:14,719
you haven't worked with any kind of
693
00:40:15,599 --> 00:40:20,079
i'm going to take this chapter quite
694
00:40:17,358 --> 00:40:21,920
easy so if you're an advanced programmer
695
00:40:20,079 --> 00:40:24,160
already you may want to skip this and
696
00:40:21,920 --> 00:40:27,358
you already have like flutter install
697
00:40:24,159 --> 00:40:29,039
everything you can skip this chapter
698
00:40:29,039 --> 00:40:34,000
so let's start by talking about
699
00:40:34,000 --> 00:40:37,920
well traditionally developers and
700
00:40:36,400 --> 00:40:39,760
programmers or software engineers
701
00:40:40,960 --> 00:40:44,318
creating and writing code with their
702
00:40:45,760 --> 00:40:49,280
different languages and then they're
703
00:40:47,599 --> 00:40:50,720
targeting different platforms it's very
704
00:40:49,280 --> 00:40:53,200
important to understand what a language
705
00:40:59,280 --> 00:41:05,760
the the end station where a software
706
00:41:05,760 --> 00:41:11,200
so let's say windows is a platform mac
707
00:41:08,639 --> 00:41:15,118
is a platform linux is a platform and
708
00:41:11,199 --> 00:41:18,318
ios that runs on all iphones is a
709
00:41:15,119 --> 00:41:19,280
platform android is a platform etc
710
00:41:23,760 --> 00:41:28,400
you as a software developer would use in
711
00:41:26,000 --> 00:41:30,960
order to target those platforms to write
712
00:41:28,400 --> 00:41:33,280
software for those platforms so you use
713
00:41:30,960 --> 00:41:36,000
a programming language in order to write
714
00:41:33,280 --> 00:41:39,280
a piece of code and be able to run that
715
00:41:36,000 --> 00:41:41,679
code on that target platform okay
716
00:41:39,280 --> 00:41:45,040
so a programming language example is
717
00:41:46,838 --> 00:41:52,719
um what else is popular right now java
718
00:41:56,079 --> 00:42:01,920
you as a software developer who's trying
719
00:41:58,559 --> 00:42:04,000
to learn flutter would use then dart as
720
00:42:01,920 --> 00:42:05,599
your program programming language as i
721
00:42:08,800 --> 00:42:11,920
that has been the tradition that a
722
00:42:10,639 --> 00:42:13,440
person sits in front of a computer and
723
00:42:11,920 --> 00:42:15,440
says okay i want to write a program for
724
00:42:13,440 --> 00:42:17,838
windows then they go and write some code
725
00:42:19,920 --> 00:42:23,440
maybe they will just use some other
726
00:42:21,599 --> 00:42:25,519
technology i don't know what's out there
727
00:42:23,440 --> 00:42:28,240
right now for windows maybe they would
728
00:42:29,440 --> 00:42:32,159
then they would be done and they will
729
00:42:30,719 --> 00:42:34,879
release the software for windows and be
730
00:42:34,880 --> 00:42:39,920
then someone comes in the project and
731
00:42:36,480 --> 00:42:41,920
says ah we need the same software for uh
732
00:42:39,920 --> 00:42:42,639
macintosh or we need the same software
733
00:42:47,280 --> 00:42:52,720
for instance platform then you would
734
00:42:53,838 --> 00:42:58,799
uh exact same code pretty much for the
735
00:42:58,800 --> 00:43:02,318
so this process would be very repetitive
736
00:43:00,960 --> 00:43:04,639
in that you would have to write the same
737
00:43:02,318 --> 00:43:07,358
software over and over again so
738
00:43:04,639 --> 00:43:09,358
things such as flutter came in in order
739
00:43:07,358 --> 00:43:11,119
to remedy that so saying that a software
740
00:43:09,358 --> 00:43:12,639
engineer sits at home or sits in the
741
00:43:11,119 --> 00:43:14,400
office works with a group of other
742
00:43:12,639 --> 00:43:17,358
people and a designer maybe or a few
743
00:43:14,400 --> 00:43:19,680
designers ux there is a product owner
744
00:43:17,358 --> 00:43:22,400
et cetera and then they would write the
745
00:43:22,400 --> 00:43:26,480
which will then be run on different
746
00:43:24,079 --> 00:43:28,800
platforms so as a software developer you
747
00:43:26,480 --> 00:43:30,079
wouldn't have to maintain different
748
00:43:31,679 --> 00:43:37,440
similar pieces of code that only can be
749
00:43:33,920 --> 00:43:40,960
run on one specific platform so
750
00:43:37,440 --> 00:43:42,480
flutter in its ground basically is a ui
751
00:43:44,318 --> 00:43:49,279
and writing beautiful applications that
752
00:43:46,880 --> 00:43:50,318
run on multiple platforms at the same
753
00:43:50,318 --> 00:43:56,318
developed by google has been in
754
00:43:52,719 --> 00:43:59,679
production for a very long time it's uh
755
00:43:56,318 --> 00:44:01,519
tried and tested it's open source
756
00:44:01,519 --> 00:44:04,480
if you don't come from like software
757
00:44:02,960 --> 00:44:07,280
engineering background open source
758
00:44:13,119 --> 00:44:17,039
basically the code that makes up plotter
759
00:44:20,559 --> 00:44:24,000
contributing to it or maybe just
760
00:44:22,159 --> 00:44:26,000
learning from it so if you're for
761
00:44:24,000 --> 00:44:27,920
instance coming from a background of as
762
00:44:26,000 --> 00:44:31,119
a designer it's kind of like you have
763
00:44:27,920 --> 00:44:34,159
your figma file open to the entire world
764
00:44:31,119 --> 00:44:36,559
or your adobe xd source open to the
765
00:44:34,159 --> 00:44:38,799
entire world for for them to watch what
766
00:44:36,559 --> 00:44:41,279
you're doing as you're designing and
767
00:44:38,800 --> 00:44:44,800
also for them to be able to fix stuff in
768
00:44:41,280 --> 00:44:45,920
your design if they see it not working
769
00:44:48,719 --> 00:44:54,239
so flutter is open source ui framework
770
00:44:54,239 --> 00:44:57,679
what a framework means i mean if you're
771
00:44:56,480 --> 00:44:59,440
not coming from a software engineering
772
00:44:57,679 --> 00:45:00,960
background a framework is kind of like a
773
00:45:02,719 --> 00:45:07,118
as a software developer so you can use
774
00:45:04,480 --> 00:45:09,838
these tools take a bit of this one take
775
00:45:07,119 --> 00:45:11,358
a bit of that one in order to produce an
776
00:45:11,358 --> 00:45:16,799
flutter it in itself is a software
777
00:45:19,838 --> 00:45:24,960
as a framework because of it's a
778
00:45:22,719 --> 00:45:26,318
collection of tools so if you hear a
779
00:45:24,960 --> 00:45:27,599
framework just know oh there's a
780
00:45:26,318 --> 00:45:30,318
collection of things i can use to
781
00:45:30,318 --> 00:45:36,159
that's what flutter is um but
782
00:45:36,159 --> 00:45:40,399
is a programming language language
783
00:45:40,400 --> 00:45:45,358
dart has been in the making for more
784
00:45:42,880 --> 00:45:49,280
than eight years is a language that at
785
00:45:45,358 --> 00:45:51,920
the moment being maintained by google
786
00:45:49,280 --> 00:45:53,680
and also is open source so anybody can
787
00:45:51,920 --> 00:45:55,838
contribute to it anybody can learn from
788
00:45:53,679 --> 00:45:57,919
it and and find exploits or maybe
789
00:45:55,838 --> 00:46:00,960
problems with it and it will get patched
790
00:45:57,920 --> 00:46:02,559
by the public or by google themselves
791
00:46:02,559 --> 00:46:08,318
the language the programming language
792
00:46:04,800 --> 00:46:10,560
that powers flutter you could say
793
00:46:11,760 --> 00:46:17,599
now you know what flutter is and now you
794
00:46:17,760 --> 00:46:21,920
and i think in the next step now what we
795
00:46:33,199 --> 00:46:38,960
or you could just call it a website
796
00:46:35,760 --> 00:46:40,880
that allows you to run or write your
797
00:46:45,838 --> 00:46:50,480
and run it directly in your browser
798
00:46:48,239 --> 00:46:53,519
without you even having to install
799
00:46:50,480 --> 00:46:55,679
anything so just open your browser and
800
00:46:53,519 --> 00:46:57,599
as you will see soon we go to dark pad
801
00:46:55,679 --> 00:46:58,559
and you will see how it looks like so
802
00:46:58,559 --> 00:47:03,199
show you a little demonstration here so
803
00:47:03,199 --> 00:47:07,439
and i can actually increase the size so
804
00:47:04,880 --> 00:47:09,280
you can see a little bit better
805
00:47:07,440 --> 00:47:10,960
i may have to rearrange some components
806
00:47:09,280 --> 00:47:12,480
here on the screen so you can see the
807
00:47:12,480 --> 00:47:16,358
so i went to dartpad.dartlang.org
808
00:47:16,400 --> 00:47:21,838
and you can see here that there is a
809
00:47:18,079 --> 00:47:21,839
program written on the left hand side
810
00:47:25,679 --> 00:47:29,358
what is dark dark pad allows you blah
811
00:47:27,358 --> 00:47:31,759
blah text to be there so you can have
812
00:47:29,358 --> 00:47:33,759
context of what i'm talking about
813
00:47:31,760 --> 00:47:36,000
and you can see that the program is
814
00:47:33,760 --> 00:47:38,400
sitting there and you are allowed then
815
00:47:36,000 --> 00:47:39,358
to either change the program the way it
816
00:47:39,358 --> 00:47:43,920
or click anywhere here to see
817
00:47:43,920 --> 00:47:46,800
or press the run button so i'm just
818
00:47:45,519 --> 00:47:48,480
going to press the run button and you
819
00:47:48,480 --> 00:47:53,760
the text hello got printed to the screen
820
00:47:53,760 --> 00:47:57,200
number of times it was actually printed
821
00:47:55,358 --> 00:47:59,440
it's also printed on the screen so hello
822
00:47:59,440 --> 00:48:04,400
so what you see on this side is the
823
00:48:04,400 --> 00:48:08,000
if you remember from open source so this
824
00:48:08,000 --> 00:48:13,920
programming language called dart
825
00:48:10,400 --> 00:48:14,800
and this is the output of that program
826
00:48:14,800 --> 00:48:19,599
dark pad allows you to write text
827
00:48:17,440 --> 00:48:22,559
here and just execute it and see the
828
00:48:24,239 --> 00:48:28,318
that's what dart is i mean sorry dark
829
00:48:26,719 --> 00:48:30,799
pad is and we're going to talk
830
00:48:28,318 --> 00:48:32,079
about dart and dark pad more in the in
831
00:48:32,079 --> 00:48:38,800
right now what we should do is to start
832
00:48:40,719 --> 00:48:45,199
uh i mean you could say okay but flutter
833
00:48:46,639 --> 00:48:53,199
ui framework how about dart well the way
834
00:48:50,719 --> 00:48:55,039
flutter is packaged by default is that
835
00:48:53,199 --> 00:48:57,279
it includes the dart programming
836
00:48:55,039 --> 00:49:01,199
language and its runtime so if the tools
837
00:48:57,280 --> 00:49:03,839
required to run any dart code
838
00:49:01,199 --> 00:49:05,838
it packages all of that in just one big
839
00:49:03,838 --> 00:49:07,440
chunk for you so you don't have to go
840
00:49:05,838 --> 00:49:10,078
and install different components like
841
00:49:07,440 --> 00:49:11,760
install dart separately in flutter so
842
00:49:10,079 --> 00:49:12,800
let's just then improvise and i'm going
843
00:49:18,318 --> 00:49:22,880
then you go to this beautiful website
844
00:49:22,880 --> 00:49:27,200
i'm going to increase the size here so
845
00:49:31,119 --> 00:49:34,318
and you will see this beautiful website
846
00:49:34,318 --> 00:49:38,800
and what we're gonna do is just to press
847
00:49:38,800 --> 00:49:44,000
we press on get started but this
848
00:49:41,599 --> 00:49:46,160
website looks like this right now maybe
849
00:49:44,000 --> 00:49:48,000
in a few months or maybe in a few years
850
00:49:46,159 --> 00:49:50,399
it will change so you'll just have to
851
00:49:50,400 --> 00:49:53,760
the installation part right now it's
852
00:49:52,079 --> 00:49:56,559
called get started and i can see it's
853
00:49:53,760 --> 00:49:58,319
located as docs.flower dev get started
854
00:49:58,318 --> 00:50:02,239
then pick your platform here i'm on a
855
00:50:00,159 --> 00:50:03,759
macintosh but if you're on windows just
856
00:50:02,239 --> 00:50:07,519
click on windows and then you get
857
00:50:03,760 --> 00:50:07,520
instructions on how to install fodder
858
00:50:07,920 --> 00:50:12,559
and then or if you're on linux you can
859
00:50:10,079 --> 00:50:13,760
also do the same just get instructions
860
00:50:15,119 --> 00:50:20,000
now i'm going to mac and i'm going to
861
00:50:21,280 --> 00:50:24,480
look at this information here i'm going
862
00:50:23,039 --> 00:50:27,759
to increase the size so it's a little
863
00:50:24,480 --> 00:50:29,199
bit easier to read and it says okay
864
00:50:27,760 --> 00:50:30,960
download the following installation
865
00:50:29,199 --> 00:50:33,439
bundle to get the latest stable release
866
00:50:33,440 --> 00:50:39,200
sdk means software development
867
00:50:35,920 --> 00:50:42,159
development kit i believe so it's just
868
00:50:39,199 --> 00:50:45,439
like series of tools for you to use it's
869
00:50:45,440 --> 00:50:48,880
then we're gonna do that let's just get
870
00:50:52,079 --> 00:50:55,920
and it may take some time because it is
871
00:50:55,920 --> 00:51:01,200
uh bit of software as you can see it's
872
00:51:01,199 --> 00:51:04,318
so depending on your internet connection
873
00:51:04,318 --> 00:51:08,880
yeah anything between a few seconds to a
874
00:51:09,119 --> 00:51:13,680
after you've done that then you will
875
00:51:17,679 --> 00:51:21,919
what that kind of means is just i can
876
00:51:19,599 --> 00:51:24,160
see that my mac is already decompressing
877
00:51:21,920 --> 00:51:25,680
this zip file for me so i don't have to
878
00:51:24,159 --> 00:51:27,759
do that myself and it's already
879
00:51:25,679 --> 00:51:29,598
decompressed in this place so i'm just
880
00:51:29,599 --> 00:51:33,760
and i'm gonna show you its content so it
881
00:51:36,719 --> 00:51:42,000
now that you have this what you need to
882
00:51:38,719 --> 00:51:45,039
do is to ensure that all these files are
883
00:51:49,440 --> 00:51:54,079
protected so that you don't accidentally
884
00:51:51,280 --> 00:51:56,319
delete it and it's also a good like um
885
00:51:54,079 --> 00:51:58,240
you know exactly where it is so
886
00:51:56,318 --> 00:51:59,759
by that i mean don't put it on a desk on
887
00:51:58,239 --> 00:52:01,118
your desktop and don't put it in like
888
00:51:59,760 --> 00:52:03,680
documents or anything it's not a
889
00:52:03,679 --> 00:52:08,480
what i like to do is usually to have a
890
00:52:12,000 --> 00:52:17,280
i will open terminal here as you can see
891
00:52:15,599 --> 00:52:19,920
terminal if you're not familiar with it
892
00:52:21,519 --> 00:52:24,079
control pretty much the entire system
893
00:52:24,079 --> 00:52:29,039
if you're on a mac or if you're on linux
894
00:52:26,800 --> 00:52:30,400
or any unix based system and if you're
895
00:52:29,039 --> 00:52:32,880
on windows you can also do a lot with
896
00:52:32,880 --> 00:52:37,358
so in windows that terminal is called
897
00:52:41,599 --> 00:52:47,359
linux and mac it's called terminal
898
00:52:44,639 --> 00:52:49,279
i'm using a a terminal here called i
899
00:52:49,280 --> 00:52:54,079
uh but if you're on vanilla mac os then
900
00:52:52,079 --> 00:52:56,160
you would go and open terminal
901
00:52:54,079 --> 00:52:58,400
like this which is just looking like
902
00:52:59,280 --> 00:53:04,559
so i'm going to open i-term right now
903
00:53:02,480 --> 00:53:07,679
which is my terminal you can open the
904
00:53:04,559 --> 00:53:11,119
terminal that you're comfortable with
905
00:53:07,679 --> 00:53:11,118
i'm going to increase the size of this
906
00:53:13,760 --> 00:53:17,359
my installations for these pieces of
907
00:53:15,838 --> 00:53:19,440
software in my home directory which is
908
00:53:17,358 --> 00:53:22,159
denoted by this little funny character
909
00:53:23,519 --> 00:53:29,039
if i look at the contents of this i can
910
00:53:25,920 --> 00:53:30,559
see i have a folder called tooling if i
911
00:53:30,559 --> 00:53:34,559
and look at the contents of it i can see
912
00:53:36,159 --> 00:53:40,159
for me flutter installation you know
913
00:53:38,000 --> 00:53:43,039
this folder that got in that got
914
00:53:40,159 --> 00:53:45,358
downloaded for me in my downloads folder
915
00:53:43,039 --> 00:53:47,440
i would go and copy its contents
916
00:53:47,440 --> 00:53:55,119
in this folder so if i say cdflutter
917
00:53:51,039 --> 00:53:57,838
and then you can see that i'm in my user
918
00:53:55,119 --> 00:54:00,480
dev folder tooling flutter so this is
919
00:53:57,838 --> 00:54:02,719
where i choose to put flutter now you
920
00:54:00,480 --> 00:54:05,199
can choose to put this downloaded folder
921
00:54:02,719 --> 00:54:06,159
anywhere else as the documentation tells
922
00:54:06,159 --> 00:54:10,639
in the desired location for example
923
00:54:10,639 --> 00:54:14,879
go ahead and do that pick a location and
924
00:54:12,960 --> 00:54:17,039
for me this location works for you it
925
00:54:14,880 --> 00:54:19,440
may be if you're on windows it would
926
00:54:22,000 --> 00:54:26,639
you could say dev backslash tooling
927
00:54:24,480 --> 00:54:30,079
backslash flutter this could be a good
928
00:54:26,639 --> 00:54:31,199
location for your tooling hot photo
929
00:54:31,199 --> 00:54:34,960
i'm imagining now that you've done that
930
00:54:33,039 --> 00:54:37,119
you've gotten a folder and for me it's
931
00:54:34,960 --> 00:54:39,039
this one where you've extracted your
932
00:54:43,039 --> 00:54:49,440
third step you will need to expose
933
00:54:45,280 --> 00:54:52,000
flutter's binary files to your system
934
00:54:49,440 --> 00:54:55,519
and what that basically means is that
935
00:54:52,000 --> 00:54:57,199
flutter as an sdk or a toolkit or a
936
00:55:00,159 --> 00:55:04,558
bits and pieces of software in it and
937
00:55:02,400 --> 00:55:06,400
some of these bits are more important in
938
00:55:04,559 --> 00:55:08,480
that sense that they're actually
939
00:55:12,719 --> 00:55:16,159
whether in macintosh windows or linux
940
00:55:14,719 --> 00:55:17,759
you can have different documents some
941
00:55:16,159 --> 00:55:20,719
documents can be text sound documents
942
00:55:17,760 --> 00:55:21,839
can be images some documents can be i
943
00:55:21,838 --> 00:55:26,239
what else they can be and or a word
944
00:55:24,559 --> 00:55:28,319
document for instance okay because i
945
00:55:28,318 --> 00:55:33,039
or they could be programs a program is
946
00:55:31,599 --> 00:55:35,440
something that you can just double click
947
00:55:33,039 --> 00:55:36,960
on and a piece of software gets executed
948
00:55:35,440 --> 00:55:39,760
and then it will open for instance an
949
00:55:36,960 --> 00:55:40,880
example of the program is a microsoft
950
00:55:40,880 --> 00:55:45,039
another example of program is a google
951
00:55:45,039 --> 00:55:51,599
another example of program is safari
952
00:55:48,719 --> 00:55:53,759
so these are programs and flutter comes
953
00:55:51,599 --> 00:55:55,838
also with its own built-in programs that
954
00:55:53,760 --> 00:55:57,119
do very specific and important things on
955
00:56:04,079 --> 00:56:10,079
recording studio nothing you had to do
956
00:56:10,318 --> 00:56:14,239
these important programs that are inside
957
00:56:12,480 --> 00:56:16,240
the flutter installation which you just
958
00:56:14,239 --> 00:56:17,838
downloaded need to be exposed to your
959
00:56:17,838 --> 00:56:22,000
so that you can work with flutter
960
00:56:23,280 --> 00:56:26,160
if you're for instance from a design
961
00:56:26,159 --> 00:56:31,039
it will allow you to anywhere in your
962
00:56:28,400 --> 00:56:32,400
terminal just write figma and figma app
963
00:56:32,400 --> 00:56:36,880
and that's the same thing with flutter
964
00:56:33,920 --> 00:56:39,280
in this folder you see we're in the
965
00:56:36,880 --> 00:56:40,880
flutter folder where you downloaded your
966
00:56:39,280 --> 00:56:43,440
installation and install it in this
967
00:56:40,880 --> 00:56:45,039
folder there's a folder called bin which
968
00:56:45,039 --> 00:56:49,679
in here there are so many things that
969
00:56:47,358 --> 00:56:52,639
are important to the entire system to
970
00:56:49,679 --> 00:56:54,318
run you see flutter and dart these two i
971
00:56:52,639 --> 00:56:56,239
said so many but yeah there's pretty
972
00:56:56,239 --> 00:57:02,318
so these two binary uh executables need
973
00:57:02,318 --> 00:57:07,199
and the way to do that on a macintosh is
974
00:57:04,400 --> 00:57:08,798
to change your paths as is documented
975
00:57:08,798 --> 00:57:14,880
so the way i like to do that is i go and
976
00:57:14,880 --> 00:57:23,280
so if i do a vim and look at my zsh rc
977
00:57:19,280 --> 00:57:24,640
i can see my paths and you can see it
978
00:57:24,639 --> 00:57:29,358
so you see i've actually put that export
979
00:57:33,280 --> 00:57:37,599
this may be a bit intimidating to be
980
00:57:37,599 --> 00:57:42,160
what all it's doing is that you see this
981
00:57:42,159 --> 00:57:45,838
placed here i don't know if i can
982
00:57:43,519 --> 00:57:47,280
actually zoom into it and if you can see
983
00:57:45,838 --> 00:57:48,719
i don't know how that looked in the
984
00:57:50,960 --> 00:57:57,440
a sort of like a set of instructions to
985
00:57:53,119 --> 00:57:58,798
my terminal on this macintosh to tell it
986
00:58:00,559 --> 00:58:03,839
binary executables are placed such as
987
00:58:03,838 --> 00:58:08,480
dart python etc etc so when i install a
988
00:58:08,480 --> 00:58:12,079
uh in this way you see we just
989
00:58:10,480 --> 00:58:14,480
downloaded a package and just put it
990
00:58:12,079 --> 00:58:17,359
somewhere on our computer uh macintosh
991
00:58:14,480 --> 00:58:19,440
won't know about the stuff that's in it
992
00:58:17,358 --> 00:58:22,480
of course it won't so you have to tell
993
00:58:22,480 --> 00:58:26,639
because otherwise if you don't do this
994
00:58:24,559 --> 00:58:28,559
step if you don't do the step three then
995
00:58:26,639 --> 00:58:30,480
every time you want to run flutter then
996
00:58:28,559 --> 00:58:31,839
you have to specify exactly where that
997
00:58:31,838 --> 00:58:36,078
is so for me it would be in my home
998
00:58:33,679 --> 00:58:37,118
folder dev tooling flutter being slash
999
00:58:37,119 --> 00:58:41,920
but if you do this then you can anywhere
1000
00:58:39,199 --> 00:58:44,558
in your terminal just write flutter and
1001
00:58:44,559 --> 00:58:47,760
windows computer will know where to find
1002
00:58:49,119 --> 00:58:54,400
do that put put these instructions as
1003
00:58:54,400 --> 00:58:59,519
and after doing that you may need to
1004
00:58:56,880 --> 00:59:01,920
reload your path using a command
1005
00:59:05,838 --> 00:59:10,000
depending on which shell you have you
1006
00:59:10,000 --> 00:59:14,480
put that instruction in somewhere else
1007
00:59:14,480 --> 00:59:20,000
you will have to modify your um
1008
00:59:20,000 --> 00:59:26,239
i remember this from many many years ago
1009
00:59:22,798 --> 00:59:26,239
let's see if you have to do that
1010
00:59:28,559 --> 00:59:32,079
if you wish to run flutter commands in
1011
00:59:30,239 --> 00:59:34,318
regular windows console take these steps
1012
00:59:32,079 --> 00:59:36,318
blah blah from the start search end and
1013
00:59:34,318 --> 00:59:37,838
select edit environment variables for
1014
00:59:37,838 --> 00:59:41,199
what you'll just have to do really is
1015
00:59:39,280 --> 00:59:43,200
just to follow these steps i mean i'm
1016
00:59:41,199 --> 00:59:44,798
going through basically giving you some
1017
00:59:44,798 --> 00:59:48,798
of these instructions so you can get
1018
00:59:46,960 --> 00:59:50,880
like a head start but these instructions
1019
00:59:48,798 --> 00:59:53,358
can also change in the future so don't
1020
00:59:50,880 --> 00:59:56,559
rely just on what i'm telling you please
1021
00:59:53,358 --> 00:59:59,039
just go to the installation website here
1022
00:59:56,559 --> 01:00:00,559
uh here as you see docs flutter dev get
1023
01:00:00,559 --> 01:00:07,440
and try to follow along with the
1024
01:00:09,760 --> 01:00:13,359
you should be able to be anywhere on
1025
01:00:16,239 --> 01:00:20,000
now fluffer doctor is a very important
1026
01:00:20,000 --> 01:00:24,639
it looks at your flutter installation
1027
01:00:22,079 --> 01:00:27,039
and it kind of makes sure that it's in
1028
01:00:24,639 --> 01:00:29,598
good health as denoted by the word
1029
01:00:29,599 --> 01:00:34,318
because fluttering itself is a framework
1030
01:00:31,920 --> 01:00:35,358
and it depends on many other bits and
1031
01:00:35,358 --> 01:00:39,358
which your computer may need to have in
1032
01:00:37,280 --> 01:00:40,960
order for flutter to actually work
1033
01:00:42,480 --> 01:00:46,240
flutter doctor will then go through a
1034
01:00:44,480 --> 01:00:48,798
series of steps to ensure that first
1035
01:00:46,239 --> 01:00:51,118
flutter is updated and that you for
1036
01:00:51,119 --> 01:00:55,358
tool chain that you have xcode installed
1037
01:00:58,480 --> 01:01:02,559
i mean this result at the moment looks
1038
01:01:00,639 --> 01:01:03,838
quite fine on my computer but if you're
1039
01:01:02,559 --> 01:01:05,680
running flutter doctor for the first
1040
01:01:03,838 --> 01:01:08,000
time on your computer you may get a few
1041
01:01:05,679 --> 01:01:09,838
problems uh some of the problems that
1042
01:01:08,000 --> 01:01:11,599
you'll experience probably is going to
1043
01:01:11,599 --> 01:01:14,880
sdk couldn't be found xcode couldn't be
1044
01:01:14,880 --> 01:01:19,200
because if you're running flutter on a
1045
01:01:17,440 --> 01:01:22,159
windows machine or linux machine then
1046
01:01:19,199 --> 01:01:23,199
you can't have xcode xcode is like the
1047
01:01:25,599 --> 01:01:31,119
and only runs unfortunately on mac os
1048
01:01:35,599 --> 01:01:42,160
mac os ios and ipad os pieces of
1049
01:01:39,039 --> 01:01:45,279
software so although you can run flutter
1050
01:01:45,280 --> 01:01:50,480
windows machine without a problem you
1051
01:01:50,480 --> 01:01:58,159
test your flutter code running on an
1052
01:01:53,679 --> 01:02:00,078
iphone unfortunately unless you have
1053
01:02:00,079 --> 01:02:03,680
and the easiest way to get access to
1054
01:02:01,920 --> 01:02:05,680
that is of course to have a macintosh
1055
01:02:03,679 --> 01:02:07,598
and that's unfortunately because
1056
01:02:07,599 --> 01:02:12,079
it's uh it's just not available for
1057
01:02:13,119 --> 01:02:17,280
you've run flutter doctor and it's
1058
01:02:19,039 --> 01:02:23,039
it's basically gonna tell you that okay
1059
01:02:21,760 --> 01:02:25,039
now i'm gonna assume that you're on a
1060
01:02:23,039 --> 01:02:27,119
macintosh it's gonna tell you that okay
1061
01:02:25,039 --> 01:02:29,680
uh xcode for instance uh you need to
1062
01:02:27,119 --> 01:02:31,440
install xcode and the way to do that is
1063
01:02:29,679 --> 01:02:35,358
you need to open app store on your
1064
01:02:31,440 --> 01:02:37,599
computer and just type xcode here
1065
01:02:35,358 --> 01:02:39,199
and go and install xcode on your
1066
01:02:40,480 --> 01:02:44,400
so depending on i don't know which
1067
01:02:42,400 --> 01:02:46,880
version is the latest at the moment but
1068
01:02:44,400 --> 01:02:48,480
if you're trying to develop flutter
1069
01:02:46,880 --> 01:02:50,318
applications that and also make sure
1070
01:02:48,480 --> 01:02:52,079
that they run on your ios phone or the
1071
01:02:52,079 --> 01:02:56,240
then you need to install xcode if you're
1072
01:02:54,159 --> 01:02:58,318
on a mac sorry if you're on a linux
1073
01:02:56,239 --> 01:02:59,919
computer or windows you don't have to do
1074
01:02:58,318 --> 01:03:03,719
this step actually you can't do
1075
01:03:10,559 --> 01:03:16,000
you've installed develop developer tools
1076
01:03:14,000 --> 01:03:20,400
for xcode so let's see how we can do
1077
01:03:26,960 --> 01:03:30,400
from terminal there's a command that you
1078
01:03:30,400 --> 01:03:35,599
in order to do that and that command
1079
01:03:38,318 --> 01:03:40,880
i will zoom into it so you can see
1080
01:03:42,318 --> 01:03:47,440
it says sudo xcode select install
1081
01:03:45,679 --> 01:03:49,598
so you need to issue that command in
1082
01:03:47,440 --> 01:03:51,440
your terminal so if i do that and it
1083
01:03:49,599 --> 01:03:52,480
says what's the password i'll enter my
1084
01:03:52,480 --> 01:03:57,199
and it says they're already installed so
1085
01:03:55,199 --> 01:03:59,279
if you haven't done that please go ahead
1086
01:03:57,199 --> 01:04:01,838
and execute this command in order to
1087
01:03:59,280 --> 01:04:04,480
install command line tools for your
1088
01:04:04,798 --> 01:04:10,798
now the next piece after xcode that you
1089
01:04:10,798 --> 01:04:15,280
let's see if i can actually bring up
1090
01:04:13,760 --> 01:04:16,960
so we've talked about flutter doctor
1091
01:04:15,280 --> 01:04:18,880
that was flutter doctor and we also
1092
01:04:16,960 --> 01:04:21,119
talked about installing xcode so i'm now
1093
01:04:18,880 --> 01:04:24,160
bringing that up a little bit late
1094
01:04:21,119 --> 01:04:26,960
and but now the next step is to install
1095
01:04:27,838 --> 01:04:32,480
what android studio is is like the
1096
01:04:29,679 --> 01:04:35,598
equivalent of xcode but for writing
1097
01:04:32,480 --> 01:04:37,440
android specific applications now
1098
01:04:35,599 --> 01:04:39,519
for in order to write flutter
1099
01:04:37,440 --> 01:04:42,159
applications you don't need android
1100
01:04:39,519 --> 01:04:43,920
studio per se but you kind of need the
1101
01:04:49,760 --> 01:04:52,880
for programmers they provide you with
1102
01:04:51,440 --> 01:04:55,838
something called an sdk just like
1103
01:04:55,838 --> 01:04:59,519
ios and android also provide you with
1104
01:05:00,880 --> 01:05:06,480
and since flutter utilizes these native
1105
01:05:04,400 --> 01:05:07,920
capabilities of each platform in order
1106
01:05:06,480 --> 01:05:11,519
to for instance create an application
1107
01:05:07,920 --> 01:05:15,280
that's compatible with ios or android
1108
01:05:11,519 --> 01:05:17,038
it will utilize the native uh components
1109
01:05:15,280 --> 01:05:19,519
or sorry or the native pieces of
1110
01:05:20,960 --> 01:05:25,119
sorry mainly called ios sdk and android
1111
01:05:25,119 --> 01:05:29,519
so you need to download android studio
1112
01:05:27,679 --> 01:05:31,759
so you get access to the sdk manager so
1113
01:05:29,519 --> 01:05:34,159
you can install an android sdk
1114
01:05:31,760 --> 01:05:35,760
now xcode in itself when you download
1115
01:05:34,159 --> 01:05:38,719
the latest version of xcode it comes
1116
01:05:35,760 --> 01:05:41,200
with the latest version of the ios sdk
1117
01:05:38,719 --> 01:05:42,959
but android studio doesn't do that
1118
01:05:41,199 --> 01:05:44,480
wait a minute yeah it probably does in
1119
01:05:42,960 --> 01:05:45,599
the latest versions but we can check
1120
01:05:45,599 --> 01:05:49,599
so if you go to your browser and just
1121
01:05:51,239 --> 01:05:57,038
developerandroid.com let's just go there
1122
01:05:54,719 --> 01:05:59,038
and then you can just click on download
1123
01:05:57,039 --> 01:06:00,640
android studio and then there are
1124
01:05:59,039 --> 01:06:03,680
download options and you can see there's
1125
01:06:00,639 --> 01:06:05,440
available for windows mac and linux
1126
01:06:05,440 --> 01:06:10,639
then please go ahead and download uh
1127
01:06:08,159 --> 01:06:13,118
your android studio and i can see the
1128
01:06:10,639 --> 01:06:14,558
for macintosh is a package so you can
1129
01:06:13,119 --> 01:06:16,559
install it easily you don't have to
1130
01:06:14,559 --> 01:06:19,839
unzip anything and for windows is also
1131
01:06:16,559 --> 01:06:21,920
like an executable so tar gz
1132
01:06:21,920 --> 01:06:26,960
now let's say that you've done that and
1133
01:06:24,559 --> 01:06:28,319
now after doing that then you should be
1134
01:06:38,400 --> 01:06:43,039
when you bring up your android studio it
1135
01:06:40,159 --> 01:06:44,639
will just pretty much be empty here
1136
01:06:43,039 --> 01:06:46,480
on the screen and you'll get some tips
1137
01:06:44,639 --> 01:06:49,598
and tricks how to use android studio but
1138
01:06:46,480 --> 01:06:52,318
the important thing for you here is to
1139
01:06:52,318 --> 01:06:56,960
the android sdk so if you go then to
1140
01:06:56,960 --> 01:07:01,119
i believe there is an sdk manager right
1141
01:07:01,119 --> 01:07:06,880
so just ensure that you have
1142
01:07:04,239 --> 01:07:07,838
an sdk installed for me i have android
1143
01:07:07,838 --> 01:07:13,440
installed here so ensure that you have
1144
01:07:09,679 --> 01:07:15,358
one of these sdks ready for you to use
1145
01:07:15,358 --> 01:07:21,519
and as soon as you've done that then
1146
01:07:26,079 --> 01:07:30,960
the part about android sdk is going to
1147
01:07:35,440 --> 01:07:38,798
so that's that so we've talked about
1148
01:07:37,440 --> 01:07:40,400
android tool chain which is the android
1149
01:07:40,400 --> 01:07:44,000
we've talked about xcode chrome is just
1150
01:07:42,400 --> 01:07:45,838
a web browser if you want you can have
1151
01:07:44,000 --> 01:07:48,239
that if you're developing app flutter
1152
01:07:45,838 --> 01:07:49,679
applications for the web it kind of is
1153
01:07:51,440 --> 01:07:55,599
and then this you're probably if you're
1154
01:07:54,000 --> 01:07:57,599
just getting started with flutter you're
1155
01:07:55,599 --> 01:07:59,760
not going to have this vs code part
1156
01:07:59,760 --> 01:08:05,119
a a code editor an open source code
1157
01:08:07,119 --> 01:08:12,079
and it is the code editor that i'm going
1158
01:08:09,760 --> 01:08:14,480
to use for the entire course for this
1159
01:08:12,079 --> 01:08:15,839
entire course as we go on and to be
1160
01:08:14,480 --> 01:08:17,679
honest with you i've tried android
1161
01:08:15,838 --> 01:08:19,119
studio and i've tried vs code for
1162
01:08:17,679 --> 01:08:21,119
flutter development and i can highly
1163
01:08:19,119 --> 01:08:24,640
recommend that you use vs code
1164
01:08:21,119 --> 01:08:26,000
just for its sheer performance it's for
1165
01:08:28,158 --> 01:08:33,838
its ability just to really focus on a
1166
01:08:31,920 --> 01:08:35,920
simple editor without bothering you with
1167
01:08:33,838 --> 01:08:38,318
lots of bells and whistles so
1168
01:08:35,920 --> 01:08:39,838
it's a preference though some people use
1169
01:08:38,319 --> 01:08:42,000
android studio for flutter development
1170
01:08:39,838 --> 01:08:43,119
and some people use vs code so
1171
01:08:43,119 --> 01:08:47,439
one is better than the other it's
1172
01:08:47,439 --> 01:08:52,879
so that's for android studio and the
1173
01:08:49,520 --> 01:08:55,520
android sdk so now let's go ahead and
1174
01:08:52,880 --> 01:08:57,359
install visual studio code which is the
1175
01:08:55,520 --> 01:08:58,799
tool that i'm going to use for this
1176
01:08:58,798 --> 01:09:04,238
let's bring up a new window and i'm
1177
01:09:00,640 --> 01:09:05,520
going to say install visual studio code
1178
01:09:04,238 --> 01:09:07,278
and i'm going to bring the window up
1179
01:09:09,359 --> 01:09:14,000
and you can download the one that you
1180
01:09:11,119 --> 01:09:16,000
prefer for your computer i've chosen mac
1181
01:09:14,000 --> 01:09:18,479
and for me specifically i have a
1182
01:09:16,000 --> 01:09:20,399
macintosh with an apple silicon so
1183
01:09:18,479 --> 01:09:21,919
i then choose this one mac with an apple
1184
01:09:20,399 --> 01:09:24,000
silicon and then it's gonna download
1185
01:09:21,920 --> 01:09:26,000
that for you automatically so it's just
1186
01:09:24,000 --> 01:09:28,560
about 200 megabytes i think or actually
1187
01:09:26,000 --> 01:09:29,359
100 megabyte only after you've done that
1188
01:09:29,359 --> 01:09:34,719
on a macintosh you would go and
1189
01:09:34,719 --> 01:09:39,679
in your applications folder so i'm
1190
01:09:37,838 --> 01:09:41,198
actually gonna delete that which i
1191
01:09:39,679 --> 01:09:42,719
downloaded just now because i already
1192
01:09:46,838 --> 01:09:52,719
so that's for visual studio code um
1193
01:10:00,560 --> 01:10:04,800
talk a little bit about um some
1194
01:10:03,119 --> 01:10:07,760
extensions that we're gonna use in
1195
01:10:04,800 --> 01:10:08,880
visual studio code so let me bring up my
1196
01:10:11,198 --> 01:10:17,279
you know we don't need that let's go and
1197
01:10:12,560 --> 01:10:19,199
bring up visual studio code um and then
1198
01:10:17,279 --> 01:10:21,119
i already actually have so many visual
1199
01:10:21,119 --> 01:10:27,679
uh but i can just say new window so you
1200
01:10:24,079 --> 01:10:29,359
see how visual studio code looks like
1201
01:10:29,359 --> 01:10:33,119
let's see don't show again okay so this
1202
01:10:31,520 --> 01:10:34,480
is pretty much how visual studio code
1203
01:10:33,119 --> 01:10:36,559
looks like so it's a very simple
1204
01:10:36,560 --> 01:10:41,199
um now what we need to do for this
1205
01:10:38,719 --> 01:10:43,279
example is to enable a few extensions
1206
01:10:41,198 --> 01:10:45,599
now the first section extension that
1207
01:10:43,279 --> 01:10:48,399
we're going to enable is called arrow
1208
01:10:45,600 --> 01:10:50,400
lens and you need to go here on the left
1209
01:10:48,399 --> 01:10:54,399
hand side find extensions and just type
1210
01:10:54,399 --> 01:10:59,039
and just say airlance just like that
1211
01:10:56,479 --> 01:11:02,079
click on airlands and just press enable
1212
01:10:59,039 --> 01:11:04,319
or install i believe it's called so
1213
01:11:02,079 --> 01:11:06,319
error lens allows you to see errors in
1214
01:11:04,319 --> 01:11:08,319
line without you having to click on a
1215
01:11:10,238 --> 01:11:15,039
it expands the entire error as you're
1216
01:11:13,439 --> 01:11:16,559
coding you will probably have some
1217
01:11:15,039 --> 01:11:18,319
errors in your code that error will be
1218
01:11:16,560 --> 01:11:20,640
then displayed right there in front of
1219
01:11:18,319 --> 01:11:22,399
your face in its entirety so you don't
1220
01:11:20,640 --> 01:11:24,560
have to press a little small button to
1221
01:11:22,399 --> 01:11:26,719
be able to see the complete air
1222
01:11:24,560 --> 01:11:28,719
so it's a fantastic extension
1223
01:11:28,719 --> 01:11:34,158
now the other thing that you'll need is
1224
01:11:31,760 --> 01:11:35,920
something called a bracket pair
1225
01:11:34,158 --> 01:11:37,759
colorizer and that bracket pair
1226
01:11:35,920 --> 01:11:41,119
colorizer is something that is already
1227
01:11:37,760 --> 01:11:44,000
installed in visual studio code
1228
01:11:41,119 --> 01:11:46,238
it used to be a an extension that you
1229
01:11:44,000 --> 01:11:48,479
could download but it was so popular
1230
01:11:46,238 --> 01:11:50,399
that microsoft has added that internally
1231
01:11:48,479 --> 01:11:52,559
to visual studio code so you don't have
1232
01:11:50,399 --> 01:11:55,839
to do that manually sorry by installing
1233
01:11:56,000 --> 01:12:01,279
now that we've talked about that the
1234
01:11:58,079 --> 01:12:02,399
next step is to actually install flutter
1235
01:12:12,079 --> 01:12:16,559
button i've already installed that so
1236
01:12:13,920 --> 01:12:17,760
there's a disable button for me here
1237
01:12:17,760 --> 01:12:22,079
extension and then you'll also need the
1238
01:12:19,600 --> 01:12:25,360
dart extension so just type dart and
1239
01:12:31,520 --> 01:12:39,120
we also need to install another
1240
01:12:34,158 --> 01:12:40,479
great extension called block bloc
1241
01:12:39,119 --> 01:12:42,800
i'm not going to go into the details of
1242
01:12:40,479 --> 01:12:45,439
what block is because we will learn
1243
01:12:42,800 --> 01:12:47,840
about block a lot later in the course
1244
01:12:47,840 --> 01:12:52,239
extension to have as we go on you're
1245
01:12:52,238 --> 01:12:56,639
i can't really explain exactly what it
1246
01:12:54,479 --> 01:12:58,959
is right now but just install it and i
1247
01:12:56,640 --> 01:13:01,600
will tell you more about block later in
1248
01:13:03,359 --> 01:13:08,639
that was basically installing a block
1249
01:13:08,640 --> 01:13:11,520
when you start up your visual studio
1250
01:13:10,238 --> 01:13:13,359
code it probably doesn't look like the
1251
01:13:13,359 --> 01:13:17,920
and that is because i have a custom
1252
01:13:15,600 --> 01:13:20,640
theme installed on my visual studio code
1253
01:13:27,359 --> 01:13:31,439
and scenes in visual studio code can be
1254
01:13:29,760 --> 01:13:34,719
installed just like you install an
1255
01:13:31,439 --> 01:13:36,319
extension so if you like my theme you're
1256
01:13:34,719 --> 01:13:39,119
more than welcome to go in into
1257
01:13:36,319 --> 01:13:40,238
extensions and then search for tokyo
1258
01:13:44,319 --> 01:13:48,319
it has different theme colors as well
1259
01:13:46,158 --> 01:13:51,679
this is the one i use tokyo knight
1260
01:13:48,319 --> 01:13:53,759
actually i use this one tokyo night
1261
01:13:51,679 --> 01:13:55,039
so if you want that theme please go
1262
01:13:58,880 --> 01:14:02,079
and now that we've talked about that we
1263
01:14:02,079 --> 01:14:05,840
the last point that i wanted to discuss
1264
01:14:05,840 --> 01:14:11,520
in uh before we wrap up this chapter
1265
01:14:11,520 --> 01:14:15,360
now that we talked about a little bit of
1266
01:14:13,039 --> 01:14:16,960
setup for setting up your flutter
1267
01:14:15,359 --> 01:14:19,039
installation and setting up your text
1268
01:14:16,960 --> 01:14:20,880
editor which in this case is visual
1269
01:14:20,880 --> 01:14:25,119
in the next chapter which is chapter 3
1270
01:14:25,119 --> 01:14:29,198
dart programming so before we actually
1271
01:14:27,279 --> 01:14:30,800
jump into writing flutter applications
1272
01:14:29,198 --> 01:14:32,960
we're going to talk about how to write
1273
01:14:33,920 --> 01:14:36,880
or at least understand like the basics
1274
01:14:36,880 --> 01:14:41,679
so without further ado let's close up
1275
01:14:39,359 --> 01:14:42,880
this chapter and i'll see you in the
1276
01:14:42,880 --> 01:14:47,520
hello everyone and welcome to the third
1277
01:14:47,520 --> 01:14:51,679
in this chapter i thought maybe we could
1278
01:14:49,198 --> 01:14:54,559
focus a little bit on um actually not a
1279
01:14:51,679 --> 01:14:56,560
little bit but quite a lot on dart
1280
01:14:54,560 --> 01:14:58,640
as you know from the previous chapter we
1281
01:14:56,560 --> 01:15:00,159
know now that dart is the programming
1282
01:15:04,960 --> 01:15:08,960
it would be a good idea for us at least
1283
01:15:06,880 --> 01:15:11,520
to get a little bit of introduction to
1284
01:15:08,960 --> 01:15:12,880
dart how it works a little bit of its
1285
01:15:12,880 --> 01:15:16,159
different data types functions methods
1286
01:15:16,158 --> 01:15:19,839
this chapter as well um just like the
1287
01:15:18,319 --> 01:15:21,840
entire course i'm kind of assuming that
1288
01:15:19,840 --> 01:15:24,800
you haven't done any programming at all
1289
01:15:21,840 --> 01:15:27,679
before so i'm going to take things
1290
01:15:24,800 --> 01:15:30,640
very slowly uh take the concepts one at
1291
01:15:27,679 --> 01:15:31,600
a time introduce them to you
1292
01:15:31,600 --> 01:15:35,920
and i will give you some references to
1293
01:15:33,198 --> 01:15:38,559
read more about the topics as
1294
01:15:38,560 --> 01:15:44,080
that much of a time in this course to go
1295
01:15:40,880 --> 01:15:44,960
into detail about everything so
1296
01:15:47,439 --> 01:15:51,759
basically get you started with
1297
01:15:51,760 --> 01:15:57,840
dart uh and writing your apps then later
1298
01:15:58,158 --> 01:16:04,079
in order to do that we need to have a
1299
01:16:05,039 --> 01:16:09,439
and by project i mean you need to have
1300
01:16:06,880 --> 01:16:11,440
some kind of a playground set up so that
1301
01:16:11,439 --> 01:16:16,559
dart code and then you can try it on for
1302
01:16:13,920 --> 01:16:18,239
instance a telephone or a simulator or
1303
01:16:19,198 --> 01:16:23,839
um a lot of people would rather go to
1304
01:16:21,920 --> 01:16:26,800
dark pad as we saw in the previous
1305
01:16:23,840 --> 01:16:28,480
chapter and start writing their code in
1306
01:16:28,479 --> 01:16:33,279
that's one way of doing it but since in
1307
01:16:30,800 --> 01:16:34,800
this chap in this pro in this course
1308
01:16:35,679 --> 01:16:38,960
an application release it for ios on
1309
01:16:38,960 --> 01:16:45,119
um it is safe to say that that
1310
01:16:41,920 --> 01:16:48,480
we can literally start actually creating
1311
01:16:48,479 --> 01:16:53,039
so that we can then later build upon it
1312
01:16:50,960 --> 01:16:54,560
rather than writing all our code in dart
1313
01:16:55,520 --> 01:17:00,239
you can then by doing by writing your
1314
01:16:58,158 --> 01:17:03,198
code in an actual flutter project you
1315
01:17:00,238 --> 01:17:05,119
can get used to how we work with
1316
01:17:05,119 --> 01:17:09,439
so i think this is a little bit of a
1317
01:17:06,960 --> 01:17:11,600
time invested into later chapters as
1318
01:17:09,439 --> 01:17:13,599
well where we're gonna work and continue
1319
01:17:11,600 --> 01:17:15,440
working on the same project so we have
1320
01:17:18,719 --> 01:17:24,239
there is a little bit of a value in not
1321
01:17:24,238 --> 01:17:27,678
test code like what we're doing in this
1322
01:17:26,158 --> 01:17:29,039
chapter with what we're going to do
1323
01:17:29,039 --> 01:17:33,119
in the actual application if you know
1324
01:17:33,119 --> 01:17:37,519
so i think it would be better now for us
1325
01:17:35,039 --> 01:17:38,960
to set up just a test application
1326
01:17:38,960 --> 01:17:42,079
keep working on it and then later on
1327
01:17:40,880 --> 01:17:43,760
when we start doing the actual
1328
01:17:42,079 --> 01:17:46,238
application then we create a separate
1329
01:17:50,399 --> 01:17:56,079
do that together so i'm gonna bring
1330
01:17:53,198 --> 01:17:58,799
my face down here so you see the entire
1331
01:17:58,800 --> 01:18:03,520
i'm then going to create a new terminal
1332
01:18:01,600 --> 01:18:04,880
window and bring it up here on the
1333
01:18:03,520 --> 01:18:06,239
screen so you can see it and i'm going
1334
01:18:04,880 --> 01:18:10,400
to increase the font so it's a little
1335
01:18:06,238 --> 01:18:10,399
bit easier to spot what i'm typing
1336
01:18:10,479 --> 01:18:15,279
so let's go to a folder where you try to
1337
01:18:16,399 --> 01:18:22,719
uh projects for me i go to dev projects
1338
01:18:20,238 --> 01:18:25,919
and i have a folder there called flutter
1339
01:18:29,359 --> 01:18:33,198
then in order to create a new flutter
1340
01:18:33,198 --> 01:18:36,079
what you have to do is to issue the
1341
01:18:37,439 --> 01:18:41,839
and this create command is already
1342
01:18:39,600 --> 01:18:43,280
shipped inside flutter so if you say
1343
01:18:43,279 --> 01:18:46,960
this is going to go and find the actual
1344
01:18:44,880 --> 01:18:48,800
flatter binary if you remember from the
1345
01:18:46,960 --> 01:18:50,800
previous chapters where we installed
1346
01:18:50,800 --> 01:18:53,360
it's going to find the flutter binary
1347
01:18:53,359 --> 01:18:57,839
call the create command on it so if you
1348
01:18:59,920 --> 01:19:04,800
provide it with some sort of a name of a
1349
01:19:11,279 --> 01:19:16,639
that's the binary that's the command and
1350
01:19:13,359 --> 01:19:19,119
that is the name of the project okay so
1351
01:19:16,640 --> 01:19:20,880
uh this is the easiest way to create a
1352
01:19:19,119 --> 01:19:22,960
new floater flutter project in my
1353
01:19:20,880 --> 01:19:25,359
opinion at least so let's execute that
1354
01:19:29,520 --> 01:19:33,920
and what i'm gonna do then is to as you
1355
01:19:36,719 --> 01:19:41,279
so let's go and i'm going to say
1356
01:19:41,279 --> 01:19:46,158
and then i'm going to issue a command
1357
01:19:46,158 --> 01:19:51,599
i can actually bring this a little bit
1358
01:19:48,560 --> 01:19:53,199
to the right so you can and also
1359
01:19:51,600 --> 01:19:55,520
do like this so you can see what i'm
1360
01:19:57,840 --> 01:20:01,840
code dot and what code does is that it
1361
01:20:00,079 --> 01:20:03,119
brings up visual studio code so it's
1362
01:20:03,119 --> 01:20:07,039
command that you can issue in order to
1363
01:20:04,880 --> 01:20:08,639
bring a visual studio code and
1364
01:20:08,639 --> 01:20:13,359
if if i just bring up visual studio code
1365
01:20:13,359 --> 01:20:16,960
and for instance you can see it you
1366
01:20:14,880 --> 01:20:19,600
can't see it right now but it's because
1367
01:20:16,960 --> 01:20:21,198
i have a separate uh screen here i'll
1368
01:20:19,600 --> 01:20:23,840
bring up visual studio code as you can
1369
01:20:23,840 --> 01:20:27,920
there is a good extension where there is
1370
01:20:27,920 --> 01:20:32,480
for visual studio code to install this
1371
01:20:32,479 --> 01:20:36,799
shortcut for you in terminal in your
1372
01:20:34,158 --> 01:20:39,920
path so if you say which code
1373
01:20:36,800 --> 01:20:42,239
it just says user local bin code
1374
01:20:39,920 --> 01:20:44,639
so it's just an executable that allows
1375
01:20:42,238 --> 01:20:47,119
you then to open up visual studio code
1376
01:20:44,639 --> 01:20:49,359
with a path like so you can say open a
1377
01:20:47,119 --> 01:20:52,719
visual studio code in this folder
1378
01:20:54,960 --> 01:20:58,880
and you can do that in visual studio
1379
01:20:56,639 --> 01:21:02,319
code you can allow that to be installed
1380
01:20:58,880 --> 01:21:04,400
by doing um command shift p on macintosh
1381
01:21:02,319 --> 01:21:05,519
or control shift p i i believe in
1382
01:21:07,760 --> 01:21:11,520
and there is this little command here
1383
01:21:09,600 --> 01:21:13,679
that says shell command install code
1384
01:21:11,520 --> 01:21:15,360
command in path so if you execute that
1385
01:21:13,679 --> 01:21:17,279
once then it's already set up for you
1386
01:21:15,359 --> 01:21:20,000
you don't have to do that anymore so if
1387
01:21:17,279 --> 01:21:21,599
you'd like to be able to say code
1388
01:21:24,319 --> 01:21:27,359
within visual studio code without you
1389
01:21:25,920 --> 01:21:30,399
having to open visual studio code
1390
01:21:27,359 --> 01:21:32,399
manually and then doing file open
1391
01:21:30,399 --> 01:21:34,319
then i suggest that you do command shift
1392
01:21:34,319 --> 01:21:37,759
in visual studio code depending on which
1393
01:21:36,238 --> 01:21:40,399
operating system you're using and then
1394
01:21:37,760 --> 01:21:43,280
choosing shell command install code
1395
01:21:40,399 --> 01:21:46,399
command in path so i've already done
1396
01:21:43,279 --> 01:21:49,119
that so i can just say code dot
1397
01:21:49,119 --> 01:21:54,479
so as you can see this is the basics of
1398
01:21:54,840 --> 01:22:00,319
um flutter project that you create with
1399
01:21:58,079 --> 01:22:03,279
flutter create now visual studio code
1400
01:22:00,319 --> 01:22:04,880
has a built-in terminal so i don't have
1401
01:22:03,279 --> 01:22:07,519
to have this terminal window open
1402
01:22:04,880 --> 01:22:09,440
anymore so i'm just gonna close it okay
1403
01:22:07,520 --> 01:22:10,960
and i'm gonna make this full screen
1404
01:22:09,439 --> 01:22:13,839
increase the size a little bit so you
1405
01:22:10,960 --> 01:22:15,920
can see better and perhaps i could even
1406
01:22:15,920 --> 01:22:21,920
logo on top right so you can see the
1407
01:22:18,079 --> 01:22:21,920
content a little bit better as well
1408
01:22:28,158 --> 01:22:32,799
in order for this flutter project to run
1409
01:22:32,800 --> 01:22:36,639
application and like keep testing your
1410
01:22:36,639 --> 01:22:40,400
you would have to select a target and
1411
01:22:38,158 --> 01:22:41,599
you do that with command shift p
1412
01:22:41,600 --> 01:22:45,920
choosing flutter select device so you
1413
01:22:43,439 --> 01:22:47,039
can just say flutter select device
1414
01:22:47,039 --> 01:22:50,880
command shift p is on macintosh and ctrl
1415
01:22:49,119 --> 01:22:53,519
shift p i believe is in linux and
1416
01:22:50,880 --> 01:22:54,880
windows so do that command shift b is a
1417
01:22:53,520 --> 01:22:56,800
very important command you're going to
1418
01:22:54,880 --> 01:22:59,119
use it quite a lot in this course so
1419
01:22:59,119 --> 01:23:03,119
um then i'm going to say select device
1420
01:23:03,119 --> 01:23:07,439
since i'm on a macintosh and as you saw
1421
01:23:05,279 --> 01:23:11,519
earlier we have xcode already installed
1422
01:23:07,439 --> 01:23:14,238
xcode comes also with the entire ios sdk
1423
01:23:11,520 --> 01:23:18,239
and also with the simulator i can choose
1424
01:23:14,238 --> 01:23:20,879
to run our application on ios simulator
1425
01:23:18,238 --> 01:23:22,079
or i can choose to run it on an actual
1426
01:23:25,760 --> 01:23:30,079
i believe i don't know if you've talked
1427
01:23:27,600 --> 01:23:31,520
already about scrcpy to be honest with
1428
01:23:31,520 --> 01:23:38,080
search in my notes um to see if you've
1429
01:23:38,319 --> 01:23:41,679
if you just give me one second i'll just
1430
01:23:39,920 --> 01:23:43,520
check here i believe we're we're gonna
1431
01:23:41,679 --> 01:23:46,960
set it up in chapter six so we haven't
1432
01:23:43,520 --> 01:23:49,040
set up scrcp cpy yet so for that purpose
1433
01:23:46,960 --> 01:23:50,639
i'm just going to say select device and
1434
01:23:49,039 --> 01:23:52,880
i'm just going to say start ios
1435
01:23:50,639 --> 01:23:55,760
simulator so that is going to as you can
1436
01:23:52,880 --> 01:23:58,079
see start up by your simulator and that
1437
01:23:55,760 --> 01:24:00,639
for now is like the best way for us to
1438
01:24:00,639 --> 01:24:05,760
while this is connecting um i can show
1439
01:24:03,279 --> 01:24:07,679
you a little bit around as well
1440
01:24:05,760 --> 01:24:09,199
we have as you can see lots of files
1441
01:24:07,679 --> 01:24:11,359
here already created for us we're going
1442
01:24:09,198 --> 01:24:12,879
to go through some of these um
1443
01:24:11,359 --> 01:24:14,479
but one of the most important files that
1444
01:24:12,880 --> 01:24:17,760
you're going to need to get used to used
1445
01:24:14,479 --> 01:24:20,158
to is this lib slash main.dart and this
1446
01:24:17,760 --> 01:24:22,560
is where like the majority of the code
1447
01:24:22,560 --> 01:24:28,159
uh this is his contents at the moment um
1448
01:24:26,639 --> 01:24:29,920
let's see what it's doing with the
1449
01:24:28,158 --> 01:24:32,000
simulator i'm just gonna have a look
1450
01:24:33,840 --> 01:24:37,199
it's taking a little bit longer than
1451
01:24:35,600 --> 01:24:38,480
expected so what i'm gonna do is i'm
1452
01:24:38,479 --> 01:24:42,158
kill the io simulator manually this
1453
01:24:40,479 --> 01:24:43,678
shouldn't this usually doesn't happen
1454
01:24:42,158 --> 01:24:44,960
but that's okay if it does happen then
1455
01:24:43,679 --> 01:24:46,319
you know how to deal with it just close
1456
01:24:49,279 --> 01:24:55,198
go to command shift p select device and
1457
01:24:51,600 --> 01:24:58,560
then start ios simulator fresh so it's
1458
01:24:58,560 --> 01:25:02,480
okay so that's our simulator and i'm
1459
01:25:01,039 --> 01:25:04,560
actually going to decrease the size of
1460
01:25:02,479 --> 01:25:06,559
this a little bit since i realize that
1461
01:25:09,039 --> 01:25:13,119
this is our main dart file this is like
1462
01:25:13,119 --> 01:25:18,079
command line um command has created
1463
01:25:16,158 --> 01:25:19,599
it is the file that has been created for
1464
01:25:18,079 --> 01:25:20,880
us so we don't have to play around with
1465
01:25:19,600 --> 01:25:21,840
it too much to be honest with you at the
1466
01:25:21,840 --> 01:25:27,119
um for the purpose of this chapter we're
1467
01:25:27,119 --> 01:25:31,920
basically kind of like exploiting this
1468
01:25:29,279 --> 01:25:33,599
uh code so that we can inject our code
1469
01:25:31,920 --> 01:25:34,880
into it so we can learn dart a little
1470
01:25:33,600 --> 01:25:36,639
bit so you don't have to understand all
1471
01:25:34,880 --> 01:25:40,480
of this code the way it is right now
1472
01:25:36,639 --> 01:25:41,840
there's lots of comments and etc so
1473
01:25:41,840 --> 01:25:45,760
that part so now that we're here and
1474
01:25:43,600 --> 01:25:48,239
then you can see we have a little
1475
01:25:45,760 --> 01:25:50,000
simulator here and in order to run this
1476
01:25:48,238 --> 01:25:51,919
application on this simulator since
1477
01:25:50,000 --> 01:25:53,119
you've already done the flutter select
1478
01:25:53,119 --> 01:25:57,840
you just go to run and you say run
1479
01:25:55,198 --> 01:25:59,599
without debugging for now so
1480
01:25:59,600 --> 01:26:02,880
is already selected then it understands
1481
01:26:01,198 --> 01:26:06,079
that it needs to compile this project
1482
01:26:08,238 --> 01:26:11,279
and we're just going to give it some
1483
01:26:09,520 --> 01:26:12,800
time depending on your machine and like
1484
01:26:11,279 --> 01:26:14,238
what you have for specifications on your
1485
01:26:12,800 --> 01:26:16,079
machine this this command could take
1486
01:26:16,079 --> 01:26:21,039
a couple seconds to maybe 30 seconds
1487
01:26:19,119 --> 01:26:22,719
or even more and i'm not sure how long
1488
01:26:21,039 --> 01:26:24,238
it's going to take for a fresh flutter
1489
01:26:22,719 --> 01:26:26,000
project to be honest with you to start
1490
01:26:24,238 --> 01:26:29,919
running on the simulator but it took
1491
01:26:26,000 --> 01:26:31,119
about 21 seconds so or 22 seconds so
1492
01:26:32,880 --> 01:26:36,159
project now and this is like the basic
1493
01:26:34,560 --> 01:26:37,600
flutter project i'm not going to go into
1494
01:26:36,158 --> 01:26:40,079
details about how it works but you can
1495
01:26:37,600 --> 01:26:41,199
press the plus button if you want to so
1496
01:26:40,079 --> 01:26:43,279
but what i'm going to do i'm just going
1497
01:26:41,198 --> 01:26:44,559
to close this widget inspector that was
1498
01:26:44,560 --> 01:26:49,120
automatically and i'm just going to
1499
01:26:46,719 --> 01:26:51,840
bring this a little bit down so that we
1500
01:26:49,119 --> 01:26:53,198
can see the debug console okay
1501
01:26:53,198 --> 01:26:58,158
that's for setting up our project so
1502
01:26:56,000 --> 01:27:00,000
that part is done now the first thing
1503
01:27:03,279 --> 01:27:08,719
dart is the concept of keywords
1504
01:27:06,719 --> 01:27:10,158
now since i'm assuming that you haven't
1505
01:27:08,719 --> 01:27:12,239
done any programming language in any
1506
01:27:13,198 --> 01:27:17,839
you need to understand what keywords are
1507
01:27:17,840 --> 01:27:21,119
important in understanding any
1508
01:27:19,198 --> 01:27:22,638
programming language basically and
1509
01:27:34,319 --> 01:27:39,519
cannot use for anything else than what
1510
01:27:37,760 --> 01:27:42,400
the programming language intends those
1511
01:27:46,000 --> 01:27:49,679
i mean there's no real good analogy in
1512
01:27:48,079 --> 01:27:51,439
like if you're coming from figma if
1513
01:27:49,679 --> 01:27:54,158
you're coming from a design world what a
1514
01:27:51,439 --> 01:27:56,799
key word could be because in a design
1515
01:27:54,158 --> 01:27:59,759
world you're not really talking
1516
01:27:56,800 --> 01:28:02,159
in terms of code with your product or
1517
01:28:02,158 --> 01:28:06,000
software where you're designing your
1518
01:28:06,000 --> 01:28:09,760
when you come to programming language as
1519
01:28:09,760 --> 01:28:15,760
words mean stuff in in a programming
1520
01:28:12,399 --> 01:28:18,158
language so a keyword is as its name
1521
01:28:15,760 --> 01:28:21,199
indicates is a word that has a special
1522
01:28:18,158 --> 01:28:22,638
meaning in that particular particular
1523
01:28:22,639 --> 01:28:26,840
i provide a link here for you that you
1524
01:28:24,238 --> 01:28:30,000
can check out but i'm going to open it
1525
01:28:30,000 --> 01:28:34,719
bring it to the screen here increase the
1526
01:28:31,920 --> 01:28:37,199
size a little bit so we can see better
1527
01:28:34,719 --> 01:28:38,880
uh have a look at my screen here yeah
1528
01:28:37,198 --> 01:28:40,799
and you can see this is a part of the
1529
01:28:38,880 --> 01:28:42,960
documentation for dark programming
1530
01:28:40,800 --> 01:28:44,320
language that explains what keywords are
1531
01:28:42,960 --> 01:28:46,079
in dart and you can see there are some
1532
01:28:44,319 --> 01:28:47,759
words that have special meaning like
1533
01:28:50,238 --> 01:28:54,879
so you can say that the language the
1534
01:28:52,479 --> 01:28:57,279
dark language is made out of these
1535
01:28:54,880 --> 01:28:59,679
keywords that is pretty much it it's
1536
01:28:57,279 --> 01:29:01,519
just like series of keywords like the
1537
01:28:59,679 --> 01:29:03,199
things that you tell the language that
1538
01:29:01,520 --> 01:29:04,320
hey i want to do something and then it
1539
01:29:03,198 --> 01:29:06,000
says okay what do you want to do then
1540
01:29:04,319 --> 01:29:07,359
you say okay i want to do this or this
1541
01:29:07,359 --> 01:29:11,599
special words for the programming
1542
01:29:09,679 --> 01:29:14,639
language so that it understands what you
1543
01:29:17,920 --> 01:29:21,039
for now we don't have to really go into
1544
01:29:19,679 --> 01:29:22,639
so much more details about what a
1545
01:29:21,039 --> 01:29:25,039
keyword is but for now just understand
1546
01:29:22,639 --> 01:29:27,279
that a keyword is a special word
1547
01:29:27,279 --> 01:29:30,880
language's brain kind of so that you can
1548
01:29:29,198 --> 01:29:32,238
talk to it it's your interface with the
1549
01:29:30,880 --> 01:29:35,119
programming language to make it
1550
01:29:32,238 --> 01:29:36,399
understand what you want to do okay
1551
01:29:35,119 --> 01:29:37,920
and please check out the link that i
1552
01:29:36,399 --> 01:29:40,479
provided here to understand more about
1553
01:29:42,079 --> 01:29:47,198
okay so we've talked about keywords i'm
1554
01:29:44,079 --> 01:29:50,319
just gonna check it in my notes so that
1555
01:29:47,198 --> 01:29:50,319
we know we've talked about it
1556
01:29:51,198 --> 01:29:55,678
now the next concept that we need to
1557
01:30:00,560 --> 01:30:05,280
if you for instance come from a design
1558
01:30:02,399 --> 01:30:07,679
background then you have different tools
1559
01:30:05,279 --> 01:30:09,519
to work with for instance you may have
1560
01:30:07,679 --> 01:30:11,600
in your design system whatever you're
1561
01:30:09,520 --> 01:30:13,280
using if you're using product from adobe
1562
01:30:11,600 --> 01:30:14,560
or if you're using for instance figma or
1563
01:30:14,560 --> 01:30:18,560
visio or whatever tool you're using then
1564
01:30:16,719 --> 01:30:20,399
there's like a set of components that
1565
01:30:18,560 --> 01:30:22,560
you can work with for instance you can
1566
01:30:20,399 --> 01:30:25,599
drag in a text field or you can drag in
1567
01:30:22,560 --> 01:30:29,120
an image field or sorry an image or you
1568
01:30:29,279 --> 01:30:34,479
assign a color to a text so these are
1569
01:30:31,840 --> 01:30:36,079
all like things that you can do with
1570
01:30:37,359 --> 01:30:41,759
now a data type in in a programming
1571
01:30:41,760 --> 01:30:47,199
is that type of a thing for instance you
1572
01:30:47,198 --> 01:30:51,439
i have some data in my mind okay what is
1573
01:30:51,439 --> 01:30:57,678
of my friend okay his name is uh
1574
01:30:57,679 --> 01:31:03,760
and then you would say okay what type is
1575
01:30:59,840 --> 01:31:06,000
jack is it a number no is it like um
1576
01:31:03,760 --> 01:31:09,119
is it a list of things well yeah it's a
1577
01:31:09,119 --> 01:31:15,359
uh okay then it's that is this data type
1578
01:31:20,880 --> 01:31:25,600
okay what is 37 is it a list of things
1579
01:31:23,760 --> 01:31:26,560
well yeah it kind of is a list of
1580
01:31:26,560 --> 01:31:32,080
list of digits but it's also in itself a
1581
01:31:32,079 --> 01:31:36,479
then there has been this convention like
1582
01:31:34,479 --> 01:31:38,079
convention in different programming
1583
01:31:36,479 --> 01:31:39,279
languages and every program language
1584
01:31:38,079 --> 01:31:41,119
language pretty much that you can use
1585
01:31:39,279 --> 01:31:43,519
these days has this concept of data
1586
01:31:41,119 --> 01:31:44,800
types data type is as its name indicates
1587
01:31:52,639 --> 01:31:58,800
a specific name assigned to a data
1588
01:31:55,679 --> 01:32:02,639
that is bound to be of a specific type
1589
01:31:58,800 --> 01:32:05,279
as well so for instance in dart you have
1590
01:32:02,639 --> 01:32:07,279
data types called integers or you have
1591
01:32:05,279 --> 01:32:09,519
strings or you have arrays and sets
1592
01:32:07,279 --> 01:32:11,198
which we'll talk about soon but
1593
01:32:09,520 --> 01:32:14,320
a data type just for now though it's
1594
01:32:11,198 --> 01:32:17,279
just a stamp on a piece of data to say
1595
01:32:14,319 --> 01:32:18,000
that you're of this specific type
1596
01:32:18,000 --> 01:32:22,238
you could think of a data data type as a
1597
01:32:20,158 --> 01:32:23,920
nationality you could say like every
1598
01:32:22,238 --> 01:32:26,759
person coming from sweden is swedish
1599
01:32:23,920 --> 01:32:29,520
boom that's his data type so it's just a
1600
01:32:26,760 --> 01:32:32,159
categorization of data based on their
1601
01:32:29,520 --> 01:32:34,239
appearance or based on what they
1602
01:32:34,238 --> 01:32:40,000
for instance you can say here's a
1603
01:32:36,000 --> 01:32:41,439
university full of engineers and
1604
01:32:40,000 --> 01:32:42,880
these are software engineers these are
1605
01:32:41,439 --> 01:32:44,879
mechanical engineers so the software
1606
01:32:42,880 --> 01:32:48,319
engineer is a data type it or is a
1607
01:32:44,880 --> 01:32:50,079
person type a category type so putting
1608
01:32:50,079 --> 01:32:54,158
categorization is kind of what data type
1609
01:32:56,000 --> 01:32:59,359
you just have to know that it's just a
1610
01:32:57,198 --> 01:33:02,319
categorization of things based on
1611
01:33:02,319 --> 01:33:07,039
and there's and there's a website that
1612
01:33:04,238 --> 01:33:08,399
you can read about uh dart data types
1613
01:33:08,399 --> 01:33:11,439
i don't know if you've i've if i've
1614
01:33:11,439 --> 01:33:15,919
on the link below as you can see dart
1615
01:33:15,920 --> 01:33:21,279
um and here you can read more about dart
1616
01:33:21,279 --> 01:33:24,639
but we're not going to go into so much
1617
01:33:22,880 --> 01:33:25,760
detail about all these right now just
1618
01:33:25,760 --> 01:33:30,320
data type in dart is or any programming
1619
01:33:27,760 --> 01:33:32,320
language basically that has data types
1620
01:33:32,319 --> 01:33:37,079
data based on their appearance or
1621
01:33:40,238 --> 01:33:45,198
something called constants in dart
1622
01:33:45,198 --> 01:33:48,839
usually in programming language
1623
01:33:56,000 --> 01:34:01,119
uh let's say for instance the value of
1624
01:34:04,880 --> 01:34:09,520
it cannot be changed 10 is 10 and it
1625
01:34:10,639 --> 01:34:15,840
or your name that is a constant although
1626
01:34:13,920 --> 01:34:18,719
you can go and change it but as long as
1627
01:34:15,840 --> 01:34:20,159
that is your name it is a constant so
1628
01:34:22,719 --> 01:34:27,119
there are so many values that can be
1629
01:34:24,238 --> 01:34:29,039
constants which will actually be quite
1630
01:34:27,119 --> 01:34:31,760
abstract for me to be able to explain
1631
01:34:29,039 --> 01:34:33,679
right now but just know that a constant
1632
01:34:33,679 --> 01:34:38,000
internal data cannot change during
1633
01:34:38,000 --> 01:34:42,800
during where you're writing your program
1634
01:34:40,238 --> 01:34:44,479
and also during when you're running your
1635
01:34:44,479 --> 01:34:51,599
um that is kind of what a constant is
1636
01:34:48,800 --> 01:34:54,079
uh but there is also this uh notion of a
1637
01:34:51,600 --> 01:34:56,159
compile time constant and a runtime
1638
01:34:56,158 --> 01:34:59,039
you don't have to know about
1639
01:34:59,039 --> 01:35:02,960
like those different types of constants
1640
01:35:01,039 --> 01:35:05,279
right now just because like in dart a
1641
01:35:02,960 --> 01:35:06,639
constant is a constant whether it's
1642
01:35:06,639 --> 01:35:11,760
compile time is constant it's just just
1643
01:35:08,800 --> 01:35:14,159
a constant as you'll see soon but
1644
01:35:11,760 --> 01:35:15,360
i still believe that it's important to
1645
01:35:14,158 --> 01:35:18,799
understand the difference between
1646
01:35:18,800 --> 01:35:21,679
when you're talking about programming
1647
01:35:20,399 --> 01:35:23,198
and when you're becoming software
1648
01:35:21,679 --> 01:35:24,480
developer and i hope by the end of this
1649
01:35:23,198 --> 01:35:26,879
course you'll actually become a software
1650
01:35:24,479 --> 01:35:30,559
developer if you're not already um that
1651
01:35:26,880 --> 01:35:34,319
would be really amazing uh but
1652
01:35:30,560 --> 01:35:36,080
the notion of a compile time and a and
1653
01:35:34,319 --> 01:35:36,799
runtime is very important to understand
1654
01:35:39,679 --> 01:35:43,118
make a distinction between whether
1655
01:35:41,279 --> 01:35:44,479
something has happened during compile
1656
01:35:43,118 --> 01:35:45,759
time or something has happened during
1657
01:35:48,158 --> 01:35:52,158
or before i explain compile time maybe i
1658
01:35:50,079 --> 01:35:54,319
should explain compile compile is where
1659
01:35:52,158 --> 01:35:55,759
you take the program that you're writing
1660
01:35:55,760 --> 01:36:01,280
and you tell the computer that i want
1661
01:36:06,079 --> 01:36:10,800
so that process of packaging things up
1662
01:36:10,800 --> 01:36:16,239
in very simple terms it's called
1663
01:36:12,960 --> 01:36:17,198
compiling or a compilation okay so
1664
01:36:17,198 --> 01:36:21,039
from where you start writing your
1665
01:36:19,118 --> 01:36:22,880
program with the hand with your fingers
1666
01:36:21,039 --> 01:36:25,519
until where you package it you're pretty
1667
01:36:25,520 --> 01:36:30,080
but when you run it like we're running
1668
01:36:32,399 --> 01:36:38,559
that session from where you start
1669
01:36:35,760 --> 01:36:41,119
outputting your program into this device
1670
01:36:38,560 --> 01:36:42,400
and for it to run your program from that
1671
01:36:48,399 --> 01:36:52,799
you haven't compiled time and runtime
1672
01:36:50,479 --> 01:36:55,279
and a constant is a value that is the
1673
01:36:52,800 --> 01:36:57,679
same during compile time and runtime so
1674
01:36:55,279 --> 01:36:59,519
its value doesn't change so the value of
1675
01:36:57,679 --> 01:37:02,880
10 is 10 while you're writing your
1676
01:36:59,520 --> 01:37:04,840
program and also stays the value of 10
1677
01:37:09,439 --> 01:37:14,238
very simple explanation of a constant so
1678
01:37:21,118 --> 01:37:25,839
project that was created for you by
1679
01:37:25,840 --> 01:37:31,039
in this in this line of code as you can
1680
01:37:29,039 --> 01:37:32,479
see it says void main we're not going to
1681
01:37:31,039 --> 01:37:35,679
talk about exactly what that is but just
1682
01:37:32,479 --> 01:37:37,919
press enter at the end of it and just
1683
01:37:40,800 --> 01:37:43,679
and i'm going to tell you what final is
1684
01:37:43,679 --> 01:37:48,480
and just saying name is equal to foo
1685
01:37:50,639 --> 01:37:54,400
there's lots going on in here and i'm
1686
01:37:54,399 --> 01:37:58,158
what is actually happening here
1687
01:37:58,158 --> 01:38:02,238
but i before before we actually go
1688
01:37:59,840 --> 01:38:04,800
through all these details let's let's
1689
01:38:02,238 --> 01:38:08,319
add something here called a constant so
1690
01:38:04,800 --> 01:38:10,800
i'm just kind of saying const age is 27
1691
01:38:08,319 --> 01:38:13,359
or yeah 27. as you can see this is how
1692
01:38:10,800 --> 01:38:16,480
you write code in dart you start by a
1693
01:38:13,359 --> 01:38:17,839
keyword usually or a variable name or
1694
01:38:16,479 --> 01:38:18,559
something as we're going to talk about
1695
01:38:23,760 --> 01:38:28,960
is following here is a name right after
1696
01:38:26,719 --> 01:38:31,520
cons i'm going to write some name
1697
01:38:28,960 --> 01:38:34,319
and in that name then i'm going to
1698
01:38:31,520 --> 01:38:37,360
basically say okay i'm adding the value
1699
01:38:37,359 --> 01:38:41,759
h i'm sorry about this my dog also
1700
01:38:43,039 --> 01:38:46,479
what is happening here is that you're
1701
01:38:46,479 --> 01:38:51,599
putting the value of 27 into a constant
1702
01:38:51,600 --> 01:38:55,440
and you can refer to this age later for
1703
01:39:02,158 --> 01:39:07,759
you can say is equal to age multiplied
1704
01:39:04,479 --> 01:39:10,079
by two and this is also constant because
1705
01:39:07,760 --> 01:39:11,360
at compile time word dart is basically
1706
01:39:10,079 --> 01:39:13,519
trying to understand what you've written
1707
01:39:11,359 --> 01:39:16,238
it says okay you said 27 and then you're
1708
01:39:13,520 --> 01:39:17,600
saying 27 is a constant so its value is
1709
01:39:16,238 --> 01:39:18,799
never going to change and if you tell me
1710
01:39:18,800 --> 01:39:22,320
multiplied by 2 that also is a constant
1711
01:39:22,319 --> 01:39:28,238
both this side and this side are compile
1712
01:39:28,238 --> 01:39:32,799
so that's that's what we mean by a
1713
01:39:30,479 --> 01:39:34,879
constant it's a value that is specified
1714
01:39:32,800 --> 01:39:36,159
during compile time and it and it cannot
1715
01:39:36,158 --> 01:39:42,238
also it's important to know that notice
1716
01:39:44,158 --> 01:39:47,279
sorry i have to just take some items in
1717
01:39:45,920 --> 01:39:50,399
my notes to make sure that i've
1718
01:39:47,279 --> 01:39:52,880
explained all of those to you um
1719
01:39:50,399 --> 01:39:55,920
you can see here that every line of code
1720
01:39:52,880 --> 01:39:57,920
in dart needs to end with a semicolon
1721
01:39:55,920 --> 01:40:00,000
and that tells dart that yeah you're
1722
01:39:57,920 --> 01:40:02,239
starting a new line of code of course
1723
01:40:00,000 --> 01:40:04,479
you can put two lines of code like this
1724
01:40:04,479 --> 01:40:07,759
there is a program automatically running
1725
01:40:06,238 --> 01:40:10,399
in the background which is called dart
1726
01:40:07,760 --> 01:40:12,159
fmt which is the dart formatter which is
1727
01:40:10,399 --> 01:40:14,079
going to format your code and prefix it
1728
01:40:12,158 --> 01:40:16,000
so if i like put a lot of spaces in here
1729
01:40:17,600 --> 01:40:22,639
doing command s on mac or control s on
1730
01:40:20,158 --> 01:40:24,559
linux and windows upon saving dart
1731
01:40:22,639 --> 01:40:26,800
formatter is gonna kick in and format
1732
01:40:31,920 --> 01:40:35,118
those are constants so we've talked
1733
01:40:35,118 --> 01:40:38,479
now let's talk about variables a little
1734
01:40:45,279 --> 01:40:50,639
a value that is not a constant
1735
01:40:48,479 --> 01:40:51,839
i mean i think that's like the
1736
01:40:50,639 --> 01:40:54,719
simplest way of explaining what a
1737
01:40:51,840 --> 01:40:57,119
variable is um a variable as a name
1738
01:40:57,118 --> 01:41:01,279
and that means that the data that it
1739
01:40:59,118 --> 01:41:03,118
holds it doesn't need to be constantly
1740
01:41:03,118 --> 01:41:06,158
from where you start the program you may
1741
01:41:06,158 --> 01:41:10,238
assign a value to this variable and you
1742
01:41:07,920 --> 01:41:12,399
may also change that variable depending
1743
01:41:10,238 --> 01:41:13,519
on what type of variable it is
1744
01:41:19,760 --> 01:41:24,320
a final variable in dart which we'll
1745
01:41:24,319 --> 01:41:29,840
before we do that let's go to this main
1746
01:41:25,840 --> 01:41:33,360
function here and you could just say um
1747
01:41:33,359 --> 01:41:37,359
and here what i've done is that i've
1748
01:41:41,039 --> 01:41:47,279
whose value is foo or let's just say
1749
01:41:47,279 --> 01:41:51,679
and semicolon to end the line now if i
1750
01:41:49,760 --> 01:41:55,039
want to change this value all i could
1751
01:41:51,679 --> 01:41:56,399
say here is to say name is equal to
1752
01:41:58,639 --> 01:42:05,920
now this is basically us assigning a new
1753
01:42:02,639 --> 01:42:07,279
value to this variable saying anthony
1754
01:42:16,158 --> 01:42:21,118
so you could just say final name equal
1755
01:42:19,039 --> 01:42:24,560
to alex and it's it's a little bit
1756
01:42:21,118 --> 01:42:27,279
strange because final is also a variable
1757
01:42:24,560 --> 01:42:29,760
whose value cannot be changed so you may
1758
01:42:27,279 --> 01:42:31,519
be like okay what like what kind of a
1759
01:42:33,600 --> 01:42:38,880
now there's a little limitation because
1760
01:42:35,279 --> 01:42:41,118
you you may try to like say const
1761
01:42:42,399 --> 01:42:48,158
as you will see later in in the
1762
01:42:48,158 --> 01:42:54,000
final gives you the flexibility to
1763
01:42:51,198 --> 01:42:56,000
assign a value to your variable
1764
01:42:54,000 --> 01:42:58,079
a little bit later maybe in the process
1765
01:42:58,079 --> 01:43:03,600
but it still indicates to dart that the
1766
01:43:01,279 --> 01:43:06,639
value of this variable is not gonna
1767
01:43:03,600 --> 01:43:08,000
change after it has been assigned to
1768
01:43:08,000 --> 01:43:11,840
yeah it's it's it's just a little bit
1769
01:43:10,000 --> 01:43:13,359
confusing maybe at the moment so let's
1770
01:43:13,359 --> 01:43:18,639
a variable is like a constant but its
1771
01:43:16,639 --> 01:43:20,400
value can be changed let's just leave it
1772
01:43:24,960 --> 01:43:29,679
okay now that we talked a little bit
1773
01:43:29,679 --> 01:43:35,679
variables let's talk about functions so
1774
01:43:32,479 --> 01:43:37,599
um i didn't specify exactly what this is
1775
01:43:35,679 --> 01:43:38,800
just because we hadn't really come to
1776
01:43:42,238 --> 01:43:48,399
of code is a grouping of series of lines
1777
01:43:45,359 --> 01:43:49,359
of code one to n number of n lines of
1778
01:43:54,960 --> 01:44:00,719
and it can it has a few properties uh
1779
01:43:58,079 --> 01:44:02,960
one is its return value here indicated
1780
01:44:02,960 --> 01:44:07,279
the other part of its information is its
1781
01:44:07,279 --> 01:44:12,319
followed by a pair of parentheses
1782
01:44:10,800 --> 01:44:14,079
an open parenthesis and a closed
1783
01:44:14,079 --> 01:44:19,118
in which you will write something called
1784
01:44:27,039 --> 01:44:32,000
a box where you input things in it it
1785
01:44:29,760 --> 01:44:35,119
does some processing and then it outputs
1786
01:44:32,000 --> 01:44:36,238
that stuff whatever it wants to output
1787
01:44:36,238 --> 01:44:41,839
what we could do here is to create a
1788
01:44:38,479 --> 01:44:43,039
very simple function for for ourselves
1789
01:44:43,039 --> 01:44:47,679
as you see as you saw before or as i
1790
01:44:47,679 --> 01:44:52,079
what you write for a function in the
1791
01:44:49,760 --> 01:44:54,880
beginning is this data type i mean what
1792
01:44:52,079 --> 01:44:56,079
data comes out of this function
1793
01:45:00,158 --> 01:45:05,920
someone's first name and their last name
1794
01:45:02,560 --> 01:45:08,080
with a space between it so if i say foo
1795
01:45:05,920 --> 01:45:11,920
as the first name and bar as the last
1796
01:45:08,079 --> 01:45:13,760
name then the full name should be fu bar
1797
01:45:15,439 --> 01:45:19,599
as i said then you need to specify the
1798
01:45:17,439 --> 01:45:21,678
data type first what you're gonna return
1799
01:45:19,600 --> 01:45:23,360
and if you looked at the documentation
1800
01:45:21,679 --> 01:45:25,199
that i provided earlier there's a data
1801
01:45:25,198 --> 01:45:29,039
which is a series of characters
1802
01:45:27,198 --> 01:45:32,479
basically it could be a name a family
1803
01:45:29,039 --> 01:45:34,639
name address of your house or whatever
1804
01:45:32,479 --> 01:45:36,959
and that's a data type is string okay so
1805
01:45:34,639 --> 01:45:38,560
we say we're outputting string and then
1806
01:45:36,960 --> 01:45:39,679
you say okay what should this function
1807
01:45:40,560 --> 01:45:47,600
there's a convention in dart that your
1808
01:45:42,479 --> 01:45:49,118
functions should follow a camel case
1809
01:45:47,600 --> 01:45:51,360
naming convention basically in camel
1810
01:45:49,118 --> 01:45:53,439
cases if you for instance say
1811
01:45:51,359 --> 01:45:55,359
in english my function should be called
1812
01:45:55,359 --> 01:45:58,880
that's my function name but you cannot
1813
01:45:57,198 --> 01:46:00,879
have spaces in your function function
1814
01:45:58,880 --> 01:46:03,359
names in dart or pretty much every
1815
01:46:00,880 --> 01:46:04,159
programming language that i know about
1816
01:46:04,158 --> 01:46:08,960
remove all the spaces and then except
1817
01:46:08,960 --> 01:46:13,760
change all because uh cons all the other
1818
01:46:13,760 --> 01:46:19,600
uh first letter to uh to uppercase so
1819
01:46:18,000 --> 01:46:22,319
it was like this before you could
1820
01:46:19,600 --> 01:46:24,960
actually change them to uppercase first
1821
01:46:22,319 --> 01:46:26,079
and then remove the spacing so this is
1822
01:46:24,960 --> 01:46:27,600
this is how you should write your
1823
01:46:31,439 --> 01:46:35,359
we said that we also have to open
1824
01:46:41,198 --> 01:46:46,319
we need to uh specify somehow that we're
1825
01:46:44,639 --> 01:46:47,440
going to accept a first name and a last
1826
01:46:48,639 --> 01:46:53,039
what kind of a data type does a first
1827
01:46:53,039 --> 01:46:56,560
it's kind of like a string it's a name
1828
01:46:54,880 --> 01:46:58,480
it's a series of characters so let's
1829
01:46:58,479 --> 01:47:02,079
and then we want to take a first name
1830
01:47:00,399 --> 01:47:04,719
and we know about camel case now so
1831
01:47:11,600 --> 01:47:15,920
and then you want to go to the next
1832
01:47:20,800 --> 01:47:23,279
you take the first name and the last
1833
01:47:23,279 --> 01:47:26,559
now we also said that after the
1834
01:47:25,198 --> 01:47:28,879
parenthesis after you have accepted your
1835
01:47:26,560 --> 01:47:30,719
parameters you want to go and create
1836
01:47:28,880 --> 01:47:33,279
like your curly brackets here i don't
1837
01:47:30,719 --> 01:47:36,800
know actually if i mentioned that before
1838
01:47:36,800 --> 01:47:44,000
its body or its logic it's either
1839
01:47:44,000 --> 01:47:47,439
greater than sign which we're going to
1840
01:47:48,800 --> 01:47:53,279
is by curly bracket so we're just going
1841
01:47:54,719 --> 01:47:58,639
what you want to do here you want to
1842
01:47:56,238 --> 01:48:00,319
take the first name and add a space to
1843
01:47:58,639 --> 01:48:01,920
the first name and then follow that by
1844
01:48:01,920 --> 01:48:05,440
you need to you you need to tell dart
1845
01:48:03,520 --> 01:48:06,480
that that is the data you want to return
1846
01:48:09,679 --> 01:48:13,359
there's a keyword called return that
1847
01:48:11,920 --> 01:48:15,520
tells dart that you want to return some
1848
01:48:15,520 --> 01:48:19,199
then what you're going to do you're
1849
01:48:16,719 --> 01:48:23,520
going to say i want to return what the
1850
01:48:19,198 --> 01:48:26,960
first name and i want to add a space
1851
01:48:33,760 --> 01:48:39,039
this is a very simple implementation of
1852
01:48:39,039 --> 01:48:42,719
however there's there's actually a
1853
01:48:40,800 --> 01:48:44,639
better way of doing this in dart and
1854
01:48:42,719 --> 01:48:47,279
i'll explain it to you right now and
1855
01:48:44,639 --> 01:48:48,159
that is by formatting your strings
1856
01:48:52,639 --> 01:48:57,840
tell dart kind of like how your result
1857
01:48:55,920 --> 01:49:00,399
looks like and you want to ask dart to
1858
01:48:57,840 --> 01:49:02,880
insert the first name and last name into
1859
01:49:02,880 --> 01:49:05,520
and that's how you'll do it like this
1860
01:49:05,520 --> 01:49:09,920
okay i want to return a string denoted
1861
01:49:07,520 --> 01:49:11,440
by the single quotation marks here and
1862
01:49:09,920 --> 01:49:13,039
you can also do a string in dart with
1863
01:49:11,439 --> 01:49:16,079
double quotation marks but i'm going to
1864
01:49:13,039 --> 01:49:16,079
explain that a little bit later
1865
01:49:19,279 --> 01:49:24,158
return the first name in here but if you
1866
01:49:24,158 --> 01:49:27,359
what's going to happen here is that it's
1867
01:49:25,840 --> 01:49:28,400
actually going to take this first name
1868
01:49:28,399 --> 01:49:32,799
has you written in the string so when
1869
01:49:30,960 --> 01:49:34,960
you get this return value it's actually
1870
01:49:34,960 --> 01:49:40,000
not the value that you pass to this i
1871
01:49:40,000 --> 01:49:43,279
difficult to understand when i say the
1872
01:49:41,599 --> 01:49:44,719
value that you pass to this what does it
1873
01:49:44,719 --> 01:49:48,399
uh so let's put this actually to test
1874
01:49:51,279 --> 01:49:55,840
build function as you can see here on
1875
01:49:53,599 --> 01:49:57,520
line 16. now it may not be on line 16
1876
01:49:55,840 --> 01:50:00,239
for you but for me is at the moment on
1877
01:49:57,520 --> 01:50:03,040
line 16. just find this class my app
1878
01:50:00,238 --> 01:50:06,559
stateful stateless widget and find this
1879
01:50:03,039 --> 01:50:08,560
widget build stuff that's written there
1880
01:50:23,039 --> 01:50:26,399
what do we call our function get full
1881
01:50:27,760 --> 01:50:31,760
and it says okay what's the first name
1882
01:50:36,479 --> 01:50:41,678
semicolon so and ignore this call for
1883
01:50:39,279 --> 01:50:45,039
now sorry this uh warning avoid print
1884
01:50:41,679 --> 01:50:45,039
calls and production codes so
1885
01:50:46,880 --> 01:50:49,679
now we're calling that function this is
1886
01:50:49,679 --> 01:50:54,560
it's i mean it's called calling it's
1887
01:50:54,560 --> 01:50:58,800
it may have other names but usually
1888
01:50:56,800 --> 01:50:59,760
programmers call this calling call the
1889
01:51:00,560 --> 01:51:04,880
these are the parameters that you're
1890
01:51:11,039 --> 01:51:15,439
in in the programming world to explain
1891
01:51:13,118 --> 01:51:17,118
these parameters like with with name and
1892
01:51:15,439 --> 01:51:19,198
that is called a parameter or an
1893
01:51:20,719 --> 01:51:24,480
the meaning of them is kind of like
1894
01:51:22,399 --> 01:51:26,799
getting uh convoluted in to the point
1895
01:51:24,479 --> 01:51:28,799
that no one knows which one is which but
1896
01:51:26,800 --> 01:51:29,920
you could just use parameter or argument
1897
01:51:28,800 --> 01:51:31,360
and everybody would understand what
1898
01:51:29,920 --> 01:51:32,480
you're saying so but there's a little
1899
01:51:31,359 --> 01:51:34,559
bit of the difference which i'm not
1900
01:51:32,479 --> 01:51:36,638
going to go into the detail of but if
1901
01:51:34,560 --> 01:51:38,639
someone just says call this function
1902
01:51:36,639 --> 01:51:40,719
with parameters or arguments you know at
1903
01:51:38,639 --> 01:51:42,560
least what you're doing okay
1904
01:51:42,560 --> 01:51:46,880
now we're printing its value all you
1905
01:51:44,639 --> 01:51:49,599
have to do in order to execute this code
1906
01:51:46,880 --> 01:51:51,359
is press command s and you will see the
1907
01:52:06,479 --> 01:52:10,799
as you saw i didn't execute my code
1908
01:52:08,800 --> 01:52:13,119
again i didn't press like the run button
1909
01:52:15,279 --> 01:52:20,399
triggers an action called hot reload
1910
01:52:18,158 --> 01:52:22,799
hot reload in flutter is it's a whole
1911
01:52:22,800 --> 01:52:27,440
which i'm not gonna go so much into
1912
01:52:24,719 --> 01:52:28,639
detail of but what hot reload does
1913
01:52:33,920 --> 01:52:37,440
in your code hierarchy without
1914
01:52:36,079 --> 01:52:38,880
complicating it too much i'm just trying
1915
01:52:46,158 --> 01:52:52,000
it looks for changes that you made to
1916
01:52:47,840 --> 01:52:53,760
the code and executes only those changes
1917
01:52:53,760 --> 01:52:57,440
and in the process of executing those
1918
01:52:55,359 --> 01:52:59,439
changes it might execute everything else
1919
01:53:01,679 --> 01:53:06,158
by doing a save this function gets
1920
01:53:04,479 --> 01:53:07,279
called somehow magically which i'm not
1921
01:53:08,719 --> 01:53:14,560
which in turn then calls or invokes our
1922
01:53:11,599 --> 01:53:17,199
function called getfullname and
1923
01:53:14,560 --> 01:53:19,520
its value will then be passed into
1924
01:53:17,198 --> 01:53:21,678
another function called print
1925
01:53:25,039 --> 01:53:28,399
uh and as you can see the result isn't
1926
01:53:26,880 --> 01:53:30,079
really what we expected it just says
1927
01:53:30,079 --> 01:53:34,719
and that is because here we said return
1928
01:53:32,560 --> 01:53:37,119
first name and as you can see if you put
1929
01:53:34,719 --> 01:53:39,198
first name like this inside your string
1930
01:53:37,118 --> 01:53:40,479
it becomes its own string it has nothing
1931
01:53:41,599 --> 01:53:45,119
if you remove these quotation marks
1932
01:53:45,118 --> 01:53:48,479
then it says oh first name is this
1933
01:53:48,479 --> 01:53:53,359
you see it actually highlights it so
1934
01:53:51,198 --> 01:53:55,598
then if i press command s on mac or
1935
01:53:53,359 --> 01:53:56,319
control s on linux and windows you will
1936
01:53:56,319 --> 01:53:59,840
foo being printed to the screen
1937
01:53:59,840 --> 01:54:03,840
you can also say last name here and it
1938
01:54:05,118 --> 01:54:08,639
and know that no also notice that when
1939
01:54:07,198 --> 01:54:10,879
i'm changing these things it's not
1940
01:54:08,639 --> 01:54:12,880
executing immediately automatically i'm
1941
01:54:10,880 --> 01:54:15,599
pressing command s so just keep that in
1942
01:54:18,560 --> 01:54:23,599
that's for a function and but before we
1943
01:54:20,639 --> 01:54:27,359
move on explaining the basics of a
1944
01:54:23,599 --> 01:54:30,480
function i want to also explain
1945
01:54:30,800 --> 01:54:34,000
string formatting and that is we said
1946
01:54:32,560 --> 01:54:36,000
that we're going to put first name and
1947
01:54:34,000 --> 01:54:38,158
last name because this is what we did in
1948
01:54:36,000 --> 01:54:39,679
the beginning first name plus space plus
1949
01:54:38,158 --> 01:54:41,039
last name and this wasn't so pretty
1950
01:54:39,679 --> 01:54:42,800
because it's like doing string
1951
01:54:41,039 --> 01:54:45,840
concatenation in a very old-fashioned
1952
01:54:42,800 --> 01:54:47,520
matter in a very old-fashioned manner
1953
01:54:45,840 --> 01:54:49,119
yeah i think i said it right the first
1954
01:54:49,118 --> 01:54:55,920
but what you want to do here is to
1955
01:54:52,238 --> 01:54:57,678
uh use uh garth's built-in formatting
1956
01:54:55,920 --> 01:54:59,118
capabilities and you do that by first
1957
01:54:57,679 --> 01:55:00,639
saying that okay i want to return some
1958
01:55:00,639 --> 01:55:04,400
and i want to have first name
1959
01:55:04,399 --> 01:55:09,679
last name but as you saw this earlier if
1960
01:55:09,679 --> 01:55:15,359
it just returns those strings exactly as
1961
01:55:12,719 --> 01:55:17,118
i've written them not the parameters
1962
01:55:15,359 --> 01:55:18,479
what you can do is just to put a dollar
1963
01:55:18,479 --> 01:55:21,279
and you can see their coloring now
1964
01:55:20,000 --> 01:55:22,880
changes depending on the theme that
1965
01:55:21,279 --> 01:55:25,599
you're using or depending on the text
1966
01:55:22,880 --> 01:55:27,920
editor that you're using if you're using
1967
01:55:25,599 --> 01:55:29,520
android studio it may not color it the
1968
01:55:27,920 --> 01:55:30,960
same way or if you're using visual
1969
01:55:29,520 --> 01:55:33,119
studio with a different theme on a
1970
01:55:30,960 --> 01:55:34,639
different maybe platform you may not
1971
01:55:33,118 --> 01:55:36,079
even change the color but for me at
1972
01:55:34,639 --> 01:55:38,639
least you can see that the change the
1973
01:55:36,079 --> 01:55:41,599
colors change so as to indicate that now
1974
01:55:41,599 --> 01:55:47,199
the string exactly as you wrote
1975
01:55:44,479 --> 01:55:49,198
except on returning the parameters
1976
01:55:50,639 --> 01:55:55,920
and now you can see that the result is
1977
01:55:57,679 --> 01:56:03,520
so that is the basics of functions in
1978
01:56:05,359 --> 01:56:08,799
from functions i also want to explain
1979
01:56:08,800 --> 01:56:12,639
um a function doesn't necessarily have
1980
01:56:14,960 --> 01:56:19,520
you may have a function here that wants
1981
01:56:19,520 --> 01:56:24,080
uh the screen or to here to the debug
1982
01:56:22,000 --> 01:56:26,319
console and you can just call it
1983
01:56:32,719 --> 01:56:36,319
i can just write the name of the
1984
01:56:36,319 --> 01:56:40,000
data type to be returned but it's a
1985
01:56:38,639 --> 01:56:42,800
little bit of a convention that you
1986
01:56:40,000 --> 01:56:43,760
actually tell dark that this is a void
1987
01:56:43,760 --> 01:56:48,400
meaning void is a key word as we talked
1988
01:56:46,719 --> 01:56:49,840
about it earlier in the beginning of
1989
01:56:52,158 --> 01:56:56,238
void is a key word telling dark that
1990
01:56:54,560 --> 01:56:58,239
this is a function that doesn't return
1991
01:56:58,238 --> 01:57:01,839
dart is completely fine with this
1992
01:56:59,840 --> 01:57:03,599
function being completely empty meaning
1993
01:57:01,840 --> 01:57:05,599
that well yeah you said you're not
1994
01:57:03,599 --> 01:57:07,599
returning anything you're probably just
1995
01:57:05,599 --> 01:57:09,520
gonna do some stuff in here so i'm not
1996
01:57:07,599 --> 01:57:11,920
gonna bother you with some errors saying
1997
01:57:11,920 --> 01:57:16,399
but as soon as you change the return
1998
01:57:13,920 --> 01:57:19,199
value or the return data type of your
1999
01:57:16,399 --> 01:57:22,079
function to for instance string
2000
01:57:22,079 --> 01:57:26,079
saying that oh yeah the body might
2001
01:57:24,158 --> 01:57:27,519
complete normally causing null to be
2002
01:57:26,079 --> 01:57:29,840
returned blah blah you don't have to
2003
01:57:27,520 --> 01:57:31,679
know exactly what that means but
2004
01:57:29,840 --> 01:57:33,679
essentially what that means is you're
2005
01:57:31,679 --> 01:57:36,000
telling dart that you're returning a
2006
01:57:33,679 --> 01:57:37,599
string but you're not returning anything
2007
01:57:37,599 --> 01:57:42,639
looking for the return keyword
2008
01:57:40,639 --> 01:57:45,440
saying that oh you missed it so you
2009
01:57:42,639 --> 01:57:48,480
could silence that uh error by saying
2010
01:57:53,359 --> 01:57:59,519
i think this pretty much explains the
2011
01:57:59,920 --> 01:58:03,920
functions to be honest with you
2012
01:58:02,639 --> 01:58:06,079
there's lots more to learn about
2013
01:58:03,920 --> 01:58:07,359
functions and as i said functions can
2014
01:58:11,279 --> 01:58:16,639
this syntax is used when your function
2015
01:58:16,639 --> 01:58:20,960
it doesn't need to break into different
2016
01:58:20,960 --> 01:58:27,118
by a semi-colon so a function who has a
2017
01:58:24,800 --> 01:58:28,400
very simple logic you can just skip
2018
01:58:33,279 --> 01:58:38,559
and you can just say you see i will
2019
01:58:42,319 --> 01:58:47,279
remove the closing curly bracket
2020
01:58:45,198 --> 01:58:49,598
and then you can remove the return
2021
01:58:49,599 --> 01:58:53,760
that is a shorthand it's a function
2022
01:58:56,158 --> 01:59:00,879
simplify kind of your code some people
2023
01:58:58,560 --> 01:59:02,560
may like it some people kind of may be
2024
01:59:06,960 --> 01:59:10,960
code into two different styles some
2025
01:59:08,800 --> 01:59:12,880
functions are with uh curly brackets
2026
01:59:10,960 --> 01:59:15,920
some functions are with this pointer
2027
01:59:12,880 --> 01:59:18,000
thingy and uh kind of depends on your
2028
01:59:15,920 --> 01:59:18,880
and you on you and your team to be
2029
01:59:24,319 --> 01:59:29,039
we software developers like to follow
2030
01:59:31,039 --> 01:59:34,000
the developers may decide okay we're
2031
01:59:32,719 --> 01:59:35,520
just going to go with this convention
2032
01:59:38,560 --> 01:59:45,360
involves the ability to have both
2033
01:59:41,920 --> 01:59:48,639
complicated and simple return statements
2034
01:59:45,359 --> 01:59:51,039
in a function it's actually preferred
2035
01:59:48,639 --> 01:59:52,880
as a convention than using this syntax
2036
01:59:51,039 --> 01:59:54,880
simply because this syntax doesn't allow
2037
01:59:52,880 --> 01:59:57,039
you to split your code into separate
2038
01:59:54,880 --> 02:00:01,679
lines of code it has to all be in one
2039
01:59:57,039 --> 02:00:01,679
statement so if that makes any sense
2040
02:00:02,639 --> 02:00:08,239
so i think i think that's it for
2041
02:00:05,679 --> 02:00:12,560
functions and now we've talked about
2042
02:00:08,238 --> 02:00:15,439
functions arguments return values
2043
02:00:12,560 --> 02:00:17,039
we talked about variables constants
2044
02:00:20,319 --> 02:00:25,599
these are such important parts of
2045
02:00:23,118 --> 02:00:27,118
learning how to program with dark and
2046
02:00:25,599 --> 02:00:29,039
flutter that i think you need to spend
2047
02:00:27,118 --> 02:00:30,479
some time and experiment with them so do
2048
02:00:29,039 --> 02:00:32,079
some experimentations on your own for
2049
02:00:32,079 --> 02:00:35,359
not don't take just the first name and
2050
02:00:33,520 --> 02:00:37,520
last name just take for instance
2051
02:00:35,359 --> 02:00:39,279
someone's address someone's age
2052
02:00:37,520 --> 02:00:40,880
different play around a little bit with
2053
02:00:39,279 --> 02:00:42,639
different data types like integers
2054
02:00:40,880 --> 02:00:44,079
different numbers have a look at the
2055
02:00:44,079 --> 02:00:48,559
earlier which was here i'll bring it up
2056
02:00:48,560 --> 02:00:52,080
have a look at this link and have a look
2057
02:00:50,719 --> 02:00:55,439
at the different examples of different
2058
02:00:52,079 --> 02:00:56,719
data types because in this in
2059
02:00:56,719 --> 02:01:01,279
upcoming chapters and in the uh rest of
2060
02:00:59,439 --> 02:01:03,118
this course we're going to play around
2061
02:01:01,279 --> 02:01:04,000
with a lot of different types of data
2062
02:01:04,000 --> 02:01:07,359
so i think it's important that you have
2063
02:01:10,800 --> 02:01:15,679
let's leave this chapter at this point
2064
02:01:14,079 --> 02:01:20,079
and then in the next chapter we're going
2065
02:01:15,679 --> 02:01:22,880
to talk a lot more about more advanced
2066
02:01:20,079 --> 02:01:24,319
dart programming language features so
2067
02:01:22,880 --> 02:01:26,960
thank you for joining me for this
2068
02:01:24,319 --> 02:01:29,759
chapter and see you in the next one
2069
02:01:26,960 --> 02:01:31,840
hello everyone and welcome to chapter 4
2070
02:01:31,840 --> 02:01:36,079
in the previous chapter chapter 3 we
2071
02:01:33,760 --> 02:01:38,159
talked about keywords data types
2072
02:01:36,079 --> 02:01:39,519
constants variables and some basics of
2073
02:01:39,520 --> 02:01:44,800
and in this chapter we are going to
2074
02:01:42,560 --> 02:01:46,480
as you can see on the captions here
2075
02:01:44,800 --> 02:01:48,840
we're going to focus on control
2076
02:01:50,880 --> 02:01:54,319
um i'm assuming you're following these
2077
02:01:54,319 --> 02:01:58,000
um chronologically so that you're like
2078
02:01:58,000 --> 02:02:03,118
one by one so i'm assuming then that you
2079
02:02:00,800 --> 02:02:05,679
have your uh dark project set up and
2080
02:02:03,118 --> 02:02:07,598
that you've got some sort of a simulator
2081
02:02:08,719 --> 02:02:14,239
without further ado let's have a look at
2082
02:02:14,238 --> 02:02:19,919
bring up the captions here and then i'm
2083
02:02:15,920 --> 02:02:22,560
gonna put my face at the bottom there
2084
02:02:19,920 --> 02:02:24,560
and bring up our project that we created
2085
02:02:24,560 --> 02:02:29,199
up here so this this is running at the
2086
02:02:26,960 --> 02:02:31,520
moment so if i do a command s or control
2087
02:02:31,520 --> 02:02:34,719
then as you can see here there is a run
2088
02:02:36,158 --> 02:02:40,879
it's just gonna do a hot reload which in
2089
02:02:38,158 --> 02:02:42,638
turn calls this build function which we
2090
02:02:40,880 --> 02:02:43,920
don't yet know really how it works
2091
02:02:42,639 --> 02:02:45,118
because i haven't really explained it
2092
02:02:47,279 --> 02:02:52,800
called a print function here and then
2093
02:02:49,118 --> 02:02:52,799
our get full name function so
2094
02:02:52,960 --> 02:02:57,198
what i'm going to do here is let's
2095
02:02:57,198 --> 02:03:00,879
and let's remove everything that we
2096
02:02:58,800 --> 02:03:03,039
wrote here as well so keep the main
2097
02:03:00,880 --> 02:03:05,118
function as you can see here and then
2098
02:03:03,039 --> 02:03:07,039
keep your stateless widget which we're
2099
02:03:05,118 --> 02:03:09,839
going to talk about later okay
2100
02:03:07,039 --> 02:03:11,439
so instead go and create a new function
2101
02:03:14,719 --> 02:03:18,319
and then in the build function just say
2102
02:03:21,840 --> 02:03:25,599
the purpose is that in this function
2103
02:03:23,840 --> 02:03:27,360
we're going to write most of the code in
2104
02:03:25,599 --> 02:03:28,880
this chapter so we are going to
2105
02:03:27,359 --> 02:03:32,158
basically test some code that's the
2106
02:03:32,238 --> 02:03:36,638
let's talk about if and else if and l's
2107
02:03:38,719 --> 02:03:42,480
most programming languages that allow
2108
02:03:42,479 --> 02:03:48,638
branch your code based on a condition
2109
02:03:45,198 --> 02:03:50,238
so if we for instance in here create a
2110
02:03:50,238 --> 02:03:53,919
variable whose value cannot be changed
2111
02:03:52,719 --> 02:03:55,279
if you remember from the previous
2112
02:03:53,920 --> 02:03:57,039
chapter whose value cannot be changed
2113
02:04:01,599 --> 02:04:05,199
and end it with the same semicolon
2114
02:04:05,198 --> 02:04:10,879
an if statement basically allows you to
2115
02:04:08,078 --> 02:04:12,078
check the value or a condition
2116
02:04:17,439 --> 02:04:22,158
then it allows you to execute some code
2117
02:04:22,158 --> 02:04:27,118
append an else statement to it which
2118
02:04:24,479 --> 02:04:28,799
gets executed if the code or if that
2119
02:04:27,118 --> 02:04:30,799
condition is not met i'm going to show
2120
02:04:30,800 --> 02:04:34,159
the syntax for an if statement is just
2121
02:04:38,399 --> 02:04:42,719
and then you would open and close
2122
02:04:40,000 --> 02:04:45,520
parenthesis and then you would put curly
2123
02:04:42,719 --> 02:04:47,198
brackets like this that's the syntax of
2124
02:04:45,520 --> 02:04:48,639
if and in the parenthesis you would put
2125
02:04:48,639 --> 02:04:54,880
so i would say in this case if name and
2126
02:04:52,560 --> 02:04:56,880
i would like to for instance check if
2127
02:04:58,000 --> 02:05:02,319
uh we haven't come to operators yet
2128
02:05:00,880 --> 02:05:04,639
we're going to talk about operators
2129
02:05:04,639 --> 02:05:10,880
but this is um as you can see here we're
2130
02:05:07,840 --> 02:05:12,319
saying final name equal to foo this is
2131
02:05:12,319 --> 02:05:17,599
an assignment uh operation and that is
2132
02:05:15,439 --> 02:05:18,799
an operator in dart it's called an
2133
02:05:21,198 --> 02:05:24,000
and since this is an assignment we don't
2134
02:05:22,560 --> 02:05:25,599
want to actually assign anything to name
2135
02:05:24,000 --> 02:05:26,719
you want to check if it's of a certain
2136
02:05:26,719 --> 02:05:32,000
that is with this conditional operator
2137
02:05:32,000 --> 02:05:38,960
and then you will just say okay if it's
2138
02:05:42,399 --> 02:05:46,559
and then a semi colon to end it however
2139
02:05:44,880 --> 02:05:48,639
if this condition is not met you may
2140
02:05:46,560 --> 02:05:52,000
want to execute another piece of code
2141
02:05:48,639 --> 02:05:52,000
and then you can just do else
2142
02:05:53,840 --> 02:05:57,920
and then this would you would just say
2143
02:05:57,920 --> 02:06:02,880
all right and a semicolon so i'm just
2144
02:06:00,078 --> 02:06:05,519
going to do command s and you can see
2145
02:06:02,880 --> 02:06:07,359
the value or the string yes this is food
2146
02:06:05,520 --> 02:06:10,639
printed to the screen or to the terminal
2147
02:06:10,880 --> 02:06:14,480
you can have multiple statements in here
2148
02:06:12,719 --> 02:06:16,800
so you can have more print statements in
2149
02:06:14,479 --> 02:06:18,238
here you can just do anything you want
2150
02:06:21,279 --> 02:06:26,880
now there is a possibility to write if
2151
02:06:26,880 --> 02:06:30,719
the curly brackets but you don't see
2152
02:06:28,479 --> 02:06:33,039
them that often and i recommend that you
2153
02:06:30,719 --> 02:06:35,359
actually always try to as a convention
2154
02:06:33,039 --> 02:06:37,679
do with curly brackets if you can
2155
02:06:35,359 --> 02:06:39,519
however it is possible that inside a
2156
02:06:37,679 --> 02:06:42,239
code base that you will work on with
2157
02:06:39,520 --> 02:06:45,440
your colleagues it is decided that it's
2158
02:06:42,238 --> 02:06:48,238
okay to have if statements without curly
2159
02:06:45,439 --> 02:06:50,479
brackets where there are very simple and
2160
02:06:52,319 --> 02:06:58,000
an example of that you could just say if
2161
02:06:58,000 --> 02:07:03,760
you would just say print yes this is foo
2162
02:07:01,679 --> 02:07:06,319
and this is completely accepted as well
2163
02:07:08,078 --> 02:07:13,279
okay i want to have another line print
2164
02:07:13,279 --> 02:07:16,399
you can see it goes to the next line
2165
02:07:19,039 --> 02:07:23,359
will be executed no matter your
2166
02:07:21,359 --> 02:07:25,439
condition up there so this is completely
2167
02:07:23,359 --> 02:07:26,399
detached from your if statement up here
2168
02:07:26,399 --> 02:07:30,000
and i just realized that it is quite
2169
02:07:28,319 --> 02:07:31,198
important for me to be able to show line
2170
02:07:31,198 --> 02:07:35,519
and by default your editor probably has
2171
02:07:33,039 --> 02:07:36,639
line numbers enabled i usually disable
2172
02:07:36,639 --> 02:07:42,000
when i'm working myself basically
2173
02:07:39,520 --> 02:07:43,520
but when talking about code with other
2174
02:07:42,000 --> 02:07:45,118
people it's quite useful to have line
2175
02:07:43,520 --> 02:07:48,880
numbers because i can then tell you oh
2176
02:07:45,118 --> 02:07:49,839
look at line nine or look at my line ten
2177
02:07:49,840 --> 02:07:56,560
that's the basic of if and else
2178
02:07:52,960 --> 02:07:58,158
now you can also have if right after
2179
02:07:58,158 --> 02:08:04,638
an example of that is for instance to
2180
02:08:05,279 --> 02:08:12,399
and then you do some code all right
2181
02:08:13,920 --> 02:08:16,800
after the curly bracket then you would
2182
02:08:16,800 --> 02:08:20,079
and then you can then say another if
2183
02:08:23,359 --> 02:08:27,118
parenthesis and a curly bracket if you
2184
02:08:27,118 --> 02:08:30,639
it is the exact same syntax as it as it
2185
02:08:30,639 --> 02:08:34,000
so there's pretty much no difference you
2186
02:08:35,679 --> 02:08:39,679
and then you put your condition in here
2187
02:08:39,679 --> 02:08:44,960
and then you may just want to say is not
2188
02:08:44,960 --> 02:08:50,399
it's uh basically is a not operator so
2189
02:08:47,840 --> 02:08:51,840
it's checking to make sure that this
2190
02:08:51,840 --> 02:08:56,078
of the value that you provide to the
2191
02:09:05,279 --> 02:09:10,319
and then you can wrap it up and you can
2192
02:09:13,840 --> 02:09:18,639
accidentally ran into this issue
2193
02:09:16,560 --> 02:09:20,480
as you can see now the editor is kind of
2194
02:09:18,639 --> 02:09:22,400
going crazy and darts not understanding
2195
02:09:23,279 --> 02:09:28,719
as we talked about it previously um
2196
02:09:26,078 --> 02:09:30,719
strings in dart are preferred to have
2197
02:09:28,719 --> 02:09:32,480
to be kind of like created with single
2198
02:09:32,479 --> 02:09:36,559
if your string in itself contains a
2199
02:09:34,639 --> 02:09:39,039
single code for instance in this case
2200
02:09:39,039 --> 02:09:44,960
contains a single code then dart kind of
2201
02:09:42,479 --> 02:09:46,959
gets confused like okay does the string
2202
02:09:46,960 --> 02:09:51,039
up until this point is it's a green so
2203
02:09:49,520 --> 02:09:52,960
it's thing it's thinking that oh the
2204
02:09:51,039 --> 02:09:55,519
string ends here but what is all of this
2205
02:09:57,439 --> 02:10:01,118
there are two ways of fixing that either
2206
02:10:05,359 --> 02:10:10,960
that is a software kind of development
2207
02:10:08,158 --> 02:10:12,839
lingo escape kind of if you hear that it
2208
02:10:10,960 --> 02:10:16,000
pretty much just means that you're
2209
02:10:19,520 --> 02:10:23,840
that dart understands that you don't
2210
02:10:21,439 --> 02:10:25,678
mean it literally you don't mean that
2211
02:10:23,840 --> 02:10:28,159
i want to end my string here except that
2212
02:10:25,679 --> 02:10:30,399
this needs to be escaped and put in the
2213
02:10:28,158 --> 02:10:32,399
string as its own value basically it's
2214
02:10:30,399 --> 02:10:34,719
kind of difficult to explain but i think
2215
02:10:32,399 --> 02:10:36,319
you know what i mean um so that's one
2216
02:10:34,719 --> 02:10:37,118
way of doing it it's a little bit dirty
2217
02:10:37,118 --> 02:10:41,519
in case you run into this issue it's
2218
02:10:39,279 --> 02:10:44,078
best to actually wrap your entire string
2219
02:10:41,520 --> 02:10:45,679
in double quotes and this way
2220
02:10:44,078 --> 02:10:48,238
then dart understands that whatever
2221
02:10:45,679 --> 02:10:50,319
comes in here is okay like a single code
2222
02:10:50,319 --> 02:10:55,039
unless you actually want to have
2223
02:10:55,039 --> 02:10:58,800
double quotes in your string that is
2224
02:10:57,279 --> 02:11:00,238
enclosed with double quotes again so
2225
02:10:58,800 --> 02:11:02,800
you'll see if i put a double quote here
2226
02:11:00,238 --> 02:11:05,678
then dart goes crazy so you can escape
2227
02:11:05,679 --> 02:11:09,920
so if you have single codes and double
2228
02:11:07,920 --> 02:11:11,760
quotes in your string then you will have
2229
02:11:09,920 --> 02:11:13,199
to kind of pick a convention either you
2230
02:11:11,760 --> 02:11:14,880
enclose the entire string in single
2231
02:11:16,639 --> 02:11:21,279
inside that string and let the double
2232
02:11:18,880 --> 02:11:23,118
quotes live or you enclose your entire
2233
02:11:21,279 --> 02:11:24,719
string in double quotes and then you
2234
02:11:24,719 --> 02:11:31,359
escape your double quotes in the string
2235
02:11:28,639 --> 02:11:33,359
i hope i hope that makes sense
2236
02:11:34,479 --> 02:11:40,319
um if and else in um in a nutshell
2237
02:11:38,719 --> 02:11:42,399
but before i move on i kind of want to
2238
02:11:40,319 --> 02:11:44,238
explain an important concept here in
2239
02:11:42,399 --> 02:11:46,319
that when dart executes this code it
2240
02:11:44,238 --> 02:11:48,319
kind of goes by line by line so it
2241
02:11:46,319 --> 02:11:49,519
starts with line seven the execution of
2242
02:11:49,520 --> 02:11:53,679
function and then it come comes here and
2243
02:11:51,198 --> 02:11:54,479
it says okay name is foo all right
2244
02:11:54,479 --> 02:11:58,399
and it's actually saying that we prefer
2245
02:11:56,399 --> 02:12:00,399
const so let me change that to const
2246
02:12:04,880 --> 02:12:08,880
all right then it comes over here but
2247
02:12:07,039 --> 02:12:11,679
let's just change that to foo with
2248
02:12:13,039 --> 02:12:18,319
yeah let's no let's not do that let's
2249
02:12:14,960 --> 02:12:19,920
keep it as foo so it says if foo is if
2250
02:12:18,319 --> 02:12:20,880
name is food then it says yeah that's
2251
02:12:20,880 --> 02:12:25,760
and then it goes here however as you can
2252
02:12:30,800 --> 02:12:35,119
then it should execute this as well
2253
02:12:35,118 --> 02:12:39,439
and you can see that foo is not bar so
2254
02:12:39,439 --> 02:12:44,559
however this this this will never be
2255
02:12:44,560 --> 02:12:48,960
when dart goes inside these curly
2256
02:12:46,639 --> 02:12:50,639
brackets then it says okay i did what i
2257
02:12:48,960 --> 02:12:52,719
had to do i did my print statement the
2258
02:12:52,719 --> 02:12:56,480
so if an if statement is kind of like a
2259
02:12:56,479 --> 02:13:00,959
it puts a stop when it when it falls
2260
02:12:58,800 --> 02:13:03,840
into one of these if statements it kind
2261
02:13:00,960 --> 02:13:06,480
of says okay i did my job in this entire
2262
02:13:03,840 --> 02:13:09,039
if else block then i will execute the
2263
02:13:06,479 --> 02:13:10,879
code after that so if i clear the
2264
02:13:09,039 --> 02:13:12,800
console here and press command s you can
2265
02:13:10,880 --> 02:13:14,880
see it only says yes it is foo it
2266
02:13:14,880 --> 02:13:20,159
so however if you change this
2267
02:13:22,000 --> 02:13:25,840
basically the execution of the program
2268
02:13:23,439 --> 02:13:28,479
doesn't fall into line number 10 it will
2269
02:13:25,840 --> 02:13:30,319
eventually fall to line number 12. so
2270
02:13:28,479 --> 02:13:32,638
you can see it says this value is not
2271
02:13:30,319 --> 02:13:34,238
bar so when you're writing your if
2272
02:13:32,639 --> 02:13:35,840
statement and else statements just be
2273
02:13:34,238 --> 02:13:38,238
careful with that just know that it's
2274
02:13:35,840 --> 02:13:40,480
kind of like a as soon as the code jumps
2275
02:13:38,238 --> 02:13:42,319
into one of those branches it doesn't go
2276
02:13:40,479 --> 02:13:44,158
to the rest of the branches and checks
2277
02:13:55,359 --> 02:13:59,759
check that in my notes that we've talked
2278
02:13:59,760 --> 02:14:04,239
what we need to do now is to talk about
2279
02:14:10,639 --> 02:14:15,039
there are three different types of
2280
02:14:12,238 --> 02:14:19,359
operators there are prefix operators
2281
02:14:15,039 --> 02:14:21,599
infix operators and suffix operators
2282
02:14:21,840 --> 02:14:27,360
and i will explain them to you i mean
2283
02:14:27,359 --> 02:14:31,679
i think to explain operators probably
2284
02:14:29,359 --> 02:14:33,198
it's best that we talk about numbers so
2285
02:14:31,679 --> 02:14:35,039
let's go in this test function and
2286
02:14:33,198 --> 02:14:38,799
delete everything that we we've written
2287
02:14:35,039 --> 02:14:42,000
here and let let me just say final
2288
02:14:43,679 --> 02:14:47,920
now we've created a variable whose value
2289
02:14:46,238 --> 02:14:50,078
cannot be changed after spin assigned to
2290
02:14:47,920 --> 02:14:53,118
because we created as a final a variable
2291
02:14:50,078 --> 02:14:55,359
whose value is 20. all right now if you
2292
02:14:53,118 --> 02:14:57,920
want to calculate half of this value how
2293
02:14:55,359 --> 02:14:59,759
would you do that then well there is an
2294
02:14:57,920 --> 02:15:01,199
operator for that and that is a division
2295
02:14:59,760 --> 02:15:04,079
operator so you would just say for
2296
02:15:04,078 --> 02:15:08,000
half of age as you can see we're using
2297
02:15:06,719 --> 02:15:10,078
camel case as i explained in the
2298
02:15:10,078 --> 02:15:14,479
an easy way to do camel case is to say
2299
02:15:12,238 --> 02:15:18,399
half of it just writing in english
2300
02:15:18,479 --> 02:15:22,479
of like this here change the first
2301
02:15:20,800 --> 02:15:24,239
letter of all the words except for the
2302
02:15:22,479 --> 02:15:25,678
first word to uppercase and then remove
2303
02:15:24,238 --> 02:15:28,479
all the spaces that's camelcase
2304
02:15:25,679 --> 02:15:31,920
basically so half of age is age and then
2305
02:15:28,479 --> 02:15:33,919
there is a great operator in a dart
2306
02:15:31,920 --> 02:15:35,840
called a division operator and then you
2307
02:15:37,039 --> 02:15:41,198
and then you could just say print half
2308
02:15:41,198 --> 02:15:47,519
so command s and that says ten all right
2309
02:15:44,960 --> 02:15:49,840
so that's the division operator and then
2310
02:15:56,960 --> 02:15:59,840
multiplied by two it's kind of like a
2311
02:15:59,840 --> 02:16:06,639
that is an operator and you can see
2312
02:16:06,639 --> 02:16:11,359
the division and the multiplication uh
2313
02:16:09,439 --> 02:16:12,638
multiplication it's a little bit
2314
02:16:12,639 --> 02:16:18,078
operators are in fix operators and an
2315
02:16:15,439 --> 02:16:20,319
infix operator is an operator that has
2316
02:16:18,078 --> 02:16:21,519
two parameters one to its right and one
2317
02:16:20,319 --> 02:16:22,559
to its left i don't know how you can
2318
02:16:22,560 --> 02:16:27,920
yeah one two one to each side i don't
2319
02:16:25,198 --> 02:16:29,519
know if my video is like mirrored so if
2320
02:16:27,920 --> 02:16:32,398
my right hand is actually right hand on
2321
02:16:29,520 --> 02:16:34,639
your side as well so i don't know yes it
2322
02:16:37,599 --> 02:16:43,599
these are infix operators when they have
2323
02:16:49,920 --> 02:16:53,760
an example of that is for instance if i
2324
02:16:59,599 --> 02:17:05,679
change this to var i'll explain soon why
2325
02:17:02,638 --> 02:17:08,239
and if we said minus minus h
2326
02:17:05,679 --> 02:17:11,120
now this is an example of a prefix
2327
02:17:08,239 --> 02:17:14,558
operator and a prefix operator is an
2328
02:17:11,120 --> 02:17:17,679
operator that it comes before
2329
02:17:14,558 --> 02:17:20,318
whatever it has to do its work on and in
2330
02:17:17,679 --> 02:17:22,318
this case this minus minus operator what
2331
02:17:20,318 --> 02:17:24,398
it does is that it takes the value that
2332
02:17:28,398 --> 02:17:35,119
and then it returns its result back to
2333
02:17:31,519 --> 02:17:37,359
the left-hand side so in this case the
2334
02:17:35,120 --> 02:17:39,120
the interpreter comes here and says okay
2335
02:17:37,359 --> 02:17:40,639
you wanna calculate something okay it's
2336
02:17:40,638 --> 02:17:46,159
oh a prefix operator that takes a
2337
02:17:43,679 --> 02:17:47,599
variable here and it says okay what is
2338
02:17:47,599 --> 02:17:54,000
minus 1 is 19. puts it in here and it
2339
02:17:50,799 --> 02:17:55,599
also puts that minus 1 sorry puts that
2340
02:17:55,599 --> 02:18:00,719
i think so at least so if we say print
2341
02:17:57,280 --> 02:18:02,639
age and print age minus one now both
2342
02:18:02,638 --> 02:18:08,318
and you can see it says twice you see 2
2343
02:18:05,200 --> 02:18:11,359
19. so that kind of means it's uh twice
2344
02:18:08,318 --> 02:18:13,279
so flutter has this great ability not to
2345
02:18:11,359 --> 02:18:16,399
duplicate basically log statements or
2346
02:18:17,280 --> 02:18:21,679
we have i mean there are some really
2347
02:18:19,120 --> 02:18:25,439
great operators in dart and that is the
2348
02:18:21,679 --> 02:18:28,398
plus operator operator and then you have
2349
02:18:25,439 --> 02:18:30,559
the minus division multiplication and
2350
02:18:28,398 --> 02:18:32,718
then you have the logical kind of like
2351
02:18:30,558 --> 02:18:34,718
operators to check if a value from the
2352
02:18:32,718 --> 02:18:35,678
left is equal to the value to the right
2353
02:18:35,679 --> 02:18:40,079
these are kind of like the basics of the
2354
02:18:37,439 --> 02:18:43,359
operators in um dart so you don't have
2355
02:18:40,079 --> 02:18:44,799
to know so much more about these for now
2356
02:18:45,760 --> 02:18:50,318
you can get really far with these and a
2357
02:18:48,079 --> 02:18:53,920
lot of these operators actually work not
2358
02:18:50,318 --> 02:18:55,679
only on numbers but also on strings so
2359
02:18:53,920 --> 02:18:57,599
and for instance if you this is one of
2360
02:18:55,679 --> 02:19:00,000
the cool features of dart which i
2361
02:18:57,599 --> 02:19:02,079
absolutely love i think it was just such
2362
02:19:00,000 --> 02:19:03,840
a great idea for them to implement this
2363
02:19:03,840 --> 02:19:07,439
uh one thing i mean if you're not coming
2364
02:19:05,679 --> 02:19:09,280
from a software development background
2365
02:19:07,439 --> 02:19:10,639
um you may not know this but if you're
2366
02:19:09,280 --> 02:19:11,920
coming for instance from design
2367
02:19:10,638 --> 02:19:13,518
background also you would notice that
2368
02:19:11,920 --> 02:19:14,398
sometimes when you're creating designs
2369
02:19:14,398 --> 02:19:18,398
any any screen and you want to kind of
2370
02:19:16,000 --> 02:19:20,718
like show that design to someone like a
2371
02:19:18,398 --> 02:19:23,760
product owner you want to actually
2372
02:19:20,718 --> 02:19:25,919
populate the text inside your design
2373
02:19:25,920 --> 02:19:29,840
and lower mibsum is basically has a huge
2374
02:19:27,840 --> 02:19:32,079
history of where it comes from but it's
2375
02:19:29,840 --> 02:19:33,599
usually some sort of a dummy text kind
2376
02:19:32,079 --> 02:19:34,478
of that you want to place inside your
2377
02:19:34,478 --> 02:19:38,079
so that you can just like display and
2378
02:19:39,040 --> 02:19:42,399
a lot of developers like in many
2379
02:19:40,638 --> 02:19:44,000
languages when they want to display some
2380
02:19:42,398 --> 02:19:45,760
text and they don't know what to say
2381
02:19:44,000 --> 02:19:47,599
like we're just testing stuff i just
2382
02:19:45,760 --> 02:19:49,520
want to display some text they go and
2383
02:19:47,599 --> 02:19:51,120
grab lorem ipsum and then put it in
2384
02:19:51,120 --> 02:19:55,280
but dart has gone to the next step and
2385
02:19:53,520 --> 02:19:57,520
said okay we don't need that so what you
2386
02:19:55,280 --> 02:19:59,200
can do you can say for instance name is
2387
02:19:59,200 --> 02:20:04,399
that's a string name but you can say
2388
02:20:04,398 --> 02:20:09,439
is name times 20. you can literally say
2389
02:20:07,359 --> 02:20:11,200
multiply a string by 20 and what that
2390
02:20:20,398 --> 02:20:23,840
it's a great feature you can say foo bar
2391
02:20:28,559 --> 02:20:32,879
that's it copies it for you 100 times in
2392
02:20:43,439 --> 02:20:50,479
the basics of operators in dart okay
2393
02:20:52,079 --> 02:20:56,079
mark in my notes that we've talked about
2394
02:21:05,439 --> 02:21:10,398
we can also create custom operators to
2395
02:21:10,398 --> 02:21:16,398
i don't think it is completely
2396
02:21:13,840 --> 02:21:18,239
all right right now to talk about custom
2397
02:21:16,398 --> 02:21:20,079
operators i think it's kind of like a
2398
02:21:18,239 --> 02:21:22,559
topic to talk about later so i actually
2399
02:21:20,079 --> 02:21:23,840
just moved it in my notes that
2400
02:21:22,559 --> 02:21:25,519
we don't need to talk about it right now
2401
02:21:23,840 --> 02:21:28,159
because we have to know about a little
2402
02:21:25,520 --> 02:21:30,159
bit about a little bit about classes and
2403
02:21:28,159 --> 02:21:31,840
objects so that we can after we've
2404
02:21:30,159 --> 02:21:34,639
created our own class then we can create
2405
02:21:35,680 --> 02:21:39,040
appropriate to talk about right now but
2406
02:21:37,280 --> 02:21:41,200
just know that in the future you can
2407
02:21:39,040 --> 02:21:43,520
also create your own operators and then
2408
02:21:41,200 --> 02:21:45,120
like or you can also override like
2409
02:21:43,520 --> 02:21:46,800
different operators and how they work
2410
02:21:45,120 --> 02:21:48,160
with different objects so it's it's
2411
02:21:50,079 --> 02:21:55,760
but that's that's that let's just let's
2412
02:21:51,680 --> 02:21:58,079
just leave operators to that for now
2413
02:21:55,760 --> 02:22:01,120
now the next topic that i wanted to talk
2414
02:22:09,680 --> 02:22:15,120
similar to each other and they are
2415
02:22:15,120 --> 02:22:18,640
a list as you would have for instance a
2416
02:22:16,719 --> 02:22:20,639
piece of paper and you could write your
2417
02:22:18,639 --> 02:22:22,478
shopping list or like a christmas
2418
02:22:25,280 --> 02:22:32,159
um these are called lists in dart
2419
02:22:36,398 --> 02:22:40,318
and then bass as you can see dark
2420
02:22:38,478 --> 02:22:42,079
doesn't like this syntax at the moment
2421
02:22:40,318 --> 02:22:43,439
it says okay what are these like what is
2422
02:22:46,559 --> 02:22:50,559
the way to tell darth that this is a
2423
02:22:48,398 --> 02:22:52,318
list of things that are like in place
2424
02:22:52,318 --> 02:22:59,279
is by placing them inside uh square
2425
02:22:55,040 --> 02:23:00,479
brackets and then a semicolon of course
2426
02:23:04,159 --> 02:23:08,478
as i've talked about it before just just
2427
02:23:08,478 --> 02:23:14,239
indexes in that they all have their own
2428
02:23:11,760 --> 02:23:16,318
place placement inside the list
2429
02:23:14,239 --> 02:23:18,239
and all these objects as we call them
2430
02:23:16,318 --> 02:23:20,719
they have their placements inside the
2431
02:23:18,239 --> 02:23:23,439
list and you may think that object
2432
02:23:23,439 --> 02:23:28,880
object number two is bar and now number
2433
02:23:25,840 --> 02:23:31,520
three is bas and i kind of correct but
2434
02:23:31,520 --> 02:23:37,359
i mean all the programming language that
2435
02:23:33,359 --> 02:23:39,439
i've worked with c plus c rust
2436
02:23:41,359 --> 02:23:46,559
they pretty much all start at the index
2437
02:23:44,079 --> 02:23:48,079
of zero and that is so important to
2438
02:23:53,600 --> 02:23:57,920
is not one it's actually it's index is
2439
02:23:57,920 --> 02:24:04,398
and that is why lists are called zero
2440
02:24:00,879 --> 02:24:06,239
based and their indexes are called zero
2441
02:24:04,398 --> 02:24:07,358
based indexes so you've got to be
2442
02:24:06,239 --> 02:24:10,000
careful with that and we're going to
2443
02:24:07,359 --> 02:24:11,359
talk about indexes soon actually
2444
02:24:11,359 --> 02:24:16,399
final names is that now if i want to
2445
02:24:14,239 --> 02:24:17,680
extract foo from here i'm just going to
2446
02:24:20,239 --> 02:24:24,398
at the index of zero right i'm just
2447
02:24:23,040 --> 02:24:27,680
going to print it i'm just going to say
2448
02:24:24,398 --> 02:24:29,119
printfu and you'll see food printed here
2449
02:24:29,120 --> 02:24:33,200
i want to get past then i'm going to say
2450
02:24:38,239 --> 02:24:43,840
index of two because it's the third item
2451
02:24:41,439 --> 02:24:45,520
but since indexes are zero base then
2452
02:24:43,840 --> 02:24:48,478
it's in excel so i made the mistake
2453
02:24:45,520 --> 02:24:49,840
myself so command s and you'll get bass
2454
02:24:49,840 --> 02:24:53,680
i actually want to go back to this three
2455
02:24:51,840 --> 02:24:55,600
and then command s so you can see what
2456
02:24:53,680 --> 02:24:56,880
happened here you'll see you you'll get
2457
02:24:56,879 --> 02:25:03,438
a range error which is an exception
2458
02:25:00,239 --> 02:25:06,159
an exception in dart and many other
2459
02:25:03,439 --> 02:25:07,200
programming languages is when things go
2460
02:25:07,200 --> 02:25:10,560
so that the language doesn't really know
2461
02:25:10,559 --> 02:25:15,119
and in this case you can see this
2462
02:25:12,398 --> 02:25:17,279
through an exception at the language
2463
02:25:15,120 --> 02:25:18,079
level or at the library's level where it
2464
02:25:18,079 --> 02:25:24,398
there are no four items in this array or
2465
02:25:21,120 --> 02:25:26,720
in this list because the index of three
2466
02:25:26,719 --> 02:25:30,879
item number one in the list has the
2467
02:25:28,559 --> 02:25:33,039
index of zero item number two has the
2468
02:25:30,879 --> 02:25:34,239
index sub one item number three has the
2469
02:25:35,680 --> 02:25:39,680
and item number four has the index of
2470
02:25:39,680 --> 02:25:44,639
and there are only three objects in this
2471
02:25:50,879 --> 02:25:55,679
non-existent and that is why we're
2472
02:25:52,478 --> 02:25:59,199
getting this invalid value not in
2473
02:26:00,079 --> 02:26:03,760
that's how you access items inside a
2474
02:26:03,760 --> 02:26:08,239
and this is how you actually create a
2475
02:26:05,760 --> 02:26:10,318
list okay so you say list of items which
2476
02:26:10,318 --> 02:26:13,760
you can also there are some convenient
2477
02:26:13,760 --> 02:26:17,840
properties on lists that you can for
2478
02:26:19,120 --> 02:26:22,399
length so if you want to know how many
2479
02:26:22,398 --> 02:26:27,039
in this list you can also say
2480
02:26:30,159 --> 02:26:33,920
we're going to talk a little bit about
2481
02:26:31,680 --> 02:26:37,520
that now as well because i think it's so
2482
02:26:33,920 --> 02:26:37,520
important to understand what that is
2483
02:26:37,680 --> 02:26:42,000
dots in dart and in many other
2484
02:26:40,079 --> 02:26:43,280
programming language is a way to drill
2485
02:26:43,280 --> 02:26:49,760
something to extract something else from
2486
02:26:46,079 --> 02:26:50,799
it and in this case names is a list
2487
02:27:02,959 --> 02:27:08,478
and that means every list in dart has a
2488
02:27:08,478 --> 02:27:13,279
automatically calculated for you you
2489
02:27:10,478 --> 02:27:16,719
don't have to do anything as you enter
2490
02:27:13,280 --> 02:27:19,600
values in this list this length is gonna
2491
02:27:16,719 --> 02:27:21,279
then return the right value to you so
2492
02:27:19,600 --> 02:27:22,559
i'm gonna i'm just gonna talk about that
2493
02:27:21,280 --> 02:27:24,319
a little bit more so i'm just gonna say
2494
02:27:24,318 --> 02:27:29,439
it's gonna say you'll see here
2495
02:27:27,439 --> 02:27:32,398
let me scroll a little bit it'll say
2496
02:27:29,439 --> 02:27:35,040
three three items in this array
2497
02:27:32,398 --> 02:27:37,039
i'm gonna change the names list to var
2498
02:27:38,959 --> 02:27:44,478
change its contents and mutate it like
2499
02:27:42,398 --> 02:27:47,199
i just wanna add a new name to this
2500
02:27:47,200 --> 02:27:51,200
is a function as you can see because it
2501
02:27:54,079 --> 02:27:59,359
my name and then semicolon to end the
2502
02:27:56,719 --> 02:28:01,920
statement now if i say print names
2503
02:27:59,359 --> 02:28:04,318
length right after the statement
2504
02:28:01,920 --> 02:28:05,920
you guessed it oh i can see actually my
2505
02:28:05,920 --> 02:28:10,318
you may not see all the print statements
2506
02:28:07,760 --> 02:28:12,880
because this text is right there so
2507
02:28:10,318 --> 02:28:14,239
let me resize my visual studio code a
2508
02:28:12,879 --> 02:28:16,239
little bit so you can see things a
2509
02:28:14,239 --> 02:28:18,478
little bit better sorry about that
2510
02:28:18,478 --> 02:28:24,079
now we have names length here and you
2511
02:28:21,439 --> 02:28:25,120
can see the second time around it said
2512
02:28:29,600 --> 02:28:35,439
the name of a of a variable and that
2513
02:28:33,439 --> 02:28:38,159
means it can be a constant a variable or
2514
02:28:35,439 --> 02:28:40,559
a final variable after you put dot
2515
02:28:38,159 --> 02:28:42,559
after its name you're accessing
2516
02:28:40,559 --> 02:28:45,199
different properties or different
2517
02:28:42,559 --> 02:28:47,039
functions inside that thing okay so it's
2518
02:28:45,200 --> 02:28:49,680
kind of like an accessor it allows you
2519
02:28:47,040 --> 02:28:52,560
to drill down inside an object and grab
2520
02:28:49,680 --> 02:28:55,439
things out of it or maybe make that
2521
02:28:52,559 --> 02:28:57,279
object do something for you okay
2522
02:28:57,280 --> 02:29:00,880
i think i think that's good enough to be
2523
02:28:59,280 --> 02:29:03,040
honest with you about lists i don't want
2524
02:29:00,879 --> 02:29:05,279
to go too much into details and scare
2525
02:29:03,040 --> 02:29:08,479
people about like all the different
2526
02:29:05,280 --> 02:29:11,120
things you can do with lists and but
2527
02:29:08,478 --> 02:29:12,959
there there is great documentation on
2528
02:29:11,120 --> 02:29:15,520
dart's own website all you have to do is
2529
02:29:12,959 --> 02:29:17,839
just to google or duckduckgo or whatever
2530
02:29:18,639 --> 02:29:23,119
your way through and just search for
2531
02:29:20,318 --> 02:29:24,719
dart arrays documentation or just dart
2532
02:29:23,120 --> 02:29:26,319
arrays and then you will find lots of
2533
02:29:26,318 --> 02:29:30,639
or sorry dark lists because in dart
2534
02:29:28,318 --> 02:29:31,680
they're actually called lists in some
2535
02:29:30,639 --> 02:29:33,279
other programming languages they're
2536
02:29:33,280 --> 02:29:36,640
those names can be used interchangeably
2537
02:29:35,120 --> 02:29:38,479
to be honest with you lists and arrays
2538
02:29:36,639 --> 02:29:40,959
are kind of like yeah almost the same
2539
02:29:45,120 --> 02:29:49,040
that was lists in dart i'm gonna take it
2540
02:29:49,040 --> 02:29:52,640
notes so that we know we've talked about
2541
02:29:52,639 --> 02:29:56,079
the next topic that i wanted to talk
2542
02:30:05,359 --> 02:30:08,800
as you can see in the caption i've
2543
02:30:06,478 --> 02:30:10,239
written here is a list of unique things
2544
02:30:10,239 --> 02:30:20,239
lists were lists of homogeneous things
2545
02:30:14,639 --> 02:30:20,239
sets our list of unique things so
2546
02:30:20,959 --> 02:30:26,159
i think the best way actually to explain
2547
02:30:22,719 --> 02:30:28,239
sets is just to jump right into it so
2548
02:30:26,159 --> 02:30:30,559
the syntax for a set is with a curly
2549
02:30:30,559 --> 02:30:34,478
actually i think i think it is
2550
02:30:38,719 --> 02:30:42,799
uh names and i'm just gonna say curly
2551
02:30:42,799 --> 02:30:48,318
and then end that okay just like that
2552
02:30:48,318 --> 02:30:51,760
you will see that the suggestion
2553
02:30:49,920 --> 02:30:54,318
provided here or the information
2554
02:30:51,760 --> 02:30:56,880
provided by visual studio code says
2555
02:30:56,879 --> 02:30:59,839
we talked about this in the previous
2556
02:31:02,239 --> 02:31:05,840
or final something name for instance is
2557
02:31:05,840 --> 02:31:10,880
i'm kind of telling dart to create
2558
02:31:11,920 --> 02:31:16,398
reference name is name and its value is
2559
02:31:14,719 --> 02:31:20,000
fu and dart automatically understand
2560
02:31:20,000 --> 02:31:25,040
value is string because its data is
2561
02:31:23,040 --> 02:31:26,800
string so you don't have to say final
2562
02:31:26,799 --> 02:31:31,199
although you could do that but let's
2563
02:31:29,040 --> 02:31:32,640
change this to const as well as
2564
02:31:32,639 --> 02:31:36,318
you don't have to actually say this is a
2565
02:31:34,639 --> 02:31:38,398
string because dart understands it
2566
02:31:36,318 --> 02:31:40,159
automatically so you just remove the
2567
02:31:38,398 --> 02:31:42,000
data type if that's what you want to do
2568
02:31:40,159 --> 02:31:44,799
which is what i actually prefer to do
2569
02:31:44,799 --> 02:31:48,559
unless you have a really good reason to
2570
02:31:46,239 --> 02:31:51,119
provide the data type anyways let's go
2571
02:31:54,159 --> 02:31:58,239
means and that's and in the same way
2572
02:31:56,478 --> 02:32:00,079
that we created a string and then dart
2573
02:31:58,239 --> 02:32:02,639
automatically understood the data type
2574
02:32:00,079 --> 02:32:04,478
by putting uh square brac sorry curly
2575
02:32:02,639 --> 02:32:06,719
brackets here or curly braces here and
2576
02:32:04,478 --> 02:32:08,559
putting some data inside that dart
2577
02:32:06,719 --> 02:32:11,438
automatically understand okay this is a
2578
02:32:08,559 --> 02:32:14,159
set of some stuff in here and this stuff
2579
02:32:11,439 --> 02:32:16,720
for now just looks like a string so
2580
02:32:20,318 --> 02:32:24,879
art says okay this is fine but if i go
2581
02:32:22,719 --> 02:32:26,639
in here and i say foo again you can see
2582
02:32:24,879 --> 02:32:28,959
i automatically get then an error
2583
02:32:26,639 --> 02:32:31,760
message say saying two elements in a
2584
02:32:28,959 --> 02:32:34,000
constant so literally cannot be equal
2585
02:32:31,760 --> 02:32:38,040
because it understands that this foo it
2586
02:32:38,719 --> 02:32:43,679
okay so let's remove foo from here and
2587
02:32:43,680 --> 02:32:48,079
let's change this names to var so that
2588
02:32:45,680 --> 02:32:49,280
we can actually change its con its
2589
02:32:49,280 --> 02:32:54,000
then go to name and add to the next line
2590
02:32:57,439 --> 02:33:02,479
and then say names add bar and then set
2591
02:33:06,559 --> 02:33:11,840
and then we'll say print names okay and
2592
02:33:09,439 --> 02:33:13,760
i'm gonna clear the logs with this
2593
02:33:13,760 --> 02:33:18,639
and then i'm gonna press command s
2594
02:33:16,879 --> 02:33:20,799
and you can see that the set is still
2595
02:33:18,639 --> 02:33:21,920
full bar bass nothing changed really
2596
02:33:21,920 --> 02:33:25,840
that is one of the greatest properties
2597
02:33:29,520 --> 02:33:33,439
sets in dart and in pretty much every
2598
02:33:31,520 --> 02:33:35,359
other programming language that supports
2599
02:33:35,359 --> 02:33:42,640
sets only ensure always that their data
2600
02:33:42,639 --> 02:33:45,840
this is i mean there's lots of magic
2601
02:33:44,318 --> 02:33:48,559
happening in the background that i
2602
02:33:45,840 --> 02:33:49,920
haven't really talked about in i mean
2603
02:33:48,559 --> 02:33:52,159
for instance like the question that you
2604
02:33:52,159 --> 02:33:57,920
foo is the same as foo does it compare
2605
02:33:55,040 --> 02:33:59,439
them yes it kind of does actually
2606
02:33:59,439 --> 02:34:04,479
it's internally doing a comparison
2607
02:34:02,079 --> 02:34:07,520
between these things but we never told
2608
02:34:04,478 --> 02:34:09,119
it how that comparison should work
2609
02:34:09,120 --> 02:34:14,800
if you remember from operators when we
2610
02:34:14,959 --> 02:34:19,519
now we haven't talked about classes well
2611
02:34:16,559 --> 02:34:22,559
i'm just going to say strings in dart
2612
02:34:19,520 --> 02:34:24,239
already know how they should be compared
2613
02:34:28,318 --> 02:34:33,039
they kind of have this logic of hash
2614
02:34:30,799 --> 02:34:35,039
codes and comparison operators that they
2615
02:34:35,040 --> 02:34:40,960
given this string am i the same as that
2616
02:34:37,760 --> 02:34:43,040
like given sorry given what i am
2617
02:34:40,959 --> 02:34:45,039
and this new thing that you're providing
2618
02:34:43,040 --> 02:34:46,720
me like i'm foo and you're saying foo am
2619
02:34:45,040 --> 02:34:48,880
i the same as foo and then it says yes
2620
02:34:48,879 --> 02:34:54,159
that is what sets are doing internally
2621
02:34:51,280 --> 02:34:56,000
but we don't actually see that so
2622
02:34:56,000 --> 02:35:01,439
just know for now that sets in dart
2623
02:34:58,799 --> 02:35:04,398
allow you to create unique lists of
2624
02:35:04,398 --> 02:35:09,358
you may also be a little bit like
2625
02:35:06,398 --> 02:35:13,358
tempted to go and say okay i have things
2626
02:35:09,359 --> 02:35:16,559
here let's say const things is equal to
2627
02:35:16,559 --> 02:35:19,600
and this will also work and that is
2628
02:35:20,879 --> 02:35:25,438
the concept of object as well you can
2629
02:35:23,280 --> 02:35:28,399
see you'll see things and it'll say oh
2630
02:35:28,398 --> 02:35:34,000
we haven't talked about objects yet and
2631
02:35:32,239 --> 02:35:35,439
if i look at my notes i can see that
2632
02:35:34,000 --> 02:35:36,799
we're going to talk about objects in
2633
02:35:36,799 --> 02:35:41,840
and we're right now in chapter four
2634
02:35:41,840 --> 02:35:44,318
gotten to that point to talk about
2635
02:35:44,318 --> 02:35:48,398
and i don't want to really scare you
2636
02:35:46,079 --> 02:35:50,318
about objects and what they actually are
2637
02:35:50,318 --> 02:35:58,079
there is a hierarchy of data types so
2638
02:35:54,559 --> 02:36:00,639
you have object and then you have
2639
02:35:58,079 --> 02:36:02,959
data types that kind of derive their
2640
02:36:02,959 --> 02:36:07,279
here sits object and then here's its
2641
02:36:07,280 --> 02:36:11,680
double etc and then you have sets and
2642
02:36:11,680 --> 02:36:15,200
when you're here when you were first
2643
02:36:13,040 --> 02:36:18,960
here and you said i have foo barbaros
2644
02:36:15,200 --> 02:36:20,720
all strings then dart was like okay
2645
02:36:21,680 --> 02:36:26,159
you said oh i have a string and i have
2646
02:36:26,159 --> 02:36:29,439
now dart was like oops i have i can't i
2647
02:36:29,439 --> 02:36:33,200
i don't really i can't say this is a
2648
02:36:31,120 --> 02:36:34,880
list of strings and integers that's not
2649
02:36:33,200 --> 02:36:37,600
possible in there so it says i'm going
2650
02:36:34,879 --> 02:36:40,318
to take the common denominator type that
2651
02:36:37,600 --> 02:36:43,200
sits above them as their parent to
2652
02:36:40,318 --> 02:36:45,199
specify what these things are okay
2653
02:36:43,200 --> 02:36:47,920
and that is kind of like the same thing
2654
02:36:45,200 --> 02:36:51,439
that we do in real life in that if i
2655
02:36:51,439 --> 02:36:56,159
two candies like a twix bar then you say
2656
02:36:56,159 --> 02:37:00,879
this is a twix bar that's one thing
2657
02:36:58,639 --> 02:37:03,920
if i give you 10 twix bars then you will
2658
02:37:00,879 --> 02:37:06,478
say a lot of twix bars or 10 twix bars
2659
02:37:03,920 --> 02:37:09,600
if i just give you a bunch of twix bars
2660
02:37:06,478 --> 02:37:11,599
oh that's a bunch of twix bars but if i
2661
02:37:12,478 --> 02:37:19,358
blend like lots of twix bars mars bars
2662
02:37:16,239 --> 02:37:20,799
whatever all the sweets into a bag and i
2663
02:37:19,359 --> 02:37:21,920
give you that bag what do you call it
2664
02:37:21,920 --> 02:37:26,559
oh this is a bag of twix and uh snickers
2665
02:37:26,559 --> 02:37:32,079
and mars bar no you would probably just
2666
02:37:28,959 --> 02:37:34,079
say candy it's a bag of candies and
2667
02:37:32,079 --> 02:37:36,478
that's what dart is doing here saying oh
2668
02:37:34,079 --> 02:37:37,359
you threw a lot of stuff in here i i
2669
02:37:37,359 --> 02:37:41,200
like comprehend that this is a set of uh
2670
02:37:42,000 --> 02:37:45,920
we do that in real real life and that's
2671
02:37:43,920 --> 02:37:48,000
what dart is doing here so just when you
2672
02:37:45,920 --> 02:37:49,760
see object just know that oh dark
2673
02:37:48,000 --> 02:37:50,639
doesn't really know what this is anymore
2674
02:37:50,639 --> 02:37:54,079
or it kind of knows what it is it's just
2675
02:37:56,079 --> 02:38:03,439
that's what object in this case means
2676
02:38:03,439 --> 02:38:07,680
comparison maybe but i hope you get uh
2677
02:38:07,680 --> 02:38:10,559
and if you see me looking here it's just
2678
02:38:09,280 --> 02:38:12,000
because i'm looking at my notes to
2679
02:38:10,559 --> 02:38:13,119
ensure that i've explained the things
2680
02:38:16,559 --> 02:38:20,398
talked a little about about hash codes
2681
02:38:18,159 --> 02:38:23,200
and sets we don't have to go into
2682
02:38:23,200 --> 02:38:26,840
now let's go and talk a little bit about
2683
02:38:31,200 --> 02:38:34,880
one of my favorite data data structures
2684
02:38:34,879 --> 02:38:38,000
any programming language that supports
2685
02:38:36,318 --> 02:38:40,719
them pretty much almost all modern
2686
02:38:38,000 --> 02:38:43,600
programming languages support maps so
2687
02:38:45,840 --> 02:38:49,280
as you can see here maps are used to
2688
02:38:47,280 --> 02:38:51,280
hold key value pairs of information and
2689
02:38:53,120 --> 02:38:58,079
let's say that you want to explain
2690
02:38:56,000 --> 02:39:00,398
a person using their different
2691
02:39:13,840 --> 02:39:18,000
these are kind of like your keys
2692
02:39:19,760 --> 02:39:23,680
the properties of that person using
2693
02:39:21,520 --> 02:39:25,040
those keys and all those keys have their
2694
02:39:25,040 --> 02:39:30,000
if you say height then you say like 180
2695
02:39:30,000 --> 02:39:34,318
and if you say weight then you select 70
2696
02:39:34,318 --> 02:39:39,760
so these are key values the keys are the
2697
02:39:37,280 --> 02:39:42,800
properties of that person and the values
2698
02:39:39,760 --> 02:39:44,559
are the values of those properties so
2699
02:39:42,799 --> 02:39:47,599
and the way to create a map is very
2700
02:39:44,559 --> 02:39:50,639
similar so to very similar to a set with
2701
02:39:54,879 --> 02:39:58,318
actually this is just a name you don't
2702
02:39:56,239 --> 02:40:00,398
have to say person but yeah or you can
2703
02:39:58,318 --> 02:40:02,799
just say const so person and then you
2704
02:40:00,398 --> 02:40:04,799
open curly brackets and then you would
2705
02:40:02,799 --> 02:40:07,759
do your keys here and i would say the
2706
02:40:04,799 --> 02:40:08,879
key of age for instance i'll say 20
2707
02:40:10,398 --> 02:40:15,278
is it calling yeah it's a column
2708
02:40:12,879 --> 02:40:19,438
and then you end the whole set with a
2709
02:40:15,279 --> 02:40:23,680
semicolon so i just created a
2710
02:40:19,439 --> 02:40:27,920
basically here i created a map whose
2711
02:40:23,680 --> 02:40:30,000
keys are string and values are integers
2712
02:40:27,920 --> 02:40:32,639
now let's see if dart understands that
2713
02:40:30,000 --> 02:40:35,600
you see this is it's a map of string as
2714
02:40:32,639 --> 02:40:38,719
keys and means as values but now
2715
02:40:35,600 --> 02:40:41,040
as you saw before the analogy of candies
2716
02:40:38,719 --> 02:40:42,239
now if i say okay i have another key and
2717
02:40:44,079 --> 02:40:50,719
name and i say oh the name is foo
2718
02:40:50,719 --> 02:40:55,840
what is this person oh it's a map of
2719
02:40:52,959 --> 02:40:57,679
string as keys and object as the value
2720
02:40:55,840 --> 02:41:00,880
because it just looks at the common
2721
02:40:57,680 --> 02:41:03,120
denominator of the string which is foo
2722
02:41:00,879 --> 02:41:05,519
and 20 which is an integer and says oh i
2723
02:41:03,120 --> 02:41:08,319
don't know i can't create a map whose
2724
02:41:05,520 --> 02:41:10,159
keys are string and its values are both
2725
02:41:08,318 --> 02:41:12,159
string and integers so i'm just going to
2726
02:41:10,159 --> 02:41:14,398
go to their parent and be like oh the
2727
02:41:12,159 --> 02:41:17,760
parent of both string and integer is
2728
02:41:14,398 --> 02:41:18,559
object so your values are of type object
2729
02:41:18,559 --> 02:41:22,639
a bunch of candies basically okay
2730
02:41:28,719 --> 02:41:32,959
and the other property of a map is for
2731
02:41:34,000 --> 02:41:37,920
if you if you go and create an agent
2732
02:41:37,920 --> 02:41:43,040
you see it says two keys and a constant
2733
02:41:40,478 --> 02:41:44,639
map literal cannot be equal so it's
2734
02:41:43,040 --> 02:41:47,600
doing some checks here making sure that
2735
02:41:44,639 --> 02:41:49,039
the keys are actually unique so keys
2736
02:41:49,040 --> 02:41:55,120
need to be unique all right so however
2737
02:41:52,079 --> 02:41:58,478
if you go and change this and say var
2738
02:41:55,120 --> 02:42:00,399
person so and then you later go and say
2739
02:42:00,398 --> 02:42:06,879
name is equal to foo like just like that
2740
02:42:04,478 --> 02:42:09,840
and then you print the entire person
2741
02:42:06,879 --> 02:42:12,959
so i'm just gonna say print before
2742
02:42:12,959 --> 02:42:19,039
and you can see here it said first time
2743
02:42:16,159 --> 02:42:21,039
h key is 20 it has a value of 20 and the
2744
02:42:19,040 --> 02:42:23,439
name k has the value of foo with a
2745
02:42:21,040 --> 02:42:26,800
capital f then the second time around on
2746
02:42:23,439 --> 02:42:29,359
the print statement on line 15 then we
2747
02:42:26,799 --> 02:42:30,159
when we print the person it has
2748
02:42:31,200 --> 02:42:35,840
key of age with a value of 20 because we
2749
02:42:33,279 --> 02:42:38,159
didn't modify that and a key of name as
2750
02:42:35,840 --> 02:42:41,520
it was before with the value of foo with
2751
02:42:38,159 --> 02:42:44,079
like six i think uh capital o's
2752
02:42:41,520 --> 02:42:45,279
so this is how you would modify a
2753
02:42:47,120 --> 02:42:50,800
and then you would say equal to which is
2754
02:42:49,040 --> 02:42:52,240
an operator and then you would say the
2755
02:42:52,239 --> 02:42:58,559
um however if you added a new key here
2756
02:43:00,239 --> 02:43:03,600
and that will just kind of like get
2757
02:43:03,600 --> 02:43:08,960
the um to the map so age the same name
2758
02:43:06,959 --> 02:43:12,639
the same now you have a new key whose
2759
02:43:13,359 --> 02:43:17,840
and that is kind of like the basics of
2760
02:43:19,200 --> 02:43:23,760
there are lots of things you can do with
2761
02:43:21,840 --> 02:43:25,359
maps and i really encourage you just
2762
02:43:23,760 --> 02:43:26,719
like everything else that i talked about
2763
02:43:25,359 --> 02:43:29,439
in this chapter that you go and read
2764
02:43:26,719 --> 02:43:31,119
some of the documentations because
2765
02:43:29,439 --> 02:43:32,559
if you're following along with this
2766
02:43:31,120 --> 02:43:34,000
course and your goal is to become a
2767
02:43:32,559 --> 02:43:36,079
software engineer and if you're for
2768
02:43:34,000 --> 02:43:38,318
instance a project manager or a designer
2769
02:43:39,680 --> 02:43:43,120
i think you need to understand that
2770
02:43:43,120 --> 02:43:47,359
do not know all the answers you have to
2771
02:43:45,439 --> 02:43:49,520
go and read documentation you have to
2772
02:43:47,359 --> 02:43:50,559
practice practice practice and put time
2773
02:43:50,559 --> 02:43:56,000
countless countless hours you need to
2774
02:43:56,799 --> 02:44:01,679
i mean this course i think is going to
2775
02:44:01,680 --> 02:44:06,318
the the way i can i mean i can see
2776
02:44:04,559 --> 02:44:07,920
uh the planning for all the chapters
2777
02:44:07,920 --> 02:44:12,000
there's so many chapters i think the
2778
02:44:09,520 --> 02:44:14,239
entirety of this course is gonna go over
2779
02:44:12,000 --> 02:44:17,520
20 hours so you can imagine i can't go
2780
02:44:14,239 --> 02:44:19,119
into details about every single thing
2781
02:44:19,120 --> 02:44:22,399
this course is probably going to be like
2782
02:44:25,040 --> 02:44:29,120
we can't do that so what i expect you to
2783
02:44:27,200 --> 02:44:30,960
do now is just to open your browser and
2784
02:44:30,959 --> 02:44:35,839
maps documentation something like that
2785
02:44:36,799 --> 02:44:40,159
and you also need to know that now that
2786
02:44:38,559 --> 02:44:42,639
you're starting to google things you
2787
02:44:40,159 --> 02:44:45,359
need to be aware of the word dart and
2788
02:44:42,639 --> 02:44:47,439
that dart is an existing very popular
2789
02:44:48,799 --> 02:44:52,478
so sometimes depending on what you're
2790
02:44:55,200 --> 02:44:59,359
the classic darts that you throw is more
2791
02:44:59,359 --> 02:45:03,520
programming programming language which
2792
02:45:05,760 --> 02:45:11,120
in this case if you say dart map
2793
02:45:09,279 --> 02:45:12,640
you may actually end up in some sort of
2794
02:45:12,639 --> 02:45:16,398
explains to you how you can throw darts
2795
02:45:16,398 --> 02:45:19,278
i don't know i'm just trying i'm just
2796
02:45:17,840 --> 02:45:20,799
trying to bring it up because that i
2797
02:45:19,279 --> 02:45:22,479
actually ended up in that situation that
2798
02:45:20,799 --> 02:45:24,239
i searched for something related to dark
2799
02:45:22,478 --> 02:45:26,879
i actually ended up in a weird website
2800
02:45:24,239 --> 02:45:27,680
talking about darts as like a sport
2801
02:45:30,799 --> 02:45:38,000
all right now we've uh talked about maps
2802
02:45:41,600 --> 02:45:45,200
what's coming in the next chapter
2803
02:45:46,159 --> 02:45:53,359
we are gonna talk about a very um
2804
02:45:50,959 --> 02:45:55,278
important concept in dart and many other
2805
02:45:53,359 --> 02:45:57,760
programming languages such as rust and
2806
02:45:55,279 --> 02:46:00,560
swift and that is null safety or dart
2807
02:45:57,760 --> 02:46:02,960
calls it sound the sound noise safety it
2808
02:46:00,559 --> 02:46:04,079
is a very important thing to know about
2809
02:46:04,079 --> 02:46:08,318
and it will greatly help you in the
2810
02:46:06,478 --> 02:46:10,879
future as you write your flutter
2811
02:46:08,318 --> 02:46:13,199
applications and in this course i'm
2812
02:46:16,000 --> 02:46:21,200
make a lot of null references talk about
2813
02:46:18,879 --> 02:46:21,920
null quite a lot throughout the course
2814
02:46:21,920 --> 02:46:26,398
it is very important that we go through
2815
02:46:24,079 --> 02:46:29,120
that as soon as possible and we're
2816
02:46:26,398 --> 02:46:32,079
definitely not gonna leave that out so
2817
02:46:29,120 --> 02:46:34,960
that's gonna be for chapter five so
2818
02:46:32,079 --> 02:46:37,120
keep an eye out for chapter five that is
2819
02:46:34,959 --> 02:46:38,799
to follow so i hope that you enjoyed
2820
02:46:37,120 --> 02:46:41,040
this chapter chapter number four where
2821
02:46:38,799 --> 02:46:43,519
we talked about dark control statements
2822
02:46:41,040 --> 02:46:45,359
and collections and i'll see you in the
2823
02:46:46,719 --> 02:46:51,358
and welcome to chapter number five of
2824
02:46:51,359 --> 02:46:54,880
in this chapter we're going to talk
2825
02:46:55,680 --> 02:46:59,040
in the previous chapter chapter number
2826
02:47:02,879 --> 02:47:08,639
and before we go on to talk about
2827
02:47:05,760 --> 02:47:09,680
enumerations and objects and classes
2828
02:47:09,680 --> 02:47:13,359
it is very important to talk about null
2829
02:47:11,600 --> 02:47:16,399
safety which is a concept that is
2830
02:47:13,359 --> 02:47:17,680
available in most most modern languages
2831
02:47:17,680 --> 02:47:23,279
dart sorry such as rust and swift
2832
02:47:21,120 --> 02:47:26,000
so it is important to kind of like get
2833
02:47:23,279 --> 02:47:27,760
this out the way before we continue
2834
02:47:26,000 --> 02:47:29,520
maybe not even get it out of the way but
2835
02:47:29,520 --> 02:47:35,439
learn what it means and try to utilize
2836
02:47:31,760 --> 02:47:36,478
it so that we can write better code so
2837
02:47:36,478 --> 02:47:41,438
i thought to just bring up um
2838
02:47:41,439 --> 02:47:46,318
null values and why they're important to
2839
02:47:46,318 --> 02:47:49,680
i mean you've seen so far that we have
2840
02:47:48,079 --> 02:47:52,879
data types a data type can be for
2841
02:47:49,680 --> 02:47:55,520
instance a string can be an integer
2842
02:47:52,879 --> 02:47:57,519
and then you can put values in them
2843
02:47:57,520 --> 02:48:01,680
in programming languages you're also
2844
02:48:01,680 --> 02:48:05,600
have the concept of the absence of a
2845
02:48:05,600 --> 02:48:10,399
on one hand you have values so you for
2846
02:48:08,239 --> 02:48:13,199
instance have a string value equal to
2847
02:48:10,398 --> 02:48:15,358
foo bar or your name or whatever it is
2848
02:48:13,200 --> 02:48:17,200
and then on the other hand you can have
2849
02:48:15,359 --> 02:48:18,159
the absence of that value so you can see
2850
02:48:18,159 --> 02:48:22,639
okay i have a container i have a
2851
02:48:19,920 --> 02:48:25,120
variable that can contain the values of
2852
02:48:25,120 --> 02:48:30,319
a variable that can contain any object
2853
02:48:28,318 --> 02:48:33,039
however at the moment i don't have that
2854
02:48:30,318 --> 02:48:35,359
value so you will just tell dart that
2855
02:48:33,040 --> 02:48:39,279
this variable that i have right now
2856
02:48:35,359 --> 02:48:40,399
that can either contain a valid value of
2857
02:48:42,840 --> 02:48:48,799
integer or it can sometimes also
2858
02:48:51,439 --> 02:48:58,239
and this nothingness is the concept
2859
02:49:03,760 --> 02:49:07,520
it means that it's a word that you can
2860
02:49:05,120 --> 02:49:09,600
just write in your text editor as you're
2861
02:49:07,520 --> 02:49:12,479
writing your code and you say that a
2862
02:49:09,600 --> 02:49:14,960
variable's value is equal to null
2863
02:49:12,478 --> 02:49:16,318
and this tells dart that well okay this
2864
02:49:14,959 --> 02:49:19,119
variable at the moment doesn't contain
2865
02:49:19,120 --> 02:49:24,640
not really a value but it's actually the
2866
02:49:22,318 --> 02:49:26,639
absence of a value you should think of
2867
02:49:31,920 --> 02:49:36,398
there's a little bit of a documentation
2868
02:49:36,478 --> 02:49:41,119
uh on dart's website dart dev null
2869
02:49:39,200 --> 02:49:42,640
safety so i'm just going to click on it
2870
02:49:41,120 --> 02:49:44,319
you're not going to see my screen at the
2871
02:49:44,318 --> 02:49:48,000
i'm just bringing it up in a
2872
02:49:48,000 --> 02:49:51,279
a browser window i'm going to bring it
2873
02:49:51,279 --> 02:49:55,920
and increase the size a little bit and
2874
02:49:58,398 --> 02:50:03,599
window as well so you can see the
2875
02:50:00,318 --> 02:50:05,600
contents in its entirety um
2876
02:50:05,600 --> 02:50:09,279
as you can see in dart it's called sound
2877
02:50:09,279 --> 02:50:12,399
documentation about what this actually
2878
02:50:16,478 --> 02:50:20,239
look at what's not safety actually means
2879
02:50:18,799 --> 02:50:21,840
in dart and i'm gonna give you a lot of
2880
02:50:20,239 --> 02:50:23,520
examples of what that actually
2881
02:50:21,840 --> 02:50:25,520
practically means and there's
2882
02:50:23,520 --> 02:50:28,079
documentation here in dart's website
2883
02:50:28,079 --> 02:50:33,039
in its older versions and not in its
2884
02:50:30,719 --> 02:50:35,519
current versions it in its older
2885
02:50:33,040 --> 02:50:37,040
versions it didn't support uh all safety
2886
02:50:35,520 --> 02:50:39,040
so there was a lot of code written
2887
02:50:37,040 --> 02:50:42,080
manually by programmers in order to for
2888
02:50:42,639 --> 02:50:48,000
a value is absent in a variable
2889
02:50:45,840 --> 02:50:50,000
and then there is as you can see here it
2890
02:50:48,000 --> 02:50:52,478
says migrating an existing package or
2891
02:50:50,000 --> 02:50:54,159
app so there is documentation written by
2892
02:50:52,478 --> 02:50:56,318
the dart team in order to help
2893
02:50:54,159 --> 02:50:58,478
developers understand how they can move
2894
02:50:56,318 --> 02:51:00,559
their old code to the new code
2895
02:51:00,559 --> 02:51:04,159
um however if you're following along
2896
02:51:02,719 --> 02:51:06,239
with this course and you're it's like
2897
02:51:06,239 --> 02:51:10,799
basically just following chronologically
2898
02:51:08,478 --> 02:51:12,000
from chapter one to all the other
2899
02:51:10,799 --> 02:51:13,438
chapters i don't know how many chapters
2900
02:51:12,000 --> 02:51:14,639
were going to happen if you're following
2901
02:51:13,439 --> 02:51:16,559
along with this course you don't have to
2902
02:51:14,639 --> 02:51:18,398
think about migrating because the code
2903
02:51:16,559 --> 02:51:20,000
that we're writing in this entire course
2904
02:51:18,398 --> 02:51:22,639
is going to be null safe meaning that
2905
02:51:20,000 --> 02:51:25,439
we're going to take advantage of darts
2906
02:51:22,639 --> 02:51:27,439
null safety operators and meaning that
2907
02:51:25,439 --> 02:51:30,000
we are not going to manually check for
2908
02:51:27,439 --> 02:51:31,920
values being null and then doing some
2909
02:51:30,000 --> 02:51:33,520
branches of code whether they're null or
2910
02:51:33,520 --> 02:51:37,279
so what i mean is that if you read the
2911
02:51:35,520 --> 02:51:38,960
documentation for sound safety you don't
2912
02:51:37,279 --> 02:51:42,239
have to worry about the migration parts
2913
02:51:45,120 --> 02:51:49,359
with that out the way i'm just gonna
2914
02:51:47,439 --> 02:51:51,200
make sure that i take that in my notes
2915
02:51:49,359 --> 02:51:52,640
here that's why i'm looking in this
2916
02:51:51,200 --> 02:51:53,760
direction because i have all my notes
2917
02:51:53,760 --> 02:51:57,600
um let's close this window and bring up
2918
02:51:57,600 --> 02:52:02,479
visual studio code window that we had
2919
02:51:59,760 --> 02:52:06,559
from earlier i'm gonna put it here
2920
02:52:02,478 --> 02:52:08,799
and i'm just gonna ensure that it is of
2921
02:52:06,559 --> 02:52:11,439
the correct height as well so you're
2922
02:52:08,799 --> 02:52:13,519
gonna see it the window in its entirety
2923
02:52:14,639 --> 02:52:18,639
now that we talked about what non-values
2924
02:52:16,398 --> 02:52:21,119
are and that they're the absence of a
2925
02:52:23,920 --> 02:52:27,279
and if you follow along with the
2926
02:52:26,079 --> 02:52:28,799
with the course up to this point you
2927
02:52:27,279 --> 02:52:30,560
should have some sort of a simulator or
2928
02:52:28,799 --> 02:52:32,719
an emulator running and then you should
2929
02:52:30,559 --> 02:52:34,000
have done command shift p or control
2930
02:52:34,000 --> 02:52:38,239
uh depending on your operating system
2931
02:52:35,840 --> 02:52:40,478
command shift p in mac and ctrl shift p
2932
02:52:38,239 --> 02:52:43,279
in linux and windows in order to bring
2933
02:52:43,279 --> 02:52:46,560
this menu and then you can just type
2934
02:52:44,719 --> 02:52:47,840
flutter select device and then you just
2935
02:52:46,559 --> 02:52:49,600
select the device that you want to run
2936
02:52:47,840 --> 02:52:50,639
the code out so i'm kind of assuming
2937
02:52:49,600 --> 02:52:52,720
that you've already done that and that
2938
02:52:50,639 --> 02:52:54,000
your code is running and this is
2939
02:52:52,719 --> 02:52:56,000
something that we talked about in
2940
02:52:54,000 --> 02:52:58,478
earlier chapters so we're not going to
2941
02:53:00,000 --> 02:53:04,159
an iphone simulator which you cannot see
2942
02:53:02,318 --> 02:53:06,000
on the screen but i have it running in a
2943
02:53:04,159 --> 02:53:07,039
separate uh screen just because we don't
2944
02:53:07,040 --> 02:53:10,240
real estate i can bring it up to this
2945
02:53:08,478 --> 02:53:11,760
window but it will just take a lot of
2946
02:53:10,239 --> 02:53:14,398
space so i'm gonna bring it up to
2947
02:53:11,760 --> 02:53:16,000
another monitor so you don't see it
2948
02:53:14,398 --> 02:53:17,840
so this code at the moment is running
2949
02:53:16,000 --> 02:53:19,439
live so if i press command s then it's
2950
02:53:17,840 --> 02:53:21,040
gonna run and just print the output for
2951
02:53:24,879 --> 02:53:29,599
let's talk about making any type um
2952
02:53:31,439 --> 02:53:34,239
way to do that let's let's have a look
2953
02:53:34,239 --> 02:53:37,600
we talked about that null is a keyword
2954
02:53:36,159 --> 02:53:38,799
and that that's why you can see it is
2955
02:53:38,799 --> 02:53:43,199
highlighted here in a different color
2956
02:53:40,879 --> 02:53:45,199
so if you for instance say final
2957
02:53:46,318 --> 02:53:50,719
as you can see it says okay i accept
2958
02:53:48,079 --> 02:53:53,760
this as his name is foo but you can't
2959
02:53:50,719 --> 02:53:55,199
just say name like it's a null because
2960
02:53:53,760 --> 02:53:57,520
then it doesn't understand is it an
2961
02:53:55,200 --> 02:54:00,000
object is it's a string is it nil right
2962
02:53:57,520 --> 02:54:01,760
is it an integer and if you type here
2963
02:54:00,000 --> 02:54:03,760
name then you see it's just dynamic it
2964
02:54:05,600 --> 02:54:09,600
and we'll talk about dynamic a little
2965
02:54:06,879 --> 02:54:12,478
bit later um but what you can do is to
2966
02:54:09,600 --> 02:54:14,479
actually specify that okay i want a
2967
02:54:16,239 --> 02:54:20,159
normal names or strings as we call it
2968
02:54:18,719 --> 02:54:22,000
like series of characters or it can
2969
02:54:20,159 --> 02:54:24,000
sometimes be null and in that case you
2970
02:54:22,000 --> 02:54:24,959
have to actually specify the data type
2971
02:54:27,279 --> 02:54:31,279
not just this because you'll see you'll
2972
02:54:31,279 --> 02:54:34,479
and you'll actually get a suggestion it
2973
02:54:32,639 --> 02:54:36,639
says try changing the type of the
2974
02:54:34,478 --> 02:54:38,318
variable or casting the right hand type
2975
02:54:38,318 --> 02:54:40,959
but we're not going to do that wasn't it
2976
02:54:40,959 --> 02:54:44,318
it wasn't such a useful suggestion
2977
02:54:42,559 --> 02:54:47,680
because what you want here is to
2978
02:54:44,318 --> 02:54:49,519
actually make dart understand that this
2979
02:54:47,680 --> 02:54:51,920
variable right here or this constant
2980
02:54:49,520 --> 02:54:53,439
right here can sometimes contain the
2981
02:54:53,439 --> 02:54:58,559
and the way to do that is you
2982
02:55:01,359 --> 02:55:05,439
so this is this is the syntax which is
2983
02:55:03,520 --> 02:55:08,560
actually used in some other languages as
2984
02:55:05,439 --> 02:55:09,680
well it's used in swift as well
2985
02:55:09,680 --> 02:55:14,479
um this tells dart that well here if we
2986
02:55:12,559 --> 02:55:17,519
make it actually variable as you can see
2987
02:55:14,478 --> 02:55:19,119
or sorry like this so you say i have a
2988
02:55:19,120 --> 02:55:25,040
it's it's a string but sometimes it may
2989
02:55:22,799 --> 02:55:28,478
the string value may be absent
2990
02:55:25,040 --> 02:55:30,800
um and then you'll just say okay
2991
02:55:30,799 --> 02:55:34,959
and you can say now name is no
2992
02:55:33,120 --> 02:55:38,399
so this is kind of like resetting out
2993
02:55:34,959 --> 02:55:39,358
names so if i just say okay print
2994
02:55:39,359 --> 02:55:45,439
and then after foo i say print name okay
2995
02:55:42,799 --> 02:55:46,639
so let's just clear the console and just
2996
02:55:45,439 --> 02:55:48,800
run this application you can see the
2997
02:55:48,799 --> 02:55:53,119
and then the second time around it says
2998
02:55:53,120 --> 02:55:57,120
so this is how you tell dark that you
2999
02:55:59,120 --> 02:56:02,399
data type and you can do this with
3000
02:56:00,719 --> 02:56:05,438
pretty much all data types so you can
3001
02:56:02,398 --> 02:56:08,239
just say okay i have an integer
3002
02:56:05,439 --> 02:56:10,398
um of age and that's 20. but you can see
3003
02:56:08,239 --> 02:56:12,799
you cannot now assign the value of null
3004
02:56:10,398 --> 02:56:14,398
to integer because it's not nullable but
3005
02:56:12,799 --> 02:56:17,199
as soon as you make it nullable then
3006
02:56:21,120 --> 02:56:24,640
you can do different operations using
3007
02:56:22,879 --> 02:56:26,079
for instance we in the previous chapter
3008
02:56:24,639 --> 02:56:28,079
i believe we talked about control
3009
02:56:28,079 --> 02:56:33,439
so you can say for instance if age
3010
02:56:33,439 --> 02:56:37,920
and then you can encode or you can say
3011
02:56:39,359 --> 02:56:44,640
so they work as you would expect so
3012
02:56:42,318 --> 02:56:45,439
there is no difference really
3013
02:56:45,439 --> 02:56:51,840
i mean if you if you think about that
3014
02:56:47,920 --> 02:56:54,318
notability nullability is just like a
3015
02:56:51,840 --> 02:56:56,079
suffix to a data type you can also say
3016
02:56:54,318 --> 02:56:57,439
okay pretty much any data type can be
3017
02:56:56,079 --> 02:56:58,879
nullable and that's that's correct like
3018
02:57:03,520 --> 02:57:09,359
and you can say okay i have foo
3019
02:57:06,398 --> 02:57:12,559
and bar here this is a list of strings
3020
02:57:09,359 --> 02:57:14,960
i've talked about lists in chapter four
3021
02:57:12,559 --> 02:57:17,359
now you can you can see here that list
3022
02:57:14,959 --> 02:57:19,839
of strings there are two data types here
3023
02:57:19,840 --> 02:57:25,439
contents that it holds so if you want to
3024
02:57:22,879 --> 02:57:28,239
make the list in itself nullable then
3025
02:57:25,439 --> 02:57:31,279
you would put the question mark after
3026
02:57:28,239 --> 02:57:33,680
okay this means this list of strings in
3027
02:57:31,279 --> 02:57:36,319
itself can be absent so you say name is
3028
02:57:33,680 --> 02:57:38,559
null and that's accepted all right
3029
02:57:36,318 --> 02:57:41,840
however since you're telling dart that
3030
02:57:38,559 --> 02:57:43,680
okay the names uh value here can its
3031
02:57:43,680 --> 02:57:46,398
but its values are not supposed to be
3032
02:57:46,398 --> 02:57:50,959
so if you then go in here and just put
3033
02:57:48,239 --> 02:57:52,159
null in here then you see that you got
3034
02:57:52,159 --> 02:57:55,439
and that's because dart is saying that
3035
02:57:53,520 --> 02:57:58,159
okay you just promised me that
3036
02:57:55,439 --> 02:57:59,359
the list in itself it can be absent but
3037
02:57:59,359 --> 02:58:03,279
it is not absent meaning that as soon as
3038
02:58:03,279 --> 02:58:08,800
with some values it's the values cannot
3039
02:58:10,559 --> 02:58:15,680
you're telling me here that it is not so
3040
02:58:12,719 --> 02:58:17,358
if you want to make an optional
3041
02:58:18,639 --> 02:58:22,959
optional strings then you would put the
3042
02:58:21,120 --> 02:58:24,319
question mark after the data type of
3043
02:58:26,079 --> 02:58:32,959
i mean the way you should read this is
3044
02:58:28,879 --> 02:58:35,199
i have a list of strings and i call that
3045
02:58:38,959 --> 02:58:44,000
meaning that it can be absent
3046
02:58:46,559 --> 02:58:53,439
it can contain objects of type string
3047
02:58:50,398 --> 02:58:55,519
that themselves can sometimes be absent
3048
02:58:53,439 --> 02:58:56,479
meaning that okay like for instance if
3049
02:58:56,478 --> 02:59:00,799
fu bar no that's accepted but you can
3050
02:59:02,159 --> 02:59:07,279
see what i mean so both the container
3051
02:59:04,879 --> 02:59:10,079
which is called names and the values
3052
02:59:07,279 --> 02:59:11,520
that it contains can be optional
3053
02:59:10,079 --> 02:59:13,200
and the word optional is very important
3054
02:59:11,520 --> 02:59:14,000
for you to learn it's it's kind of like
3055
02:59:14,000 --> 02:59:18,799
industry accepted way of talking about
3056
02:59:27,920 --> 02:59:32,719
nullable values and optional values all
3057
02:59:30,478 --> 02:59:34,239
right basically you can use those words
3058
02:59:34,239 --> 02:59:39,279
if you're talking with a colleague
3059
02:59:36,959 --> 02:59:40,719
programmer you would say oh how would
3060
02:59:39,279 --> 02:59:43,439
you describe this okay this is an
3061
02:59:40,719 --> 02:59:45,679
optional list of optional strings or you
3062
02:59:43,439 --> 02:59:47,200
could also say nullable list of nullable
3063
02:59:47,200 --> 02:59:51,279
optional is also word that is typically
3064
02:59:55,359 --> 03:00:01,120
okay we talked about making any type
3065
03:00:04,159 --> 03:00:07,920
done that we've talked about it in notes
3066
03:00:07,920 --> 03:00:15,040
now let's talk about cherry picking
3067
03:00:10,398 --> 03:00:15,039
non-null values and what this means is
3068
03:00:26,639 --> 03:00:30,398
at all i'll explain what this actually
3069
03:00:45,680 --> 03:00:50,079
this is a constant all right that's
3070
03:00:47,680 --> 03:00:52,559
that's what the suggestion was you see i
3071
03:00:50,079 --> 03:00:53,359
wrote final because i was not planning
3072
03:00:53,359 --> 03:00:56,399
reassign this first name value to
3073
03:00:55,120 --> 03:00:57,920
anything else but then i got a
3074
03:00:56,398 --> 03:01:00,000
suggestion to actually use the word
3075
03:00:57,920 --> 03:01:03,040
final here or the keyword final sorry
3076
03:01:00,000 --> 03:01:05,520
the keyword comms as you can see here
3077
03:01:09,680 --> 03:01:15,520
what we want to do here then is to
3078
03:01:25,040 --> 03:01:28,800
and actually what we're going to do is
3079
03:01:28,799 --> 03:01:34,159
the first name is null all right
3080
03:01:31,600 --> 03:01:36,318
so first name middle made bar and last
3081
03:01:38,239 --> 03:01:41,199
if you have these values and you want to
3082
03:01:41,200 --> 03:01:44,479
i mean right now you can actually see
3083
03:01:43,200 --> 03:01:46,240
the values that you put here but
3084
03:01:44,478 --> 03:01:48,159
sometimes these values are passed to
3085
03:01:46,239 --> 03:01:49,840
your function so you don't know what
3086
03:01:48,159 --> 03:01:52,079
they are right now you can see what they
3087
03:01:49,840 --> 03:01:54,559
are so it's easy if i told you pick the
3088
03:01:52,079 --> 03:01:56,639
first non-null value then you would say
3089
03:01:54,559 --> 03:01:58,079
middle name because you can see it
3090
03:01:56,639 --> 03:02:00,639
however if you had a function for
3091
03:01:58,079 --> 03:02:03,120
instance test here that accepted those
3092
03:02:10,879 --> 03:02:15,519
you wouldn't know what those values are
3093
03:02:13,680 --> 03:02:17,439
or you cannot make an assumption about
3094
03:02:15,520 --> 03:02:20,640
what those values are except that they
3095
03:02:17,439 --> 03:02:22,318
are nullable or optional strings so
3096
03:02:20,639 --> 03:02:24,799
i hope that you get what i'm trying to
3097
03:02:22,318 --> 03:02:27,840
say now if someone told you to pick the
3098
03:02:27,840 --> 03:02:33,840
one way to do that is like the old way
3099
03:02:30,079 --> 03:02:34,639
of doing that is to say for um
3100
03:02:39,120 --> 03:02:45,760
um then you would say oh i again okay i
3101
03:02:51,359 --> 03:02:56,800
and then you say okay if first name
3102
03:02:54,000 --> 03:02:58,799
isn't null then we pick it otherwise
3103
03:03:05,200 --> 03:03:12,079
middle name is the first nominal value
3104
03:03:07,520 --> 03:03:13,120
and then else if again so last name is
3105
03:03:13,120 --> 03:03:17,279
then you would print the same thing so
3106
03:03:24,959 --> 03:03:29,278
very verbose in the in the way it is
3107
03:03:29,279 --> 03:03:32,800
there is a better way of doing this and
3108
03:03:32,799 --> 03:03:36,719
uh question mark question mark operator
3109
03:03:36,719 --> 03:03:39,760
dart which is available in some other
3110
03:03:38,159 --> 03:03:40,879
programming languages such as swift as
3111
03:03:40,879 --> 03:03:45,119
so the way to do that then is you would
3112
03:03:43,200 --> 03:03:46,319
want to pick the first non-null value so
3113
03:03:47,279 --> 03:03:53,040
or const first non-null value
3114
03:03:51,279 --> 03:03:54,479
and you would say that's equal to first
3115
03:03:54,478 --> 03:03:58,398
or or so this is kind of like question
3116
03:04:00,639 --> 03:04:04,000
and then question mark question mark
3117
03:04:04,959 --> 03:04:08,559
and i mean we're getting a warning here
3118
03:04:06,799 --> 03:04:11,840
just because dark understands already
3119
03:04:08,559 --> 03:04:13,600
that this middle name although a
3120
03:04:11,840 --> 03:04:15,840
so it's this is although an optional
3121
03:04:19,120 --> 03:04:23,120
so and that warning goes away but i mean
3122
03:04:21,680 --> 03:04:24,720
it would probably be cleaner if we
3123
03:04:23,120 --> 03:04:26,319
actually pass these as parameters into
3124
03:04:24,719 --> 03:04:28,000
this function so we don't get these
3125
03:04:28,000 --> 03:04:32,079
but the way the question mark question
3126
03:04:30,318 --> 03:04:34,318
mark operator is working is that it says
3127
03:04:32,079 --> 03:04:36,318
it is an infix operator just so you know
3128
03:04:34,318 --> 03:04:38,159
in in from chapter four you know an
3129
03:04:36,318 --> 03:04:38,959
infix operator is an operator that has
3130
03:04:40,000 --> 03:04:43,359
and one on each on each side the right
3131
03:04:43,359 --> 03:04:46,880
so in this case on the right side we
3132
03:04:45,279 --> 03:04:48,640
have middle name and on the left side we
3133
03:04:46,879 --> 03:04:51,358
have first name so what this operator
3134
03:04:48,639 --> 03:04:52,959
does it says if the value on my left
3135
03:04:52,959 --> 03:04:56,559
i'm gonna pick the value on my right
3136
03:04:56,559 --> 03:05:01,039
and let's now in this case say okay
3137
03:04:59,120 --> 03:05:03,600
middle name is not now so what it does
3138
03:05:01,040 --> 03:05:04,960
it says first name or you null yeah
3139
03:05:03,600 --> 03:05:07,040
you're not then i'm gonna go to the
3140
03:05:04,959 --> 03:05:09,119
right side middle name are you no no i'm
3141
03:05:07,040 --> 03:05:10,960
not no then it's gonna pick that and the
3142
03:05:10,959 --> 03:05:16,559
statement is not gonna be executed
3143
03:05:14,159 --> 03:05:18,959
however if middle name was also known in
3144
03:05:16,559 --> 03:05:21,278
this case then what happens is that it
3145
03:05:18,959 --> 03:05:22,239
begins from the left is a first name or
3146
03:05:22,239 --> 03:05:26,879
yes middle name or you know yes so this
3147
03:05:32,398 --> 03:05:38,000
and then so this entire operation will
3148
03:05:34,879 --> 03:05:39,679
let me know so it says okay now i have
3149
03:05:39,680 --> 03:05:44,318
left left hand side are you know yeah we
3150
03:05:41,439 --> 03:05:45,760
know that this entire thing was no
3151
03:05:44,318 --> 03:05:46,559
and then it says right hand side are you
3152
03:05:46,559 --> 03:05:51,278
nope i'm bass then it takes pass so
3153
03:05:51,279 --> 03:05:54,880
this question mark question mark
3154
03:05:52,639 --> 03:05:56,879
operator is a null aware operator that
3155
03:05:54,879 --> 03:05:57,759
picks either the left side or the right
3156
03:05:57,760 --> 03:06:04,398
whichever one is not null first in that
3157
03:06:01,200 --> 03:06:06,159
order so left side are you null
3158
03:06:04,398 --> 03:06:07,760
if you're null i go to the right side
3159
03:06:10,478 --> 03:06:15,278
so keep that in mind it is a very handy
3160
03:06:15,279 --> 03:06:20,800
shorten your code quite a lot all right
3161
03:06:18,559 --> 03:06:22,719
now if we then go in here and say first
3162
03:06:20,799 --> 03:06:24,799
non-null value you can see it actually
3163
03:06:26,879 --> 03:06:30,959
if these were parameters so if we said
3164
03:06:30,959 --> 03:06:36,000
and then string last name sorry middle
3165
03:06:37,760 --> 03:06:45,520
they were not provided to us like that
3166
03:06:41,439 --> 03:06:45,520
converter was okay and then we say final
3167
03:06:46,719 --> 03:06:51,760
if we say first non-null value in this
3168
03:06:49,359 --> 03:06:53,359
case since it is a normal case
3169
03:06:53,359 --> 03:06:58,318
where the dart compiler isn't working
3170
03:06:59,680 --> 03:07:03,920
it cannot resolve this to a constant
3171
03:07:02,398 --> 03:07:05,519
value at the moment so it says okay
3172
03:07:03,920 --> 03:07:07,040
there are three optional values i have
3173
03:07:07,760 --> 03:07:11,840
i'm gonna do my best to pick the first
3174
03:07:09,600 --> 03:07:14,640
nominal value depending on i mean based
3175
03:07:14,639 --> 03:07:17,680
however i may not be able to solve this
3176
03:07:17,680 --> 03:07:22,079
the final result here as you'll see is
3177
03:07:19,920 --> 03:07:24,079
and it's an optional string meaning that
3178
03:07:22,079 --> 03:07:26,239
well i may not be able to resolve this
3179
03:07:24,079 --> 03:07:30,639
meaning that this entire operation on
3180
03:07:26,239 --> 03:07:32,559
top on line 9 may result in a null
3181
03:07:32,559 --> 03:07:36,559
sorry about that sorry about my voice
3182
03:07:36,559 --> 03:07:41,840
that is the question mark question mark
3183
03:07:38,879 --> 03:07:45,358
operator so i'm just gonna mark that
3184
03:07:41,840 --> 03:07:47,600
that we talked about it in my notes
3185
03:07:53,840 --> 03:07:59,439
let's talk about the next topic uh which
3186
03:07:56,559 --> 03:08:01,199
is the null aware assignment operator i
3187
03:07:59,439 --> 03:08:02,639
think that's that's this actual official
3188
03:08:02,639 --> 03:08:07,119
um this operator is very similar to the
3189
03:08:05,200 --> 03:08:09,279
question mark question mark operator in
3190
03:08:15,279 --> 03:08:20,479
it's going to do its best um and let's
3191
03:08:17,359 --> 03:08:22,479
have a look at an example let's just say
3192
03:08:23,359 --> 03:08:27,040
and i'm gonna say actually let's just
3193
03:08:28,159 --> 03:08:33,439
and name is first name so we begin we
3194
03:08:31,040 --> 03:08:35,760
say that we have an optional name
3195
03:08:33,439 --> 03:08:37,520
and we begin by assigning first name to
3196
03:08:37,520 --> 03:08:41,439
this name might at the moment depending
3197
03:08:39,840 --> 03:08:42,318
on the value of first name it may be
3198
03:08:43,680 --> 03:08:48,960
if that is null you may want to assign
3199
03:08:46,478 --> 03:08:50,478
another value to it all right
3200
03:08:48,959 --> 03:08:53,759
and then you can do that with this
3201
03:08:50,478 --> 03:08:55,599
operator you would say last name
3202
03:08:55,600 --> 03:09:01,439
both trying to oh is it this yes it is
3203
03:08:58,719 --> 03:09:03,438
equal to so i actually should change
3204
03:09:07,520 --> 03:09:13,680
yes and i'm going to bring it up again
3205
03:09:09,439 --> 03:09:13,680
so that it is actually correct let's say
3206
03:09:31,600 --> 03:09:34,880
i'm actually a bit unsure right now so
3207
03:09:33,359 --> 03:09:35,840
let's have a look actually what this
3208
03:09:37,359 --> 03:09:41,040
and it's three positional and then we
3209
03:09:48,478 --> 03:09:51,358
middle name is bar and last name is bass
3210
03:09:51,359 --> 03:09:54,800
to be honest with you i mean this is
3211
03:09:52,799 --> 03:09:56,799
quite a lot for me as well it is
3212
03:09:56,799 --> 03:10:00,959
syntax of the programming language it is
3213
03:09:58,959 --> 03:10:02,879
something that you will kind of need to
3214
03:10:00,959 --> 03:10:05,358
live with you're not gonna memorize this
3215
03:10:02,879 --> 03:10:07,278
all just in in your head all the time of
3216
03:10:05,359 --> 03:10:09,760
course like the main parts of it you're
3217
03:10:07,279 --> 03:10:12,880
gonna you're gonna remember but
3218
03:10:09,760 --> 03:10:14,559
uh not all of it so and you can see for
3219
03:10:12,879 --> 03:10:16,719
me as well i'm just like at the moment
3220
03:10:16,719 --> 03:10:21,519
so i'm gonna test that so i'm to begin
3221
03:10:18,639 --> 03:10:24,478
with we say name is first name and
3222
03:10:24,478 --> 03:10:28,799
actually let's just say middle name
3223
03:10:27,120 --> 03:10:30,560
name here then use middle name and then
3224
03:10:30,559 --> 03:10:34,238
and i can see it says bar here so it's
3225
03:10:32,639 --> 03:10:35,680
actually question mark question mark
3226
03:10:37,040 --> 03:10:42,000
so i actually maybe need to edit this
3227
03:10:40,000 --> 03:10:45,359
text one more time so i'm just going to
3228
03:10:42,000 --> 03:10:46,639
say question mark question mark equal
3229
03:10:45,359 --> 03:10:48,399
bring it up because i think question
3230
03:10:46,639 --> 03:10:49,840
mark equal is not going to work an equal
3231
03:10:48,398 --> 03:10:51,840
question mark isn't going to work either
3232
03:10:49,840 --> 03:10:53,200
it's not a value it's not a valid syntax
3233
03:10:51,840 --> 03:10:54,478
a question mark question mark equals
3234
03:10:55,279 --> 03:10:58,720
what this operator at the moment is
3235
03:10:56,799 --> 03:11:00,398
doing it says that i'm gonna take the
3236
03:10:58,719 --> 03:11:02,959
value on the left hand side and check
3237
03:11:00,398 --> 03:11:04,959
whether it is null or not if it is null
3238
03:11:02,959 --> 03:11:08,639
then i'm gonna assign the value on the
3239
03:11:04,959 --> 03:11:11,438
right hand side to the left hand side
3240
03:11:08,639 --> 03:11:12,398
if it is not null i'm gonna leave it
3241
03:11:14,318 --> 03:11:17,439
at the moment first name as you saw here
3242
03:11:17,439 --> 03:11:21,120
the first parameter that we passed here
3243
03:11:19,760 --> 03:11:23,200
so what it says it says okay i'm going
3244
03:11:21,120 --> 03:11:24,000
to check then for middle name
3245
03:11:24,000 --> 03:11:28,398
if name is null and it is null and then
3246
03:11:26,318 --> 03:11:30,318
it says okay middle name are you
3247
03:11:28,398 --> 03:11:32,559
like presenter and i will assign that
3248
03:11:34,799 --> 03:11:38,799
basically it will be bar which is the
3249
03:11:46,639 --> 03:11:52,159
right we could have another operator
3250
03:11:49,120 --> 03:11:54,239
here that says okay if after taking the
3251
03:11:52,159 --> 03:11:56,398
middle name we are still null then take
3252
03:11:58,799 --> 03:12:03,358
and you can see bass gets printed to the
3253
03:12:00,559 --> 03:12:04,959
screen and that is because because bass
3254
03:12:03,359 --> 03:12:06,800
is the last parameter that we're
3255
03:12:10,159 --> 03:12:15,039
so you can see how like if i then went
3256
03:12:12,959 --> 03:12:17,278
here and actually said the first name is
3257
03:12:15,040 --> 03:12:18,560
bar then you will see that that will be
3258
03:12:17,279 --> 03:12:20,238
the value that gets printed to the
3259
03:12:23,600 --> 03:12:28,079
name or first name which is bar got
3260
03:12:25,760 --> 03:12:30,960
assigned to name so it is an optional
3261
03:12:28,079 --> 03:12:32,799
string but it has a value which is bar
3262
03:12:30,959 --> 03:12:35,599
then when you come to this line number
3263
03:12:32,799 --> 03:12:38,478
nine then you're telling dart look if
3264
03:12:35,600 --> 03:12:40,318
name is null then assign middle name to
3265
03:12:40,318 --> 03:12:44,478
name isn't null it is bar so i'm not
3266
03:12:43,200 --> 03:12:45,920
going to assign middle name to it and
3267
03:12:44,478 --> 03:12:48,478
then it goes to line number 10 and does
3268
03:12:45,920 --> 03:12:50,559
the exact same thing all right
3269
03:12:48,478 --> 03:12:53,679
so that is like the null aware
3270
03:12:55,600 --> 03:12:58,318
i personally i mean to be honest with
3271
03:12:58,318 --> 03:13:02,719
as you could as you could kind of guess
3272
03:13:00,000 --> 03:13:03,600
i don't use this operator so often it is
3273
03:13:03,600 --> 03:13:07,760
and i have no shame in saying that
3274
03:13:05,439 --> 03:13:10,159
pretty much in none of my programs have
3275
03:13:07,760 --> 03:13:11,520
i had to use this so it is present for
3276
03:13:11,520 --> 03:13:15,120
use it is available if you want to use
3277
03:13:15,120 --> 03:13:18,960
don't be like me but try to remember the
3278
03:13:17,200 --> 03:13:20,159
syntax this question mark question mark
3279
03:13:22,478 --> 03:13:26,719
and i'm gonna actually fix that in my
3280
03:13:24,959 --> 03:13:28,879
notes as well that it is question mark
3281
03:13:31,439 --> 03:13:35,840
and i'm going to check it in the notes
3282
03:13:39,600 --> 03:13:44,960
a little bit about conditional method or
3283
03:13:42,639 --> 03:13:47,039
property access or conditional
3284
03:13:48,398 --> 03:13:52,478
as we talked about in the previous
3285
03:13:49,920 --> 03:13:54,639
chapter with dart as like many other
3286
03:13:52,478 --> 03:13:56,478
programming languages you can
3287
03:13:56,478 --> 03:14:02,159
in order to access or drill down inside
3288
03:14:00,238 --> 03:14:04,318
properties and methods or functions
3289
03:14:02,159 --> 03:14:07,279
inside other objects as we saw for
3290
03:14:07,279 --> 03:14:12,079
or lists in dart you can say
3291
03:14:10,398 --> 03:14:14,959
i have a list and then you want to get
3292
03:14:12,079 --> 03:14:18,000
its length then you would say
3293
03:14:14,959 --> 03:14:20,000
the name of the list dot links and that
3294
03:14:18,000 --> 03:14:23,120
drills down inside that list and gets
3295
03:14:23,120 --> 03:14:28,319
however as you saw also earlier in this
3296
03:14:25,359 --> 03:14:31,040
chapter in chapter number five
3297
03:14:28,318 --> 03:14:33,119
even lists or pretty much any data type
3298
03:14:31,040 --> 03:14:36,479
in dart can also be nullable
3299
03:14:36,478 --> 03:14:42,398
properties of a null object so let's
3300
03:14:42,398 --> 03:14:46,478
let's say i'm gonna i'm gonna actually
3301
03:14:44,159 --> 03:14:48,318
delete these properties uh the
3302
03:14:46,478 --> 03:14:50,398
parameters that come here to our
3303
03:14:50,398 --> 03:14:56,398
and i'm to say and i'm going to go down
3304
03:14:52,559 --> 03:14:59,199
here and remove these parameters as well
3305
03:14:56,398 --> 03:15:02,318
and in here let's just create an
3306
03:15:02,318 --> 03:15:07,278
not optional list of optional strings
3307
03:15:04,799 --> 03:15:09,278
but at just an optional list of valid
3308
03:15:07,279 --> 03:15:12,479
strings okay so i'm just going to say
3309
03:15:09,279 --> 03:15:14,079
list of strings as an option i'm sorry
3310
03:15:12,478 --> 03:15:15,278
an optional list and i'm just going to
3311
03:15:15,279 --> 03:15:19,520
and that is equal to let's just say at
3312
03:15:21,120 --> 03:15:28,560
in here if you try to say final length
3313
03:15:24,238 --> 03:15:29,680
of names or number of names is names
3314
03:15:31,359 --> 03:15:37,279
if you then look at the data type here i
3315
03:15:34,398 --> 03:15:38,398
mean we could actually say this is null
3316
03:15:39,760 --> 03:15:46,079
here dart actually is allowed to
3317
03:15:42,719 --> 03:15:49,199
or is able to give you an error
3318
03:15:46,079 --> 03:15:51,359
knowing that this list it is null at the
3319
03:15:49,200 --> 03:15:52,800
moment however if you accept it i think
3320
03:15:51,359 --> 03:15:55,600
it's actually better that we accept this
3321
03:15:52,799 --> 03:15:58,238
value as a parameter so that dart
3322
03:15:55,600 --> 03:15:59,840
analyzer cannot be too smart about like
3323
03:15:58,238 --> 03:16:03,439
making assumptions about what this
3324
03:16:04,639 --> 03:16:08,799
analyzer is telling you it cannot be
3325
03:16:06,719 --> 03:16:11,920
unconditionally accessed because the
3326
03:16:08,799 --> 03:16:13,679
receiver can be null and that means yeah
3327
03:16:11,920 --> 03:16:15,359
exactly as it says it says names can
3328
03:16:13,680 --> 03:16:16,639
mean all i don't know if it's not right
3329
03:16:18,959 --> 03:16:23,278
so how do you access that one way to do
3330
03:16:21,359 --> 03:16:25,359
that like the old way of doing that is
3331
03:16:35,439 --> 03:16:41,520
uh in x okay so that tells dart that
3332
03:16:39,439 --> 03:16:42,639
look i'm actually checking for null
3333
03:16:42,639 --> 03:16:48,079
um or i'm checking that this list is not
3334
03:16:50,238 --> 03:16:55,359
then i would access its length property
3335
03:16:52,799 --> 03:16:56,719
and this is kind of it's called type
3336
03:16:59,040 --> 03:17:02,239
so in this case you can see on line
3337
03:17:02,238 --> 03:17:06,959
or now if i go and create a new line on
3338
03:17:04,879 --> 03:17:08,079
number online number eight and i say
3339
03:17:15,200 --> 03:17:21,520
you can see it is um it is typed as the
3340
03:17:17,920 --> 03:17:23,520
same but it is promoted to not being
3341
03:17:21,520 --> 03:17:25,760
null because you've already checked for
3342
03:17:23,520 --> 03:17:27,520
it because if you remove these lines of
3343
03:17:25,760 --> 03:17:29,680
code you can see now that you get an
3344
03:17:27,520 --> 03:17:31,439
error the exact same line but if you
3345
03:17:29,680 --> 03:17:34,398
check first for null and you don't get
3346
03:17:31,439 --> 03:17:35,840
the error it's a type promotion okay
3347
03:17:34,398 --> 03:17:36,879
so this is kind of like the old way of
3348
03:17:38,159 --> 03:17:42,639
so let's say that you want to have you
3349
03:17:40,879 --> 03:17:45,599
want to extract the length so you say
3350
03:17:45,600 --> 03:17:49,120
right you create the variable but you
3351
03:17:49,120 --> 03:17:53,520
when you say if names is not null then
3352
03:17:51,359 --> 03:17:56,720
the length is equal to name's length
3353
03:17:53,520 --> 03:17:58,720
otherwise length is zero okay so this is
3354
03:18:05,040 --> 03:18:09,040
trying to be smart as well and say okay
3355
03:18:06,799 --> 03:18:11,278
i don't need this else statement if i
3356
03:18:11,279 --> 03:18:14,880
and by default is zero and yeah you
3357
03:18:13,200 --> 03:18:17,040
would be right because length is zero by
3358
03:18:14,879 --> 03:18:18,879
default and then if names is not null
3359
03:18:17,040 --> 03:18:20,720
then you say okay length is equal to
3360
03:18:20,719 --> 03:18:25,199
however there's a better way of doing
3361
03:18:25,200 --> 03:18:29,760
quest dot question mark i believe or the
3362
03:18:27,600 --> 03:18:33,439
question mark that actually it is yeah
3363
03:18:29,760 --> 03:18:37,200
operator which conditionally executes
3364
03:18:33,439 --> 03:18:39,840
or invokes a method or a property inside
3365
03:18:37,200 --> 03:18:40,960
an optional if that optional value is
3366
03:18:40,959 --> 03:18:45,759
i'm going to show you how to do that so
3367
03:18:46,318 --> 03:18:50,559
is names and then you would put question
3368
03:18:48,398 --> 03:18:52,079
mark dot and then you would say links
3369
03:18:50,559 --> 03:18:54,079
and you would see this this code like
3370
03:18:52,079 --> 03:18:55,920
being executed without a problem
3371
03:18:54,079 --> 03:18:58,639
however if you go here you would see
3372
03:18:55,920 --> 03:19:00,318
that length is an optional value it's an
3373
03:19:00,318 --> 03:19:05,680
you may be like okay how do i solve that
3374
03:19:13,680 --> 03:19:18,079
null meaning that if it's names if the
3375
03:19:15,760 --> 03:19:20,559
names list is null and we can't extract
3376
03:19:18,079 --> 03:19:23,120
the length then i want this value to be
3377
03:19:20,559 --> 03:19:24,719
set to null and that is using our
3378
03:19:23,120 --> 03:19:27,040
question mark question mark operator
3379
03:19:24,719 --> 03:19:29,278
that we talked about the null aware
3380
03:19:27,040 --> 03:19:30,960
operator that we talked about earlier
3381
03:19:30,959 --> 03:19:35,039
so you could just do this you would say
3382
03:19:35,040 --> 03:19:40,319
if the names list is present meaning
3383
03:19:38,000 --> 03:19:43,520
that its value is not null then grab its
3384
03:19:40,318 --> 03:19:45,600
length otherwise take the value of 0 and
3385
03:19:43,520 --> 03:19:47,680
assign it to length and if you go to
3386
03:19:45,600 --> 03:19:49,920
line number nine now and i say length so
3387
03:19:53,279 --> 03:19:59,040
is not an optional integer anymore
3388
03:19:57,040 --> 03:20:00,960
so you could do the same thing as well
3389
03:20:00,959 --> 03:20:04,159
and you could do the same thing with
3390
03:20:02,398 --> 03:20:06,719
properties and you could also do it for
3391
03:20:04,159 --> 03:20:08,639
functions so you can say names add
3392
03:20:08,639 --> 03:20:12,879
right so you see this is a function
3393
03:20:10,959 --> 03:20:15,039
called add and then we're adding the
3394
03:20:16,600 --> 03:20:21,120
unconditionally invoke this function on
3395
03:20:27,760 --> 03:20:34,079
that is like a very very important
3396
03:20:34,079 --> 03:20:38,398
learning about optionals in dart how you
3397
03:20:40,478 --> 03:20:45,760
as you will see and we'll talk about it
3398
03:20:47,680 --> 03:20:52,318
many cases where you have to
3399
03:20:52,639 --> 03:20:58,000
take into consideration all values and
3400
03:20:56,719 --> 03:21:00,478
especially if you're working with
3401
03:21:00,478 --> 03:21:03,760
the library cannot make too many
3402
03:21:02,079 --> 03:21:06,478
assumptions and your code is dependent
3403
03:21:06,478 --> 03:21:10,318
you will have to take into consideration
3404
03:21:08,079 --> 03:21:12,398
okay the absence of a value means that i
3405
03:21:10,318 --> 03:21:13,600
personally have to like take some
3406
03:21:13,600 --> 03:21:17,760
decisions in my code consciously in
3407
03:21:15,520 --> 03:21:19,840
order to execute bits and pieces of code
3408
03:21:17,760 --> 03:21:22,639
depending on the absence or presence of
3409
03:21:19,840 --> 03:21:23,760
the value so try to use these optional
3410
03:21:23,760 --> 03:21:27,200
null aware operators that i taught you
3411
03:21:27,200 --> 03:21:31,760
um the null aware um basically like the
3412
03:21:30,079 --> 03:21:33,520
decision making on to pick like the
3413
03:21:31,760 --> 03:21:34,719
infix operator that tells you whether
3414
03:21:33,520 --> 03:21:36,479
the left hand side or the right hand
3415
03:21:34,719 --> 03:21:38,478
side depending on which one is not null
3416
03:21:36,478 --> 03:21:40,799
first it picks that one okay
3417
03:21:38,478 --> 03:21:42,000
that offer is very important and the
3418
03:21:42,000 --> 03:21:46,159
all over invocation operator which is
3419
03:21:44,159 --> 03:21:48,719
here so you say some object which may be
3420
03:21:46,159 --> 03:21:51,279
null then do something on it
3421
03:21:51,279 --> 03:21:54,399
operator which is a null aware
3422
03:21:52,559 --> 03:21:56,478
assignment operator that assigns the
3423
03:21:54,398 --> 03:21:58,318
value on the right to the variable on
3424
03:21:56,478 --> 03:22:00,879
the left should the variable on the left
3425
03:21:58,318 --> 03:22:04,238
be null all right so these are very very
3426
03:22:07,600 --> 03:22:11,920
now that we've talked about that i'm
3427
03:22:09,600 --> 03:22:14,720
gonna take that in my notes that that is
3428
03:22:18,639 --> 03:22:24,000
very very good official documentation
3429
03:22:21,200 --> 03:22:25,840
about null safety in dart so i'm gonna
3430
03:22:24,000 --> 03:22:28,079
bring up this documentation on a
3431
03:22:28,079 --> 03:22:35,120
and then i'm gonna bring it up here so
3432
03:22:30,478 --> 03:22:36,159
you can actually see as well all right
3433
03:22:36,159 --> 03:22:39,359
you can see here it says understanding
3434
03:22:37,680 --> 03:22:40,800
all safety and this is great great
3435
03:22:40,799 --> 03:22:49,599
about how null safety in dart works
3436
03:22:45,120 --> 03:22:51,520
as you can see a lot of examples um
3437
03:22:49,600 --> 03:22:53,920
i mean it talks about like from the
3438
03:22:56,079 --> 03:23:01,840
uh and you can see here null is at the
3439
03:22:59,040 --> 03:23:03,680
level of object so it's not novel itself
3440
03:23:03,680 --> 03:23:07,359
so you have lists and doubles and
3441
03:23:05,359 --> 03:23:10,318
integers here but null sits on top for
3442
03:23:07,359 --> 03:23:13,279
itself it's kind of like the absence
3443
03:23:14,079 --> 03:23:17,120
so there's lots of examples in in this
3444
03:23:17,120 --> 03:23:20,800
highly encourage you to have a look at
3445
03:23:18,879 --> 03:23:22,719
it some things you may not understand
3446
03:23:20,799 --> 03:23:24,879
for instance like this one you will
3447
03:23:22,719 --> 03:23:27,358
understand easily because it says there
3448
03:23:24,879 --> 03:23:29,519
is something called a thing like a class
3449
03:23:27,359 --> 03:23:31,040
but we haven't talked about classes yet
3450
03:23:31,040 --> 03:23:35,279
name parameter name here in this
3451
03:23:32,799 --> 03:23:37,199
function called showgizmo is called
3452
03:23:35,279 --> 03:23:40,640
thing and you can see it is
3453
03:23:37,200 --> 03:23:43,600
conditionally accessing a property on
3454
03:23:44,398 --> 03:23:50,879
and then if that property in itself is
3455
03:23:47,600 --> 03:23:53,439
null it conditionally access that as
3456
03:23:50,879 --> 03:23:55,119
well so if this property is nullable and
3457
03:23:53,439 --> 03:23:57,520
then it's accessing another property
3458
03:23:55,120 --> 03:23:59,760
inside that nullable property
3459
03:23:57,520 --> 03:24:01,439
if it's not null so it's i mean it's a
3460
03:23:59,760 --> 03:24:02,800
great way you can chain them as you can
3461
03:24:02,799 --> 03:24:08,159
then so if this thing is not null then
3462
03:24:06,159 --> 03:24:10,478
conditionally accesses this property on
3463
03:24:08,159 --> 03:24:11,920
that so it's it's beautiful i mean and
3464
03:24:10,478 --> 03:24:14,799
this thing is available on many other
3465
03:24:11,920 --> 03:24:16,799
languages like rust and swift as well so
3466
03:24:14,799 --> 03:24:17,840
it's nothing new it but it is kind of
3467
03:24:17,840 --> 03:24:21,840
uh such an important topic to understand
3468
03:24:20,079 --> 03:24:23,840
in dart that i think you shouldn't just
3469
03:24:21,840 --> 03:24:27,840
skim over it so you should just really
3470
03:24:28,639 --> 03:24:34,478
all right um we've now talked about null
3471
03:24:32,159 --> 03:24:36,639
value so i'm going to take that in our
3472
03:24:36,639 --> 03:24:42,639
now i think for chapter 5 five
3473
03:24:40,398 --> 03:24:44,000
this information is enough so that we
3474
03:24:47,120 --> 03:24:50,720
and in the next chapter chapter number
3475
03:24:49,200 --> 03:24:53,680
six we're going to talk about some
3476
03:24:53,680 --> 03:24:56,880
this is like chapter six is going to be
3477
03:24:56,879 --> 03:25:01,759
as i can see my notes are pressing in
3478
03:25:01,760 --> 03:25:05,040
topics such as enumerations classes
3479
03:25:05,040 --> 03:25:09,439
custom operators constructors factory
3480
03:25:09,439 --> 03:25:16,720
i mean inheritance and stop classing
3481
03:25:12,079 --> 03:25:16,719
apps subclassing abstract classes so
3482
03:25:18,719 --> 03:25:22,719
depending on what background you have
3483
03:25:20,879 --> 03:25:25,519
you may be like a product owner or
3484
03:25:22,719 --> 03:25:27,679
product designer a ux or whatever you
3485
03:25:25,520 --> 03:25:29,040
may not have like a software engineering
3486
03:25:32,920 --> 03:25:38,719
object-oriented programming language it
3487
03:25:35,200 --> 03:25:41,439
means that things in dart are objects an
3488
03:25:38,719 --> 03:25:44,318
object is an instance of a class as
3489
03:25:41,439 --> 03:25:45,760
we'll talk about in the next chapter so
3490
03:25:45,760 --> 03:25:49,600
for you to understand dart and how these
3491
03:25:47,840 --> 03:25:52,398
things work for instance we've talked
3492
03:25:49,600 --> 03:25:53,439
about lists and actually typing dots in
3493
03:25:52,398 --> 03:25:55,199
front of the name of the list and
3494
03:25:53,439 --> 03:25:57,200
getting its lengths but you may not
3495
03:25:55,200 --> 03:25:59,439
really know how that works so in order
3496
03:25:57,200 --> 03:26:01,600
to understand all those things what that
3497
03:25:59,439 --> 03:26:03,600
dot means you need to understand what
3498
03:26:01,600 --> 03:26:05,840
objects are in order to understand
3499
03:26:03,600 --> 03:26:08,000
objects you need to know what classes
3500
03:26:05,840 --> 03:26:09,680
are and when you understand classes then
3501
03:26:08,000 --> 03:26:11,439
you will learn about inheritance and
3502
03:26:09,680 --> 03:26:14,159
then you will talk we'll talk about
3503
03:26:11,439 --> 03:26:16,479
abstract classes properties static
3504
03:26:16,478 --> 03:26:19,679
what we're going to talk about in
3505
03:26:19,680 --> 03:26:24,720
important that i believe that every dart
3506
03:26:21,760 --> 03:26:26,639
developer needs to know about this and
3507
03:26:24,719 --> 03:26:30,238
we're learning all of these things to be
3508
03:26:26,639 --> 03:26:32,318
become good at doing flutter um so
3509
03:26:30,238 --> 03:26:34,159
uh although you can go and write like
3510
03:26:32,318 --> 03:26:36,079
servers or maybe server applications
3511
03:26:34,159 --> 03:26:38,079
with dart or you could write command
3512
03:26:36,079 --> 03:26:39,120
line applications with dart but these
3513
03:26:39,120 --> 03:26:43,279
dart is primarily used for writing
3514
03:26:41,439 --> 03:26:44,159
flutter applications and i don't have
3515
03:26:44,159 --> 03:26:48,318
data to prove that but i can see for
3516
03:26:46,478 --> 03:26:50,238
myself when i'm in the community that
3517
03:26:48,318 --> 03:26:52,159
most people are using dart primarily to
3518
03:26:50,238 --> 03:26:54,000
write flutter applications so we're
3519
03:26:52,159 --> 03:26:56,559
doing all of this to learn more about
3520
03:26:54,000 --> 03:26:58,159
flutter and i highly recommend that you
3521
03:26:56,559 --> 03:26:59,680
don't skip these chapters where we're
3522
03:26:58,159 --> 03:27:00,398
talking about art especially if you're
3523
03:27:00,398 --> 03:27:04,559
to flutter development so with that said
3524
03:27:02,639 --> 03:27:07,039
let's leave this chapter the way it is
3525
03:27:04,559 --> 03:27:08,799
right now chapter number five we're done
3526
03:27:07,040 --> 03:27:10,960
with that let's go to chapter number six
3527
03:27:08,799 --> 03:27:12,478
and learn about dart enumerations and
3528
03:27:12,478 --> 03:27:16,000
welcome to chapter six of this flutter
3529
03:27:16,000 --> 03:27:21,120
in this chapter we're going to talk
3530
03:27:17,279 --> 03:27:23,760
about uh dart enumerations and objects
3531
03:27:21,120 --> 03:27:26,079
and these are some of my favorite things
3532
03:27:26,959 --> 03:27:31,839
in most programming languages actually
3533
03:27:31,840 --> 03:27:35,439
if you follow along with the other
3534
03:27:33,439 --> 03:27:37,040
chapters then you should have a working
3535
03:27:35,439 --> 03:27:39,600
dart project set up now and maybe
3536
03:27:37,040 --> 03:27:41,680
running in an emulator or a simulator so
3537
03:27:39,600 --> 03:27:44,000
that you have the ability to press
3538
03:27:41,680 --> 03:27:46,398
command s on mac or control s in linux
3539
03:27:44,000 --> 03:27:48,318
and windows in order to rerun your
3540
03:27:46,398 --> 03:27:50,398
project so without you having to pretty
3541
03:27:50,398 --> 03:27:54,159
let's then get started i'm just going to
3542
03:27:52,238 --> 03:27:55,439
make that assumption that you're already
3543
03:28:02,959 --> 03:28:08,079
enumerations and i'm gonna bring up
3544
03:28:05,520 --> 03:28:09,920
the project from the previous chapter
3545
03:28:08,079 --> 03:28:12,079
let's just make sure that it's on the
3546
03:28:09,920 --> 03:28:14,799
screen so you can easily see it
3547
03:28:12,079 --> 03:28:16,398
now i'm going to go and to this list
3548
03:28:14,799 --> 03:28:19,358
function that we created remove the only
3549
03:28:16,398 --> 03:28:21,278
parameter there and remove that as well
3550
03:28:19,359 --> 03:28:22,479
so if i press command s now nothing
3551
03:28:21,279 --> 03:28:24,720
should happen on the screen because we
3552
03:28:22,478 --> 03:28:26,879
don't have any functionality in tests so
3553
03:28:24,719 --> 03:28:28,799
let's talk about enumerations and what
3554
03:28:26,879 --> 03:28:31,119
they actually are as you can see here
3555
03:28:28,799 --> 03:28:32,559
animations are named list of related
3556
03:28:37,200 --> 03:28:43,279
making a string written programmatically
3557
03:28:40,959 --> 03:28:46,238
so that it becomes an entity
3558
03:28:53,279 --> 03:28:59,040
and you would also say khan's other name
3559
03:28:56,639 --> 03:29:01,519
that's also foo they're both the same
3560
03:28:59,040 --> 03:29:02,800
string but they're not the same identity
3561
03:29:02,799 --> 03:29:06,318
i mean internally actually in terms of
3562
03:29:04,719 --> 03:29:07,840
const i don't want to go too much into
3563
03:29:06,318 --> 03:29:09,519
the comp how the compiler actually works
3564
03:29:07,840 --> 03:29:10,639
but they're going to be going to be the
3565
03:29:10,639 --> 03:29:14,799
but i mean that you've written it twice
3566
03:29:12,559 --> 03:29:16,559
so it's not the exact same thing you
3567
03:29:16,559 --> 03:29:20,559
so an enumeration try to tries to
3568
03:29:22,478 --> 03:29:27,278
a value has a name that can be
3569
03:29:24,719 --> 03:29:28,398
programmatically referred to so
3570
03:29:28,398 --> 03:29:33,519
um cons sorry enum and that's a key word
3571
03:29:32,000 --> 03:29:35,200
in dart that's how you create an
3572
03:29:35,200 --> 03:29:39,359
um i'm going to take this that we've
3573
03:29:37,120 --> 03:29:40,880
talked about some some other things
3574
03:29:39,359 --> 03:29:43,120
during the intro sorry about i have to
3575
03:29:40,879 --> 03:29:45,199
look at my notes anyway anyways so we
3576
03:29:43,120 --> 03:29:47,200
have the enum here that's how you create
3577
03:29:47,200 --> 03:29:52,800
and you would and then give a name to
3578
03:29:50,318 --> 03:29:55,199
your innovation and unlike variables and
3579
03:29:55,200 --> 03:29:59,200
written with camel case you'd have to
3580
03:29:57,520 --> 03:30:02,399
basically use another casing here which
3581
03:29:59,200 --> 03:30:04,479
is the first letter of every word in
3582
03:30:02,398 --> 03:30:06,159
your iterations name has to be uppercase
3583
03:30:04,478 --> 03:30:08,478
and the and the rest of the letters have
3584
03:30:08,478 --> 03:30:13,358
let's in this case for instance say
3585
03:30:10,318 --> 03:30:15,039
person properties okay the properties of
3586
03:30:15,040 --> 03:30:19,279
then in this enum you will write the
3587
03:30:17,680 --> 03:30:20,079
different properties for instance first
3588
03:30:22,799 --> 03:30:27,199
so what that basically means is that
3589
03:30:24,478 --> 03:30:29,840
you've now defined a list of related
3590
03:30:27,200 --> 03:30:32,560
things such as first name last name age
3591
03:30:29,840 --> 03:30:34,000
which are categorized under a particular
3592
03:30:32,559 --> 03:30:36,478
name which in this case person
3593
03:30:36,478 --> 03:30:40,398
and you can refer to these in your code
3594
03:30:38,238 --> 03:30:41,359
using the dot notation so you can say
3595
03:30:45,120 --> 03:30:49,200
and we can print it actually so i'm just
3596
03:30:47,439 --> 03:30:51,840
gonna press command s and you can see it
3597
03:30:49,200 --> 03:30:53,040
being printed to the screen so
3598
03:30:53,040 --> 03:30:57,120
i mean immersions are really really
3599
03:30:54,639 --> 03:30:59,519
great as we go on in the in learning
3600
03:30:57,120 --> 03:31:01,920
about dart and how dart works how we can
3601
03:30:59,520 --> 03:31:04,479
work with flutter how we can parse data
3602
03:31:06,799 --> 03:31:11,358
but for now it's enough for you to
3603
03:31:08,318 --> 03:31:13,439
understand that you can categorize
3604
03:31:13,439 --> 03:31:16,880
under an enumeration so that you can
3605
03:31:16,879 --> 03:31:22,639
and indoor you can also get the string
3606
03:31:22,639 --> 03:31:26,079
values using their name property that is
3607
03:31:24,959 --> 03:31:28,398
something that's created for you by
3608
03:31:26,079 --> 03:31:31,279
default so if you just say name
3609
03:31:28,398 --> 03:31:33,358
you now see first name being printed to
3610
03:31:31,279 --> 03:31:36,319
the screen as a string but before that
3611
03:31:33,359 --> 03:31:38,399
if you print the innovations
3612
03:31:36,318 --> 03:31:40,799
value here for first name it would print
3613
03:31:42,238 --> 03:31:47,920
short and sweet about enumerations we're
3614
03:31:49,359 --> 03:31:53,680
especially later where we go to more
3615
03:31:53,680 --> 03:31:58,079
as we develop our real application but
3616
03:31:56,398 --> 03:31:59,599
for now just know that this is how you
3617
03:31:58,079 --> 03:32:00,879
create an information using an enum
3618
03:31:59,600 --> 03:32:02,318
keyword and then the rest of the
3619
03:32:00,879 --> 03:32:03,599
properties you just put in curly
3620
03:32:10,639 --> 03:32:13,680
now we need to talk about switch
3621
03:32:12,000 --> 03:32:15,120
statements and actually let's bring this
3622
03:32:15,120 --> 03:32:21,120
change this to properties let's say okay
3623
03:32:18,478 --> 03:32:24,398
and let's just say for instance animal
3624
03:32:24,398 --> 03:32:28,159
dog and then let's say rabbit
3625
03:32:30,879 --> 03:32:35,199
let's say we have an animal type
3626
03:32:36,799 --> 03:32:40,959
and then we for instance get in our
3627
03:32:40,959 --> 03:32:45,199
animal type so there's a property that
3628
03:32:42,959 --> 03:32:47,358
we expect to be passed our function
3629
03:32:47,359 --> 03:32:52,318
we name that property animal type with
3630
03:32:49,520 --> 03:32:54,159
kennel casing here okay so if we do that
3631
03:32:52,318 --> 03:32:55,439
then we go to our function here we're
3632
03:32:54,159 --> 03:32:57,119
recalling the function you can see that
3633
03:32:55,439 --> 03:32:59,359
we got an error meaning that there is a
3634
03:32:57,120 --> 03:33:01,600
parameter expected of type animal type
3635
03:33:04,398 --> 03:33:09,119
the place you are calling your function
3636
03:33:06,000 --> 03:33:10,879
that's what a call site is known as in
3637
03:33:09,120 --> 03:33:12,720
programming so if you're coming from a
3638
03:33:12,719 --> 03:33:16,079
um anything that is not software
3639
03:33:14,398 --> 03:33:17,199
development related so you wouldn't
3640
03:33:17,200 --> 03:33:21,359
so much about the this kind of lingo but
3641
03:33:19,279 --> 03:33:23,760
a call site is where you're calling a
3642
03:33:21,359 --> 03:33:26,159
function so at this call site online
3643
03:33:26,159 --> 03:33:31,200
um we're gonna gonna pass an animal type
3644
03:33:28,959 --> 03:33:32,879
and let's just say uh cat in this case
3645
03:33:32,879 --> 03:33:38,559
so in here we could just print that and
3646
03:33:35,520 --> 03:33:40,159
i'm just gonna say animal type
3647
03:33:38,559 --> 03:33:42,879
i'm gonna press command s and you can
3648
03:33:40,159 --> 03:33:45,359
see cat being printed here okay
3649
03:33:45,359 --> 03:33:49,439
different types of code depending on
3650
03:33:49,439 --> 03:33:53,520
then you could you could which is not
3651
03:33:52,000 --> 03:33:56,000
recommended you could use an if
3652
03:33:53,520 --> 03:34:01,040
statement so if you just said if
3653
03:33:56,000 --> 03:34:04,398
animal type is equal to animal type cat
3654
03:34:01,040 --> 03:34:06,399
you say print all i left oh i love
3655
03:34:06,398 --> 03:34:12,079
else if animal type is animal
3656
03:34:16,959 --> 03:34:21,199
or you would say dogs are so fluffy or
3657
03:34:36,478 --> 03:34:40,398
so this is using normal if statements
3658
03:34:38,478 --> 03:34:41,760
you say if animal type is cat then blah
3659
03:34:43,760 --> 03:34:47,279
it is one way of doing it but it's not
3660
03:34:45,520 --> 03:34:48,880
the recommended way of working with
3661
03:34:47,279 --> 03:34:50,399
enumerations and the recommended way of
3662
03:34:48,879 --> 03:34:51,920
working with enumeration especially if
3663
03:34:50,398 --> 03:34:54,079
you're doing like branching code as
3664
03:34:51,920 --> 03:34:55,200
we're doing here is using a switch
3665
03:34:55,200 --> 03:34:58,640
let's convert this code to switch
3666
03:35:00,799 --> 03:35:05,599
you put parenthesis open close and then
3667
03:35:03,439 --> 03:35:07,439
open close curly brackets and in here
3668
03:35:05,600 --> 03:35:09,040
you would put your narration so you say
3669
03:35:09,040 --> 03:35:13,120
and the way to handle these different
3670
03:35:10,719 --> 03:35:15,599
branches then is with the case uh
3671
03:35:13,120 --> 03:35:17,120
keyword you'd say in the case of
3672
03:35:42,159 --> 03:35:46,559
this is i'm great i'm actually grateful
3673
03:35:44,398 --> 03:35:48,879
that we're getting this uh error so you
3674
03:35:46,559 --> 03:35:50,639
can clearly see what it says is the case
3675
03:35:48,879 --> 03:35:53,358
should not complete normally try adding
3676
03:35:50,639 --> 03:35:54,959
break or return now what this is saying
3677
03:35:54,959 --> 03:35:59,199
many programming languages just like
3678
03:35:56,559 --> 03:36:01,278
dark when the program comes here to the
3679
03:35:59,200 --> 03:36:03,680
case statement it kind of like falls
3680
03:36:01,279 --> 03:36:05,439
through to the next line and dart tries
3681
03:36:03,680 --> 03:36:07,920
to avoid that so it says okay if i
3682
03:36:05,439 --> 03:36:09,359
handle bunny then i'm doing some stuff
3683
03:36:07,920 --> 03:36:11,279
but it kind of feels like i'm like
3684
03:36:09,359 --> 03:36:12,960
falling down to the next line after this
3685
03:36:11,279 --> 03:36:15,600
because you didn't tell me what to do
3686
03:36:12,959 --> 03:36:16,398
after the print statement so you either
3687
03:36:16,398 --> 03:36:20,639
me to like completely go out of this
3688
03:36:18,639 --> 03:36:23,119
function go out of the test function by
3689
03:36:20,639 --> 03:36:25,519
putting the return keyword here we
3690
03:36:23,120 --> 03:36:27,040
haven't talked about return really yet
3691
03:36:25,520 --> 03:36:29,520
but you could do that you could just say
3692
03:36:27,040 --> 03:36:31,439
okay return right after all of these so
3693
03:36:29,520 --> 03:36:33,600
i'm just going to press command s
3694
03:36:31,439 --> 03:36:35,279
and you will see cat being printed to
3695
03:36:35,279 --> 03:36:38,000
but if you didn't have this return
3696
03:36:36,559 --> 03:36:39,600
statement statement here you would get
3697
03:36:42,719 --> 03:36:46,959
or you would use the break keyword now
3698
03:36:45,520 --> 03:36:48,560
there's a difference between these let's
3699
03:36:46,959 --> 03:36:51,438
put a print statement here and i'm going
3700
03:36:48,559 --> 03:36:53,519
to say function is finished okay
3701
03:36:51,439 --> 03:36:54,398
so i'm kind of expecting that
3702
03:36:56,639 --> 03:37:02,639
our code here our test function here
3703
03:37:00,079 --> 03:37:05,279
passing the value of cat at the moment
3704
03:37:02,639 --> 03:37:07,358
that we fall into the switch
3705
03:37:05,279 --> 03:37:10,000
we check that this is cat and then print
3706
03:37:07,359 --> 03:37:11,279
the cat and then we return okay
3707
03:37:11,279 --> 03:37:15,439
what it is doing it means that it kind
3708
03:37:13,279 --> 03:37:17,600
of skips over this print statement and
3709
03:37:15,439 --> 03:37:19,520
you'll see soon if i say command s it
3710
03:37:17,600 --> 03:37:20,640
will just say cat and then we'll return
3711
03:37:20,639 --> 03:37:24,559
so this is not really what i wanted i
3712
03:37:22,719 --> 03:37:26,639
wanted this switch statement to be
3713
03:37:24,559 --> 03:37:28,959
executed print cat and then continue
3714
03:37:26,639 --> 03:37:31,439
after switch okay and that's where you
3715
03:37:31,439 --> 03:37:35,920
or the key word here so if you say break
3716
03:37:33,439 --> 03:37:37,439
it breaks out of the switch statement
3717
03:37:35,920 --> 03:37:39,840
and then continues with the rest of the
3718
03:37:37,439 --> 03:37:42,479
function as it as you would expect so if
3719
03:37:39,840 --> 03:37:44,639
i press command s here you say cat and
3720
03:37:42,478 --> 03:37:45,438
then function is finished all right
3721
03:37:45,439 --> 03:37:49,840
switch is the preferred way of working
3722
03:37:49,840 --> 03:37:54,398
enumerations especially if you're doing
3723
03:37:51,840 --> 03:37:56,000
branches so you could also like
3724
03:37:56,000 --> 03:38:01,040
for instance if in this case he said uh
3725
03:38:04,079 --> 03:38:08,879
you could also in this case say if
3726
03:38:12,799 --> 03:38:17,679
and you would return okay you could do
3727
03:38:15,120 --> 03:38:19,359
this as well so this is kind of like
3728
03:38:17,680 --> 03:38:20,479
a conditional statement that you're
3729
03:38:19,359 --> 03:38:22,640
putting in the beginning of your
3730
03:38:20,478 --> 03:38:25,760
function making making sure that any
3731
03:38:26,559 --> 03:38:31,600
completely sure that the animal type is
3732
03:38:29,199 --> 03:38:33,680
a cat okay so in that case you may just
3733
03:38:31,600 --> 03:38:36,479
use a typical if statement so you don't
3734
03:38:33,680 --> 03:38:39,920
have to do switches okay but if you're
3735
03:38:36,478 --> 03:38:41,920
trying to execute spec special pieces of
3736
03:38:41,920 --> 03:38:45,680
which value this enumeration contains at
3737
03:38:45,680 --> 03:38:49,120
then i highly suggest that you use
3738
03:38:47,199 --> 03:38:51,920
switch statement instead of if statement
3739
03:38:49,120 --> 03:38:55,279
all right so kind of depends on your on
3740
03:38:55,279 --> 03:38:59,920
okay i'm just going to mark this item as
3741
03:38:59,920 --> 03:39:04,559
now let's talk about classes all right
3742
03:39:02,719 --> 03:39:07,438
which is one of my favorite topics to
3743
03:39:10,159 --> 03:39:14,719
uh dart and in many other languages
3744
03:39:12,639 --> 03:39:17,358
let's actually bring this back to how it
3745
03:39:14,719 --> 03:39:18,398
was before make it a test function all
3746
03:39:18,398 --> 03:39:23,519
and remove the animal type from here and
3747
03:39:20,719 --> 03:39:25,599
remove them i can actually continue and
3748
03:39:31,040 --> 03:39:39,359
are grouping of various functionalities
3749
03:39:35,680 --> 03:39:42,159
into one packageable piece of data
3750
03:39:39,359 --> 03:39:44,079
and and by that i mean for instance
3751
03:39:42,159 --> 03:39:45,680
let's say that you have a function
3752
03:39:45,680 --> 03:39:50,479
another function called breathe
3753
03:39:48,000 --> 03:39:52,478
and then you have a person's first name
3754
03:39:52,478 --> 03:39:56,238
of course you could go and define these
3755
03:39:54,079 --> 03:39:57,520
things like this you could say khan's
3756
03:39:57,520 --> 03:40:01,199
yeah something and khan's last name is
3757
03:40:05,120 --> 03:40:10,239
um just like that and then you could
3758
03:40:07,199 --> 03:40:11,279
have a function and sorry you would say
3759
03:40:11,279 --> 03:40:15,520
um and then you'd have another function
3760
03:40:16,318 --> 03:40:20,639
you can do that but these are functions
3761
03:40:19,040 --> 03:40:22,399
that are kind of like for us in this
3762
03:40:20,639 --> 03:40:24,478
particular case or at least in my head
3763
03:40:22,398 --> 03:40:25,519
at the moment i'm imagining these
3764
03:40:27,680 --> 03:40:30,800
and that person can run that person can
3765
03:40:29,520 --> 03:40:33,199
breathe that person has a first name and
3766
03:40:30,799 --> 03:40:35,519
last name so the grouping of these
3767
03:40:40,238 --> 03:40:44,318
the way to do that is you would say for
3768
03:40:42,159 --> 03:40:46,398
instance class which is a keyword in
3769
03:40:47,199 --> 03:40:51,680
say the name of the class now for the
3770
03:40:49,600 --> 03:40:52,960
naming of classes and enumerations and
3771
03:40:52,959 --> 03:40:56,159
entity except for variables and
3772
03:40:56,159 --> 03:41:00,079
you should use um just normal casing you
3773
03:40:58,879 --> 03:41:03,119
would i don't actually know if it's
3774
03:41:00,079 --> 03:41:04,159
called pascal casing or i think so
3775
03:41:04,159 --> 03:41:08,559
but you would just use your upper case
3776
03:41:06,079 --> 03:41:10,959
the first letter of every word okay so
3777
03:41:10,959 --> 03:41:16,398
okay this is how you would say a person
3778
03:41:16,398 --> 03:41:20,478
i don't think actually we can put const
3779
03:41:18,318 --> 03:41:22,879
in there i'm just gonna grab
3780
03:41:20,478 --> 03:41:24,959
these two functions and just place them
3781
03:41:22,879 --> 03:41:27,920
inside this person class all right
3782
03:41:29,840 --> 03:41:33,520
run function and with reading we're
3783
03:41:34,799 --> 03:41:38,799
and in the test function you would want
3784
03:41:40,079 --> 03:41:44,079
something called an instance of this
3785
03:41:44,079 --> 03:41:50,238
instances are objects and objects are
3786
03:41:54,159 --> 03:41:58,799
works in software development and this
3787
03:41:56,639 --> 03:41:59,920
is for any programming language such as
3788
03:42:01,120 --> 03:42:05,840
swift python javascript where
3789
03:42:08,318 --> 03:42:13,920
and now that you know what a class is
3790
03:42:11,199 --> 03:42:16,159
in order to use a class you need to
3791
03:42:13,920 --> 03:42:18,000
usually create something called an
3792
03:42:16,159 --> 03:42:18,959
instance of that class that means that
3793
03:42:18,959 --> 03:42:22,799
the programming language that okay here
3794
03:42:21,040 --> 03:42:24,880
is the class i know about that but give
3795
03:42:27,760 --> 03:42:32,478
can be instantiated meaning that the
3796
03:42:30,000 --> 03:42:34,959
dart compiler will create a copy of that
3797
03:42:32,478 --> 03:42:37,119
exact class with its data its functions
3798
03:42:34,959 --> 03:42:39,519
its properties and give that copy to you
3799
03:42:39,520 --> 03:42:45,120
that is called instantiation and it
3800
03:42:41,840 --> 03:42:47,600
works by using the equal sign and
3801
03:42:45,120 --> 03:42:49,279
creating putting a parenthesis
3802
03:42:47,600 --> 03:42:50,960
at the end of the name of the class as
3803
03:42:49,279 --> 03:42:52,720
i'll show you here so let's just say
3804
03:42:54,398 --> 03:42:58,238
which is the name of our variable in
3805
03:42:56,000 --> 03:43:00,079
this case is equal to as i said equal
3806
03:42:58,238 --> 03:43:01,760
sign then we would write the name of the
3807
03:43:00,079 --> 03:43:02,559
class and parenthesis just like that
3808
03:43:02,559 --> 03:43:07,198
so now you said a person variable in
3809
03:43:04,959 --> 03:43:08,238
this case is an instance of that person
3810
03:43:08,238 --> 03:43:13,600
now you'll understand using dots and
3811
03:43:11,040 --> 03:43:14,399
notation you could say person.run you
3812
03:43:14,398 --> 03:43:18,079
that function is now available on your
3813
03:43:16,318 --> 03:43:19,600
instance of the person class and you
3814
03:43:23,920 --> 03:43:30,639
functions that are available at instance
3815
03:43:28,159 --> 03:43:32,159
level of the person class i know there's
3816
03:43:30,639 --> 03:43:34,000
a lot of words that i'm just talking
3817
03:43:32,159 --> 03:43:35,840
about but i think you understand the
3818
03:43:35,840 --> 03:43:40,719
this is how you instantiate the person
3819
03:43:37,920 --> 03:43:42,719
class and this is how you invoke various
3820
03:43:40,719 --> 03:43:44,719
functions on that class so if i press
3821
03:43:42,719 --> 03:43:46,879
command s you can see it says running
3822
03:43:46,879 --> 03:43:51,519
if you said in this case person
3823
03:43:49,439 --> 03:43:53,120
and then without instantiating using
3824
03:43:53,120 --> 03:43:57,359
parenthesis if you said breathe
3825
03:43:55,520 --> 03:43:59,439
you will get an error here instance
3826
03:43:57,359 --> 03:44:00,840
member breathe can't be accessed using
3827
03:44:03,040 --> 03:44:07,040
that's i mean that is kind of like
3828
03:44:04,799 --> 03:44:09,679
instance member is an important term
3829
03:44:07,040 --> 03:44:12,560
also to remember an instance member
3830
03:44:09,680 --> 03:44:16,238
means some functionality that is only
3831
03:44:12,559 --> 03:44:18,159
available at the instance level meaning
3832
03:44:16,238 --> 03:44:20,079
that it's not available at the person
3833
03:44:18,159 --> 03:44:21,840
class level but you have to make a copy
3834
03:44:20,079 --> 03:44:24,079
of person in order to be able to access
3835
03:44:28,959 --> 03:44:32,799
you can do a lot with classes as we will
3836
03:44:31,359 --> 03:44:35,920
talk about soon so i'm just going to
3837
03:44:32,799 --> 03:44:37,840
leave that person class right there
3838
03:44:37,840 --> 03:44:42,960
just going to mark that as talked about
3839
03:44:42,959 --> 03:44:47,759
and let's now talk a little bit a little
3840
03:44:49,439 --> 03:44:53,680
objects are actually quite easy to
3841
03:44:51,040 --> 03:44:56,319
explain an object is an instance of a
3842
03:44:58,879 --> 03:45:02,478
when someone says oh here's an object of
3843
03:45:00,478 --> 03:45:04,879
type string it means literally that
3844
03:45:02,478 --> 03:45:07,840
there is a class called string i've
3845
03:45:04,879 --> 03:45:10,478
created an instance of it and
3846
03:45:07,840 --> 03:45:13,600
and that is an object so the word
3847
03:45:10,478 --> 03:45:16,879
instance the words instance and object
3848
03:45:13,600 --> 03:45:19,359
are usually used interchangeably uh but
3849
03:45:16,879 --> 03:45:21,119
if you hear someone say instantiate a
3850
03:45:19,359 --> 03:45:24,800
class then you would say okay what's the
3851
03:45:21,120 --> 03:45:24,800
class name oh it's person all right
3852
03:45:25,760 --> 03:45:29,199
is now i created an instance okay and in
3853
03:45:28,000 --> 03:45:30,639
this case you can see i'm just creating
3854
03:45:29,199 --> 03:45:32,079
an instance of person without actually
3855
03:45:30,639 --> 03:45:34,478
doing anything with it so that's got
3856
03:45:32,079 --> 03:45:39,199
kind of like a useless object all right
3857
03:45:34,478 --> 03:45:40,478
but if i put i say foo as a person
3858
03:45:40,478 --> 03:45:45,278
foo now is an object of type of person
3859
03:45:43,520 --> 03:45:46,640
and actually you can write its name here
3860
03:45:45,279 --> 03:45:49,600
and you'll see that it tells you that
3861
03:45:57,920 --> 03:46:02,478
and i can see my notes that objects need
3862
03:46:00,879 --> 03:46:03,920
are kind of like in the wrong place i'm
3863
03:46:02,478 --> 03:46:05,438
gonna bring it to the right place sorry
3864
03:46:09,439 --> 03:46:14,398
let's talk a little bit about um
3865
03:46:14,398 --> 03:46:17,519
and i can see constructors also at the
3866
03:46:16,238 --> 03:46:20,799
wrong place in my notes so i'm going to
3867
03:46:17,520 --> 03:46:22,560
bring those also to the right place okay
3868
03:46:23,680 --> 03:46:28,800
now what a constructor is at its name as
3869
03:46:30,079 --> 03:46:37,199
logic in a class that constructs or
3870
03:46:33,680 --> 03:46:39,680
initializes or builds that class's
3871
03:46:39,680 --> 03:46:43,359
you may say that okay let's go to our
3872
03:46:41,680 --> 03:46:44,398
function here as to our class here
3873
03:46:44,398 --> 03:46:49,760
and let's say every person has
3874
03:46:46,879 --> 03:46:52,159
a first name or name okay so let's just
3875
03:46:49,760 --> 03:46:54,238
define that we say final string name all
3876
03:46:52,159 --> 03:46:56,639
right as you can see now dart is saying
3877
03:46:54,238 --> 03:46:57,840
okay you said that every person has a
3878
03:46:57,840 --> 03:47:02,719
and it's a final meaning that after the
3879
03:46:59,920 --> 03:47:05,199
person has been instantiated or after
3880
03:47:02,719 --> 03:47:07,679
that person has been initialized or
3881
03:47:05,199 --> 03:47:09,600
created an instance from you cannot
3882
03:47:07,680 --> 03:47:10,720
change that name because you said final
3883
03:47:10,719 --> 03:47:15,358
if you said like string name is foo that
3884
03:47:13,520 --> 03:47:17,359
would be different because it means
3885
03:47:15,359 --> 03:47:19,199
every person instance that gets created
3886
03:47:19,199 --> 03:47:22,720
foo for its name that's a completely
3887
03:47:25,040 --> 03:47:29,279
in this case as you can see we're saying
3888
03:47:26,799 --> 03:47:30,238
that there every person instance every
3889
03:47:30,238 --> 03:47:34,959
copy that we create has a name now dart
3890
03:47:32,559 --> 03:47:37,119
to say okay where is the name then you
3891
03:47:34,959 --> 03:47:39,198
didn't tell me how to create it
3892
03:47:37,120 --> 03:47:42,560
and that's where you would want to use
3893
03:47:39,199 --> 03:47:44,640
something called constructor okay
3894
03:47:42,559 --> 03:47:46,879
constructors are sometimes you uh called
3895
03:47:44,639 --> 03:47:48,959
as initializers depending on the
3896
03:47:46,879 --> 03:47:51,679
background of the programmer they may
3897
03:47:48,959 --> 03:47:53,198
call it constructor initializer uh or
3898
03:47:51,680 --> 03:47:55,120
maybe some other names that i don't know
3899
03:47:53,199 --> 03:47:57,840
about but if you if you hear that a
3900
03:47:55,120 --> 03:47:59,199
constructor then you will now know what
3901
03:48:02,478 --> 03:48:06,159
now what you can do at least in visual
3902
03:48:04,398 --> 03:48:08,799
studio code when you get this error is
3903
03:48:06,159 --> 03:48:11,439
to just hover hover over it and then
3904
03:48:08,799 --> 03:48:14,559
press command on mac or control on
3905
03:48:11,439 --> 03:48:16,318
windows on linux and press dot
3906
03:48:14,559 --> 03:48:17,760
now you will see you will get some
3907
03:48:17,760 --> 03:48:20,880
and it will the second suggestion at
3908
03:48:20,879 --> 03:48:24,719
constructor for final fields okay and i
3909
03:48:24,719 --> 03:48:29,198
and what happens here now you see it's
3910
03:48:27,199 --> 03:48:31,359
that it creates something that looks
3911
03:48:29,199 --> 03:48:33,279
kind of like a function but it doesn't
3912
03:48:33,279 --> 03:48:37,520
its name is implicitly set to the name
3913
03:48:37,520 --> 03:48:42,560
so basically it says i'm a special
3914
03:48:40,079 --> 03:48:46,318
function with the same name as the class
3915
03:48:42,559 --> 03:48:49,039
and i expect a value to be given to me
3916
03:48:46,318 --> 03:48:51,920
which i will then in turn assign to the
3917
03:48:51,920 --> 03:48:56,719
it's kind of like a strange way of doing
3918
03:48:53,439 --> 03:48:57,840
things but it is quiet clean as well
3919
03:48:57,840 --> 03:49:01,199
after you do that so this is how you
3920
03:48:59,279 --> 03:49:02,960
create a constructor after you do that
3921
03:49:01,199 --> 03:49:05,760
then at the call site where you're
3922
03:49:02,959 --> 03:49:07,919
calling this person class to create an
3923
03:49:05,760 --> 03:49:10,398
instance of it it will complain saying
3924
03:49:07,920 --> 03:49:12,719
that oh i'm expecting an argument
3925
03:49:12,719 --> 03:49:17,438
and that's where you have to pass the
3926
03:49:14,318 --> 03:49:18,879
name so let's say in this case is foo
3927
03:49:18,879 --> 03:49:22,879
and then on the next line you can just
3928
03:49:22,879 --> 03:49:27,278
all right and press command s and then
3929
03:49:25,040 --> 03:49:29,199
you can see foo bar being printed to the
3930
03:49:29,199 --> 03:49:33,840
that is like the basic of a constructor
3931
03:49:31,359 --> 03:49:35,600
that's how you construct instances of
3932
03:49:35,600 --> 03:49:39,520
now you may be saying that all right i
3933
03:49:39,520 --> 03:49:45,920
i mean you can do many fancy things with
3934
03:49:42,559 --> 03:49:48,000
constructors you could say okay
3935
03:49:45,920 --> 03:49:50,238
this name for instance by default must
3936
03:49:48,000 --> 03:49:51,520
have a special value you could do that
3937
03:49:50,238 --> 03:49:52,799
there's lots of things you can do with
3938
03:49:51,520 --> 03:49:54,560
constructors which i'm not going to go
3939
03:49:54,559 --> 03:49:58,238
but right now just know that a
3940
03:49:56,159 --> 03:49:59,840
constructor is this special kind of
3941
03:49:58,238 --> 03:50:01,119
function that has the same name as the
3942
03:50:01,120 --> 03:50:07,479
and then parenthesis and then you put
3943
03:50:03,199 --> 03:50:07,479
your values in here all right
3944
03:50:16,079 --> 03:50:24,318
let's talk a little bit about um
3945
03:50:27,439 --> 03:50:32,000
i'm actually going to go here and say
3946
03:50:29,680 --> 03:50:34,159
we're going to talk about methods
3947
03:50:32,000 --> 03:50:36,159
and those at the wrong place in my notes
3948
03:50:36,159 --> 03:50:39,840
a method of a class we've talked about
3949
03:50:38,079 --> 03:50:41,520
already to be honest with you and a
3950
03:50:46,478 --> 03:50:50,559
is usually referred to as an instance
3951
03:50:48,719 --> 03:50:52,799
method meaning that the function is
3952
03:50:50,559 --> 03:50:55,039
available after you've instantiated that
3953
03:50:52,799 --> 03:50:56,799
class all right as we're doing in line
3954
03:51:00,959 --> 03:51:06,000
so is a variable that is available at an
3955
03:51:03,040 --> 03:51:08,080
instance level is not an instance method
3956
03:51:06,000 --> 03:51:10,318
an instance method should be a function
3957
03:51:08,079 --> 03:51:12,000
all right so let's go and create a
3958
03:51:10,318 --> 03:51:14,719
function here that doesn't return any
3959
03:51:12,000 --> 03:51:17,120
value denoted by the void return type
3960
03:51:14,719 --> 03:51:18,238
and we say print name all right
3961
03:51:18,238 --> 03:51:22,719
functionality of this function is only
3962
03:51:22,719 --> 03:51:25,760
class all right that's all it all it
3963
03:51:25,760 --> 03:51:29,359
and in dart you're also now that we're
3964
03:51:28,159 --> 03:51:31,920
talking about this i'll just mention
3965
03:51:31,920 --> 03:51:38,879
better not to prefix your instance
3966
03:51:35,279 --> 03:51:41,680
variables or instance functions
3967
03:51:38,879 --> 03:51:42,839
inside the class itself using
3968
03:51:54,079 --> 03:51:59,120
basically refers to the current instance
3969
03:51:59,120 --> 03:52:04,479
so you could either tell print name to
3970
03:52:01,760 --> 03:52:07,120
print this dot name or it's actually
3971
03:52:04,478 --> 03:52:08,959
better to remove this and refer to it as
3972
03:52:07,120 --> 03:52:11,760
name that's the recommended way of doing
3973
03:52:08,959 --> 03:52:13,198
it okay so avoid the keyword this as
3974
03:52:15,520 --> 03:52:19,199
and we'll come to those points hopefully
3975
03:52:19,199 --> 03:52:24,880
in this course why you may have to do
3976
03:52:21,439 --> 03:52:27,600
that while you may have to use this
3977
03:52:24,879 --> 03:52:30,478
all right now we have the print name
3978
03:52:30,478 --> 03:52:33,840
so let's just use it instead of this
3979
03:52:32,478 --> 03:52:36,398
print function that we're doing here
3980
03:52:36,398 --> 03:52:40,799
dot prints name all right command s or
3981
03:52:40,799 --> 03:52:45,759
on linux and windows and command sun on
3982
03:52:43,760 --> 03:52:47,120
the macintosh and then you get the
3983
03:52:47,120 --> 03:52:50,000
foo bar printed here or you could just
3984
03:52:52,478 --> 03:52:58,159
i will now print the name of this person
3985
03:52:56,559 --> 03:53:00,079
in single quotes we don't need double
3986
03:52:58,159 --> 03:53:01,920
quotes okay command s and you will see
3987
03:53:00,079 --> 03:53:04,238
that message being printed here
3988
03:53:01,920 --> 03:53:05,439
followed by the actual name of that
3989
03:53:05,439 --> 03:53:09,840
if someone says method or instance
3990
03:53:07,920 --> 03:53:11,840
method you will then know what we're
3991
03:53:09,840 --> 03:53:14,000
talking about is a function created at
3992
03:53:11,840 --> 03:53:18,719
the class level that does some stuff all
3993
03:53:14,000 --> 03:53:18,719
right so that's short and sweet
3994
03:53:21,199 --> 03:53:25,399
now that we've talked about that
3995
03:53:23,600 --> 03:53:28,479
let's talk a little bit about
3996
03:53:25,398 --> 03:53:30,719
inheritance and subclassing i'm gonna
3997
03:53:28,478 --> 03:53:32,959
bring a caption here so you know what
3998
03:53:34,478 --> 03:53:39,119
inheritance and subclassing are so so
3999
03:53:39,120 --> 03:53:42,800
and in any other object-oriented
4000
03:53:41,359 --> 03:53:45,199
programming language that i don't think
4001
03:53:42,799 --> 03:53:47,278
anybody should like jump over it or
4002
03:53:45,199 --> 03:53:48,880
um like for instance i know
4003
03:53:47,279 --> 03:53:50,479
developers working in various
4004
03:53:48,879 --> 03:53:52,639
programming languages that are object
4005
03:53:50,478 --> 03:53:55,039
oriented but they kind of steer clear of
4006
03:53:52,639 --> 03:53:57,599
the object oriented aspects of that
4007
03:53:55,040 --> 03:54:00,239
language and maybe they don't need it
4008
03:53:57,600 --> 03:54:02,079
and maybe they just feel like it's
4009
03:54:00,238 --> 03:54:04,398
unnecessary or they feel like oh it's
4010
03:54:02,079 --> 03:54:06,398
just too complicated but in dart if you
4011
03:54:04,398 --> 03:54:08,478
want to become a good flutter developer
4012
03:54:06,398 --> 03:54:09,760
or a good dart developer you need to
4013
03:54:17,120 --> 03:54:22,000
talk about inheritance what inheritance
4014
03:54:27,279 --> 03:54:32,800
to add more functionality to that class
4015
03:54:37,359 --> 03:54:42,000
we go into our test function here and
4016
03:54:42,000 --> 03:54:45,600
that code and also remove the person
4017
03:54:59,040 --> 03:55:04,080
living thing is breathing okay
4018
03:55:01,680 --> 03:55:06,800
so we created a class living thing and
4019
03:55:04,079 --> 03:55:08,559
we're saying that anything that lives
4020
03:55:06,799 --> 03:55:10,079
needs to breathe now this may be an
4021
03:55:10,079 --> 03:55:15,840
anything that lives and is above the
4022
03:55:13,760 --> 03:55:18,960
and it's above the ground and it's
4023
03:55:15,840 --> 03:55:21,120
basically alive is breathing okay
4024
03:55:18,959 --> 03:55:22,398
so that's our function on the living
4025
03:55:25,120 --> 03:55:29,279
any living thing may also have the
4026
03:55:26,719 --> 03:55:30,959
ability to move okay then we have a
4027
03:55:29,279 --> 03:55:35,040
function called move i'm going to say
4028
03:55:35,040 --> 03:55:41,040
so now you may say okay now i kind of
4029
03:55:37,120 --> 03:55:43,040
want a class called uh cats all right
4030
03:55:43,040 --> 03:55:46,880
one way to do that to go about creating
4031
03:55:46,879 --> 03:55:52,079
the cat class is to say class cat
4032
03:55:49,840 --> 03:55:54,318
and then you say um i kind of need these
4033
03:55:52,079 --> 03:55:56,719
functions and you'll go and copy it and
4034
03:55:54,318 --> 03:55:59,278
then you paste them here all right
4035
03:55:56,719 --> 03:56:02,000
and then you say okay i'm good to go now
4036
03:56:07,920 --> 03:56:11,439
developers do not like to repeat
4037
03:56:12,719 --> 03:56:16,398
it is such an important concept in
4038
03:56:14,719 --> 03:56:18,159
programming that you need to avoid
4039
03:56:16,398 --> 03:56:19,760
repeating yourself that you need to just
4040
03:56:19,760 --> 03:56:24,719
get it straight so that you don't
4041
03:56:22,398 --> 03:56:27,358
make this mistake as we're doing in this
4042
03:56:27,359 --> 03:56:31,439
the first thing you want to do as a
4043
03:56:28,398 --> 03:56:32,318
developer say how can i grab this code
4044
03:56:32,318 --> 03:56:36,559
and it's obvious that the cat is also a
4045
03:56:36,559 --> 03:56:43,439
that's where you want to use the extends
4046
03:56:39,840 --> 03:56:45,359
um keyword that allows you to inherit
4047
03:56:43,439 --> 03:56:48,639
the functionality inside the living
4048
03:56:45,359 --> 03:56:50,640
thing class into your cat class so
4049
03:56:48,639 --> 03:56:52,398
in this case i'm saying cat class
4050
03:56:50,639 --> 03:56:53,680
extends or read it in english as
4051
03:56:57,120 --> 03:57:00,800
you can see that the cat class in itself
4052
03:56:59,199 --> 03:57:03,199
is empty right now but if you go to the
4053
03:57:12,159 --> 03:57:17,279
uh you can see that now that the cat
4054
03:57:14,398 --> 03:57:21,039
class has breathe and move uh
4055
03:57:17,279 --> 03:57:23,120
functionalities or functions actually
4056
03:57:21,040 --> 03:57:25,439
so although cat itself didn't define
4057
03:57:23,120 --> 03:57:27,920
these functions but they're available
4058
03:57:25,439 --> 03:57:30,960
for the instance in this case called
4059
03:57:27,920 --> 03:57:32,960
fluffers of type cat to use so you could
4060
03:57:30,959 --> 03:57:35,679
just say move and then you can say
4061
03:57:36,719 --> 03:57:40,559
so if i run this code if i delete
4062
03:57:38,959 --> 03:57:42,318
everything in the debug console and run
4063
03:57:40,559 --> 03:57:44,879
this code you can see that the cat
4064
03:57:42,318 --> 03:57:46,719
instance called fluffer is the same move
4065
03:57:44,879 --> 03:57:50,238
or i am moving and it will also say
4066
03:57:46,719 --> 03:57:52,478
living thing is breathing okay
4067
03:57:53,040 --> 03:57:57,600
you could also i mean we could also talk
4068
03:57:55,359 --> 03:58:00,159
about now that we're talking about
4069
03:58:01,199 --> 03:58:04,720
actually maybe i shouldn't call a
4070
03:58:02,799 --> 03:58:06,000
subclassing but i also think it's
4071
03:58:04,719 --> 03:58:07,920
important for you to understand what
4072
03:58:06,000 --> 03:58:09,199
subclassing is subclassing is literally
4073
03:58:07,920 --> 03:58:11,040
the same thing as inheritance
4074
03:58:09,199 --> 03:58:12,319
subclassing is saying that you have a
4075
03:58:11,040 --> 03:58:14,000
class and you're creating a sub
4076
03:58:18,159 --> 03:58:21,840
it's a little bit of a strange naming
4077
03:58:19,760 --> 03:58:24,318
sub because sub means kind of like a
4078
03:58:21,840 --> 03:58:26,238
subset of things available in that class
4079
03:58:24,318 --> 03:58:27,039
but it actually is like a superset
4080
03:58:28,478 --> 03:58:32,159
grab everything like the cat at the
4081
03:58:30,079 --> 03:58:33,920
moment has every functionality in living
4082
03:58:33,920 --> 03:58:38,398
but it may not necessarily do that
4083
03:58:36,719 --> 03:58:41,920
it's kind of complicated to explain but
4084
03:58:38,398 --> 03:58:43,439
if you hear subclassing or inheritance
4085
03:58:46,159 --> 03:58:50,879
use the extends keyword usually okay
4086
03:58:52,478 --> 03:58:58,478
all right now we've talked about
4087
03:59:00,879 --> 03:59:05,278
move a little bit uh my notes around
4088
03:59:03,359 --> 03:59:07,840
sorry about that that i'm looking away
4089
03:59:07,840 --> 03:59:13,680
now we're gonna talk about abstract
4090
03:59:13,680 --> 03:59:18,159
there's good documentation about
4091
03:59:21,359 --> 03:59:27,840
is to just change this class living
4092
03:59:24,238 --> 03:59:27,840
thing at the moment to abstract
4093
03:59:28,000 --> 03:59:32,559
and you see that everything works as
4094
03:59:40,159 --> 03:59:43,680
a normal class and there's good
4095
03:59:42,079 --> 03:59:45,279
documentation about what an abstract
4096
03:59:43,680 --> 03:59:46,800
class actually is from a dart
4097
03:59:45,279 --> 03:59:48,640
perspective and you can see it says use
4098
03:59:46,799 --> 03:59:50,719
the abs abstract modifier to define an
4099
03:59:48,639 --> 03:59:52,840
abstract class class that cannot be
4100
03:59:52,840 --> 03:59:59,279
so an abstract class is just like a
4101
03:59:56,159 --> 04:00:00,000
normal class that can't have instances
4102
04:00:00,000 --> 04:00:05,359
in this in this case once we made living
4103
04:00:02,799 --> 04:00:07,358
thing an abstract class if you then go
4104
04:00:14,318 --> 04:00:18,318
it says oh abstract classes can't be
4105
04:00:18,318 --> 04:00:24,879
so an abstract class is a class that
4106
04:00:24,879 --> 04:00:31,119
with the sole purpose of other classes
4107
04:00:28,398 --> 04:00:33,760
using its functionality okay
4108
04:00:31,120 --> 04:00:36,880
so if you mark something as an abstract
4109
04:00:33,760 --> 04:00:38,398
class in dart you what you need to just
4110
04:00:36,879 --> 04:00:40,879
know in your head is that this is a
4111
04:00:38,398 --> 04:00:44,000
class that has some utilities that has
4112
04:00:40,879 --> 04:00:46,959
some code that is supposed to be used in
4113
04:00:44,000 --> 04:00:49,439
other normal classes all right
4114
04:00:46,959 --> 04:00:51,599
and no one is supposed to just go and
4115
04:00:49,439 --> 04:00:52,800
create an instance of living thing in
4116
04:00:54,238 --> 04:00:59,920
at the call side you need to instantiate
4117
04:00:59,920 --> 04:01:04,879
now we can say cat as we did before and
4118
04:01:02,719 --> 04:01:07,438
we can say thing breathe move or
4119
04:01:09,199 --> 04:01:14,239
that's what an abstract class is
4120
04:01:14,238 --> 04:01:17,920
just a class that cannot be instantiated
4121
04:01:16,079 --> 04:01:19,600
it's usually like a utility class that
4122
04:01:17,920 --> 04:01:22,159
other classes are supposed to inherit
4123
04:01:25,760 --> 04:01:29,920
i can see now in my notes and i'm gonna
4124
04:01:28,159 --> 04:01:32,639
take that we've talked quickly about
4125
04:01:34,799 --> 04:01:39,198
the next topic up which we're going to
4126
04:01:43,439 --> 04:01:49,279
i absolutely personally love factory
4127
04:01:45,840 --> 04:01:49,279
constructors to be honest with you
4128
04:01:49,359 --> 04:01:54,960
let's remove our abstract class i'll
4129
04:01:51,359 --> 04:01:54,960
explain to you what a factory
4130
04:02:10,318 --> 04:02:14,799
for linux windows on the name in visual
4131
04:02:12,799 --> 04:02:16,000
studio code at least to create a
4132
04:02:14,799 --> 04:02:18,318
constructor you can do that and say
4133
04:02:16,000 --> 04:02:21,439
create constructor or you could manually
4134
04:02:18,318 --> 04:02:24,079
create a constructor so you say cat
4135
04:02:21,439 --> 04:02:27,120
this name okay that's a constructor
4136
04:02:24,079 --> 04:02:29,039
and also know that um you could make
4137
04:02:27,120 --> 04:02:30,560
this a const because it is actually
4138
04:02:29,040 --> 04:02:32,720
using a final field but we're going to
4139
04:02:32,719 --> 04:02:39,519
now we have a cat class here that has
4140
04:02:36,398 --> 04:02:43,119
a constructor called just cat meaning
4141
04:02:50,799 --> 04:02:55,198
all right so now you're creating an
4142
04:02:52,238 --> 04:02:57,600
instance of the cat class and the name
4143
04:02:55,199 --> 04:03:02,239
of the variable is called fluffball
4144
04:02:57,600 --> 04:03:04,399
and the name of the cat is fluffball
4145
04:03:14,719 --> 04:03:17,599
is just normal constructor it has
4146
04:03:16,159 --> 04:03:19,680
nothing to do with a factory constructor
4147
04:03:17,600 --> 04:03:20,720
but what a factory constructor actually
4148
04:03:20,719 --> 04:03:26,398
is a way for you to construct instances
4149
04:03:26,398 --> 04:03:33,439
and using convenience functions
4150
04:03:31,040 --> 04:03:35,600
so what that means is that if you in
4151
04:03:35,600 --> 04:03:41,199
you are creating instances of this class
4152
04:03:38,559 --> 04:03:43,680
like 20 times 30 times different places
4153
04:03:41,199 --> 04:03:46,319
in your application using this exact
4154
04:03:47,359 --> 04:03:52,640
you need to then create a factory
4155
04:03:49,439 --> 04:03:55,040
constructor that is a clear sign that
4156
04:03:52,639 --> 04:03:56,799
your usual use case for create an
4157
04:04:01,600 --> 04:04:05,439
that's where factory constructors are
4158
04:04:03,359 --> 04:04:06,800
useful for and as their name indicates
4159
04:04:07,760 --> 04:04:13,040
a product like a factory does uh super
4160
04:04:10,318 --> 04:04:14,799
fast for you okay so it's the speed at
4161
04:04:13,040 --> 04:04:16,399
which you can create an instance of a
4162
04:04:14,799 --> 04:04:18,000
class that the factory constructor
4163
04:04:18,000 --> 04:04:22,559
so let's now look at a factory
4164
04:04:20,318 --> 04:04:25,359
constructor that gives us an instance of
4165
04:04:22,559 --> 04:04:26,478
cap whose name is always fluffball all
4166
04:04:26,478 --> 04:04:29,920
the way to do that is you would say
4167
04:04:29,920 --> 04:04:36,960
and you would say cat dot fluffball
4168
04:04:33,680 --> 04:04:39,120
so you say any class called cat which is
4169
04:04:36,959 --> 04:04:41,039
this class has a function called
4170
04:04:39,120 --> 04:04:43,359
fluffball which is this factory
4171
04:04:41,040 --> 04:04:45,040
constructor and then you would put your
4172
04:04:45,040 --> 04:04:49,199
and then what you need to do is to kind
4173
04:04:49,199 --> 04:04:53,359
set up your class instance in this case
4174
04:04:51,600 --> 04:04:54,559
like if you say curly brackets and say
4175
04:04:56,959 --> 04:05:02,159
like that that's how you're basically
4176
04:04:59,520 --> 04:05:04,000
creating an instance of your class but
4177
04:05:02,159 --> 04:05:04,879
the usual way of doing that is you say
4178
04:05:16,719 --> 04:05:20,238
see that i've kind of like forgotten the
4179
04:05:21,120 --> 04:05:26,560
syntax for factory uh so let's go i'm
4180
04:05:24,318 --> 04:05:30,879
gonna bring up safari here and let's go
4181
04:05:26,559 --> 04:05:33,039
and say guard factory constructor
4182
04:05:30,879 --> 04:05:35,599
i'll bring bring up here factory
4183
04:05:33,040 --> 04:05:37,920
constructor so let's say factory
4184
04:05:35,600 --> 04:05:40,079
and let's go and see an example and you
4185
04:05:37,920 --> 04:05:42,478
can see here it says factory logger like
4186
04:05:40,079 --> 04:05:44,559
that okay and there's a factory logger
4187
04:05:44,559 --> 04:05:48,879
are basically so what what it's
4188
04:05:46,559 --> 04:05:51,519
basically saying in here is saying that
4189
04:05:48,879 --> 04:05:53,519
this in this function you need to return
4190
04:05:51,520 --> 04:05:55,120
something okay so let's close that
4191
04:05:53,520 --> 04:05:57,760
safari window and what we're going to do
4192
04:05:55,120 --> 04:05:59,279
in here we're going to say return cat
4193
04:05:57,760 --> 04:06:01,359
and as the name we're gonna say
4194
04:05:59,279 --> 04:06:05,040
fluffball all right so that's how you
4195
04:06:01,359 --> 04:06:06,720
would create like a factory constructor
4196
04:06:05,040 --> 04:06:09,199
so what you're doing here is saying that
4197
04:06:06,719 --> 04:06:11,519
i have a constructor called fluffball
4198
04:06:09,199 --> 04:06:13,760
whose return value is a cat
4199
04:06:11,520 --> 04:06:15,920
but inside i have some special logic
4200
04:06:13,760 --> 04:06:18,000
that kind of packages it up just like
4201
04:06:18,000 --> 04:06:21,279
let's go in here instead of doing cat
4202
04:06:19,760 --> 04:06:24,880
fluff ball like that then you can just
4203
04:06:21,279 --> 04:06:26,720
say cat dot fluffball okay so it kind of
4204
04:06:28,639 --> 04:06:33,599
it became like a convenient function in
4205
04:06:31,359 --> 04:06:35,120
that you can just say cat fluff ball and
4206
04:06:39,040 --> 04:06:44,239
name and you can see by default it is
4207
04:06:44,238 --> 04:06:49,198
fluffball 2 print and it gets printed to
4208
04:06:49,199 --> 04:06:53,199
so that's how you would create a factory
4209
04:06:51,359 --> 04:06:54,880
constructor and a factory constructor is
4210
04:06:53,199 --> 04:06:56,880
really really important when you're
4211
04:06:54,879 --> 04:06:58,478
talking about class clusters
4212
04:06:56,879 --> 04:07:00,959
we haven't talked about class clusters
4213
04:06:58,478 --> 04:07:03,599
and to be honest with you i don't think
4214
04:07:00,959 --> 04:07:04,559
that we're gonna talk about that in this
4215
04:07:04,559 --> 04:07:08,639
i don't think anywhere in this course
4216
04:07:13,040 --> 04:07:18,479
in the context of dart and abstract
4217
04:07:15,279 --> 04:07:20,159
classes a factory constructor does not
4218
04:07:20,159 --> 04:07:26,398
have to return an instance of the same
4219
04:07:23,600 --> 04:07:27,520
class all right so it can actually
4220
04:07:29,600 --> 04:07:35,279
but i highly suggest that you actually
4221
04:07:32,959 --> 04:07:37,198
go and read about factory constructors
4222
04:07:39,199 --> 04:07:42,479
dart and you will see some examples of
4223
04:07:43,359 --> 04:07:47,199
they are really useful if you're working
4224
04:07:44,959 --> 04:07:48,879
with a lot of data and you're doing like
4225
04:07:52,559 --> 04:07:56,799
i don't think it's so useful right now
4226
04:07:56,799 --> 04:08:01,438
but know that it is there available for
4227
04:08:01,439 --> 04:08:06,960
i leave it up to you to go and read more
4228
04:08:08,238 --> 04:08:11,600
and we've now talked about factory
4229
04:08:11,600 --> 04:08:17,199
now let's talk a little bit about
4230
04:08:14,879 --> 04:08:20,719
custom operators so i'm going to bring
4231
04:08:22,478 --> 04:08:26,879
a custom operator in dart is
4232
04:08:27,520 --> 04:08:33,439
an operator such as an equal sign or
4233
04:08:30,478 --> 04:08:37,198
equal equal sign for for instance
4234
04:08:33,439 --> 04:08:39,040
um checking equality um of an instance
4235
04:08:37,199 --> 04:08:40,399
of an object with another instance of
4236
04:08:40,398 --> 04:08:47,358
um a custom operator allows you in dart
4237
04:08:42,959 --> 04:08:50,079
to override the ability of your class to
4238
04:08:47,359 --> 04:08:52,479
be compared to or added to or
4239
04:08:50,079 --> 04:08:54,158
subtracted from multiplied with
4240
04:08:54,158 --> 04:08:59,520
with your own logic now let's see what i
4241
04:08:59,520 --> 04:09:05,279
you have final uh cat one and that is
4242
04:09:02,478 --> 04:09:07,760
equal to cat with the name of foo
4243
04:09:05,279 --> 04:09:09,600
then you say okay i have cat two now
4244
04:09:09,600 --> 04:09:16,238
and then you'd say if cat one is exactly
4245
04:09:12,639 --> 04:09:19,519
the same as cat 2 prints they are equal
4246
04:09:16,238 --> 04:09:21,760
otherwise say print they are not equal
4247
04:09:22,959 --> 04:09:26,559
these two instances have the exact same
4248
04:09:27,359 --> 04:09:30,479
and if you run this code now you will
4249
04:09:30,478 --> 04:09:34,799
that dart is said it says that they're
4250
04:09:32,158 --> 04:09:35,920
not equal although internally you may
4251
04:09:35,920 --> 04:09:41,359
for me in my project anytime
4252
04:09:41,359 --> 04:09:46,720
i want them to be considered equal and
4253
04:09:46,719 --> 04:09:51,278
things get interesting because then you
4254
04:09:51,279 --> 04:09:57,920
function or operator at the language
4255
04:09:55,040 --> 04:10:00,640
level only for your class so the way to
4256
04:09:57,920 --> 04:10:02,799
do that is you would go and start by
4257
04:10:06,559 --> 04:10:10,799
bool operator equal equal covariance i'm
4258
04:10:09,600 --> 04:10:13,040
going to explain all this don't worry
4259
04:10:10,799 --> 04:10:14,238
about it cat and you say cat and then
4260
04:10:16,478 --> 04:10:20,719
name is me okay and then we get a
4261
04:10:22,959 --> 04:10:27,679
so don't worry about all of this um i
4262
04:10:31,520 --> 04:10:37,880
so let's start by looking at what i just
4263
04:10:40,079 --> 04:10:43,760
overwrite is very important term for you
4264
04:10:42,318 --> 04:10:45,359
to understand in object-oriented
4265
04:10:53,040 --> 04:10:58,239
inheriting from that class in in our
4266
04:10:55,279 --> 04:11:00,640
case for instance class cat you can see
4267
04:10:58,238 --> 04:11:03,520
that it doesn't have any extents
4268
04:11:00,639 --> 04:11:06,000
but by default in dart every class
4269
04:11:03,520 --> 04:11:08,720
inherits implicitly from the object
4270
04:11:06,000 --> 04:11:09,760
class so you could just say extends
4271
04:11:09,760 --> 04:11:13,040
and that is the exact same thing as
4272
04:11:14,719 --> 04:11:21,519
just know that cat comes from object
4273
04:11:17,760 --> 04:11:24,719
an object internally already defines an
4274
04:11:21,520 --> 04:11:26,079
operator called equal equal that returns
4275
04:11:26,079 --> 04:11:29,840
a boolean is a value that can either
4276
04:11:29,840 --> 04:11:34,880
that can either be true or false
4277
04:11:32,719 --> 04:11:37,920
and it's great just for saying that is
4278
04:11:37,920 --> 04:11:43,920
is this this or not kind of like that
4279
04:11:40,478 --> 04:11:46,799
so a boolean is a data type all right so
4280
04:11:43,920 --> 04:11:49,040
that operator an operator is a keyword
4281
04:11:46,799 --> 04:11:52,158
as well in dart basically saying telling
4282
04:11:49,040 --> 04:11:54,319
dart that we are going to change
4283
04:11:54,318 --> 04:11:59,760
the functionality of this equally equal
4284
04:11:57,199 --> 04:12:01,600
operator that is defined at the object
4285
04:12:03,439 --> 04:12:07,760
let's actually bring the extents here
4286
04:12:05,439 --> 04:12:09,680
and go into this object definition just
4287
04:12:07,760 --> 04:12:11,760
select it right click on it and say go
4288
04:12:11,760 --> 04:12:16,318
and search for operator equal equal
4289
04:12:14,639 --> 04:12:17,599
you'll see that it is defined right
4290
04:12:17,600 --> 04:12:22,318
and there's lots of documentation about
4291
04:12:22,318 --> 04:12:26,959
so that's this syntax we're overriding
4292
04:12:24,719 --> 04:12:29,358
we're changing the definition of that
4293
04:12:30,799 --> 04:12:35,039
then since this is a simple function an
4294
04:12:33,120 --> 04:12:37,920
operator in itself is a function it
4295
04:12:35,040 --> 04:12:39,359
actually you can see it starts it has
4296
04:12:41,040 --> 04:12:46,319
in the parenthesis you get the value
4297
04:12:43,760 --> 04:12:50,000
that that operator is comparing your
4298
04:12:51,279 --> 04:12:54,800
that value that your class is being
4299
04:12:53,040 --> 04:12:56,319
compared to also needs to be a cat
4300
04:12:54,799 --> 04:12:58,478
because you cannot in dart is not
4301
04:12:56,318 --> 04:13:00,398
recommended that you compare tune
4302
04:12:58,478 --> 04:13:01,519
classes of different types with each
4303
04:13:01,520 --> 04:13:07,199
here we say covariance covariance
4304
04:13:04,559 --> 04:13:08,478
is a keyword that you merely use in dart
4305
04:13:07,199 --> 04:13:10,239
but i think it's important for you to
4306
04:13:10,238 --> 04:13:15,600
that it tells dart that although
4307
04:13:15,600 --> 04:13:21,120
we said that the parameter that comes in
4308
04:13:17,920 --> 04:13:23,760
is of type object but in our case we are
4309
04:13:21,120 --> 04:13:26,319
sure that the value that comes in this
4310
04:13:23,760 --> 04:13:28,960
function is actually a cat all right so
4311
04:13:28,959 --> 04:13:34,079
forget what the super class which is
4312
04:13:31,359 --> 04:13:36,079
object defines as the parameter type for
4313
04:13:34,079 --> 04:13:39,279
this parameter because if you remove
4314
04:13:41,520 --> 04:13:46,720
but if it's a covariant you're kind of
4315
04:13:46,719 --> 04:13:51,039
assumption all right so we say okay an
4316
04:13:48,959 --> 04:13:52,719
equal so we're mean compared our
4317
04:13:51,040 --> 04:13:54,560
instance of cat is being compared with
4318
04:13:54,559 --> 04:13:57,840
and what we're doing is that we need to
4319
04:13:56,079 --> 04:13:59,680
return a boolean saying whether they're
4320
04:13:57,840 --> 04:14:00,960
equal or not and you can see i'm just
4321
04:14:00,959 --> 04:14:04,079
i'm just comparing the name which is our
4322
04:14:04,079 --> 04:14:09,680
with the other instances name all right
4323
04:14:07,439 --> 04:14:12,079
now when you do that as you saw then we
4324
04:14:09,680 --> 04:14:14,880
get a problem here which is kind of like
4325
04:14:12,079 --> 04:14:17,120
a warning that tells you that okay
4326
04:14:14,879 --> 04:14:18,238
now that you've you've overwritten this
4327
04:14:18,238 --> 04:14:23,198
operator you also need to override the
4328
04:14:24,719 --> 04:14:28,879
to honestly i don't think like hashcode
4329
04:14:26,478 --> 04:14:32,000
is such an important thing to talk about
4330
04:14:28,879 --> 04:14:34,719
right now but just know that hashcode is
4331
04:14:36,398 --> 04:14:41,840
to your or a special identifier that you
4332
04:14:39,279 --> 04:14:42,560
assign to your instance of classes that
4333
04:14:42,559 --> 04:14:47,439
then used inside collections for
4334
04:14:44,959 --> 04:14:48,719
instance if you put your instance of of
4335
04:14:50,639 --> 04:14:54,959
then or sorry or inside a map as it is
4336
04:14:53,279 --> 04:14:56,960
called in dart which we talked about i
4337
04:14:58,398 --> 04:15:01,920
yes in chapter four so if you didn't
4338
04:14:59,920 --> 04:15:03,760
watch chapter four i strongly suggest
4339
04:15:20,158 --> 04:15:25,520
knows that the the keys inside its map
4340
04:15:23,600 --> 04:15:27,439
or the values inside the set are
4341
04:15:25,520 --> 04:15:28,880
actually unique it's using this hash
4342
04:15:30,158 --> 04:15:34,639
if you see if i go here and say command
4343
04:15:32,478 --> 04:15:37,840
dot to get a suggestion how to fix this
4344
04:15:34,639 --> 04:15:39,920
it says create method hash code
4345
04:15:37,840 --> 04:15:40,719
that is what is required to fix this
4346
04:15:40,719 --> 04:15:45,679
so you can see that it's an override
4347
04:15:43,040 --> 04:15:48,960
which means that this hash code
4348
04:15:45,680 --> 04:15:50,800
getter was defined on the object class
4349
04:15:48,959 --> 04:15:52,719
if we go to object and look for that you
4350
04:15:50,799 --> 04:15:53,679
can see that it is actually defined
4351
04:15:53,680 --> 04:15:57,840
and we're overwriting its value
4352
04:15:56,079 --> 04:16:00,639
and here it says i'm going to go to
4353
04:16:00,639 --> 04:16:06,000
super is our object so as super class
4354
04:16:03,600 --> 04:16:08,000
that sits up above us all right
4355
04:16:06,000 --> 04:16:09,840
but if you want to overwrite that in
4356
04:16:08,000 --> 04:16:12,158
case you in this case you can just say
4357
04:16:09,840 --> 04:16:14,000
okay don't get the supers hash code just
4358
04:16:12,158 --> 04:16:15,439
get the name hashtag and to be honest
4359
04:16:15,439 --> 04:16:20,639
very technical stuff which i don't think
4360
04:16:17,680 --> 04:16:23,199
belongs right in this chapter six but
4361
04:16:20,639 --> 04:16:26,238
just know that here we're creating an
4362
04:16:23,199 --> 04:16:29,840
identifier for our cat class
4363
04:16:26,238 --> 04:16:31,359
which allows dart to understand
4364
04:16:31,359 --> 04:16:39,600
cat classes instances are placed inside
4365
04:16:35,359 --> 04:16:41,359
collections such as a map or a set
4366
04:16:41,359 --> 04:16:45,199
if they're unique or not okay
4367
04:16:47,120 --> 04:16:52,239
so now that we've done all of this we
4368
04:16:52,238 --> 04:16:55,600
and you will now see that it says they
4369
04:16:55,600 --> 04:16:58,960
that's that's all we wanted that's
4370
04:16:58,959 --> 04:17:02,959
but there was a lot of code actually i
4371
04:17:00,879 --> 04:17:03,920
don't know it's like four lines of code
4372
04:17:03,920 --> 04:17:08,559
this is not even considered a line of
4373
04:17:09,199 --> 04:17:15,520
is a hint to the analyzer but uh
4374
04:17:15,520 --> 04:17:18,640
you could just say it's pretty much just
4375
04:17:16,719 --> 04:17:19,358
two lines of code but it is quite a lot
4376
04:17:19,359 --> 04:17:22,479
new things to be honest with you for you
4377
04:17:23,520 --> 04:17:27,600
so i leave this here so you can have a
4378
04:17:30,398 --> 04:17:34,559
for this chapter to be honest with you
4379
04:17:32,478 --> 04:17:37,039
we've talked a lot now in this chapter
4380
04:17:34,559 --> 04:17:39,760
about enumeration switch statements
4381
04:17:37,040 --> 04:17:41,040
classes objects uh constructors
4382
04:17:42,559 --> 04:17:48,000
abstract classes inheritance a lot so it
4383
04:17:46,158 --> 04:17:48,959
was quite a heavy chapter this chapter
4384
04:17:51,120 --> 04:17:55,279
go and read the also the official
4385
04:17:53,600 --> 04:17:57,120
documentation for dart because as i said
4386
04:17:55,279 --> 04:17:58,720
we don't have the possibility to talk
4387
04:18:00,000 --> 04:18:04,398
otherwise this course will just be
4388
04:18:02,559 --> 04:18:06,559
enormously big and that's not what i
4389
04:18:06,559 --> 04:18:09,119
please go and read the documentation
4390
04:18:08,079 --> 04:18:11,120
about the things that we talked about
4391
04:18:09,120 --> 04:18:14,560
especially especially object oriented
4392
04:18:17,600 --> 04:18:21,680
in the next chapter we're going to talk
4393
04:18:19,359 --> 04:18:23,279
about some advanced features in dart
4394
04:18:24,639 --> 04:18:30,959
async operations streams and generators
4395
04:18:31,439 --> 04:18:35,439
please have a look about at the
4396
04:18:32,879 --> 04:18:37,519
documentation and i will see you in the
4397
04:18:37,520 --> 04:18:42,238
hello everyone and welcome to chapter 7
4398
04:18:40,158 --> 04:18:44,799
of this flutter course in this chapter
4399
04:18:42,238 --> 04:18:46,000
we're going to talk about advanced dart
4400
04:18:46,000 --> 04:18:50,000
things such as extensions futures
4401
04:18:50,959 --> 04:18:56,079
async await generators and um
4402
04:18:57,040 --> 04:19:00,319
uh i'm kind of assuming that you've
4403
04:18:58,799 --> 04:19:01,759
already set up the project that we've
4404
04:19:00,318 --> 04:19:03,920
talked about in the previous chapter so
4405
04:19:01,760 --> 04:19:05,439
i'm not going to go through that again
4406
04:19:03,920 --> 04:19:07,600
and then i'm assuming that we have like
4407
04:19:05,439 --> 04:19:10,639
some sort of an iphone simulator so
4408
04:19:07,600 --> 04:19:11,920
or an android emulator or any device
4409
04:19:10,639 --> 04:19:13,760
that you may be able to test your
4410
04:19:13,760 --> 04:19:18,559
i'm going to bring up my project here so
4411
04:19:16,238 --> 04:19:19,920
i'm going to place it right there
4412
04:19:18,559 --> 04:19:21,278
this is how we left the project in the
4413
04:19:21,279 --> 04:19:26,319
and then i'm going to do command shift p
4414
04:19:23,520 --> 04:19:27,840
on mac or control shift p in linux and
4415
04:19:26,318 --> 04:19:30,318
windows in order to select the device
4416
04:19:27,840 --> 04:19:34,000
and i'm just going to say iphone 13 pro
4417
04:19:30,318 --> 04:19:35,039
which is a simulator that i have here
4418
04:19:35,040 --> 04:19:39,680
right there and then i'm just going to
4419
04:19:39,680 --> 04:19:43,760
run without debugging okay so this is
4420
04:19:42,238 --> 04:19:45,198
going to take its time and i just
4421
04:19:45,199 --> 04:19:49,040
then use this time to explain a little
4422
04:19:49,920 --> 04:19:53,920
as you can see here extensions are
4423
04:19:53,920 --> 04:19:58,719
the programmer and dart in order to er
4424
04:19:57,199 --> 04:19:59,439
are there the ability for the programmer
4425
04:20:00,639 --> 04:20:05,439
or add functionality to an existing
4426
04:20:03,279 --> 04:20:09,279
class in chapter six we talked about
4427
04:20:05,439 --> 04:20:10,318
classes and objects so i kind of um
4428
04:20:10,318 --> 04:20:14,398
wish for everyone who is in this chapter
4429
04:20:12,639 --> 04:20:15,760
to act actually have followed that
4430
04:20:15,760 --> 04:20:19,120
uh i'm actually going to go here and go
4431
04:20:17,439 --> 04:20:21,600
to do not disturb yeah i am actually
4432
04:20:19,120 --> 04:20:23,600
there so let's have a look at a simple
4433
04:20:21,600 --> 04:20:25,120
extension in dart and how we can use
4434
04:20:23,600 --> 04:20:27,040
that i can see that the programming
4435
04:20:25,120 --> 04:20:28,640
program is running i'm going to delete
4436
04:20:27,040 --> 04:20:32,000
the old code that we had and i'm going
4437
04:20:28,639 --> 04:20:33,519
to bring my face to that bottom right
4438
04:20:32,000 --> 04:20:36,478
and i'm just going to be a little bit
4439
04:20:36,478 --> 04:20:39,039
captions that i'm displaying on the
4440
04:20:37,760 --> 04:20:40,960
screen and that they're blocking the
4441
04:20:39,040 --> 04:20:43,279
screen so i'll just make sure that you
4442
04:20:45,439 --> 04:20:49,359
um let's also remove all of that and
4443
04:20:47,760 --> 04:20:52,398
then let's just say that we have a
4444
04:20:49,359 --> 04:20:55,600
simple cat class here who has a name
4445
04:20:52,398 --> 04:20:56,879
and we can go in here and say final
4446
04:20:56,879 --> 04:21:00,799
is yeah an instance of cat and i can say
4447
04:21:02,158 --> 04:21:07,359
actually we have to provide a name i can
4448
04:21:03,760 --> 04:21:09,120
see here and let's just say fluffers
4449
04:21:09,120 --> 04:21:13,840
dot's name okay so we print that name
4450
04:21:13,840 --> 04:21:19,680
just like that and um perhaps gonna
4451
04:21:17,600 --> 04:21:21,680
bring up visual studio code so you can
4452
04:21:19,680 --> 04:21:24,079
actually see the output so command s and
4453
04:21:24,079 --> 04:21:27,359
where are we getting this there are
4454
04:21:25,359 --> 04:21:29,120
equals oh that's an old command so
4455
04:21:27,359 --> 04:21:30,479
command is and you can see fluffers is
4456
04:21:29,120 --> 04:21:33,600
printed to the screen so that's because
4457
04:21:30,478 --> 04:21:34,879
we have the name here okay so i'm also
4458
04:21:33,600 --> 04:21:36,800
going to get rid of this caption right
4459
04:21:34,879 --> 04:21:39,519
now so you can see the entirety of the
4460
04:21:36,799 --> 04:21:41,278
code so like that bring it down here i'm
4461
04:21:41,279 --> 04:21:45,279
simulator and bring it to another screen
4462
04:21:43,199 --> 04:21:47,359
okay so now let's say that you want to
4463
04:21:45,279 --> 04:21:49,600
add a functionality to this or a
4464
04:21:49,600 --> 04:21:55,120
that allows a cat to run or allow the
4465
04:21:52,719 --> 04:21:57,438
cat to jump so one way to do that is to
4466
04:21:57,439 --> 04:22:02,158
cat class class itself and create a
4467
04:22:00,238 --> 04:22:04,478
function in there but what you can also
4468
04:22:02,158 --> 04:22:07,840
do is to go and say extension
4469
04:22:04,478 --> 04:22:10,000
for instance run on cat that's the
4470
04:22:07,840 --> 04:22:11,439
syntax for creating an extension what
4471
04:22:16,238 --> 04:22:20,879
a new functionality that is called run
4472
04:22:18,799 --> 04:22:22,079
now this is not the name of the function
4473
04:22:20,879 --> 04:22:23,198
itself it's just the name of your
4474
04:22:23,199 --> 04:22:27,439
and you don't have to really know about
4475
04:22:25,439 --> 04:22:29,359
the name right now so much it's just
4476
04:22:27,439 --> 04:22:30,720
when you can go and become more advanced
4477
04:22:29,359 --> 04:22:32,479
in dart and you for instance create
4478
04:22:33,680 --> 04:22:37,520
create extensions on different classes
4479
04:22:35,760 --> 04:22:39,199
for instance in your library and then
4480
04:22:37,520 --> 04:22:41,279
people or programmers who use your
4481
04:22:43,359 --> 04:22:47,120
specific extensions that you've included
4482
04:22:47,120 --> 04:22:52,079
in their code or they can exclude them
4483
04:22:52,079 --> 04:22:55,680
just know that it's just a name on the
4484
04:22:53,840 --> 04:22:57,760
extension so it doesn't mean so much
4485
04:22:55,680 --> 04:22:59,600
right now okay so then you can just
4486
04:22:57,760 --> 04:23:02,000
create a function that has no return
4487
04:22:59,600 --> 04:23:04,800
value called run and then you can say
4488
04:23:06,318 --> 04:23:09,760
and you know this syntax from the
4489
04:23:07,920 --> 04:23:11,920
previous chapters that this is how you
4490
04:23:09,760 --> 04:23:15,478
format a string and then in here you're
4491
04:23:11,920 --> 04:23:18,000
basically doing um spring interpolation
4492
04:23:15,478 --> 04:23:20,238
interpolation i think it's called
4493
04:23:18,000 --> 04:23:22,000
and you're including that name inside
4494
04:23:20,238 --> 04:23:23,600
your own string so the result is going
4495
04:23:24,559 --> 04:23:29,519
the name of this cat instance
4496
04:23:31,680 --> 04:23:36,479
then you can every cat instance in your
4497
04:23:36,478 --> 04:23:41,599
that function called run so you can just
4498
04:23:41,600 --> 04:23:46,158
and command this and you can see that it
4499
04:23:43,600 --> 04:23:49,760
says cap fluffers is running so
4500
04:23:46,158 --> 04:23:52,318
just know that extensions are
4501
04:23:49,760 --> 04:23:53,760
they're a great tool for you to use if
4502
04:23:53,760 --> 04:23:57,279
functionality that you're adding to an
4503
04:23:55,439 --> 04:23:58,479
existing class which it doesn't really
4504
04:24:01,840 --> 04:24:05,920
it may for instance belong in the
4505
04:24:04,158 --> 04:24:07,199
current source file that you're working
4506
04:24:07,199 --> 04:24:12,158
extensions are very very useful and
4507
04:24:10,559 --> 04:24:14,559
but i also believe that they need to
4508
04:24:12,158 --> 04:24:16,318
kind of be used with care kind of like
4509
04:24:14,559 --> 04:24:17,840
sparsely so when you really need an
4510
04:24:16,318 --> 04:24:20,478
extension you could just go and create
4511
04:24:17,840 --> 04:24:23,199
an extension and they have limitations
4512
04:24:20,478 --> 04:24:24,959
and as you get more used to
4513
04:24:23,199 --> 04:24:27,600
programming in dart you will understand
4514
04:24:24,959 --> 04:24:29,278
their limitations a little bit better so
4515
04:24:30,238 --> 04:24:34,079
can be used another example of an
4516
04:24:32,559 --> 04:24:34,959
extension is for instance if you had a
4517
04:24:41,279 --> 04:24:45,760
so this is an instance property and then
4518
04:24:45,760 --> 04:24:51,040
and then you say command dot individual
4519
04:24:48,318 --> 04:24:52,879
studio code on mac or control dot in
4520
04:24:51,040 --> 04:24:55,920
linux and windows and you create a
4521
04:24:52,879 --> 04:24:57,920
constructor for your personal class okay
4522
04:24:55,920 --> 04:24:59,680
so that's how you create an instance of
4523
04:24:57,920 --> 04:25:01,600
your person class then you can go in
4524
04:25:02,398 --> 04:25:08,879
final fou is person whose first name is
4525
04:25:05,600 --> 04:25:11,199
who and whose last name is bar okay
4526
04:25:08,879 --> 04:25:13,759
and in here let's say you want to be
4527
04:25:11,199 --> 04:25:16,079
able to calculate a person's full name
4528
04:25:13,760 --> 04:25:17,840
all right so what you could do is to you
4529
04:25:21,439 --> 04:25:27,040
and then here you could just say i have
4530
04:25:23,920 --> 04:25:28,478
a i want to calculate the full name so
4531
04:25:27,040 --> 04:25:29,359
that the result type is going to be a
4532
04:25:29,359 --> 04:25:32,479
and then you want to create a getter now
4533
04:25:31,199 --> 04:25:33,760
we haven't talked about getter so much
4534
04:25:32,478 --> 04:25:35,599
but just know that it's kind of like a
4535
04:25:33,760 --> 04:25:37,359
property it's a property that can only
4536
04:25:35,600 --> 04:25:38,960
be read forever but it cannot be written
4537
04:25:40,639 --> 04:25:45,439
as the name of the property and you will
4538
04:25:50,000 --> 04:25:53,600
so what you're saying here is that i
4539
04:25:51,520 --> 04:25:55,520
have a getter whose return type is
4540
04:25:53,600 --> 04:25:56,880
string and whose name is full name and
4541
04:25:55,520 --> 04:25:58,960
it returns the first name and last
4542
04:25:56,879 --> 04:26:01,759
memory with the space in between and
4543
04:25:58,959 --> 04:26:02,719
then in here you could just say print
4544
04:26:04,398 --> 04:26:09,278
and command s then i will bring the
4545
04:26:07,279 --> 04:26:12,079
i'll remove the caption so you can see
4546
04:26:09,279 --> 04:26:13,279
that foo bar is printed to the screen
4547
04:26:13,279 --> 04:26:19,199
so that's for extensions and i'm gonna
4548
04:26:16,238 --> 04:26:20,639
note that here in my i'm gonna mark it
4549
04:26:19,199 --> 04:26:23,439
in my notes that we've talked about
4550
04:26:23,439 --> 04:26:27,279
now the next thing to talk about the
4551
04:26:27,279 --> 04:26:30,960
and as you can see here future is a data
4552
04:26:29,120 --> 04:26:32,560
to be returned in the future as its name
4553
04:26:33,520 --> 04:26:36,880
and that is part of something called
4554
04:26:35,040 --> 04:26:39,199
asynchronous programming if you haven't
4555
04:26:36,879 --> 04:26:40,799
uh been doing uh programming before you
4556
04:26:40,799 --> 04:26:44,799
familiar with the term synchronous or
4557
04:26:44,799 --> 04:26:49,599
a synchronous task is a task that
4558
04:26:47,040 --> 04:26:51,920
happens when you ask for it and it
4559
04:26:49,600 --> 04:26:53,199
returns with the data that you ask for
4560
04:26:54,879 --> 04:27:00,639
um what is 2 plus 2 and then we'll say
4561
04:26:58,559 --> 04:27:03,600
okay it's four that's the synchronous
4562
04:27:00,639 --> 04:27:06,398
task but if you for instance say to your
4563
04:27:06,398 --> 04:27:09,840
go to the grocery store today please and
4564
04:27:09,840 --> 04:27:14,079
that is not gonna happen in this instant
4565
04:27:11,760 --> 04:27:16,398
it's i mean even if you even if you're
4566
04:27:14,079 --> 04:27:18,079
the grocery stores right next to your
4567
04:27:16,398 --> 04:27:19,358
house or your apartment then your friend
4568
04:27:19,359 --> 04:27:25,040
get get ready put put on shoes go to the
4569
04:27:22,318 --> 04:27:27,600
store get the mail can come back so
4570
04:27:25,040 --> 04:27:31,040
um that that is an asynchronous task so
4571
04:27:27,600 --> 04:27:32,559
an asynchronous task is basically a task
4572
04:27:32,559 --> 04:27:36,000
whose results are not returned
4573
04:27:36,799 --> 04:27:40,079
up until this point we've looked at
4574
04:27:38,158 --> 04:27:41,840
functions that i'm actually going to
4575
04:27:40,079 --> 04:27:44,238
remove all of this code from here so
4576
04:27:41,840 --> 04:27:46,880
that we don't have all of that
4577
04:27:44,238 --> 04:27:48,238
now we only have the void test function
4578
04:27:51,600 --> 04:27:55,520
all the functions that we've written so
4579
04:27:53,680 --> 04:27:57,600
far have been synchronous functions in
4580
04:27:55,520 --> 04:28:00,399
that for instance you would say
4581
04:28:00,398 --> 04:28:05,599
two and then it gets an integer of a and
4582
04:28:03,199 --> 04:28:06,720
it just says a multiplied by two all
4583
04:28:06,719 --> 04:28:11,278
and actually sorry hint so it returns an
4584
04:28:09,760 --> 04:28:13,120
integer the function call the function
4585
04:28:11,279 --> 04:28:14,720
name is called multiplied by two it
4586
04:28:13,120 --> 04:28:16,079
takes an integer as a parameter and just
4587
04:28:14,719 --> 04:28:18,318
multiplies that integer by two and
4588
04:28:16,079 --> 04:28:21,039
returns it it's a synchronous operation
4589
04:28:18,318 --> 04:28:23,119
okay however in dirt if you wanna work
4590
04:28:21,040 --> 04:28:24,080
with asynchronous operations that you
4591
04:28:27,199 --> 04:28:33,040
let's have a look at that um let's say
4592
04:28:33,040 --> 04:28:37,840
multiplied by two it which it may take
4593
04:28:35,600 --> 04:28:40,318
some time in order to multiply a value
4594
04:28:37,840 --> 04:28:41,760
okay this is hypothetical because yeah
4595
04:28:40,318 --> 04:28:43,119
the multiplication is going to be done
4596
04:28:41,760 --> 04:28:44,960
immediately but we're just going to
4597
04:28:43,120 --> 04:28:46,399
assume that yeah this is a complicated
4598
04:28:44,959 --> 04:28:48,879
multiplication and it will take some
4599
04:28:46,398 --> 04:28:51,039
time all right so let's say future and
4600
04:28:48,879 --> 04:28:53,119
then you would say what is the actual
4601
04:28:51,040 --> 04:28:55,760
future what does it contain what data
4602
04:28:53,120 --> 04:28:57,040
type can we say integer and then we say
4603
04:28:59,279 --> 04:29:04,279
and it takes a value of int a heavy
4604
04:29:04,279 --> 04:29:07,760
multiplies by two something like that
4605
04:29:07,760 --> 04:29:15,600
so it says i return a future okay now
4606
04:29:16,879 --> 04:29:21,599
responsibility is to create and package
4607
04:29:19,199 --> 04:29:23,120
up an integer and return it inside a
4608
04:29:23,120 --> 04:29:27,680
if you for instance in here say okay
4609
04:29:27,680 --> 04:29:32,398
you see that it says l10 isn't
4610
04:29:29,359 --> 04:29:34,479
compatible with the future of integer
4611
04:29:32,398 --> 04:29:37,198
because 10 is a synchronous value it's
4612
04:29:34,478 --> 04:29:39,358
right there it's present so what are you
4613
04:29:37,199 --> 04:29:42,000
doing here then you could say
4614
04:29:39,359 --> 04:29:43,760
okay what i do return is a future
4615
04:29:42,000 --> 04:29:45,279
and then you could say oh i'm going to
4616
04:29:45,279 --> 04:29:50,960
by a duration of three seconds okay
4617
04:29:49,120 --> 04:29:53,359
and then you'll see there's a second
4618
04:29:50,959 --> 04:29:57,438
parameter to this delayed function
4619
04:29:57,680 --> 04:30:02,398
uh if we have a look at delayed function
4620
04:30:00,238 --> 04:30:05,359
in here you see there is a second
4621
04:30:02,398 --> 04:30:06,079
parameter called future or a computation
4622
04:30:06,079 --> 04:30:09,840
in here what you're what you need to do
4623
04:30:09,840 --> 04:30:14,639
my second parameter is a function i'm
4624
04:30:12,000 --> 04:30:16,478
going to ignore its return value well
4625
04:30:14,639 --> 04:30:17,439
i'm just going to return the value of a
4626
04:30:17,439 --> 04:30:22,880
so let's actually see if we say
4627
04:30:20,398 --> 04:30:25,519
future delay duration seconds and then
4628
04:30:22,879 --> 04:30:29,839
we say the parameter is let's say e
4629
04:30:25,520 --> 04:30:32,960
and then i'm just going to say return a
4630
04:30:29,840 --> 04:30:34,318
what is this value going to be then
4631
04:30:32,959 --> 04:30:36,238
you know what we could actually look at
4632
04:30:34,318 --> 04:30:38,398
the documentation for future delayed so
4633
04:30:38,398 --> 04:30:41,920
so i'm going to go and open a new safari
4634
04:30:40,398 --> 04:30:43,599
window and i'm going to say future
4635
04:30:43,600 --> 04:30:46,399
this is the type of stuff that usually
4636
04:30:44,959 --> 04:30:48,559
happens anyways if you're programming
4637
04:30:46,398 --> 04:30:50,000
with dart i'm also going to increase the
4638
04:30:48,559 --> 04:30:50,879
size so that you can see it a little bit
4639
04:30:50,879 --> 04:30:54,398
and let's have a look at a future delay
4640
04:30:55,680 --> 04:31:00,639
here we can see how it's constructed uh
4641
04:31:00,639 --> 04:31:03,680
so you can see here that there is a
4642
04:31:02,158 --> 04:31:06,719
function that it doesn't basically take
4643
04:31:06,719 --> 04:31:12,000
i think the problem was that i may have
4644
04:31:08,719 --> 04:31:14,959
just created like a function that um was
4645
04:31:14,959 --> 04:31:19,039
this is how you would do that and i mean
4646
04:31:16,719 --> 04:31:20,318
it is a little bit strange argument like
4647
04:31:19,040 --> 04:31:22,000
i'm actually going to clean it up a
4648
04:31:22,000 --> 04:31:26,079
and then make this a constant as you can
4649
04:31:23,760 --> 04:31:28,000
see it's suggested here and then return
4650
04:31:26,079 --> 04:31:29,840
so i've written a lot of code i haven't
4651
04:31:28,000 --> 04:31:31,840
explained really what i've done here but
4652
04:31:29,840 --> 04:31:34,960
i will do that now so let's see
4653
04:31:31,840 --> 04:31:36,960
uh we're saying that we're returning an
4654
04:31:36,959 --> 04:31:39,679
it's not going to be returned
4655
04:31:38,238 --> 04:31:42,318
immediately it's going to take some time
4656
04:31:39,680 --> 04:31:44,639
for it to do its calculation okay so and
4657
04:31:42,318 --> 04:31:46,398
then here let's say a multiplied by 2 as
4658
04:31:44,639 --> 04:31:48,639
we as we promised in the function
4659
04:31:46,398 --> 04:31:50,158
signature okay so that's future int
4660
04:31:48,639 --> 04:31:52,079
this is the name of the function so
4661
04:31:50,158 --> 04:31:54,879
nothing magical about that and then it
4662
04:31:52,079 --> 04:31:56,559
takes a parameter that says integer a
4663
04:31:54,879 --> 04:31:59,519
in the function body itself we're saying
4664
04:31:56,559 --> 04:32:02,079
okay we're returning a future but we're
4665
04:31:59,520 --> 04:32:03,920
delaying its return by the duration of
4666
04:32:02,079 --> 04:32:06,478
three seconds so duration as you can see
4667
04:32:03,920 --> 04:32:08,318
is a class here if you go in it
4668
04:32:06,478 --> 04:32:09,679
actually is a constitution okay and then
4669
04:32:08,318 --> 04:32:11,119
there is a class on top probably
4670
04:32:15,520 --> 04:32:22,000
constitution in blah blah blah
4671
04:32:19,680 --> 04:32:24,479
constitution duration operator i believe
4672
04:32:22,000 --> 04:32:27,040
this is i mean the duration dart it's
4673
04:32:24,478 --> 04:32:28,158
probably just a class duration
4674
04:32:28,158 --> 04:32:32,559
if you look at here class duration so
4675
04:32:31,120 --> 04:32:34,239
so we're saying that we're creating a
4676
04:32:32,559 --> 04:32:36,398
duration as a first parameter to the
4677
04:32:34,238 --> 04:32:38,318
delayed function of the future so we're
4678
04:32:36,398 --> 04:32:40,559
saying that we're delaying this future's
4679
04:32:38,318 --> 04:32:41,840
return value by three seconds and then
4680
04:32:40,559 --> 04:32:43,920
it says okay i'm going to wait three
4681
04:32:41,840 --> 04:32:45,359
seconds but then i'm after i waited
4682
04:32:43,920 --> 04:32:46,318
three seconds i'm going to call this
4683
04:32:46,318 --> 04:32:50,238
and this is kind of like a shorthand for
4684
04:32:48,000 --> 04:32:52,719
creating a an inline function you could
4685
04:32:50,238 --> 04:32:54,799
also do it like this you say okay my
4686
04:32:52,719 --> 04:32:56,318
function that i'm providing to this
4687
04:32:54,799 --> 04:32:58,959
function so it's like you're passing a
4688
04:32:56,318 --> 04:33:00,719
function to the future delay function
4689
04:32:58,959 --> 04:33:03,679
and then in here you could just say okay
4690
04:33:00,719 --> 04:33:06,079
i return a multiplied by two and then a
4691
04:33:03,680 --> 04:33:08,319
semicolon so this is probably a little
4692
04:33:12,958 --> 04:33:17,680
we could actually use this function in
4693
04:33:21,759 --> 04:33:26,798
i mean now that actually we we've now
4694
04:33:24,000 --> 04:33:29,039
talked a little bit a bit about future
4695
04:33:29,039 --> 04:33:32,000
future then you need to know something
4696
04:33:37,680 --> 04:33:41,760
are very related to each other but quite
4697
04:33:39,919 --> 04:33:42,560
different in their meaning and
4698
04:33:42,561 --> 04:33:46,639
i just want to now explain actually
4699
04:33:46,638 --> 04:33:52,319
async is a key word in dart that marks a
4700
04:33:49,680 --> 04:33:53,840
function as asynchronous in that
4701
04:33:52,319 --> 04:33:55,680
remember synchronous is something that
4702
04:33:53,840 --> 04:33:56,958
returns immediately and asynchronous is
4703
04:33:55,680 --> 04:33:59,520
something that does not return
4704
04:33:56,958 --> 04:34:02,560
immediately takes some time however to
4705
04:33:59,520 --> 04:34:04,958
mark a function async in here it means
4706
04:34:02,561 --> 04:34:07,920
that this function internally
4707
04:34:04,958 --> 04:34:09,840
can execute commands that do not return
4708
04:34:10,958 --> 04:34:16,079
ac marking a function as async it
4709
04:34:13,919 --> 04:34:18,560
it it means that this function
4710
04:34:16,080 --> 04:34:20,320
internally calls other functions that do
4711
04:34:20,319 --> 04:34:26,719
let's now say final um result is
4712
04:34:28,561 --> 04:34:32,480
now that we've done that let me just
4713
04:34:30,561 --> 04:34:34,719
print the result and you'd be surprised
4714
04:34:34,719 --> 04:34:37,600
when we do that and you'll see that it
4715
04:34:36,240 --> 04:34:39,199
is not what you think it's not going to
4716
04:34:39,199 --> 04:34:43,760
so i'm gonna get rid of this caption so
4717
04:34:41,680 --> 04:34:45,920
that you can see the the result and i'm
4718
04:34:43,759 --> 04:34:47,278
gonna clear the results in the console
4719
04:34:47,278 --> 04:34:52,319
and you'll see that what got printed to
4720
04:34:49,199 --> 04:34:54,400
the screen is actually the future is not
4721
04:34:52,319 --> 04:34:56,561
is not what you think it's not
4722
04:34:54,400 --> 04:34:59,359
the value 20 which should be a
4723
04:34:56,561 --> 04:35:00,879
multiplied by 2 which should be 20. so
4724
04:34:59,359 --> 04:35:03,118
what happened here is that when you call
4725
04:35:00,879 --> 04:35:04,561
a function that returns a future you're
4726
04:35:03,118 --> 04:35:06,399
actually getting the future back you're
4727
04:35:06,400 --> 04:35:12,480
so how do you get that data back well by
4728
04:35:09,520 --> 04:35:14,080
prefixing the function with the keyword
4729
04:35:14,080 --> 04:35:20,240
so as its name indicates this
4730
04:35:16,719 --> 04:35:21,840
keyword is just going to wait for
4731
04:35:20,240 --> 04:35:23,840
the result of this function to be
4732
04:35:21,840 --> 04:35:25,359
calculated and then it's gonna go to the
4733
04:35:26,958 --> 04:35:30,878
these two are very related to each other
4734
04:35:29,118 --> 04:35:32,399
and you'll see that if i remove async
4735
04:35:30,879 --> 04:35:34,879
then i will get an error saying that
4736
04:35:34,879 --> 04:35:38,959
called test is a synchronous function it
4737
04:35:38,958 --> 04:35:43,599
basically means it doesn't return
4738
04:35:40,719 --> 04:35:45,520
anything and it asynchronously does its
4739
04:35:45,520 --> 04:35:49,199
have to wait for anything so
4740
04:35:47,599 --> 04:35:51,118
but then inside the function you're
4741
04:35:49,199 --> 04:35:52,719
saying wait which means yeah i have to
4742
04:35:51,118 --> 04:35:54,319
wait some time for something and that's
4743
04:35:54,319 --> 04:35:58,400
what you need to do then is you mark
4744
04:35:55,919 --> 04:36:00,560
your functions with async if internally
4745
04:35:58,400 --> 04:36:02,159
in that function you're using a weight
4746
04:36:03,599 --> 04:36:09,599
the weight itself then is used for
4747
04:36:07,520 --> 04:36:12,479
waiting for the result of the future
4748
04:36:09,599 --> 04:36:14,239
okay so if you remove this async and
4749
04:36:12,479 --> 04:36:16,840
then you remove this await everything
4750
04:36:16,840 --> 04:36:22,719
synchronously getting the future of the
4751
04:36:20,400 --> 04:36:25,039
heavy future that multiplies by two and
4752
04:36:22,719 --> 04:36:27,199
printing it so it's not doing any
4753
04:36:25,039 --> 04:36:29,279
asynchronous work in here you can see
4754
04:36:27,199 --> 04:36:31,840
it's just getting that instance so now
4755
04:36:29,278 --> 04:36:33,599
that we're calling that let's command s
4756
04:36:33,599 --> 04:36:38,079
three seconds and then printed the
4757
04:36:35,520 --> 04:36:39,118
result 20 to the screen okay
4758
04:36:39,118 --> 04:36:43,919
that for us was async and in weight and
4759
04:36:42,000 --> 04:36:46,638
we're going to use async and in a way
4760
04:36:43,919 --> 04:36:48,159
and await quite a lot in this course so
4761
04:36:46,638 --> 04:36:49,680
it would be really good if you could
4762
04:36:48,159 --> 04:36:51,278
have with this information that i gave
4763
04:36:49,680 --> 04:36:52,719
you if you could just have a little bit
4764
04:36:52,719 --> 04:36:56,400
a read about future like documentation
4765
04:36:58,319 --> 04:37:03,759
dart um and maybe async await and
4766
04:37:02,240 --> 04:37:05,199
read a little bit about them because
4767
04:37:03,759 --> 04:37:06,958
they're so important in doing
4768
04:37:05,199 --> 04:37:10,479
asynchronous work in dart that we just
4769
04:37:10,719 --> 04:37:15,199
all right um so now we've talked about
4770
04:37:16,319 --> 04:37:22,958
and we've talked about async and awaits
4771
04:37:19,118 --> 04:37:22,958
so i'm just gonna mark them as
4772
04:37:25,359 --> 04:37:29,840
um the next topic to talk about
4773
04:37:31,759 --> 04:37:38,000
so as you saw here a future in dart is a
4774
04:37:35,118 --> 04:37:39,840
class that controls the computation of
4775
04:37:38,000 --> 04:37:42,561
an asynchronous value in order to be
4776
04:37:39,840 --> 04:37:43,759
returned in some point in the future
4777
04:37:45,919 --> 04:37:50,718
in your client's work or even server
4778
04:37:48,479 --> 04:37:53,118
work you need to do work that is
4779
04:37:50,719 --> 04:37:56,240
asynchronous however it is continuous
4780
04:37:53,118 --> 04:37:58,798
work for instance if you if like i have
4781
04:37:56,240 --> 04:38:01,600
the time uh displayed on top of my
4782
04:37:58,798 --> 04:38:04,159
screen on the right hand corner
4783
04:38:05,359 --> 04:38:11,840
it is a it is a stream because it
4784
04:38:08,879 --> 04:38:14,400
doesn't have an end ready it it's a
4785
04:38:11,840 --> 04:38:15,920
continuous pipe of information every
4786
04:38:17,278 --> 04:38:22,958
up on top right it's gonna increase and
4787
04:38:20,400 --> 04:38:24,639
it's gonna go to zero six fifty zero six
4788
04:38:24,638 --> 04:38:29,039
it is continuously calculating the
4789
04:38:26,719 --> 04:38:30,319
current time and like sending it down at
4790
04:38:30,319 --> 04:38:34,159
now in asynchronous programming and in
4791
04:38:34,159 --> 04:38:37,840
which you may also get into if you're
4792
04:38:36,240 --> 04:38:39,199
following with this course or if you're
4793
04:38:37,840 --> 04:38:41,278
following some other course you may
4794
04:38:39,199 --> 04:38:43,199
actually be interested in learning about
4795
04:38:44,879 --> 04:38:49,760
a stream is just a pipe of data
4796
04:38:56,561 --> 04:39:02,159
actually it completes successfully or it
4797
04:38:58,879 --> 04:39:03,840
never completes or it errors out and
4798
04:39:03,840 --> 04:39:09,680
um a stream of time up there you can see
4799
04:39:06,561 --> 04:39:11,840
it's not 0 6 50 in the morning and it is
4800
04:39:09,680 --> 04:39:14,240
a stream of data that never completes
4801
04:39:11,840 --> 04:39:15,680
because time is just just continuously
4802
04:39:15,680 --> 04:39:21,359
so when we talk about streams we just
4803
04:39:22,240 --> 04:39:26,719
sends data down this pipe that
4804
04:39:26,719 --> 04:39:30,959
as you saw in the case of a future a
4805
04:39:28,479 --> 04:39:32,958
future ends it calculates its data and
4806
04:39:30,958 --> 04:39:35,438
it returns and it says i'm done
4807
04:39:35,438 --> 04:39:41,359
is a future that just continues working
4808
04:39:38,957 --> 04:39:42,877
okay so it calculates some data in the
4809
04:39:41,360 --> 04:39:44,718
future and it also sends it down the
4810
04:39:42,878 --> 04:39:46,560
stream and it says oh well i'm not done
4811
04:39:44,718 --> 04:39:47,360
here's another data here's another data
4812
04:39:49,119 --> 04:39:55,520
let's have a look at this uh stream and
4813
04:39:52,159 --> 04:40:00,000
see how we can work with streams okay
4814
04:39:55,520 --> 04:40:02,797
so let's go and create a stream of um
4815
04:40:02,797 --> 04:40:08,797
and then we say get name okay
4816
04:40:08,797 --> 04:40:14,559
you your job is to create a string so if
4817
04:40:14,560 --> 04:40:18,560
see that hello is not compatible with
4818
04:40:17,040 --> 04:40:20,159
the return type that you promised it's
4819
04:40:20,159 --> 04:40:24,319
um so you it this is very similar to how
4820
04:40:24,319 --> 04:40:28,718
future of integer you couldn't return an
4821
04:40:26,718 --> 04:40:30,637
integer in that future but you have to
4822
04:40:28,718 --> 04:40:31,840
create a future of integer and inside
4823
04:40:31,840 --> 04:40:35,680
return the actual integer which was the
4824
04:40:33,919 --> 04:40:36,957
computation if i go back you will see
4825
04:40:39,279 --> 04:40:42,159
the future delayed and inside this
4826
04:40:40,878 --> 04:40:43,920
function you're actually doing the
4827
04:40:45,119 --> 04:40:49,279
how do we create a stream and you could
4828
04:40:50,878 --> 04:40:57,600
okay periodic for instance or a value
4829
04:40:54,400 --> 04:40:58,560
okay if you say we return a stream of
4830
04:41:01,919 --> 04:41:05,039
what this means is that you have a pipe
4831
04:41:05,040 --> 04:41:10,000
but the only value that it contains is a
4832
04:41:07,759 --> 04:41:10,877
foo is the value of food that's it all
4833
04:41:10,878 --> 04:41:16,878
so let's now go into this test function
4834
04:41:13,680 --> 04:41:17,920
and try to consume this uh stream if you
4835
04:41:24,000 --> 04:41:27,759
and then i'm going to clear the logs
4836
04:41:25,919 --> 04:41:30,000
here and say command s you'll see that
4837
04:41:27,759 --> 04:41:33,119
just like future it just says instance
4838
04:41:30,000 --> 04:41:35,759
of controller stream okay so it is not
4839
04:41:33,119 --> 04:41:38,239
the actual value inside the string so
4840
04:41:35,759 --> 04:41:39,279
the question is how do you wait for
4841
04:41:39,279 --> 04:41:44,479
inside a stream you could just say okay
4842
04:41:46,319 --> 04:41:49,040
actually we could read this a weight
4843
04:41:47,439 --> 04:41:50,797
applied to stream string which is not a
4844
04:41:50,797 --> 04:41:54,957
dart is understanding that okay you're
4845
04:41:54,957 --> 04:41:58,159
this is this is not just like a future
4846
04:41:56,878 --> 04:42:00,637
that you're gonna wait for there's
4847
04:41:58,159 --> 04:42:02,400
nothing to await like it's not a single
4848
04:42:10,159 --> 04:42:15,040
for awaiting for values inside a stream
4849
04:42:12,718 --> 04:42:16,080
then you could say wait for final value
4850
04:42:18,000 --> 04:42:20,957
and then you could just print the value
4851
04:42:19,439 --> 04:42:23,439
so this is a little bit of a strange
4852
04:42:20,957 --> 04:42:25,439
syntax but if you read it in like in
4853
04:42:23,439 --> 04:42:28,717
english it makes perfect sense you're
4854
04:42:25,439 --> 04:42:31,039
waiting for values in get's name
4855
04:42:28,718 --> 04:42:32,159
if you just ignore the final in here
4856
04:42:32,159 --> 04:42:35,599
but read it in english from left to
4857
04:42:33,520 --> 04:42:37,760
right await for values in get name
4858
04:42:37,759 --> 04:42:41,359
and then at the end i'm going to say
4859
04:42:47,680 --> 04:42:52,637
and you'll see it immediately said foo
4860
04:42:50,637 --> 04:42:54,637
and then stream finished working i'm
4861
04:42:54,637 --> 04:42:59,680
foo stream finish working okay
4862
04:42:57,520 --> 04:43:01,279
so this is an interesting concept but
4863
04:42:59,680 --> 04:43:03,279
it's still not a stream really i mean
4864
04:43:01,279 --> 04:43:05,759
we're packaging the full string inside
4865
04:43:05,759 --> 04:43:10,000
it's only one value we could have done
4866
04:43:07,599 --> 04:43:11,599
that with a future so let's take
4867
04:43:15,919 --> 04:43:19,759
continuously so what we could do in here
4868
04:43:19,759 --> 04:43:24,717
periodic it means periodically produce
4869
04:43:22,878 --> 04:43:26,878
values and in here you can see the first
4870
04:43:24,718 --> 04:43:28,958
parameter is a duration so let's say
4871
04:43:28,957 --> 04:43:34,957
of seconds every second okay and then
4872
04:43:32,240 --> 04:43:36,480
there is a second parameter in here
4873
04:43:34,957 --> 04:43:38,559
that you'll have to provide if i move my
4874
04:43:36,479 --> 04:43:41,360
mouse over periodic you'll see that the
4875
04:43:38,560 --> 04:43:44,000
second parameter is this string function
4876
04:43:41,360 --> 04:43:46,400
int okay so it means that give me a
4877
04:43:44,000 --> 04:43:49,439
function that accepts an integer
4878
04:43:46,400 --> 04:43:51,600
and then it returns a string all right
4879
04:43:49,439 --> 04:43:52,957
and it understands that it needs to
4880
04:43:51,599 --> 04:43:55,439
return a string because you're saying
4881
04:43:52,957 --> 04:43:59,039
that your stream is a string if you
4882
04:43:55,439 --> 04:44:01,759
change this to an int and then went here
4883
04:43:59,040 --> 04:44:03,760
um to the documentation and the
4884
04:44:01,759 --> 04:44:05,279
documentation will actually or the
4885
04:44:03,759 --> 04:44:07,039
method signature will change to say that
4886
04:44:05,279 --> 04:44:08,797
uh your you should support you're
4887
04:44:07,040 --> 04:44:10,479
supposed to take an integer in this
4888
04:44:08,797 --> 04:44:12,479
function that you provide to me and then
4889
04:44:10,479 --> 04:44:13,840
you need to return an integer okay so
4890
04:44:12,479 --> 04:44:15,520
that string i just wanted to show you
4891
04:44:13,840 --> 04:44:17,920
that that string that was shown in the
4892
04:44:15,520 --> 04:44:19,439
function signature there it's because we
4893
04:44:17,919 --> 04:44:21,679
promised to return a string in our
4894
04:44:23,360 --> 04:44:26,637
basically the function signature said
4895
04:44:25,040 --> 04:44:28,878
that you need to accept an integer so
4896
04:44:26,637 --> 04:44:30,399
i'm just going to say value
4897
04:44:30,400 --> 04:44:36,718
i'm just going to say return foo
4898
04:44:36,718 --> 04:44:41,040
conform to that function signature we
4899
04:44:38,718 --> 04:44:42,560
said we take some value and you see the
4900
04:44:42,560 --> 04:44:47,520
and then we're returning a string okay
4901
04:44:44,637 --> 04:44:50,079
so now we can consume that so if i clear
4902
04:44:47,520 --> 04:44:52,479
this log and i say command s you see
4903
04:44:50,080 --> 04:44:53,760
that every second the value of foo is
4904
04:44:52,479 --> 04:44:54,560
going to get printed to the screen and
4905
04:44:54,560 --> 04:44:58,638
actually i need to remove this caption i
4906
04:44:58,637 --> 04:45:02,399
you see that 10 times 11 times 12
4907
04:45:05,759 --> 04:45:09,279
um i'm sorry about that the caption was
4908
04:45:07,680 --> 04:45:11,439
blocking the screen i wasn't aware of
4909
04:45:09,279 --> 04:45:13,919
that um or actually i was aware of that
4910
04:45:11,439 --> 04:45:16,637
but i forgot that that was the case in
4911
04:45:16,637 --> 04:45:23,279
so you can see that every second the
4912
04:45:19,040 --> 04:45:25,280
stream is sending a value all right now
4913
04:45:23,279 --> 04:45:26,797
that's that's basically the gist of
4914
04:45:28,637 --> 04:45:33,840
i'm wondering actually if we're gonna
4915
04:45:30,319 --> 04:45:35,840
use the streams in this course i believe
4916
04:45:35,840 --> 04:45:42,319
i need to probably look at the um
4917
04:45:42,319 --> 04:45:46,797
yes i can see that we're actually using
4918
04:45:48,560 --> 04:45:53,040
if you don't fully understand streams at
4919
04:45:50,797 --> 04:45:55,119
the moment because we're gonna talk
4920
04:45:57,439 --> 04:46:01,919
because we're gonna actually talk about
4921
04:45:59,119 --> 04:46:02,718
streams and stream controllers later in
4922
04:46:05,040 --> 04:46:08,718
just know for now that a stream is like
4923
04:46:08,718 --> 04:46:15,200
continuously or periodically can return
4924
04:46:11,680 --> 04:46:18,637
values and then you can wait for
4925
04:46:15,200 --> 04:46:21,840
those values using the await for
4926
04:46:31,680 --> 04:46:38,560
in this chapter is generators so
4927
04:46:36,479 --> 04:46:39,759
generators are very very interesting in
4928
04:46:39,759 --> 04:46:45,199
some other languages also support
4929
04:46:45,200 --> 04:46:48,958
but not not all modern languages do that
4930
04:46:48,957 --> 04:46:55,359
a generator in dart is a function
4931
04:46:55,360 --> 04:47:02,920
i don't want to say iterable but it
4932
04:47:04,479 --> 04:47:10,000
internally calculates that data in a
4933
04:47:10,000 --> 04:47:13,279
that's the best explanation i can come
4934
04:47:12,159 --> 04:47:14,637
up with to be honest with you let's have
4935
04:47:14,637 --> 04:47:18,239
i think the best way to do that is
4936
04:47:15,919 --> 04:47:20,399
actually write a function that does uh
4937
04:47:23,439 --> 04:47:26,637
and then we have a test function here
4938
04:47:27,520 --> 04:47:31,279
let's now go create a generator and
4939
04:47:32,957 --> 04:47:36,637
create a function that returns the
4940
04:47:38,878 --> 04:47:44,718
a way to do that is would be to say i
4941
04:47:41,680 --> 04:47:46,080
want a list of integers okay and my
4942
04:47:46,080 --> 04:47:50,480
or get one two three like this
4943
04:47:50,637 --> 04:47:54,319
and you could say return one two three
4944
04:47:52,560 --> 04:47:55,280
like that okay so that's completely
4945
04:47:55,279 --> 04:48:00,239
another way of doing that is to use
4946
04:48:00,240 --> 04:48:04,320
and iterables i mean you need to
4947
04:48:02,637 --> 04:48:05,759
understand what iterables actually are
4948
04:48:04,319 --> 04:48:09,040
and they're kind of like lazy
4949
04:48:05,759 --> 04:48:10,637
collections and when you get used to
4950
04:48:09,040 --> 04:48:12,878
doing more software engineering you will
4951
04:48:12,878 --> 04:48:17,920
why we use lazy collections
4952
04:48:15,759 --> 04:48:21,919
but for now just know that an iterable
4953
04:48:17,919 --> 04:48:23,039
is a prepared and packaged up list of
4954
04:48:24,797 --> 04:48:29,840
it is not completely calculated when it
4955
04:48:31,599 --> 04:48:35,840
it's kind of like how a restaurant works
4956
04:48:34,080 --> 04:48:38,160
in a typical night a restaurant might
4957
04:48:35,840 --> 04:48:39,439
have for instance 50 customers
4958
04:48:39,439 --> 04:48:45,359
when that shift begins during the night
4959
04:48:42,878 --> 04:48:47,360
not all food is ready i mean it can't
4960
04:48:45,360 --> 04:48:49,200
possibly be like when cut the first
4961
04:48:47,360 --> 04:48:51,040
customer comes in we can say that the
4962
04:48:49,200 --> 04:48:52,400
food for the 50th customer is already
4963
04:48:52,400 --> 04:48:57,040
that's how a restaurant works it it
4964
04:48:55,119 --> 04:48:59,680
listens to orders of its customers and
4965
04:48:57,040 --> 04:49:02,319
then it generates the food based on the
4966
04:48:59,680 --> 04:49:05,040
orders that's how an iterable works okay
4967
04:49:02,319 --> 04:49:07,439
however a list in dart is an already
4968
04:49:05,040 --> 04:49:09,280
packaged list it means that it's as if
4969
04:49:07,439 --> 04:49:10,479
like you go to a supermarket and then
4970
04:49:12,479 --> 04:49:18,637
food that's already packaged 30 packs of
4971
04:49:15,279 --> 04:49:20,797
that that is a list that is 30 ready
4972
04:49:18,637 --> 04:49:24,319
readily packaged food items and then you
4973
04:49:20,797 --> 04:49:26,159
take away that's how list works but an
4974
04:49:27,040 --> 04:49:32,240
it's a list of like things that gets
4975
04:49:36,878 --> 04:49:40,240
just know that for now so we just said
4976
04:49:38,797 --> 04:49:42,319
either well and as you can see dart
4977
04:49:40,240 --> 04:49:43,920
understood that okay a list is also an
4978
04:49:42,319 --> 04:49:45,439
eye trouble so i don't have to worry
4979
04:49:43,919 --> 04:49:46,239
about that so it didn't give you an
4980
04:49:46,240 --> 04:49:50,798
so let's go and actually instead of
4981
04:49:48,479 --> 04:49:51,759
doing one two three let's go and mark
4982
04:49:54,159 --> 04:49:59,759
uh a generator and you do that with
4983
04:49:59,759 --> 04:50:07,039
so and this would be a stream like
4984
04:50:03,919 --> 04:50:09,679
now the difference between sync
4985
04:50:07,040 --> 04:50:11,200
with a an asterisk an async with an
4986
04:50:13,520 --> 04:50:19,279
it is a generator function that returns
4987
04:50:16,080 --> 04:50:20,600
a list of things but it calculates that
4988
04:50:20,599 --> 04:50:26,159
asynchronously and as you can guess the
4989
04:50:22,957 --> 04:50:28,637
async equivalent of the sync asterisk it
4990
04:50:26,159 --> 04:50:30,000
does the exact same thing but it returns
4991
04:50:30,000 --> 04:50:35,599
and which means it's asynchronously
4992
04:50:32,560 --> 04:50:38,000
calculating its result okay so
4993
04:50:35,599 --> 04:50:40,159
when you mark a function as sync you
4994
04:50:40,159 --> 04:50:44,240
like this because you can see that you
4995
04:50:42,560 --> 04:50:46,560
can see that it says you're creating a
4996
04:50:44,240 --> 04:50:49,360
generator function so you have to kind
4997
04:50:46,560 --> 04:50:52,479
of calculate your results now you can't
4998
04:50:49,360 --> 04:50:53,600
just return a bunch of things to me okay
4999
04:50:53,599 --> 04:50:58,717
to do that you would use a keyword in
5000
04:51:00,479 --> 04:51:04,399
a very interesting keyword that you
5001
04:51:02,319 --> 04:51:05,759
would use only in generator functions as
5002
04:51:05,759 --> 04:51:10,239
and in here you're telling dart that
5003
04:51:07,759 --> 04:51:14,479
okay the first value that i'm outputting
5004
04:51:10,240 --> 04:51:17,280
in my iterable is the value of one so
5005
04:51:19,439 --> 04:51:24,319
i know or say we say four value in
5006
04:51:27,599 --> 04:51:32,239
and then you could just say print value
5007
04:51:30,240 --> 04:51:33,760
you can see it only prints the value of
5008
04:51:32,240 --> 04:51:36,718
1. i'm actually going to get rid of this
5009
04:51:33,759 --> 04:51:38,637
caption you can see the output
5010
04:51:36,718 --> 04:51:41,280
it only prints the value of 1 just
5011
04:51:38,637 --> 04:51:43,039
because we yielded the value of 1. okay
5012
04:51:41,279 --> 04:51:45,759
so you could just send then say yield
5013
04:51:43,040 --> 04:51:47,600
one yield two and yield three
5014
04:51:45,759 --> 04:51:48,797
then you'd see the values one two three
5015
04:51:48,797 --> 04:51:52,637
in this function internally then you
5016
04:51:50,637 --> 04:51:54,239
could do a lot of other important things
5017
04:51:52,637 --> 04:51:56,000
maybe some synchronous uh some other
5018
04:51:54,240 --> 04:51:58,159
synchronous calculations and every time
5019
04:52:01,840 --> 04:52:08,560
you would do a yield and you could also
5020
04:52:04,797 --> 04:52:11,119
print the entire return value
5021
04:52:08,560 --> 04:52:12,638
yes you don't have to do a four loop
5022
04:52:11,119 --> 04:52:14,797
so you could just say print it and then
5023
04:52:12,637 --> 04:52:16,797
it would say one two three okay
5024
04:52:14,797 --> 04:52:19,759
but if you do a for loop then you're
5025
04:52:16,797 --> 04:52:20,637
actually taking advantage of that lazy
5026
04:52:20,637 --> 04:52:25,360
capabilities of an eye turbo so you
5027
04:52:23,119 --> 04:52:28,000
could break out the loop at loop at any
5028
04:52:37,040 --> 04:52:42,000
so let's clear the logs and command s
5029
04:52:40,080 --> 04:52:44,160
you'll see only the value of one and two
5030
04:52:42,000 --> 04:52:45,680
gets printed and then as soon as you're
5031
04:52:44,159 --> 04:52:47,680
at the value of two then you're breaking
5032
04:52:45,680 --> 04:52:49,920
and that means that this yield
5033
04:52:47,680 --> 04:52:53,119
was basically never calculated so that's
5034
04:52:57,360 --> 04:53:01,279
so you could also create asynchronous
5035
04:52:59,759 --> 04:53:02,957
generator functions as i mentioned and
5036
04:53:01,279 --> 04:53:06,159
that means that you're kind of like
5037
04:53:02,957 --> 04:53:07,919
creating a stream of iterables
5038
04:53:06,159 --> 04:53:11,040
to be honest with you asynchronous
5039
04:53:07,919 --> 04:53:12,717
generators i've i've maybe used them
5040
04:53:12,718 --> 04:53:15,840
uh in in the many years i've used dart
5041
04:53:15,840 --> 04:53:19,680
i don't think you're going to use them a
5042
04:53:17,279 --> 04:53:22,319
lot but just know that they're there and
5043
04:53:19,680 --> 04:53:23,920
you could use them by prefixing your eye
5044
04:53:23,919 --> 04:53:27,359
saying that basically you're returning a
5045
04:53:25,680 --> 04:53:29,840
stream of eye troubles and then
5046
04:53:27,360 --> 04:53:32,000
suffixing your function with async just
5047
04:53:32,000 --> 04:53:35,520
so and then here it says okay you said
5048
04:53:34,000 --> 04:53:37,200
that you're returning a stream of ideal
5049
04:53:35,520 --> 04:53:38,560
integers but you're turning only one
5050
04:53:37,200 --> 04:53:41,680
value in here then you would just say
5051
04:53:42,560 --> 04:53:45,920
um but then you would say yeah then you
5052
04:53:44,240 --> 04:53:47,920
have the ability to do whatever you want
5053
04:53:45,919 --> 04:53:49,839
here like return an actual eye variable
5054
04:53:47,919 --> 04:53:51,359
okay so i'm not going to talk about
5055
04:53:49,840 --> 04:53:52,479
asynchronous generators to be honest
5056
04:53:51,360 --> 04:53:55,440
with you in this course because they're
5057
04:53:52,479 --> 04:53:58,878
kind of like outside the scope
5058
04:53:55,439 --> 04:54:01,439
so just know that they exist and you can
5059
04:54:01,680 --> 04:54:05,040
okay i'm going to mark in my notes that
5060
04:54:03,040 --> 04:54:07,600
we've talked about generators so
5061
04:54:05,040 --> 04:54:09,200
the next topic to talk about are
5062
04:54:09,200 --> 04:54:14,560
and i'm going to bring up a caption here
5063
04:54:14,560 --> 04:54:17,680
programming languages that do support it
5064
04:54:17,680 --> 04:54:22,400
there so that you avoid writing the same
5065
04:54:23,360 --> 04:54:28,319
let's say that you i mean this is a very
5066
04:54:28,319 --> 04:54:32,079
example i know it's a little bit cliche
5067
04:54:32,080 --> 04:54:35,840
i think it's cliche for a reason and
5068
04:54:33,599 --> 04:54:36,797
that's because it's such a good example
5069
04:54:43,520 --> 04:54:48,159
a pair of data let's just say class
5070
04:54:48,159 --> 04:54:52,400
and then in here you could say okay what
5071
04:54:50,319 --> 04:54:54,957
pair of data do i want to store okay i
5072
04:54:55,520 --> 04:55:00,159
value one as a string and i want to also
5073
04:54:58,400 --> 04:55:02,638
store value two as a string and then you
5074
04:55:00,159 --> 04:55:04,079
create the constructor for it okay
5075
04:55:02,637 --> 04:55:06,637
all right that's that's great it's a
5076
04:55:04,080 --> 04:55:09,040
pair of strings but how do you then
5077
04:55:06,637 --> 04:55:10,957
pair an integer like two integers then
5078
04:55:10,957 --> 04:55:16,399
i have to have another pair class and
5079
04:55:16,400 --> 04:55:20,159
but then you have this problem because
5080
04:55:18,240 --> 04:55:22,080
pair is already defined as a class up
5081
04:55:22,080 --> 04:55:26,240
so you cannot reuse that you cannot have
5082
04:55:24,718 --> 04:55:27,520
the same name then you would say okay
5083
04:55:30,560 --> 04:55:33,680
and then here you would say pair of
5084
04:55:33,680 --> 04:55:37,040
and you make sure that the constructor
5085
04:55:39,040 --> 04:55:44,479
i mean you may have also i mean in this
5086
04:55:41,599 --> 04:55:46,479
point at this point we don't have logic
5087
04:55:44,479 --> 04:55:48,000
at all in these two classes you may have
5088
04:55:46,479 --> 04:55:50,079
actually quite a lot of logic in your
5089
04:55:50,080 --> 04:55:53,280
as i mentioned i think during one of
5090
04:55:52,000 --> 04:55:55,439
these chapters i think it was chapter
5091
04:55:53,279 --> 04:55:57,520
one or two program one of the main
5092
04:55:55,439 --> 04:56:00,239
characteristics of software engineers is
5093
04:56:00,240 --> 04:56:04,798
um writing the same piece of code over
5094
04:56:12,400 --> 04:56:17,600
that's where generics can come in so
5095
04:56:15,040 --> 04:56:20,000
what you could do is instead of doing
5096
04:56:20,000 --> 04:56:24,000
let me bring this here let's go and
5097
04:56:22,000 --> 04:56:25,840
create a class that is generic and you
5098
04:56:25,840 --> 04:56:31,360
and then a format for creating a generic
5099
04:56:28,797 --> 04:56:34,319
class is to write after the name of the
5100
04:56:31,360 --> 04:56:37,200
class oh just to a less than and greater
5101
04:56:34,319 --> 04:56:38,479
than sign okay and then open your square
5102
04:56:43,439 --> 04:56:50,559
names like the data types with usually
5103
04:56:47,520 --> 04:56:53,920
with single characters let's say that
5104
04:56:50,560 --> 04:56:56,240
what you want is a pair of any data type
5105
04:56:53,919 --> 04:56:58,239
let's call the first data type a
5106
04:56:56,240 --> 04:57:00,638
and the second data type b because
5107
04:56:58,240 --> 04:57:04,000
there's two values so let's call this
5108
04:57:00,637 --> 04:57:06,239
one a and this one b okay you would just
5109
04:57:04,000 --> 04:57:07,520
write them as we just say we say a and b
5110
04:57:07,520 --> 04:57:11,600
so then in here you would say final
5111
04:57:11,599 --> 04:57:17,279
value one so you're telling the compiler
5112
04:57:14,000 --> 04:57:19,759
that okay whatever pair i'm creating
5113
04:57:17,279 --> 04:57:21,599
the first data type that i accept is a
5114
04:57:19,759 --> 04:57:23,599
and that should be placed here
5115
04:57:21,599 --> 04:57:25,119
and then we say okay then the b is the
5116
04:57:25,119 --> 04:57:28,239
and then we create a constructor for
5117
04:57:28,240 --> 04:57:34,000
so how you would use this then is you
5118
04:57:34,000 --> 04:57:40,080
then you would say foo and bar okay
5119
04:57:37,360 --> 04:57:43,119
and then this is just like a simple it's
5120
04:57:40,080 --> 04:57:44,718
very similar than to pair of
5121
04:57:43,119 --> 04:57:46,878
strings that we wrote up there you see
5122
04:57:44,718 --> 04:57:48,718
it worked as well but now in this case
5123
04:57:46,878 --> 04:57:51,520
dart is smart enough to understand that
5124
04:57:48,718 --> 04:57:53,680
names is a pair of string and string
5125
04:57:51,520 --> 04:57:56,560
meaning that the two values that you
5126
04:57:53,680 --> 04:57:59,279
pass to this pair generic class were
5127
04:57:56,560 --> 04:58:02,718
actually then placed for you
5128
04:57:59,279 --> 04:58:04,717
magically inside the a and b templates
5129
04:58:02,718 --> 04:58:07,040
that you provided up here okay
5130
04:58:04,718 --> 04:58:08,400
so if in if in this case then you said
5131
04:58:08,400 --> 04:58:12,400
and then i have the value of 20
5132
04:58:10,560 --> 04:58:14,560
then dart smart enough to understand
5133
04:58:12,400 --> 04:58:16,159
that oh now it's a pair of string and
5134
04:58:16,957 --> 04:58:22,079
that's how you would use uh generics
5135
04:58:19,759 --> 04:58:24,637
basically so i mean there are so much to
5136
04:58:22,080 --> 04:58:27,120
talk about about generics and how
5137
04:58:27,119 --> 04:58:30,239
uh basically utilize them in order to
5138
04:58:30,240 --> 04:58:35,520
very simple classes so that they're
5139
04:58:33,520 --> 04:58:38,797
so that they're reusing as much
5140
04:58:35,520 --> 04:58:41,360
capability or as much code as possible
5141
04:58:38,797 --> 04:58:43,039
without duplicating that code so
5142
04:58:41,360 --> 04:58:45,840
and talking about generics to be honest
5143
04:58:43,040 --> 04:58:48,400
with you it could be it's its own entire
5144
04:58:45,840 --> 04:58:51,439
course we could go on and on four five
5145
04:58:48,400 --> 04:58:53,440
six hours i could talk about generics so
5146
04:58:51,439 --> 04:58:55,840
just know that generics are created like
5147
04:58:53,439 --> 04:58:56,797
this you say class pair and then you
5148
04:58:56,797 --> 04:58:59,439
your generic data types which then in
5149
04:58:59,439 --> 04:59:04,479
then in turn get placed inside the
5150
04:59:02,159 --> 04:59:06,240
definitions inside the class itself so
5151
04:59:08,718 --> 04:59:12,400
all right now that we've talked about
5152
04:59:10,159 --> 04:59:14,560
generics um i believe that we could kind
5153
04:59:14,560 --> 04:59:18,798
chapter where we talked a little bit
5154
04:59:16,637 --> 04:59:20,399
more about advanced topics in dart
5155
04:59:20,400 --> 04:59:24,480
async awaits streams the weight for
5156
04:59:27,119 --> 04:59:31,279
now i'm actually really happy that we
5157
04:59:29,520 --> 04:59:33,840
went through chapter number seven which
5158
04:59:31,279 --> 04:59:36,479
is this chapter because up until this
5159
04:59:33,840 --> 04:59:38,400
point we've kind of been like preparing
5160
04:59:40,240 --> 04:59:44,958
it's now time that we put everything
5161
04:59:42,240 --> 04:59:47,840
that we've learned into practice
5162
04:59:44,957 --> 04:59:49,840
and actually start building our project
5163
04:59:47,840 --> 04:59:52,000
so i'm actually getting goosebumps
5164
04:59:49,840 --> 04:59:53,360
because it's such an important part of
5165
04:59:52,000 --> 04:59:55,599
this course that we've actually gone
5166
04:59:53,360 --> 04:59:57,440
through the basics we've talked about
5167
04:59:55,599 --> 04:59:59,519
dart we've talked about like some of the
5168
04:59:57,439 --> 05:00:02,239
basics of setting up the simulator etc
5169
04:59:59,520 --> 05:00:04,240
etc that it's with great pleasure that i
5170
05:00:02,240 --> 05:00:05,840
can say okay we've gone through that now
5171
05:00:04,240 --> 05:00:08,000
and all you need to do right now is just
5172
05:00:05,840 --> 05:00:08,957
to practice and what better way to
5173
05:00:08,957 --> 05:00:14,637
than to put what you've learned um into
5174
05:00:17,040 --> 05:00:20,718
flutter project that we've been aiming
5175
05:00:18,878 --> 05:00:23,440
to do from the beginning so
5176
05:00:20,718 --> 05:00:24,718
without further ado let's then
5177
05:00:23,439 --> 05:00:26,797
prepare for the next chapter which is
5178
05:00:24,718 --> 05:00:28,080
chapter eight and in chapter eight we're
5179
05:00:28,080 --> 05:00:32,718
uh project setup and then we're actually
5180
05:00:30,718 --> 05:00:34,637
gonna add some dependencies to our
5181
05:00:32,718 --> 05:00:36,958
project which we're gonna use
5182
05:00:36,957 --> 05:00:41,359
let's aim for that and i'll see you in
5183
05:00:41,360 --> 05:00:45,119
hello and welcome to chapter number
5184
05:00:45,119 --> 05:00:48,718
in this chapter we're going to talk
5185
05:00:48,718 --> 05:00:52,159
project setup in the previous chapters
5186
05:00:50,957 --> 05:00:54,159
up until this point to be honest with
5187
05:00:52,159 --> 05:00:55,439
you we've been just working with dart
5188
05:00:55,439 --> 05:00:59,520
um laying the foundation for learning
5189
05:00:57,680 --> 05:01:01,200
the programming language that actually
5190
05:01:03,919 --> 05:01:07,199
programming language that you're gonna
5191
05:01:05,599 --> 05:01:08,957
need to be quite comfortable with in
5192
05:01:07,200 --> 05:01:11,200
order to be able to write your flutter
5193
05:01:08,957 --> 05:01:13,279
applications so you're gonna learn more
5194
05:01:11,200 --> 05:01:15,680
and more about dart as we go on in this
5195
05:01:13,279 --> 05:01:16,399
course but it is very very good if you
5196
05:01:16,400 --> 05:01:21,040
look at the intro chapter and then just
5197
05:01:18,240 --> 05:01:23,280
kind of like follow along on the
5198
05:01:21,040 --> 05:01:26,400
chapters up until this point so that you
5199
05:01:23,279 --> 05:01:28,797
get the general idea of what dart is all
5200
05:01:26,400 --> 05:01:30,400
about and then how you can use it
5201
05:01:28,797 --> 05:01:32,637
at a very shallow level i mean i know
5202
05:01:30,400 --> 05:01:33,840
there's lots of material that i put out
5203
05:01:33,840 --> 05:01:38,080
we really didn't like go so deep in
5204
05:01:36,400 --> 05:01:40,240
every topic so i just wanted to give you
5205
05:01:40,240 --> 05:01:44,638
the different available options in dart
5206
05:01:44,637 --> 05:01:48,239
if you haven't watched those chapters
5207
05:01:45,840 --> 05:01:50,159
please just go ahead and skim skim over
5208
05:01:48,240 --> 05:01:51,840
them even if you're comfortable already
5209
05:01:52,797 --> 05:01:56,079
in this chapter we're going to talk
5210
05:01:53,759 --> 05:01:58,479
about the project setup and this is the
5211
05:01:56,080 --> 05:02:00,080
like one of the absolute most important
5212
05:02:00,080 --> 05:02:04,798
um an application for flutter so if
5213
05:02:04,797 --> 05:02:09,759
if you're thinking of maybe skipping um
5214
05:02:07,360 --> 05:02:11,040
over this chapter that's also okay if
5215
05:02:09,759 --> 05:02:12,239
you know what you're doing but if this
5216
05:02:11,040 --> 05:02:14,400
is the first time that you're setting up
5217
05:02:12,240 --> 05:02:16,000
a flutter project that then i think it's
5218
05:02:16,000 --> 05:02:23,840
follow along with this chapter
5219
05:02:19,439 --> 05:02:25,599
so i'm going to go now into um
5220
05:02:23,840 --> 05:02:27,759
let's do some setup here so what am i
5221
05:02:25,599 --> 05:02:29,599
going to do i'm going to bring my face
5222
05:02:27,759 --> 05:02:32,319
to the bottom right here so you can see
5223
05:02:32,319 --> 05:02:36,797
and then i'm going to bring up the
5224
05:02:34,560 --> 05:02:38,798
caption for the next item that we're
5225
05:02:38,797 --> 05:02:44,717
and in here well we have a um
5226
05:02:43,439 --> 05:02:46,239
as you can see there is a command that
5227
05:02:44,718 --> 05:02:48,400
you can issue in the terminal to create
5228
05:02:48,400 --> 05:02:52,798
every flosser project has different
5229
05:02:49,840 --> 05:02:54,797
properties it has for instance a name
5230
05:02:52,797 --> 05:02:56,399
which is the entire like the name of the
5231
05:03:00,000 --> 05:03:04,000
main properties of flutter project is
5232
05:03:04,000 --> 05:03:07,840
now the identifier wouldn't be so
5233
05:03:05,680 --> 05:03:11,520
important had it not been that flutter
5234
05:03:07,840 --> 05:03:13,920
can actually deploy to ios and android
5235
05:03:13,919 --> 05:03:17,359
an ios app and an android app is
5236
05:03:17,360 --> 05:03:24,479
what defines that application as unique
5237
05:03:20,319 --> 05:03:26,400
as on the app store where ios ios users
5238
05:03:24,479 --> 05:03:29,040
and ipad os users can download
5239
05:03:29,040 --> 05:03:32,000
play store where android users can
5240
05:03:32,000 --> 05:03:36,000
android apps so these identifiers are as
5241
05:03:34,797 --> 05:03:38,159
i mentioned in one of the previous
5242
05:03:36,000 --> 05:03:40,400
chapters are kind of like reverse domain
5243
05:03:38,159 --> 05:03:41,840
identifiers so it's kind of like if your
5244
05:03:41,840 --> 05:03:45,759
foobar.com and your application is
5245
05:03:45,759 --> 05:03:50,559
then your reverse domain identifier for
5246
05:03:48,159 --> 05:03:53,200
your application will become dot
5247
05:03:54,400 --> 05:03:59,680
you take your domain name and reverse it
5248
05:03:56,637 --> 05:04:01,439
so if foobar.com becomes com.fubar and
5249
05:03:59,680 --> 05:04:04,479
then you put dots after that and then
5250
05:04:01,439 --> 05:04:07,359
you put your actual application name
5251
05:04:04,479 --> 05:04:09,360
so these identifiers need to be unique
5252
05:04:12,400 --> 05:04:17,040
on the ios app store or google play
5253
05:04:14,718 --> 05:04:19,680
store is already gone and registered
5254
05:04:17,040 --> 05:04:22,240
the reverse um basically that item
5255
05:04:22,240 --> 05:04:26,480
for any of their applications so they
5256
05:04:24,319 --> 05:04:28,400
said okay here's my application called
5257
05:04:26,479 --> 05:04:32,680
image gallery but it has a completely
5258
05:04:28,400 --> 05:04:32,680
random identifier of com.foobar.pass
5259
05:04:32,797 --> 05:04:37,759
then you as a new developer even if you
5260
05:04:35,360 --> 05:04:40,159
want to do the same funky uh deployment
5261
05:04:37,759 --> 05:04:41,759
to the app store you can't register that
5262
05:04:40,159 --> 05:04:42,718
name anymore because because it is
5263
05:04:44,159 --> 05:04:47,680
think of the identifier of your project
5264
05:04:47,680 --> 05:04:52,479
what is gonna carry on from the start of
5265
05:04:50,797 --> 05:04:54,159
where you create your project all the
5266
05:04:56,080 --> 05:05:00,480
it is quite important that you actually
5267
05:04:57,919 --> 05:05:02,717
choose it wisely because if you don't do
5268
05:05:00,479 --> 05:05:04,319
that wisely from the absolute start
5269
05:05:02,718 --> 05:05:06,718
unfortunately you will have to do some
5270
05:05:06,718 --> 05:05:11,520
to go and update that yourself so
5271
05:05:11,520 --> 05:05:15,760
so i would i would really suggest and
5272
05:05:13,919 --> 05:05:18,479
recommend here that you take a little
5273
05:05:15,759 --> 05:05:20,319
bit of um time to think about what that
5274
05:05:20,319 --> 05:05:24,479
what you prefer that identifier to be
5275
05:05:22,797 --> 05:05:26,000
and what you're comfortable with and
5276
05:05:24,479 --> 05:05:28,479
what for instance if you have a domain
5277
05:05:28,479 --> 05:05:33,919
the app store and for google play store
5278
05:05:31,439 --> 05:05:35,680
so if you have a domain name already
5279
05:05:33,919 --> 05:05:37,519
registered on your name i suggest
5280
05:05:35,680 --> 05:05:39,760
strongly then that you use that and if
5281
05:05:37,520 --> 05:05:41,360
you have domain names personally and
5282
05:05:43,279 --> 05:05:47,199
and for your company then you need to
5283
05:05:45,680 --> 05:05:49,520
now know whether you're going to release
5284
05:05:47,200 --> 05:05:51,280
this application under your name
5285
05:05:49,520 --> 05:05:54,637
personally or if you're going to release
5286
05:05:54,637 --> 05:06:00,079
so these all play a role but
5287
05:05:57,599 --> 05:06:02,479
without further ado let's just go and
5288
05:06:03,599 --> 05:06:06,957
i to be honest with you i personally
5289
05:06:05,119 --> 05:06:08,637
haven't really thought about whether i
5290
05:06:06,957 --> 05:06:10,319
want to release this application as a
5291
05:06:08,637 --> 05:06:12,239
private person or if i want to create it
5292
05:06:15,360 --> 05:06:21,360
at apple and at google is under
5293
05:06:18,240 --> 05:06:24,240
my company's name which is pixelity ab
5294
05:06:21,360 --> 05:06:26,637
in sweden then i'm actually going to use
5295
05:06:24,240 --> 05:06:28,560
that company's domain name which is
5296
05:06:28,560 --> 05:06:34,479
because s is like the swedish domain
5297
05:06:37,279 --> 05:06:42,000
so i think i will do that so let's go to
5298
05:06:40,319 --> 05:06:44,319
and open a new terminal let's go to
5299
05:06:44,319 --> 05:06:47,680
i don't see my screen right now but i'm
5300
05:06:46,240 --> 05:06:50,240
just going to bring up a new terminal
5301
05:06:50,797 --> 05:06:54,239
and bring it up so that you can also see
5302
05:06:54,240 --> 05:07:01,600
and i'm gonna increase the size of the
5303
05:06:57,279 --> 05:07:04,717
text so it is clear what i'm typing okay
5304
05:07:01,599 --> 05:07:08,000
so let me go ahead and create a project
5305
05:07:04,718 --> 05:07:10,000
so i'm gonna go to my development um
5306
05:07:08,000 --> 05:07:11,599
folder where i have all my projects and
5307
05:07:13,680 --> 05:07:17,200
and then as you can see is flutter
5308
05:07:17,200 --> 05:07:21,280
and then and then dash dash org as an
5309
05:07:21,279 --> 05:07:27,239
and i'm going to see say se dot pixelity
5310
05:07:25,040 --> 05:07:30,159
now as i said my domain name is called
5311
05:07:27,240 --> 05:07:33,280
pixelity.sc but your org needs to be the
5312
05:07:30,159 --> 05:07:35,759
reverse of that okay so remember reverse
5313
05:07:33,279 --> 05:07:36,637
identifier so reverse domain identifier
5314
05:07:36,637 --> 05:07:39,360
then if your for instance organization
5315
05:07:39,360 --> 05:07:44,958
hello dot com then here you would have
5316
05:07:41,680 --> 05:07:46,957
to write com dot hello alright
5317
05:07:44,957 --> 05:07:48,877
so i'm gonna say s epixody but you
5318
05:07:46,957 --> 05:07:50,079
shouldn't do this so if you're following
5319
05:07:48,878 --> 05:07:52,479
along with this course please just
5320
05:07:50,080 --> 05:07:54,480
choose an identifier for your domain
5321
05:07:52,479 --> 05:07:56,239
that it makes sense to you and if you
5322
05:07:54,479 --> 05:07:57,919
don't have a domain if you if you're not
5323
05:07:56,240 --> 05:07:59,360
bothered by all of that if you're not
5324
05:07:57,919 --> 05:08:02,319
going to release your application to the
5325
05:07:59,360 --> 05:08:04,560
app store you don't even have to care
5326
05:08:02,319 --> 05:08:05,759
about this just put anything in here you
5327
05:08:09,840 --> 05:08:14,400
if that's what you want so it's not a
5328
05:08:12,560 --> 05:08:17,840
big deal to be honest with you so just
5329
05:08:14,400 --> 05:08:19,600
go ahead and pick an identifier so
5330
05:08:17,840 --> 05:08:22,080
i'm going to say s epixody because
5331
05:08:22,080 --> 05:08:26,958
and then in here you have to write your
5332
05:08:29,599 --> 05:08:32,717
what should we call this application to
5333
05:08:31,119 --> 05:08:34,239
be honest with you i i mean i personally
5334
05:08:34,240 --> 05:08:38,080
made up my mind what this application
5335
05:08:35,919 --> 05:08:38,877
should be called maybe we should call it
5336
05:08:42,637 --> 05:08:47,680
my personal notes or my notes
5337
05:08:55,759 --> 05:09:01,599
or notes list i don't know not my notes
5338
05:09:01,599 --> 05:09:06,000
sd pixel in my notes yeah why not
5339
05:09:06,000 --> 05:09:09,599
let's just call it my notes then all
5340
05:09:10,957 --> 05:09:13,840
let's go ahead and do that flutter
5341
05:09:13,840 --> 05:09:17,040
and i can see i mean actually i'm very
5342
05:09:15,599 --> 05:09:19,599
grateful that we got that little
5343
05:09:17,040 --> 05:09:20,638
notification on top so let this do its
5344
05:09:22,718 --> 05:09:26,560
it did its work and it's done and it
5345
05:09:24,319 --> 05:09:28,878
called something and it created a folder
5346
05:09:28,878 --> 05:09:32,400
and on top of this window if you saw
5347
05:09:30,797 --> 05:09:34,319
then there was a little message printed
5348
05:09:32,400 --> 05:09:35,920
a new version of flutter is available to
5349
05:09:34,319 --> 05:09:38,560
update to the latest version just run
5350
05:09:35,919 --> 05:09:40,000
flatter upgrade so that was not a part
5351
05:09:38,560 --> 05:09:41,920
of this course i didn't mean it for this
5352
05:09:40,000 --> 05:09:43,599
to happen but i can't control it either
5353
05:09:41,919 --> 05:09:45,519
because flutter is a tool that is being
5354
05:09:43,599 --> 05:09:47,599
developed by google it's an open source
5355
05:09:45,520 --> 05:09:49,439
tool when there is a new version when
5356
05:09:47,599 --> 05:09:50,957
you run any of these flutter commands
5357
05:09:50,957 --> 05:09:55,439
um with the version repository to see is
5358
05:09:53,439 --> 05:09:56,957
there any new version available and if
5359
05:09:55,439 --> 05:09:58,637
there is then it's going to give me this
5360
05:10:00,878 --> 05:10:04,319
um as i mentioned in the introduction of
5361
05:10:04,319 --> 05:10:09,119
i've planned this course quite a lot but
5362
05:10:06,240 --> 05:10:11,360
i haven't i can't plan it 100 so things
5363
05:10:09,119 --> 05:10:12,479
will happen that i hadn't planned for
5364
05:10:11,360 --> 05:10:14,718
and then we just have to roll with the
5365
05:10:12,479 --> 05:10:16,159
punches and i'm actually glad that this
5366
05:10:14,718 --> 05:10:18,560
thing happened right here so you can see
5367
05:10:16,159 --> 05:10:21,040
how to upgrade flutter as well so
5368
05:10:18,560 --> 05:10:22,958
as you can see it's very easy just copy
5369
05:10:21,040 --> 05:10:23,840
just say flutter upgrade okay so i'm
5370
05:10:22,957 --> 05:10:25,119
going to go at the bottom of the
5371
05:10:23,840 --> 05:10:27,520
terminal i'm just going to say flutter
5372
05:10:29,360 --> 05:10:34,000
right so this is going to actually take
5373
05:10:31,840 --> 05:10:35,439
some time depending on how big the
5374
05:10:38,718 --> 05:10:43,680
different kind of engines as you know
5375
05:10:43,680 --> 05:10:49,840
binaries or applications for ios it can
5376
05:10:46,957 --> 05:10:52,079
output it for android it can do it for
5377
05:10:54,159 --> 05:10:59,040
and basically desktop searches and mac
5378
05:10:56,080 --> 05:11:00,480
windows linux and then you will have web
5379
05:11:00,479 --> 05:11:04,079
quite a lot of things involved in
5380
05:11:02,159 --> 05:11:06,159
flutter as you can see in here it's like
5381
05:11:04,080 --> 05:11:07,520
downloading everything necessary in
5382
05:11:06,159 --> 05:11:10,400
order for you to be able to create
5383
05:11:10,400 --> 05:11:14,958
so after that is done you see it goes to
5384
05:11:12,718 --> 05:11:17,360
the ios tool so it's downloading but
5385
05:11:14,957 --> 05:11:19,039
it's also i believe after it's done
5386
05:11:19,040 --> 05:11:23,760
it also needs to make sure that it can
5387
05:11:23,759 --> 05:11:27,679
this is a process that might take some
5388
05:11:27,680 --> 05:11:32,718
and in order to avoid us having to wait
5389
05:11:32,718 --> 05:11:36,400
as you can see it's now going to web sdk
5390
05:11:36,400 --> 05:11:41,840
so we don't have to necessarily wait for
5391
05:11:38,878 --> 05:11:44,080
this so i'm just going to create a new
5392
05:11:41,840 --> 05:11:46,560
oh it actually finished so that was
5393
05:11:44,080 --> 05:11:48,160
quite fast all right so it it finishes
5394
05:11:46,560 --> 05:11:50,080
work we don't have to do anything
5395
05:11:50,080 --> 05:11:54,878
um so that's how you upgrade flutter so
5396
05:11:52,797 --> 05:11:56,797
just run this command as suggested by
5397
05:11:54,878 --> 05:11:59,360
the flutter tools itself flat upgrade
5398
05:12:01,599 --> 05:12:06,159
we've done that step now so we've set up
5399
05:12:03,919 --> 05:12:07,439
our project i'm just gonna move to my
5400
05:12:07,439 --> 05:12:11,759
and i'm gonna make sure that that topic
5401
05:12:11,759 --> 05:12:17,039
and for the next item what we're gonna
5402
05:12:13,520 --> 05:12:18,878
do here is we're gonna talk about um
5403
05:12:17,040 --> 05:12:21,280
we're gonna basically have a quick look
5404
05:12:21,279 --> 05:12:25,840
the environment set up by flutter when
5405
05:12:23,360 --> 05:12:27,680
you run photo create because the flow to
5406
05:12:25,840 --> 05:12:29,840
create doesn't just like create an empty
5407
05:12:27,680 --> 05:12:32,878
director it actually creates the
5408
05:12:29,840 --> 05:12:34,797
skeleton or the scaffold of your
5409
05:12:32,878 --> 05:12:36,319
flosser project but pretty much
5410
05:12:34,797 --> 05:12:39,039
everything necessary for you to be able
5411
05:12:39,040 --> 05:12:44,560
so in this in this application i mean in
5412
05:12:41,680 --> 05:12:46,240
this in this step of chapter 8 we're not
5413
05:12:44,560 --> 05:12:48,798
actually going to run the application on
5414
05:12:46,240 --> 05:12:50,320
any device that's for chapter 9 and for
5415
05:12:50,319 --> 05:12:54,637
but what we are going to do is to have a
5416
05:12:54,637 --> 05:13:00,399
project structure so let me go to my
5417
05:12:58,000 --> 05:13:01,759
notes here and what i'm going to do is
5418
05:13:04,400 --> 05:13:08,400
extension which is provided in the path
5419
05:13:06,400 --> 05:13:10,000
so i can just say code dot which opens
5420
05:13:08,400 --> 05:13:11,520
up visual studio code in the current
5421
05:13:13,279 --> 05:13:16,717
then once that is done i'm going to
5422
05:13:15,200 --> 05:13:18,400
bring a visual studio code here i'm just
5423
05:13:16,718 --> 05:13:20,240
going to take a little bit of care to
5424
05:13:20,240 --> 05:13:25,360
important parts of the screen
5425
05:13:22,878 --> 05:13:27,760
okay and i'm going to increase the size
5426
05:13:25,360 --> 05:13:30,159
quite dramatically so it's visible for
5427
05:13:27,759 --> 05:13:32,159
you as well it is very big on my screen
5428
05:13:32,159 --> 05:13:36,319
a nice size on the on the actual output
5429
05:13:36,319 --> 05:13:42,079
alright so as you can see here is the
5430
05:13:39,119 --> 05:13:44,000
folder created by flutter create
5431
05:13:42,080 --> 05:13:45,520
and there are quite a lot of bits and
5432
05:13:49,119 --> 05:13:54,878
a bit about a few of these folders and
5433
05:13:54,878 --> 05:13:58,958
one thing that you need to understand
5434
05:13:56,080 --> 05:14:00,958
about flutter is that it actually is not
5435
05:14:00,957 --> 05:14:06,479
it's not really like react native
5436
05:14:03,919 --> 05:14:09,199
uh if you're familiar with that flutter
5437
05:14:06,479 --> 05:14:12,399
on ios for instance it for those who
5438
05:14:09,200 --> 05:14:15,520
have done ios development uh flutter it
5439
05:14:12,400 --> 05:14:16,560
outputs a native binary on your on your
5440
05:14:18,400 --> 05:14:23,520
fat binary basically for your uh
5441
05:14:21,520 --> 05:14:25,600
ios application and it just puts one
5442
05:14:23,520 --> 05:14:28,080
view on the screen and then it
5443
05:14:25,599 --> 05:14:31,279
graphically renders all its contents
5444
05:14:28,080 --> 05:14:32,718
using metal okay so if you're not an ios
5445
05:14:31,279 --> 05:14:34,957
developer that probably doesn't make so
5446
05:14:34,957 --> 05:14:39,439
this part that i'm going to mention now
5447
05:14:36,957 --> 05:14:42,079
should make sense for everybody but
5448
05:14:39,439 --> 05:14:44,797
when you create a flutter application
5449
05:14:42,080 --> 05:14:47,600
and the flutter create command basically
5450
05:14:44,797 --> 05:14:49,599
spits out different parts that may be
5451
05:14:47,599 --> 05:14:51,119
necessary for your application to run on
5452
05:14:51,119 --> 05:14:55,919
one of those platforms one of the key
5453
05:14:52,637 --> 05:14:58,637
platforms that flutter runs on is ioso
5454
05:14:55,919 --> 05:15:01,919
that is the folder that contains the
5455
05:14:58,637 --> 05:15:04,000
native bits and pieces necessary for
5456
05:15:04,000 --> 05:15:09,759
in an ios simulator or on an ios device
5457
05:15:07,279 --> 05:15:11,680
such as an iphone or an ipad okay
5458
05:15:09,759 --> 05:15:14,239
so this is like as you can see it's the
5459
05:15:11,680 --> 05:15:16,159
project or the workspace and sorry and
5460
05:15:14,240 --> 05:15:17,760
the workspace because for those of you
5461
05:15:16,159 --> 05:15:18,560
who are ios developers you will know
5462
05:15:18,560 --> 05:15:22,080
there's a thing called cocoapods and
5463
05:15:20,400 --> 05:15:24,718
flutter internally actually uses
5464
05:15:22,080 --> 05:15:28,000
cocoapods for ios if you're not an ios
5465
05:15:29,520 --> 05:15:35,760
ios or android or web application
5466
05:15:32,718 --> 05:15:39,200
can bring with itself dependencies and a
5467
05:15:35,759 --> 05:15:42,159
dependency is a way for your application
5468
05:15:39,200 --> 05:15:44,400
to bring in code from other people in
5469
05:15:42,159 --> 05:15:47,119
order to be able to achieve special
5470
05:15:47,119 --> 05:15:53,119
there are various tools available for
5471
05:15:49,919 --> 05:15:55,439
ios developers android developers
5472
05:15:53,119 --> 05:15:57,279
web developers to be able to bring in
5473
05:15:55,439 --> 05:15:58,637
dependencies for web for instance if
5474
05:15:57,279 --> 05:16:01,279
you're writing a node application you
5475
05:15:58,637 --> 05:16:03,599
will just use npm which is a node
5476
05:16:01,279 --> 05:16:05,119
package manager if you're using swift
5477
05:16:03,599 --> 05:16:07,919
you will probably just bring in for
5478
05:16:05,119 --> 05:16:10,559
instance spm i think um swift package
5479
05:16:10,560 --> 05:16:15,600
and there's another a third one
5480
05:16:13,759 --> 05:16:17,279
um which i've kind of forgotten the name
5481
05:16:17,279 --> 05:16:21,680
which i may remember later if you're
5482
05:16:19,520 --> 05:16:23,760
using android you're probably familiar
5483
05:16:21,680 --> 05:16:24,479
with gradle and that you can like use
5484
05:16:24,479 --> 05:16:28,797
bringing in external dependencies so
5485
05:16:30,718 --> 05:16:34,479
this is a platform of android and this
5486
05:16:32,400 --> 05:16:36,480
is a platform of ios and here's web and
5487
05:16:38,878 --> 05:16:44,400
flutter sits on top of these so it can
5488
05:16:44,400 --> 05:16:48,000
all the small bits and pieces for these
5489
05:16:46,319 --> 05:16:49,840
platforms to be able to be packed
5490
05:16:48,000 --> 05:16:52,718
packaged inside one flutter application
5491
05:16:52,718 --> 05:16:55,600
and all these different platforms down
5492
05:16:55,599 --> 05:17:00,000
excuse me they can have their own
5493
05:16:57,680 --> 05:17:02,000
dependency management so the dependency
5494
05:17:00,000 --> 05:17:03,040
managements kind of sit under one layer
5495
05:17:03,040 --> 05:17:07,280
flutter then talks with these dependency
5496
05:17:05,599 --> 05:17:09,119
managers and says okay you need to
5497
05:17:07,279 --> 05:17:10,957
install this dependency for me to be
5498
05:17:12,479 --> 05:17:16,718
the reason i mention all of that is
5499
05:17:15,119 --> 05:17:19,520
that is the reason you can see a
5500
05:17:16,718 --> 05:17:21,360
workspace here and an xcode project and
5501
05:17:19,520 --> 05:17:23,279
that's because flutter internally is
5502
05:17:24,718 --> 05:17:27,920
cocoapods which in turn creates a
5503
05:17:28,797 --> 05:17:32,239
links together the main project and all
5504
05:17:32,240 --> 05:17:35,280
if you're not an ios developer if you're
5505
05:17:33,919 --> 05:17:37,279
not interested in all of this just know
5506
05:17:37,279 --> 05:17:43,199
is just so that your application run can
5507
05:17:45,360 --> 05:17:49,279
the next part which is important is the
5508
05:17:47,759 --> 05:17:51,199
test folder which we're actually going
5509
05:17:51,200 --> 05:17:55,040
the test folder is where you create your
5510
05:17:55,040 --> 05:17:57,680
if you're not familiar with software
5511
05:17:56,400 --> 05:17:59,200
development from before if you don't
5512
05:17:57,680 --> 05:18:01,760
have a background software engineering
5513
05:18:01,759 --> 05:18:05,679
the ability for programmers in order to
5514
05:18:03,680 --> 05:18:08,240
be able to make certain assertions about
5515
05:18:05,680 --> 05:18:10,319
their code and in order in order to make
5516
05:18:08,240 --> 05:18:13,760
sure that they can automatically run a
5517
05:18:10,319 --> 05:18:15,119
series of tests against their own code
5518
05:18:13,759 --> 05:18:17,759
to make sure that everything is
5519
05:18:15,119 --> 05:18:20,718
functioning as the programmer intended
5520
05:18:17,759 --> 05:18:22,399
that to if you are if you if you are
5521
05:18:20,718 --> 05:18:23,840
coming from software engineering
5522
05:18:22,400 --> 05:18:25,680
background that know that we're gonna
5523
05:18:23,840 --> 05:18:26,797
put our integration tests we're gonna
5524
05:18:26,797 --> 05:18:32,159
widget tests and unit tests inside this
5525
05:18:29,599 --> 05:18:34,000
test folder okay so i hope that covered
5526
05:18:32,159 --> 05:18:36,240
everybody that's that may be watching
5527
05:18:36,240 --> 05:18:40,480
then you also have a folder called
5528
05:18:38,319 --> 05:18:43,360
android and this is as you would expect
5529
05:18:40,479 --> 05:18:46,239
it is putting all the necessary files
5530
05:18:43,360 --> 05:18:49,279
and folders that is required for your
5531
05:18:49,279 --> 05:18:54,559
hosting your flutter application so
5532
05:18:52,479 --> 05:18:58,000
just know that flutter kind of
5533
05:18:54,560 --> 05:19:00,638
is a series of tools is like a mobile
5534
05:19:00,637 --> 05:19:07,360
that gets injected into these native
5535
05:19:03,599 --> 05:19:08,877
applications and natively also renders
5536
05:19:09,759 --> 05:19:14,079
and just like we had a host ios
5537
05:19:11,840 --> 05:19:16,718
application here you will also have an
5538
05:19:14,080 --> 05:19:18,718
android folder which contains all the
5539
05:19:18,718 --> 05:19:22,400
for your application to be run natively
5540
05:19:24,159 --> 05:19:27,840
phones and on android tablets
5541
05:19:27,840 --> 05:19:30,878
this is as you can if you're an android
5542
05:19:29,360 --> 05:19:32,240
developer you're probably like already
5543
05:19:30,878 --> 05:19:34,080
familiar with this like you have your
5544
05:19:32,240 --> 05:19:36,798
app and build great gradle inside the
5545
05:19:34,080 --> 05:19:38,638
app folder so there's nothing like fancy
5546
05:19:36,797 --> 05:19:40,559
going on here it's a simple android
5547
05:19:38,637 --> 05:19:42,718
application which you can actually
5548
05:19:40,560 --> 05:19:44,560
uh if you have android studio installed
5549
05:19:42,718 --> 05:19:45,840
on your computer if you want to you can
5550
05:19:44,560 --> 05:19:47,440
open that folder and actually have a
5551
05:19:45,840 --> 05:19:50,159
look around and even run that
5552
05:19:47,439 --> 05:19:51,439
application as a native and android app
5553
05:19:54,159 --> 05:19:59,119
that is our android folder and as you
5554
05:19:56,560 --> 05:20:00,240
would guess then we have a web folder
5555
05:20:00,240 --> 05:20:04,560
i think i mentioned this before but
5556
05:20:01,680 --> 05:20:06,000
flutter supports uh deployment of flash
5557
05:20:04,560 --> 05:20:07,520
applications to the web as well so you
5558
05:20:06,000 --> 05:20:09,360
can actually create web applications
5559
05:20:07,520 --> 05:20:10,637
with flutter it's nothing that we're
5560
05:20:09,360 --> 05:20:12,319
going to discuss in this course
5561
05:20:10,637 --> 05:20:14,159
particularly but if you're interested in
5562
05:20:12,319 --> 05:20:16,878
writing web applications with flutter
5563
05:20:16,878 --> 05:20:21,440
so have a look at that if you're
5564
05:20:18,560 --> 05:20:24,638
interested in web applications because
5565
05:20:21,439 --> 05:20:27,039
though web applications in flutter are
5566
05:20:24,637 --> 05:20:29,840
relatively new but foster has actually
5567
05:20:27,040 --> 05:20:31,520
come really far with with that so people
5568
05:20:29,840 --> 05:20:34,637
are creating all sorts of websites with
5569
05:20:36,957 --> 05:20:42,159
okay um then we have a little file here
5570
05:20:42,159 --> 05:20:46,637
and um as you can see it says this file
5571
05:20:47,599 --> 05:20:51,840
if you are not coming from a software
5572
05:20:50,400 --> 05:20:54,000
engineering background then you may not
5573
05:20:51,840 --> 05:20:55,840
know what analysis actually means but
5574
05:20:55,840 --> 05:21:01,119
a way for a flutter to be able to
5575
05:20:58,558 --> 05:21:02,080
have a look at the code that you write
5576
05:21:04,637 --> 05:21:09,360
sees fit so where it sees that oh you've
5577
05:21:07,439 --> 05:21:12,159
made a mistake in writing something that
5578
05:21:09,360 --> 05:21:15,040
could be written in a better way then it
5579
05:21:12,159 --> 05:21:16,637
consults this analysis options yaml file
5580
05:21:15,040 --> 05:21:18,400
and then it says okay what are the rules
5581
05:21:16,637 --> 05:21:20,159
that i have to adhere to like do you
5582
05:21:18,400 --> 05:21:21,920
want me to be very strict about certain
5583
05:21:20,159 --> 05:21:23,759
rules or do you want me to be like less
5584
05:21:21,919 --> 05:21:25,519
strict about other rules or do you want
5585
05:21:25,520 --> 05:21:31,040
certain mistakes that you're making so
5586
05:21:28,240 --> 05:21:32,080
the analysis options yaml file as it is
5587
05:21:34,637 --> 05:21:38,957
basically define the roles that make
5588
05:21:38,957 --> 05:21:41,680
in this course we're not going to talk
5589
05:21:40,240 --> 05:21:43,200
about so much analysis options to be
5590
05:21:41,680 --> 05:21:45,200
honest with you but just know that it's
5591
05:21:48,637 --> 05:21:53,919
the project structure here again
5592
05:21:51,680 --> 05:21:56,240
um and the next thing that we need to
5593
05:21:53,919 --> 05:22:00,319
have a look at which is very very
5594
05:21:56,240 --> 05:22:04,480
important is this file pop spec dot yaml
5595
05:22:00,319 --> 05:22:05,759
now um this is a file that i mean
5596
05:22:04,479 --> 05:22:07,840
one of the things that you you'll need
5597
05:22:05,759 --> 05:22:09,519
to know about flutter and the basic
5598
05:22:07,840 --> 05:22:12,080
structure that it creates for you is
5599
05:22:09,520 --> 05:22:14,797
that there are tons of documentations
5600
05:22:12,080 --> 05:22:16,798
and documentations are like so so well
5601
05:22:14,797 --> 05:22:19,119
done in my opinion in in the flutter
5602
05:22:16,797 --> 05:22:20,957
world where i personally come from like
5603
05:22:19,119 --> 05:22:22,957
the back-end developer development
5604
05:22:20,957 --> 05:22:24,797
background like i'm doing django or
5605
05:22:22,957 --> 05:22:26,877
where i'm doing ios development
5606
05:22:24,797 --> 05:22:29,439
sometimes documentation can for instance
5607
05:22:26,878 --> 05:22:30,637
on the ios native world be very kind of
5608
05:22:31,360 --> 05:22:36,000
flutter has gone like well above the
5609
05:22:33,759 --> 05:22:37,359
line of what is required from a
5610
05:22:36,000 --> 05:22:39,439
developer's perspective in terms of
5611
05:22:37,360 --> 05:22:41,040
documentation and they provide a lot of
5612
05:22:41,040 --> 05:22:44,400
and if you're not coming from a software
5613
05:22:42,797 --> 05:22:45,680
development background the documentation
5614
05:22:45,680 --> 05:22:49,760
information provided by the developers
5615
05:22:47,599 --> 05:22:52,399
who created the tool for you in order to
5616
05:22:49,759 --> 05:22:54,079
help you get better at that tool okay as
5617
05:22:52,400 --> 05:22:56,240
you can see here there's a file created
5618
05:22:54,080 --> 05:22:58,878
for you pop special and you can see
5619
05:22:56,240 --> 05:23:00,080
there's lots of gray lines here prefixed
5620
05:23:01,520 --> 05:23:04,637
if you remove them you'll see that they
5621
05:23:03,040 --> 05:23:06,400
become normal sentences but if you put
5622
05:23:04,637 --> 05:23:08,557
them back they become something called a
5623
05:23:06,400 --> 05:23:09,600
documentation and a documentation if
5624
05:23:08,558 --> 05:23:12,159
you're not from software engineering
5625
05:23:09,599 --> 05:23:14,319
background it means just piece of text
5626
05:23:12,159 --> 05:23:17,279
provided as an information block to you
5627
05:23:14,319 --> 05:23:18,637
which is not code anymore so the program
5628
05:23:18,637 --> 05:23:22,797
turn this into any sort of sort of a
5629
05:23:20,718 --> 05:23:25,520
code it's just going to ignore that this
5630
05:23:22,797 --> 05:23:27,439
is just for you to learn okay
5631
05:23:25,520 --> 05:23:29,200
so let's go back to this pop specky ammo
5632
05:23:27,439 --> 05:23:31,919
and talk about what it actually is pop
5633
05:23:29,200 --> 05:23:33,920
spec yaml is such an important part of
5634
05:23:31,919 --> 05:23:34,957
flutter that i think that you need to
5635
05:23:34,957 --> 05:23:41,199
ignore i mean don't ignore the comments
5636
05:23:38,637 --> 05:23:43,039
go and spend some time and read the
5637
05:23:41,200 --> 05:23:44,479
comments just to understand what they
5638
05:23:45,680 --> 05:23:49,920
um what i'm going to talk about here is
5639
05:23:48,240 --> 05:23:52,240
a little bit about what this pop spike
5640
05:23:49,919 --> 05:23:54,717
yaml actually is it is if you're for
5641
05:23:52,240 --> 05:23:56,878
instance from coming from a web
5642
05:23:54,718 --> 05:23:58,958
background and if you've worked with
5643
05:23:56,878 --> 05:24:00,240
node.js then we will have some sort of a
5644
05:24:00,240 --> 05:24:05,200
json file or if you're coming from
5645
05:24:02,319 --> 05:24:07,840
django you'll have settings.pi file if
5646
05:24:05,200 --> 05:24:10,400
you're coming from native ios world what
5647
05:24:07,840 --> 05:24:12,240
would be the equivalent of the config
5648
05:24:10,400 --> 05:24:14,798
it kind of will be kind of like your
5649
05:24:16,637 --> 05:24:21,680
i mean it is your it is kind of like a
5650
05:24:21,680 --> 05:24:27,360
what your project should actually be
5651
05:24:24,400 --> 05:24:31,520
looking like its icons the version
5652
05:24:27,360 --> 05:24:34,159
number its name all your dependencies so
5653
05:24:31,520 --> 05:24:36,797
these things will be all placed inside
5654
05:24:36,797 --> 05:24:40,239
when you change this file if you're
5655
05:24:38,718 --> 05:24:42,878
already running your application then
5656
05:24:42,878 --> 05:24:47,840
understands changes to this file and
5657
05:24:45,040 --> 05:24:49,280
then reconfigures itself if it can on
5658
05:24:49,279 --> 05:24:53,520
with your new configurations if it can't
5659
05:24:52,159 --> 05:24:55,279
then you may have to restart your
5660
05:24:53,520 --> 05:24:57,360
application like if you make drastic
5661
05:24:55,279 --> 05:25:00,797
changes for instance if you bring in a
5662
05:25:02,718 --> 05:25:07,119
then the project cannot be like re-run
5663
05:25:05,680 --> 05:25:09,360
immediately it needs to actually
5664
05:25:07,119 --> 05:25:10,957
recompile and link against that
5665
05:25:09,360 --> 05:25:12,319
dependency it's just like humanly
5666
05:25:12,319 --> 05:25:17,439
or computerly impossible for it to do so
5667
05:25:17,439 --> 05:25:21,680
so let's have a little look around in
5668
05:25:19,200 --> 05:25:24,319
this pop specky ammo file as you can see
5669
05:25:21,680 --> 05:25:26,159
there's a tag here called name and it's
5670
05:25:24,319 --> 05:25:27,599
and it's a value it's my notes and if
5671
05:25:27,599 --> 05:25:31,279
from the terminal if i bring back the
5672
05:25:31,279 --> 05:25:35,759
bring up the text a little bit
5673
05:25:33,200 --> 05:25:37,200
uh this is what we created right this is
5674
05:25:35,759 --> 05:25:38,399
the project this is how we created the
5675
05:25:38,400 --> 05:25:43,280
we said flutter creates an organization
5676
05:25:40,718 --> 05:25:45,119
of seda pixelity and then my notes all
5677
05:25:45,119 --> 05:25:50,319
that is what the my notes is for this is
5678
05:25:47,680 --> 05:25:51,520
your project name my notes all right
5679
05:25:50,319 --> 05:25:53,520
and this is a little just a little
5680
05:25:51,520 --> 05:25:55,119
description of what this application is
5681
05:25:56,479 --> 05:26:01,599
curious about what word is actually went
5682
05:25:58,637 --> 05:26:02,718
s e se.pixelity or whatever you created
5683
05:26:05,200 --> 05:26:09,040
now you can see i search for it i said
5684
05:26:07,040 --> 05:26:12,798
command f in visual studio code on in
5685
05:26:09,040 --> 05:26:14,159
mac or control f in linux and
5686
05:26:12,797 --> 05:26:15,520
windows and visual studio code and i
5687
05:26:14,159 --> 05:26:18,240
don't know actually what the shortcut
5688
05:26:18,240 --> 05:26:22,080
android studio i just now heard studios
5689
05:26:19,919 --> 05:26:24,319
a little bit peculiar about its uh key
5690
05:26:22,080 --> 05:26:26,480
mappings so it may not be command f on
5691
05:26:24,319 --> 05:26:28,878
mac or controller for linux and windows
5692
05:26:26,479 --> 05:26:31,040
so i search here now for sepixology and
5693
05:26:28,878 --> 05:26:34,000
you can see that there are no results so
5694
05:26:31,040 --> 05:26:35,200
this particular thing that i stressed so
5695
05:26:34,000 --> 05:26:37,119
much in the beginning that is very
5696
05:26:37,119 --> 05:26:41,119
is not actually something that flutter
5697
05:26:39,040 --> 05:26:42,638
itself needs as i mentioned it is
5698
05:26:41,119 --> 05:26:46,239
something that the different platforms
5699
05:26:42,637 --> 05:26:48,239
that you'll deploy to need so if i now
5700
05:26:46,240 --> 05:26:50,240
actually say command shift f in visual
5701
05:26:48,240 --> 05:26:53,680
studio code which searches in the entire
5702
05:26:50,240 --> 05:26:55,760
project say se.pixolity you will see
5703
05:26:53,680 --> 05:26:59,439
that it is found in different places
5704
05:26:55,759 --> 05:27:01,279
inside this project for ios for instance
5705
05:26:59,439 --> 05:27:02,479
you can see here is in the project pbx
5706
05:27:02,479 --> 05:27:06,637
and for android as well in our build
5707
05:27:04,558 --> 05:27:09,600
gradle so you'll see the application id
5708
05:27:06,637 --> 05:27:12,000
became se pixelity my nodes
5709
05:27:09,599 --> 05:27:14,319
and for ios if you look around here as
5710
05:27:12,000 --> 05:27:16,957
well you'll see that it is s e pixel in
5711
05:27:21,840 --> 05:27:26,878
so the other thing that you'll need to
5712
05:27:24,080 --> 05:27:29,440
know about the pop spec yaml is this
5713
05:27:26,878 --> 05:27:30,479
version number here and this is the
5714
05:27:29,439 --> 05:27:32,637
if you're not from a software
5715
05:27:30,479 --> 05:27:34,957
development background um if you haven't
5716
05:27:32,637 --> 05:27:37,840
done software development before
5717
05:27:34,957 --> 05:27:39,599
versioning is a way for you to tell
5718
05:27:37,840 --> 05:27:42,240
various places that you publish your
5719
05:27:39,599 --> 05:27:44,239
application on for such as ios app store
5720
05:27:46,080 --> 05:27:50,240
if you have something new in your
5721
05:27:50,240 --> 05:27:54,080
so for instance if you and this is this
5722
05:27:52,240 --> 05:27:55,680
is how software is actually actually
5723
05:27:54,080 --> 05:27:56,718
labeled like a software has different
5724
05:27:56,718 --> 05:28:00,558
what you're deploying what you're
5725
05:27:58,400 --> 05:28:02,878
developing here is a fluster application
5726
05:28:00,558 --> 05:28:05,520
but from the point of a store such as
5727
05:28:02,878 --> 05:28:06,400
the app store it's it's just a package
5728
05:28:06,400 --> 05:28:11,120
with some properties like its name
5729
05:28:08,637 --> 05:28:13,200
identifier and its version now this
5730
05:28:11,119 --> 05:28:16,399
version is very important because it is
5731
05:28:16,400 --> 05:28:20,638
or i know that google play store
5732
05:28:18,479 --> 05:28:22,399
actually supports also four digits
5733
05:28:24,797 --> 05:28:28,079
these numbers actually mean something
5734
05:28:28,080 --> 05:28:32,638
if you begin from the left and then you
5735
05:28:30,000 --> 05:28:35,680
go to the middle and then to the right
5736
05:28:32,637 --> 05:28:37,119
the left number is something called a
5737
05:28:37,119 --> 05:28:42,479
the middle number is called a minor
5738
05:28:38,797 --> 05:28:44,479
number and the right one and then most
5739
05:28:42,479 --> 05:28:46,878
the rightmost number is usually called
5740
05:28:46,878 --> 05:28:50,718
in normal software development the
5741
05:28:48,718 --> 05:28:53,360
process is kind of like this that
5742
05:28:50,718 --> 05:28:55,040
you begin with an idea you say okay my
5743
05:28:53,360 --> 05:28:57,760
idea is to create a notes application
5744
05:28:55,040 --> 05:29:00,718
that's that's the first idea that's idea
5745
05:28:57,759 --> 05:29:03,599
number one then you put one as the major
5746
05:29:00,718 --> 05:29:05,760
number then you begin by zero and zero
5747
05:29:03,599 --> 05:29:07,279
okay so that's how a version number is
5748
05:29:07,279 --> 05:29:11,680
so you say one zero zero that's version
5749
05:29:11,680 --> 05:29:15,680
then you release that application you
5750
05:29:13,520 --> 05:29:16,957
say okay i'm fine with that version one
5751
05:29:15,680 --> 05:29:19,119
and then you're in the kitchen cooking
5752
05:29:16,957 --> 05:29:21,520
some food and then you say okay um it
5753
05:29:19,119 --> 05:29:22,718
would be great if i could put like um if
5754
05:29:22,718 --> 05:29:26,240
the ability for users to be able to
5755
05:29:26,240 --> 05:29:30,798
it's not a huge functionality it's just
5756
05:29:28,000 --> 05:29:32,797
a little bit um improvement on what i
5757
05:29:32,797 --> 05:29:37,840
then you will go and say okay is that a
5758
05:29:37,840 --> 05:29:42,319
hmm it's not a major idea a major idea
5759
05:29:40,159 --> 05:29:44,000
would be like a total rewrite of the
5760
05:29:42,319 --> 05:29:46,000
application adding massive number of
5761
05:29:44,000 --> 05:29:48,558
features fixing massive number of bugs
5762
05:29:46,000 --> 05:29:51,040
etc so it's not a major idea then you go
5763
05:29:48,558 --> 05:29:53,040
to the minor idea and that minor idea
5764
05:29:51,040 --> 05:29:54,798
corresponds to this minor version here
5765
05:29:53,040 --> 05:29:57,520
so you say okay the previous one was
5766
05:29:54,797 --> 05:29:59,279
zero this one is how big of a difference
5767
05:29:57,520 --> 05:30:01,439
hmm it's just a small future so let's
5768
05:30:06,080 --> 05:30:09,600
not major enough to be a major idea but
5769
05:30:09,599 --> 05:30:14,557
but quite a big minor idea then you
5770
05:30:14,558 --> 05:30:20,638
from zero to maybe two or three it's not
5771
05:30:17,919 --> 05:30:22,479
so popular to do that usually
5772
05:30:20,637 --> 05:30:24,878
would go chronologically in that order
5773
05:30:22,479 --> 05:30:27,119
like one two three four but you're also
5774
05:30:28,240 --> 05:30:32,240
in special cases so let's say then you
5775
05:30:32,240 --> 05:30:35,840
and i'll now make it build and send it
5776
05:30:37,680 --> 05:30:41,599
just remember that your previous build
5777
05:30:42,957 --> 05:30:48,000
depending on how your project is
5778
05:30:45,360 --> 05:30:50,000
structured like you may decide that okay
5779
05:30:48,000 --> 05:30:51,840
every build that i make i'm going to
5780
05:30:50,000 --> 05:30:54,240
actually increase this build number so
5781
05:30:51,840 --> 05:30:56,400
the previous one was zero now it's gonna
5782
05:30:54,240 --> 05:30:58,320
be one then it's going to be two three
5783
05:30:56,400 --> 05:31:00,798
four five six blocks so every time you
5784
05:30:58,319 --> 05:31:02,957
make build and send it out to your
5785
05:31:00,797 --> 05:31:04,637
consumers even if they're a group of
5786
05:31:06,080 --> 05:31:09,040
your only consumers may actually just be
5787
05:31:08,000 --> 05:31:10,558
people who are downloading your
5788
05:31:09,040 --> 05:31:12,080
application directly from the app store
5789
05:31:12,080 --> 05:31:15,760
or from the web they may be interacting
5790
05:31:13,759 --> 05:31:17,679
with your application as well
5791
05:31:15,759 --> 05:31:19,359
then you may say okay every time i make
5792
05:31:17,680 --> 05:31:21,360
a new bill and send it out that's when i
5793
05:31:19,360 --> 05:31:23,119
actually increase this build number
5794
05:31:21,360 --> 05:31:24,080
or depending on your project setup you
5795
05:31:24,080 --> 05:31:28,480
come with into an agreement with your
5796
05:31:26,159 --> 05:31:30,400
teammates to say okay we don't increase
5797
05:31:28,479 --> 05:31:32,637
the bills chronologically but every time
5798
05:31:30,400 --> 05:31:34,878
we change the major or the minor we
5799
05:31:32,637 --> 05:31:37,360
actually reset the build back to zero
5800
05:31:34,878 --> 05:31:38,240
and then we go up chronologically so
5801
05:31:38,240 --> 05:31:41,600
i i don't want to go to be honest with
5802
05:31:40,080 --> 05:31:43,040
you too much into detail about the
5803
05:31:43,040 --> 05:31:45,760
interested in software development and i
5804
05:31:44,479 --> 05:31:47,040
think if you're watching this course
5805
05:31:45,759 --> 05:31:48,637
that kind of means that you're
5806
05:31:47,040 --> 05:31:50,080
interested in software development
5807
05:31:48,637 --> 05:31:52,239
you'll need to know about this so just
5808
05:31:50,080 --> 05:31:55,040
know that version is your way of
5809
05:31:52,240 --> 05:31:57,040
labeling your software and its features
5810
05:32:04,957 --> 05:32:08,239
but you don't have to play with this so
5811
05:32:06,159 --> 05:32:09,599
much to be honest with you so i think in
5812
05:32:08,240 --> 05:32:11,520
this entire course we're actually not
5813
05:32:12,797 --> 05:32:16,399
uh the next bit of information in the
5814
05:32:14,637 --> 05:32:18,718
pop special is the environment as you
5815
05:32:18,718 --> 05:32:23,200
now when you see sdk just think of
5816
05:32:23,200 --> 05:32:27,280
and this sdk is referring to the flutter
5817
05:32:27,279 --> 05:32:32,319
if you share your source code with some
5818
05:32:30,080 --> 05:32:34,558
other developer who's sitting maybe on
5819
05:32:34,558 --> 05:32:37,920
if they get your source code and they
5820
05:32:36,319 --> 05:32:39,759
want to for instance be able to test
5821
05:32:37,919 --> 05:32:42,479
this application on a simulator or an
5822
05:32:39,759 --> 05:32:45,439
emulator on a real device then they are
5823
05:32:47,119 --> 05:32:51,919
or less than this all right so you can
5824
05:32:49,919 --> 05:32:54,000
actually get your flutter version by i
5825
05:32:51,919 --> 05:32:55,679
believe if you run flutter dash dash
5826
05:32:55,680 --> 05:33:01,680
it will tell you that i'm plotter 281
5827
05:32:59,200 --> 05:33:04,240
and that as you can see here it says
5828
05:33:01,680 --> 05:33:06,240
yeah the sdk required in order to run
5829
05:33:06,240 --> 05:33:13,200
one five zero more than or equal to that
5830
05:33:09,040 --> 05:33:16,878
at least at least two one five zero okay
5831
05:33:13,200 --> 05:33:18,400
so that's your sdk the flutter sdk
5832
05:33:16,878 --> 05:33:20,797
the other part that you'll need to know
5833
05:33:18,400 --> 05:33:22,240
about is this section in the pops wiki
5834
05:33:20,797 --> 05:33:24,319
ammo and that that is called the
5835
05:33:22,240 --> 05:33:26,159
dependencies and this is what we're
5836
05:33:24,319 --> 05:33:26,957
going to talk about actually
5837
05:33:30,080 --> 05:33:36,320
and dependencies as i mentioned before
5838
05:33:33,599 --> 05:33:38,557
uh are ways for you as a software
5839
05:33:36,319 --> 05:33:41,040
developer to bring in code that other
5840
05:33:38,558 --> 05:33:43,120
people have written in order to make
5841
05:33:41,040 --> 05:33:45,040
your application application function
5842
05:33:43,119 --> 05:33:47,119
better or function in a completely new
5843
05:33:47,119 --> 05:33:50,637
um you need to kind of be careful with
5844
05:33:50,637 --> 05:33:55,439
depending on what dependencies or
5845
05:33:53,040 --> 05:33:57,200
libraries you bring into your project it
5846
05:33:55,439 --> 05:33:58,557
can actually make your life better or
5847
05:34:01,680 --> 05:34:04,878
basically when you bring it in a
5848
05:34:02,957 --> 05:34:07,439
dependency they're usually code written
5849
05:34:04,878 --> 05:34:11,040
by somebody else or other people that
5850
05:34:07,439 --> 05:34:12,717
may be working on a library so
5851
05:34:11,040 --> 05:34:14,558
when you're if you're not coming from
5852
05:34:12,718 --> 05:34:15,920
software development background then you
5853
05:34:14,558 --> 05:34:18,240
will need to know this and i'm just
5854
05:34:15,919 --> 05:34:20,797
going to warn you from from now so that
5855
05:34:18,240 --> 05:34:22,400
you've heard it at least from somebody
5856
05:34:20,797 --> 05:34:23,840
dependencies when you're picking
5857
05:34:22,400 --> 05:34:26,319
dependencies just be a little bit
5858
05:34:29,200 --> 05:34:33,520
it may be that they initially make your
5859
05:34:34,479 --> 05:34:38,399
since dependencies are code written by
5860
05:34:38,400 --> 05:34:43,280
and other people's priorities change
5861
05:34:41,599 --> 05:34:45,519
their lives may change so that they
5862
05:34:43,279 --> 05:34:47,119
don't have time enough enough time to
5863
05:34:45,520 --> 05:34:48,080
continue working on those dependencies
5864
05:34:48,080 --> 05:34:51,760
i have personally run into the issue
5865
05:34:49,520 --> 05:34:53,279
that uh we brought in a dependency into
5866
05:34:51,759 --> 05:34:54,957
a project and then after a while we just
5867
05:34:57,119 --> 05:35:02,878
actively working on this and maybe even
5868
05:34:59,040 --> 05:35:05,120
the developer made that library um
5869
05:35:02,878 --> 05:35:07,119
deprecated and deprecated is the world
5870
05:35:05,119 --> 05:35:09,599
that a word that you'll get to know when
5871
05:35:07,119 --> 05:35:10,957
you work more with software development
5872
05:35:09,599 --> 05:35:13,039
and deprecated kind of means that the
5873
05:35:10,957 --> 05:35:14,479
library is not supported anymore the
5874
05:35:14,479 --> 05:35:19,040
is not actively being worked on anymore
5875
05:35:17,200 --> 05:35:20,878
and the developers are encouraging you
5876
05:35:21,680 --> 05:35:26,319
when you bring in dependencies what i'd
5877
05:35:23,680 --> 05:35:29,119
like you to do is just to have a look at
5878
05:35:29,119 --> 05:35:33,520
and prioritize your picking and cherry
5879
05:35:39,040 --> 05:35:42,319
if the dependency is written by a single
5880
05:35:42,319 --> 05:35:46,079
um be a little bit careful about that
5881
05:35:46,080 --> 05:35:50,718
priorities may change and they may not
5882
05:35:50,718 --> 05:35:55,200
like continuously work on a
5883
05:35:53,520 --> 05:35:56,558
even if if it's an open source project
5884
05:35:55,200 --> 05:35:58,159
they may not be able to continuously
5885
05:35:58,159 --> 05:36:01,520
um if independence is written by an
5886
05:35:59,840 --> 05:36:02,878
organization especially an organization
5887
05:36:02,878 --> 05:36:07,119
faith in then prioritize it a little bit
5888
05:36:09,759 --> 05:36:15,759
if a dependency is written by a bunch of
5889
05:36:15,759 --> 05:36:21,359
under an organization prioritize that
5890
05:36:18,479 --> 05:36:22,957
also higher than a single person who has
5891
05:36:22,957 --> 05:36:26,319
who has a library under their private
5892
05:36:26,319 --> 05:36:29,119
that doesn't necessarily always mean
5893
05:36:27,759 --> 05:36:31,519
that a dependency created by an
5894
05:36:29,119 --> 05:36:33,119
organization is actually better quality
5895
05:36:31,520 --> 05:36:35,680
it just means that the chances of it
5896
05:36:33,119 --> 05:36:36,637
being deprecated are a little bit less
5897
05:36:37,759 --> 05:36:40,797
chances of the same library being
5898
05:36:39,119 --> 05:36:44,557
deprecated had it been written by a
5899
05:36:40,797 --> 05:36:46,319
single person under their private name
5900
05:36:44,558 --> 05:36:48,000
so these may actually to be honest with
5901
05:36:46,319 --> 05:36:48,957
you sound a little bit high level at the
5902
05:36:50,479 --> 05:36:54,558
think okay why do i have to need all
5903
05:36:51,919 --> 05:36:58,557
this it's just that it is very easy for
5904
05:36:54,558 --> 05:37:01,040
newcomers to flutter to get
5905
05:36:58,558 --> 05:37:02,798
dependent on dependencies in that it's
5906
05:37:01,040 --> 05:37:04,400
so easy to bring in a dependency and
5907
05:37:02,797 --> 05:37:05,599
just work with it that people forget
5908
05:37:05,599 --> 05:37:09,039
this is actually code written by a
5909
05:37:07,040 --> 05:37:10,798
single person sitting in there in their
5910
05:37:09,040 --> 05:37:12,798
room just like me sitting here and
5911
05:37:10,797 --> 05:37:14,637
telling you not to listen to people who
5912
05:37:14,637 --> 05:37:19,599
but i believe it is very important to
5913
05:37:19,599 --> 05:37:25,439
your thoughts towards a little bit more
5914
05:37:23,040 --> 05:37:28,638
constructive dependencies that are good
5915
05:37:25,439 --> 05:37:29,919
for your project in the long run but if
5916
05:37:28,637 --> 05:37:31,200
you're writing an application i just
5917
05:37:29,919 --> 05:37:32,479
want to release it and don't care about
5918
05:37:32,479 --> 05:37:36,637
after you've released it maybe
5919
05:37:34,637 --> 05:37:39,119
maybe it's okay to bring in a dependency
5920
05:37:39,119 --> 05:37:42,637
that that dependency that you don't even
5921
05:37:40,479 --> 05:37:44,718
care about but i would even challenge
5922
05:37:42,637 --> 05:37:46,159
that idea of releasing an application
5923
05:37:44,718 --> 05:37:47,520
which you may not care about after the
5924
05:37:46,159 --> 05:37:49,919
first release but because that's usually
5925
05:37:49,919 --> 05:37:55,039
okay a lot of talk about dependencies
5926
05:37:51,520 --> 05:37:56,637
but i think that had to be said
5927
05:37:55,040 --> 05:37:58,718
so we're talking about dependency i'm
5928
05:37:56,637 --> 05:38:00,319
just gonna bring in the captions so
5929
05:38:00,319 --> 05:38:04,797
now here you can also see there is a
5930
05:38:02,637 --> 05:38:06,718
dependency dependency here by default
5931
05:38:04,797 --> 05:38:08,878
brought into you by flutter itself
5932
05:38:08,878 --> 05:38:13,920
and cupertino icons is a dependency that
5933
05:38:11,680 --> 05:38:15,520
i believe that the flutter team itself
5934
05:38:17,360 --> 05:38:20,319
you may be thinking okay what are these
5935
05:38:19,119 --> 05:38:22,239
dependencies like where do they come
5936
05:38:20,319 --> 05:38:23,759
from they actually come from normal
5937
05:38:23,759 --> 05:38:28,877
companies so i'm going to bring up a
5938
05:38:28,878 --> 05:38:34,878
and it is called pop.dev i'll bring it
5939
05:38:31,680 --> 05:38:38,159
up so that you can actually see it
5940
05:38:38,159 --> 05:38:42,240
you can see that in this website popped
5941
05:38:40,479 --> 05:38:43,439
up there you can search for dependencies
5942
05:38:42,240 --> 05:38:45,440
so i'm actually going to copy this
5943
05:38:45,439 --> 05:38:50,877
and i'm going to paste it right there
5944
05:38:47,919 --> 05:38:52,877
um kupertino icon just enter and i'm
5945
05:38:50,878 --> 05:38:54,637
gonna press on it and you'll see that
5946
05:38:52,878 --> 05:38:56,000
it's published by the flutter team
5947
05:38:57,040 --> 05:39:01,200
pop.dev is the website where you will
5948
05:38:59,599 --> 05:39:03,599
search for dependencies so you just
5949
05:39:01,200 --> 05:39:07,040
search for a package and then it will
5950
05:39:03,599 --> 05:39:08,797
bring up results here for you so
5951
05:39:07,040 --> 05:39:11,280
um this is how you'll search for
5952
05:39:13,759 --> 05:39:17,039
now that we talked about that let's also
5953
05:39:15,680 --> 05:39:19,439
talk about something called dev
5954
05:39:21,840 --> 05:39:24,637
dependencies that will bring into your
5955
05:39:24,637 --> 05:39:29,279
which are useful only under development
5956
05:39:29,279 --> 05:39:33,039
if you're familiar with software
5957
05:39:30,718 --> 05:39:34,878
engineering the normal dependencies will
5958
05:39:33,040 --> 05:39:36,479
get linked to your project and then you
5959
05:39:34,878 --> 05:39:39,440
will they will be shipped with your
5960
05:39:36,479 --> 05:39:41,599
application whereas dev dependencies
5961
05:39:39,439 --> 05:39:43,119
there are only dependencies that
5962
05:39:43,119 --> 05:39:47,039
under the development time will use in
5963
05:39:45,279 --> 05:39:48,557
order to make your software better and
5964
05:39:47,040 --> 05:39:50,240
as you can see here one of the
5965
05:39:48,558 --> 05:39:51,680
dependencies for instance is flutter
5966
05:39:51,680 --> 05:39:56,319
or flutter lens in this case as well
5967
05:39:56,319 --> 05:40:00,000
okay so there are lots and lots of
5968
05:39:58,240 --> 05:40:01,520
things to talk about here and as you can
5969
05:40:00,000 --> 05:40:03,040
see here in the future actually we'll
5970
05:40:01,520 --> 05:40:05,760
work with this that you can bring in
5971
05:40:03,040 --> 05:40:08,000
assets and images and bringing them into
5972
05:40:09,599 --> 05:40:14,717
this is a quick look around at the pub
5973
05:40:16,240 --> 05:40:20,240
i'm just going to tick in my notes here
5974
05:40:18,000 --> 05:40:21,919
that pops back yaml we've talked about
5975
05:40:24,558 --> 05:40:29,120
we actually in our application we're
5976
05:40:26,797 --> 05:40:30,637
going to need some dependencies in order
5977
05:40:29,119 --> 05:40:32,000
to be able to continue working with the
5978
05:40:32,000 --> 05:40:36,957
we haven't talked so much about firebase
5979
05:40:33,680 --> 05:40:40,957
before but just know that firebase is
5980
05:40:40,957 --> 05:40:46,877
kind of go serverless but also have a
5981
05:40:43,680 --> 05:40:48,957
server now serverless is just a fun
5982
05:40:46,878 --> 05:40:51,119
funky word that is being used nowadays
5983
05:40:48,957 --> 05:40:53,039
to describe a server written by somebody
5984
05:40:51,119 --> 05:40:54,957
else so a server that you don't
5985
05:40:53,040 --> 05:40:56,159
personally have to write if you don't
5986
05:40:54,957 --> 05:40:57,520
come from a software development
5987
05:40:56,159 --> 05:40:59,040
background for instance you're a product
5988
05:40:59,040 --> 05:41:03,680
a server is where your data sits in the
5989
05:41:06,159 --> 05:41:09,759
you as a developer sitting in front of
5990
05:41:08,159 --> 05:41:11,200
your computer right now you're writing a
5991
05:41:09,759 --> 05:41:12,319
flutter application and your flash
5992
05:41:11,200 --> 05:41:14,400
application is going to be installed on
5993
05:41:12,319 --> 05:41:16,479
ios and android devices and that is the
5994
05:41:14,400 --> 05:41:18,558
client the client is the consumer of the
5995
05:41:16,479 --> 05:41:21,119
data sent by the server okay so the
5996
05:41:18,558 --> 05:41:24,638
server is where the logic sits on a
5997
05:41:21,119 --> 05:41:26,718
computer in the cloud okay and firebase
5998
05:41:24,637 --> 05:41:28,718
is a computer in the cloud just think of
5999
05:41:26,718 --> 05:41:30,958
think of that that is written by google
6000
05:41:28,718 --> 05:41:33,600
so you control it with simple commands
6001
05:41:30,957 --> 05:41:35,840
on your computer but it controls your
6002
05:41:33,599 --> 05:41:38,079
data so your client your flutter
6003
05:41:35,840 --> 05:41:39,840
application can connect to it and grab
6004
05:41:38,080 --> 05:41:41,680
the data and read the data and
6005
05:41:39,840 --> 05:41:43,680
manipulate the data on the client side
6006
05:41:43,680 --> 05:41:49,040
now in order to talk to firebase we
6007
05:41:49,040 --> 05:41:55,200
dependencies and firebase um will i'll
6008
05:41:52,080 --> 05:41:58,558
bring up my safari window here
6009
05:41:55,200 --> 05:42:01,040
now let's have a look at firebase core
6010
05:42:01,040 --> 05:42:04,479
click on it firebase core as you can see
6011
05:42:02,878 --> 05:42:06,319
it's written by the publisher is
6012
05:42:06,319 --> 05:42:10,400
and just remember that flutter is
6013
05:42:12,479 --> 05:42:17,119
i personally think that anything related
6014
05:42:14,558 --> 05:42:19,120
to firebase is completely okay to bring
6015
05:42:17,119 --> 05:42:21,119
in into your flutter application has a
6016
05:42:22,479 --> 05:42:28,319
um i'm going to go here and then say
6017
05:42:28,319 --> 05:42:33,279
for this particular project okay so
6018
05:42:31,520 --> 05:42:34,878
if you're in visual studio code you can
6019
05:42:34,878 --> 05:42:38,558
the terminal up uh i actually forgot the
6020
05:42:37,279 --> 05:42:41,680
command for bringing the terminal i
6021
05:42:38,558 --> 05:42:43,440
think on my mac is control backtick
6022
05:42:41,680 --> 05:42:46,080
but i believe you can also always bring
6023
05:42:43,439 --> 05:42:48,957
up terminal advice going to terminal and
6024
05:42:46,080 --> 05:42:51,360
new terminal okay now i can see there
6025
05:42:48,957 --> 05:42:53,039
are two terminal windows here okay now
6026
05:42:51,360 --> 05:42:55,600
i'm going to get rid of the explorer on
6027
05:42:53,040 --> 05:42:58,240
the left hand side so you can see that
6028
05:42:55,599 --> 05:43:00,000
the data a little bit better here
6029
05:42:58,240 --> 05:43:02,638
there are four dependencies that we need
6030
05:43:00,000 --> 05:43:04,479
to bring into our project all right and
6031
05:43:02,637 --> 05:43:07,360
i want you to follow along with this
6032
05:43:07,360 --> 05:43:10,479
previously what we had to do in order to
6033
05:43:09,119 --> 05:43:12,079
i mean previously in the previous
6034
05:43:10,479 --> 05:43:13,680
versions of flutter if you wanted to
6035
05:43:12,080 --> 05:43:14,958
bring in a dependency then you'd have to
6036
05:43:14,957 --> 05:43:19,840
you go to your in your pop spec and then
6037
05:43:17,759 --> 05:43:22,159
add your dependencies manually with
6038
05:43:22,159 --> 05:43:27,200
you have to go to those dependencies top
6039
05:43:24,558 --> 05:43:28,319
dev websites to see the current version
6040
05:43:28,319 --> 05:43:30,878
but with the latest versions of flutter
6041
05:43:29,680 --> 05:43:34,080
you don't have to do that all you have
6042
05:43:30,878 --> 05:43:34,878
to do is just to say flutter pop add
6043
05:43:34,878 --> 05:43:39,119
i'm going to do that right now
6044
05:43:37,279 --> 05:43:41,119
so that's how you bring in a dependency
6045
05:43:41,119 --> 05:43:46,239
the first dependency that we need is
6046
05:43:42,718 --> 05:43:49,440
firebase core so just enter this command
6047
05:43:51,360 --> 05:43:54,718
then say the same command but say
6048
05:43:54,718 --> 05:43:58,080
off i'm gonna have a look at my notes
6049
05:43:56,637 --> 05:44:00,479
basically here to make sure that i'm
6050
05:43:58,080 --> 05:44:02,000
entering the correct dependencies
6051
05:44:00,479 --> 05:44:03,599
and i'm not going to talk so much right
6052
05:44:02,000 --> 05:44:05,279
now about what these dependencies
6053
05:44:05,279 --> 05:44:09,360
because that is going to take a lot of
6054
05:44:06,957 --> 05:44:10,957
time as well so let's just bring the
6055
05:44:09,360 --> 05:44:13,600
dependencies in there are four
6056
05:44:10,957 --> 05:44:16,159
dependencies so the next dependency that
6057
05:44:27,919 --> 05:44:34,159
cloud firestore is the third dependency
6058
05:44:30,000 --> 05:44:34,159
and then we say firebase analytics
6059
05:44:35,759 --> 05:44:41,279
so that is the fourth dependency
6060
05:44:41,279 --> 05:44:45,360
we've brought in four dependencies at
6061
05:44:50,240 --> 05:44:55,200
the kernel the main important parts
6062
05:44:52,797 --> 05:44:57,439
parts of firebase which again is what
6063
05:44:55,200 --> 05:44:59,760
we're going to use as our server where
6064
05:44:57,439 --> 05:45:02,000
all the nodes for all our users are
6065
05:45:04,319 --> 05:45:09,360
auth is the short form let me see where
6066
05:45:06,240 --> 05:45:11,280
did it go um here firebase off that is
6067
05:45:12,319 --> 05:45:15,360
um i haven't yet shown how that our
6068
05:45:14,240 --> 05:45:17,760
application is actually going to look
6069
05:45:17,759 --> 05:45:21,119
authentication is where our users will
6070
05:45:21,119 --> 05:45:26,319
uh log into our application and log out
6071
05:45:23,919 --> 05:45:28,399
and also get email confirmations to send
6072
05:45:26,319 --> 05:45:30,000
to their emails in order to be able to
6073
05:45:30,000 --> 05:45:33,279
auth is for authentication and that's
6074
05:45:31,759 --> 05:45:35,119
what we're gonna use it for in order to
6075
05:45:35,119 --> 05:45:39,919
are interacting with our application
6076
05:45:36,637 --> 05:45:43,119
they're actually logged in okay
6077
05:45:39,919 --> 05:45:46,399
the next part is cloud firestore
6078
05:45:43,119 --> 05:45:49,039
and this dependency is used for when we
6079
05:45:46,400 --> 05:45:51,760
actually store a logged in users notes
6080
05:45:52,637 --> 05:45:57,360
it's just funky names to be honest with
6081
05:45:54,159 --> 05:46:01,439
you they're just names decided
6082
05:45:57,360 --> 05:46:03,760
by developers just like me and you so
6083
05:46:01,439 --> 05:46:05,840
and the next part is firebase analytics
6084
05:46:05,840 --> 05:46:10,957
if you use firebase analytics when you
6085
05:46:08,240 --> 05:46:13,040
basically set up your firebase backend
6086
05:46:10,957 --> 05:46:14,957
you will get some free analytics in for
6087
05:46:14,957 --> 05:46:18,000
screen did the user go to which button
6088
05:46:16,718 --> 05:46:20,080
did they press and you can have a look
6089
05:46:18,000 --> 05:46:22,159
at these analytics when you then look at
6090
05:46:20,080 --> 05:46:24,400
your firebase console which we're gonna
6091
05:46:24,400 --> 05:46:28,878
i mean i know all of these are quiet um
6092
05:46:27,200 --> 05:46:30,080
maybe a high level if you're not if
6093
05:46:28,878 --> 05:46:32,479
you're not familiar with firebase you
6094
05:46:30,080 --> 05:46:34,958
may be like what the hell did we just do
6095
05:46:32,479 --> 05:46:37,040
and that is okay you don't have to know
6096
05:46:34,957 --> 05:46:39,840
all of this just know that we are these
6097
05:46:37,040 --> 05:46:41,520
four dependencies are stuff we need in
6098
05:46:39,840 --> 05:46:43,360
order to make our application function
6099
05:46:41,520 --> 05:46:44,957
all right so now that we've added these
6100
05:46:43,360 --> 05:46:47,119
dependencies you can actually go back to
6101
05:46:44,957 --> 05:46:49,359
your popspakiano file and kind of have a
6102
05:46:49,360 --> 05:46:53,520
at the dependencies that we added and
6103
05:46:51,759 --> 05:46:56,079
you can see all of them were added here
6104
05:46:53,520 --> 05:46:58,957
automatically for you with their latest
6105
05:46:56,080 --> 05:47:00,798
versions okay so previously in previous
6106
05:46:58,957 --> 05:47:02,557
versions of flutter we had to do this
6107
05:47:00,797 --> 05:47:04,557
manually but now you can just say
6108
05:47:02,558 --> 05:47:06,479
flutter pop ad and it will add the
6109
05:47:04,558 --> 05:47:09,280
dependencies for you directly to pop
6110
05:47:10,319 --> 05:47:14,878
great a lot of things we discussed here
6111
05:47:13,119 --> 05:47:17,200
it almost took 50 minutes to go through
6112
05:47:14,878 --> 05:47:19,520
all of these basics but i believe
6113
05:47:17,200 --> 05:47:21,600
actually basics should take more time to
6114
05:47:19,520 --> 05:47:23,040
explain than the more advanced stuff
6115
05:47:23,040 --> 05:47:28,159
the more advanced you get the less
6116
05:47:25,439 --> 05:47:30,159
explanation you need so that is why all
6117
05:47:28,159 --> 05:47:31,549
these basic things basically take time
6118
05:47:34,797 --> 05:47:39,919
i'm just going to take in my notes that
6119
05:47:36,400 --> 05:47:39,920
we've talked about all of these
6120
05:47:41,599 --> 05:47:46,479
and i think this is actually a wrap for
6121
05:47:44,637 --> 05:47:48,957
chapter number eight so chapter number
6122
05:47:48,957 --> 05:47:52,159
how to set up our project we've actually
6123
05:47:50,479 --> 05:47:55,040
set up our project now we've set up our
6124
05:47:52,159 --> 05:47:57,680
dependencies had a look around uh the
6125
05:47:55,040 --> 05:48:00,558
default flutter template and we also
6126
05:48:00,558 --> 05:48:04,958
that's great stuff in chapter number
6127
05:48:02,558 --> 05:48:08,159
nine we're gonna talk about my favorite
6128
05:48:04,957 --> 05:48:10,319
which is the ios app setup and in this
6129
05:48:08,159 --> 05:48:14,558
chapter actually we're gonna go through
6130
05:48:10,319 --> 05:48:17,360
a lot of things profiles certificates
6131
05:48:14,558 --> 05:48:19,920
we're gonna talk about app ids
6132
05:48:17,360 --> 05:48:22,159
a lot a lot a lot i can see here in the
6133
05:48:19,919 --> 05:48:23,679
list so i'm really excited actually for
6134
05:48:25,040 --> 05:48:30,319
go grab a cup of coffee or a cup of tea
6135
05:48:27,119 --> 05:48:32,000
and i'll see you in the next chapter
6136
05:48:30,319 --> 05:48:33,200
hello and welcome to chapter nine of
6137
05:48:33,200 --> 05:48:38,878
in this chapter we're going to talk
6138
05:48:34,479 --> 05:48:41,520
about the setup of our ios app and as i
6139
05:48:38,878 --> 05:48:42,718
mentioned it i think it was in um the
6140
05:48:42,718 --> 05:48:45,520
uh chapter in the absolute first
6141
05:48:44,319 --> 05:48:48,479
actually it's not a chapter it's just
6142
05:48:45,520 --> 05:48:51,119
introduction to this whole course
6143
05:48:48,479 --> 05:48:52,797
um we talked a little bit about what
6144
05:48:51,119 --> 05:48:54,797
we're planning to do with this
6145
05:48:52,797 --> 05:48:56,878
application that we're developing here
6146
05:48:54,797 --> 05:48:58,637
and um two of the things that we're
6147
05:48:56,878 --> 05:49:01,040
going to do is to actually release the
6148
05:48:58,637 --> 05:49:03,039
app in the app store and in the play
6149
05:49:01,040 --> 05:49:05,040
store now if you're not planning to
6150
05:49:05,040 --> 05:49:08,479
potentially skip over this chapter
6151
05:49:08,479 --> 05:49:13,200
but i still believe that if you're
6152
05:49:10,319 --> 05:49:15,040
planning on becoming a flutter developer
6153
05:49:13,200 --> 05:49:16,718
you need to know how these things work
6154
05:49:16,718 --> 05:49:20,400
being a flustered developer depending on
6155
05:49:18,797 --> 05:49:21,840
what kind of flutter developer that you
6156
05:49:21,840 --> 05:49:26,000
um with me assuming that you want to
6157
05:49:24,080 --> 05:49:27,360
become an actual flutter developer where
6158
05:49:26,000 --> 05:49:29,119
you can for instance work on different
6159
05:49:27,360 --> 05:49:32,840
applications and release them personally
6160
05:49:29,119 --> 05:49:35,439
or you can work in like a team con
6161
05:49:32,840 --> 05:49:36,479
concept uh and in the context of a team
6162
05:49:36,479 --> 05:49:40,319
work with other developers inside a
6163
05:49:38,080 --> 05:49:41,920
company for instance in order to work on
6164
05:49:40,319 --> 05:49:44,400
their applications and release them than
6165
05:49:44,400 --> 05:49:47,040
if you're if you fall into any of those
6166
05:49:45,919 --> 05:49:48,717
categories that you actually want to
6167
05:49:47,040 --> 05:49:50,558
release your application then i strongly
6168
05:49:48,718 --> 05:49:52,000
believe that you should know how to do
6169
05:49:52,000 --> 05:49:56,400
although you may be a part of a part of
6170
05:49:53,759 --> 05:49:58,877
a team of a huge organization where the
6171
05:49:56,400 --> 05:50:00,878
release process is its own like process
6172
05:49:58,878 --> 05:50:02,479
that you basically hand over your source
6173
05:50:00,878 --> 05:50:04,558
code to them and then they basically
6174
05:50:02,479 --> 05:50:06,239
build it and repair it and release it
6175
05:50:04,558 --> 05:50:08,479
but if you want to become like a
6176
05:50:06,240 --> 05:50:10,558
full-fledged flutter developer or a
6177
05:50:08,479 --> 05:50:12,079
mobile developer for that matter you'd
6178
05:50:12,080 --> 05:50:14,718
how to actually release your
6179
05:50:14,718 --> 05:50:18,240
so in this chapter we're going to talk
6180
05:50:18,240 --> 05:50:21,520
releasing your app or actually we're
6181
05:50:20,400 --> 05:50:24,558
going to talk about preparing your
6182
05:50:29,599 --> 05:50:33,599
is how do you set up your flutter
6183
05:50:32,000 --> 05:50:34,957
application so that you can actually
6184
05:50:34,957 --> 05:50:41,119
later and release it in the ios app
6185
05:50:41,119 --> 05:50:46,319
and if i bring up the next caption here
6186
05:50:46,319 --> 05:50:51,200
in order for you to be able to
6187
05:50:48,718 --> 05:50:54,400
build your application and then deploy
6188
05:50:51,200 --> 05:50:56,400
it in the app store you need an ios
6189
05:50:56,400 --> 05:51:00,558
and i talked about this previously um
6190
05:51:00,558 --> 05:51:05,600
how what a developer account is and that
6191
05:51:03,040 --> 05:51:08,638
you'd have to apply for it i think it
6192
05:51:05,599 --> 05:51:10,079
was in chapter one we talked about this
6193
05:51:08,637 --> 05:51:11,520
but if you've jumped over that chapter
6194
05:51:10,080 --> 05:51:14,000
you'd need to know that you have to
6195
05:51:11,520 --> 05:51:16,878
apply for a developer account at apple
6196
05:51:14,000 --> 05:51:18,319
and once granted that developer account
6197
05:51:16,878 --> 05:51:21,520
then you're going to be able to get
6198
05:51:18,319 --> 05:51:23,279
access to a portal portal called the
6199
05:51:23,279 --> 05:51:27,599
app store connect is your portal for
6200
05:51:27,599 --> 05:51:32,319
and uploading to the app store
6201
05:51:30,000 --> 05:51:33,439
downloading some debug information etc
6202
05:51:32,319 --> 05:51:35,599
which i'm not going to go into so much
6203
05:51:33,439 --> 05:51:38,479
detail right now and it also has a side
6204
05:51:35,599 --> 05:51:40,399
note as a developer you will get access
6205
05:51:38,479 --> 05:51:42,079
something called i think the developer
6206
05:51:40,400 --> 05:51:43,920
portal or something like that i think
6207
05:51:43,919 --> 05:51:47,839
i believe so i think we just call it
6208
05:51:45,279 --> 05:51:49,279
developer portal or developer developer
6209
05:51:49,279 --> 05:51:53,039
so you'll get access to that and you'll
6210
05:51:50,957 --> 05:51:56,399
be able to manage things such as
6211
05:51:53,040 --> 05:51:58,080
certificates and profiles okay so
6212
05:51:56,400 --> 05:51:59,120
which we're going to talk about soon
6213
05:51:59,119 --> 05:52:02,399
let's say that you have your developer
6214
05:52:00,797 --> 05:52:03,919
account and if you don't have your
6215
05:52:02,400 --> 05:52:06,798
developer account then please just go
6216
05:52:03,919 --> 05:52:09,119
and search online for register developer
6217
05:52:06,797 --> 05:52:11,039
account or just watch the first chapter
6218
05:52:09,119 --> 05:52:12,718
i have to look at my notes actually here
6219
05:52:11,040 --> 05:52:15,120
and see if that's what we talked about
6220
05:52:15,119 --> 05:52:19,680
actually yeah i can see here chapter one
6221
05:52:17,200 --> 05:52:21,040
was titled developer accounts and in
6222
05:52:19,680 --> 05:52:23,360
that chapter we talked about how to
6223
05:52:21,040 --> 05:52:25,760
register for an ios developer again in
6224
05:52:25,759 --> 05:52:29,039
chapter one if you haven't done that and
6225
05:52:27,520 --> 05:52:30,479
if you are planning to actually release
6226
05:52:36,878 --> 05:52:40,159
so now you know that you need the
6227
05:52:38,000 --> 05:52:42,558
developer account and it costs a little
6228
05:52:40,159 --> 05:52:45,040
bit of money i think it's about 99 so in
6229
05:52:42,558 --> 05:52:46,798
sweden it's about 990 swedish crowns
6230
05:52:45,040 --> 05:52:49,120
something like that or 1000 swedish
6231
05:52:50,400 --> 05:52:53,280
now that we've talked about the
6232
05:52:51,279 --> 05:52:55,119
developer account let's talk about the
6233
05:52:53,279 --> 05:52:56,557
certificates and profiles because this
6234
05:52:55,119 --> 05:52:58,557
is the thing that trips up a lot of
6235
05:52:56,558 --> 05:52:59,760
mobile developers when they come to ios
6236
05:52:59,759 --> 05:53:05,199
um i mean i've been doing ios
6237
05:53:01,680 --> 05:53:06,159
development since late 2000 2007
6238
05:53:08,637 --> 05:53:14,239
ios sdk as such it was like just a set
6239
05:53:11,680 --> 05:53:16,637
of tools and very little library support
6240
05:53:14,240 --> 05:53:18,480
because originally ios apps by steve
6241
05:53:16,637 --> 05:53:20,239
jobs definition were supposed to be web
6242
05:53:20,240 --> 05:53:23,600
apple just transitioned to disbelief
6243
05:53:22,319 --> 05:53:25,040
that yeah we actually have to have
6244
05:53:23,599 --> 05:53:27,039
native applications so they released
6245
05:53:25,040 --> 05:53:28,479
some tools and xcode was there so you
6246
05:53:27,040 --> 05:53:30,878
could build some simple applications
6247
05:53:28,479 --> 05:53:33,119
with ios opengl es what's there so you
6248
05:53:30,878 --> 05:53:34,479
can build some games as well
6249
05:53:36,319 --> 05:53:40,079
apple wanted to make sure that the
6250
05:53:37,680 --> 05:53:42,558
applications that are developed can only
6251
05:53:40,080 --> 05:53:44,240
be distributed through the app store so
6252
05:53:44,240 --> 05:53:48,638
if i give vandal for instance a
6253
05:53:47,119 --> 05:53:50,479
developer account he shouldn't be able
6254
05:53:48,637 --> 05:53:51,599
to create his own app store because they
6255
05:53:51,599 --> 05:53:55,199
i'm not going into the details of what
6256
05:53:53,520 --> 05:53:58,000
why they're doing that there's a whole
6257
05:53:55,200 --> 05:53:59,520
topic and what we could discuss like a
6258
05:53:58,000 --> 05:54:01,279
few days we could talk about that
6259
05:53:59,520 --> 05:54:02,797
whether it's a monopoly or not i don't
6260
05:54:01,279 --> 05:54:04,637
know so i'm not going to go into the
6261
05:54:02,797 --> 05:54:05,680
detail about that but what you need to
6262
05:54:05,680 --> 05:54:11,040
is there is an app store the um
6263
05:54:09,360 --> 05:54:12,958
basically just called app store but you
6264
05:54:11,040 --> 05:54:14,798
could call ios app store mac apps or
6265
05:54:14,797 --> 05:54:17,840
and apple has control over that so it's
6266
05:54:17,840 --> 05:54:22,080
who sits there and like controls the
6267
05:54:19,680 --> 05:54:24,479
measures that apps that are published on
6268
05:54:22,080 --> 05:54:28,080
the app store they're of a good quality
6269
05:54:24,479 --> 05:54:31,200
for instance okay so apple themselves
6270
05:54:28,080 --> 05:54:34,000
have a certificate now a certificate is
6271
05:54:31,200 --> 05:54:35,600
like a piece of paper uh just imagine a
6272
05:54:34,000 --> 05:54:38,000
piece of paper certificate that they
6273
05:54:35,599 --> 05:54:40,000
hold onto and they said okay whatever we
6274
05:54:41,119 --> 05:54:46,718
it comes from us okay so every app on
6275
05:54:46,718 --> 05:54:50,637
comes actually from apple i don't mean
6276
05:54:48,637 --> 05:54:52,718
that the apple has written the app i
6277
05:54:50,637 --> 05:54:54,479
mean that apple has signed the app using
6278
05:54:52,718 --> 05:54:55,680
their certified that piece of paper okay
6279
05:54:55,680 --> 05:55:00,878
and then when the app gets downloaded to
6280
05:54:58,718 --> 05:55:02,400
your iphone your iphone actually checks
6281
05:55:02,400 --> 05:55:06,319
is this a trusted application where does
6282
05:55:06,319 --> 05:55:10,797
ios as an operating system it can
6283
05:55:09,119 --> 05:55:12,000
contain and you can install many
6284
05:55:10,797 --> 05:55:13,199
different types of applications that
6285
05:55:12,000 --> 05:55:14,319
come from many different types of
6286
05:55:15,520 --> 05:55:18,878
the ios app store or you could actually
6287
05:55:17,439 --> 05:55:21,840
download application that comes directly
6288
05:55:23,040 --> 05:55:26,479
all these applications need to be signed
6289
05:55:25,439 --> 05:55:28,797
they need to be signed with a
6290
05:55:26,479 --> 05:55:31,119
certificate that is just to identify
6291
05:55:28,797 --> 05:55:33,520
where they come from so certificate is a
6292
05:55:31,119 --> 05:55:36,079
piece of paper that you as a developer
6293
05:55:36,080 --> 05:55:39,920
excuse me every application that you
6294
05:55:37,840 --> 05:55:42,718
develop will be signed using that
6295
05:55:39,919 --> 05:55:45,919
certificate okay so that certificate is
6296
05:55:42,718 --> 05:55:47,680
your identity as a developer and it gets
6297
05:55:47,680 --> 05:55:52,957
carried around in with your application
6298
05:55:50,718 --> 05:55:54,558
to the destination so if you develop
6299
05:55:52,957 --> 05:55:56,000
this notes application that we're doing
6300
05:55:54,558 --> 05:55:58,400
in this course and you sign it with your
6301
05:55:56,000 --> 05:56:00,159
certificate then your application is
6302
05:55:58,400 --> 05:56:02,558
going to have that certificate signature
6303
05:56:00,159 --> 05:56:04,637
inside it so when i send it to apple and
6304
05:56:02,558 --> 05:56:06,878
then apple is like aha that's this
6305
05:56:04,637 --> 05:56:09,439
developer who created this app okay
6306
05:56:09,439 --> 05:56:13,919
says okay your application's fine you
6307
05:56:11,599 --> 05:56:16,399
can't release it to the app store then
6308
05:56:13,919 --> 05:56:18,637
apple re-signs your application with
6309
05:56:18,637 --> 05:56:22,637
that is just to make sure that your
6310
05:56:20,080 --> 05:56:25,120
application after it's been signed with
6311
05:56:22,637 --> 05:56:28,079
apple certificate can be distributed
6312
05:56:25,119 --> 05:56:32,159
into the ios app store and downloaded by
6313
05:56:28,080 --> 05:56:34,480
millions of users around the world so
6314
05:56:32,159 --> 05:56:37,669
it's just sir just know that certificate
6315
05:56:34,479 --> 05:56:38,878
is your identity as a developer okay
6316
05:56:38,878 --> 05:56:42,319
now now that we talked about
6317
05:56:40,000 --> 05:56:44,718
certificates let's talk about profiles
6318
05:56:42,319 --> 05:56:46,797
because that also is a tripping point
6319
05:56:46,797 --> 05:56:50,399
um especially if they don't come from
6320
05:56:48,400 --> 05:56:51,520
like a native ios development background
6321
05:56:54,957 --> 05:57:02,319
you see a certificate identifies you
6322
05:56:58,240 --> 05:57:04,558
in short profiles identify your app
6323
05:57:04,558 --> 05:57:08,798
very short way of saying it so you as a
6324
05:57:08,797 --> 05:57:13,439
10 20 30 applications that you're
6325
05:57:10,718 --> 05:57:15,600
developing or you have developed
6326
05:57:13,439 --> 05:57:17,439
each of these applications will have
6327
05:57:17,439 --> 05:57:21,599
and that identity at the end is tied to
6328
05:57:19,759 --> 05:57:23,199
you as a developer so you say here's my
6329
05:57:24,558 --> 05:57:28,558
but when you then create an application
6330
05:57:26,957 --> 05:57:30,957
then that application also needs to
6331
05:57:28,558 --> 05:57:32,958
identify itself it will be like here i
6332
05:57:30,957 --> 05:57:36,557
am i am an application signed with this
6333
05:57:32,957 --> 05:57:38,399
profile using this certificate so
6334
05:57:36,558 --> 05:57:40,638
just know that a profile is kind of like
6335
05:57:38,400 --> 05:57:42,240
an identity for your application
6336
05:57:40,637 --> 05:57:43,439
and different flavors of that
6337
05:57:43,439 --> 05:57:48,557
and a certificate is an identity of you
6338
05:57:47,200 --> 05:57:49,920
as the person who developed that
6339
05:57:52,080 --> 05:57:56,558
and if you notice i just said different
6340
05:57:56,558 --> 05:58:00,638
and by that i mean that if you're not
6341
05:57:58,240 --> 05:58:02,958
coming from a development background
6342
05:58:00,637 --> 05:58:04,878
um if you're for instance coming from a
6343
05:58:02,957 --> 05:58:07,599
design background and you have a figma
6344
05:58:04,878 --> 05:58:09,360
file or visio file that you're designing
6345
05:58:07,599 --> 05:58:11,359
your wi-frames and whatever if you're
6346
05:58:09,360 --> 05:58:13,440
coming from a product owner ownership
6347
05:58:11,360 --> 05:58:14,637
background than your probably may have
6348
05:58:14,637 --> 05:58:18,399
working with jira or excel sheets or
6349
05:58:16,797 --> 05:58:20,717
whatever wherever you put your
6350
05:58:18,400 --> 05:58:23,520
requirements you may not be familiar
6351
05:58:20,718 --> 05:58:24,878
with different flavors of an application
6352
05:58:24,878 --> 05:58:28,878
worked a little bit close with an app
6353
05:58:27,439 --> 05:58:31,199
team then you'll know that there are
6354
05:58:28,878 --> 05:58:31,920
different flavors of every application
6355
05:58:31,919 --> 05:58:36,319
those flavors are usually i mean they're
6356
05:58:36,319 --> 05:58:40,159
one is a development flavor and the
6357
05:58:38,159 --> 05:58:43,040
other one is a production flavor a
6358
05:58:40,159 --> 05:58:45,520
development flavor is the application
6359
05:58:43,040 --> 05:58:47,040
you see if you sit with developers with
6360
05:58:45,520 --> 05:58:48,479
software engineers that are working on
6361
05:58:48,479 --> 05:58:52,878
on a daily basis they're coding they're
6362
05:58:50,797 --> 05:58:55,360
fixing things they're fixing bugs adding
6363
05:58:52,878 --> 05:58:58,479
new features and then they will provide
6364
05:58:55,360 --> 05:59:00,958
the product to you as a software uh as a
6365
05:58:58,479 --> 05:59:02,637
product owner for instance or a designer
6366
05:59:00,957 --> 05:59:04,159
and you will download that flavor on
6367
05:59:02,637 --> 05:59:06,079
your application and be like okay this
6368
05:59:07,360 --> 05:59:11,040
all of a sudden you press a button and
6369
05:59:08,957 --> 05:59:13,119
that button crashes the application so
6370
05:59:11,040 --> 05:59:14,558
the application just disappears oh
6371
05:59:14,558 --> 05:59:18,558
well at that point if the developers
6372
05:59:16,878 --> 05:59:20,797
were doing their job correctly then they
6373
05:59:18,558 --> 05:59:22,558
had had to put some crash analytics into
6374
05:59:23,680 --> 05:59:27,840
as soon as the application crashes or
6375
05:59:25,599 --> 05:59:29,599
something bad happens to the application
6376
05:59:27,840 --> 05:59:30,319
of that flavor of the application that
6377
05:59:34,558 --> 05:59:39,440
tablet or whatever and they will get
6378
05:59:37,360 --> 05:59:41,680
something called a crash report
6379
05:59:39,439 --> 05:59:44,000
a crash report is as its name indicates
6380
05:59:41,680 --> 05:59:46,240
it's just a report where the crash
6381
05:59:44,000 --> 05:59:48,159
information is completely visible and
6382
05:59:46,240 --> 05:59:50,080
they probably even know which button you
6383
05:59:48,159 --> 05:59:51,279
tapped at what time and what was the
6384
05:59:51,279 --> 05:59:55,039
that your app was carrying at the point
6385
05:59:52,957 --> 05:59:57,759
that it crashed so it helps them
6386
05:59:57,759 --> 06:00:01,840
now these flavors of the application
6387
06:00:00,240 --> 06:00:03,520
that you install on your phone on a
6388
06:00:01,840 --> 06:00:06,240
daily basis were working mobile
6389
06:00:03,520 --> 06:00:08,558
developers are usually called debug
6390
06:00:06,240 --> 06:00:10,240
applications and a debug application
6391
06:00:08,558 --> 06:00:12,400
it's just a way of saying that the
6392
06:00:10,240 --> 06:00:15,040
developers who created it it created the
6393
06:00:12,400 --> 06:00:18,240
application have the opportunity then to
6394
06:00:15,040 --> 06:00:20,798
fix any bugs that may arise with more
6395
06:00:18,240 --> 06:00:22,718
information than they would usually have
6396
06:00:20,797 --> 06:00:24,878
had they released this application to
6397
06:00:26,718 --> 06:00:30,958
that is a flavor it's a debug flavor or
6398
06:00:28,797 --> 06:00:32,717
is a development flavor okay and it just
6399
06:00:30,957 --> 06:00:34,319
means that it's a daily it's kind of
6400
06:00:34,319 --> 06:00:39,759
updating regularly application that only
6401
06:00:36,878 --> 06:00:41,760
very close circle of people close to the
6402
06:00:39,759 --> 06:00:42,957
project can download so that's a flavor
6403
06:00:42,957 --> 06:00:47,840
another flavor of an application that
6404
06:00:44,957 --> 06:00:48,957
gets released by developers could be the
6405
06:00:48,957 --> 06:00:51,840
flavor and the product production flavor
6406
06:00:51,840 --> 06:00:56,319
the same as the debug flavor but
6407
06:00:56,319 --> 06:01:00,558
some stuff maybe removed from it some
6408
06:00:58,637 --> 06:01:02,159
sensitive information that may be logged
6409
06:01:00,558 --> 06:01:04,718
otherwise maybe removed from it it's
6410
06:01:02,159 --> 06:01:06,558
just like a stripped-down version
6411
06:01:04,718 --> 06:01:08,637
for security purposes not stripped-down
6412
06:01:06,558 --> 06:01:09,600
version of like features or anything
6413
06:01:09,599 --> 06:01:14,239
they make it tighter they make it so
6414
06:01:12,080 --> 06:01:16,718
that it is a little bit more secure like
6415
06:01:14,240 --> 06:01:18,878
some extra stuff may be removed from it
6416
06:01:16,718 --> 06:01:21,040
extra stuff that otherwise developers
6417
06:01:21,040 --> 06:01:24,479
when it then gets packaged into this
6418
06:01:24,479 --> 06:01:30,479
yeah beautiful little package basically
6419
06:01:26,957 --> 06:01:32,239
then it will also be a new flavor called
6420
06:01:32,240 --> 06:01:36,878
so now you have two flavors one is like
6421
06:01:34,718 --> 06:01:38,159
for a close circle people sitting next
6422
06:01:40,558 --> 06:01:43,520
room or now that everyone's working
6423
06:01:42,159 --> 06:01:46,000
remotely maybe people are sitting at
6424
06:01:43,520 --> 06:01:47,920
home etc and that is like the product
6425
06:01:46,000 --> 06:01:50,558
team closely developers testers product
6426
06:01:47,919 --> 06:01:52,079
owners designers uxers everyone that is
6427
06:01:52,080 --> 06:01:57,200
they get the development builds usually
6428
06:01:57,200 --> 06:02:00,479
sending your application to apple for
6429
06:02:00,479 --> 06:02:04,957
or to google for review then you would
6430
06:02:02,878 --> 06:02:06,797
get the production flavor okay the
6431
06:02:04,957 --> 06:02:09,680
reason i'm talking about flavors is that
6432
06:02:06,797 --> 06:02:11,680
these different flavors on ios at least
6433
06:02:11,680 --> 06:02:16,718
assigned with their own specific
6434
06:02:14,957 --> 06:02:18,877
profiles so then you'd have a
6435
06:02:16,718 --> 06:02:21,280
development profile and you would have a
6436
06:02:18,878 --> 06:02:23,600
production profile and these prof
6437
06:02:21,279 --> 06:02:26,717
profiles dictate to your application
6438
06:02:23,599 --> 06:02:28,399
what it what it can and it can't do
6439
06:02:26,718 --> 06:02:31,280
for instance one of the capabilities of
6440
06:02:28,400 --> 06:02:33,280
a development profile in the ios world
6441
06:02:31,279 --> 06:02:35,840
is that your application can actually be
6442
06:02:33,279 --> 06:02:37,279
installed on a telephone hooked with a
6443
06:02:37,279 --> 06:02:42,479
without a cable and debugged remotely so
6444
06:02:41,200 --> 06:02:44,240
this is one of the cool things you can
6445
06:02:42,479 --> 06:02:46,797
do with ios in that you can actually
6446
06:02:44,240 --> 06:02:47,840
like if i'm a developer sitting here
6447
06:02:47,840 --> 06:02:52,479
get the designer's telephone and say oh
6448
06:02:50,159 --> 06:02:53,439
yeah you want the application like do
6449
06:02:52,479 --> 06:02:56,239
you want to actually see what i'm
6450
06:02:53,439 --> 06:02:57,199
working on yeah she or he would say
6451
06:02:57,200 --> 06:03:00,400
connect your their phone to your
6452
06:02:58,957 --> 06:03:02,637
computer and enable something called
6453
06:03:02,637 --> 06:03:06,159
and then you would disconnect it and
6454
06:03:04,637 --> 06:03:07,840
then give the phone back to them and
6455
06:03:06,159 --> 06:03:09,599
whenever they want the application
6456
06:03:07,840 --> 06:03:11,840
running live on their phone as you're
6457
06:03:09,599 --> 06:03:14,557
developing it you can actually run the
6458
06:03:18,718 --> 06:03:23,600
that is its own flavor and the profile
6459
06:03:21,840 --> 06:03:25,920
which is the development profile
6460
06:03:23,599 --> 06:03:29,039
dictates to that application that you
6461
06:03:25,919 --> 06:03:31,039
can be debugged but if you then want to
6462
06:03:29,040 --> 06:03:33,440
sign your application with a production
6463
06:03:33,439 --> 06:03:37,599
that profile dictates that this
6464
06:03:35,439 --> 06:03:38,717
application is not allowed to be
6465
06:03:40,319 --> 06:03:45,360
create your application and send it to
6466
06:03:43,040 --> 06:03:47,040
apple you need to make sure of two
6467
06:03:48,878 --> 06:03:52,319
certificate and profile wise you need to
6468
06:03:52,319 --> 06:03:57,119
the application is signed with your
6469
06:03:54,957 --> 06:04:00,479
production certificate and the
6470
06:03:57,119 --> 06:04:02,878
application is signed also with the
6471
06:04:00,479 --> 06:04:05,119
production profile which is hooked to
6472
06:04:02,878 --> 06:04:07,040
the production certificate so first the
6473
06:04:05,119 --> 06:04:09,119
certificate should be there using the
6474
06:04:07,040 --> 06:04:11,760
certificate you create the profile with
6475
06:04:09,119 --> 06:04:13,599
the profile you sign your application
6476
06:04:11,759 --> 06:04:16,877
and then you send this application to
6477
06:04:13,599 --> 06:04:18,000
apple apple then looks oh everything is
6478
06:04:20,159 --> 06:04:25,680
a production profile and the certificate
6479
06:04:23,279 --> 06:04:27,759
linked to the profile was also correct a
6480
06:04:25,680 --> 06:04:30,240
production certificate identifying you
6481
06:04:33,200 --> 06:04:36,240
information about profiles and
6482
06:04:34,479 --> 06:04:37,759
certificates for ios but i think they're
6483
06:04:37,759 --> 06:04:41,439
in i mean it's so important to
6484
06:04:41,439 --> 06:04:45,439
that you shouldn't really jump over
6485
06:04:43,279 --> 06:04:46,878
these concepts as if you're if you want
6486
06:04:45,439 --> 06:04:49,599
to become a mobile developer it's so
6487
06:04:52,000 --> 06:04:56,080
concepts now let's talk a little bit
6488
06:04:57,439 --> 06:05:01,039
the developer account and here i
6489
06:04:59,439 --> 06:05:03,439
actually have a link which i'm going to
6490
06:05:03,439 --> 06:05:09,840
and then i'm going to bring it to the
6491
06:05:06,000 --> 06:05:09,840
foreground so you can actually see
6492
06:05:09,919 --> 06:05:17,039
so here is the developer account as you
6493
06:05:13,599 --> 06:05:19,680
can see on apple's website and i'm gonna
6494
06:05:17,040 --> 06:05:21,680
bring my face a little bit to the right
6495
06:05:19,680 --> 06:05:22,718
bottom right so zoom into the window
6496
06:05:22,718 --> 06:05:27,479
and this is actually on developer
6497
06:05:28,159 --> 06:05:32,797
then you would go into accounts okay so
6498
06:05:30,400 --> 06:05:35,040
after you've registered an account
6499
06:05:32,797 --> 06:05:36,399
then you will be able to go in here and
6500
06:05:35,040 --> 06:05:38,840
sign in with your account and i'm going
6501
06:05:43,520 --> 06:05:48,957
there we go and then it says okay we
6502
06:05:46,479 --> 06:05:49,759
sent you a verification code and i have
6503
06:05:49,759 --> 06:05:54,319
apple watch here so i'm i'm just gonna
6504
06:05:52,319 --> 06:05:55,840
say i didn't get a code and text me the
6505
06:05:56,718 --> 06:06:01,440
in a short while i should be able to get
6506
06:06:01,439 --> 06:06:05,919
and it is important that you don't show
6507
06:06:03,759 --> 06:06:08,159
this verification code to other people
6508
06:06:05,919 --> 06:06:10,797
it's just you shouldn't do that so i'm
6509
06:06:08,159 --> 06:06:12,797
gonna remove the screen from where you
6510
06:06:10,797 --> 06:06:16,637
can see it and i'm gonna enter the code
6511
06:06:12,797 --> 06:06:19,840
that was sent to me it is six digits and
6512
06:06:16,637 --> 06:06:21,680
it is uh just basically digits and
6513
06:06:19,840 --> 06:06:23,869
bring the phone i bring the browser up
6514
06:06:21,680 --> 06:06:25,520
now and i say trust this browser okay
6515
06:06:26,479 --> 06:06:31,520
here you will see that um license
6516
06:06:29,040 --> 06:06:33,520
agreement has been updated okay so we
6517
06:06:31,520 --> 06:06:36,319
should be able to review that later so
6518
06:06:36,319 --> 06:06:41,759
space that this screen is taking at the
6519
06:06:38,797 --> 06:06:43,439
moment so you can see it in its entirety
6520
06:06:41,759 --> 06:06:45,119
and you can see that now that you you've
6521
06:06:43,439 --> 06:06:47,919
logged into this account you should be
6522
06:06:47,919 --> 06:06:52,557
overview membership people's
6523
06:06:49,279 --> 06:06:55,360
certificates ids and profiles okay
6524
06:06:52,558 --> 06:06:57,920
so and then what i talked about earlier
6525
06:06:55,360 --> 06:07:00,080
which is your app store connect okay
6526
06:07:01,279 --> 06:07:05,919
what happens here basically is
6527
06:07:05,919 --> 06:07:10,319
in the membership people's certificates
6528
06:07:08,159 --> 06:07:11,919
ids and profiles is where you will
6529
06:07:10,319 --> 06:07:14,718
manage your certificates and all your
6530
06:07:11,919 --> 06:07:15,679
profiles as i mentioned before
6531
06:07:16,878 --> 06:07:21,360
here it is very important that you
6532
06:07:18,718 --> 06:07:23,119
basically set up a good ground for your
6533
06:07:21,360 --> 06:07:24,479
uh certificates create the dev
6534
06:07:24,479 --> 06:07:27,279
the production survey and then you
6535
06:07:25,840 --> 06:07:29,119
create your profiles after that which
6536
06:07:27,279 --> 06:07:30,957
we're gonna talk actually about in this
6537
06:07:35,759 --> 06:07:39,679
here are the missing pieces for us in
6538
06:07:41,439 --> 06:07:46,479
so we need as i mentioned before
6539
06:07:43,680 --> 06:07:47,840
certificates profiles and app ids app id
6540
06:07:46,479 --> 06:07:49,599
is something that i didn't mention
6541
06:07:47,840 --> 06:07:52,479
before so i think it's just important
6542
06:07:49,599 --> 06:07:55,439
that i mention what an app id is
6543
06:07:55,439 --> 06:08:01,599
additional to the profile that you
6544
06:07:57,439 --> 06:08:05,039
create an app id is an identifier that
6545
06:08:01,599 --> 06:08:07,119
apple and you use in order to know which
6546
06:08:11,119 --> 06:08:14,797
if you for instance in the in the future
6547
06:08:14,797 --> 06:08:19,840
features such as push notifications
6548
06:08:18,080 --> 06:08:22,320
now if you're not familiar with what
6549
06:08:19,840 --> 06:08:24,718
push notifications are they're basically
6550
06:08:22,319 --> 06:08:27,279
remote notifications remote information
6551
06:08:24,718 --> 06:08:28,400
that you can send from a cloud somewhere
6552
06:08:28,400 --> 06:08:33,360
to a user's phone so when they get their
6553
06:08:31,439 --> 06:08:35,039
phone they will see oh here is a message
6554
06:08:35,040 --> 06:08:39,840
you can think of it as remote messages
6555
06:08:36,957 --> 06:08:41,520
just as if someone sent you an sms or an
6556
06:08:41,520 --> 06:08:45,439
or for instance if you're using whatsapp
6557
06:08:43,200 --> 06:08:46,479
or telegram someone writing a message in
6558
06:08:45,439 --> 06:08:47,919
a chat and then you're getting a
6559
06:08:46,479 --> 06:08:50,159
notification on your phone that is
6560
06:08:47,919 --> 06:08:54,637
called a push notification so
6561
06:08:50,159 --> 06:08:55,599
an app id is used mainly in order to
6562
06:08:55,599 --> 06:09:00,079
in order for you as a developer to be
6563
06:08:57,360 --> 06:09:01,760
able to specify different capabilities
6564
06:09:00,080 --> 06:09:02,558
of your application for instance that it
6565
06:09:02,558 --> 06:09:06,319
receive push notifications that it can
6566
06:09:04,319 --> 06:09:09,360
for instance store secure information on
6567
06:09:09,360 --> 06:09:12,159
so when i previously mentioned that you
6568
06:09:10,797 --> 06:09:14,637
need a certificate and profile in order
6569
06:09:12,159 --> 06:09:16,878
to sign your application you also need
6570
06:09:14,637 --> 06:09:19,360
an app id in order to identify your
6571
06:09:16,878 --> 06:09:20,637
application and its capabilities okay so
6572
06:09:19,360 --> 06:09:22,958
we're going to talk about that soon
6573
06:09:26,878 --> 06:09:30,080
what we need to do here before we
6574
06:09:28,797 --> 06:09:32,239
actually get started creating a
6575
06:09:36,637 --> 06:09:40,399
if you're if you're if you have a
6576
06:09:38,479 --> 06:09:42,239
developer account here and you are
6577
06:09:40,400 --> 06:09:44,080
planning on releasing your application i
6578
06:09:42,240 --> 06:09:44,878
kind of can basically assume that you
6579
06:09:44,878 --> 06:09:49,200
a macintosh so that you have registered
6580
06:09:49,200 --> 06:09:53,520
and that you want to be able to sign
6581
06:09:50,637 --> 06:09:54,797
your application with a certificate and
6582
06:09:54,797 --> 06:09:58,557
however you may be in a group of people
6583
06:09:58,558 --> 06:10:02,958
who doesn't have a macintosh and xcode
6584
06:10:00,797 --> 06:10:04,557
etc but you still want to be able to
6585
06:10:02,957 --> 06:10:07,439
release your application to the app
6586
06:10:04,558 --> 06:10:09,040
store so you may want to for instance
6587
06:10:07,439 --> 06:10:11,439
create your certificate profiles an app
6588
06:10:09,040 --> 06:10:13,600
id and then later send that information
6589
06:10:11,439 --> 06:10:15,599
to some sort of a cloud hosting service
6590
06:10:13,599 --> 06:10:17,519
for for them to sign your application
6591
06:10:15,599 --> 06:10:20,399
and then send it back to you something
6592
06:10:17,520 --> 06:10:23,760
like that i have never done that myself
6593
06:10:20,400 --> 06:10:25,440
but you may be in that group and uh
6594
06:10:23,759 --> 06:10:27,679
for the sake of being inclusive i think
6595
06:10:25,439 --> 06:10:29,199
it's important to talk about that
6596
06:10:29,200 --> 06:10:33,040
let's talk about what i've put up here
6597
06:10:31,439 --> 06:10:35,199
as the caption and that is like the
6598
06:10:33,040 --> 06:10:36,638
certificates in the keychain
6599
06:10:36,637 --> 06:10:42,557
certificate gets created by you as a
6600
06:10:39,279 --> 06:10:43,439
developer sending a request to apple
6601
06:10:45,680 --> 06:10:49,760
you basically creating a digital
6602
06:10:52,637 --> 06:10:57,279
then your request you will send it to
6603
06:10:54,718 --> 06:11:00,319
apple apple says oh you're asking for a
6604
06:10:57,279 --> 06:11:01,919
certificate okay here's the certificate
6605
06:11:00,319 --> 06:11:03,200
and then you download that certificate
6606
06:11:01,919 --> 06:11:05,919
and then when you double click on the
6607
06:11:03,200 --> 06:11:09,119
certificate it gets installed and hooked
6608
06:11:05,919 --> 06:11:11,519
to your original request okay so here's
6609
06:11:09,119 --> 06:11:13,039
the certificate and here's the private
6610
06:11:13,040 --> 06:11:17,200
the private key is just a piece of
6611
06:11:15,279 --> 06:11:20,399
information that your computer stores
6612
06:11:17,200 --> 06:11:22,400
digitally on only your computer so that
6613
06:11:20,400 --> 06:11:24,558
later the downloaded certificate can
6614
06:11:22,400 --> 06:11:27,840
actually be hooked to it creating a
6615
06:11:27,840 --> 06:11:31,599
your application when it gets signed
6616
06:11:30,080 --> 06:11:33,200
with your certificate that you then
6617
06:11:33,200 --> 06:11:37,600
it actually contains some information
6618
06:11:35,840 --> 06:11:40,000
about the certificate and the private
6619
06:11:37,599 --> 06:11:41,680
key and then you send the application
6620
06:11:40,000 --> 06:11:45,279
that was signed using these two pieces
6621
06:11:45,279 --> 06:11:48,079
there's a lot of information i know but
6622
06:11:46,718 --> 06:11:49,600
i think it's important for every mobile
6623
06:11:49,599 --> 06:11:54,159
release something for ios appstore to
6624
06:11:55,200 --> 06:11:59,360
private key and the certificate they
6625
06:11:56,878 --> 06:12:01,680
both get stored inside a program on your
6626
06:11:59,360 --> 06:12:03,040
computer called keychain if you have
6627
06:12:03,040 --> 06:12:08,000
and i can bring up keychain actually
6628
06:12:05,919 --> 06:12:09,279
now let me see which i have three
6629
06:12:08,000 --> 06:12:12,000
screens here so i don't know which one
6630
06:12:12,957 --> 06:12:20,239
i will bring up keychain here um
6631
06:12:17,040 --> 06:12:21,600
and i will show you how it looks like
6632
06:12:21,599 --> 06:12:26,637
here is an example of keychain and you
6633
06:12:24,479 --> 06:12:28,159
can see here there's a distribution
6634
06:12:26,637 --> 06:12:30,159
certificate and a development
6635
06:12:30,159 --> 06:12:34,400
and these certificates i didn't create
6636
06:12:32,080 --> 06:12:35,920
them i downloaded them but the things
6637
06:12:34,400 --> 06:12:37,840
under them this is the chain i was
6638
06:12:35,919 --> 06:12:39,599
talking about this is the key that i
6639
06:12:39,599 --> 06:12:44,957
so when you request a certificate from
6640
06:12:42,080 --> 06:12:47,600
apple you actually create this thing on
6641
06:12:44,957 --> 06:12:49,439
your computer and you upload this thing
6642
06:12:49,439 --> 06:12:53,919
certificate hooked to that kind of not
6643
06:12:52,080 --> 06:12:55,440
you don't actually upload exactly this
6644
06:12:53,919 --> 06:12:56,319
but something that is related to this
6645
06:12:57,279 --> 06:13:01,199
for us in order to be able to continue i
6646
06:12:59,680 --> 06:13:02,319
think it's important that i actually
6647
06:13:02,319 --> 06:13:05,599
existing certificates from my computer
6648
06:13:04,240 --> 06:13:06,798
so i'm just going to go like this and
6649
06:13:06,797 --> 06:13:11,119
delete two items all right and delete
6650
06:13:11,119 --> 06:13:14,797
okay so now they're gone now what we
6651
06:13:17,279 --> 06:13:22,360
here let me put up the captions so you
6652
06:13:25,680 --> 06:13:32,558
so that was the certificates and now we
6653
06:13:33,439 --> 06:13:37,119
we also need to talk about actually
6654
06:13:34,957 --> 06:13:38,717
deleting the profiles now this is an
6655
06:13:37,119 --> 06:13:40,637
interesting part if you already have
6656
06:13:38,718 --> 06:13:43,040
like profiles installed on your computer
6657
06:13:40,637 --> 06:13:45,520
you may not want to do this but i'm just
6658
06:13:43,040 --> 06:13:47,600
going to show you this step so that we
6659
06:13:45,520 --> 06:13:49,360
start with a clean slate okay so you're
6660
06:13:47,599 --> 06:13:50,399
not supposed to do this if you exactly
6661
06:13:49,360 --> 06:13:52,637
know what you're doing with your
6662
06:13:50,400 --> 06:13:54,159
certificates but if if this is the first
6663
06:13:52,637 --> 06:13:55,759
time you're doing this and there may
6664
06:13:54,159 --> 06:13:57,840
already be some certificates for you on
6665
06:13:55,759 --> 06:13:59,919
your computer for some reason then this
6666
06:13:57,840 --> 06:14:02,479
is the way to actually get rid of them
6667
06:14:05,919 --> 06:14:10,159
and i'm gonna bring it up here
6668
06:14:08,000 --> 06:14:13,200
and what we need to do is to go into a
6669
06:14:13,200 --> 06:14:16,159
i believe it's called library and then
6670
06:14:17,200 --> 06:14:20,080
and then something called provision
6671
06:14:20,080 --> 06:14:25,600
and you can see here um and i will show
6672
06:14:22,637 --> 06:14:28,319
you this path again so it's my user
6673
06:14:25,599 --> 06:14:29,919
library mobile device and then provision
6674
06:14:29,919 --> 06:14:34,717
so after i've gone into that folder i'm
6675
06:14:32,637 --> 06:14:35,919
going to delete these profiles that are
6676
06:14:35,919 --> 06:14:38,877
so you don't have to do this if you
6677
06:14:37,439 --> 06:14:40,319
don't want to and you know exactly what
6678
06:14:38,878 --> 06:14:42,558
you're doing but i'm just doing it to
6679
06:14:40,319 --> 06:14:45,439
show you that profiles are always stored
6680
06:14:42,558 --> 06:14:46,798
in that location for your user okay
6681
06:14:45,439 --> 06:14:48,957
and what you can also do which i really
6682
06:14:46,797 --> 06:14:50,637
like is to if you say add columns here
6683
06:14:48,957 --> 06:14:52,159
and kind of like drag it into your
6684
06:14:50,637 --> 06:14:53,840
favorites so you don't have to type that
6685
06:14:52,159 --> 06:14:55,919
path every time so let's just put it
6686
06:14:53,840 --> 06:14:57,360
here okay so that every time i want to
6687
06:14:55,919 --> 06:15:01,839
install the profile i can just click
6688
06:14:57,360 --> 06:15:01,840
here and put my profile there all right
6689
06:15:06,718 --> 06:15:10,400
now that we've done that the next step
6690
06:15:08,400 --> 06:15:12,240
as the caption shows here is to delete
6691
06:15:10,400 --> 06:15:13,680
our existing certificates and profiles
6692
06:15:13,680 --> 06:15:17,200
development account so let's go to
6693
06:15:15,360 --> 06:15:19,279
certificates ids and profiles here on
6694
06:15:17,200 --> 06:15:21,840
the left hand side and you'll see here i
6695
06:15:19,279 --> 06:15:23,840
have quite a lot of things stored right
6696
06:15:21,840 --> 06:15:26,000
here okay you see distribution
6697
06:15:23,840 --> 06:15:29,520
development development blah blah
6698
06:15:26,000 --> 06:15:32,479
so what we can do here is to go ahead
6699
06:15:29,520 --> 06:15:33,600
and delete these certificates on the
6700
06:15:32,479 --> 06:15:35,599
left hand side you see it's a
6701
06:15:33,599 --> 06:15:37,039
certificate so there are quite a few of
6702
06:15:37,040 --> 06:15:42,000
so what i'm going to do is just to tap
6703
06:15:39,040 --> 06:15:44,000
on this one and just say revoke revoke
6704
06:15:42,000 --> 06:15:47,279
tap on the next one and just revoke them
6705
06:15:44,000 --> 06:15:49,200
one by one so and again if you're new to
6706
06:15:47,279 --> 06:15:51,119
ios development and you've just gotten
6707
06:15:49,200 --> 06:15:53,840
your development account you don't even
6708
06:15:51,119 --> 06:15:56,319
have any certificates so this screen is
6709
06:15:53,840 --> 06:15:58,797
going to be empty for you so revoke
6710
06:15:56,319 --> 06:16:00,319
revoke so your screen is gonna look like
6711
06:16:00,319 --> 06:16:05,040
so now that we don't have certificates
6712
06:16:02,400 --> 06:16:07,360
i'm also going to go into profiles and
6713
06:16:05,040 --> 06:16:09,600
delete these profiles so if i just go in
6714
06:16:07,360 --> 06:16:11,760
here and kind of like say all my
6715
06:16:09,599 --> 06:16:13,119
profiles and then just delete this is
6716
06:16:11,759 --> 06:16:15,119
going to be fine as well so sort of
6717
06:16:13,119 --> 06:16:16,637
problem all right so now i've deleted
6718
06:16:19,360 --> 06:16:23,920
and that was the goal of this part of
6719
06:16:27,279 --> 06:16:30,399
development and production certs
6720
06:16:30,400 --> 06:16:35,440
then that is done with the profiles as
6721
06:16:35,439 --> 06:16:39,119
so what we need to do now is to create
6722
06:16:38,000 --> 06:16:40,558
something called a development
6723
06:16:39,119 --> 06:16:42,319
certificate and just to recap a
6724
06:16:42,319 --> 06:16:47,200
a certificate that will allow you as a
6725
06:16:44,718 --> 06:16:48,400
developer to run and test your
6726
06:16:48,400 --> 06:16:53,840
while you're developing it on real
6727
06:16:53,840 --> 06:16:59,119
so it's it's not necessary for releasing
6728
06:16:56,797 --> 06:17:00,557
the application but i personally after
6729
06:16:59,119 --> 06:17:01,919
many years of experience developing
6730
06:17:00,558 --> 06:17:03,520
mobile applications i've come to the
6731
06:17:01,919 --> 06:17:05,039
conclusion that i prefer actually
6732
06:17:03,520 --> 06:17:07,600
running my application testing my
6733
06:17:05,040 --> 06:17:09,840
applications are real devices as i
6734
06:17:07,599 --> 06:17:12,239
develop because you also have emulators
6735
06:17:09,840 --> 06:17:15,119
and you also have simulators that
6736
06:17:12,240 --> 06:17:16,638
simulate and emulate the capabilities of
6737
06:17:16,637 --> 06:17:21,200
android phones or tablets but i've come
6738
06:17:19,119 --> 06:17:23,119
to the conclusion that it's actually for
6739
06:17:23,119 --> 06:17:28,557
application real phones or tablets
6740
06:17:26,159 --> 06:17:29,759
so in order to be able to do that and if
6741
06:17:28,558 --> 06:17:31,840
you have for instance an iphone
6742
06:17:31,840 --> 06:17:35,200
um and you want to test your flag
6743
06:17:33,520 --> 06:17:36,558
application on that iphone then the
6744
06:17:35,200 --> 06:17:38,637
first thing you need to do is to create
6745
06:17:36,558 --> 06:17:40,798
a development certificate so you need to
6746
06:17:38,637 --> 06:17:42,878
identify yourself as a developer to
6747
06:17:40,797 --> 06:17:44,878
apple so let's go to the certificate
6748
06:17:42,878 --> 06:17:47,600
section and then just say create a
6749
06:17:44,878 --> 06:17:50,159
certificate and then choose apple
6750
06:17:47,599 --> 06:17:51,840
development actually sorry ios app
6751
06:17:55,200 --> 06:17:58,240
yeah so it says apple that's very
6752
06:17:56,957 --> 06:17:59,599
interesting so you can basically use
6753
06:17:58,240 --> 06:18:00,638
something called apple development but
6754
06:17:59,599 --> 06:18:02,159
we're not going to do that we're just
6755
06:18:00,637 --> 06:18:03,439
going to say ios app development at the
6756
06:18:04,558 --> 06:18:08,319
let's do that just choose ios app
6757
06:18:06,080 --> 06:18:11,360
development and just press continue and
6758
06:18:08,319 --> 06:18:14,400
here it says create a new certificate
6759
06:18:11,360 --> 06:18:17,040
and create a new certificate is it's
6760
06:18:14,400 --> 06:18:18,638
waiting for you to tell it that you're
6761
06:18:17,040 --> 06:18:20,638
asking for a development certificate and
6762
06:18:18,637 --> 06:18:22,159
you need to choose a file now this is
6763
06:18:20,637 --> 06:18:22,957
the magic part you need to now go back
6764
06:18:22,957 --> 06:18:26,797
keychain so let me see if i can bring up
6765
06:18:28,797 --> 06:18:33,360
just go to keychain access menu
6766
06:18:33,360 --> 06:18:38,637
a certificate assistant and then say
6767
06:18:36,159 --> 06:18:40,400
request a certificate from a certificate
6768
06:18:40,400 --> 06:18:46,718
so i'm gonna press that and i'm gonna
6769
06:18:46,718 --> 06:18:50,798
and the common name i'm just gonna leave
6770
06:18:50,797 --> 06:18:53,840
and then i'm just going to say save to
6771
06:18:59,759 --> 06:19:03,840
then i'm gonna say continue and it says
6772
06:19:01,759 --> 06:19:05,840
okay i'm gonna write a file on your
6773
06:19:03,840 --> 06:19:07,599
desktop or wherever you want with that
6774
06:19:05,840 --> 06:19:09,520
request so save it somewhere that you
6775
06:19:07,599 --> 06:19:12,000
know where it is actually saved so i'm
6776
06:19:09,520 --> 06:19:13,840
gonna save that and then say done all
6777
06:19:13,840 --> 06:19:17,360
that certificate request in itself
6778
06:19:15,759 --> 06:19:19,519
didn't create a certificate it's just a
6779
06:19:17,360 --> 06:19:22,000
certificate request but what it did is
6780
06:19:19,520 --> 06:19:23,680
that it created a private key
6781
06:19:22,000 --> 06:19:26,477
and you can actually go to your keys
6782
06:19:23,680 --> 06:19:28,878
here and you'll see that there was a
6783
06:19:26,477 --> 06:19:30,399
if i say kind private key so one of
6784
06:19:28,878 --> 06:19:32,400
these keys is the one that was just
6785
06:19:32,400 --> 06:19:35,840
i don't exactly know which one because
6786
06:19:34,080 --> 06:19:39,360
it doesn't have a date but it's just one
6787
06:19:35,840 --> 06:19:40,637
of these so every request for creating a
6788
06:19:40,637 --> 06:19:45,439
it creates with itself a private key
6789
06:19:43,040 --> 06:19:47,040
okay so keep that in mind let's go back
6790
06:19:47,040 --> 06:19:50,878
now that that file has been saved on
6791
06:19:48,477 --> 06:19:53,520
your desktop just say choose file and
6792
06:19:53,520 --> 06:19:58,400
and pick that certificate request okay
6793
06:19:56,718 --> 06:20:00,477
and it's you see here certificate
6794
06:20:02,477 --> 06:20:07,360
and then it says okay it expires in a
6795
06:20:05,599 --> 06:20:08,797
year and you need to keep that in mind
6796
06:20:07,360 --> 06:20:10,477
because development certificates do
6797
06:20:08,797 --> 06:20:13,119
always expire in a year and you need to
6798
06:20:10,477 --> 06:20:14,399
by basically renew them okay
6799
06:20:13,119 --> 06:20:15,599
so but for now you don't have to worry
6800
06:20:14,400 --> 06:20:17,920
about that because we're not going to
6801
06:20:15,599 --> 06:20:20,319
take a year to develop this application
6802
06:20:17,919 --> 06:20:23,679
so let's just say download and it got
6803
06:20:20,319 --> 06:20:25,759
downloaded to my downloads folder so
6804
06:20:23,680 --> 06:20:27,680
i'm gonna bring up my downloads folder
6805
06:20:35,360 --> 06:20:40,240
the file that got downloaded you see
6806
06:20:38,080 --> 06:20:42,638
it's a cert file all right now this
6807
06:20:40,240 --> 06:20:44,240
certification in itself it doesn't
6808
06:20:42,637 --> 06:20:45,599
contain your private key remember the
6809
06:20:44,240 --> 06:20:46,958
private key is in the keychain so what
6810
06:20:45,599 --> 06:20:49,439
you need to do is just you need to
6811
06:20:46,957 --> 06:20:51,439
double click on this all right so
6812
06:20:49,439 --> 06:20:52,797
double clicking on it you see it will
6813
06:20:51,439 --> 06:20:54,957
then create a certificate in your
6814
06:20:52,797 --> 06:20:57,199
keychain under my certificates and login
6815
06:20:54,957 --> 06:20:59,199
keychain that is linked with your
6816
06:20:57,200 --> 06:21:00,878
private key you see so this is what you
6817
06:20:59,200 --> 06:21:03,440
downloaded from apple this is what you
6818
06:21:00,878 --> 06:21:05,279
created on your computer by requesting a
6819
06:21:03,439 --> 06:21:07,520
certificate and when you double click on
6820
06:21:05,279 --> 06:21:09,599
the downloaded certificate these two get
6821
06:21:09,599 --> 06:21:14,079
so that's it that that is what you have
6822
06:21:12,080 --> 06:21:16,320
to do to create a development
6823
06:21:14,080 --> 06:21:18,000
certificate and the key related to it
6824
06:21:18,000 --> 06:21:21,840
now let's go to the production
6825
06:21:20,159 --> 06:21:24,000
certificate and we need to kind of do
6826
06:21:24,000 --> 06:21:27,360
in order to create our production
6827
06:21:25,840 --> 06:21:28,957
certificate so let's go back to all
6828
06:21:27,360 --> 06:21:30,878
certificates and i'm just going to say
6829
06:21:30,878 --> 06:21:36,637
i'm gonna say ios distribution app store
6830
06:21:34,080 --> 06:21:38,878
and ad hoc okay so choose that option
6831
06:21:38,878 --> 06:21:42,400
and sorry i'm just gonna not also in my
6832
06:21:40,718 --> 06:21:44,477
notes here that we talked about the dev
6833
06:21:44,477 --> 06:21:48,637
so let's go ahead and press continue
6834
06:21:46,797 --> 06:21:49,919
here and you'll have to do the exact
6835
06:21:48,637 --> 06:21:52,557
same process as you did for the
6836
06:21:49,919 --> 06:21:55,039
development certificate and create a new
6837
06:21:55,040 --> 06:21:59,520
let's do the same thing just basically
6838
06:21:56,957 --> 06:22:01,359
kind of copy and paste the same process
6839
06:22:01,360 --> 06:22:05,360
certificate assistant request a
6840
06:22:02,957 --> 06:22:06,717
certificate from a certificate authority
6841
06:22:05,360 --> 06:22:08,637
and just be careful a little bit with
6842
06:22:06,718 --> 06:22:10,718
this because i've understood from what
6843
06:22:08,637 --> 06:22:13,200
i've what i've seen is that depending on
6844
06:22:10,718 --> 06:22:14,958
what you've chosen here this menu
6845
06:22:16,000 --> 06:22:20,080
it could be that you kind of need to
6846
06:22:18,159 --> 06:22:21,919
make sure in your keychain that you're
6847
06:22:21,919 --> 06:22:25,919
so just make sure that nothing is
6848
06:22:23,279 --> 06:22:27,759
selected and then go to um sorry then go
6849
06:22:27,759 --> 06:22:30,877
certificate assistant and request a
6850
06:22:29,040 --> 06:22:31,840
certificate for certificate authority
6851
06:22:31,840 --> 06:22:35,920
company's or your developer accounts
6852
06:22:34,159 --> 06:22:36,558
email there i'm just gonna pick solid a
6853
06:22:36,558 --> 06:22:39,520
and then save to disk and then say
6854
06:22:39,520 --> 06:22:42,878
and then save it to desktop and since
6855
06:22:41,520 --> 06:22:44,637
there is a file already there with the
6856
06:22:42,878 --> 06:22:45,680
same name from the previous step it's
6857
06:22:44,637 --> 06:22:48,557
going to say are you sure you want to
6858
06:22:48,558 --> 06:22:53,040
and it got saved then i'm going to go
6859
06:22:50,319 --> 06:22:54,000
here and then choose the same exact file
6860
06:22:54,000 --> 06:22:56,957
actually is a new file which got
6861
06:22:58,797 --> 06:23:01,439
and you'll see now there is a download
6862
06:23:01,439 --> 06:23:07,279
i'm going to download that and if i go
6863
06:23:07,279 --> 06:23:11,599
here i'll bring it up so you can see as
6864
06:23:14,159 --> 06:23:18,159
i'm going to bring it here you will see
6865
06:23:15,759 --> 06:23:20,000
that there is a new file called ios
6866
06:23:18,159 --> 06:23:22,477
distribution that is your production
6867
06:23:20,000 --> 06:23:24,159
certificate okay so double click on that
6868
06:23:22,477 --> 06:23:25,680
keychain it's open again and you'll see
6869
06:23:24,159 --> 06:23:27,919
now you have two certificates here
6870
06:23:25,680 --> 06:23:29,920
iphone distribution and then iphone
6871
06:23:29,919 --> 06:23:33,839
these are your certificates and keep
6872
06:23:31,919 --> 06:23:35,439
hold of them kind of like try to save
6873
06:23:33,840 --> 06:23:36,878
them and if even if you don't save them
6874
06:23:35,439 --> 06:23:39,520
it's okay because they're now placed
6875
06:23:36,878 --> 06:23:41,279
here so you can always export them okay
6876
06:23:39,520 --> 06:23:43,360
but it's also good practice just to keep
6877
06:23:46,878 --> 06:23:51,360
now we've created a developer and a dis
6878
06:23:50,000 --> 06:23:52,797
and a production or distribution
6879
06:23:52,797 --> 06:23:56,399
let's talk about the next step and that
6880
06:23:54,797 --> 06:23:58,319
is required for us to be able to release
6881
06:24:00,080 --> 06:24:05,520
let's go back here and to identifiers
6882
06:24:03,040 --> 06:24:07,200
and in here is where you create your
6883
06:24:05,520 --> 06:24:09,840
application identifiers and you can see
6884
06:24:07,200 --> 06:24:11,680
that they're actually tied to a specific
6885
06:24:09,840 --> 06:24:12,797
organization and identifier which we
6886
06:24:12,797 --> 06:24:16,319
in which chapter was it that we talked
6887
06:24:14,797 --> 06:24:17,199
about i think it was actually in chapter
6888
06:24:17,200 --> 06:24:21,200
yes if you have if you don't know what
6889
06:24:18,957 --> 06:24:23,119
an identifier is please go back to
6890
06:24:21,200 --> 06:24:25,280
chapter number eight where i discussed
6891
06:24:28,319 --> 06:24:34,319
and say that you want to create a new
6892
06:24:30,477 --> 06:24:37,599
app id okay press continue and then you
6893
06:24:34,319 --> 06:24:39,840
will choose app here not an app clip
6894
06:24:37,599 --> 06:24:41,519
and then you will be presented with this
6895
06:24:41,520 --> 06:24:45,920
explain to you what all this is so
6896
06:24:43,759 --> 06:24:48,159
in here the description um we're just
6897
06:24:45,919 --> 06:24:50,477
gonna print some information here that
6898
06:24:48,159 --> 06:24:52,079
describes our application and to be
6899
06:24:50,477 --> 06:24:54,159
honest with you i don't remember what we
6900
06:24:52,080 --> 06:24:55,440
actually called our application when we
6901
06:24:55,439 --> 06:24:59,039
in the previous i can see it was called
6902
06:24:59,040 --> 06:25:04,159
so i'm just going to say my notes
6903
06:25:01,439 --> 06:25:06,000
flutter application sample or flutter
6904
06:25:06,000 --> 06:25:09,759
here the bundle identifier is very
6905
06:25:08,240 --> 06:25:13,200
important that you actually specify it
6906
06:25:09,759 --> 06:25:15,439
correctly as we created it in our
6907
06:25:13,200 --> 06:25:17,360
in chapter 8. so i'm going to bring up
6908
06:25:15,439 --> 06:25:20,557
the my notes application here i'm going
6909
06:25:17,360 --> 06:25:23,840
to increase the font size so you can see
6910
06:25:20,558 --> 06:25:25,280
um if you remember where we created the
6911
06:25:25,279 --> 06:25:30,319
with this command you see we said
6912
06:25:27,718 --> 06:25:32,240
se.pixelity and then my notes meaning
6913
06:25:30,319 --> 06:25:34,759
that the application identifier from
6914
06:25:34,759 --> 06:25:39,439
se.pixelity.mynotes okay with a dot in
6915
06:25:37,439 --> 06:25:40,637
between all right so if i search for
6916
06:25:39,439 --> 06:25:43,119
that in our project let's say
6917
06:25:43,119 --> 06:25:46,637
you will see there are some results here
6918
06:25:44,637 --> 06:25:48,399
you see so depending on how you created
6919
06:25:46,637 --> 06:25:50,878
your floater application depending on
6920
06:25:48,400 --> 06:25:52,558
what organization you specified this
6921
06:25:50,878 --> 06:25:54,477
identifier may be different for you but
6922
06:25:52,558 --> 06:25:56,958
since my identifier in this case is s
6923
06:25:54,477 --> 06:25:58,558
epixody my notes i'm just gonna copy
6924
06:25:58,558 --> 06:26:02,000
and i'm going to bring it here make sure
6925
06:26:00,000 --> 06:26:04,240
explicit is selected and just paste that
6926
06:26:02,000 --> 06:26:05,520
bundle id in there okay so yeah it's
6927
06:26:05,520 --> 06:26:08,637
now if you remember what i said before
6928
06:26:06,957 --> 06:26:10,399
an app identifier is not just the
6929
06:26:08,637 --> 06:26:12,239
identifier the bundle id itself but it's
6930
06:26:10,400 --> 06:26:14,240
also like a list of capabilities that
6931
06:26:12,240 --> 06:26:16,240
your application can have now if you for
6932
06:26:14,240 --> 06:26:18,240
instance want to have push notifications
6933
06:26:16,240 --> 06:26:20,638
you will also need to enable that in
6934
06:26:18,240 --> 06:26:22,478
here now push notification is not not
6935
06:26:20,637 --> 06:26:25,039
something that we're going to do in this
6936
06:26:22,477 --> 06:26:26,718
course so you don't have to do that but
6937
06:26:25,040 --> 06:26:30,000
all you need to do here after you've
6938
06:26:26,718 --> 06:26:31,680
entered your app id prefix sorry your
6939
06:26:30,000 --> 06:26:35,040
app bundle an identifier and a
6940
06:26:31,680 --> 06:26:36,240
description just press continue
6941
06:26:35,040 --> 06:26:38,319
and you can see that says okay are you
6942
06:26:36,240 --> 06:26:41,600
sure everything's fine yeah explicit
6943
06:26:38,319 --> 06:26:43,919
yeah great and then i say register
6944
06:26:41,599 --> 06:26:45,519
now that identifier got created all
6945
06:26:47,200 --> 06:26:50,558
you don't really have to do anything
6946
06:26:48,558 --> 06:26:52,878
with that identifier right now it's just
6947
06:26:50,558 --> 06:26:54,878
that you have now registered that
6948
06:26:52,878 --> 06:26:57,600
identifier so no one else can basically
6949
06:27:02,159 --> 06:27:06,558
tick these items in my notes so that we
6950
06:27:04,240 --> 06:27:08,638
know we've talked about it all right
6951
06:27:11,759 --> 06:27:15,840
uh your application so that it can
6952
06:27:13,439 --> 06:27:18,797
actually be installed and debugged or
6953
06:27:18,797 --> 06:27:24,319
you can't see my entire setup but here i
6954
06:27:21,439 --> 06:27:26,000
have an iphone 12 pro which is just
6955
06:27:24,319 --> 06:27:27,279
right here it's a little bit dirty
6956
06:27:26,000 --> 06:27:28,957
screen but that doesn't matter it's just
6957
06:27:31,599 --> 06:27:37,359
is connected as you can see with a cable
6958
06:27:34,159 --> 06:27:39,040
to my computer and it is available for
6959
06:27:37,360 --> 06:27:40,797
my computer to see so i'm just going to
6960
06:27:39,040 --> 06:27:42,798
unlock this phone right now with my
6961
06:27:48,878 --> 06:27:52,797
you can see that it is available here
6962
06:27:55,119 --> 06:28:00,637
it has a special identifier and if you
6963
06:27:58,240 --> 06:28:02,000
want to get your device identifier which
6964
06:28:00,637 --> 06:28:04,000
is what we need to do here as you can
6965
06:28:02,000 --> 06:28:06,159
see in order to debug on a real device
6966
06:28:04,000 --> 06:28:07,279
we need a uid to register for our
6967
06:28:08,558 --> 06:28:12,477
when you i mean this is a kind of like a
6968
06:28:10,400 --> 06:28:13,920
big thing to talk about because it takes
6969
06:28:12,477 --> 06:28:15,520
a lot of time but what i'm going to say
6970
06:28:13,919 --> 06:28:18,159
here is that when you created that
6971
06:28:15,520 --> 06:28:21,040
development pro and development
6972
06:28:18,159 --> 06:28:23,279
certificate the next step is for you to
6973
06:28:21,040 --> 06:28:25,440
basically register your device with
6974
06:28:23,279 --> 06:28:27,360
apple so that apple knows on which
6975
06:28:25,439 --> 06:28:29,119
devices you actually want to test your
6976
06:28:29,119 --> 06:28:34,718
and those devices they're stored in here
6977
06:28:34,718 --> 06:28:40,080
and there are ways to get your device
6978
06:28:36,878 --> 06:28:42,400
identifier such as going to finder as i
6979
06:28:40,080 --> 06:28:43,360
just showed here and just tapping on
6980
06:28:43,360 --> 06:28:47,360
device now i'm kind of going to do it
6981
06:28:45,360 --> 06:28:50,558
off screen so you don't see the entirety
6982
06:28:52,159 --> 06:28:56,558
let me see if there's any way for you to
6983
06:28:54,000 --> 06:28:58,159
actually get your device identifier yes
6984
06:28:56,558 --> 06:29:00,878
and it is i can actually see here
6985
06:29:00,878 --> 06:29:04,558
so what i'm going to do is i'm going to
6986
06:29:02,319 --> 06:29:07,439
actually bring finder up here so you see
6987
06:29:04,558 --> 06:29:09,680
what happens i just tap on my phone now
6988
06:29:07,439 --> 06:29:12,477
you need to register your device on
6989
06:29:09,680 --> 06:29:14,637
identifier under this devices tab before
6990
06:29:12,477 --> 06:29:16,000
you create your profile okay
6991
06:29:14,637 --> 06:29:17,840
i'm not going to do that because my
6992
06:29:16,000 --> 06:29:19,919
phone is already registered but you need
6993
06:29:17,840 --> 06:29:22,159
to do this on your own and the way to do
6994
06:29:19,919 --> 06:29:23,759
that is to connect your phone or your
6995
06:29:22,159 --> 06:29:26,240
tablet which you want to test your
6996
06:29:23,759 --> 06:29:27,039
flutter application on to your computer
6997
06:29:27,040 --> 06:29:33,520
go into finder and tap on your phone and
6998
06:29:30,000 --> 06:29:35,200
then just click on this section now i'm
6999
06:29:33,520 --> 06:29:37,360
not going to do that here and the reason
7000
06:29:35,200 --> 06:29:39,280
behind that is that every device
7001
06:29:37,360 --> 06:29:40,958
says identifier really identifies that
7002
06:29:39,279 --> 06:29:42,957
device so you could go and register my
7003
06:29:44,159 --> 06:29:47,680
and it's just not a good idea to show
7004
06:29:45,599 --> 06:29:49,199
your device identifier to others so i'm
7005
06:29:47,680 --> 06:29:51,119
not i'm not going to be able to do that
7006
06:29:49,200 --> 06:29:53,760
unfortunately in this course but
7007
06:29:51,119 --> 06:29:54,637
the steps you have to take is to click
7008
06:29:54,637 --> 06:29:58,878
on this label and it will show you a
7009
06:29:58,878 --> 06:30:05,920
copy that uuid and go into devices
7010
06:30:03,520 --> 06:30:07,760
section of the certificate identifiers
7011
06:30:05,919 --> 06:30:11,519
and profile section of apple developer
7012
06:30:07,759 --> 06:30:12,717
account and add that uuid with a name to
7013
06:30:12,718 --> 06:30:16,637
okay so i'm just gonna assume you've
7014
06:30:14,957 --> 06:30:18,717
done that and if you need some time to
7015
06:30:16,637 --> 06:30:20,637
go ahead and do that please pause this
7016
06:30:20,637 --> 06:30:24,957
the key is just to get the identifier
7017
06:30:22,718 --> 06:30:26,477
from here okay there's a way also get
7018
06:30:24,957 --> 06:30:29,840
your identifier your device identifier
7019
06:30:26,477 --> 06:30:31,840
from xcode um and that works exactly the
7020
06:30:29,840 --> 06:30:35,200
same you just have to open xcode then go
7021
06:30:31,840 --> 06:30:36,797
to um i believe go into menu and then
7022
06:30:35,200 --> 06:30:38,319
pick devices and from there you pick
7023
06:30:36,797 --> 06:30:40,717
your device and you'll see it's
7024
06:30:40,718 --> 06:30:44,080
so that was a lot of talk let's say that
7025
06:30:44,080 --> 06:30:50,718
so what we need to do now is to go and
7026
06:30:46,477 --> 06:30:54,000
create a development profile all right
7027
06:30:50,718 --> 06:30:55,360
so i'm just going to tick these items in
7028
06:30:55,360 --> 06:30:58,797
so this is the exciting part now we're
7029
06:30:56,957 --> 06:31:01,279
going to go to the profile section and
7030
06:30:58,797 --> 06:31:03,119
create a new development profile so
7031
06:31:01,279 --> 06:31:04,797
click on generate a profile and i'm
7032
06:31:03,119 --> 06:31:06,557
going to say ios app development and
7033
06:31:06,558 --> 06:31:09,920
then it says okay choose an app id you
7034
06:31:08,558 --> 06:31:11,600
see now your profile is going to be
7035
06:31:11,599 --> 06:31:16,079
do this drop down here and you can see
7036
06:31:14,000 --> 06:31:18,558
i'm just going to say my notes and this
7037
06:31:18,558 --> 06:31:21,920
and for you this id maybe a little bit
7038
06:31:20,637 --> 06:31:24,159
different the description maybe a little
7039
06:31:21,919 --> 06:31:24,957
different but just choose the
7040
06:31:24,957 --> 06:31:29,119
app id that you created in the previous
7041
06:31:27,119 --> 06:31:31,520
steps so i'm going to choose that i'm
7042
06:31:31,520 --> 06:31:35,439
now it's going to say okay which
7043
06:31:33,200 --> 06:31:37,280
certificate is this profile connected to
7044
06:31:35,439 --> 06:31:40,000
do you remember i said that a profile is
7045
06:31:37,279 --> 06:31:42,399
linked to a certificate this is what
7046
06:31:42,400 --> 06:31:46,080
granted that you've created your
7047
06:31:43,680 --> 06:31:47,439
development certificate in as i talked
7048
06:31:46,080 --> 06:31:50,240
about in this chapter just select your
7049
06:31:47,439 --> 06:31:51,599
certificate so and then say continue
7050
06:31:53,439 --> 06:32:00,319
which devices do you want this um
7051
06:31:57,680 --> 06:32:01,840
profile which which device do you want
7052
06:32:00,319 --> 06:32:03,520
your application which is signed with
7053
06:32:01,840 --> 06:32:06,878
this profile certainly to be able to run
7054
06:32:03,520 --> 06:32:08,878
on now these all these devices come from
7055
06:32:06,878 --> 06:32:10,080
the devices section i've registered many
7056
06:32:10,878 --> 06:32:16,080
even some of my co-workers devices
7057
06:32:14,319 --> 06:32:18,319
which allow us to basically debug an
7058
06:32:16,080 --> 06:32:19,680
application on their devices as well so
7059
06:32:26,000 --> 06:32:30,957
see those devices in this list
7060
06:32:29,360 --> 06:32:33,760
right so i'm just going to say select
7061
06:32:30,957 --> 06:32:35,840
all just make sure my application can be
7062
06:32:33,759 --> 06:32:37,439
run on all those devices that i've
7063
06:32:37,439 --> 06:32:41,039
then say continue and then you will give
7064
06:32:39,119 --> 06:32:42,637
it a name so i'm going to give it a name
7065
06:32:48,400 --> 06:32:52,558
i'm just going to say generate
7066
06:32:50,878 --> 06:32:54,637
and you will get some information about
7067
06:32:52,558 --> 06:32:55,440
when it expires etc also expires in a
7068
06:32:55,439 --> 06:33:00,000
so and then you'll have to say download
7069
06:32:58,400 --> 06:33:02,558
and we're going to do the exact same
7070
06:33:00,000 --> 06:33:04,240
thing now for a distribution profile a
7071
06:33:02,558 --> 06:33:06,798
distribution profile is the kind of like
7072
06:33:04,240 --> 06:33:08,638
the same dev profile but you cannot
7073
06:33:06,797 --> 06:33:10,637
debug your application with it all you
7074
06:33:08,637 --> 06:33:12,557
can pretty much do with it is to sign
7075
06:33:10,637 --> 06:33:14,319
your application with that profile and
7076
06:33:12,558 --> 06:33:16,477
send it to apple so that you can deploy
7077
06:33:14,319 --> 06:33:19,040
your application in the app store okay
7078
06:33:16,477 --> 06:33:21,599
so press plus profile and in this and
7079
06:33:19,040 --> 06:33:23,600
this time go to distribution and say app
7080
06:33:21,599 --> 06:33:25,439
store you see distribution subsection
7081
06:33:27,759 --> 06:33:32,319
then go here and then choose your
7082
06:33:32,319 --> 06:33:36,477
so that was the development profile
7083
06:33:33,599 --> 06:33:38,079
sorry now we have to go to production so
7084
06:33:36,477 --> 06:33:39,840
i'm going to bring the window a little
7085
06:33:38,080 --> 06:33:41,440
bit up so that you can see it in its
7086
06:33:41,439 --> 06:33:45,840
then i'm gonna choose my notes
7087
06:33:45,840 --> 06:33:50,240
and then i'm just gonna press the
7088
06:33:51,200 --> 06:33:56,080
i'm gonna take it in my notes so we've
7089
06:33:52,637 --> 06:33:59,119
talked about the dev profile okay
7090
06:33:56,080 --> 06:34:00,478
so now that you've done that uh
7091
06:33:59,119 --> 06:34:01,919
choose your assertive again you see it
7092
06:34:00,477 --> 06:34:04,319
says okay now you're creating a
7093
06:34:01,919 --> 06:34:05,919
certificate a profile for a distribution
7094
06:34:04,319 --> 06:34:07,680
then it should be hooked with some sort
7095
06:34:05,919 --> 06:34:09,359
of distribution certificate and since
7096
06:34:07,680 --> 06:34:10,957
ios distribution certificate is the only
7097
06:34:09,360 --> 06:34:13,119
one that we created if you remember i
7098
06:34:10,957 --> 06:34:15,039
deleted all my other certificates
7099
06:34:13,119 --> 06:34:16,797
so that's the only one left here just
7100
06:34:15,040 --> 06:34:18,638
pick that and press continue
7101
06:34:16,797 --> 06:34:20,957
now give it a name i'm going to say my
7102
06:34:23,840 --> 06:34:26,477
and then i'm just gonna say generate it
7103
06:34:26,477 --> 06:34:29,759
okay there you go and you can download
7104
06:34:29,759 --> 06:34:33,039
now that you've done that you need to
7105
06:34:33,040 --> 06:34:37,600
downloads folder where your profiles got
7106
06:34:37,599 --> 06:34:40,877
now you see these are the two profiles i
7107
06:34:39,360 --> 06:34:43,760
got downloaded except with their
7108
06:34:40,878 --> 06:34:45,840
extension of mobile provision provision
7109
06:34:43,759 --> 06:34:47,679
you need to install these somehow on
7110
06:34:45,840 --> 06:34:50,240
your computer so that you can sign your
7111
06:34:47,680 --> 06:34:52,159
applications or your ios application
7112
06:34:52,159 --> 06:34:56,159
so what you need to do now is to copy
7113
06:34:54,240 --> 06:34:58,400
these two files i'm going to copy them
7114
06:34:58,400 --> 06:35:02,718
and then bring them into your provision
7115
06:35:00,080 --> 06:35:05,120
profiles folder i'm just going to
7116
06:35:02,718 --> 06:35:06,798
cut and paste them there okay so they're
7117
06:35:05,119 --> 06:35:08,637
not in the downloads folder anymore so
7118
06:35:08,637 --> 06:35:12,957
there are other ways of installing these
7119
06:35:10,319 --> 06:35:14,718
profiles some people rather drag it into
7120
06:35:12,957 --> 06:35:16,557
xcode some people double click on them
7121
06:35:14,718 --> 06:35:18,400
and those are all fine but there's a
7122
06:35:16,558 --> 06:35:20,159
little bit of a problem by doing those
7123
06:35:18,400 --> 06:35:22,000
methods compared with the method i
7124
06:35:20,159 --> 06:35:24,797
showed you here if you double click
7125
06:35:24,797 --> 06:35:29,840
mac os knows how how to install them but
7126
06:35:27,119 --> 06:35:31,439
mac os just messes up their naming so
7127
06:35:29,840 --> 06:35:33,599
they will be installed on their very
7128
06:35:31,439 --> 06:35:35,599
random names so if you come back to your
7129
06:35:33,599 --> 06:35:37,119
provisioning profiles folder they may be
7130
06:35:35,599 --> 06:35:39,359
under some sort of a cryptic name that
7131
06:35:37,119 --> 06:35:40,637
you don't recognize anymore so in this
7132
06:35:40,637 --> 06:35:44,957
basically keep their original name which
7133
06:35:43,200 --> 06:35:48,159
is very descriptive of what they
7134
06:35:48,319 --> 06:35:57,919
okay that was that so now we've created
7135
06:35:51,759 --> 06:35:57,919
a um dev profile and a prod profile
7136
06:35:58,558 --> 06:36:03,760
exciting stuff so what we need to do now
7137
06:36:01,919 --> 06:36:06,079
is actually work we can say that we're
7138
06:36:03,759 --> 06:36:07,279
done with this screen here so i'm going
7139
06:36:07,279 --> 06:36:12,239
and what i'm going to do here then is to
7140
06:36:10,637 --> 06:36:13,919
what we need to talk about now is to set
7141
06:36:13,919 --> 06:36:18,717
in xcode so that xcode understands that
7142
06:36:17,200 --> 06:36:20,798
our application needs to be signed with
7143
06:36:18,718 --> 06:36:23,360
the correct profiles and certificates so
7144
06:36:20,797 --> 06:36:26,079
what i need you to do is to go to the
7145
06:36:23,360 --> 06:36:28,718
ios folder in your flutter project and
7146
06:36:26,080 --> 06:36:30,160
just right click on it and say reveal in
7147
06:36:30,159 --> 06:36:35,040
after you do reveal in finder double
7148
06:36:32,240 --> 06:36:35,920
click on the workspace in order to open
7149
06:36:35,919 --> 06:36:42,957
flutter xcode workspace in xcode
7150
06:36:40,319 --> 06:36:44,319
and what you'll need to do now is to
7151
06:36:44,319 --> 06:36:49,840
make sure that your signing of your ios
7152
06:36:47,439 --> 06:36:52,957
application is done correctly so choose
7153
06:36:49,840 --> 06:36:54,477
this icon on top left in your um i think
7154
06:36:52,957 --> 06:36:56,319
it's project explorer or something
7155
06:36:58,718 --> 06:37:04,159
choose your targets and then go to
7156
06:37:01,279 --> 06:37:06,797
signing and capabilities and just remove
7157
06:37:06,797 --> 06:37:10,557
for this course we're not going to use
7158
06:37:12,400 --> 06:37:18,558
here in my notes that i've talked about
7159
06:37:22,878 --> 06:37:27,760
the next step is for us to be able to
7160
06:37:25,360 --> 06:37:29,360
tell xcode that for debug purposes in
7161
06:37:27,759 --> 06:37:30,557
order for us to be able to run our
7162
06:37:30,558 --> 06:37:34,558
on a real phone and debug that
7163
06:37:32,957 --> 06:37:37,119
application which profile and which
7164
06:37:34,558 --> 06:37:40,159
certificate it needs to use
7165
06:37:37,119 --> 06:37:42,399
so what i'm going to do here is to go
7166
06:37:40,159 --> 06:37:45,759
into this section here as you can see
7167
06:37:42,400 --> 06:37:48,798
debug on under signing and capabilities
7168
06:37:45,759 --> 06:37:50,477
and then i can see that actually it is
7169
06:37:50,477 --> 06:37:54,558
it's already using the automatic signing
7170
06:37:53,119 --> 06:37:56,319
for debug and i'm going to remove that
7171
06:37:56,319 --> 06:37:59,520
so what you need what you need to do
7172
06:37:57,680 --> 06:38:00,477
here is actually pick the right profile
7173
06:38:00,477 --> 06:38:05,279
and it says my notes dev and my notes
7174
06:38:02,957 --> 06:38:07,359
profile sorry prod and you can see it
7175
06:38:08,797 --> 06:38:12,399
that is because we don't have a
7176
06:38:10,319 --> 06:38:14,637
development team yet and alex and i'll
7177
06:38:12,400 --> 06:38:17,200
explain that soon but for now just go to
7178
06:38:14,637 --> 06:38:19,039
your provisioning profile and say for
7179
06:38:17,200 --> 06:38:21,520
debug purposes we're gonna use the
7180
06:38:22,558 --> 06:38:29,040
and then go to your release and then say
7181
06:38:26,080 --> 06:38:30,958
i'm gonna use my notes prod okay and
7182
06:38:29,040 --> 06:38:32,798
here's a little error here you see it
7183
06:38:30,957 --> 06:38:34,877
says producing profile my notes pro
7184
06:38:32,797 --> 06:38:37,680
doesn't include signing certificate
7185
06:38:34,878 --> 06:38:39,119
apple development blah blah blah okay
7186
06:38:37,680 --> 06:38:40,319
that's that's fine don't worry about
7187
06:38:41,119 --> 06:38:45,840
what we need to do now is to actually
7188
06:38:43,599 --> 06:38:47,759
tell it um so i'm going to actually pick
7189
06:38:47,759 --> 06:38:52,477
profound search setup release profile
7190
06:38:52,477 --> 06:38:58,000
so what you need to do here is to
7191
06:38:55,599 --> 06:39:00,319
go to your build settings and make sure
7192
06:39:01,439 --> 06:39:06,239
here is actually selected you see
7193
06:39:03,759 --> 06:39:08,717
pixelity is for me and then for you it
7194
06:39:08,718 --> 06:39:12,477
um now what i'm gonna do i mean
7195
06:39:10,240 --> 06:39:14,558
sometimes uh and i can see signing
7196
06:39:12,477 --> 06:39:16,957
certificate here is actually not really
7197
06:39:14,558 --> 06:39:19,280
selected sometimes it can be that xcode
7198
06:39:16,957 --> 06:39:21,119
kind of goes crazy when we play with
7199
06:39:19,279 --> 06:39:22,797
certificates and signings so i'm going
7200
06:39:22,797 --> 06:39:27,119
i'm going to do the same thing here go
7201
06:39:29,840 --> 06:39:35,840
finder open up in another window here so
7202
06:39:32,000 --> 06:39:35,840
i'm going to open up the workspace again
7203
06:39:39,439 --> 06:39:43,199
okay i can see we're still getting the
7204
06:39:41,599 --> 06:39:44,957
problem provisioning profile minus that
7205
06:39:43,200 --> 06:39:46,718
doesn't include signing certificate
7206
06:39:44,957 --> 06:39:48,239
apple development and let's open up our
7207
06:39:46,718 --> 06:39:49,360
keychain again and have a look a little
7208
06:39:49,360 --> 06:39:54,477
and i can see unfortunately there is a
7209
06:39:52,159 --> 06:39:57,279
profile you can see previously we had
7210
06:39:54,477 --> 06:39:59,360
two profiles and it is very unfortunate
7211
06:39:59,360 --> 06:40:03,680
so in here you can see this this
7212
06:40:03,680 --> 06:40:07,840
certificate was created by us you see
7213
06:40:05,919 --> 06:40:09,439
they're very tightly close to each other
7214
06:40:07,840 --> 06:40:11,040
these two we created but this is
7215
06:40:09,439 --> 06:40:13,759
something that xcode has created and
7216
06:40:11,040 --> 06:40:15,680
that is because xcode tries to do
7217
06:40:13,759 --> 06:40:18,159
automatic signing as you saw it was
7218
06:40:15,680 --> 06:40:20,637
saying automatically manage signing so
7219
06:40:18,159 --> 06:40:23,119
by doing that it created a certificate
7220
06:40:20,637 --> 06:40:25,520
for me on my behalf which i don't want
7221
06:40:23,119 --> 06:40:26,557
so the error that we're seeing here is
7222
06:40:26,558 --> 06:40:31,040
xcode is now saying that this this
7223
06:40:28,400 --> 06:40:32,478
profile that you have here is not linked
7224
06:40:32,477 --> 06:40:36,558
which xcode created itself no one asked
7225
06:40:34,400 --> 06:40:38,240
it to do that i didn't ask xcode to do
7226
06:40:36,558 --> 06:40:39,760
that so when you're working with is a
7227
06:40:38,240 --> 06:40:42,000
woman just know that xco tries to do a
7228
06:40:47,840 --> 06:40:51,439
so what i'm going to do here is i'm
7229
06:40:51,439 --> 06:40:54,557
development certificate because i didn't
7230
06:40:55,919 --> 06:40:59,359
i believe actually that's the right one
7231
06:40:57,360 --> 06:41:01,760
yeah so i'm going to say delete delete
7232
06:40:59,360 --> 06:41:03,920
and now you can see that error went away
7233
06:41:01,759 --> 06:41:04,957
simply because xcode was like ooh now i
7234
06:41:03,919 --> 06:41:05,919
understand which one you're talking
7235
06:41:05,919 --> 06:41:09,759
and then the provision profile of the
7236
06:41:15,759 --> 06:41:21,119
what i'm gonna do is as you can see here
7237
06:41:18,400 --> 06:41:24,159
i've opened the project here and then i
7238
06:41:21,119 --> 06:41:25,680
have my actual iphone selected here to
7239
06:41:24,159 --> 06:41:28,000
be able to make sure that your
7240
06:41:25,680 --> 06:41:30,558
application can actually run on this
7241
06:41:28,000 --> 06:41:33,040
phone now after all of this hard work is
7242
06:41:30,558 --> 06:41:34,958
just to press the play button here
7243
06:41:33,040 --> 06:41:37,600
so i want to do that and i want to let
7244
06:41:34,957 --> 06:41:38,637
it do its thing and if everything works
7245
06:41:38,637 --> 06:41:44,718
um it's going to basically then um allow
7246
06:41:42,159 --> 06:41:46,079
us to run the application all right
7247
06:41:46,080 --> 06:41:49,600
now and this is a dialogue that you're
7248
06:41:49,599 --> 06:41:52,637
what's happening here is that it's
7249
06:41:50,797 --> 06:41:54,159
trying to sign the application and all
7250
06:41:56,558 --> 06:42:00,080
development profile and since that
7251
06:42:00,080 --> 06:42:04,638
linked to a development certificate in
7252
06:42:02,159 --> 06:42:06,637
the keychain and that keychain is
7253
06:42:04,637 --> 06:42:08,718
password protected you see the login
7254
06:42:06,637 --> 06:42:10,557
keychain it says i can't access that
7255
06:42:08,718 --> 06:42:14,718
certificate give me the password for the
7256
06:42:10,558 --> 06:42:17,040
login keychain so i'm going to type that
7257
06:42:14,718 --> 06:42:20,798
and then i'm going to say always allow
7258
06:42:17,040 --> 06:42:23,360
so let's do it let it do its thing
7259
06:42:20,797 --> 06:42:25,360
and this may depending on the machine
7260
06:42:23,360 --> 06:42:27,279
that you're running this uh process on
7261
06:42:27,279 --> 06:42:32,919
i can see it's saying now building so um
7262
06:42:33,919 --> 06:42:40,159
okay then i got an actual failure here
7263
06:42:37,119 --> 06:42:42,319
it says cloud firestore wasn't found
7264
06:42:40,159 --> 06:42:43,919
and this is very interesting um
7265
06:42:42,319 --> 06:42:45,919
actually i mean i didn't plan for this
7266
06:42:43,919 --> 06:42:48,477
to happen but it did happen i'm kind of
7267
06:42:53,360 --> 06:42:57,200
when you add new dependencies to your
7268
06:42:55,119 --> 06:42:58,957
projects such as these big dependencies
7269
06:42:57,200 --> 06:43:01,280
but they're not really linked to your
7270
06:42:58,957 --> 06:43:02,239
project yet so the way to fix that is
7271
06:43:02,240 --> 06:43:06,000
let xcode be here okay i'm gonna close
7272
06:43:06,000 --> 06:43:11,520
i'm gonna bring a terminal uh what i'm
7273
06:43:08,718 --> 06:43:13,760
going to say here is flutter
7274
06:43:17,840 --> 06:43:22,400
so this is basically going to clean up
7275
06:43:20,718 --> 06:43:23,680
how the ios project was set up and all
7276
06:43:22,400 --> 06:43:25,600
those dependencies all right now i'm
7277
06:43:23,680 --> 06:43:26,878
going to close actually xcode as well
7278
06:43:25,599 --> 06:43:29,840
then what i'm going to say is to say
7279
06:43:32,159 --> 06:43:37,439
and flutter pop get what it does is that
7280
06:43:34,080 --> 06:43:38,958
it sets up all our dependencies from the
7281
06:43:37,439 --> 06:43:40,957
beginning and just to make sure i'm
7282
06:43:40,957 --> 06:43:46,399
folder and i'm going to say
7283
06:43:47,680 --> 06:43:51,920
could not be compatible version okay pod
7284
06:44:00,477 --> 06:44:06,000
uh let's see if we can do an update repo
7285
06:44:02,797 --> 06:44:08,079
i'm just gonna do that uh without like
7286
06:44:06,000 --> 06:44:09,520
explaining it right now so much and see
7287
06:44:08,080 --> 06:44:11,760
if that fixes our problem i'm going to
7288
06:44:09,520 --> 06:44:14,000
bring up a new safari window and say
7289
06:44:11,759 --> 06:44:15,279
pod install update repo let's see what
7290
06:44:14,000 --> 06:44:18,000
the command was but because i've
7291
06:44:32,558 --> 06:44:38,319
repo update it's called okay pot install
7292
06:44:36,000 --> 06:44:40,637
repo update let's see if this fixes our
7293
06:44:40,637 --> 06:44:45,039
and if cisco could not find compatible
7294
06:44:42,477 --> 06:44:45,919
version for podcloud firestore from blah
7295
06:44:45,919 --> 06:44:51,039
specs satisfying from dependencies were
7296
06:44:48,718 --> 06:44:52,637
found but they require higher minimum
7297
06:44:51,040 --> 06:44:53,680
deployment target and that's very
7298
06:44:57,040 --> 06:45:02,319
you see the deployment target that we
7299
06:44:59,360 --> 06:45:03,680
have for our application um what it
7300
06:45:03,680 --> 06:45:08,000
when we created the project with flutter
7301
06:45:08,000 --> 06:45:12,000
what it does internally is says
7302
06:45:10,319 --> 06:45:14,718
this flutter application should be run
7303
06:45:12,000 --> 06:45:16,878
on these ios versions and these android
7304
06:45:14,718 --> 06:45:19,280
versions and what we're seeing here
7305
06:45:19,279 --> 06:45:22,717
what we're seeing here is that we are
7306
06:45:21,040 --> 06:45:24,638
using cloud firestore and cloud
7307
06:45:22,718 --> 06:45:26,637
firestore as a dependency is expecting
7308
06:45:24,637 --> 06:45:28,637
our application to have a minimum
7309
06:45:26,637 --> 06:45:30,797
deployment version it means that cloud
7310
06:45:28,637 --> 06:45:32,718
firestore cannot be used in applications
7311
06:45:30,797 --> 06:45:35,759
that for instance are trying to run on
7312
06:45:32,718 --> 06:45:38,319
ios 7 for instance okay so what we need
7313
06:45:35,759 --> 06:45:40,957
to do here in your um flutter project
7314
06:45:38,319 --> 06:45:44,319
just say command p in visual studio code
7315
06:45:40,957 --> 06:45:46,637
and open up a file called um
7316
06:45:49,680 --> 06:45:55,200
here we have some stuff set up let's go
7317
06:45:52,558 --> 06:45:57,680
in here and just say platform ios and
7318
06:45:55,200 --> 06:45:59,600
what we're going to do is just to say
7319
06:45:59,599 --> 06:46:06,079
just just now i mean 13 it's really good
7320
06:46:02,718 --> 06:46:07,760
because right now is ios 15 is available
7321
06:46:06,080 --> 06:46:10,638
so you could just say you're supporting
7322
06:46:07,759 --> 06:46:12,239
15 14 and 13. so i'm going to do that
7323
06:46:10,637 --> 06:46:14,477
and then i'm going to run pod install
7324
06:46:15,040 --> 06:46:19,680
and this time i can see that things are
7325
06:46:17,520 --> 06:46:22,240
going a lot better and it's installing
7326
06:46:19,680 --> 06:46:23,439
all our dependencies without a problem
7327
06:46:23,439 --> 06:46:27,680
um what you need to know now what i did
7328
06:46:25,840 --> 06:46:29,200
here was something that you probably
7329
06:46:27,680 --> 06:46:31,439
would need to do if you're comfortable
7330
06:46:29,200 --> 06:46:33,520
with ios development so you need to fix
7331
06:46:33,520 --> 06:46:37,040
but before i explain what i actually did
7332
06:46:35,599 --> 06:46:38,000
you need to know about something called
7333
06:46:38,000 --> 06:46:42,000
and i explained this in the previous
7334
06:46:39,840 --> 06:46:43,439
chapters about when we started in
7335
06:46:42,000 --> 06:46:45,759
chapter 8 when we talked about
7336
06:46:47,040 --> 06:46:53,280
can in can create ios applications ios
7337
06:46:50,080 --> 06:46:56,400
applications dependencies are
7338
06:46:53,279 --> 06:46:59,039
basically using uh cocoa pods
7339
06:46:56,400 --> 06:47:01,680
so cocoapods is a dependency management
7340
06:47:04,637 --> 06:47:08,399
you need to in order to be able to do
7341
06:47:06,637 --> 06:47:10,557
the trick that i just did you need to
7342
06:47:08,400 --> 06:47:12,159
install cocoapods and there is a good
7343
06:47:10,558 --> 06:47:17,200
website for that i mean you can i'll
7344
06:47:12,159 --> 06:47:19,279
bring up my and i say install cocoapods
7345
06:47:17,200 --> 06:47:21,280
and then i go here and you just say
7346
06:47:19,279 --> 06:47:23,520
cocoapods and then there is a command
7347
06:47:21,279 --> 06:47:26,878
that you need to issue in your computer
7348
06:47:23,520 --> 06:47:30,080
in order to install cocoapods okay
7349
06:47:26,878 --> 06:47:32,000
so um after you've installed cocoapods
7350
06:47:30,080 --> 06:47:32,878
then you can go into your ios project
7351
06:47:32,878 --> 06:47:37,920
ask it to reinstall your dependencies so
7352
06:47:36,000 --> 06:47:40,319
the key here though was for me to
7353
06:47:37,919 --> 06:47:42,477
uncomment this platform line in the pod
7354
06:47:40,319 --> 06:47:43,919
file where my dependencies are managed
7355
06:47:43,919 --> 06:47:50,557
now i'm supporting ios 13 at the minimum
7356
06:47:47,759 --> 06:47:53,919
all right and then i manually ask the io
7357
06:47:50,558 --> 06:47:56,240
the project to be recreated the ios
7358
06:47:53,919 --> 06:47:58,239
project to be recreated using pod
7359
06:47:59,200 --> 06:48:02,319
after you've done that your dependencies
7360
06:48:00,878 --> 06:48:04,558
are generated and then i'm going to
7361
06:48:04,558 --> 06:48:08,159
and i'm going to say oh i can say open
7362
06:48:06,319 --> 06:48:09,840
in xcode that's interesting will that
7363
06:48:08,159 --> 06:48:10,957
work i don't dare to be honest with you
7364
06:48:10,957 --> 06:48:16,159
revealing finder and then i'm going to
7365
06:48:12,718 --> 06:48:20,159
do that and open a project so
7366
06:48:16,159 --> 06:48:22,319
i'm going to go now do command
7367
06:48:20,159 --> 06:48:25,439
do i do command b maybe not let's just
7368
06:48:26,400 --> 06:48:31,360
i'm gonna then bring up xcode and press
7369
06:48:29,040 --> 06:48:32,319
run again and let's see if it can then
7370
06:48:32,319 --> 06:48:36,400
those dependencies that it couldn't find
7371
06:48:42,477 --> 06:48:46,477
and it may take some time as you can see
7372
06:48:44,558 --> 06:48:47,840
because there's lots of dependencies we
7373
06:48:47,840 --> 06:48:53,200
and all i think there were firebase off
7374
06:48:50,797 --> 06:48:55,279
we had firebase core we had cloud
7375
06:48:53,200 --> 06:48:56,958
firestore and also firebase analytics so
7376
06:48:56,957 --> 06:49:01,039
themselves can bring with them a lot of
7377
06:49:05,599 --> 06:49:08,477
as i mentioned in the previous chapter
7378
06:49:06,878 --> 06:49:09,680
in chapter eight bringing dependencies
7379
06:49:10,558 --> 06:49:13,920
butterflies and balloons in the sky it
7380
06:49:12,400 --> 06:49:16,080
is actually a serious process you need
7381
06:49:13,919 --> 06:49:17,839
to consider what's bringing in a
7382
06:49:16,080 --> 06:49:19,600
dependency means to you and your team
7383
06:49:19,599 --> 06:49:22,877
in this case we've only brought
7384
06:49:20,878 --> 06:49:25,040
dependencies that were officially done
7385
06:49:22,878 --> 06:49:26,637
by google and google is behind flutter
7386
06:49:28,159 --> 06:49:32,477
you can basically trust anything that
7387
06:49:29,919 --> 06:49:35,439
has to do with firebase at least so
7388
06:49:32,477 --> 06:49:37,840
if it's released by the google team that
7389
06:49:37,840 --> 06:49:42,477
um so we're gonna let it do its thing
7390
06:49:40,319 --> 06:49:43,360
i'm gonna just tap here and i can see
7391
06:49:43,360 --> 06:49:49,440
it's building quite a lot of files
7392
06:49:47,119 --> 06:49:50,718
if everything goes according to
7393
06:49:52,000 --> 06:49:56,558
the result is going to be that
7394
06:49:53,680 --> 06:49:58,319
application run on this phone
7395
06:49:58,319 --> 06:50:01,759
it would be very exciting actually to
7396
06:50:05,759 --> 06:50:09,119
and as i mentioned depending on the
7397
06:50:07,439 --> 06:50:10,239
computer that you're using this process
7398
06:50:14,400 --> 06:50:17,200
so if you have a powerful computer it
7399
06:50:16,000 --> 06:50:18,637
may take less time and if you have a
7400
06:50:17,200 --> 06:50:20,240
little bit less powerful computer it may
7401
06:50:21,520 --> 06:50:25,520
um now that we're waiting i should also
7402
06:50:23,520 --> 06:50:28,878
probably mention that this process of
7403
06:50:30,718 --> 06:50:34,958
once the build has been done once it
7404
06:50:33,279 --> 06:50:36,957
kind of like its artifacts will be
7405
06:50:36,957 --> 06:50:41,680
so that you don't have to rebuild the
7406
06:50:38,957 --> 06:50:42,637
entire project from the beginning okay
7407
06:50:44,558 --> 06:50:49,360
i'm gonna let it do its thing
7408
06:50:47,119 --> 06:50:51,439
and uh while we're waiting actually we
7409
06:50:49,360 --> 06:50:53,840
could talk a little bit about quicktime
7410
06:50:51,439 --> 06:50:55,599
which is a caption i brought here
7411
06:50:53,840 --> 06:50:58,400
if you're like me and you like to like
7412
06:50:55,599 --> 06:51:01,359
debug your applications on real phones
7413
06:50:58,400 --> 06:51:03,920
then you may want to see or show that
7414
06:51:05,439 --> 06:51:08,957
on your computer so for instance if
7415
06:51:07,360 --> 06:51:11,760
you're sharing your computer as a screen
7416
06:51:08,957 --> 06:51:14,319
with a co-worker and he or she wants to
7417
06:51:11,759 --> 06:51:16,000
also see your application running on
7418
06:51:14,319 --> 06:51:18,079
your phone you will need to use
7419
06:51:16,000 --> 06:51:19,840
something called a quicktime network
7420
06:51:19,840 --> 06:51:22,558
so we're going to talk about that now
7421
06:51:21,040 --> 06:51:23,360
but before we do that let me just show
7422
06:51:23,360 --> 06:51:29,920
that here is now our flutter application
7423
06:51:34,477 --> 06:51:38,239
now that we've done that all of this is
7424
06:51:36,159 --> 06:51:40,477
done you don't need xcode anymore so i'm
7425
06:51:38,240 --> 06:51:41,920
just going to press stop here and what
7426
06:51:40,477 --> 06:51:44,239
i'm going to do i'm actually going to
7427
06:51:41,919 --> 06:51:47,039
run our application from visual studio
7428
06:51:44,240 --> 06:51:49,520
code or flutter application on that
7429
06:51:47,040 --> 06:51:50,958
iphone all right so command shift b or
7430
06:51:49,520 --> 06:51:52,400
control shift b depending on which
7431
06:51:50,957 --> 06:51:53,439
platform you're using and say select
7432
06:51:53,439 --> 06:51:57,759
i'm going to choose my iphone 12 pro
7433
06:51:55,680 --> 06:51:59,760
then i'm going to go to run and say run
7434
06:51:59,759 --> 06:52:04,557
you don't have any extensions oh not
7435
06:52:01,840 --> 06:52:05,680
this file open up your main darp file
7436
06:52:05,680 --> 06:52:11,840
and then say run run without debugging
7437
06:52:08,477 --> 06:52:13,919
and you'll see it says launching
7438
06:52:11,840 --> 06:52:16,159
so this is going to actually consult
7439
06:52:13,919 --> 06:52:19,199
xcode and say that hey xcode here's the
7440
06:52:16,159 --> 06:52:21,840
flutter application run it on this
7441
06:52:25,200 --> 06:52:27,840
and to be honest with you i actually
7442
06:52:26,319 --> 06:52:29,599
didn't like this that it's using
7443
06:52:29,599 --> 06:52:34,637
it what may have happened is that when
7444
06:52:31,360 --> 06:52:36,400
we did flutter clea clean you may have
7445
06:52:36,400 --> 06:52:40,638
profiles to be honest with you
7446
06:52:38,240 --> 06:52:42,558
and this is not a good sign it could be
7447
06:52:40,637 --> 06:52:45,039
that when i did flutter clean it
7448
06:52:42,558 --> 06:52:47,040
actually messed up the profile
7449
06:52:45,040 --> 06:52:49,840
so i'm going to open up xcode again and
7450
06:52:47,040 --> 06:52:52,159
bring up our application again and let's
7451
06:52:52,159 --> 06:52:57,200
and i can see debug no it's fine it's
7452
06:52:57,200 --> 06:53:00,477
you don't have to worry about this
7453
06:52:58,957 --> 06:53:03,680
message that was printed to the screen
7454
06:53:00,477 --> 06:53:06,637
by uh by flutter so i don't think this
7455
06:53:03,680 --> 06:53:09,119
something that we need to worry about
7456
06:53:06,637 --> 06:53:11,039
so now that you've set that up then you
7457
06:53:09,119 --> 06:53:12,797
could actually run your application
7458
06:53:12,797 --> 06:53:16,399
visual studio code or android studio
7459
06:53:14,558 --> 06:53:17,680
depending on which environment you're
7460
06:53:17,680 --> 06:53:21,920
flutter applications or debugging your
7461
06:53:21,919 --> 06:53:28,557
okay now let's say that that is done um
7462
06:53:26,878 --> 06:53:30,558
then what you need to do if you want to
7463
06:53:30,558 --> 06:53:34,477
screen on your computer then you can
7464
06:53:33,119 --> 06:53:37,200
bring up something called quicktime
7465
06:53:34,477 --> 06:53:39,599
player on your macintosh and then go to
7466
06:53:37,200 --> 06:53:42,878
file and then say movie recording now
7467
06:53:39,599 --> 06:53:44,557
this is probably going to hijack my
7468
06:53:42,878 --> 06:53:46,080
no it didn't hijack anything then i'm
7469
06:53:46,080 --> 06:53:52,160
iphone 12 pro and see if it can mirror
7470
06:53:55,680 --> 06:53:59,520
is it not able to do that is it because
7471
06:53:57,520 --> 06:54:00,170
i'm recording my screen or something i'm
7472
06:54:02,637 --> 06:54:06,957
wait for this debug process to continue
7473
06:54:08,400 --> 06:54:11,840
let us do its thing first i think i'm
7474
06:54:10,400 --> 06:54:14,478
probably trying to do too many things at
7475
06:54:16,718 --> 06:54:20,637
i proxy i don't really know what i proxy
7476
06:54:24,319 --> 06:54:27,520
connecting to the vm service taking
7477
06:54:25,840 --> 06:54:28,878
longer than except expected and that
7478
06:54:27,520 --> 06:54:30,319
could be because my macintosh is
7479
06:54:28,878 --> 06:54:33,279
actually blocking something that flopper
7480
06:54:30,319 --> 06:54:34,878
needs so i'm going to go to privacy here
7481
06:54:33,279 --> 06:54:36,878
which is security and privacy and just
7482
06:54:38,240 --> 06:54:44,240
so that may help flutter then get its
7483
06:54:46,797 --> 06:54:51,680
yeah that could be it because maybe my
7484
06:54:48,637 --> 06:54:53,680
macintosh just blocked that eye proxy so
7485
06:54:51,680 --> 06:54:55,680
i'm gonna stop this process and i'm just
7486
06:54:53,680 --> 06:54:57,680
going to say run run without debugging
7487
06:54:55,680 --> 06:55:00,080
again let's see if it can do its work
7488
06:55:00,957 --> 06:55:04,079
launching and this time since it's
7489
06:55:02,400 --> 06:55:07,040
actually built the application
7490
06:55:04,080 --> 06:55:09,520
previously it shouldn't take long this
7491
06:55:07,040 --> 06:55:12,000
time before it can run the app
7492
06:55:09,520 --> 06:55:13,680
so it has already built the app once so
7493
06:55:12,000 --> 06:55:15,919
it shouldn't really take as long this
7494
06:55:16,718 --> 06:55:21,119
i can now see it says installing and
7495
06:55:21,599 --> 06:55:25,840
so let's see if we can get that to work
7496
06:55:26,000 --> 06:55:29,919
xcode build done in eight seconds
7497
06:55:28,477 --> 06:55:31,919
and to be honest with you this is taking
7498
06:55:29,919 --> 06:55:34,399
longer than i expected it shouldn't take
7499
06:55:31,919 --> 06:55:36,159
this long to run the application and i
7500
06:55:34,400 --> 06:55:37,920
can see nothing was blocked this time
7501
06:55:36,159 --> 06:55:40,797
mac os cannot verify the developer of
7502
06:55:37,919 --> 06:55:42,717
iproxy and i'm just going to say open
7503
06:55:40,797 --> 06:55:45,199
i think there is something wrong with
7504
06:55:42,718 --> 06:55:47,600
the latest versions of mac os and how it
7505
06:55:49,599 --> 06:55:53,439
flutter is using internally but
7506
06:55:51,439 --> 06:55:55,680
everything went fine at the end i could
7507
06:55:53,439 --> 06:55:58,079
actually launch the application from
7508
06:55:55,680 --> 06:56:00,000
visual studio code and now it's running
7509
06:56:00,000 --> 06:56:04,400
now i'm gonna stop this so now the app
7510
06:56:02,558 --> 06:56:06,240
as soon as i say stop the app is going
7511
06:56:04,400 --> 06:56:08,638
to stop working there what i'm going to
7512
06:56:10,000 --> 06:56:14,159
and see if we can get quicktime to
7513
06:56:14,159 --> 06:56:18,718
this iphone i'm going to unplug it
7514
06:56:16,637 --> 06:56:20,319
the phone and then plug it again
7515
06:56:20,319 --> 06:56:25,119
if it understands that it has to mirror
7516
06:56:25,119 --> 06:56:29,520
i can see my quicktime is also giving me
7517
06:56:34,159 --> 06:56:38,718
i mean this is live uh recording of this
7518
06:56:36,400 --> 06:56:40,798
session so you can see all the problems
7519
06:56:38,718 --> 06:56:41,680
a developer will have to fix and this is
7520
06:56:41,680 --> 06:56:48,558
so let's go to um and see if we can
7521
06:56:56,957 --> 06:56:59,840
and to be honest with you i mean i'm
7522
06:56:58,400 --> 06:57:01,440
actually doing this on a separate screen
7523
06:56:59,840 --> 06:57:03,279
so you don't have to see my face so much
7524
06:57:01,439 --> 06:57:04,957
but i can see that my macintosh for some
7525
06:57:03,279 --> 06:57:07,840
reason is not recognizing this telephone
7526
06:57:04,957 --> 06:57:09,520
so i cannot record it basically on this
7527
06:57:12,000 --> 06:57:16,000
but if you're doing this at home it's
7528
06:57:14,159 --> 06:57:17,680
probably gonna work for you so uh
7529
06:57:16,000 --> 06:57:19,759
connect your phone with a cable to your
7530
06:57:17,680 --> 06:57:21,520
computer and then go to quicktime player
7531
06:57:19,759 --> 06:57:23,439
and then with quicktime player say new
7532
06:57:21,520 --> 06:57:25,760
movie recording and from movie recording
7533
06:57:23,439 --> 06:57:28,717
just from the drop down choose your
7534
06:57:29,119 --> 06:57:33,840
phone and you'll be able to mirror your
7535
06:57:34,957 --> 06:57:40,477
now that that is done i mean we actually
7536
06:57:38,080 --> 06:57:43,040
got to a lot of hurdles that i hadn't
7537
06:57:40,477 --> 06:57:44,319
planned for we saw the iproxy thing
7538
06:57:47,919 --> 06:57:51,439
installation which is the dependency of
7539
06:57:49,840 --> 06:57:53,680
our project because there was no minimum
7540
06:57:51,439 --> 06:57:56,159
version set up for our flutter project
7541
06:57:53,680 --> 06:57:58,477
we fixed that we saw a problem with the
7542
06:57:58,477 --> 06:58:02,718
automatically because xcode had created
7543
06:58:00,637 --> 06:58:03,599
the certificate automatically we fixed
7544
06:58:06,477 --> 06:58:11,360
for instance now go and filter these out
7545
06:58:08,797 --> 06:58:13,199
from the video and kind of like when i
7546
06:58:11,360 --> 06:58:15,920
actually output the final course for you
7547
06:58:13,200 --> 06:58:16,718
then everything will just work perfectly
7548
06:58:16,718 --> 06:58:19,840
you don't have to see any of that
7549
06:58:19,840 --> 06:58:22,797
but i don't want to do that to be honest
7550
06:58:21,279 --> 06:58:24,797
with you because i think it's so
7551
06:58:26,400 --> 06:58:30,558
you will get as you develop your
7552
06:58:28,957 --> 06:58:32,717
thoughts or applications it is important
7553
06:58:30,558 --> 06:58:34,878
i don't want to polish this um i don't
7554
06:58:32,718 --> 06:58:36,240
want to polish this uh course so much
7555
06:58:34,878 --> 06:58:37,520
that you think everything is perfect
7556
06:58:36,240 --> 06:58:39,120
from the absolute beginning and if
7557
06:58:37,520 --> 06:58:40,637
you're and if you're making mistakes
7558
06:58:39,119 --> 06:58:42,477
then something is wrong with the way
7559
06:58:40,637 --> 06:58:44,557
you're developing things but these
7560
06:58:42,477 --> 06:58:46,399
things happen you need to understand why
7561
06:58:44,558 --> 06:58:48,558
they happen then you need to learn how
7562
06:58:50,878 --> 06:58:54,797
i think then we're good to go uh for ios
7563
06:58:54,797 --> 06:58:58,797
everything we needed to explain
7564
06:58:56,637 --> 06:59:00,477
uh everything worked except for the
7565
06:58:58,797 --> 06:59:01,599
quicktime thing and i think that is
7566
06:59:01,599 --> 06:59:05,919
um i'm actually i have a lot of software
7567
06:59:03,840 --> 06:59:08,000
open here i am playing stop playing in
7568
06:59:05,919 --> 06:59:09,759
stuff recording stuff so it may be
7569
06:59:08,000 --> 06:59:11,680
because of that is a little bit confused
7570
06:59:09,759 --> 06:59:12,957
and who knows maybe my computer needs to
7571
06:59:14,000 --> 06:59:17,759
so with that said let's prepare
7572
06:59:15,520 --> 06:59:18,558
ourselves for the next chapter and that
7573
06:59:18,558 --> 06:59:23,520
to do the exact same thing with it for
7574
06:59:20,718 --> 06:59:25,360
ios hopefully with less explanation now
7575
06:59:23,520 --> 06:59:27,439
that we've gone through the basics for
7576
06:59:27,439 --> 06:59:31,599
uh grab a cup of tea cup coffee whatever
7577
06:59:30,080 --> 06:59:32,798
you want and i'll see you in the next
7578
06:59:32,797 --> 06:59:36,079
hello and welcome to chapter 10 of this
7579
06:59:36,080 --> 06:59:39,600
in this chapter we're going to look at
7580
06:59:40,477 --> 06:59:44,319
or any android device that you may have
7581
06:59:42,319 --> 06:59:46,637
at hand in order for us to be able to
7582
06:59:44,319 --> 06:59:49,439
run our flutter code on it and now in
7583
06:59:46,637 --> 06:59:50,797
chapter nine we looked at how we can run
7584
06:59:50,797 --> 06:59:56,717
and basically run our flash application
7585
06:59:53,200 --> 06:59:58,878
on an ios device and we set up the
7586
06:59:56,718 --> 07:00:01,040
provisioning profiles we set up the
7587
07:00:07,919 --> 07:00:12,637
i mean there is a lot of work to do and
7588
07:00:10,558 --> 07:00:14,798
you know that chapter took about an hour
7589
07:00:16,400 --> 07:00:20,240
the android side things are a lot easier
7590
07:00:21,520 --> 07:00:25,760
i thought in this chapter we're gonna
7591
07:00:25,759 --> 07:00:32,079
have an android phone for instance in my
7592
07:00:27,520 --> 07:00:35,840
case here i have a oneplus pro 7 pro
7593
07:00:32,080 --> 07:00:38,080
that is connected with a usb cable to my
7594
07:00:35,840 --> 07:00:40,477
computer so there's nothing special
7595
07:00:38,080 --> 07:00:41,680
about it it's just an android phone and
7596
07:00:41,680 --> 07:00:46,718
i prefer to actually as i mentioned in
7597
07:00:44,477 --> 07:00:48,637
the previous chapter in chapter 9 that
7598
07:00:46,718 --> 07:00:51,280
i prefer personally when i'm developing
7599
07:00:51,279 --> 07:00:56,717
developing floss applications to run my
7600
07:00:53,919 --> 07:00:59,439
applications on a real phone or a real
7601
07:00:59,439 --> 07:01:02,957
um you may not know this if you're
7602
07:01:01,040 --> 07:01:04,638
coming from like a design background or
7603
07:01:02,957 --> 07:01:08,797
a background that's not really related
7604
07:01:04,637 --> 07:01:10,079
to mobile development in previously but
7605
07:01:10,080 --> 07:01:14,638
if you're developing applications for
7606
07:01:12,240 --> 07:01:16,718
only ios then you have something called
7607
07:01:16,718 --> 07:01:22,080
um an io simulator is a program that
7608
07:01:20,000 --> 07:01:25,200
runs on your macintosh that comes with
7609
07:01:22,080 --> 07:01:28,160
xcode and the ios sdk that allows you to
7610
07:01:25,200 --> 07:01:29,920
simulate how ios internally works and it
7611
07:01:28,159 --> 07:01:33,840
allows you to install your applications
7612
07:01:29,919 --> 07:01:37,519
from xcode directly or from from flutter
7613
07:01:33,840 --> 07:01:39,200
directly into the simulator and simulate
7614
07:01:37,520 --> 07:01:42,319
basically how your application will be
7615
07:01:39,200 --> 07:01:44,240
perceived by your actual users
7616
07:01:42,319 --> 07:01:47,279
if you're developing applications for
7617
07:01:44,240 --> 07:01:50,558
android then there is something called
7618
07:01:47,279 --> 07:01:52,637
an android emulator now an emulator is
7619
07:01:50,558 --> 07:01:55,520
quite different from a simulator in that
7620
07:01:52,637 --> 07:01:57,840
an emulator as its name indicates it
7621
07:01:55,520 --> 07:01:59,600
actually tries to emulate everything
7622
07:01:57,840 --> 07:02:02,400
about the operating system and the
7623
07:01:59,599 --> 07:02:05,439
device so for instance an android
7624
07:02:02,400 --> 07:02:07,920
emulator for an old device for instance
7625
07:02:05,439 --> 07:02:09,840
that you may get a hold of a device
7626
07:02:12,558 --> 07:02:17,280
than an android emulator for a very
7627
07:02:17,279 --> 07:02:21,119
but had you done the same thing for an
7628
07:02:18,797 --> 07:02:23,279
ios simulator and simulated an ios
7629
07:02:25,200 --> 07:02:32,240
at today's like at your computer's uh
7630
07:02:29,279 --> 07:02:34,557
speed because it is simulating ios it's
7631
07:02:32,240 --> 07:02:36,718
not actually emulating it the way it
7632
07:02:36,718 --> 07:02:40,080
when it comes to android you have this
7633
07:02:38,240 --> 07:02:42,798
possibility to run your application on
7634
07:02:40,080 --> 07:02:45,680
an emulator which is a lot closer to the
7635
07:02:42,797 --> 07:02:47,039
actual device that your user will be
7636
07:02:47,040 --> 07:02:52,558
so it is not the exact perfect copy in
7637
07:02:50,000 --> 07:02:55,360
most cases so it's not gonna be like
7638
07:02:52,558 --> 07:02:58,718
working exactly as a real physical phone
7639
07:02:55,360 --> 07:03:01,440
but it's a lot closer to the actual
7640
07:02:58,718 --> 07:03:04,440
physical device that an ios simulator is
7641
07:03:04,558 --> 07:03:10,477
given that background i still prefer to
7642
07:03:07,520 --> 07:03:11,360
run my flutter applications on a real
7643
07:03:13,840 --> 07:03:17,439
if you're interested in that if you're
7644
07:03:15,599 --> 07:03:20,159
if you have an android phone and you
7645
07:03:17,439 --> 07:03:22,477
want to for instance deploy your flutter
7646
07:03:20,159 --> 07:03:25,040
application on an android phone and test
7647
07:03:22,477 --> 07:03:27,279
it while you're programming it then this
7648
07:03:27,279 --> 07:03:31,957
now i also have to say that um
7649
07:03:35,680 --> 07:03:40,240
you don't have to do this but for the
7650
07:03:37,840 --> 07:03:42,718
entire entirety of this course i'm
7651
07:03:42,718 --> 07:03:47,440
as we're developing the application the
7652
07:03:44,957 --> 07:03:48,239
notes application i'm personally going
7653
07:03:53,520 --> 07:03:57,279
so as we basically do hot reloads and
7654
07:03:55,680 --> 07:03:58,477
then we write some code and we want to
7655
07:03:57,279 --> 07:03:59,840
test it i'm not going to show any
7656
07:03:58,477 --> 07:04:01,360
emulator i'm not going to show any
7657
07:03:59,840 --> 07:04:03,200
simulator i'm actually going to show my
7658
07:04:03,200 --> 07:04:06,477
now i'm not going to show it with just
7659
07:04:06,477 --> 07:04:09,919
i'm not going to install the application
7660
07:04:08,159 --> 07:04:11,360
here and just show you like this because
7661
07:04:09,919 --> 07:04:14,239
this is not going to work it's not a
7662
07:04:11,360 --> 07:04:16,159
good way of showing things to uh to
7663
07:04:14,240 --> 07:04:18,638
someone watching this course so what
7664
07:04:20,159 --> 07:04:26,477
task in this uh chapter we are going to
7665
07:04:24,000 --> 07:04:29,119
install an application on our um
7666
07:04:39,680 --> 07:04:45,439
many thousand stars and it is
7667
07:04:42,718 --> 07:04:46,558
not like a dependency it's not something
7668
07:04:45,439 --> 07:04:48,000
that you're going to build into your
7669
07:04:46,558 --> 07:04:49,440
flutter application but it's actually
7670
07:04:48,000 --> 07:04:52,000
utility you're going to install on your
7671
07:04:52,000 --> 07:04:57,680
your computer will will then be able to
7672
07:04:57,680 --> 07:05:02,718
phone or your android tablet on your
7673
07:05:02,718 --> 07:05:06,637
and this scr cpy is absolutely beautiful
7674
07:05:05,040 --> 07:05:08,638
it's one of my absolute favorite
7675
07:05:06,637 --> 07:05:10,159
utilities to have when doing mobile
7676
07:05:10,159 --> 07:05:13,520
and the reason behind that is that
7677
07:05:14,797 --> 07:05:18,637
solution that i showed in the previous
7678
07:05:16,400 --> 07:05:21,600
chapter which is quicktime quicktime
7679
07:05:18,637 --> 07:05:24,159
player where you mirror your ios
7680
07:05:21,599 --> 07:05:26,877
telephone on your computer but you
7681
07:05:24,159 --> 07:05:28,477
cannot interact with that mirrored image
7682
07:05:26,878 --> 07:05:30,159
you still have to bring up your
7683
07:05:28,477 --> 07:05:31,759
telephone and interact with the
7684
07:05:30,159 --> 07:05:33,840
telephone and see the interactions
7685
07:05:31,759 --> 07:05:36,797
either on the phone itself or on your
7686
07:05:33,840 --> 07:05:39,279
screen unlike that scrcpy allows you to
7687
07:05:36,797 --> 07:05:41,119
actually interact with your phone or
7688
07:05:39,279 --> 07:05:42,079
your tablet or your android phone or
7689
07:05:42,080 --> 07:05:46,240
from your computer screen so you can
7690
07:05:44,319 --> 07:05:48,558
actually take your mouse and then go to
7691
07:05:46,240 --> 07:05:50,878
that screen and tap on a button and it
7692
07:05:48,558 --> 07:05:52,958
will actually tap on that button on your
7693
07:05:52,957 --> 07:05:57,599
it is magical it's beautiful it's open
7694
07:05:55,200 --> 07:05:59,520
source and free so if you have an
7695
07:05:57,599 --> 07:06:00,957
android tablet or an android phone and
7696
07:05:59,520 --> 07:06:03,840
you're following along with this course
7697
07:06:00,957 --> 07:06:06,239
i highly recommend that we install
7698
07:06:03,840 --> 07:06:07,360
scrcpy together actually as we're going
7699
07:06:10,080 --> 07:06:14,000
i'm just going to take in my notes here
7700
07:06:16,957 --> 07:06:25,119
installing scrcpy we need to
7701
07:06:28,957 --> 07:06:34,079
i believe it actually stands for android
7702
07:06:31,680 --> 07:06:36,400
debugger or something let's see what
7703
07:06:39,680 --> 07:06:45,760
a safari window here as you can see adb
7704
07:06:42,400 --> 07:06:47,760
stands for android debug bridge and adb
7705
07:06:45,759 --> 07:06:50,079
is a great tool if you want to for
7706
07:06:47,759 --> 07:06:52,239
instance be able to talk with your
7707
07:06:50,080 --> 07:06:53,920
android telephone all from the command
7708
07:06:52,240 --> 07:06:56,878
line so you can send it a message and
7709
07:06:56,878 --> 07:07:02,797
hey do this or click here or yet
7710
07:07:00,637 --> 07:07:04,797
close this application whatever so you
7711
07:07:02,797 --> 07:07:06,239
basically send commands to your android
7712
07:07:04,797 --> 07:07:08,717
telephone or tablet through your
7713
07:07:06,240 --> 07:07:09,520
terminal it's um it's fantastic
7714
07:07:11,680 --> 07:07:16,637
adb i mean having adb install your
7715
07:07:14,477 --> 07:07:18,239
computer then you can actually install
7716
07:07:18,240 --> 07:07:23,840
which uses adb in order to talk to your
7717
07:07:21,200 --> 07:07:26,637
telephone and send commands to it and
7718
07:07:23,840 --> 07:07:30,319
receive images from it etc so
7719
07:07:26,637 --> 07:07:32,557
with that said we need to install adb so
7720
07:07:30,319 --> 07:07:35,040
i'm going to close this turn window here
7721
07:07:32,558 --> 07:07:38,240
and i'm going to bring up terminal
7722
07:07:35,040 --> 07:07:39,920
i'm going to increase the size of this
7723
07:07:38,240 --> 07:07:41,360
terminal window so you see what i'm
7724
07:07:41,360 --> 07:07:46,240
so in here then i'm going to say
7725
07:07:46,240 --> 07:07:51,600
cask android platform tools okay
7726
07:07:51,759 --> 07:07:58,239
so this will then allow you to
7727
07:07:58,240 --> 07:08:03,600
using android platform tools then um you
7728
07:08:01,119 --> 07:08:05,360
will be able to grab adb from that so
7729
07:08:05,360 --> 07:08:08,637
installation actually includes adb all
7730
07:08:09,599 --> 07:08:13,439
um i can see that i mean for me you can
7731
07:08:11,680 --> 07:08:15,599
see that i've already installed android
7732
07:08:13,439 --> 07:08:17,119
platform tools so i get this message
7733
07:08:15,599 --> 07:08:18,239
here saying that well you've already
7734
07:08:18,240 --> 07:08:22,958
but if you have not installed android
7735
07:08:20,477 --> 07:08:24,477
platform tools before you will running
7736
07:08:22,957 --> 07:08:26,637
this command will actually install it
7737
07:08:24,477 --> 07:08:28,399
for you now i don't want to reinstall it
7738
07:08:26,637 --> 07:08:30,477
so i'm just not going to do this
7739
07:08:28,400 --> 07:08:33,520
suggested command here but just know
7740
07:08:30,477 --> 07:08:36,878
that before you install scr cpy you will
7741
07:08:33,520 --> 07:08:41,840
need to get adb up and running okay
7742
07:08:36,878 --> 07:08:41,840
and that comes in android platform tools
7743
07:08:47,279 --> 07:08:52,000
let's let me just go into my notes and
7744
07:08:49,360 --> 07:08:55,600
say that we've talked about adb so after
7745
07:08:52,000 --> 07:08:59,040
you've done adb we need to go and i'm
7746
07:08:55,599 --> 07:09:00,957
going to bring up safari again
7747
07:08:59,040 --> 07:09:02,638
let's see if i can bring up the window
7748
07:09:00,957 --> 07:09:06,000
here so you can see what i'm doing as
7749
07:09:02,637 --> 07:09:07,520
well then i'm going to say scr cpy
7750
07:09:06,000 --> 07:09:09,840
okay and then you will see that the
7751
07:09:07,520 --> 07:09:12,159
first suggested website is on github and
7752
07:09:09,840 --> 07:09:15,840
this is exactly where you need to go
7753
07:09:12,159 --> 07:09:17,840
so go to scrcpy here and you will see
7754
07:09:15,840 --> 07:09:21,200
information about how you can actually
7755
07:09:17,840 --> 07:09:24,319
install scrcpy and it says on linux you
7756
07:09:21,200 --> 07:09:26,319
can do apt installer crcpy on windows
7757
07:09:26,319 --> 07:09:30,079
and on mac os then you can do brew
7758
07:09:34,159 --> 07:09:38,878
i've already done that so i've already
7759
07:09:36,159 --> 07:09:42,240
actually installed scrcpy so i don't
7760
07:09:38,878 --> 07:09:42,240
have to do anything special
7761
07:09:42,477 --> 07:09:46,878
and um you can see it actually tells you
7762
07:09:44,957 --> 07:09:48,399
here i'm going to increase the size of
7763
07:09:46,878 --> 07:09:49,440
this window so you can see a little bit
7764
07:09:49,439 --> 07:09:53,919
and it will tell you here that you need
7765
07:09:51,439 --> 07:09:56,159
adb accessible from your path if you
7766
07:09:53,919 --> 07:09:59,199
don't have it yet then do that command
7767
07:09:56,159 --> 07:10:00,797
that i mentioned to you okay
7768
07:10:00,797 --> 07:10:04,159
after you've done the installation on
7769
07:10:02,400 --> 07:10:06,000
your computer then you should be able to
7770
07:10:04,159 --> 07:10:07,759
bring up a terminal so i'm going to
7771
07:10:08,718 --> 07:10:14,080
as you can see here i have my android
7772
07:10:11,279 --> 07:10:16,477
telephone and it the screen looks like
7773
07:10:14,080 --> 07:10:19,840
this right now so it's just on the home
7774
07:10:27,520 --> 07:10:31,920
if this is the first time you're doing
7775
07:10:29,119 --> 07:10:34,477
this process you will probably need to
7776
07:10:31,919 --> 07:10:36,319
enable something called usb debugging on
7777
07:10:40,637 --> 07:10:44,319
what your android phone looks like or
7778
07:10:44,319 --> 07:10:48,637
the usb debugging when you plug your
7779
07:10:46,637 --> 07:10:49,520
android telephone it will kind of show
7780
07:10:52,558 --> 07:10:55,520
so i'm going to enlarge this a little
7781
07:10:55,520 --> 07:11:01,040
so this dialog will pop up on your
7782
07:10:58,957 --> 07:11:02,637
android telephone saying that oh do you
7783
07:11:01,040 --> 07:11:05,600
want to allow this computer to do
7784
07:11:02,637 --> 07:11:07,200
debugging on this um on this telephone
7785
07:11:05,599 --> 07:11:08,877
and what you need to do is just to say
7786
07:11:07,200 --> 07:11:12,080
always allow from this computer and then
7787
07:11:08,878 --> 07:11:15,840
press the ok button this is only so that
7788
07:11:12,080 --> 07:11:17,520
you will be first of all able to install
7789
07:11:19,279 --> 07:11:23,119
all from visual studio code or from
7790
07:11:20,957 --> 07:11:24,717
android studio right on your android
7791
07:11:24,718 --> 07:11:30,319
and also it will allow you to run scrcpy
7792
07:11:30,319 --> 07:11:34,637
in order in order to communicate with
7793
07:11:43,119 --> 07:11:46,797
so what we need to do is actually bring
7794
07:11:46,797 --> 07:11:50,477
in terminal i'm just going to say ser
7795
07:11:50,477 --> 07:11:53,439
and as you can see here it's going to
7796
07:11:51,919 --> 07:11:55,439
talk to my android telephone and it
7797
07:11:53,439 --> 07:11:57,599
brought up a window which i'm going to
7798
07:11:55,439 --> 07:11:59,840
slowly bring here to this screen so you
7799
07:12:00,718 --> 07:12:03,760
i'm going to leave the terminal here
7800
07:12:01,919 --> 07:12:05,439
because the terminal is actually fueling
7801
07:12:03,759 --> 07:12:07,759
this thing so if i close my terminal
7802
07:12:05,439 --> 07:12:10,557
this is also going to be closed so just
7803
07:12:07,759 --> 07:12:12,797
keep this terminal open or if you're
7804
07:12:10,558 --> 07:12:14,400
using item for instance like i'm using
7805
07:12:12,797 --> 07:12:16,399
then you can bring up a new tab and
7806
07:12:16,400 --> 07:12:20,558
command line otherwise you can just
7807
07:12:18,240 --> 07:12:23,440
close it or you can just minimize this
7808
07:12:20,558 --> 07:12:25,840
if you're if you're bothered by it so
7809
07:12:23,439 --> 07:12:26,957
as you can see now i have my android
7810
07:12:26,957 --> 07:12:30,000
mirrored on my screen i'm actually going
7811
07:12:28,718 --> 07:12:32,400
to do this so you can see it a little
7812
07:12:30,000 --> 07:12:35,200
bit better i'm going to bring it right
7813
07:12:32,400 --> 07:12:38,558
here in between so this is my actual
7814
07:12:35,200 --> 07:12:41,119
android phone so if i click here with my
7815
07:12:38,558 --> 07:12:42,638
mouse it actually interacts with my
7816
07:12:42,637 --> 07:12:47,599
i can bring up my phone here
7817
07:12:45,279 --> 07:12:49,279
so you kind of see them side by side
7818
07:12:49,279 --> 07:12:53,840
if on the scrcpy screen here i press the
7819
07:12:53,840 --> 07:12:57,439
you will see that my android screen
7820
07:13:00,000 --> 07:13:04,637
so it's really interacting with my
7821
07:13:05,360 --> 07:13:08,718
i highly suggest that you actually
7822
07:13:06,878 --> 07:13:11,200
install sdrcpy to be honest with you
7823
07:13:08,718 --> 07:13:13,040
it's a great great tool if you're into
7824
07:13:11,200 --> 07:13:15,360
mobile development or if you want to
7825
07:13:16,400 --> 07:13:21,440
and regarding what i said earlier about
7826
07:13:21,439 --> 07:13:26,717
you will get really really far with the
7827
07:13:23,840 --> 07:13:28,637
ios simulator and the android emulator
7828
07:13:28,637 --> 07:13:31,360
i personally should suggest that you
7829
07:13:31,360 --> 07:13:35,680
and invest some money into getting
7830
07:13:33,520 --> 07:13:37,279
devices for for yourself they don't have
7831
07:13:39,040 --> 07:13:42,798
one android telephone and one ios
7832
07:13:42,797 --> 07:13:46,557
or even tablets will do but preferably
7833
07:13:45,119 --> 07:13:48,079
telephones you don't even have to have
7834
07:13:46,558 --> 07:13:51,440
sim cards in them just just the
7835
07:13:48,080 --> 07:13:52,718
telephone device physically itself so
7836
07:13:53,520 --> 07:13:57,360
i mean if you're getting into mobile
7837
07:13:55,360 --> 07:13:59,760
development you will kind of after many
7838
07:13:57,360 --> 07:14:01,760
years kind of have a lot of telephones
7839
07:13:59,759 --> 07:14:03,840
anyways because you will get like this
7840
07:14:01,759 --> 07:14:05,279
year's new telephone and then two years
7841
07:14:03,840 --> 07:14:06,878
later you get another telephone so you
7842
07:14:07,759 --> 07:14:12,717
and you could use those all telephones
7843
07:14:09,759 --> 07:14:14,477
then as test telephones as we call them
7844
07:14:15,279 --> 07:14:20,878
that's that part now what we need to do
7845
07:14:17,840 --> 07:14:22,878
next is to now that our android phone is
7846
07:14:22,878 --> 07:14:26,958
what we need to do is to go to visual
7847
07:14:24,718 --> 07:14:30,637
studio code into our project
7848
07:14:30,637 --> 07:14:35,200
so choose our let me see bring up visual
7849
07:14:33,119 --> 07:14:36,159
studio code here if i can visual studio
7850
07:14:36,159 --> 07:14:40,079
this is i have so many screens here so
7851
07:14:38,637 --> 07:14:41,200
it's a little bit of a challenge to
7852
07:14:41,200 --> 07:14:45,680
line them up all here so what i'll do
7853
07:14:43,759 --> 07:14:48,159
here is i will get rid of the side
7854
07:14:45,680 --> 07:14:50,878
window all right and i will bring up
7855
07:14:48,159 --> 07:14:53,520
then scr cpy on the right hand side and
7856
07:14:50,878 --> 07:14:54,718
then just resize the screen a little bit
7857
07:14:54,718 --> 07:14:59,040
and then like this so i have you this is
7858
07:14:57,119 --> 07:15:01,439
like my usual setup so i have visual
7859
07:14:59,040 --> 07:15:03,600
studio code here on the left and then i
7860
07:15:01,439 --> 07:15:06,159
have my android phone mirrored on the
7861
07:15:06,159 --> 07:15:09,919
so what then you'll need to do after
7862
07:15:08,000 --> 07:15:11,520
you've done all of this work is in
7863
07:15:09,919 --> 07:15:14,957
visual studio code just say command
7864
07:15:11,520 --> 07:15:17,119
shift p on mac or ctrl shift b on linux
7865
07:15:17,200 --> 07:15:20,400
windows and if you're using android
7866
07:15:18,797 --> 07:15:22,477
studio i don't to honestly know the
7867
07:15:20,400 --> 07:15:24,319
commands there to select a device in
7868
07:15:22,477 --> 07:15:26,637
flutter they may be like a drop down or
7869
07:15:26,637 --> 07:15:29,599
so here i'm just going to say command
7870
07:15:28,319 --> 07:15:31,599
shift b and i'm going to say flutter
7871
07:15:31,599 --> 07:15:34,637
and in select device i'm actually going
7872
07:15:34,637 --> 07:15:38,239
android telephone which is the one being
7873
07:15:38,240 --> 07:15:42,159
choose an android phone and then i'm
7874
07:15:39,840 --> 07:15:44,477
going to say run run without debugging
7875
07:15:49,279 --> 07:15:56,399
that you can see here it says launching
7876
07:15:51,919 --> 07:15:58,637
dart on gm 19 blah blah in debug mode so
7877
07:15:56,400 --> 07:16:00,240
since it's an android application now
7878
07:15:58,637 --> 07:16:02,000
all of a sudden we just switch from ios
7879
07:16:00,240 --> 07:16:03,520
to android previously our application
7880
07:16:02,000 --> 07:16:05,360
was being like our source code was being
7881
07:16:05,360 --> 07:16:09,920
and now since we're trying to deploy to
7882
07:16:07,840 --> 07:16:11,680
an android telephone it's the gradle
7883
07:16:09,919 --> 07:16:14,239
it's gradle basically that's taking care
7884
07:16:11,680 --> 07:16:15,520
of the build process so if you're an
7885
07:16:14,240 --> 07:16:17,520
android developer then you know that
7886
07:16:15,520 --> 07:16:18,558
basically gradle zero build system and
7887
07:16:20,477 --> 07:16:24,239
it is basically doing the build in the
7888
07:16:24,240 --> 07:16:29,360
so i'm actually so glad that we got this
7889
07:16:26,637 --> 07:16:31,119
error right now so i'm gonna take here
7890
07:16:29,360 --> 07:16:33,360
in my notes that we've talked about in
7891
07:16:31,119 --> 07:16:36,000
vs code select android and then show
7892
07:16:33,360 --> 07:16:37,200
android phone mirroring working okay
7893
07:16:37,200 --> 07:16:42,637
you see here we got some errors
7894
07:16:40,477 --> 07:16:44,239
actually when we talked about in chapter
7895
07:16:42,637 --> 07:16:46,399
what chapter are we on we're on chapter
7896
07:16:44,240 --> 07:16:48,798
10. in chapter 9 when we talked about
7897
07:16:46,400 --> 07:16:50,558
running our application on ios we
7898
07:16:48,797 --> 07:16:53,520
actually got something similar
7899
07:16:50,558 --> 07:16:54,878
there was an error saying that oh your
7900
07:16:54,878 --> 07:16:59,279
dependencies firebase they need this
7901
07:16:57,200 --> 07:17:00,958
version but you're on that version and
7902
07:17:00,957 --> 07:17:04,717
and the code that actually solved it if
7903
07:17:02,797 --> 07:17:07,439
you remember we went to our pod file i
7904
07:17:04,718 --> 07:17:09,840
just put this platform here saying ios
7905
07:17:07,439 --> 07:17:12,239
13 because you see we have four
7906
07:17:09,840 --> 07:17:14,718
dependencies at the moment we have
7907
07:17:12,240 --> 07:17:16,958
firebase auth we have firebase core
7908
07:17:14,718 --> 07:17:18,798
analytics and something else which i
7909
07:17:16,957 --> 07:17:20,397
don't remember let me have a look at the
7910
07:17:20,398 --> 07:17:24,718
there were core auth cloud firestore and
7911
07:17:24,718 --> 07:17:31,040
these four dependencies they have their
7912
07:17:27,439 --> 07:17:32,957
own requirements so they say that we as
7913
07:17:31,040 --> 07:17:34,638
dependencies cannot be installed on an
7914
07:17:32,957 --> 07:17:38,717
application that for instance supports a
7915
07:17:34,637 --> 07:17:41,279
very old android os or a very old ios
7916
07:17:38,718 --> 07:17:44,958
version so these dependencies are
7917
07:17:41,279 --> 07:17:47,680
putting requirements on your project so
7918
07:17:44,957 --> 07:17:52,000
and we fixed that yes uh in the in
7919
07:17:47,680 --> 07:17:54,000
chapter nine we fixed that um by going
7920
07:17:54,000 --> 07:17:58,637
commenting out this basically removing
7921
07:17:56,159 --> 07:17:59,919
the comment from this line and changing
7922
07:17:59,919 --> 07:18:05,599
to 13. so we fix it like that for ios
7923
07:18:03,599 --> 07:18:08,000
but how do we do it for android now we
7924
07:18:05,599 --> 07:18:09,359
get a lot of great information here and
7925
07:18:08,000 --> 07:18:12,159
it says that you kind of need to find
7926
07:18:09,360 --> 07:18:15,680
this debug default config and min sdk
7927
07:18:12,159 --> 07:18:18,797
version okay so let's look for default
7928
07:18:15,680 --> 07:18:22,000
config so i'm going to copy that text
7929
07:18:18,797 --> 07:18:24,557
and i'm going to then command shift f in
7930
07:18:22,000 --> 07:18:28,240
visual studio code and search for it and
7931
07:18:24,558 --> 07:18:29,920
as you can see here we have a little um
7932
07:18:28,240 --> 07:18:31,760
flutter version name and then flutter
7933
07:18:34,477 --> 07:18:38,957
information about flutter versions like
7934
07:18:36,637 --> 07:18:39,919
if you go to our build gradle
7935
07:18:39,919 --> 07:18:44,637
there is a flutter version code to
7936
07:18:44,637 --> 07:18:49,599
and the where's the main sdk here min
7937
07:18:47,279 --> 07:18:51,840
sdk version okay so i'm going to search
7938
07:18:51,840 --> 07:18:59,040
and here i can see it is 19 here it is
7939
07:18:54,558 --> 07:19:01,120
19. and android min sdk version
7940
07:18:59,040 --> 07:19:02,319
19 so there's actually quite a lot of
7941
07:19:05,119 --> 07:19:11,520
and the error itself let's read it
7942
07:19:09,119 --> 07:19:13,360
requires a higher android sdk version
7943
07:19:11,520 --> 07:19:16,957
fix this by adding the following to the
7944
07:19:13,360 --> 07:19:20,080
file build gradle android default config
7945
07:19:20,080 --> 07:19:25,280
if we look at the default config here
7946
07:19:23,200 --> 07:19:27,200
it's talking about this thing min sdk
7947
07:19:25,279 --> 07:19:29,360
version i can see that previously this
7948
07:19:27,200 --> 07:19:31,680
used to be a number and recently it has
7949
07:19:29,360 --> 07:19:33,760
been changed to flutter min sdk version
7950
07:19:31,680 --> 07:19:36,398
so i'm going to bring up a safari window
7951
07:19:33,759 --> 07:19:39,759
and i'm going to say change flutter min
7952
07:19:36,398 --> 07:19:41,520
sdk version so let's see what people are
7953
07:19:39,759 --> 07:19:45,119
actually suggesting is there a good
7954
07:19:41,520 --> 07:19:46,878
command that allows us to do this
7955
07:19:45,119 --> 07:19:48,878
you see people are still saying that we
7956
07:19:46,878 --> 07:19:52,080
need to do it like that by changing it
7957
07:19:48,878 --> 07:19:54,398
to a specific version but i believe
7958
07:19:52,080 --> 07:19:57,120
there should be a better way of doing
7959
07:19:54,398 --> 07:19:58,558
this instead of hard-coding it um
7960
07:19:57,119 --> 07:20:00,239
with the new flutter project with the
7961
07:19:58,558 --> 07:20:01,840
flutter style you're unable to change
7962
07:20:00,240 --> 07:20:03,760
the mini sdk version and local
7963
07:20:03,759 --> 07:20:08,079
great okay so if we go to a file called
7964
07:20:06,279 --> 07:20:09,680
local.properties that's what they're
7965
07:20:10,718 --> 07:20:15,440
try to find local properties and i can
7966
07:20:17,759 --> 07:20:22,877
but there is no min sdk version
7967
07:20:22,878 --> 07:20:26,637
we probably need to just go and fix that
7968
07:20:25,040 --> 07:20:28,638
up so i'm going to copy paste and i'm
7969
07:20:26,637 --> 07:20:31,599
just going to say flutter.sdk version
7970
07:20:28,637 --> 07:20:34,159
19. okay save that file then i'm going
7971
07:20:31,599 --> 07:20:36,397
to go back to the main dart and then say
7972
07:20:34,159 --> 07:20:39,200
run without debugging let's see what
7973
07:20:41,279 --> 07:20:44,957
local properties change that we just
7974
07:20:44,957 --> 07:20:48,637
and it's still saying that it won't be
7975
07:20:48,637 --> 07:20:52,878
uh what we could do in here to be honest
7976
07:20:50,718 --> 07:20:54,637
with you is just troubleshooting so
7977
07:20:52,878 --> 07:20:56,558
let's just say go back to the root
7978
07:20:54,637 --> 07:21:00,520
folder of your application and say
7979
07:21:02,159 --> 07:21:06,319
why is it doing the xcode workspace
7980
07:21:13,119 --> 07:21:17,599
so if this works properly then it should
7981
07:21:15,759 --> 07:21:20,239
have cleaned the android code for us and
7982
07:21:17,599 --> 07:21:22,319
like put the version 19 in our build
7983
07:21:20,240 --> 07:21:24,878
gradle like this should actually resolve
7984
07:21:22,319 --> 07:21:27,279
to 19 so let's go to main dart and just
7985
07:21:24,878 --> 07:21:28,718
give it one more try if this if this
7986
07:21:27,279 --> 07:21:30,717
solution doesn't work then we
7987
07:21:28,718 --> 07:21:32,718
unfortunately have to go into our
7988
07:21:30,718 --> 07:21:34,878
build gradle file and and do what was
7989
07:21:32,718 --> 07:21:37,360
recommended and put the min sdk version
7990
07:21:34,878 --> 07:21:38,558
there as a constant value of 19 just to
7991
07:21:40,637 --> 07:21:47,360
let's have a look here at um
7992
07:21:42,957 --> 07:21:47,359
what our gradle build is gonna do
7993
07:21:48,637 --> 07:21:52,397
i don't really know what happened with
7994
07:21:53,840 --> 07:21:58,398
i it doesn't seem to really be doing
7995
07:21:55,919 --> 07:22:02,319
anything so one more try run without
7996
07:21:58,398 --> 07:22:02,319
debugging and see what happens launching
7997
07:22:02,558 --> 07:22:05,920
i'm gonna have a look at my android
7998
07:22:03,919 --> 07:22:08,717
phone here as well running gradle task
7999
07:22:10,637 --> 07:22:14,718
and for me it's not running anything at
8000
07:22:12,240 --> 07:22:17,120
the moment on this on this phone so what
8001
07:22:14,718 --> 07:22:19,040
we're gonna do is let's go to
8002
07:22:17,119 --> 07:22:20,557
i mean this solution didn't work so
8003
07:22:19,040 --> 07:22:23,440
i'm gonna remove that and i'm gonna go
8004
07:22:20,558 --> 07:22:26,159
to build gradle and put the
8005
07:22:23,439 --> 07:22:28,797
target sdk version i think that was the
8006
07:22:28,797 --> 07:22:33,199
and here we're just gonna say 19 instead
8007
07:22:33,200 --> 07:22:36,637
like that like it was actually suggested
8008
07:22:36,637 --> 07:22:40,718
um let's then go to main dart and then
8009
07:22:39,040 --> 07:22:42,558
say run without debugging one more time
8010
07:22:40,718 --> 07:22:45,119
and if this solution doesn't work i may
8011
07:22:42,558 --> 07:22:46,798
actually have to like restart the visual
8012
07:22:45,119 --> 07:22:48,637
studio code if it's kind of confused for
8013
07:22:48,637 --> 07:22:52,878
because usually when you say
8014
07:22:50,878 --> 07:22:55,920
gradle like when you start the build
8015
07:22:52,878 --> 07:22:57,680
process it actually gives you some
8016
07:22:55,919 --> 07:23:01,599
feedback it either says that something
8017
07:23:01,599 --> 07:23:05,359
it then ran successfully and in this
8018
07:23:03,919 --> 07:23:07,199
case i can see it's not running so i'm
8019
07:23:05,360 --> 07:23:08,878
just gonna say quit visual studio code
8020
07:23:08,878 --> 07:23:12,080
and then i'm gonna bring up visual
8021
07:23:10,159 --> 07:23:13,439
studio code so i have a lot of projects
8022
07:23:16,398 --> 07:23:20,558
minimize all of these things and i'm
8023
07:23:25,279 --> 07:23:29,919
to our my notes application and let's
8024
07:23:28,319 --> 07:23:31,840
give this a try one more time i'm going
8025
07:23:29,919 --> 07:23:34,557
to go to run without debugging and let's
8026
07:23:35,040 --> 07:23:39,280
oh now it's choosing iphone 13 pro in
8027
07:23:37,119 --> 07:23:40,557
debug mode so that's because i restarted
8028
07:23:39,279 --> 07:23:42,557
visual studio code and it doesn't know
8029
07:23:40,558 --> 07:23:44,477
which device to run on so i'm going to
8030
07:23:42,558 --> 07:23:46,159
say select device and then choose my
8031
07:23:49,439 --> 07:23:52,957
and hopefully crossing my fingers here
8032
07:23:56,080 --> 07:24:01,040
version number then it's going to work
8033
07:24:02,477 --> 07:24:07,599
i see so now it's com complaining about
8034
07:24:05,119 --> 07:24:09,599
multi-decks so i mean this is great
8035
07:24:07,599 --> 07:24:11,279
stuff i'm so glad that we're seeing all
8036
07:24:09,599 --> 07:24:12,957
these errors because usually we don't
8037
07:24:11,279 --> 07:24:14,797
have the possible i mean usually you see
8038
07:24:12,957 --> 07:24:17,039
in tutorials that yeah everything's
8039
07:24:14,797 --> 07:24:19,119
working fine uh he clicked there and
8040
07:24:17,040 --> 07:24:21,520
clicked there and everything worked but
8041
07:24:19,119 --> 07:24:23,599
here we're actually getting to the point
8042
07:24:21,520 --> 07:24:25,119
where you see every issue that could
8043
07:24:23,599 --> 07:24:26,797
arise and then we're gonna fix it
8044
07:24:25,119 --> 07:24:28,957
together and this is like a day in the
8045
07:24:26,797 --> 07:24:31,759
life of a software developer things go
8046
07:24:28,957 --> 07:24:33,919
wrong but then you'll have to fix it so
8047
07:24:31,759 --> 07:24:35,519
um this multi-dex is something that
8048
07:24:35,520 --> 07:24:42,477
configure and we're going to say
8049
07:24:42,477 --> 07:24:46,797
i'm going to go to safari and i'm going
8050
07:24:46,797 --> 07:24:50,957
um and then there is a solution
8051
07:24:49,200 --> 07:24:53,600
hopefully somewhere in our default
8052
07:24:50,957 --> 07:24:54,477
config you see it says multi-dex enabled
8053
07:24:57,360 --> 07:25:02,558
build gradle in app which is right here
8054
07:24:59,759 --> 07:25:04,557
you see android app build gradle in your
8055
07:25:02,558 --> 07:25:07,440
default config as it says here
8056
07:25:04,558 --> 07:25:08,878
multi-decks enabled just bring it here
8057
07:25:08,878 --> 07:25:13,520
and then go to your dependencies at the
8058
07:25:10,718 --> 07:25:16,240
bottom of this file right here and bring
8059
07:25:13,520 --> 07:25:18,398
implementation multi-decks right there
8060
07:25:16,240 --> 07:25:21,360
okay so i'm just going to paste it right
8061
07:25:18,398 --> 07:25:23,440
there go back to my main guard file here
8062
07:25:21,360 --> 07:25:24,319
and then say run run without debugging
8063
07:25:28,000 --> 07:25:31,119
and there are some warnings here that
8064
07:25:29,279 --> 07:25:33,039
are printed in red you don't have to
8065
07:25:31,119 --> 07:25:34,878
worry about them so much right now
8066
07:25:33,040 --> 07:25:37,600
there are warnings as their name
8067
07:25:34,878 --> 07:25:39,360
suggests so um you don't have to worry
8068
07:25:37,599 --> 07:25:40,840
so much to be honest with you as i
8069
07:25:40,840 --> 07:25:47,680
so there we go here is um our flutter
8070
07:25:44,477 --> 07:25:49,599
application now working and running on
8071
07:25:52,080 --> 07:25:56,638
i'm gonna bring then the phone here
8072
07:25:55,119 --> 07:25:59,439
and you can see it is showing the exact
8073
07:25:56,637 --> 07:26:00,957
same thing so if i with my mouse go over
8074
07:25:59,439 --> 07:26:03,039
you can't see that because you're
8075
07:26:04,000 --> 07:26:07,759
um and then you will see the value 3
8076
07:26:07,759 --> 07:26:12,717
here as well so that's that's great
8077
07:26:30,558 --> 07:26:34,558
oh it's because my phone is actually
8078
07:26:32,398 --> 07:26:37,120
rotated so i'm gonna rotate it back so
8079
07:26:37,680 --> 07:26:42,319
it's not rotated in the wrong
8080
07:26:39,520 --> 07:26:44,477
orientation great so we got a lot of
8081
07:26:42,319 --> 07:26:46,159
problems to be honest with you there um
8082
07:26:44,477 --> 07:26:48,000
but that's okay that's usually what
8083
07:26:46,159 --> 07:26:50,159
happens when we're working with mobile
8084
07:26:48,000 --> 07:26:52,319
development at least in the beginning
8085
07:26:50,159 --> 07:26:53,360
when you're doing the setup so i'm
8086
07:26:53,360 --> 07:26:57,920
grateful that we're getting these errors
8087
07:26:55,439 --> 07:26:59,439
so you see them so you don't just think
8088
07:26:57,919 --> 07:27:01,439
everything is going to work from the
8089
07:27:02,558 --> 07:27:06,240
introduction i haven't planned all of
8090
07:27:04,159 --> 07:27:08,240
this that these errors come up i don't
8091
07:27:06,240 --> 07:27:09,840
want things to be perfect so even though
8092
07:27:08,240 --> 07:27:12,958
that is happening but i'm still quite
8093
07:27:09,840 --> 07:27:14,878
grateful that they are happening so
8094
07:27:12,957 --> 07:27:18,557
what we need to talk about now is
8095
07:27:14,878 --> 07:27:21,840
something called screen sleeping and um
8096
07:27:18,558 --> 07:27:23,680
as you're developing your uh application
8097
07:27:21,840 --> 07:27:25,840
on your android telephone or tablet
8098
07:27:23,680 --> 07:27:28,398
you'll notice that you will run your
8099
07:27:25,840 --> 07:27:29,759
application on the phone or the tablet
8100
07:27:29,759 --> 07:27:33,519
after a short while your screen will go
8101
07:27:31,680 --> 07:27:34,398
to sleep which means the screen will be
8102
07:27:34,398 --> 07:27:38,558
and then when you try to then rerun or
8103
07:27:36,718 --> 07:27:40,159
rerun your application or re refresh
8104
07:27:38,558 --> 07:27:41,920
your application then you will get an
8105
07:27:40,159 --> 07:27:43,200
error from flutter saying that it cannot
8106
07:27:41,919 --> 07:27:45,279
deploy the application because the
8107
07:27:45,279 --> 07:27:48,637
that is quite annoying that the
8108
07:27:46,957 --> 07:27:50,557
telephone does it but it is for a good
8109
07:27:48,637 --> 07:27:52,319
reason the telephones like for security
8110
07:27:50,558 --> 07:27:53,600
purposes they have to lock the screen so
8111
07:27:52,319 --> 07:27:55,279
that if you leave it somewhere on a
8112
07:27:53,599 --> 07:27:57,840
bench or something in a park and you
8113
07:27:55,279 --> 07:27:59,039
just forget it and you go away then it
8114
07:27:57,840 --> 07:28:00,840
is locked so no one's going to get
8115
07:28:00,840 --> 07:28:05,599
data with that said what we need to do
8116
07:28:03,759 --> 07:28:07,279
is disable it while you're developing
8117
07:28:07,279 --> 07:28:10,637
what you want is a telephone that's
8118
07:28:08,878 --> 07:28:12,718
always there is available the screen
8119
07:28:10,637 --> 07:28:14,557
doesn't lock so you can always deploy a
8120
07:28:12,718 --> 07:28:16,958
newer version of our application to it
8121
07:28:16,957 --> 07:28:21,520
you don't lock it yourself manually
8122
07:28:20,000 --> 07:28:23,439
so what we're going to do is i'm going
8123
07:28:21,520 --> 07:28:26,319
to bring up the phone here so you see
8124
07:28:23,439 --> 07:28:28,840
what i'm doing i'm going to go here
8125
07:28:26,319 --> 07:28:31,360
i'm going to go to the settings
8126
07:28:32,558 --> 07:28:35,920
you will probably need to i mean in
8127
07:28:34,159 --> 07:28:38,319
order for you to actually even be able
8128
07:28:35,919 --> 07:28:39,919
to run your application and do funky
8129
07:28:38,319 --> 07:28:41,279
things with your application on your
8130
07:28:39,919 --> 07:28:43,359
telephone you need to enable something
8131
07:28:41,279 --> 07:28:46,079
called developer remote so developer
8132
07:28:43,360 --> 07:28:48,000
mode on android and on ios is a series
8133
07:28:46,080 --> 07:28:50,478
of development tools that the phone
8134
07:28:48,000 --> 07:28:52,240
provides only to developers and in order
8135
07:28:50,477 --> 07:28:54,477
to get those tools you need to perform a
8136
07:28:52,240 --> 07:28:56,398
series of actions like a monkey or
8137
07:28:54,477 --> 07:28:58,477
something on your telephone and
8138
07:28:56,398 --> 07:29:00,319
um i'm not going to provide instructions
8139
07:28:58,477 --> 07:29:01,599
exactly how to do that for all different
8140
07:29:00,319 --> 07:29:03,200
phones because depending on the
8141
07:29:01,599 --> 07:29:04,717
manufacturer of your telephone
8142
07:29:03,200 --> 07:29:07,200
especially if it's on android then
8143
07:29:07,200 --> 07:29:11,040
into life in a different way so what you
8144
07:29:09,520 --> 07:29:12,957
need to do is to find out the
8145
07:29:11,040 --> 07:29:15,200
manufacturer of your telephone and the
8146
07:29:12,957 --> 07:29:17,840
model of your telephone here is a
8147
07:29:15,200 --> 07:29:20,718
oneplus pro 7 i believe and then google
8148
07:29:17,840 --> 07:29:22,319
and say oneplus pro 7 developer options
8149
07:29:22,319 --> 07:29:25,119
then you'll get some information about
8150
07:29:23,599 --> 07:29:28,000
how to enable that i've already done
8151
07:29:25,119 --> 07:29:30,637
that so if i go to i believe it's
8152
07:29:28,000 --> 07:29:31,439
utilities or sorry i think it's system
8153
07:29:31,439 --> 07:29:35,520
you can see there then i have an option
8154
07:29:35,520 --> 07:29:39,760
so in order to disable screen sleeping
8155
07:29:38,319 --> 07:29:42,239
you have to go to developer option and
8156
07:29:42,240 --> 07:29:47,440
and that is by default disabled all
8157
07:29:50,718 --> 07:29:56,718
we've now then talked about um
8158
07:29:54,398 --> 07:29:58,958
developer tools and we've talked about
8159
07:29:56,718 --> 07:30:02,319
that you can interact with your
8160
07:29:58,957 --> 07:30:03,840
telephone uh using scrcpy so
8161
07:30:02,319 --> 07:30:06,840
to be honest with you i think i think
8162
07:30:03,840 --> 07:30:09,520
that's all you need to know for
8163
07:30:06,840 --> 07:30:12,398
um for the android setup there is not
8164
07:30:09,520 --> 07:30:14,558
much more to talk about the rest is just
8165
07:30:12,398 --> 07:30:17,600
developing our application as usual and
8166
07:30:14,558 --> 07:30:20,159
then running it on the android phone and
8167
07:30:17,599 --> 07:30:21,680
then mirroring the screen using a crcpy
8168
07:30:20,159 --> 07:30:23,759
so that's what i'm going to do for the
8169
07:30:21,680 --> 07:30:26,000
entirety of this course i'm going to
8170
07:30:23,759 --> 07:30:27,519
primarily run the application run our
8171
07:30:26,000 --> 07:30:29,680
application that we're going to develop
8172
07:30:27,520 --> 07:30:32,159
in this course on this telephone and
8173
07:30:29,680 --> 07:30:33,920
mirror the screen using scr cpy
8174
07:30:32,159 --> 07:30:36,319
but you may choose to use an ios
8175
07:30:33,919 --> 07:30:38,717
simulator or an android emulator or an
8176
07:30:36,319 --> 07:30:40,319
ios phone or a tablet whatever
8177
07:30:40,319 --> 07:30:44,079
descriptions about how to do all of
8178
07:30:42,319 --> 07:30:46,398
those things because that is a complete
8179
07:30:44,080 --> 07:30:48,558
course of its own but at least now you
8180
07:30:46,398 --> 07:30:50,878
have the tools and the necessary
8181
07:30:48,558 --> 07:30:53,520
information in order to understand how
8182
07:30:50,878 --> 07:30:55,520
you can actually deploy to an iphone and
8183
07:30:57,680 --> 07:31:02,319
with that said now we can say that we're
8184
07:30:59,919 --> 07:31:04,319
actually good to go on android
8185
07:31:02,319 --> 07:31:05,759
um and in the next chapter which is
8186
07:31:04,319 --> 07:31:08,398
chapter 11 we're going to get to some
8187
07:31:05,759 --> 07:31:10,397
juicy stuff which is uh setting up our
8188
07:31:08,398 --> 07:31:11,920
project on firebase and if you remember
8189
07:31:10,398 --> 07:31:13,920
from the introduction we're going to use
8190
07:31:17,520 --> 07:31:21,360
you know what's coming in the next
8191
07:31:18,878 --> 07:31:23,279
chapter and uh now you have the tools
8192
07:31:21,360 --> 07:31:26,718
necessary in order to get the app
8193
07:31:23,279 --> 07:31:27,599
running so with that said then let's go
8194
07:31:27,599 --> 07:31:31,680
configure our firebase project in
8195
07:31:31,680 --> 07:31:34,878
hello everyone and welcome to chapter 11
8196
07:31:34,878 --> 07:31:38,718
in this chapter we're going to talk
8197
07:31:36,477 --> 07:31:40,079
about our back end setup which is with
8198
07:31:40,080 --> 07:31:45,120
um and i'm as i as i've said it before i
8199
07:31:43,599 --> 07:31:47,039
kind of assume that you've gone through
8200
07:31:47,040 --> 07:31:50,558
course chronologically so you started
8201
07:31:49,040 --> 07:31:51,440
from the absolute beginning introduction
8202
07:31:51,439 --> 07:31:55,039
you're following along so there's lots
8203
07:31:53,439 --> 07:31:56,477
and lots of lots of information as you
8204
07:31:55,040 --> 07:31:58,840
can see it's about eight hours of
8205
07:31:56,477 --> 07:32:01,360
information before this chapter
8206
07:31:58,840 --> 07:32:02,957
so i feel like since i've explained
8207
07:32:01,360 --> 07:32:05,520
everything so thoroughly in all those
8208
07:32:02,957 --> 07:32:06,957
chapters i'm not going to go through all
8209
07:32:06,957 --> 07:32:10,637
so i will jump over stuff that i've
8210
07:32:09,119 --> 07:32:13,279
already explained so i if you haven't
8211
07:32:13,279 --> 07:32:17,840
really suggest that you at least skim
8212
07:32:15,279 --> 07:32:19,439
over them a little bit so you see
8213
07:32:19,439 --> 07:32:23,520
um now i'm looking at my notes and i can
8214
07:32:23,520 --> 07:32:27,520
that in this chapter as the caption
8215
07:32:25,680 --> 07:32:31,439
shows here we're gonna set up our back
8216
07:32:27,520 --> 07:32:33,920
end our backend is using firebase and
8217
07:32:31,439 --> 07:32:35,759
while developing this course i
8218
07:32:35,759 --> 07:32:40,477
a like as a part of this course have a
8219
07:32:38,240 --> 07:32:42,240
custom backend as well that we do with
8220
07:32:40,477 --> 07:32:44,957
django i personally do django
8221
07:32:42,240 --> 07:32:47,520
development uh for back-end and websites
8222
07:32:44,957 --> 07:32:49,599
like rest apis and also for
8223
07:32:49,599 --> 07:32:54,239
but to be honest with you if i then go
8224
07:32:51,599 --> 07:32:56,079
and create a simple back-end with django
8225
07:32:54,240 --> 07:32:57,920
and then show you how to integrate with
8226
07:32:57,919 --> 07:33:01,839
it really has nothing to do with flutter
8227
07:32:59,919 --> 07:33:04,557
like the backend part has nothing to do
8228
07:33:05,759 --> 07:33:10,557
issue in the beginning of this course i
8229
07:33:07,520 --> 07:33:12,797
was faced with a challenge of do i go
8230
07:33:10,558 --> 07:33:13,520
into the rabbit hole of creating custom
8231
07:33:15,119 --> 07:33:18,079
and walk you through also creating a
8232
07:33:16,637 --> 07:33:21,039
custom package which has nothing to do
8233
07:33:18,080 --> 07:33:23,280
with flutter and flutter is the reason
8234
07:33:21,040 --> 07:33:25,120
you were watching this course so i
8235
07:33:23,279 --> 07:33:29,520
was faced with that challenge of whether
8236
07:33:25,119 --> 07:33:31,599
i should do that or just use uh firebase
8237
07:33:29,520 --> 07:33:34,240
and i choose and i chose firebase simply
8238
07:33:31,599 --> 07:33:35,919
because it is a product by google it is
8239
07:33:34,240 --> 07:33:37,600
kind of like serverless so it is a
8240
07:33:35,919 --> 07:33:39,599
server without you actually having to
8241
07:33:39,599 --> 07:33:44,877
so i picked firebase for its simplicity
8242
07:33:42,558 --> 07:33:48,080
so that we can get the backend working
8243
07:33:44,878 --> 07:33:49,680
up and running without so much work and
8244
07:33:48,080 --> 07:33:51,440
i hope that you understand that that is
8245
07:33:49,680 --> 07:33:54,000
the reason that we're not doing a custom
8246
07:33:51,439 --> 07:33:55,039
back-end but firebase is a very reliable
8247
07:33:55,040 --> 07:34:00,558
back-end created by google and it has
8248
07:33:57,759 --> 07:34:01,599
all google's financial backing for
8249
07:34:01,599 --> 07:34:05,680
developments and for support so you
8250
07:34:04,080 --> 07:34:07,280
don't have to worry if you're picking
8251
07:34:05,680 --> 07:34:09,520
firebase and if you're thinking oh is it
8252
07:34:07,279 --> 07:34:11,840
going to continue being supported
8253
07:34:09,520 --> 07:34:13,840
the quick answer is yes it is going to
8254
07:34:11,840 --> 07:34:16,000
be supported it is so big everyone's
8255
07:34:13,840 --> 07:34:18,240
using it and it's too big even to fail i
8256
07:34:16,000 --> 07:34:19,200
would say right now at least for
8257
07:34:19,200 --> 07:34:24,240
uh upcoming uh next few years i would
8258
07:34:25,759 --> 07:34:29,439
future for 10 20 years in the future but
8259
07:34:28,159 --> 07:34:31,840
for now you don't have to worry about
8260
07:34:33,520 --> 07:34:36,878
so that's what we are going to do in
8261
07:34:35,919 --> 07:34:39,279
this chapter i'm just going to take it
8262
07:34:39,279 --> 07:34:45,520
now previously when uh flutter came out
8263
07:34:42,718 --> 07:34:47,600
like in year 2020 or even the beginning
8264
07:34:50,000 --> 07:34:53,119
firebase you have to do a lot of custom
8265
07:34:55,040 --> 07:35:00,080
in the recent versions of flutter
8266
07:35:00,080 --> 07:35:05,920
a command that you can issue from your
8267
07:35:01,759 --> 07:35:08,079
terminal it is called flutter fire cli
8268
07:35:08,080 --> 07:35:12,718
is amazing because like the work that
8269
07:35:10,878 --> 07:35:14,637
you have to previously do manually a lot
8270
07:35:12,718 --> 07:35:17,760
of custom work dragging files and p
8271
07:35:14,637 --> 07:35:21,279
lists and jsons configurations app ids
8272
07:35:21,279 --> 07:35:25,039
undertaking that a lot of developers
8273
07:35:23,040 --> 07:35:28,319
would make a lot of mistakes during that
8274
07:35:25,040 --> 07:35:29,280
process and it was just not good so
8275
07:35:29,279 --> 07:35:33,439
there is now a command that you can
8276
07:35:31,360 --> 07:35:35,279
issue from from your terminal which
8277
07:35:33,439 --> 07:35:37,359
allows you to do all that custom work
8278
07:35:35,279 --> 07:35:39,599
but it does it for you so you don't have
8279
07:35:39,599 --> 07:35:43,359
as i provided here there is a link i'm
8280
07:35:43,360 --> 07:35:48,240
if i can somewhere let's see if i can
8281
07:35:50,240 --> 07:35:55,200
wrong screen i'll bring that screen here
8282
07:35:55,200 --> 07:36:01,520
enlarge that screen and also enlarge the
8283
07:36:01,520 --> 07:36:04,080
so you can see it says fluffifier
8284
07:36:04,080 --> 07:36:07,520
and it says get to know firebase for
8285
07:36:07,520 --> 07:36:11,119
we recommend starting with the get to
8286
07:36:09,279 --> 07:36:12,797
know firebase for flutter code lab and
8287
07:36:11,119 --> 07:36:14,477
video okay so there's a video here if
8288
07:36:14,477 --> 07:36:18,159
and uh and it says okay if you're
8289
07:36:16,558 --> 07:36:20,558
migrating your existing project then
8290
07:36:18,159 --> 07:36:22,718
look at the migration guide migrating if
8291
07:36:20,558 --> 07:36:23,840
you're not familiar with that term uh if
8292
07:36:22,718 --> 07:36:25,520
you're not coming from a software
8293
07:36:23,840 --> 07:36:27,360
engineer background migrating economy so
8294
07:36:25,520 --> 07:36:28,797
you have an existing thing and you want
8295
07:36:30,957 --> 07:36:35,439
and put in new stuff in it so you kind
8296
07:36:33,520 --> 07:36:37,439
of migrate your information from the old
8297
07:36:37,439 --> 07:36:41,199
but in this case we don't have to worry
8298
07:36:38,637 --> 07:36:43,360
about that because we're we've created a
8299
07:36:41,200 --> 07:36:45,200
brand new project so there's no existing
8300
07:36:43,360 --> 07:36:47,760
firebase installation in our application
8301
07:36:45,200 --> 07:36:49,680
that we have to worry about okay
8302
07:36:47,759 --> 07:36:53,039
there's a lot of information here you
8303
07:36:49,680 --> 07:36:55,200
can see it says using the cli etc etc
8304
07:36:53,040 --> 07:36:56,638
and that is actually what we're going to
8305
07:36:56,637 --> 07:37:02,000
we are going to have a look at how we
8306
07:36:59,119 --> 07:37:03,840
can install the flutter fire cli
8307
07:37:02,000 --> 07:37:05,919
and you can see here it says you should
8308
07:37:03,840 --> 07:37:07,759
execute the dart pop global activate
8309
07:37:07,759 --> 07:37:12,000
and then you issue flutter fire
8310
07:37:09,520 --> 07:37:14,637
flussifier config so let's start by
8311
07:37:12,000 --> 07:37:16,878
copying this code from here copy it and
8312
07:37:14,637 --> 07:37:18,878
i'm going to bring up my terminal
8313
07:37:16,878 --> 07:37:20,398
and i'm going to increase the size of my
8314
07:37:18,878 --> 07:37:23,360
terminal so you actually see what is
8315
07:37:20,398 --> 07:37:26,159
happening here okay so i'm gonna paste
8316
07:37:23,360 --> 07:37:27,840
that command in and i'm gonna let it do
8317
07:37:27,840 --> 07:37:31,439
i've already done this installation
8318
07:37:29,439 --> 07:37:32,877
before so for me it may actually go a
8319
07:37:31,439 --> 07:37:34,397
little bit smoother or a little bit
8320
07:37:32,878 --> 07:37:36,080
faster but for you it may take a little
8321
07:37:34,398 --> 07:37:38,319
bit longer depending on whether you've
8322
07:37:36,080 --> 07:37:39,120
already installed flat of rsli before or
8323
07:37:39,119 --> 07:37:43,680
so now that that is installed the next
8324
07:37:41,279 --> 07:37:45,919
thing you will have to do is you will
8325
07:37:43,680 --> 07:37:47,599
actually need to make sure i mean it's
8326
07:37:45,919 --> 07:37:48,797
not provided in the documentation but
8327
07:37:47,599 --> 07:37:50,637
it's something that i'm providing for
8328
07:37:48,797 --> 07:37:53,119
you because i know that i've personally
8329
07:37:55,680 --> 07:38:01,520
this flutter fire cli it will give you
8330
07:37:59,599 --> 07:38:04,477
this command as you can see here flutter
8331
07:38:01,520 --> 07:38:07,200
fire okay and if i in my terminal say
8332
07:38:07,200 --> 07:38:11,360
you can see that flutter fire is
8333
07:38:08,957 --> 07:38:14,159
installed in this folder so it's under
8334
07:38:11,360 --> 07:38:17,200
my personal folder on my computer
8335
07:38:14,159 --> 07:38:19,439
slash dot pop cache slash bin and then
8336
07:38:17,200 --> 07:38:21,840
right there so unfortunately when you
8337
07:38:19,439 --> 07:38:24,319
install lots of fire cli it doesn't
8338
07:38:21,840 --> 07:38:26,240
it doesn't tell your terminal where it
8339
07:38:24,319 --> 07:38:28,558
is installed so if you then immediately
8340
07:38:26,240 --> 07:38:31,040
after that say flutter fire and then
8341
07:38:28,558 --> 07:38:33,120
blah blah blah as it is mentioned here
8342
07:38:31,040 --> 07:38:35,120
classifier configure your terminal will
8343
07:38:33,119 --> 07:38:36,000
most probably say that what is flutter
8344
07:38:36,797 --> 07:38:39,360
it's not provided here in the
8345
07:38:37,840 --> 07:38:40,957
documentation but i'm telling you here
8346
07:38:39,360 --> 07:38:42,958
as you can see in the caption that you
8347
07:38:40,957 --> 07:38:45,279
need to tell your terminal where flutter
8348
07:38:42,957 --> 07:38:47,279
fire is actually installed okay
8349
07:38:48,398 --> 07:38:52,958
then what you'll need to do is uh to do
8350
07:38:51,360 --> 07:38:54,637
as i've mentioned here you can see i've
8351
07:38:52,957 --> 07:38:57,039
said that you need to change your path
8352
07:38:54,637 --> 07:39:00,637
and include your home folder slash pop
8353
07:38:57,040 --> 07:39:04,159
cache slash bin so if i go to my
8354
07:39:00,637 --> 07:39:06,319
terminal configuration if i say um
8355
07:39:08,398 --> 07:39:14,080
you can see at the top here somewhere i
8356
07:39:11,200 --> 07:39:17,280
should have there you see it says export
8357
07:39:14,080 --> 07:39:20,958
path and i say okay my new path is the
8358
07:39:17,279 --> 07:39:22,957
old path plus using this uh double
8359
07:39:22,957 --> 07:39:26,717
this folder as i've mentioned here in
8360
07:39:25,040 --> 07:39:28,718
the captions at the bottom of the screen
8361
07:39:26,718 --> 07:39:31,119
so you will need to do this as well so
8362
07:39:28,718 --> 07:39:33,760
i'm going to quit vim now and then after
8363
07:39:31,119 --> 07:39:36,557
you've done that make sure that you
8364
07:39:37,040 --> 07:39:40,398
configuration so in my case i would have
8365
07:39:40,398 --> 07:39:45,520
zsh rc and that will read the paths
8366
07:39:45,520 --> 07:39:49,360
fresh otherwise you could also take the
8367
07:39:49,360 --> 07:39:52,878
close your terminal completely
8368
07:39:50,718 --> 07:39:54,558
terminated and then start it again which
8369
07:39:52,878 --> 07:39:56,958
in turn reads the configuration and
8370
07:40:00,240 --> 07:40:03,920
if you don't want to source that's what
8371
07:40:05,520 --> 07:40:09,520
now we've talked about that now let's
8372
07:40:07,119 --> 07:40:12,079
actually talk about what the firebase
8373
07:40:15,200 --> 07:40:18,159
make sure i tick all of these items that
8374
07:40:22,319 --> 07:40:26,477
right now let me just mark them as done
8375
07:40:30,718 --> 07:40:35,440
so what you need to do now is what we
8376
07:40:33,040 --> 07:40:37,040
need to do now is to talk about firebase
8377
07:40:38,637 --> 07:40:42,079
as you can see here is a cli to help us
8378
07:40:40,398 --> 07:40:43,760
interact with firebase right from our
8379
07:40:45,119 --> 07:40:49,360
this this used to be done manually
8380
07:40:47,439 --> 07:40:51,520
previously in that you would have to go
8381
07:40:49,360 --> 07:40:53,840
to firebase and like create a whole
8382
07:40:51,520 --> 07:40:55,760
separate project and then integrate that
8383
07:40:53,840 --> 07:40:57,920
project into your flosser application so
8384
07:40:55,759 --> 07:40:58,797
you don't have to do any of that anymore
8385
07:40:58,797 --> 07:41:03,919
um what you need to do now is as the
8386
07:41:01,200 --> 07:41:06,398
next step is to install the firebase cli
8387
07:41:03,919 --> 07:41:09,599
which does all of that work for you
8388
07:41:06,398 --> 07:41:12,000
so i've provided here as you can see
8389
07:41:09,599 --> 07:41:13,599
there is a command here that you can
8390
07:41:13,599 --> 07:41:19,599
and then you can go to a firebase google
8391
07:41:16,000 --> 07:41:22,637
com docs cli install cli mac blah blah
8392
07:41:19,599 --> 07:41:24,079
so i'm actually going to go to that
8393
07:41:24,080 --> 07:41:29,280
in my web browser here so you can see
8394
07:41:31,439 --> 07:41:34,477
and you will see there's a lot of
8395
07:41:33,040 --> 07:41:36,798
information provided here i'm going to
8396
07:41:34,477 --> 07:41:38,000
bring up the uh i'm going to make the
8397
07:41:36,797 --> 07:41:39,599
size a little bit bigger i'm going to
8398
07:41:38,000 --> 07:41:40,957
bring my face maybe to the bottom right
8399
07:41:39,599 --> 07:41:42,957
as well so you can see more information
8400
07:41:42,957 --> 07:41:46,717
and you can see for mac or linux then
8401
07:41:46,718 --> 07:41:50,319
yeah let's go here mag you can install
8402
07:41:48,477 --> 07:41:52,239
the firebase cli for macro linux using
8403
07:41:52,240 --> 07:41:56,159
so standalone binary blah blah so you
8404
07:41:56,159 --> 07:42:01,360
documentation on on how you can install
8405
07:41:59,040 --> 07:42:03,360
the firebase cli on your on your
8406
07:42:01,360 --> 07:42:07,840
computer whether you're using mac or
8407
07:42:03,360 --> 07:42:07,840
whether you're using linux or windows so
8408
07:42:10,398 --> 07:42:14,840
after you've done that after you've
8409
07:42:14,840 --> 07:42:20,797
cli you will actually need to
8410
07:42:20,797 --> 07:42:25,520
in your into your account using that
8411
07:42:28,398 --> 07:42:35,520
let's let's do that let me actually in
8412
07:42:30,398 --> 07:42:37,440
here um let's bring up our project uh in
8413
07:42:35,520 --> 07:42:39,680
visual studio code so i'm gonna bring it
8414
07:42:39,680 --> 07:42:42,637
and bring up the right caption as well
8415
07:42:41,439 --> 07:42:44,557
so you see what we're talking about
8416
07:42:42,637 --> 07:42:47,520
we're going to talk about firebase login
8417
07:42:44,558 --> 07:42:49,200
and log out you see when you
8418
07:42:47,520 --> 07:42:51,360
want to integrate your flutter
8419
07:42:49,200 --> 07:42:52,798
application with firebase you need to
8420
07:42:52,797 --> 07:42:56,840
firebase project on something called the
8421
07:42:56,840 --> 07:43:03,599
so this project is pretty much the
8422
07:43:00,159 --> 07:43:06,079
configuration of your firebase backend
8423
07:43:03,599 --> 07:43:08,477
on firebase's console on their website
8424
07:43:06,080 --> 07:43:10,718
so you need to configure a backend so
8425
07:43:08,477 --> 07:43:13,360
what we need to do here is now before we
8426
07:43:10,718 --> 07:43:15,280
can actually configure it back in
8427
07:43:13,360 --> 07:43:19,040
in your terminal you need to tell
8428
07:43:15,279 --> 07:43:21,279
firebase what user you have because i
8429
07:43:19,040 --> 07:43:23,040
personally have many google accounts and
8430
07:43:21,279 --> 07:43:25,919
any one of those google accounts can
8431
07:43:23,040 --> 07:43:28,240
potentially have many flutter sorry many
8432
07:43:28,240 --> 07:43:32,878
because firebase projects are linked to
8433
07:43:32,878 --> 07:43:39,920
now in order for our firebase cli to
8434
07:43:36,797 --> 07:43:42,557
understand where it needs to create the
8435
07:43:39,919 --> 07:43:44,717
project you need to tell it to log in
8436
07:43:42,558 --> 07:43:46,319
with an account all right so
8437
07:43:44,718 --> 07:43:48,558
the way to do that is to bring up
8438
07:43:46,319 --> 07:43:49,520
terminal and as you can see here is my
8439
07:43:49,520 --> 07:43:53,520
and i'm going to clean this a little bit
8440
07:43:51,520 --> 07:43:56,718
i'm going to bring up the font as well
8441
07:43:53,520 --> 07:43:59,360
so it's quite ginormous and that's okay
8442
07:43:56,718 --> 07:44:01,280
so what you need to do now is to tell it
8443
07:44:01,279 --> 07:44:07,878
so i'm going to say firebase
8444
07:44:08,000 --> 07:44:11,840
it's gonna do its work and it's telling
8445
07:44:10,000 --> 07:44:13,759
me i'm already logged in with this
8446
07:44:11,840 --> 07:44:15,840
account if you haven't logged in with an
8447
07:44:13,759 --> 07:44:18,637
account then you're gonna get a prompt
8448
07:44:15,840 --> 07:44:21,840
telling you uh okay which email and
8449
07:44:18,637 --> 07:44:22,797
password do you wanna log in with so
8450
07:44:22,797 --> 07:44:26,878
um it may be actually worth it to be
8451
07:44:24,797 --> 07:44:28,637
honest with you for me to log out right
8452
07:44:26,878 --> 07:44:29,440
now so that you see the entire process
8453
07:44:29,439 --> 07:44:34,477
i'm a bit hesitant to log out because
8454
07:44:32,477 --> 07:44:36,878
uh i actually have protected my google
8455
07:44:34,477 --> 07:44:37,759
account with a security key
8456
07:44:37,759 --> 07:44:42,957
i don't have the key right here and i
8457
07:44:42,957 --> 07:44:46,159
for the sake of for the sake of actually
8458
07:44:44,797 --> 07:44:48,477
going through this process together with
8459
07:44:46,159 --> 07:44:49,680
you so you see how it works i'm gonna
8460
07:44:52,558 --> 07:44:57,760
so i'm saying firebase logout
8461
07:44:54,957 --> 07:45:00,797
and it says there is a new version of a
8462
07:44:57,759 --> 07:45:04,079
firebase tool so let's copy this here
8463
07:45:00,797 --> 07:45:06,159
and i'm gonna see if we can install
8464
07:45:07,840 --> 07:45:15,360
global so let's copy that here global
8465
07:45:15,520 --> 07:45:19,520
if it can do its work then before we can
8466
07:45:19,520 --> 07:45:25,279
and npm is something called a node
8467
07:45:21,520 --> 07:45:27,119
package manager and it is kind of like
8468
07:45:25,279 --> 07:45:29,199
if you're working with node.js if you're
8469
07:45:27,119 --> 07:45:30,637
developing for instance node
8470
07:45:30,637 --> 07:45:34,957
which you which you don't have to know
8471
07:45:32,080 --> 07:45:37,600
about it's just a way it's like a
8472
07:45:34,957 --> 07:45:39,279
tool kit for creating applications uh
8473
07:45:37,599 --> 07:45:42,079
remove the existing file and try again
8474
07:45:49,759 --> 07:45:52,637
so it's it's like a dependency
8475
07:45:52,637 --> 07:45:57,520
node applications and firebase tools is
8476
07:45:55,840 --> 07:46:00,240
a node application so that's all you
8477
07:45:57,520 --> 07:46:02,398
need to know really i mean there's there
8478
07:46:00,240 --> 07:46:04,159
are courses available about node and
8479
07:46:02,398 --> 07:46:06,558
node.js then you can actually have a
8480
07:46:04,159 --> 07:46:09,119
look at how they work etc so i'm not
8481
07:46:06,558 --> 07:46:11,040
going to go into details about that so
8482
07:46:09,119 --> 07:46:13,439
before i could i mean i could have
8483
07:46:11,040 --> 07:46:15,840
actually done a firebase logout without
8484
07:46:13,439 --> 07:46:17,840
all of this but i just want to show you
8485
07:46:15,840 --> 07:46:19,599
that things aren't planned like i can't
8486
07:46:17,840 --> 07:46:21,200
perfectly plan things here and when i
8487
07:46:19,599 --> 07:46:23,199
tried to log out it said oh there's a
8488
07:46:21,200 --> 07:46:24,240
new version of node available blah blah
8489
07:46:24,240 --> 07:46:28,000
now that i think sorry there's a new
8490
07:46:26,319 --> 07:46:29,439
version of firebase tools available that
8491
07:46:28,000 --> 07:46:31,200
you can use that you can install with
8492
07:46:31,200 --> 07:46:37,440
i did that so let's now say uh firebase
8493
07:46:37,680 --> 07:46:40,840
okay so the logit actually was
8494
07:46:42,718 --> 07:46:48,000
so let's now say firebase login
8495
07:46:46,240 --> 07:46:49,760
and it says allow firebase to collect
8496
07:46:49,759 --> 07:46:53,439
information i'm gonna say as a developer
8497
07:46:53,439 --> 07:46:59,439
you may you may be tended to say no like
8498
07:46:56,477 --> 07:47:01,040
here but if you are a developer you can
8499
07:46:59,439 --> 07:47:02,877
put your shoe you can put yourself in
8500
07:47:01,040 --> 07:47:05,760
the shoes of another developer working
8501
07:47:02,878 --> 07:47:07,520
at google working for firebase and they
8502
07:47:05,759 --> 07:47:10,159
are trying to get some information about
8503
07:47:07,520 --> 07:47:12,558
how you use the cli and whether they can
8504
07:47:10,159 --> 07:47:15,520
learn from your usage of the cli in
8505
07:47:12,558 --> 07:47:17,120
order to make the cli better so i
8506
07:47:15,520 --> 07:47:18,797
usually say yes to these things
8507
07:47:17,119 --> 07:47:20,878
especially if there's a developer asking
8508
07:47:18,797 --> 07:47:22,159
for permission so but you can say no to
8509
07:47:20,878 --> 07:47:23,440
this if you want to so i'm just going to
8510
07:47:23,439 --> 07:47:27,439
and you can see here then there's a
8511
07:47:25,119 --> 07:47:30,079
screen provided here asking me to log in
8512
07:47:27,439 --> 07:47:30,957
with one of my google accounts all right
8513
07:47:30,957 --> 07:47:34,000
i'm going to pick my company's google
8514
07:47:32,718 --> 07:47:35,920
account because that's what i usually
8515
07:47:34,000 --> 07:47:38,398
use all right so i'm going to choose
8516
07:47:35,919 --> 07:47:40,557
that and it says firebase cli wants to
8517
07:47:38,398 --> 07:47:42,798
access your google account and it says
8518
07:47:40,558 --> 07:47:44,398
okay what permissions it's going to use
8519
07:47:42,797 --> 07:47:45,520
you can have a look at this information
8520
07:47:45,520 --> 07:47:49,200
if it concerns you so if you if you're
8521
07:47:47,759 --> 07:47:50,877
concerned about any of these things
8522
07:47:52,637 --> 07:47:55,759
i'm just going to say allow
8523
07:47:54,319 --> 07:47:58,159
and once that is done you will see that
8524
07:47:55,759 --> 07:48:00,239
it says firebase cli login successful
8525
07:47:58,159 --> 07:48:02,957
and then you can pretty much just close
8526
07:48:02,957 --> 07:48:09,039
and now it says logged in as pixelityav
8527
07:48:06,080 --> 07:48:11,360
gmail.com so i can say firebase login
8528
07:48:09,040 --> 07:48:13,360
again and that would be the prompt that
8529
07:48:11,360 --> 07:48:16,718
you saw in the beginning of this video
8530
07:48:13,360 --> 07:48:17,680
that you are logged in alright
8531
07:48:17,680 --> 07:48:21,760
that was a lot of information now now
8532
07:48:19,360 --> 07:48:25,520
that you are logged in with the firebase
8533
07:48:21,759 --> 07:48:28,477
cli you actually need to configure a
8534
07:48:25,520 --> 07:48:31,279
firebase project all right and we do
8535
07:48:28,477 --> 07:48:32,718
that with the flutter fire cli which we
8536
07:48:31,279 --> 07:48:34,957
installed in the beginning of this
8537
07:48:32,718 --> 07:48:37,840
chapter using this command dart pop
8538
07:48:37,840 --> 07:48:42,080
so what you need to do now is to
8539
07:48:44,558 --> 07:48:48,798
command as i've shown here down at on
8540
07:48:46,718 --> 07:48:52,080
the left hand side so i'm going to do
8541
07:48:52,080 --> 07:48:57,760
so it will fetch all the projects that
8542
07:48:57,759 --> 07:49:02,397
google account and it says okay these
8543
07:48:59,919 --> 07:49:04,797
are the projects available flash chat
8544
07:49:02,398 --> 07:49:07,760
fluffer note guessing chords random
8545
07:49:04,797 --> 07:49:09,360
project testing or you can create a new
8546
07:49:09,360 --> 07:49:12,878
now i'm going to choose create a new
8547
07:49:13,840 --> 07:49:18,797
it says okay enter a project id for your
8548
07:49:16,000 --> 07:49:20,797
new firebase project so what i'm going
8549
07:49:18,797 --> 07:49:22,557
to do here is i'm just going to type my
8550
07:49:26,477 --> 07:49:31,040
is the name of our flutter project as
8551
07:49:28,637 --> 07:49:32,319
well so my notes now i'm going to say
8552
07:49:31,040 --> 07:49:34,718
okay i'm going to create the same
8553
07:49:32,319 --> 07:49:37,279
project called my notes okay i'm going
8554
07:49:37,279 --> 07:49:40,717
i says yeah i'm going to create it
8555
07:49:40,718 --> 07:49:44,718
i mean you can see that we immediately
8556
07:49:44,718 --> 07:49:47,200
this project already exists and you can
8557
07:49:48,319 --> 07:49:50,957
command blah blah blah yeah fail to
8558
07:49:49,759 --> 07:49:52,557
create a project because there's already
8559
07:49:52,558 --> 07:49:56,878
with id mynotes please try again with a
8560
07:49:56,878 --> 07:50:01,119
this is basically telling us that hey
8561
07:49:58,718 --> 07:50:02,718
someone else has created my notes and it
8562
07:50:01,119 --> 07:50:04,957
wasn't one of the projects that we had
8563
07:50:02,718 --> 07:50:06,240
created because if you if you have a
8564
07:50:06,240 --> 07:50:11,840
if you open uh your web browser and say
8565
07:50:14,240 --> 07:50:19,360
and uh let me make sure that i'm logged
8566
07:50:16,878 --> 07:50:20,477
in with my pixelity account yes
8567
07:50:20,477 --> 07:50:25,759
if i have a look let's see dismiss let's
8568
07:50:25,759 --> 07:50:28,957
get started firebase helps you watch
8569
07:50:28,957 --> 07:50:33,039
yeah we are logged in with that account
8570
07:50:30,797 --> 07:50:34,397
so i can actually see maybe i don't have
8571
07:50:33,040 --> 07:50:36,080
any projects set up here which is a
8572
07:50:36,080 --> 07:50:39,920
we actually saw that there were some
8573
07:50:37,599 --> 07:50:41,439
projects set up under this account so i
8574
07:50:39,919 --> 07:50:44,000
don't understand why the firebase
8575
07:50:41,439 --> 07:50:44,877
console so it's not showing them
8576
07:50:44,878 --> 07:50:49,279
firebase console backed by google
8577
07:50:49,279 --> 07:50:54,797
yeah there they are okay so it is on
8578
07:50:54,797 --> 07:51:00,557
and i can see that my notes application
8579
07:50:58,319 --> 07:51:03,279
is not an application that i own i
8580
07:51:03,279 --> 07:51:08,000
what it is saying is that globally
8581
07:51:05,840 --> 07:51:09,759
firebase projects have an identifier and
8582
07:51:08,000 --> 07:51:11,439
now i've entered an identifier that is
8583
07:51:11,439 --> 07:51:16,239
what i'm going to do then is i'm going
8584
07:51:13,119 --> 07:51:18,878
to issue the same command uh
8585
07:51:16,240 --> 07:51:20,000
firebase flutter fire configure and this
8586
07:51:18,878 --> 07:51:22,080
time i'm going to give it a little bit
8587
07:51:20,000 --> 07:51:24,080
more information about the project name
8588
07:51:22,080 --> 07:51:26,878
so that makes it a little bit more
8589
07:51:24,080 --> 07:51:28,478
unique so i'm going to choose
8590
07:51:28,477 --> 07:51:33,200
and then in here in the name of the
8591
07:51:29,919 --> 07:51:36,557
project i'm going to say mynotes
8592
07:51:36,558 --> 07:51:40,000
maybe someone has already taken this as
8593
07:51:42,637 --> 07:51:49,557
so it's doing its thing it's doing its
8594
07:51:44,878 --> 07:51:49,558
magic basically so let's have a look
8595
07:51:53,040 --> 07:51:57,040
this is okay that is taking some time it
8596
07:51:55,439 --> 07:51:58,797
is doing a lot of work it's setting up
8597
07:51:57,040 --> 07:52:00,878
like the ios project and android project
8598
07:52:00,878 --> 07:52:05,040
this thing used to take a lot of time to
8599
07:52:02,477 --> 07:52:06,637
do by hand like maybe 10 folds the
8600
07:52:06,637 --> 07:52:11,360
cli is taking so i'm not so bothered by
8601
07:52:09,119 --> 07:52:13,039
the fact that it's taking some time so
8602
07:52:11,360 --> 07:52:14,718
and here it will actually tell you okay
8603
07:52:13,040 --> 07:52:17,440
which platforms do you want to select
8604
07:52:14,718 --> 07:52:19,840
and as i said like flutter allows you to
8605
07:52:17,439 --> 07:52:22,397
create web applications android
8606
07:52:19,840 --> 07:52:23,360
applications ios applications and also
8607
07:52:23,360 --> 07:52:27,680
desktop applications or four platforms
8608
07:52:25,680 --> 07:52:28,957
and then here it says okay which ones do
8609
07:52:28,957 --> 07:52:33,439
for our project right now you can just
8610
07:52:31,599 --> 07:52:35,439
say android and ios you don't have to
8611
07:52:37,119 --> 07:52:41,680
mac os or linux or windows and web but
8612
07:52:40,240 --> 07:52:43,920
you have the ability to do that if you
8613
07:52:41,680 --> 07:52:46,797
want to so choose android and ios for
8614
07:52:58,477 --> 07:53:03,360
and now this is this is the amazing part
8615
07:53:01,200 --> 07:53:05,119
that you had to do manually before you
8616
07:53:05,119 --> 07:53:09,919
and register like your application with
8617
07:53:08,159 --> 07:53:11,439
apple and then go and register bundle
8618
07:53:09,919 --> 07:53:13,759
identifier and then put the bundle
8619
07:53:11,439 --> 07:53:15,520
identifier manually in firebase and then
8620
07:53:13,759 --> 07:53:17,840
download some files put those files in
8621
07:53:15,520 --> 07:53:19,200
your ios and android project now
8622
07:53:17,840 --> 07:53:21,119
now you don't have to do that anymore
8623
07:53:19,200 --> 07:53:22,798
here it just tells you which bundle
8624
07:53:21,119 --> 07:53:24,718
identifier are you using for your
8625
07:53:22,797 --> 07:53:26,797
project and if you remember from before
8626
07:53:24,718 --> 07:53:31,040
when we created our flutter project from
8627
07:53:26,797 --> 07:53:33,360
the beginning we said flutter create and
8628
07:53:31,040 --> 07:53:35,040
then an organization which for me was s
8629
07:53:33,360 --> 07:53:35,920
e dot pixolity do you remember that
8630
07:53:38,159 --> 07:53:43,119
i mean if i bring up terminal maybe i
8631
07:53:40,398 --> 07:53:45,280
can even go back to it flutter create do
8632
07:53:43,119 --> 07:53:46,397
you remember this command i will zoom
8633
07:53:45,279 --> 07:53:48,878
into it a little bit so you can see
8634
07:53:46,398 --> 07:53:51,200
better this is how we actually created
8635
07:53:48,878 --> 07:53:54,000
our project we said flutter create.org
8636
07:53:51,200 --> 07:53:55,680
as he pixeled in my notes so the bundle
8637
07:53:54,000 --> 07:53:57,680
identifier for this application will be
8638
07:53:57,680 --> 07:54:02,398
however since sc pixelity is the reverse
8639
07:54:00,159 --> 07:54:04,000
domain for me this won't this won't be
8640
07:54:04,000 --> 07:54:07,680
go back to how you created that
8641
07:54:06,000 --> 07:54:09,840
identifier for a project using your
8642
07:54:07,680 --> 07:54:12,159
organization name and you now you have
8643
07:54:09,840 --> 07:54:14,159
to paste that in here so you will see
8644
07:54:22,558 --> 07:54:27,520
and it's going to configure your ios
8645
07:54:33,919 --> 07:54:38,717
set up everything necessary for your
8646
07:54:35,919 --> 07:54:40,877
project to work so i mean you may you
8647
07:54:38,718 --> 07:54:42,718
may just think oh well this was this was
8648
07:54:40,878 --> 07:54:45,040
so little and what did it actually do
8649
07:54:42,718 --> 07:54:47,119
but for me who's been working with
8650
07:54:45,040 --> 07:54:47,920
firebase and flutter for a very long
8651
07:54:47,919 --> 07:54:52,000
this is all magical because it did a lot
8652
07:54:50,080 --> 07:54:54,080
of work it configured your application
8653
07:54:52,000 --> 07:54:57,360
on the firebase console it actually
8654
07:54:54,080 --> 07:54:59,760
registered an android and an ios project
8655
07:54:57,360 --> 07:55:02,718
hooked into this firebase project
8656
07:54:59,759 --> 07:55:05,039
downloaded the configuration files place
8657
07:55:02,718 --> 07:55:06,398
them in the exact correct place in your
8658
07:55:06,398 --> 07:55:10,718
so it did a lot of work but you don't
8659
07:55:08,558 --> 07:55:13,360
really have to know about that so
8660
07:55:10,718 --> 07:55:15,520
um now if you want to kind of see the
8661
07:55:13,360 --> 07:55:17,279
result of it if you see here the output
8662
07:55:15,520 --> 07:55:19,439
of this says that there is an identifier
8663
07:55:17,279 --> 07:55:21,279
associated with your ios app and then
8664
07:55:19,439 --> 07:55:23,840
there's an identifier associated with
8665
07:55:23,840 --> 07:55:27,920
so that's what we're going to do now
8666
07:55:25,759 --> 07:55:30,477
let's now make sure that these
8667
07:55:27,919 --> 07:55:32,797
identifiers are correct and that the
8668
07:55:30,477 --> 07:55:35,599
bundle identifier that we provided to
8669
07:55:32,797 --> 07:55:37,840
the cli is also placed in the
8670
07:55:35,599 --> 07:55:40,159
configuration file correctly so
8671
07:55:37,840 --> 07:55:43,439
copy this for instance ios identifier
8672
07:55:40,159 --> 07:55:45,119
that was created for you so copy it
8673
07:55:43,439 --> 07:55:46,797
and then search for it in your entire
8674
07:55:45,119 --> 07:55:49,360
project and then you'll find a little
8675
07:55:46,797 --> 07:55:51,279
file here and let me bring it down
8676
07:55:53,840 --> 07:55:59,599
so this is where ios is configured and
8677
07:55:57,599 --> 07:56:00,557
let me bring this like that so you don't
8678
07:56:00,558 --> 07:56:05,360
and this is where the android project is
8679
07:56:02,398 --> 07:56:08,638
configured you can see the um
8680
07:56:05,360 --> 07:56:10,958
app id is right here and the api key is
8681
07:56:08,637 --> 07:56:13,200
right there so don't worry about this i
8682
07:56:10,957 --> 07:56:17,680
mean you should not show your api key
8683
07:56:13,200 --> 07:56:19,520
and app id to anybody um so but since
8684
07:56:17,680 --> 07:56:21,360
i'm developing this course for you i
8685
07:56:19,520 --> 07:56:23,040
have to show it i can't just go and
8686
07:56:21,360 --> 07:56:25,600
censor it but don't worry about it by
8687
07:56:23,040 --> 07:56:26,878
the time you're seeing this um video by
8688
07:56:25,599 --> 07:56:28,319
the time you're seeing this course i've
8689
07:56:26,878 --> 07:56:30,080
already deleted this project from
8690
07:56:28,319 --> 07:56:32,398
firebase so there's not going to be any
8691
07:56:33,599 --> 07:56:37,039
so that project isn't going to exist
8692
07:56:35,040 --> 07:56:39,040
even if you know the api key on app id
8693
07:56:37,040 --> 07:56:41,120
so don't worry about that but if you are
8694
07:56:39,040 --> 07:56:43,120
developing your own application just
8695
07:56:41,119 --> 07:56:46,878
kind of be careful who you share your
8696
07:56:43,119 --> 07:56:49,360
api key and app id with all right
8697
07:56:46,878 --> 07:56:52,718
that was a lot of information a lot a
8698
07:56:52,718 --> 07:56:59,280
and i'm gonna actually tick here
8699
07:56:55,520 --> 07:57:02,477
that we've talked about that
8700
07:57:02,477 --> 07:57:06,319
and yeah that's that's all working as it
8701
07:57:06,319 --> 07:57:10,558
so i'm also gonna go here in the
8702
07:57:08,398 --> 07:57:12,398
captions and i can see that i have some
8703
07:57:10,558 --> 07:57:14,718
information here about enabling
8704
07:57:12,398 --> 07:57:17,040
multi-decks and multi-dex was something
8705
07:57:14,718 --> 07:57:19,200
that we've already enabled in the
8706
07:57:17,040 --> 07:57:21,120
previous chapter which was chapter 10
8707
07:57:21,119 --> 07:57:25,279
now everything should be working as it
8708
07:57:23,520 --> 07:57:27,279
did before to be honest with you so if
8709
07:57:25,279 --> 07:57:29,039
you in your visual studio code or
8710
07:57:27,279 --> 07:57:30,637
android studio if you're developing
8711
07:57:29,040 --> 07:57:32,000
under your flutter app with android
8712
07:57:32,000 --> 07:57:36,718
go and select your device to run on now
8713
07:57:35,200 --> 07:57:39,040
in the previous chapter you saw that for
8714
07:57:36,718 --> 07:57:40,558
the entirety of this chat in this course
8715
07:57:39,040 --> 07:57:43,440
i'm gonna use an android phone to
8716
07:57:40,558 --> 07:57:45,920
develop uh our application so you may
8717
07:57:43,439 --> 07:57:47,759
choose to use an io simulator an android
8718
07:57:45,919 --> 07:57:49,919
emulator or an android phone or tablet
8719
07:57:47,759 --> 07:57:52,477
or ios phone or tablet so but i'm gonna
8720
07:57:49,919 --> 07:57:56,159
use a real android phone and as you saw
8721
07:57:52,477 --> 07:57:59,840
we have the ability to bring up scr cpy
8722
07:57:56,159 --> 07:58:02,878
to mirror the android screen so i'm
8723
07:57:59,840 --> 07:58:04,718
going to bring it right here
8724
07:58:02,878 --> 07:58:06,558
change the size of visual studio codes
8725
07:58:04,718 --> 07:58:09,280
window a little bit so you can see the
8726
07:58:06,558 --> 07:58:10,558
android um telephone right there as well
8727
07:58:10,558 --> 07:58:14,718
just to make sure that the project runs
8728
07:58:12,398 --> 07:58:16,319
after all of this work that we've done
8729
07:58:14,718 --> 07:58:19,200
so that we haven't broken anything
8730
07:58:21,279 --> 07:58:24,477
sorry run it without debugging and this
8731
07:58:23,040 --> 07:58:27,120
is this is why you will see this is the
8732
07:58:24,477 --> 07:58:28,957
result of all the work that we've done
8733
07:58:32,000 --> 07:58:35,520
it sounds funny to say it because we did
8734
07:58:33,759 --> 07:58:37,439
a lot of work with the firebase project
8735
07:58:35,520 --> 07:58:38,797
but there is nothing that you can see on
8736
07:58:37,439 --> 07:58:40,717
the screen and that's that's the reality
8737
07:58:38,797 --> 07:58:42,557
of doing software development you may be
8738
07:58:40,718 --> 07:58:44,240
putting a lot of work sometimes in doing
8739
07:58:42,558 --> 07:58:46,798
something and this result isn't
8740
07:58:44,240 --> 07:58:48,638
immediately visible all right
8741
07:58:46,797 --> 07:58:50,557
so but what you have done in this
8742
07:58:48,637 --> 07:58:52,239
chapter was that you actually set up
8743
07:58:50,558 --> 07:58:55,040
your back end with just a few commands
8744
07:58:52,240 --> 07:58:57,360
you installed two clis the flutter fire
8745
07:58:55,040 --> 07:58:59,760
cli and the firebase cli you logged in
8746
07:58:57,360 --> 07:59:02,398
with firebase cli and then you set up
8747
07:58:59,759 --> 07:59:03,279
your backend with the flutter fire cli
8748
07:59:03,279 --> 07:59:06,797
now just to make sure everything is set
8749
07:59:04,797 --> 07:59:08,397
up properly also you can bring up your
8750
07:59:06,797 --> 07:59:12,079
web browser i'm gonna bring it up here
8751
07:59:08,398 --> 07:59:12,958
and i'm gonna say console.firebase
8752
07:59:16,558 --> 07:59:20,558
our notes app here you can see my node
8753
07:59:20,558 --> 07:59:23,760
and you can click on it and you can see
8754
07:59:22,319 --> 07:59:26,000
how it is set up for you you can see
8755
07:59:23,759 --> 07:59:27,919
there is an android app setup and an ios
8756
07:59:27,919 --> 07:59:31,519
you didn't have to really do anything
8757
07:59:29,439 --> 07:59:32,637
now there's lots of things you can do
8758
07:59:31,520 --> 07:59:34,558
with firebase which we're going to
8759
07:59:32,637 --> 07:59:37,119
actually play with throughout this
8760
07:59:34,558 --> 07:59:38,878
course but not right now just make sure
8761
07:59:38,878 --> 07:59:44,920
firebase project is created for you by
8762
07:59:41,279 --> 07:59:44,919
logging into console.firebase.google.com
8763
07:59:48,159 --> 07:59:52,797
all right and we've talked about this
8764
07:59:50,319 --> 07:59:55,279
now running the application on an
8765
07:59:55,279 --> 07:59:59,039
that was already set up so we don't have
8766
07:59:59,040 --> 08:00:04,240
now that you've seen that you've set up
8767
08:00:00,718 --> 08:00:06,558
your backend you're ready to go and uh
8768
08:00:04,240 --> 08:00:07,840
so i can say congratulations so that's
8769
08:00:10,080 --> 08:00:13,360
the android setup is already done so i
8770
08:00:11,919 --> 08:00:16,797
can see that that is set up we don't
8771
08:00:13,360 --> 08:00:18,080
have to talk about that either
8772
08:00:18,080 --> 08:00:21,760
what we do need to talk about is what
8773
08:00:26,558 --> 08:00:31,680
in the next chapter we are for the first
8774
08:00:29,439 --> 08:00:32,557
time in this course we are going to talk
8775
08:00:32,558 --> 08:00:38,878
the uh footer code actual thoughts or
8776
08:00:36,080 --> 08:00:41,600
code we're going to start writing a
8777
08:00:38,878 --> 08:00:43,920
simple registration screen so using this
8778
08:00:43,919 --> 08:00:47,519
right now hypothetical users are going
8779
08:00:47,520 --> 08:00:52,000
look at the screen and say okay i don't
8780
08:00:50,637 --> 08:00:54,079
have an account with this application
8781
08:00:52,000 --> 08:00:55,840
i'm going to register myself so
8782
08:00:55,840 --> 08:01:00,558
be able to they will be able to enter
8783
08:00:58,000 --> 08:01:03,520
their email address a password of their
8784
08:01:00,558 --> 08:01:05,840
uh choosing press some sort of a button
8785
08:01:03,520 --> 08:01:08,000
and we will then talk with firebase and
8786
08:01:05,840 --> 08:01:11,360
say here's a new user register that
8787
08:01:08,000 --> 08:01:13,840
person okay so that's all for the next
8788
08:01:11,360 --> 08:01:15,520
chapter which is chapter 12. so grab a
8789
08:01:13,840 --> 08:01:16,558
cup of coffee cup of tea whatever you
8790
08:01:18,159 --> 08:01:23,200
and i'll see you in the next chapter
8791
08:01:20,878 --> 08:01:24,718
hello and welcome to chapter number 12
8792
08:01:24,718 --> 08:01:28,080
in this chapter and which i'm very
8793
08:01:26,558 --> 08:01:30,638
excited about we're going to talk about
8794
08:01:28,080 --> 08:01:33,200
a basic register screen well up until
8795
08:01:30,637 --> 08:01:35,439
this point we've been really configuring
8796
08:01:33,200 --> 08:01:36,718
our i mean if we go chronologically
8797
08:01:35,439 --> 08:01:38,319
we've had the introduction we've gone
8798
08:01:36,718 --> 08:01:40,080
through so many chapters to talk about
8799
08:01:38,319 --> 08:01:43,599
dart and its basics and even some more
8800
08:01:40,080 --> 08:01:43,600
advanced topics such as generics
8801
08:01:44,477 --> 08:01:49,200
and then as soon as we did that then we
8802
08:01:51,200 --> 08:01:55,600
started learning about setting up our
8803
08:01:53,680 --> 08:01:56,957
iphone and android application also
8804
08:01:56,957 --> 08:02:01,680
sorry the iphone and android application
8805
08:01:59,520 --> 08:02:04,398
together with certificates profiles and
8806
08:02:01,680 --> 08:02:06,398
got scr cpy working so there's been a
8807
08:02:04,398 --> 08:02:08,159
lot of information up on those till this
8808
08:02:06,398 --> 08:02:10,718
point so many hours of information that
8809
08:02:10,718 --> 08:02:14,319
and i strongly suggest that you actually
8810
08:02:12,477 --> 08:02:16,319
do that because i've explained
8811
08:02:16,319 --> 08:02:20,797
extent extensive detail that i feel like
8812
08:02:19,040 --> 08:02:22,319
explaining all those things again and
8813
08:02:20,797 --> 08:02:23,439
again will be a waste of time both for
8814
08:02:26,080 --> 08:02:29,200
we are going to use all that information
8815
08:02:28,159 --> 08:02:31,279
that we've learned from the previous
8816
08:02:29,200 --> 08:02:32,798
chapters and start actually creating a
8817
08:02:31,279 --> 08:02:34,477
registration screen a simple
8818
08:02:32,797 --> 08:02:37,119
registration screen in our floater
8819
08:02:34,477 --> 08:02:39,599
application source code that talks with
8820
08:02:37,119 --> 08:02:42,637
firebase and firebase we set up in the
8821
08:02:39,599 --> 08:02:44,159
previous chapter if i'm not mistaken so
8822
08:02:42,637 --> 08:02:46,477
have a look at that chapter if you
8823
08:02:44,159 --> 08:02:47,840
haven't set up your firebase app
8824
08:02:47,840 --> 08:02:51,680
or at least i mean we haven't really set
8825
08:02:51,680 --> 08:02:55,599
well yeah actually set up yeah we could
8826
08:02:53,759 --> 08:02:57,439
say set up um but we haven't really
8827
08:02:55,599 --> 08:02:59,519
configured in such great details it's
8828
08:02:57,439 --> 08:03:00,957
just like we've set it up so
8829
08:02:59,520 --> 08:03:03,600
have a look at that chapter please if
8830
08:03:03,599 --> 08:03:07,759
before you continue with this chapter so
8831
08:03:07,759 --> 08:03:10,717
i'm gonna go to my captions here and
8832
08:03:09,279 --> 08:03:12,477
just ensure that i can show you the
8833
08:03:12,477 --> 08:03:16,558
now what we need to do in this chapter
8834
08:03:14,797 --> 08:03:18,717
is to start working on our registration
8835
08:03:16,558 --> 08:03:20,958
screen and what i'm going to do here is
8836
08:03:18,718 --> 08:03:22,798
bring up a caption for you so that you
8837
08:03:20,957 --> 08:03:24,319
know what we're going to do
8838
08:03:22,797 --> 08:03:25,599
the first thing you need to do is to
8839
08:03:29,840 --> 08:03:33,119
on the screen so i'm i'm going to do
8840
08:03:31,439 --> 08:03:35,359
that and then i'm going to bring my
8841
08:03:33,119 --> 08:03:37,439
android phone mirrored on the screen
8842
08:03:37,439 --> 08:03:40,877
and then i'll see if i can bring my face
8843
08:03:39,520 --> 08:03:44,240
to the right so you can see a little bit
8844
08:03:44,240 --> 08:03:48,878
and what we need to do here now is to go
8845
08:03:46,957 --> 08:03:51,039
in this main dart file and remove
8846
08:03:48,878 --> 08:03:52,477
everything that is a comment now
8847
08:03:51,040 --> 08:03:55,360
if you're coming from like a design
8848
08:03:52,477 --> 08:03:56,558
background or a product owner or um like
8849
08:03:56,558 --> 08:04:00,000
wherever whatever background that is not
8850
08:03:58,240 --> 08:04:01,520
software development related if you're
8851
08:04:00,000 --> 08:04:04,159
coming from those backgrounds then you
8852
08:04:01,520 --> 08:04:06,240
may not know what a comment is however
8853
08:04:04,159 --> 08:04:07,840
i'll tell you now a comment is a piece
8854
08:04:06,240 --> 08:04:09,840
of information piece of text that is
8855
08:04:07,840 --> 08:04:12,797
written inside a source file such as
8856
08:04:09,840 --> 08:04:15,200
this main dart file that doesn't
8857
08:04:12,797 --> 08:04:16,957
translate to an actual code so it's
8858
08:04:16,957 --> 08:04:20,797
usually for other developers or whoever
8859
08:04:19,119 --> 08:04:22,397
is looking at the code so that they
8860
08:04:20,797 --> 08:04:23,199
understand the code a little bit better
8861
08:04:23,200 --> 08:04:27,200
comments in dart can be created in
8862
08:04:24,718 --> 08:04:30,558
different ways however the most
8863
08:04:27,200 --> 08:04:31,280
i mean the most usual way of doing it is
8864
08:04:31,279 --> 08:04:35,119
double forward slashes as you can see
8865
08:04:33,040 --> 08:04:35,920
here and a space and then some text all
8866
08:04:36,878 --> 08:04:41,040
i'm going to need you now to go into
8867
08:04:39,439 --> 08:04:42,637
your main dart file and we're going to
8868
08:04:41,040 --> 08:04:44,477
remove all these comments right now
8869
08:04:42,637 --> 08:04:47,520
because they are basically creating a
8870
08:04:44,477 --> 08:04:49,520
lot of noise for us right now okay
8871
08:04:47,520 --> 08:04:52,000
so let's go ahead and remove all those
8872
08:04:49,520 --> 08:04:53,520
gray lines or whatever color they're
8873
08:04:52,000 --> 08:04:54,398
displayed on your screen they may be
8874
08:04:57,200 --> 08:05:00,398
i have tokyo knight as i mentioned
8875
08:05:00,398 --> 08:05:05,280
in visual studio code so comments are
8876
08:05:05,279 --> 08:05:09,439
gonna remove all that comment there okay
8877
08:05:12,240 --> 08:05:16,958
and i don't know yeah and it seems also
8878
08:05:16,957 --> 08:05:21,759
so yeah i think now we've removed all
8879
08:05:19,119 --> 08:05:23,039
the comments so if i do command s that
8880
08:05:24,319 --> 08:05:27,439
and i'm actually going to talk about
8881
08:05:25,599 --> 08:05:29,599
what the hot reload is but if you've
8882
08:05:27,439 --> 08:05:31,039
done this then you're good to go i'm
8883
08:05:29,599 --> 08:05:32,957
going to take that in my notes so we've
8884
08:05:32,957 --> 08:05:38,079
now the next topic to talk about here is
8885
08:05:35,119 --> 08:05:39,680
hot reload versus hot restart now
8886
08:05:38,080 --> 08:05:41,680
these two are so important for you to
8887
08:05:39,680 --> 08:05:43,360
understand that i think you should like
8888
08:05:41,680 --> 08:05:45,040
get this before you continue with the
8889
08:05:43,360 --> 08:05:46,958
rest of the course and i'm gonna do my
8890
08:05:45,040 --> 08:05:48,718
best to explain what hot reload and
8891
08:05:48,718 --> 08:05:51,600
if you're for instance coming from a
8892
08:05:50,080 --> 08:05:53,200
design background where you have for
8893
08:05:56,240 --> 08:06:00,718
stuff you're you're putting some vectors
8894
08:05:58,718 --> 08:06:02,319
on the screen you're dragging images and
8895
08:06:00,718 --> 08:06:04,159
i can go in your figma design and
8896
08:06:02,319 --> 08:06:06,718
literally observe you as you're doing
8897
08:06:04,159 --> 08:06:08,398
that so i'm actually looking at your
8898
08:06:06,718 --> 08:06:10,240
changes you don't have to press any
8899
08:06:08,398 --> 08:06:12,878
publish button nothing like that even if
8900
08:06:10,240 --> 08:06:15,520
you're in your drafts i can still follow
8901
08:06:12,878 --> 08:06:18,080
you and watch you as you're designing
8902
08:06:15,520 --> 08:06:20,718
now that future is very very much
8903
08:06:21,919 --> 08:06:27,599
the cost of doing that the same thing
8904
08:06:24,240 --> 08:06:30,558
that figma does is quite heavy because
8905
08:06:27,599 --> 08:06:32,397
as i'm changing my code i actually i'm
8906
08:06:30,558 --> 08:06:35,520
not going to be able to see my changes
8907
08:06:32,398 --> 08:06:37,840
unless i tell flutter that okay i've
8908
08:06:35,520 --> 08:06:38,718
made some changes show me them on the
8909
08:06:38,718 --> 08:06:44,718
that is hot reload okay for instance if
8910
08:06:42,240 --> 08:06:46,478
i go in here and i say flutter demo home
8911
08:06:44,718 --> 08:06:47,600
page and remove the demo home page from
8912
08:06:47,599 --> 08:06:52,159
press command s that's going to save my
8913
08:06:49,919 --> 08:06:54,239
file which in turn is going to do a hot
8914
08:06:55,919 --> 08:06:59,199
you can see this title now was changed
8915
08:06:59,200 --> 08:07:03,040
so it's set it says not flutter demo i'm
8916
08:07:01,040 --> 08:07:05,920
going to change it back command s hot
8917
08:07:03,040 --> 08:07:08,240
reload and it's going to say home page
8918
08:07:05,919 --> 08:07:10,957
now you can also avoid for instance
8919
08:07:08,240 --> 08:07:12,240
doing command s and just go in here in
8920
08:07:10,957 --> 08:07:15,359
your visual studio code or android
8921
08:07:12,240 --> 08:07:16,958
studio and just say hot reload so i can
8922
08:07:15,360 --> 08:07:20,319
see now that didn't actually do it that
8923
08:07:16,957 --> 08:07:22,319
was great because i can see a little
8924
08:07:20,319 --> 08:07:24,159
like blob here you see the circle on
8925
08:07:22,319 --> 08:07:26,159
this file this in visual studio code is
8926
08:07:24,159 --> 08:07:28,159
an indicator of a file that has not been
8927
08:07:28,159 --> 08:07:32,079
so if i save it and it itself is going
8928
08:07:30,637 --> 08:07:33,599
to do a hot reload so i don't have to
8929
08:07:32,080 --> 08:07:35,760
actually manually press the hot reload
8930
08:07:33,599 --> 08:07:38,079
button so save and then you can see the
8931
08:07:35,759 --> 08:07:41,599
changes immediately applied there
8932
08:07:38,080 --> 08:07:44,478
however some changes to your code are
8933
08:07:41,599 --> 08:07:47,919
going to be so big that footwear is not
8934
08:07:44,477 --> 08:07:50,079
able to resolve the delta from the
8935
08:07:47,919 --> 08:07:52,239
previous state of the application to the
8936
08:07:50,080 --> 08:07:53,840
new states and we will come to those
8937
08:07:52,240 --> 08:07:56,478
changes very difficult to explain them
8938
08:07:53,840 --> 08:07:57,840
right now but just know that hot reload
8939
08:07:57,840 --> 08:08:03,360
usually works in 99 something percent
8940
08:08:00,797 --> 08:08:05,520
like i'm making up statistics here in
8941
08:08:03,360 --> 08:08:08,240
most cases hot reload works in that it
8942
08:08:05,520 --> 08:08:10,878
can show you your latest changes however
8943
08:08:08,240 --> 08:08:13,200
sometimes your changes may be so drastic
8944
08:08:14,477 --> 08:08:17,520
calculation of the delta from the
8945
08:08:15,919 --> 08:08:19,679
previous previous state to the next to
8946
08:08:17,520 --> 08:08:22,000
the new state may be so big that flutter
8947
08:08:19,680 --> 08:08:23,760
isn't able to do that so then you will
8948
08:08:22,000 --> 08:08:25,599
have to do hot reload and then hot
8949
08:08:25,599 --> 08:08:30,079
here sorry hot restart you will have to
8950
08:08:27,840 --> 08:08:32,797
do a hot restart sorry about that
8951
08:08:30,080 --> 08:08:35,200
so there's more differences between them
8952
08:08:32,797 --> 08:08:37,199
like internally about the state
8953
08:08:35,200 --> 08:08:38,558
like the state of your application and
8954
08:08:38,558 --> 08:08:42,080
keeps your state and the other one loses
8955
08:08:40,240 --> 08:08:43,600
your state so i'm not going to talk
8956
08:08:42,080 --> 08:08:47,120
about that right now because we haven't
8957
08:08:43,599 --> 08:08:48,557
even talked about states in flutter so i
8958
08:08:47,119 --> 08:08:51,200
don't think it makes so much sense to
8959
08:08:48,558 --> 08:08:53,920
talk about that right now just know that
8960
08:08:51,200 --> 08:08:56,637
in most cases hot reload displays your
8961
08:08:53,919 --> 08:08:58,557
latest changes and that and it's
8962
08:08:56,637 --> 08:09:00,319
sufficient if you just do a command s
8963
08:09:00,319 --> 08:09:05,520
but hot restart it will basically kind
8964
08:09:02,398 --> 08:09:08,159
of like rebuild your application
8965
08:09:08,159 --> 08:09:11,840
so i think i think to be honest with you
8966
08:09:16,159 --> 08:09:21,759
have a look a little bit about at
8967
08:09:19,599 --> 08:09:23,680
restructuring the code that is created
8968
08:09:25,439 --> 08:09:30,319
um i mean we don't really know how these
8969
08:09:30,319 --> 08:09:34,637
um you don't even know like in the
8970
08:09:32,637 --> 08:09:37,599
caption i say material app inside run
8971
08:09:37,599 --> 08:09:41,359
what does this mean well you don't know
8972
08:09:41,360 --> 08:09:45,600
i'm not going to like confuse us right
8973
08:09:43,360 --> 08:09:47,840
now with too much detail but what you'll
8974
08:09:45,599 --> 08:09:50,477
need to know right now is that
8975
08:09:47,840 --> 08:09:51,759
let's go in here and i'm gonna bring the
8976
08:09:51,759 --> 08:09:55,919
what i'm gonna do in here in this build
8977
08:10:02,957 --> 08:10:08,239
and command s and then you'll see that
8978
08:10:05,599 --> 08:10:10,319
printed to the screen so every time i'm
8979
08:10:10,319 --> 08:10:15,439
this entire application is being built
8980
08:10:13,439 --> 08:10:16,557
again and there is a little bit of like
8981
08:10:20,080 --> 08:10:23,440
as you can see here material application
8982
08:10:23,439 --> 08:10:28,239
kind of like a scaffolding entire frame
8983
08:10:26,159 --> 08:10:30,957
of your application including the bar on
8984
08:10:28,240 --> 08:10:32,718
top including this white view here and
8985
08:10:30,957 --> 08:10:33,599
including that badge up there on the top
8986
08:10:33,599 --> 08:10:37,439
it's like you are pretty much building
8987
08:10:36,080 --> 08:10:39,360
things that you don't need to build
8988
08:10:37,439 --> 08:10:42,319
every time you save this file so it's a
8989
08:10:39,360 --> 08:10:44,477
little bit of like a a problem of um
8990
08:10:42,319 --> 08:10:47,840
performance whether you want to do that
8991
08:10:44,477 --> 08:10:49,840
or not but in this in this uh course i'm
8992
08:10:47,840 --> 08:10:51,439
just i'm gonna give you some advice on
8993
08:10:49,840 --> 08:10:54,159
how to make your application also run a
8994
08:10:51,439 --> 08:10:55,919
little bit faster so to do that what we
8995
08:10:54,159 --> 08:10:57,680
need to do is just to tell flutter that
8996
08:10:55,919 --> 08:11:00,239
hey look we don't want to build the
8997
08:11:00,240 --> 08:11:04,958
or the app structure every time we're
8998
08:11:02,878 --> 08:11:06,319
pressing command s to how to hot reload
8999
08:11:07,439 --> 08:11:11,039
challenge here now is to if i get rid of
9000
08:11:11,040 --> 08:11:13,680
what we need to do now is you can see
9001
08:11:13,680 --> 08:11:17,119
in the main function which is the root
9002
08:11:15,439 --> 08:11:18,557
function that flutter calls when it
9003
08:11:17,119 --> 08:11:20,957
actually runs your application it says
9004
08:11:18,558 --> 08:11:22,798
okay i'm running an app called my app
9005
08:11:20,957 --> 08:11:24,637
and if you look at my app the only thing
9006
08:11:22,797 --> 08:11:26,717
it does it actually creates a material
9007
08:11:26,718 --> 08:11:31,440
what you need to do now is to grab this
9008
08:11:29,680 --> 08:11:33,119
material app so i'm just going to say
9009
08:11:34,159 --> 08:11:37,599
or control x i think on windows and
9010
08:11:37,599 --> 08:11:41,439
grab that and instead of this const my
9011
08:11:44,797 --> 08:11:51,279
and then kill your my app boom like that
9012
08:11:51,279 --> 08:11:54,000
and just to make sure everything is
9013
08:11:52,637 --> 08:11:56,397
working correctly i'm just going to do a
9014
08:11:56,398 --> 08:12:01,920
and you can see everything is working as
9015
08:11:59,119 --> 08:12:03,599
it should so what we did here really was
9016
08:12:01,919 --> 08:12:05,039
actually let's see my homepage yeah
9017
08:12:07,520 --> 08:12:12,319
what we have now is just the main
9018
08:12:10,000 --> 08:12:16,319
function and something called my
9019
08:12:12,319 --> 08:12:20,477
homepage stateful widget all right so
9020
08:12:16,319 --> 08:12:22,159
get your code also to this state
9021
08:12:20,477 --> 08:12:23,680
i'm gonna take in my notes that i've
9022
08:12:23,680 --> 08:12:28,797
so the next thing we need to talk about
9023
08:12:25,360 --> 08:12:30,477
is stateless versus stateful
9024
08:12:31,919 --> 08:12:35,359
i mean for me it feels like for me to be
9025
08:12:34,159 --> 08:12:38,319
able to explain this i need to first
9026
08:12:35,360 --> 08:12:40,718
explain what a state is uh let's say in
9027
08:12:42,797 --> 08:12:46,878
and then i go and i say oh i want to
9028
08:12:44,637 --> 08:12:49,200
change the title of this little label
9029
08:12:53,759 --> 08:12:58,477
yeah let's convert this to double quotes
9030
08:12:56,159 --> 08:12:59,360
because we're putting a single code in
9031
08:12:59,360 --> 08:13:03,279
i'm gonna say you've pushed the button
9032
08:13:01,599 --> 08:13:05,119
this many times and i'm gonna say
9033
08:13:03,279 --> 08:13:08,239
command s or control s in windows and
9034
08:13:08,240 --> 08:13:13,760
hot reload yeah command s okay
9035
08:13:11,119 --> 08:13:16,239
and you can see is that you've pushed
9036
08:13:13,759 --> 08:13:17,599
the button this many times but it kept
9037
08:13:17,599 --> 08:13:22,397
so if it rebuilt this application or
9038
08:13:22,398 --> 08:13:27,360
or this thing that you can see on the
9039
08:13:24,159 --> 08:13:29,200
screen how did it keep keep the state
9040
08:13:29,200 --> 08:13:33,920
hot reload is able to sometimes as i
9041
08:13:31,919 --> 08:13:38,877
mentioned before keep your state and
9042
08:13:33,919 --> 08:13:40,797
state is just data data usually
9043
08:13:38,878 --> 08:13:43,119
mutated and created either by the
9044
08:13:40,797 --> 08:13:44,957
application or the user or both and in
9045
08:13:43,119 --> 08:13:46,878
this case this is a state that the user
9046
08:13:44,957 --> 08:13:49,039
is controlling so by pressing the button
9047
08:13:46,878 --> 08:13:50,718
he or she is increasing this number now
9048
08:13:50,718 --> 08:13:56,080
a state full widget it can keep that
9049
08:14:00,718 --> 08:14:05,680
it's an integer and it keeps hold of
9050
08:14:05,680 --> 08:14:11,599
and upon this number being changed it
9051
08:14:08,797 --> 08:14:13,599
can kind of redraw itself so
9052
08:14:13,599 --> 08:14:17,919
something that is on the screen usually
9053
08:14:15,759 --> 08:14:20,319
something that you can visibly see
9054
08:14:17,919 --> 08:14:21,519
such as this screen the white screen you
9055
08:14:27,040 --> 08:14:32,319
upon who's changing it can redraw itself
9056
08:14:32,319 --> 08:14:37,360
had we had the same widget as you can
9057
08:14:35,040 --> 08:14:39,840
see in my home page and it was stateless
9058
08:14:37,360 --> 08:14:40,718
widget which is available as well
9059
08:14:42,398 --> 08:14:49,920
it wouldn't necessarily be able to
9060
08:14:46,000 --> 08:14:53,840
redraw itself or contain any mutable
9061
08:14:49,919 --> 08:14:56,079
data i mean even stateless widgets
9062
08:14:53,840 --> 08:14:58,558
for those who are a bit more familiar
9063
08:14:56,080 --> 08:15:01,760
with flutter you'll have like value not
9064
08:14:58,558 --> 08:15:03,840
notifier and builders so even stateless
9065
08:15:01,759 --> 08:15:05,199
widgets can be redrawn depending on what
9066
08:15:07,680 --> 08:15:13,040
mutable variables so that is kind of
9067
08:15:13,040 --> 08:15:16,477
difference between stateful and
9068
08:15:14,317 --> 08:15:19,360
stateless so you can see here this is a
9069
08:15:16,477 --> 08:15:21,040
variable that is not read-only otherwise
9070
08:15:19,360 --> 08:15:23,279
it would be final so if i make this
9071
08:15:21,040 --> 08:15:25,680
final you can see it says oh you can't
9072
08:15:23,279 --> 08:15:27,759
reassign this value to something else so
9073
08:15:25,680 --> 08:15:30,398
just know that if you see state full
9074
08:15:27,759 --> 08:15:32,717
widget then it is a widget that contains
9075
08:15:34,000 --> 08:15:38,080
as the user interacts with the widget or
9076
08:15:35,840 --> 08:15:41,360
as time goes by or as the widget sees
9077
08:15:38,080 --> 08:15:42,160
fit however stateless widget is a widget
9078
08:15:42,159 --> 08:15:48,000
who has who doesn't contain any mutable
9079
08:15:44,797 --> 08:15:50,159
pieces of information and doesn't manage
9080
08:15:48,000 --> 08:15:52,477
any mutable pieces of information
9081
08:15:52,477 --> 08:15:56,159
that's a lot of just just there's a lot
9082
08:15:54,159 --> 08:15:57,919
of talk i know if you're not comfortable
9083
08:15:56,159 --> 08:15:59,919
with like if you if you haven't done
9084
08:15:57,919 --> 08:16:01,519
software development before you may not
9085
08:15:59,919 --> 08:16:02,957
this may not make any sense to you and i
9086
08:16:01,520 --> 08:16:04,637
promise you as we go on and of course
9087
08:16:02,957 --> 08:16:06,239
you're gonna learn more about it so
9088
08:16:04,637 --> 08:16:07,360
don't worry about it if you didn't get
9089
08:16:13,119 --> 08:16:18,878
you can see now let's see um
9090
08:16:16,718 --> 08:16:21,840
let's talk a little bit about i'm gonna
9091
08:16:30,159 --> 08:16:35,119
okay so i can see in my notes that i had
9092
08:16:35,119 --> 08:16:40,000
that as part of as part of uh
9093
08:16:38,080 --> 08:16:41,280
what i was going to explain here i was
9094
08:16:41,279 --> 08:16:46,239
i had planned i can see my notes i had
9095
08:16:44,000 --> 08:16:48,797
planned in one of the previous captions
9096
08:16:48,797 --> 08:16:52,397
as part of this caption i was actually
9097
08:16:50,398 --> 08:16:54,718
supposed to come completely kill this my
9098
08:16:54,718 --> 08:16:59,920
and i was supposed to actually create a
9099
08:16:57,200 --> 08:17:01,680
widget just called home page so let's do
9100
08:16:59,919 --> 08:17:05,119
that let's just go back into that
9101
08:17:01,680 --> 08:17:06,878
caption so kill this my home page
9102
08:17:06,878 --> 08:17:13,279
go in here and change this to home page
9103
08:17:10,240 --> 08:17:15,760
so what we need to do now is to create a
9104
08:17:13,279 --> 08:17:18,397
very simple home page okay so i'm gonna
9105
08:17:15,759 --> 08:17:20,637
remove this title from here as well and
9106
08:17:18,398 --> 08:17:22,398
you can see now we have an error telling
9107
08:17:20,637 --> 08:17:25,599
us that okay i don't know what home page
9108
08:17:22,398 --> 08:17:27,840
is now what we need to do is to create a
9109
08:17:25,599 --> 08:17:30,477
uh actually let me see if i plan to
9110
08:17:27,840 --> 08:17:31,520
create a stateless yeah stateless widget
9111
08:17:31,520 --> 08:17:35,279
a great shortcut that you need to know
9112
08:17:33,040 --> 08:17:38,317
in visual studio code and i think it may
9113
08:17:35,279 --> 08:17:39,759
be available in android studio as well
9114
08:17:38,317 --> 08:17:42,317
is if you want to create a stateless
9115
08:17:42,317 --> 08:17:45,279
and you can see it tells you that okay
9116
08:17:43,840 --> 08:17:46,637
you want to create a stateless widget
9117
08:17:46,637 --> 08:17:51,759
okay there it is then you give it the
9118
08:17:48,637 --> 08:17:53,680
name of home page okay so now you have a
9119
08:17:51,759 --> 08:17:56,317
home page great and i'm going to do a
9120
08:17:53,680 --> 08:17:58,159
command s and now you can see this is
9121
08:17:56,317 --> 08:17:59,279
one of the times that flutter was like
9122
08:17:59,279 --> 08:18:02,239
i don't understand what you're trying to
9123
08:18:00,477 --> 08:18:04,477
do you change some stuff in this main
9124
08:18:02,240 --> 08:18:06,638
function and i can't do hot reload so
9125
08:18:04,477 --> 08:18:09,279
you have to do hot restart so now the
9126
08:18:06,637 --> 08:18:10,000
screen is kind of gonna be black
9127
08:18:10,000 --> 08:18:14,398
now we have what i had planned in the
9128
08:18:12,240 --> 08:18:18,159
course initially for for this chapter so
9129
08:18:14,398 --> 08:18:19,200
great let's go now to the next point
9130
08:18:19,200 --> 08:18:23,040
so you can see the screen is black here
9131
08:18:21,200 --> 08:18:24,398
and that's because of this container
9132
08:18:23,040 --> 08:18:25,920
there is a little container there or
9133
08:18:24,398 --> 08:18:28,240
something on the screen that you can't
9134
08:18:25,919 --> 08:18:29,919
really see because it's just black so
9135
08:18:28,240 --> 08:18:32,718
you could go in here and say there is a
9136
08:18:29,919 --> 08:18:34,000
color and you can say colors red i just
9137
08:18:34,000 --> 08:18:37,360
and you can see now the screen is red so
9138
08:18:36,000 --> 08:18:38,718
just know that there is something on the
9139
08:18:37,360 --> 08:18:41,040
screen but you just can't see it because
9140
08:18:41,040 --> 08:18:45,040
the way to get your application to a
9141
08:18:42,797 --> 08:18:46,797
point that is actually like presentable
9142
08:18:45,040 --> 08:18:49,520
to a user you usually have to create
9143
08:18:46,797 --> 08:18:51,520
something called a scaffold now scaffold
9144
08:18:49,520 --> 08:18:54,317
as it as its name indicates it's kind of
9145
08:18:51,520 --> 08:18:56,718
just like the basic building structures
9146
08:18:54,317 --> 08:18:58,797
of an application that kind of makes it
9147
08:18:56,718 --> 08:18:59,520
presentable to a user to an average user
9148
08:18:59,520 --> 08:19:03,439
even though if you're creating like a
9149
08:19:00,957 --> 08:19:05,520
graphically intensive application this
9150
08:19:03,439 --> 08:19:08,079
black background may be completely okay
9151
08:19:05,520 --> 08:19:10,080
but in most applications when you run
9152
08:19:10,080 --> 08:19:13,680
then you'll get like a bar on top that
9153
08:19:12,159 --> 08:19:15,439
tells you like the name of the screen
9154
08:19:13,680 --> 08:19:17,599
that you're on kind of like the title of
9155
08:19:15,439 --> 08:19:19,840
a web page and you'll also get some like
9156
08:19:17,599 --> 08:19:22,000
a status bar on top where as you can see
9157
08:19:19,840 --> 08:19:24,957
here the status bar is kind of like
9158
08:19:22,000 --> 08:19:27,040
black with all white icons on top and it
9159
08:19:24,957 --> 08:19:29,279
will give you like a wide screen where
9160
08:19:27,040 --> 08:19:31,280
you can interact with your content
9161
08:19:29,279 --> 08:19:32,878
so we don't have that and in order to
9162
08:19:31,279 --> 08:19:34,557
create that you have to create something
9163
08:19:34,558 --> 08:19:38,798
go to your container here and say
9164
08:19:38,797 --> 08:19:43,279
now i'm gonna press command s and you'll
9165
08:19:40,718 --> 08:19:45,440
see all this on then we get this little
9166
08:19:43,279 --> 08:19:47,680
white screen here and then there's a
9167
08:19:45,439 --> 08:19:48,637
little tint on our status bar as well so
9168
08:19:47,680 --> 08:19:50,797
it makes it a little bit more
9169
08:19:51,840 --> 08:19:57,040
what we need to do now i'll basically
9170
08:19:54,080 --> 08:19:59,600
see if i've planned to add some bar
9171
08:19:57,040 --> 08:20:01,840
title in here which i haven't so let's
9172
08:19:59,599 --> 08:20:04,317
do that right now so for our scaffold
9173
08:20:01,840 --> 08:20:06,240
we're also going to add an is something
9174
08:20:06,240 --> 08:20:12,398
so go to your scaffold and say app bar
9175
08:20:09,279 --> 08:20:14,717
and then say i create a new instance of
9176
08:20:14,718 --> 08:20:20,000
and in here there's a property called
9177
08:20:16,797 --> 08:20:20,878
title and as the title say text
9178
08:20:20,878 --> 08:20:24,000
and for the text i'm going to get rid of
9179
08:20:22,477 --> 08:20:25,439
all this documentation there's excessive
9180
08:20:24,000 --> 08:20:27,680
amount of documentation here which kind
9181
08:20:31,200 --> 08:20:37,040
for instance and make it a constant
9182
08:20:39,200 --> 08:20:43,920
so you see after you've done that
9183
08:20:41,360 --> 08:20:46,240
your screen has a beautiful blue bar
9184
08:20:43,919 --> 08:20:47,919
here with the title of your uh
9185
08:20:46,240 --> 08:20:48,718
application or the title of your home
9186
08:20:48,718 --> 08:20:54,240
and there is a white canvas here for the
9187
08:20:51,439 --> 08:20:56,477
rest of your content to be displayed so
9188
08:20:54,240 --> 08:20:58,159
now there are a few things in here which
9189
08:20:56,477 --> 08:20:59,840
i could jump over but i kind of feel
9190
08:20:58,159 --> 08:21:02,079
like they're so important to explain
9191
08:20:59,840 --> 08:21:04,477
that i'm going to do that right now so
9192
08:21:02,080 --> 08:21:06,958
in flutter every time you have for
9193
08:21:04,477 --> 08:21:08,957
instance here there is a text you see
9194
08:21:06,957 --> 08:21:10,957
sorry there is an app bar an app bar if
9195
08:21:08,957 --> 08:21:13,119
you go into the source code of an app
9196
08:21:10,957 --> 08:21:16,397
bar let's go a little bit higher you can
9197
08:21:13,119 --> 08:21:18,637
see it it says i'm a stateful widget all
9198
08:21:16,398 --> 08:21:20,478
right so app bar in itself is a widget
9199
08:21:18,637 --> 08:21:22,239
so what we're doing here is saying we
9200
08:21:20,477 --> 08:21:24,637
have something called a scaffold let's
9201
08:21:22,240 --> 08:21:26,798
go to scaffold it itself is a stateful
9202
08:21:24,637 --> 08:21:28,637
widget so we're saying the main widget
9203
08:21:26,797 --> 08:21:30,159
we're returning from our build function
9204
08:21:28,637 --> 08:21:32,477
as you can see it should return a widget
9205
08:21:30,159 --> 08:21:34,398
is a scaffold which is a stateful widget
9206
08:21:32,477 --> 08:21:36,878
in itself it has a property called app
9207
08:21:34,398 --> 08:21:38,718
bar an app bar it itself is a stateful
9208
08:21:36,878 --> 08:21:41,200
widget which in turn has a property
9209
08:21:41,200 --> 08:21:45,520
if you look at the documentation it says
9210
08:21:46,477 --> 08:21:49,279
let me also make the screen a little bit
9211
08:21:49,279 --> 08:21:52,637
like this so you see it better
9212
08:21:52,637 --> 08:21:56,239
now the title is a widget and we're
9213
08:21:54,240 --> 08:21:58,080
saying oh we're going to use a text
9214
08:21:56,240 --> 08:22:00,558
widget if you look at text what it is is
9215
08:21:58,080 --> 08:22:03,600
a stateless widget it means internally
9216
08:22:00,558 --> 08:22:05,680
it states or its state can change and it
9217
08:22:03,599 --> 08:22:08,477
it doesn't have any mutable variables
9218
08:22:05,680 --> 08:22:09,840
okay oh i didn't want to change that
9219
08:22:09,840 --> 08:22:13,759
if you see what we're doing here when in
9220
08:22:11,680 --> 08:22:16,159
flutter you're just creating widgets
9221
08:22:13,759 --> 08:22:18,317
everywhere in flutter almost everything
9222
08:22:16,159 --> 08:22:20,000
is a widget either stateful or stateless
9223
08:22:18,317 --> 08:22:22,159
and you try to you need to kind of try
9224
08:22:20,000 --> 08:22:23,919
to stick to stateless widgets as much as
9225
08:22:22,159 --> 08:22:27,520
you can all right we're going to talk
9226
08:22:23,919 --> 08:22:27,519
more about stateful and stateless so
9227
08:22:27,599 --> 08:22:31,119
now that we've added the scaffold and
9228
08:22:29,439 --> 08:22:32,957
i've explained a little bit about these
9229
08:22:31,119 --> 08:22:36,159
widgets that were we've created and
9230
08:22:32,957 --> 08:22:38,159
we've done a command as here just to
9231
08:22:36,159 --> 08:22:40,079
hot reload the application or this
9232
08:22:40,080 --> 08:22:46,318
uh what we need to do next is to create
9233
08:22:47,119 --> 08:22:50,797
let's go and create some sort of a login
9234
08:22:50,797 --> 08:22:54,000
and you can see here i've written the
9235
08:22:52,477 --> 08:22:56,159
caption button on home page in the
9236
08:22:56,159 --> 08:23:01,200
or more accurately it could actually be
9237
08:23:01,200 --> 08:23:05,440
so i'm going to change that i'm going to
9238
08:23:05,439 --> 08:23:09,439
and button on the homepage in the center
9239
08:23:09,439 --> 08:23:14,000
display the caption to you there
9240
08:23:12,080 --> 08:23:16,718
to and i'm gonna change my notes here
9241
08:23:16,718 --> 08:23:20,958
now your task is to create a button on
9242
08:23:18,878 --> 08:23:23,279
the screen how do you do that well
9243
08:23:20,957 --> 08:23:25,680
in scaffold you see the scaffold at the
9244
08:23:23,279 --> 08:23:27,439
moment it's the owner of that bar on top
9245
08:23:27,439 --> 08:23:31,439
white content here so what you need to
9246
08:23:29,680 --> 08:23:32,878
do is to go and look at a property
9247
08:23:34,797 --> 08:23:39,599
in itself if i move my mouse over it
9248
08:23:36,718 --> 08:23:41,360
says okay give me a widget you see
9249
08:23:39,599 --> 08:23:44,477
and of course i could say well i have no
9250
08:23:41,360 --> 08:23:46,398
widgets null is also acceptable but in
9251
08:23:44,477 --> 08:23:50,239
this case we're going to create a button
9252
08:23:46,398 --> 08:23:52,159
called text button so text button is a
9253
08:23:50,240 --> 08:23:53,920
widget if you go into source code you'll
9254
08:23:53,919 --> 08:23:59,279
text button button style button and that
9255
08:23:56,317 --> 08:24:00,637
is a state full widget all right so
9256
08:23:59,279 --> 08:24:02,557
you're basically saying that i'm
9257
08:24:00,637 --> 08:24:04,000
creating a button and i want to allow
9258
08:24:02,558 --> 08:24:06,638
the user to do something with it all
9259
08:24:04,000 --> 08:24:08,317
right so we need to do as you can see
9260
08:24:06,637 --> 08:24:10,878
there is a little bit of an error here
9261
08:24:08,317 --> 08:24:12,718
to say that says unpressed is a
9262
08:24:10,878 --> 08:24:15,440
parameter that you haven't provided to
9263
08:24:12,718 --> 08:24:17,760
me so we need to tell this button
9264
08:24:17,759 --> 08:24:22,159
when this button is pressed it needs to
9265
08:24:20,159 --> 08:24:24,079
do something and this is a requirement
9266
08:24:22,159 --> 08:24:26,637
for the text button class that it's
9267
08:24:24,080 --> 08:24:28,398
telling you well i'm a button
9268
08:24:26,637 --> 08:24:30,557
what do you want me to do when i'm
9269
08:24:28,398 --> 08:24:33,040
pressed if you don't press if you don't
9270
08:24:30,558 --> 08:24:34,878
provide unpressed parameter to me i
9271
08:24:33,040 --> 08:24:37,040
don't i'm not even a button i could just
9272
08:24:34,878 --> 08:24:38,398
be a label and that is what this error
9273
08:24:37,040 --> 08:24:39,840
is all about is saying that if you're
9274
08:24:38,398 --> 08:24:41,040
creating a button make sure that you
9275
08:24:41,040 --> 08:24:46,558
what happens when the user presses on so
9276
08:24:46,558 --> 08:24:50,159
and i'm just going to get visual studio
9277
08:24:48,398 --> 08:24:54,080
to complete this code for me you can see
9278
08:24:50,159 --> 08:24:54,079
it says okay an empty function
9279
08:24:54,240 --> 08:24:57,680
a function with empty list of parameters
9280
08:24:59,279 --> 08:25:04,317
the code in itself is empty at the
9281
08:25:01,119 --> 08:25:06,239
moment okay so go after the create
9282
08:25:04,317 --> 08:25:07,759
creation of that function and then you
9283
08:25:06,240 --> 08:25:09,840
see that there is another that you have
9284
08:25:09,840 --> 08:25:13,360
you see text button you would say you
9285
08:25:12,080 --> 08:25:14,798
would probably just assume that oh a
9286
08:25:13,360 --> 08:25:17,840
text button should have some sort of a
9287
08:25:14,797 --> 08:25:18,717
string parameter that says what is my
9288
08:25:19,680 --> 08:25:24,080
if we write child here the beauty of
9289
08:25:24,080 --> 08:25:30,318
child is a widget so text button doesn't
9290
08:25:27,599 --> 08:25:31,919
doesn't make any assumptions about what
9291
08:25:30,317 --> 08:25:33,119
content you want to display on that
9292
08:25:33,119 --> 08:25:37,439
what it does it says i need to display
9293
08:25:35,360 --> 08:25:39,360
some widget anything it could be an
9294
08:25:37,439 --> 08:25:41,439
image it could be an icon it could be
9295
08:25:39,360 --> 08:25:43,119
whatever it could be a list of things
9296
08:25:41,439 --> 08:25:45,039
which is not a good idea to do but you
9297
08:25:45,919 --> 08:25:50,000
go and create a child widget and now
9298
08:25:48,398 --> 08:25:51,680
you've learned about the text widget so
9299
08:25:50,000 --> 08:25:53,680
i'm just gonna say a constant text
9300
08:25:51,680 --> 08:25:55,680
widget and in here we're just going to
9301
08:25:57,520 --> 08:26:01,279
and you'll see now all of a sudden you
9302
08:25:58,957 --> 08:26:03,119
have a register button there
9303
08:26:01,279 --> 08:26:04,317
so another cool feature now i want to
9304
08:26:03,119 --> 08:26:05,919
show you in visual studio and i think
9305
08:26:04,317 --> 08:26:09,520
it's available also in android stu is
9306
08:26:05,919 --> 08:26:11,279
that you can go and wrap your widgets
9307
08:26:09,520 --> 08:26:13,680
with other widgets so instead of for
9308
08:26:11,279 --> 08:26:15,680
instance saying that i want the text
9309
08:26:13,680 --> 08:26:18,240
button to be in the center and then you
9310
08:26:18,240 --> 08:26:23,440
you know it also exists you could do
9311
08:26:20,878 --> 08:26:25,200
command dot or command dot on mac or
9312
08:26:23,439 --> 08:26:27,199
control dot in windows and linux and
9313
08:26:25,200 --> 08:26:29,440
visual studio code on the widget that
9314
08:26:27,200 --> 08:26:30,878
you want to wrap in some other widget
9315
08:26:30,878 --> 08:26:34,797
you will get this beautiful menu that
9316
08:26:32,957 --> 08:26:36,637
says you you know you can wrap it with
9317
08:26:34,797 --> 08:26:39,039
many different things so i'm just going
9318
08:26:36,637 --> 08:26:42,000
to pronounce a wrap with center so as
9319
08:26:39,040 --> 08:26:45,440
you can see center is a widget that has
9320
08:26:42,000 --> 08:26:47,840
a child property all center does is that
9321
08:26:47,840 --> 08:26:55,279
horizontally and vertically it's child
9322
08:26:51,200 --> 08:26:56,718
inside the available space of the center
9323
08:26:56,718 --> 08:27:01,840
the entire available space in this case
9324
08:26:58,878 --> 08:27:04,398
as you can see is this entire white
9325
08:27:01,840 --> 08:27:06,477
background so center has access to that
9326
08:27:04,398 --> 08:27:09,680
entire white background right now
9327
08:27:06,477 --> 08:27:11,680
because center is the root widget of our
9328
08:27:09,680 --> 08:27:14,637
body which is the only thing that our
9329
08:27:11,680 --> 08:27:15,520
scaffold is showing at the moment
9330
08:27:15,520 --> 08:27:19,920
center then is able to center align this
9331
08:27:18,159 --> 08:27:22,797
text button so let's command s and you
9332
08:27:19,919 --> 08:27:24,637
can see the register button is centered
9333
08:27:22,797 --> 08:27:27,279
horizontally and vertically in the
9334
08:27:27,279 --> 08:27:32,317
now that i've talked about that i'm
9335
08:27:32,317 --> 08:27:37,520
and what we're going to do here is very
9336
08:27:39,680 --> 08:27:44,159
we now need to handle when the text
9337
08:27:44,159 --> 08:27:48,637
that we're going register a user with
9338
08:27:49,520 --> 08:27:54,240
we talked about this when i talked about
9339
08:27:51,119 --> 08:27:55,599
like uh dart in the previous chapters we
9340
08:27:55,599 --> 08:27:58,840
asynchronous and i'm not gonna go into
9341
08:27:58,840 --> 08:28:02,957
registration i'm sorry i'm not going to
9342
08:28:01,279 --> 08:28:05,439
talk about that in details because we've
9343
08:28:02,957 --> 08:28:07,119
talked about that in details before so
9344
08:28:05,439 --> 08:28:09,359
if you need to know about that i think
9345
08:28:07,119 --> 08:28:12,317
synchronous and asynchronous were
9346
08:28:09,360 --> 08:28:14,558
probably explained in um i'll have a
9347
08:28:14,558 --> 08:28:19,520
they were explained in chapter number
9348
08:28:16,878 --> 08:28:21,200
seven so if you haven't watched chapter
9349
08:28:19,520 --> 08:28:22,957
number seven i strongly suggest that you
9350
08:28:21,200 --> 08:28:24,477
do that if you don't know what sync and
9351
08:28:25,599 --> 08:28:28,877
what we need to do now is to tell
9352
08:28:28,878 --> 08:28:33,040
registering a user with firebase is an
9353
08:28:31,279 --> 08:28:35,599
asynchronous task so it's not going to
9354
08:28:33,040 --> 08:28:38,159
complete immediately so what we need to
9355
08:28:35,599 --> 08:28:41,039
do now is to tell flutter that the
9356
08:28:38,159 --> 08:28:42,957
button press is an asynchronous task and
9357
08:28:41,040 --> 08:28:46,718
all you need to do here is just to put
9358
08:28:42,957 --> 08:28:48,159
the keyword async in there okay
9359
08:28:59,200 --> 08:29:04,558
what we need to do is to have a look at
9360
08:29:01,439 --> 08:29:08,079
this link that i've provided for you
9361
08:29:04,558 --> 08:29:09,600
um i'm going to close this safari window
9362
08:29:16,080 --> 08:29:22,318
other sign-in methods great you can see
9363
08:29:25,439 --> 08:29:31,199
enable various sign-in methods
9364
08:29:33,680 --> 08:29:37,200
is not only limited to like google
9365
08:29:35,439 --> 08:29:40,159
services you can as you can see it can
9366
08:29:37,200 --> 08:29:42,558
allow you to enable facebook signing for
9367
08:29:42,558 --> 08:29:48,240
twitter or phone number sign-in so there
9368
08:29:45,360 --> 08:29:50,477
are various methods available
9369
08:29:48,240 --> 08:29:52,398
for you to enable in your flutter
9370
08:29:50,477 --> 08:29:54,718
application and in this application
9371
08:29:52,398 --> 08:29:55,600
we're gonna use email and password sign
9372
08:29:55,599 --> 08:29:59,840
and there's like documentation about all
9373
08:29:57,680 --> 08:30:02,080
of those in this link that i've provided
9374
08:30:02,080 --> 08:30:05,360
i'm not gonna go through the entire
9375
08:30:03,759 --> 08:30:06,557
contents of this to be honest with you
9376
08:30:05,360 --> 08:30:09,279
because there are just so much
9377
08:30:06,558 --> 08:30:11,760
information and we're not interested in
9378
08:30:09,279 --> 08:30:13,119
all of these but still i believe if
9379
08:30:11,759 --> 08:30:15,519
you're interested in firebase and
9380
08:30:13,119 --> 08:30:18,397
firebase authentication which we are
9381
08:30:15,520 --> 08:30:21,040
going to use in this course it is great
9382
08:30:18,398 --> 08:30:24,638
if you could just have a look at this
9383
08:30:21,040 --> 08:30:25,680
link that i provided for you here
9384
08:30:28,159 --> 08:30:32,159
is also right i've written here that i
9385
08:30:30,000 --> 08:30:35,360
need to talk about a little bit about
9386
08:30:32,159 --> 08:30:37,279
anonymous users you see firebase when
9387
08:30:35,360 --> 08:30:39,680
you start your application and you kick
9388
08:30:39,680 --> 08:30:44,398
you basically start the whole process of
9389
08:30:41,599 --> 08:30:46,239
firebase you say firebase start
9390
08:30:44,398 --> 08:30:48,478
firebase is amazing in that on the
9391
08:30:46,240 --> 08:30:50,958
client side it by default creates
9392
08:30:48,477 --> 08:30:52,397
something called an anonymous user so if
9393
08:30:50,957 --> 08:30:54,079
you talk with firebase with your
9394
08:30:52,398 --> 08:30:56,080
thoughts or application and say who's
9395
08:30:54,080 --> 08:30:57,600
the current user even if you haven't
9396
08:30:56,080 --> 08:30:59,440
done anything with firebase before if
9397
08:30:57,599 --> 08:31:00,797
you haven't configured it or actually
9398
08:31:00,797 --> 08:31:05,520
which we have already done but if you
9399
08:31:03,439 --> 08:31:07,439
haven't called any firebase functions
9400
08:31:05,520 --> 08:31:09,360
before in your application you could
9401
08:31:07,439 --> 08:31:11,119
just say firebase who's the current user
9402
08:31:09,360 --> 08:31:13,440
and firebase will just tell you here's a
9403
08:31:11,119 --> 08:31:15,119
current user it's an anonymous user so
9404
08:31:13,439 --> 08:31:17,119
that user is pretty much never going to
9405
08:31:15,119 --> 08:31:19,919
be empty it's never going to be null or
9406
08:31:17,119 --> 08:31:21,759
nil or whatever you like to call it so
9407
08:31:19,919 --> 08:31:24,239
or if you're python developer you just
9408
08:31:21,759 --> 08:31:25,519
call it none so that user is almost
9409
08:31:25,520 --> 08:31:30,477
so just know that firebase has a concept
9410
08:31:30,477 --> 08:31:33,840
i'm just going to take that in my notes
9411
08:31:33,840 --> 08:31:37,360
so what we need to do in the next step
9412
08:31:35,840 --> 08:31:38,718
i'm going to bring the caption up so we
9413
08:31:37,360 --> 08:31:40,637
have to kind of like speed things up a
9414
08:31:38,718 --> 08:31:41,920
little bit here because there's so much
9415
08:31:41,919 --> 08:31:44,477
um what we need to do here now is just
9416
08:31:44,477 --> 08:31:49,119
create two text fields now one for the
9417
08:31:47,119 --> 08:31:52,239
email and the other one for the password
9418
08:31:49,119 --> 08:31:53,919
and we are going to then put our button
9419
08:31:53,919 --> 08:31:59,119
next to those two text fields so text
9420
08:31:56,159 --> 08:32:00,477
field one email text field 2 password
9421
08:31:59,119 --> 08:32:03,039
and then the register button as the
9422
08:32:00,477 --> 08:32:04,397
third component now if you have
9423
08:32:03,040 --> 08:32:06,878
components like this that you want to
9424
08:32:04,398 --> 08:32:09,360
stack vertically one on top of each
9425
08:32:06,878 --> 08:32:11,600
other and one after each other then you
9426
08:32:09,360 --> 08:32:12,797
need to use a which is called column all
9427
08:32:12,797 --> 08:32:17,439
so what i'm going to do here is go here
9428
08:32:15,360 --> 08:32:19,040
to the center and kind of like remove
9429
08:32:17,439 --> 08:32:20,797
that i'm just going to say command dot
9430
08:32:19,040 --> 08:32:22,958
in mac or control dot in windows on
9431
08:32:20,797 --> 08:32:25,279
linux and just say remove this widget
9432
08:32:22,957 --> 08:32:28,159
okay i don't want to center anymore
9433
08:32:25,279 --> 08:32:30,159
command s results register buttons on
9434
08:32:28,159 --> 08:32:31,919
top left and what i'm going to do is i'm
9435
08:32:30,159 --> 08:32:34,718
going to command up again and say wrap
9436
08:32:31,919 --> 08:32:37,039
with column okay now if you command s
9437
08:32:34,718 --> 08:32:38,878
you'll not see anything directly on the
9438
08:32:38,878 --> 08:32:44,240
but what was created for you is a column
9439
08:32:41,360 --> 08:32:46,797
widget with children property which is a
9440
08:32:44,240 --> 08:32:48,398
list of widgets that it can display so
9441
08:32:46,797 --> 08:32:51,360
the first thing we're gonna do is to
9442
08:32:51,360 --> 08:32:54,558
so let me have a look here and just make
9443
08:32:54,558 --> 08:33:00,317
i'm just going to say a text field
9444
08:33:02,240 --> 08:33:05,920
save you'll see two text fields display
9445
08:33:04,240 --> 08:33:09,440
there so i can actually go in there and
9446
08:33:09,439 --> 08:33:14,557
like that so now we've created two text
9447
08:33:16,878 --> 08:33:20,637
i'm going to note that here a ticket in
9448
08:33:18,797 --> 08:33:22,637
my notes so we've talked about it now
9449
08:33:22,637 --> 08:33:27,759
grab the text that is displayed in this
9450
08:33:25,680 --> 08:33:29,680
take these text fields and when you
9451
08:33:27,759 --> 08:33:32,000
press the register button pass that to
9452
08:33:29,680 --> 08:33:33,200
firebase okay now you see i'm telling
9453
08:33:32,000 --> 08:33:35,200
you that when you press the button you
9454
08:33:33,200 --> 08:33:37,520
need to grab the text inside these text
9455
08:33:35,200 --> 08:33:40,000
fields but inside this function of
9456
08:33:37,520 --> 08:33:42,477
onpress you have no access to these text
9457
08:33:40,000 --> 08:33:44,957
fields okay so you kind of need to pass
9458
08:33:42,477 --> 08:33:47,840
information from this text field and
9459
08:33:44,957 --> 08:33:50,000
this text field to a text button and the
9460
08:33:47,840 --> 08:33:53,119
way to do that is is using something
9461
08:33:54,317 --> 08:33:58,398
a text or a text editing controller a
9462
08:33:56,957 --> 08:34:00,797
text editing controller is kind of like
9463
08:33:58,398 --> 08:34:03,280
a proxy object that you pass
9464
08:34:00,797 --> 08:34:05,520
to your text field and the text field it
9465
08:34:03,279 --> 08:34:07,840
writes its current text all the time to
9466
08:34:05,520 --> 08:34:10,080
that text editing controller and in your
9467
08:34:07,840 --> 08:34:13,599
text button here then you can say
9468
08:34:10,080 --> 08:34:14,958
controller text okay so you can then so
9469
08:34:13,599 --> 08:34:16,877
it's kind of like if your text field is
9470
08:34:14,957 --> 08:34:18,159
sitting here and your text button is
9471
08:34:16,878 --> 08:34:20,080
sitting here then you'll have something
9472
08:34:18,159 --> 08:34:22,797
here in the middle that is your proxy
9473
08:34:20,080 --> 08:34:24,558
the text editing controller that is
9474
08:34:22,797 --> 08:34:27,360
grabbing me for latest information from
9475
08:34:24,558 --> 08:34:29,120
the text field and then your the text
9476
08:34:27,360 --> 08:34:30,637
button can read that information okay so
9477
08:34:29,119 --> 08:34:32,557
just know that a text editing controller
9478
08:34:32,558 --> 08:34:37,440
now that we need to manage some state we
9479
08:34:35,360 --> 08:34:39,279
need to manage this proxy object then we
9480
08:34:37,439 --> 08:34:42,079
need to convert our home page to a
9481
08:34:39,279 --> 08:34:44,079
stateful widget okay so go in here to
9482
08:34:42,080 --> 08:34:45,760
your home page command dot and say
9483
08:34:44,080 --> 08:34:47,760
convert to stateful widgets so all of a
9484
08:34:45,759 --> 08:34:50,000
sudden stateful widget all right
9485
08:34:50,000 --> 08:34:54,878
um now what we need to do is to go and
9486
08:34:54,878 --> 08:34:59,279
controllers so i'm going to go in here
9487
08:35:03,599 --> 08:35:09,199
what do we call them do i have any
9488
08:35:05,040 --> 08:35:09,200
specific desire here let me see my notes
9489
08:35:10,878 --> 08:35:16,000
so there's no desire really for the
9490
08:35:12,477 --> 08:35:16,957
naming so let's just say late final text
9491
08:35:16,957 --> 08:35:21,279
controller and let's call it here email
9492
08:35:21,279 --> 08:35:25,119
and the other one i'm just gonna
9493
08:35:25,119 --> 08:35:29,119
now in the previous chapters we haven't
9494
08:35:26,558 --> 08:35:31,920
talked about late what late is this
9495
08:35:29,119 --> 08:35:34,317
keyword in dark that tells your program
9496
08:35:31,919 --> 08:35:36,717
that although this print although this
9497
08:35:34,317 --> 08:35:39,680
variable has no value right now but i
9498
08:35:36,718 --> 08:35:42,080
promise to assign a value to it before
9499
08:35:39,680 --> 08:35:44,000
it is used so it's kind of like a it's a
9500
08:35:44,000 --> 08:35:48,159
late literally means that i'm not ready
9501
08:35:46,159 --> 08:35:50,637
right now i will do it later i'm not
9502
08:35:48,159 --> 08:35:53,119
ready to assign a value to this so
9503
08:35:50,637 --> 08:35:54,397
what we need to do now is to
9504
08:35:54,398 --> 08:35:58,558
is to create these values now
9505
08:35:56,957 --> 08:36:00,477
you need to also know something about
9506
08:35:58,558 --> 08:36:02,638
stateful widgets now that our homepage
9507
08:36:00,477 --> 08:36:04,000
state is a stateful widget it will have
9508
08:36:06,159 --> 08:36:11,040
functions one is called init state i
9509
08:36:09,040 --> 08:36:13,760
believe and the other one called is
9510
08:36:11,040 --> 08:36:15,280
disposed now init state is a function
9511
08:36:13,759 --> 08:36:17,759
that will be called by flutter
9512
08:36:15,279 --> 08:36:20,878
automatically when it creates your home
9513
08:36:17,759 --> 08:36:23,039
page so it says okay now you have the
9514
08:36:20,878 --> 08:36:24,558
ability to create all your variables or
9515
08:36:25,520 --> 08:36:29,920
now whenever this homepage then dies and
9516
08:36:28,000 --> 08:36:31,759
goes out of the memory or it's trying to
9517
08:36:29,919 --> 08:36:33,839
go out the memory it will also get a
9518
08:36:34,797 --> 08:36:38,159
you've said that in the contract i've
9519
08:36:36,957 --> 08:36:39,759
written that i'm going to provide a
9520
08:36:38,159 --> 08:36:41,680
value for these emails email and
9521
08:36:39,759 --> 08:36:43,519
password text editing controllers and
9522
08:36:41,680 --> 08:36:45,360
the best way to do that is to go into
9523
08:36:48,477 --> 08:36:53,200
assign those to proper values so i'm
9524
08:36:53,200 --> 08:36:57,119
email is text editing controller like
9525
08:36:58,878 --> 08:37:02,718
and i'm gonna do the same thing for the
9526
08:37:02,718 --> 08:37:07,600
now you also need to understand that you
9527
08:37:05,279 --> 08:37:10,637
after you've created these two you also
9528
08:37:07,599 --> 08:37:13,279
need to dispose of them all right so
9529
08:37:10,637 --> 08:37:15,039
go in and overwrite your dispose
9530
08:37:15,040 --> 08:37:22,080
and then say email dispose and password
9531
08:37:19,919 --> 08:37:24,159
so a lot of developers forget to do this
9532
08:37:22,080 --> 08:37:26,558
especially like newcomers so don't make
9533
08:37:24,159 --> 08:37:28,637
that mistake so you created the text
9534
08:37:26,558 --> 08:37:32,317
editing controllers and you're also in
9535
08:37:28,637 --> 08:37:35,360
charge of disposing them okay
9536
08:37:35,360 --> 08:37:40,317
okay uh so we've done that already
9537
08:37:38,797 --> 08:37:41,759
after you've created your text editing
9538
08:37:40,317 --> 08:37:43,520
controllers you need to go to your text
9539
08:37:43,520 --> 08:37:46,957
those controllers to your text field so
9540
08:37:45,520 --> 08:37:50,000
in here there's a parameter called
9541
08:37:46,957 --> 08:37:52,000
controller and just say email
9542
08:37:50,000 --> 08:37:53,680
and for your text field on the second
9543
08:37:52,000 --> 08:37:55,599
one which is for your password say
9544
08:37:55,599 --> 08:38:00,557
it's password so what is happening now
9545
08:37:58,080 --> 08:38:01,600
is you hooked this proxy object that sat
9546
08:38:01,599 --> 08:38:05,439
this one which is your email or password
9547
08:38:03,759 --> 08:38:07,039
text editing controller to your text
9548
08:38:05,439 --> 08:38:08,877
field that is sitting here okay you
9549
08:38:07,040 --> 08:38:10,477
still haven't hooked it to your text
9550
08:38:08,878 --> 08:38:12,240
button which is sitting here so this
9551
08:38:10,477 --> 08:38:14,477
link is kind of broken and we're gonna
9552
08:38:14,477 --> 08:38:19,040
okay take it in the notes that we've
9553
08:38:19,040 --> 08:38:22,718
so what we need to do now at the moment
9554
08:38:20,878 --> 08:38:24,797
if i press command s you will see no
9555
08:38:22,718 --> 08:38:26,080
visible changes on the screen however
9556
08:38:24,797 --> 08:38:27,439
there's a little bit of a problem with
9557
08:38:26,080 --> 08:38:29,520
our text fields as you can see they
9558
08:38:27,439 --> 08:38:32,239
don't have any hint they don't tell the
9559
08:38:29,520 --> 08:38:34,240
user what they expect the user to
9560
08:38:34,240 --> 08:38:37,760
what we need to do now is to go and add
9561
08:38:36,000 --> 08:38:38,637
something to these text fields called a
9562
08:38:38,637 --> 08:38:42,557
a hint is a piece of information
9563
08:38:42,558 --> 08:38:47,360
and usually kind of like very subtle
9564
08:38:45,279 --> 08:38:49,520
color that tells the user about the
9565
08:38:47,360 --> 08:38:50,718
information that this text field expects
9566
08:38:50,718 --> 08:38:56,159
and that hint will automatically be
9567
08:38:52,797 --> 08:38:58,317
removed as soon as the user types at
9568
08:38:56,159 --> 08:39:00,637
least one character on that text field
9569
08:38:58,317 --> 08:39:01,919
okay so let's go to the first text field
9570
08:39:04,000 --> 08:39:09,279
and i believe it's an input decoration
9571
08:39:06,000 --> 08:39:11,279
and then say input decoration okay
9572
08:39:09,279 --> 08:39:12,637
and for the hint there's so much
9573
08:39:11,279 --> 08:39:13,840
information on the screen we can't see
9574
08:39:13,840 --> 08:39:19,680
and there is a hint text as you can see
9575
08:39:16,477 --> 08:39:23,119
hints text and it expects a string so in
9576
08:39:19,680 --> 08:39:26,159
here say please enter or just say enter
9577
08:39:26,159 --> 08:39:29,279
and you can see it's suggesting this to
9578
08:39:27,759 --> 08:39:30,477
be a constant so i'm going to make it a
9579
08:39:30,477 --> 08:39:34,159
and a little bit of a comma there as
9580
08:39:32,558 --> 08:39:35,680
well and you can see now it says enter
9581
08:39:35,680 --> 08:39:40,477
and copy and paste this decoration as
9582
08:39:38,000 --> 08:39:44,637
well and put it in the next text field
9583
08:39:40,477 --> 08:39:46,159
so say that enter your password
9584
08:39:46,159 --> 08:39:50,079
so let's enter your email here enter
9585
08:39:52,477 --> 08:39:56,637
let me also make sure that that is
9586
08:39:54,159 --> 08:39:57,439
correct there and take it in the box so
9587
08:39:57,439 --> 08:40:00,957
then if you start typing in those fields
9588
08:39:59,360 --> 08:40:02,398
you can see that the hints disappears as
9589
08:40:00,957 --> 08:40:04,797
soon as you type something and if you
9590
08:40:02,398 --> 08:40:06,240
remove that character then the hint also
9591
08:40:04,797 --> 08:40:09,439
disappears and the same thing for the
9592
08:40:14,398 --> 08:40:18,718
work done here and we need to get
9593
08:40:16,317 --> 08:40:20,477
through the authentication so when you
9594
08:40:18,718 --> 08:40:22,477
press this text button here where we
9595
08:40:20,477 --> 08:40:24,797
need to do authentication and that means
9596
08:40:22,477 --> 08:40:26,637
we're just going to register for now
9597
08:40:24,797 --> 08:40:27,840
so what you need to do is you need to
9598
08:40:27,840 --> 08:40:32,637
firebase so firebase was our dependency
9599
08:40:30,558 --> 08:40:34,718
and using the import statement you can
9600
08:40:32,637 --> 08:40:36,397
actually grab the content that it was
9601
08:40:34,718 --> 08:40:38,558
created for firebase and bring it into
9602
08:40:38,558 --> 08:40:43,840
so as you can see here we're gonna bring
9603
08:40:46,797 --> 08:40:50,159
now command s you don't see any
9604
08:40:48,159 --> 08:40:51,680
difference on the screen because an
9605
08:40:50,159 --> 08:40:55,040
import statement doesn't really change
9606
08:40:51,680 --> 08:40:56,718
the state of your application as such
9607
08:41:00,240 --> 08:41:02,958
i'm going to take it here as well that
9608
08:41:02,957 --> 08:41:07,439
so what we need to do now is to upon
9609
08:41:05,439 --> 08:41:09,919
pressing this button where we're going
9610
08:41:09,919 --> 08:41:14,797
username and password from these text
9611
08:41:14,797 --> 08:41:19,919
username or sorry email and i'm going to
9612
08:41:19,919 --> 08:41:24,717
i'm going to say final password
9613
08:41:26,000 --> 08:41:30,718
we're going to our email and password
9614
08:41:28,080 --> 08:41:32,478
controllers and grabbing their text
9615
08:41:30,718 --> 08:41:34,558
which is the latest text that the user
9616
08:41:32,477 --> 08:41:35,599
entered in those fields okay
9617
08:41:35,599 --> 08:41:39,519
after we've done that now you can go and
9618
08:41:44,398 --> 08:41:48,958
and then you will say create user with
9619
08:41:47,360 --> 08:41:49,920
email and password you can see this is a
9620
08:41:49,919 --> 08:41:54,797
that allows you to register or create a
9621
08:41:52,080 --> 08:41:56,318
user as its name indicates uh with
9622
08:41:56,317 --> 08:42:01,759
um i'm gonna do that so as you can see
9623
08:41:58,477 --> 08:42:03,439
here as well this thing returns a future
9624
08:42:05,439 --> 08:42:10,877
so this is this is not nothing that you
9625
08:42:07,520 --> 08:42:11,680
can just like call and say hey do this
9626
08:42:12,797 --> 08:42:17,439
without actually awaiting on it
9627
08:42:15,520 --> 08:42:19,200
otherwise it will just say here i am a
9628
08:42:17,439 --> 08:42:21,279
future i'm something that i will
9629
08:42:19,200 --> 08:42:23,840
calculate something in the future and
9630
08:42:21,279 --> 08:42:25,919
by not putting a weight before that call
9631
08:42:23,840 --> 08:42:27,920
you will only get the instance of future
9632
08:42:25,919 --> 08:42:30,159
you will not actually get the work that
9633
08:42:27,919 --> 08:42:31,599
it's doing you will get like a wrapper
9634
08:42:30,159 --> 08:42:33,520
around the work saying that this is the
9635
08:42:31,599 --> 08:42:35,359
kind of work i'm gonna do but if you
9636
08:42:33,520 --> 08:42:37,520
have weight on it it will actually
9637
08:42:37,520 --> 08:42:40,878
if that makes any sense so i've
9638
08:42:39,279 --> 08:42:42,957
explained the weight in that chapter i
9639
08:42:40,878 --> 08:42:44,878
think also chapter seven or whatever it
9640
08:42:42,957 --> 08:42:47,039
was when we talked about more advanced
9641
08:42:44,878 --> 08:42:48,797
topics in dart so please have a look at
9642
08:42:48,797 --> 08:42:53,599
um after doing that you will see that
9643
08:42:51,439 --> 08:42:55,759
the return of this is actually future of
9644
08:42:53,599 --> 08:42:58,079
a user credential so what i'm going to
9645
08:42:55,759 --> 08:43:00,239
do is i'm going to say final user
9646
08:43:00,240 --> 08:43:04,558
and then i'm going to print it user
9647
08:43:06,558 --> 08:43:11,280
and just hot restart here just in case
9648
08:43:09,360 --> 08:43:13,760
because we didn't import so what i'm
9649
08:43:11,279 --> 08:43:16,957
going to do in enter email here i'm
9650
08:43:13,759 --> 08:43:18,557
going to say pixelityab.gmail.com
9651
08:43:16,957 --> 08:43:20,557
and for the password i'm just going to
9652
08:43:23,119 --> 08:43:28,477
so let's bring our console up so we can
9653
08:43:26,240 --> 08:43:29,440
see what our application prints to the
9654
08:43:29,439 --> 08:43:33,520
and i'm just going to say register which
9655
08:43:31,520 --> 08:43:36,317
we're going to get an error for right
9656
08:43:36,317 --> 08:43:41,759
and you can see here it says no firebase
9657
08:43:39,520 --> 08:43:44,957
app default has been created called
9658
08:43:46,080 --> 08:43:49,680
this is i mean this is really good that
9659
08:43:47,680 --> 08:43:52,398
we're getting this because i actually
9660
08:43:49,680 --> 08:43:56,637
have planned for us to fix that
9661
08:43:52,398 --> 08:43:59,120
um but before we go ahead and do that
9662
08:43:56,637 --> 08:44:01,200
um i should probably explain what this
9663
08:43:59,119 --> 08:44:02,878
is why this is happening you see
9664
08:44:01,200 --> 08:44:04,398
firebase there was there was if you
9665
08:44:02,878 --> 08:44:06,080
remember when we configured it there was
9666
08:44:04,398 --> 08:44:07,760
a file created here for us called
9667
08:44:07,759 --> 08:44:12,239
and it has a lot of code in it and then
9668
08:44:09,759 --> 08:44:15,359
there's like a configuration here uh
9669
08:44:12,240 --> 08:44:17,520
that here you see android and for ios as
9670
08:44:15,360 --> 08:44:18,797
well now what firebase is complaining
9671
08:44:17,520 --> 08:44:20,477
about is saying that you've created this
9672
08:44:18,797 --> 08:44:22,317
configuration but you've never actually
9673
08:44:22,317 --> 08:44:26,558
poor firebase so what we need to do now
9674
08:44:24,878 --> 08:44:27,680
before we actually do the configuration
9675
08:44:27,680 --> 08:44:30,317
something that you can immediately see
9676
08:44:29,040 --> 08:44:31,840
on the screen which is which is
9677
08:44:31,840 --> 08:44:36,477
you see foo bar bas is your password it
9678
08:44:34,000 --> 08:44:38,317
shouldn't be visible to the user so when
9679
08:44:36,477 --> 08:44:41,040
you're typing it it should be a password
9680
08:44:38,317 --> 08:44:43,279
field and at the same time this field
9681
08:44:41,040 --> 08:44:45,280
here you see is is an email field but
9682
08:44:43,279 --> 08:44:47,759
where is the add sign at sign isn't
9683
08:44:45,279 --> 08:44:49,840
immediately visible here so you need to
9684
08:44:47,759 --> 08:44:51,439
tell these text fields to be configured
9685
08:44:49,840 --> 08:44:54,558
in a specific way so that they're
9686
08:44:51,439 --> 08:44:56,397
actually suitable for email and password
9687
08:44:56,398 --> 08:45:00,638
so i'm going to get rid of this bar on
9688
08:44:58,240 --> 08:45:02,558
the right oh sorry on the left
9689
08:45:00,637 --> 08:45:03,919
and what we need to do is to bring up
9690
08:45:03,919 --> 08:45:08,239
for the next thing for the next topic to
9691
08:45:08,240 --> 08:45:10,478
first what we're going to do is to make
9692
08:45:14,797 --> 08:45:18,717
what you need to do here in your
9693
08:45:16,317 --> 08:45:22,477
decoration of the password field go in
9694
08:45:18,718 --> 08:45:23,840
here and say obscure um actually it's
9695
08:45:22,477 --> 08:45:25,680
not in the decorations right here
9696
08:45:25,680 --> 08:45:31,439
it has true and if you press s on that
9697
08:45:28,317 --> 08:45:33,279
you'll see that your text is now obscure
9698
08:45:35,279 --> 08:45:39,439
false and then you will also do
9699
08:45:39,439 --> 08:45:42,637
false these are three important
9700
08:45:42,637 --> 08:45:46,637
provide here now you see enable
9701
08:45:44,558 --> 08:45:48,798
suggestions is usually like as you're
9702
08:45:46,637 --> 08:45:50,317
typing in a text field depending on your
9703
08:45:50,317 --> 08:45:53,040
it will provide you suggestions like
9704
08:45:53,040 --> 08:45:56,000
in a password field you don't want to do
9705
08:45:54,957 --> 08:45:58,000
that you don't want to have any
9706
08:45:56,000 --> 08:46:00,317
suggestions so that's for enabled
9707
08:45:58,000 --> 08:46:02,878
suggestions also autocorrect is when you
9708
08:46:00,317 --> 08:46:04,317
try to type something and you know you
9709
08:46:02,878 --> 08:46:05,600
all probably know what autocorrect is so
9710
08:46:04,317 --> 08:46:06,957
i'm not going to explain it so you're
9711
08:46:05,599 --> 08:46:08,797
disabling autocorrect based on your
9712
08:46:06,957 --> 08:46:12,239
password password field which makes
9713
08:46:12,240 --> 08:46:17,040
let's go and bring these two properties
9714
08:46:14,159 --> 08:46:18,317
also to our email field which is
9715
08:46:19,439 --> 08:46:24,477
and what we're also going to do is to
9716
08:46:21,680 --> 08:46:27,520
tell it that it is an email it needs an
9717
08:46:24,477 --> 08:46:29,520
email keyboard so let's go in here and
9718
08:46:29,520 --> 08:46:33,840
or keyboard i think type and it's called
9719
08:46:38,878 --> 08:46:42,159
there's the email address so
9720
08:46:42,159 --> 08:46:48,558
now if i then go here you can see
9721
08:46:45,520 --> 08:46:51,760
there's an ad sign so i can um oh sorry
9722
08:46:48,558 --> 08:46:53,200
you can't see it so i'm going to do
9723
08:46:51,759 --> 08:46:55,519
this so you can actually see the that
9724
08:46:53,200 --> 08:46:57,520
sign so you can see their keyboard here
9725
08:46:55,520 --> 08:46:59,760
and then there's an ad sign right there
9726
08:47:01,360 --> 08:47:06,000
that's for that and then suggestions are
9727
08:47:03,520 --> 08:47:09,279
also disabled so as i type there's no
9728
08:47:06,000 --> 08:47:10,558
suggestions really for my um text
9729
08:47:09,279 --> 08:47:12,159
because you don't want suggestions on
9730
08:47:10,558 --> 08:47:13,920
email fields emails are usually like
9731
08:47:13,919 --> 08:47:19,039
um or not usually but sometimes so you
9732
08:47:16,637 --> 08:47:21,279
don't want any suggestions there okay
9733
08:47:19,040 --> 08:47:24,958
we've done that i wanna take all of
9734
08:47:21,279 --> 08:47:28,239
these items as done in in my notes
9735
08:47:24,957 --> 08:47:31,199
now the next thing we need to do
9736
08:47:31,200 --> 08:47:37,040
initialization of our firebase app so
9737
08:47:34,080 --> 08:47:38,160
we're gonna do it naively right now so
9738
08:47:38,159 --> 08:47:42,398
because you see we still have this error
9739
08:47:45,520 --> 08:47:52,957
pixelity a b gmail.com and i say
9740
08:47:52,957 --> 08:47:58,000
i say register we will still get this
9741
08:47:55,119 --> 08:48:00,797
error that says no if no firebase app is
9742
08:48:00,797 --> 08:48:03,759
so what we need to do is to actually
9743
08:48:03,759 --> 08:48:08,239
sorry initialize firebase before we do
9744
08:48:06,159 --> 08:48:10,878
firebase instance create user with email
9745
08:48:12,718 --> 08:48:16,878
what we need to do then is to go here
9746
08:48:28,878 --> 08:48:34,080
auth instance or initialize app
9747
08:48:32,477 --> 08:48:36,000
i've actually forgotten the syntax for
9748
08:48:36,000 --> 08:48:41,279
let's see if we actually can learn
9749
08:48:38,637 --> 08:48:43,119
how to do that by going to our
9750
08:48:44,637 --> 08:48:48,079
initialize you can see it should be done
9751
08:48:48,080 --> 08:48:52,398
and what we need to do then is to import
9752
08:48:50,317 --> 08:48:54,599
firebase options as it's as it's showing
9753
08:48:52,398 --> 08:48:57,440
here firebase options and then await
9754
08:48:54,599 --> 08:49:00,079
firebase.initialize app with this okay
9755
08:48:57,439 --> 08:49:01,840
so let's let's kind of grab that code
9756
08:49:00,080 --> 08:49:03,840
and then go into our main guard file and
9757
08:49:01,840 --> 08:49:07,360
import firebase options so i'm going to
9758
08:49:19,439 --> 08:49:23,199
this code that was provided there for us
9759
08:49:21,200 --> 08:49:25,360
so i'm gonna remove the comments
9760
08:49:23,200 --> 08:49:28,080
command s and i can still see that
9761
08:49:25,360 --> 08:49:30,080
firebase isn't imported so we're going
9762
08:49:28,080 --> 08:49:32,240
to import it by doing import library
9763
08:49:30,080 --> 08:49:33,760
package firebase core firebase core here
9764
08:49:32,240 --> 08:49:35,120
what i did here is that i basically took
9765
08:49:33,759 --> 08:49:37,119
advantage something that's built into
9766
08:49:35,119 --> 08:49:39,439
visual studio code in order for me to
9767
08:49:37,119 --> 08:49:41,439
get the import statement automatically
9768
08:49:39,439 --> 08:49:42,557
so i'm going to do command dot on it and
9769
08:49:42,558 --> 08:49:46,798
import this dart file so i'm just gonna
9770
08:49:44,637 --> 08:49:50,000
take advantage of that why not
9771
08:49:46,797 --> 08:49:51,840
and you can see that it is imported here
9772
08:49:52,637 --> 08:49:57,919
now that we've done that um i'm gonna
9773
08:49:54,878 --> 08:50:02,240
press command s my state is preserved in
9774
08:49:57,919 --> 08:50:04,877
the uh in my phone here and let me bring
9775
08:50:02,240 --> 08:50:07,440
the logs here clean them and then i'm
9776
08:50:04,878 --> 08:50:08,477
gonna press the register button
9777
08:50:08,477 --> 08:50:13,840
uh here and we got an error here and it
9778
08:50:11,759 --> 08:50:15,759
says device unlock initializing all
9779
08:50:13,840 --> 08:50:18,398
firebase apis and firebase preparing to
9780
08:50:15,759 --> 08:50:21,439
create blah blah and let's actually see
9781
08:50:21,439 --> 08:50:25,840
it is on handle exception request
9782
08:50:26,637 --> 08:50:31,279
unreachable host and that is probably
9783
08:50:29,279 --> 08:50:33,599
because i actually don't have proper
9784
08:50:35,439 --> 08:50:39,119
so i'm gonna go here and i'm gonna go to
9785
08:50:39,119 --> 08:50:43,439
actually great that you're seeing these
9786
08:50:41,040 --> 08:50:45,520
errors because these things do happen so
9787
08:50:45,520 --> 08:50:48,878
so make sure that it's gonna connect to
9788
08:50:50,159 --> 08:50:53,599
and it connected i'm gonna go back to
9789
08:50:53,599 --> 08:50:58,717
clear the logs oh my god there are so
9790
08:50:56,317 --> 08:51:00,239
many things displayed there
9791
08:50:58,718 --> 08:51:01,600
so then what i'm gonna do is i'm gonna
9792
08:51:00,240 --> 08:51:03,280
repeat the same thing i'm gonna say
9793
08:51:07,360 --> 08:51:12,119
next state that i have prepared that it
9794
08:51:10,398 --> 08:51:15,280
says you can see in the errors it says
9795
08:51:15,279 --> 08:51:20,797
what is happening here i'm not taking my
9796
08:51:18,637 --> 08:51:22,718
notes that we've talked about the other
9797
08:51:22,718 --> 08:51:27,920
what is happening here is that
9798
08:51:24,637 --> 08:51:30,000
we haven't actually told firebase
9799
08:51:27,919 --> 08:51:32,397
that we are going to take advantage of
9800
08:51:30,000 --> 08:51:34,317
email and password signing combination
9801
08:51:32,398 --> 08:51:37,680
as i told you before there are various
9802
08:51:34,317 --> 08:51:40,718
way for various ways for a firebase to
9803
08:51:37,680 --> 08:51:43,599
allow us to register a user uh apple
9804
08:51:40,718 --> 08:51:45,600
login um you can do email and password
9805
08:51:43,599 --> 08:51:47,599
combination you can do facebook you can
9806
08:51:47,599 --> 08:51:51,279
maybe twitter as well yeah i think
9807
08:51:48,957 --> 08:51:53,680
twitter was there as well so you need to
9808
08:51:56,159 --> 08:52:01,599
allow this combination all right
9809
08:52:01,599 --> 08:52:05,759
now i've explained that let's bring up
9810
08:52:03,520 --> 08:52:09,680
safari or your favorite browser maybe
9811
08:52:05,759 --> 08:52:11,519
chrome and let's go to uh console
9812
08:52:09,680 --> 08:52:13,680
firebase google.com i'm going to bring
9813
08:52:11,520 --> 08:52:15,200
my browser on the screen so you can also
9814
08:52:15,200 --> 08:52:20,080
and i'm going to then find our
9815
08:52:17,759 --> 08:52:22,797
application which was called
9816
08:52:20,080 --> 08:52:23,478
uh my notes flutter project okay so go
9817
08:52:23,477 --> 08:52:27,040
consolefirebase.google.com and find your
9818
08:52:25,520 --> 08:52:29,520
project that you created in the previous
9819
08:52:29,520 --> 08:52:33,279
then go to authentication as i as i show
9820
08:52:36,878 --> 08:52:40,797
authentication actually get started
9821
08:52:43,680 --> 08:52:47,520
uh what we need is this email and
9822
08:52:45,759 --> 08:52:49,759
password combination so go email and
9823
08:52:47,520 --> 08:52:51,200
password combination and just allow it
9824
08:52:53,919 --> 08:52:56,957
and that's it that's all you have to do
9825
08:52:56,957 --> 08:52:59,759
grab this screen just kind of bring it
9826
08:52:59,759 --> 08:53:05,199
monitor so you don't see it clean the
9827
08:53:05,200 --> 08:53:09,680
so you can see now all of a sudden you
9828
08:53:07,279 --> 08:53:10,957
got user credentials back from firebase
9829
08:53:14,080 --> 08:53:19,360
register your application like register
9830
08:53:16,558 --> 08:53:21,520
a real user with firebase like that is
9831
08:53:19,360 --> 08:53:23,520
actually magical so i'm gonna
9832
08:53:21,520 --> 08:53:25,439
click on my notes that i've talked about
9833
08:53:26,558 --> 08:53:30,477
however you see this this is a little
9834
08:53:28,159 --> 08:53:32,637
bit problematic in that by pressing the
9835
08:53:30,477 --> 08:53:34,718
button but we're actually initializing
9836
08:53:32,637 --> 08:53:37,119
an application and then we're doing the
9837
08:53:34,718 --> 08:53:38,718
create user with email and password what
9838
08:53:37,119 --> 08:53:41,279
would happen if you had two or three
9839
08:53:38,718 --> 08:53:43,280
buttons on the screen all needing
9840
08:53:41,279 --> 08:53:45,199
firebase you can't do firebase
9841
08:53:43,279 --> 08:53:47,599
initialize app in every single one of
9842
08:53:45,200 --> 08:53:49,600
them so the solution to this is kind of
9843
08:53:47,599 --> 08:53:52,397
like initializing your firebase
9844
08:53:52,398 --> 08:53:57,200
start and start with everything else in
9845
08:53:55,119 --> 08:53:59,360
your in your on your screen and on your
9846
08:53:59,360 --> 08:54:04,000
there is good documentation of how to do
9847
08:54:01,759 --> 08:54:05,759
that and i've actually linked to that so
9848
08:54:05,759 --> 08:54:10,557
so what we need to do is take advantage
9849
08:54:08,477 --> 08:54:12,159
of something called widgets flutter
9850
08:54:13,520 --> 08:54:19,040
what happens to be honest with you here
9851
08:54:15,439 --> 08:54:20,877
is that firebase it needs some
9852
08:54:20,878 --> 08:54:25,680
kick start its process before everything
9853
08:54:23,200 --> 08:54:28,718
else is rendered on the screen and in
9854
08:54:25,680 --> 08:54:30,398
order for that to happen it needs to it
9855
08:54:28,718 --> 08:54:33,440
needs to have some sort of that like the
9856
08:54:30,398 --> 08:54:35,760
core flutter engine to be in place
9857
08:54:33,439 --> 08:54:37,119
and so that it can make its call to the
9858
08:54:35,759 --> 08:54:39,519
core slaughter engine and say that i'm
9859
08:54:37,119 --> 08:54:42,637
done with my work so in order to do that
9860
08:54:39,520 --> 08:54:45,279
then you need something called um
9861
08:54:48,637 --> 08:54:53,439
the um caption for that and i can show
9862
08:54:52,080 --> 08:54:54,878
you that i'm this is this is the
9863
08:54:53,439 --> 08:54:56,397
documentation that i'm showing you as of
9864
08:54:57,360 --> 08:55:02,718
in our in your void function here
9865
08:55:00,398 --> 08:55:04,558
um before we actually you see
9866
08:55:02,718 --> 08:55:06,398
maybe i'm jumping over a little bit but
9867
08:55:04,558 --> 08:55:08,317
what we're trying to do is to try to fix
9868
08:55:06,398 --> 08:55:11,120
this issue here that we're awaiting on
9869
08:55:08,317 --> 08:55:12,797
initialize app on firebase okay so we
9870
08:55:11,119 --> 08:55:14,000
don't want to do this on the press of a
9871
08:55:12,797 --> 08:55:16,239
button we actually want to do it
9872
08:55:14,000 --> 08:55:17,759
somewhere else and in order to be able
9873
08:55:16,240 --> 08:55:19,840
to do that somewhere else we have to
9874
08:55:17,759 --> 08:55:23,119
first take care of this widget binding
9875
08:55:19,840 --> 08:55:25,439
okay so in your main function in here
9876
08:55:27,119 --> 08:55:33,520
widgets flutter binding dot ensure
9877
08:55:33,520 --> 08:55:37,439
okay and if you want to know more about
9878
08:55:35,360 --> 08:55:39,119
that i strongly suggest that you read
9879
08:55:37,439 --> 08:55:41,840
this documentation that i've provided
9880
08:55:44,718 --> 08:55:48,958
um now that you've done that do a hot
9881
08:55:48,957 --> 08:55:52,557
okay so you're gonna lose your state
9882
08:55:50,718 --> 08:55:53,920
here after the hot restart and that's
9883
08:55:53,919 --> 08:55:58,397
i'm gonna take that in my notes that
9884
08:56:02,317 --> 08:56:07,680
app is a future you see it's a future of
9885
08:56:04,878 --> 08:56:10,718
firebase app now what you need to do is
9886
08:56:07,680 --> 08:56:15,360
kind of like you want to tell flutter to
9887
08:56:10,718 --> 08:56:18,477
not build this column before it has
9888
08:56:19,279 --> 08:56:25,840
the way to do that is using flutter's
9889
08:56:22,558 --> 08:56:27,440
future builder widget future builder it
9890
08:56:27,439 --> 08:56:32,317
it performs the future and once this
9891
08:56:29,840 --> 08:56:34,957
future has succeeded or it has failed
9892
08:56:32,317 --> 08:56:37,680
doing its work it will give you a call
9893
08:56:34,957 --> 08:56:39,599
back and in that callback it asks you to
9894
08:56:37,680 --> 08:56:41,599
actually produce a widget you want to
9895
08:56:39,599 --> 08:56:42,477
display to the user depending on the
9896
08:56:42,477 --> 08:56:47,680
of that futures result so it basically
9897
08:56:46,000 --> 08:56:50,080
instead of you having to do this
9898
08:56:47,680 --> 08:56:52,558
initialization of firebase every time a
9899
08:56:50,080 --> 08:56:55,520
user presses the button you say i'm not
9900
08:56:52,558 --> 08:56:57,840
going to do anything until that is done
9901
08:56:55,520 --> 08:56:59,600
once that is done or if it errors out
9902
08:56:57,840 --> 08:57:01,520
let me know then i will give you a
9903
08:56:59,599 --> 08:57:04,239
widget to display to the user depending
9904
08:57:05,680 --> 08:57:10,477
is gonna go to this body which is a
9905
08:57:07,599 --> 08:57:12,717
column right now command dot and then
9906
08:57:10,477 --> 08:57:14,239
let's see stream builder we have but we
9907
08:57:12,718 --> 08:57:18,159
don't have future builder so i'm just
9908
08:57:14,240 --> 08:57:19,680
gonna say command dot wrap with
9909
08:57:19,680 --> 08:57:24,398
and i'm gonna say future builder okay so
9910
08:57:22,558 --> 08:57:25,440
i'm gonna build a future as you can see
9911
08:57:25,439 --> 08:57:31,359
okay builder is required so let's put a
9912
08:57:28,718 --> 08:57:33,040
builder parameter here and if you're
9913
08:57:31,360 --> 08:57:35,119
like me and you forget these syntaxes
9914
08:57:33,040 --> 08:57:37,360
you can just control space in visual
9915
08:57:35,119 --> 08:57:40,079
studio code on mac or command space in
9916
08:57:37,360 --> 08:57:42,797
linux and windows to get help
9917
08:57:40,080 --> 08:57:44,080
and then you'll just use this syntax
9918
08:57:48,718 --> 08:57:53,680
here you see this until the end of the
9919
08:57:53,680 --> 08:57:57,119
then you remove your child bring that
9920
08:57:55,520 --> 08:57:59,279
entire thing and put a return here and
9921
08:58:00,637 --> 08:58:07,200
now your future builder um it doesn't
9922
08:58:04,000 --> 08:58:07,919
have an actual future to come to perform
9923
08:58:12,957 --> 08:58:16,877
say that we've talked about the future
9924
08:58:16,957 --> 08:58:20,877
and what we need to do now is to grab
9925
08:58:18,637 --> 08:58:23,360
this future from here you see
9926
08:58:20,878 --> 08:58:25,760
await firebase initialize app and grab
9927
08:58:23,360 --> 08:58:27,119
that future without the weight remove
9928
08:58:27,119 --> 08:58:33,119
and put it in the future builders future
9929
08:58:40,477 --> 08:58:44,797
you can see nothing has really happened
9930
08:58:44,797 --> 08:58:49,439
you didn't have any difference you don't
9931
08:58:46,398 --> 08:58:51,840
notice any difference basically
9932
08:58:49,439 --> 08:58:52,957
so if everything really worked as it
9933
08:58:55,119 --> 08:59:00,000
then what we need to do then is to
9934
08:58:57,840 --> 08:59:01,599
um if everything is working as expected
9935
08:59:00,000 --> 08:59:02,797
then we should be able to register users
9936
08:59:01,599 --> 08:59:07,199
so what i'm going to do here is i'm
9937
08:59:02,797 --> 08:59:07,199
going to provide the exact same user
9938
08:59:07,759 --> 08:59:13,599
already registered and then say register
9939
08:59:11,200 --> 08:59:15,520
and you'll see now we get an error
9940
08:59:13,599 --> 08:59:17,519
let's see if i can show you there and it
9941
08:59:15,520 --> 08:59:19,840
says the error is firebase auth email
9942
08:59:17,520 --> 08:59:22,159
already in use the email or the email
9943
08:59:19,840 --> 08:59:23,520
address is already in use by another
9944
08:59:23,520 --> 08:59:28,718
and that is this part which i'm gonna
9945
08:59:25,520 --> 08:59:28,718
bring the caption up for you
9946
08:59:38,159 --> 08:59:42,840
the next topic that i want to talk about
9947
08:59:40,398 --> 08:59:45,040
before we close off and round off this
9948
08:59:47,759 --> 08:59:50,557
we told future builder to perform a
9949
08:59:50,558 --> 08:59:54,718
the future was firebase initialize app
9950
08:59:54,718 --> 08:59:58,398
now if you look at the builder what
9951
08:59:56,878 --> 09:00:00,240
we're returning from it right now is a
9952
08:59:58,398 --> 09:00:02,317
column but we're completely ignoring the
9953
09:00:00,240 --> 09:00:03,840
parameters that are coming in here
9954
09:00:02,317 --> 09:00:05,119
the second parameter that gets passed
9955
09:00:03,840 --> 09:00:07,920
your builder is something called a
9956
09:00:05,119 --> 09:00:09,119
snapshot of data type async snapshot as
9957
09:00:09,119 --> 09:00:14,397
an async snapshot of an object is the
9958
09:00:11,520 --> 09:00:16,957
state of that object right now okay
9959
09:00:14,398 --> 09:00:19,040
so and that object itself is actually
9960
09:00:16,957 --> 09:00:21,119
the result of your future in this case
9961
09:00:22,477 --> 09:00:26,477
it didn't understand that this snapshot
9962
09:00:24,398 --> 09:00:28,558
is an async snapshot of your firebase
9963
09:00:26,477 --> 09:00:30,797
app but that's okay we don't actually
9964
09:00:28,558 --> 09:00:32,878
need the firebase app in the snapshot
9965
09:00:30,797 --> 09:00:36,397
however one thing that you do need in
9966
09:00:32,878 --> 09:00:39,920
this snapshot is its state you see a
9967
09:00:36,398 --> 09:00:42,159
future has a start point it has a line
9968
09:00:39,919 --> 09:00:45,199
where it processes its information and
9969
09:00:42,159 --> 09:00:48,240
it has an end point it either ends
9970
09:00:45,200 --> 09:00:51,119
successfully or it fails now the
9971
09:00:48,240 --> 09:00:54,638
snapshot is your way of getting the
9972
09:00:51,119 --> 09:00:57,279
results of your future whether it
9973
09:00:54,637 --> 09:01:00,159
has it started is it processing is it
9974
09:00:57,279 --> 09:01:03,119
done or did it fail so what we need to
9975
09:01:00,159 --> 09:01:05,840
do in here as we're waiting for firebase
9976
09:01:03,119 --> 09:01:08,797
initialize app to do its work we're
9977
09:01:05,840 --> 09:01:11,200
gonna basically say uh we're loading
9978
09:01:08,797 --> 09:01:12,878
just tell the user loading and as soon
9979
09:01:11,200 --> 09:01:14,000
as the snapshot is done then we're gonna
9980
09:01:17,919 --> 09:01:21,359
so let's do that let's go in here and
9981
09:01:28,240 --> 09:01:32,798
connection state all right and then get
9982
09:01:31,040 --> 09:01:34,159
help from visual studio code to complete
9983
09:01:32,797 --> 09:01:35,599
this so i'm going to say add missing
9984
09:01:34,159 --> 09:01:37,759
case clauses and you can see there are
9985
09:01:39,919 --> 09:01:44,397
done waiting active and done
9986
09:01:47,599 --> 09:01:52,957
waiting let's let's just say everything
9987
09:01:50,080 --> 09:01:54,080
else except for done we're gonna return
9988
09:01:54,080 --> 09:02:00,958
text that just says loading so
9989
09:01:57,279 --> 09:02:02,159
let's say in here we remove all of these
9990
09:02:02,159 --> 09:02:07,279
in the done statement we say return this
9991
09:02:10,878 --> 09:02:15,119
right and then we don't need the break
9992
09:02:13,040 --> 09:02:17,360
because we said return and then we're
9993
09:02:17,360 --> 09:02:22,398
default is a special case which is not
9994
09:02:20,159 --> 09:02:24,957
actually inside that enumeration but is
9995
09:02:22,398 --> 09:02:27,120
a case that says everything else that i
9996
09:02:24,957 --> 09:02:30,079
haven't handled and in this case we just
9997
09:02:30,080 --> 09:02:35,280
loading something like this as a
9998
09:02:37,840 --> 09:02:41,119
sorry hot restart and the two hours
9999
09:02:39,680 --> 09:02:42,957
video this is happening so fast that
10000
09:02:41,119 --> 09:02:44,797
we're not actually seeing the loading
10001
09:02:42,957 --> 09:02:46,797
but at least we have handled the case
10002
09:02:44,797 --> 09:02:49,520
that if for instance a user's connection
10003
09:02:46,797 --> 09:02:52,000
is too slow or their device is too slow
10004
09:02:49,520 --> 09:02:54,080
when the future has finished they will
10005
09:02:52,000 --> 09:02:54,957
see this column i'm gonna actually fold
10006
09:02:54,957 --> 09:02:58,797
and if this feature hasn't finished yet
10007
09:02:57,200 --> 09:03:00,958
it's not done then they will see this
10008
09:02:58,797 --> 09:03:02,397
text offloading all right and by the way
10009
09:03:00,957 --> 09:03:04,557
this is how you can actually fold and
10010
09:03:02,398 --> 09:03:06,080
unfold things in visual studio code so
10011
09:03:06,080 --> 09:03:13,360
fold like this unfold all right it's a
10012
09:03:08,398 --> 09:03:13,360
great way of seeing more of your code so
10013
09:03:13,680 --> 09:03:18,957
wow a lot of information this this video
10014
09:03:16,240 --> 09:03:21,120
took an hour kind of like as i expected
10015
09:03:21,119 --> 09:03:26,397
so we now have a basic firebase setup
10016
09:03:24,317 --> 09:03:28,159
we've done our initialization of the
10017
09:03:26,398 --> 09:03:29,760
application of our firebase we talked
10018
09:03:28,159 --> 09:03:31,520
about a lot of widgets actually we
10019
09:03:31,520 --> 09:03:36,080
column we text talked about text future
10020
09:03:39,200 --> 09:03:44,558
god app bar so many things so
10021
09:03:42,398 --> 09:03:46,718
this is a lot of content and if you
10022
09:03:44,558 --> 09:03:48,080
didn't get all of it that's okay we're
10023
09:03:46,718 --> 09:03:50,398
gonna talk more about these in the
10024
09:03:50,398 --> 09:03:55,040
but i strongly suggest that i mean if
10025
09:03:52,718 --> 09:03:57,680
you're watching this course and if
10026
09:03:58,637 --> 09:04:01,919
if you're an advanced developer and
10027
09:04:00,477 --> 09:04:04,239
you're watching that's completely fine
10028
09:04:01,919 --> 09:04:06,637
but if you're if you're develop if
10029
09:04:04,240 --> 09:04:09,200
you're not a developer or if you're a
10030
09:04:06,637 --> 09:04:10,718
junior developer or someone who
10031
09:04:09,200 --> 09:04:12,398
doesn't have so much experience with
10032
09:04:10,718 --> 09:04:14,080
flutter development and you're really
10033
09:04:12,398 --> 09:04:16,478
trying to learn everything i'm saying
10034
09:04:14,080 --> 09:04:19,360
here please don't just watch this video
10035
09:04:16,477 --> 09:04:21,680
go and do this yourself go and write
10036
09:04:19,360 --> 09:04:23,119
this code pause the video as i'm talking
10037
09:04:21,680 --> 09:04:25,040
i know i'll talk a little bit fast but
10038
09:04:23,119 --> 09:04:26,797
that's just to save a little bit of time
10039
09:04:25,040 --> 09:04:29,200
pause the video write the code as i
10040
09:04:26,797 --> 09:04:30,637
write it test it as i test it and see
10041
09:04:29,200 --> 09:04:32,798
the results for yourself because that's
10042
09:04:30,637 --> 09:04:34,477
how you will learn not just by watching
10043
09:04:34,477 --> 09:04:40,079
great we've talked a lot about
10044
09:04:36,718 --> 09:04:42,159
widgets and firebase configuration
10045
09:04:40,080 --> 09:04:45,360
and in the next chapter we're going to
10046
09:04:42,159 --> 09:04:47,200
talk about login screen and also email
10047
09:04:45,360 --> 09:04:49,680
verification and also clean up our
10048
09:04:47,200 --> 09:04:51,440
registration screen so without further
10049
09:04:49,680 --> 09:04:54,000
ado let's just prepare yourself for the
10050
09:04:51,439 --> 09:04:56,717
next chapter and i'll see you there
10051
09:04:54,000 --> 09:04:58,398
hello and welcome to chapter 13 of this
10052
09:04:58,398 --> 09:05:02,878
in this chapter we're going to talk
10053
09:04:59,759 --> 09:05:05,199
about the login view in chapter
10054
09:05:05,200 --> 09:05:10,080
sorry about that we talked about the
10055
09:05:10,080 --> 09:05:13,760
we actually talked about quite a lot of
10056
09:05:11,520 --> 09:05:15,840
things which after after that i i
10057
09:05:13,759 --> 09:05:18,877
thought maybe we need to kind of like go
10058
09:05:15,840 --> 09:05:20,637
through them one more time just
10059
09:05:18,878 --> 09:05:21,920
every now and then talk about those
10060
09:05:20,637 --> 09:05:24,079
those little widgets that we talked
10061
09:05:21,919 --> 09:05:26,957
about like a future builder center
10062
09:05:24,080 --> 09:05:28,798
column text button and we talked also
10063
09:05:28,797 --> 09:05:32,239
text field text editing controller so
10064
09:05:30,718 --> 09:05:34,159
there were lots of components that we
10065
09:05:32,240 --> 09:05:34,958
talked about but we got pretty much like
10066
09:05:34,957 --> 09:05:38,637
a simple registration flow working it
10067
09:05:37,200 --> 09:05:41,520
wasn't really a flow actually it was
10068
09:05:38,637 --> 09:05:43,680
just a simple registration screen
10069
09:05:41,520 --> 09:05:45,439
i'm saying that it wasn't a flow because
10070
09:05:43,680 --> 09:05:47,279
it was just a simple screen that didn't
10071
09:05:45,439 --> 09:05:48,717
lean anywhere that's usually what is
10072
09:05:47,279 --> 09:05:50,557
called the flow if you have a screen
10073
09:05:50,558 --> 09:05:55,120
now in this chapter we're going to talk
10074
09:05:52,477 --> 09:05:56,878
about login the login view and we're
10075
09:05:55,119 --> 09:05:59,520
also going to divide the logic that
10076
09:05:56,878 --> 09:06:03,119
we've created in our current home page
10077
09:05:59,520 --> 09:06:04,637
and put it into a registration view so
10078
09:06:03,119 --> 09:06:06,557
we're by the end of this chapter we're
10079
09:06:04,637 --> 09:06:09,121
gonna have two views one is for the
10080
09:06:06,558 --> 09:06:11,758
registration the other one is for
10081
09:06:14,160 --> 09:06:18,558
um we have those logic i mean the
10082
09:06:16,959 --> 09:06:20,799
registration logic in place now we have
10083
09:06:18,557 --> 09:06:22,397
to work on login but we also work a
10084
09:06:20,800 --> 09:06:23,598
little bit on cleaning up the code
10085
09:06:23,597 --> 09:06:26,718
usually this i mean as you get more and
10086
09:06:25,519 --> 09:06:28,319
more comfortable with software
10087
09:06:26,718 --> 09:06:30,878
development you'll know that
10088
09:06:28,319 --> 09:06:32,718
you will have like these flows of ideas
10089
09:06:30,877 --> 09:06:34,319
and then you'll start coding and write
10090
09:06:32,718 --> 09:06:36,480
your code and then you test it and then
10091
09:06:34,319 --> 09:06:38,237
after a while you realize oh this got a
10092
09:06:36,480 --> 09:06:40,160
little bit messy i have to refactor the
10093
09:06:38,237 --> 09:06:42,319
code so that's what refactoring kind of
10094
09:06:40,160 --> 09:06:43,918
means like you take what is already
10095
09:06:42,319 --> 09:06:46,078
there and you kind of make it better
10096
09:06:43,917 --> 09:06:47,680
make it cleaner more presentable so
10097
09:06:46,078 --> 09:06:50,398
that's what we're also going to do in
10098
09:06:50,398 --> 09:06:55,840
so the first thing we need to do is to
10099
09:06:53,122 --> 09:06:56,639
create a stateful register view widget
10100
09:06:56,639 --> 09:06:59,758
so as you can see here this will be used
10101
09:06:59,758 --> 09:07:04,558
the base of our register view
10102
09:07:04,557 --> 09:07:08,718
let me go and bring some stuff that
10103
09:07:06,877 --> 09:07:11,680
we're going to need in this chapter the
10104
09:07:11,680 --> 09:07:14,800
i bring it to the screen so you'll see
10105
09:07:14,800 --> 09:07:18,480
and scr cpy we set it up in one of the
10106
09:07:16,959 --> 09:07:20,557
previous chapters so you should be
10107
09:07:18,480 --> 09:07:21,520
comfortable with that already
10108
09:07:21,519 --> 09:07:25,519
i'm going to go to go to our app here
10109
09:07:23,758 --> 09:07:27,200
which is the register view that we
10110
09:07:25,519 --> 09:07:29,039
created gonna bring my face to the right
10111
09:07:27,199 --> 09:07:30,799
so we'll see a bit more of the content
10112
09:07:30,800 --> 09:07:36,398
and then i'm also going to bring up
10113
09:07:33,199 --> 09:07:38,319
visual studio code which is appearing on
10114
09:07:36,398 --> 09:07:40,800
another screen right now but i'll bring
10115
09:07:38,319 --> 09:07:42,159
it up here so you'll see as well
10116
09:07:40,800 --> 09:07:44,160
i'm going to increase the size a little
10117
09:07:46,480 --> 09:07:51,278
so this is where we lift things um
10118
09:07:51,277 --> 09:07:55,597
and do the screen like this so this is
10119
09:07:53,199 --> 09:07:57,437
where we live things we have a home page
10120
09:07:55,597 --> 09:08:00,718
which at the moment is the register view
10121
09:07:57,438 --> 09:08:03,122
okay but we need to create a register
10122
09:08:00,718 --> 09:08:05,758
view like not just a home page it's
10123
09:08:05,758 --> 09:08:09,122
and since we need a stateful widget
10124
09:08:07,519 --> 09:08:10,799
we're going to use a shortcut in visual
10125
09:08:09,122 --> 09:08:13,840
studio code to create a stateful widget
10126
09:08:10,800 --> 09:08:16,238
for us and that is with s t f as in
10127
09:08:13,839 --> 09:08:19,757
state full so if you want to create a
10128
09:08:16,237 --> 09:08:21,519
stateless widget you'd say stl okay
10129
09:08:21,519 --> 09:08:27,039
and in here we're going to call it what
10130
09:08:23,917 --> 09:08:29,360
should we say register view like that
10131
09:08:30,718 --> 09:08:35,758
this will be as i've mentioned here this
10132
09:08:39,917 --> 09:08:43,437
this will be the base of our
10133
09:08:41,438 --> 09:08:44,878
registration view all the code for
10134
09:08:44,877 --> 09:08:48,717
appear here i'm sorry that i'm looking
10135
09:08:50,718 --> 09:08:53,680
going through my notes i have very
10136
09:08:52,237 --> 09:08:54,959
detailed notes here and just making sure
10137
09:08:53,680 --> 09:08:56,639
that you get all the information that i
10138
09:08:54,959 --> 09:08:57,680
plan for you to get so if you see me
10139
09:08:56,639 --> 09:08:59,680
looking here it's just because i'm
10140
09:08:57,680 --> 09:09:01,680
looking at the notes to ensure that
10141
09:08:59,680 --> 09:09:02,639
um so now that we've created register
10142
09:09:01,680 --> 09:09:04,237
view at the moment it doesn't have
10143
09:09:02,639 --> 09:09:06,398
anything so it's just a container and
10144
09:09:04,237 --> 09:09:09,040
the default color for containers and
10145
09:09:09,040 --> 09:09:13,520
let's go to our register view here
10146
09:09:11,519 --> 09:09:14,639
so let's go to our main function here
10147
09:09:13,519 --> 09:09:17,199
and as you can see at the moment we're
10148
09:09:14,639 --> 09:09:18,639
returning home page as the home and what
10149
09:09:17,199 --> 09:09:21,360
we're going to do here is just to say
10150
09:09:18,639 --> 09:09:22,718
instead of that return register view
10151
09:09:22,718 --> 09:09:26,480
and that is it's very possible we will
10152
09:09:24,959 --> 09:09:28,319
get a problem here and you can see
10153
09:09:26,480 --> 09:09:30,718
nothing is changing because i'm changing
10154
09:09:28,319 --> 09:09:34,319
something inside the main and that isn't
10155
09:09:30,718 --> 09:09:36,000
affected really by a hot reload
10156
09:09:34,319 --> 09:09:38,000
so we have to hot restart so i'm gonna
10157
09:09:38,000 --> 09:09:40,480
and you can see now the screen is black
10158
09:09:45,597 --> 09:09:51,680
so what we'll have to do here now is to
10159
09:09:49,122 --> 09:09:54,000
rename our home page to our login view
10160
09:09:51,680 --> 09:09:56,000
actually so we have a new registration
10161
09:09:54,000 --> 09:09:58,078
view which we're going to write the code
10162
09:09:56,000 --> 09:10:00,319
for or actually place the code from the
10163
09:09:58,078 --> 09:10:02,878
previous home page into register view
10164
09:10:00,319 --> 09:10:05,360
and we also need the home page to be
10165
09:10:02,877 --> 09:10:07,277
renamed so it's very some i mean there's
10166
09:10:05,360 --> 09:10:09,040
lots of renaming putting things here and
10167
09:10:07,277 --> 09:10:10,799
there but we're just playing with some
10168
09:10:10,800 --> 09:10:14,480
the next thing you need to do is to go
10169
09:10:12,319 --> 09:10:16,639
to your home page which is here
10170
09:10:14,480 --> 09:10:18,160
and rename it one way to do that visual
10171
09:10:16,639 --> 09:10:21,277
studio code is to right click on it and
10172
09:10:18,160 --> 09:10:22,480
just say rename symbol or i believe it's
10173
09:10:25,680 --> 09:10:30,557
or actually for me it's f2 if two does
10174
09:10:28,480 --> 09:10:32,000
the renaming but on a macbook pro for
10175
09:10:30,557 --> 09:10:34,877
instance you don't you can't just press
10176
09:10:32,000 --> 09:10:37,040
f2 because f2 has another function
10177
09:10:34,877 --> 09:10:39,597
so what you'll need to do is to press
10178
09:10:37,040 --> 09:10:41,597
function keyboard keep key on your
10179
09:10:39,597 --> 09:10:43,360
keyboard and then press f2 that will
10180
09:10:41,597 --> 09:10:45,360
bring up the rename dialog or you could
10181
09:10:43,360 --> 09:10:47,597
just right click here and just say
10182
09:10:45,360 --> 09:10:50,319
rename symbol which does the same thing
10183
09:10:47,597 --> 09:10:52,557
so rename your home page to login view
10184
09:10:53,758 --> 09:10:58,800
all right so we have login view here now
10185
09:10:56,959 --> 09:11:00,398
um i'm gonna take it that we've done the
10186
09:11:02,398 --> 09:11:06,639
right now all we've been doing here is
10187
09:11:04,480 --> 09:11:08,800
just to like write our code write
10188
09:11:06,639 --> 09:11:11,438
everything in main dart but this is this
10189
09:11:08,800 --> 09:11:13,360
is not a not the right way of doing
10190
09:11:11,438 --> 09:11:15,840
things especially as your projects get
10191
09:11:13,360 --> 09:11:17,680
bigger you need to make sure that you're
10192
09:11:15,839 --> 09:11:19,277
you're taking the responsibility to also
10193
09:11:17,680 --> 09:11:21,040
make sure that your code is readable and
10194
09:11:19,277 --> 09:11:22,959
the structure of your project is
10195
09:11:21,040 --> 09:11:25,597
understandable by others who may also be
10196
09:11:22,959 --> 09:11:27,199
working on the same project now chances
10197
09:11:25,597 --> 09:11:29,597
are that if you're watching this course
10198
09:11:27,199 --> 09:11:31,839
that you will be the only person working
10199
09:11:29,597 --> 09:11:34,398
on the source code so you won't have
10200
09:11:31,839 --> 09:11:35,917
anybody else looking at your code
10201
09:11:35,917 --> 09:11:39,519
that you may be the only person looking
10202
09:11:37,519 --> 09:11:42,237
at the code and working with it you
10203
09:11:39,519 --> 09:11:44,639
still will need to from time and time
10204
09:11:42,237 --> 09:11:48,159
come back to the project fix some stuff
10205
09:11:44,639 --> 09:11:49,758
add some stuff remove some stuff so
10206
09:11:48,160 --> 09:11:53,278
even if you're the only person working
10207
09:11:49,758 --> 09:11:55,360
with it you will need a clean
10208
09:11:53,277 --> 09:11:56,718
source code to look at so if you come
10209
09:11:55,360 --> 09:11:58,639
back to the source code after a month
10210
09:11:56,718 --> 09:12:00,557
and you start to add more and more stuff
10211
09:11:58,639 --> 09:12:02,639
to this main dart file after a while it
10212
09:12:00,557 --> 09:12:04,319
will just get out of control so
10213
09:12:02,639 --> 09:12:06,159
you'll need to also do refactoring on
10214
09:12:04,319 --> 09:12:07,758
your code just to ensure that it is in a
10215
09:12:07,758 --> 09:12:11,200
what we're going to do is to bring up
10216
09:12:11,199 --> 09:12:15,757
as you can see we're inside lib and then
10217
09:12:13,438 --> 09:12:18,078
there's a file called main dart
10218
09:12:18,078 --> 09:12:23,758
to move our login view into its own file
10219
09:12:21,597 --> 09:12:25,917
and you can see here i've written that
10220
09:12:23,758 --> 09:12:27,918
we're going to move it into lib views
10221
09:12:25,917 --> 09:12:30,000
login view this file doesn't exist at
10222
09:12:27,917 --> 09:12:32,159
the moment so you'll need to create it
10223
09:12:30,000 --> 09:12:34,078
what you'll do here i mean in visual
10224
09:12:32,160 --> 09:12:36,960
studio code there's a great trick that
10225
09:12:34,078 --> 09:12:38,959
you can do that it can create a file on
10226
09:12:38,959 --> 09:12:44,479
folders as well so instead of going here
10227
09:12:41,519 --> 09:12:46,799
and say new folder to create this views
10228
09:12:44,480 --> 09:12:48,878
folder and then inside there i create a
10229
09:12:46,800 --> 09:12:50,398
login view what you'll need to do just
10230
09:12:50,398 --> 09:12:54,237
and then type the entire path in there
10231
09:12:54,237 --> 09:12:59,839
views and then slash login view dot dart
10232
09:12:57,917 --> 09:13:03,277
and this will create the views folder
10233
09:13:04,398 --> 09:13:09,680
so what i'll need to do here is to
10234
09:13:07,040 --> 09:13:12,000
take our login views code as you can see
10235
09:13:12,319 --> 09:13:18,639
as we had here class login view and then
10236
09:13:15,040 --> 09:13:20,319
bring all that code into this new login
10237
09:13:18,639 --> 09:13:22,078
view file that we just created okay so
10238
09:13:20,319 --> 09:13:23,438
i'm gonna get this out of the way
10239
09:13:24,557 --> 09:13:28,877
all right and that's okay we're getting
10240
09:13:26,557 --> 09:13:31,040
a lot of errors here and the reason
10241
09:13:28,877 --> 09:13:33,597
behind that is i mean we haven't talked
10242
09:13:31,040 --> 09:13:35,680
about import statements so much before
10243
09:13:35,680 --> 09:13:40,718
a way for you as a programmer to bring
10244
09:13:40,718 --> 09:13:44,398
whether it is the flutter team at google
10245
09:13:42,800 --> 09:13:46,319
or whether it is a third party
10246
09:13:50,718 --> 09:13:54,480
where those pieces of code are and at
10247
09:13:54,480 --> 09:13:56,640
i mean if you're not coming from a
10248
09:13:55,519 --> 09:13:58,959
software engineering background you're
10249
09:14:00,800 --> 09:14:05,278
the closest analogy that i can find is
10250
09:14:03,277 --> 09:14:06,237
as if for instance in figma you've
10251
09:14:07,917 --> 09:14:11,437
you're trying to create an instance of a
10252
09:14:10,078 --> 09:14:12,878
design that you've already created but
10253
09:14:11,438 --> 09:14:15,277
figment doesn't know where that instance
10254
09:14:12,877 --> 09:14:17,277
is so you'll say oh here's a copy of the
10255
09:14:17,277 --> 09:14:20,237
and then figma is like oh where can i
10256
09:14:18,877 --> 09:14:22,000
find that button you haven't even
10257
09:14:20,237 --> 09:14:24,557
created it so then you need to first go
10258
09:14:22,000 --> 09:14:26,237
create that button or drag it in from
10259
09:14:24,557 --> 09:14:27,519
another project and put it in your
10260
09:14:27,519 --> 09:14:31,437
page and then you can create an instance
10261
09:14:31,438 --> 09:14:35,918
if you're not into design and
10262
09:14:34,160 --> 09:14:37,360
figma you may not understand what i just
10263
09:14:37,360 --> 09:14:40,160
what i'm trying to do is just to be as
10264
09:14:38,639 --> 09:14:41,758
inclusive as possible in this course to
10265
09:14:40,160 --> 09:14:43,360
make sure anybody who's following this
10266
09:14:43,360 --> 09:14:47,520
try to at least understand bits and
10267
09:14:48,718 --> 09:14:52,398
going back to import what we need to do
10268
09:14:50,557 --> 09:14:55,839
now is to tell flutter where those
10269
09:14:52,398 --> 09:14:57,360
pieces of highlighted code are and one
10270
09:14:55,839 --> 09:14:59,277
thing to do in visual studio code which
10271
09:14:57,360 --> 09:15:01,122
can help you greatly if you're trying to
10272
09:15:01,122 --> 09:15:07,200
writing things by hand is just to do
10273
09:15:03,122 --> 09:15:09,520
command on mac or control on linux and
10274
09:15:07,199 --> 09:15:10,799
windows hold down command or control
10275
09:15:09,519 --> 09:15:12,237
depending on your operating system and
10276
09:15:12,237 --> 09:15:16,799
then you will see suggestions here as
10277
09:15:14,639 --> 09:15:19,438
where those components those missing
10278
09:15:16,800 --> 09:15:20,878
components may be placed and what you'll
10279
09:15:19,438 --> 09:15:23,277
need to do here is just to import
10280
09:15:20,877 --> 09:15:25,360
package flutter material because that's
10281
09:15:23,277 --> 09:15:28,479
where these components that we're using
10282
09:15:28,480 --> 09:15:34,160
i managed to click the wrong wrong
10283
09:15:31,277 --> 09:15:36,877
option there so material boom
10284
09:15:34,160 --> 09:15:39,360
all right i think now almost everything
10285
09:15:36,877 --> 09:15:41,039
has disappeared all almost every error
10286
09:15:39,360 --> 09:15:42,718
has disappeared except for these
10287
09:15:54,319 --> 09:15:59,519
and also here we need to import minors
10288
09:15:59,519 --> 09:16:04,077
so i think everything basically is
10289
09:16:01,360 --> 09:16:05,680
disappeared there's also firebase auth
10290
09:16:05,680 --> 09:16:11,040
alright so we're good to go now on this
10291
09:16:11,040 --> 09:16:16,078
this login views code really is not
10292
09:16:13,917 --> 09:16:17,519
login view i mean if you remember the
10293
09:16:16,078 --> 09:16:18,718
code that we've written in the previous
10294
09:16:18,718 --> 09:16:23,360
this login view at the moment it says
10295
09:16:21,360 --> 09:16:25,199
log view but all it does is register do
10296
09:16:23,360 --> 09:16:27,840
you remember that we have the text field
10297
09:16:25,199 --> 09:16:29,839
and even the button that says register
10298
09:16:29,839 --> 09:16:34,077
what we need to do now is to
10299
09:16:31,839 --> 09:16:36,077
drag the code as you can see here from
10300
09:16:36,078 --> 09:16:40,558
we need to kind of bring it into the
10301
09:16:37,917 --> 09:16:43,199
register view okay and our register view
10302
09:16:40,557 --> 09:16:44,639
at the moment is here you see
10303
09:16:44,639 --> 09:16:50,639
so let's go and try to do that a little
10304
09:16:47,277 --> 09:16:52,319
bit with care okay so grab all this code
10305
09:16:50,639 --> 09:16:53,597
that is here in the login view here
10306
09:16:56,078 --> 09:17:01,680
and also grab your email and password
10307
09:17:06,000 --> 09:17:10,718
so i'm gonna go then in here in the
10308
09:17:10,718 --> 09:17:16,878
then paste those right before the build
10309
09:17:13,917 --> 09:17:19,437
function so there we go okay
10310
09:17:16,877 --> 09:17:21,519
go back to login view dart and you can
10311
09:17:19,438 --> 09:17:23,360
see that there is a build function here
10312
09:17:24,557 --> 09:17:28,877
i'm going to literally just grab that
10313
09:17:27,199 --> 09:17:30,077
entire build function including the
10314
09:17:31,122 --> 09:17:36,078
as i can see here the build function
10315
09:17:33,519 --> 09:17:39,121
ends right there and i'm gonna cut that
10316
09:17:36,078 --> 09:17:43,122
also okay and i'm gonna go here and
10317
09:17:39,122 --> 09:17:45,758
replace this override on the um
10318
09:17:43,122 --> 09:17:48,800
on the what is it called register view
10319
09:17:45,758 --> 09:17:50,959
and paste that one from before here okay
10320
09:17:48,800 --> 09:17:53,200
so what all we did here is we made sure
10321
09:17:53,199 --> 09:17:57,199
it is indeed the register view and the
10322
09:17:55,040 --> 09:17:58,557
login view is empty at the moment so
10323
09:17:57,199 --> 09:18:00,479
what you'll need to do you see there's
10324
09:17:58,557 --> 09:18:03,597
an error here that says that okay you
10325
09:18:00,480 --> 09:18:06,319
have a stateful widget for login but it
10326
09:18:03,597 --> 09:18:08,557
doesn't have any build function
10327
09:18:06,319 --> 09:18:10,319
so you'll now need to create that build
10328
09:18:08,557 --> 09:18:12,877
function and of course you could do it
10329
09:18:23,040 --> 09:18:26,480
write all that code by hand of course in
10330
09:18:24,800 --> 09:18:28,639
the beginning you may say that oh well i
10331
09:18:26,480 --> 09:18:30,238
just want to learn the best way to learn
10332
09:18:28,639 --> 09:18:31,597
is to type and i completely understand
10333
09:18:30,237 --> 09:18:33,680
that but there are some things like
10334
09:18:31,597 --> 09:18:35,199
there are limits i also believe like
10335
09:18:33,680 --> 09:18:36,959
once you've done it once or twice you'll
10336
09:18:35,199 --> 09:18:38,877
kind of get bored of doing that or
10337
09:18:36,959 --> 09:18:40,237
you'll get tired of doing that so i
10338
09:18:38,877 --> 09:18:41,519
actually suggest that for these
10339
09:18:40,237 --> 09:18:43,437
functions that you're overriding the
10340
09:18:41,519 --> 09:18:46,000
best way is actually get your editor
10341
09:18:43,438 --> 09:18:47,758
text editor or ide to complete these
10342
09:18:46,000 --> 09:18:50,000
things for you so i'm going to go on
10343
09:18:47,758 --> 09:18:52,878
this error and just say command dot on
10344
09:18:50,000 --> 09:18:55,597
mac and control dot on linux and windows
10345
09:18:52,877 --> 09:18:59,839
and say create one missing override okay
10346
09:18:55,597 --> 09:18:59,839
and in here we just say return
10347
09:19:01,519 --> 09:19:05,199
so that's our login view and you can see
10348
09:19:08,718 --> 09:19:14,639
that is right here and then we also have
10349
09:19:18,800 --> 09:19:22,960
in our main dart file here i can see
10350
09:19:20,959 --> 09:19:25,040
that there is a register and let's just
10351
09:19:25,040 --> 09:19:29,275
hot restart okay so we have a register
10352
09:19:29,275 --> 09:19:36,319
our login view is completely empty so
10353
09:19:36,319 --> 09:19:40,959
what we need to do basically is kind of
10354
09:19:41,120 --> 09:19:45,276
it's kind of work on our login view
10355
09:19:43,275 --> 09:19:46,799
because this is this is like the goal of
10356
09:19:46,800 --> 09:19:50,480
we need to have a login view and up
10357
09:19:49,199 --> 09:19:52,079
until this point what we've been doing
10358
09:19:50,480 --> 09:19:54,319
is kind of like create a register view
10359
09:19:52,080 --> 09:19:55,120
with all the code in it a separate login
10360
09:19:57,275 --> 09:20:01,519
previously created registry so
10361
09:19:59,839 --> 09:20:03,595
i mean this is all a lot of talk just to
10362
09:20:01,519 --> 09:20:05,119
say that we have a registered view
10363
09:20:03,595 --> 09:20:06,959
but we don't have a login view and we
10364
09:20:05,120 --> 09:20:08,959
need to work on login views so
10365
09:20:08,959 --> 09:20:11,595
wow i mean you don't actually have to
10366
09:20:10,319 --> 09:20:13,595
remember you can look at it here the
10367
09:20:11,595 --> 09:20:15,756
register view has two fields enter your
10368
09:20:13,595 --> 09:20:16,639
email here and for your password here
10369
09:20:16,639 --> 09:20:21,275
this is this their register v and login
10370
09:20:19,199 --> 09:20:22,959
are very similar to each other what
10371
09:20:21,275 --> 09:20:25,680
register view does differently is that
10372
09:20:22,959 --> 09:20:27,436
it creates this it basically does a call
10373
09:20:27,436 --> 09:20:32,560
create user with email and password
10374
09:20:30,480 --> 09:20:34,560
but if you think about it everything
10375
09:20:36,000 --> 09:20:39,839
so you need to create you need to make
10376
09:20:38,400 --> 09:20:41,120
sure in both of them that firebase is
10377
09:20:41,120 --> 09:20:46,080
you will have two text fields email
10378
09:20:43,199 --> 09:20:49,119
password and you will have a button one
10379
09:20:46,080 --> 09:20:50,160
for register and for one for login
10380
09:20:50,160 --> 09:20:55,360
what we could do to be honest with you
10381
09:20:51,839 --> 09:20:57,519
is to now go and copy this code that we
10382
09:20:57,519 --> 09:21:02,959
okay that happens i actually forgot that
10383
09:21:00,000 --> 09:21:04,160
so let's go and copy this code again
10384
09:21:04,160 --> 09:21:09,360
literally get grab everything from there
10385
09:21:06,559 --> 09:21:11,435
and put it in our login view like that
10386
09:21:09,360 --> 09:21:12,879
and change this register button to log
10387
09:21:12,879 --> 09:21:16,959
so now we have two copies of the same
10388
09:21:15,275 --> 09:21:19,839
view basically once it's registered the
10389
09:21:16,959 --> 09:21:21,595
other one says log in all right
10390
09:21:21,595 --> 09:21:25,595
and what we could do is now go to our
10391
09:21:25,595 --> 09:21:29,839
and instead of returning the register
10392
09:21:27,360 --> 09:21:31,520
view we could just return the login view
10393
09:21:29,839 --> 09:21:34,319
because we want to work on the login
10394
09:21:31,519 --> 09:21:37,275
view now okay we have a user registered
10395
09:21:34,319 --> 09:21:38,959
and now we need to work on login and as
10396
09:21:38,959 --> 09:21:42,879
if you follow the previous chapter
10397
09:21:40,480 --> 09:21:47,756
you'll you'll know that we actually did
10398
09:21:42,879 --> 09:21:48,719
register a a valid user with firebase
10399
09:21:48,720 --> 09:21:52,720
what you could do is to go to your
10400
09:21:52,720 --> 09:21:56,160
as we could do now just an ad hoc i
10401
09:21:59,756 --> 09:22:02,559
ensure that you're logged in with your
10402
09:22:02,559 --> 09:22:07,519
then i'm going to go to this uh project
10403
09:22:05,120 --> 09:22:09,680
that we created mynotes flutter project
10404
09:22:09,680 --> 09:22:16,639
authentication and you can actually then
10405
09:22:16,639 --> 09:22:20,800
using the flutter application that
10406
09:22:18,480 --> 09:22:23,596
you're actually working on so when you
10407
09:22:20,800 --> 09:22:25,680
call this function in your in your
10408
09:22:23,595 --> 09:22:28,319
register view this function
10409
09:22:25,680 --> 09:22:30,639
firebase os instance create user with
10410
09:22:28,319 --> 09:22:33,120
email and password that user was indeed
10411
09:22:30,639 --> 09:22:35,040
created in the firebase console so here
10412
09:22:33,120 --> 09:22:37,360
you have a user you could also disable
10413
09:22:35,040 --> 09:22:39,275
this user and do other things but we're
10414
09:22:37,360 --> 09:22:41,120
just going to leave it like that for now
10415
09:22:41,120 --> 09:22:45,120
so what you need to do now is instead of
10416
09:22:43,040 --> 09:22:47,120
register view tell your home page to
10417
09:22:45,120 --> 09:22:49,040
render the login view and you could just
10418
09:22:51,199 --> 09:22:55,119
type a login view like that you will get
10419
09:22:53,595 --> 09:22:57,756
an error of course because login view
10420
09:22:55,120 --> 09:22:59,436
isn't in scope but i believe visual
10421
09:22:57,756 --> 09:23:01,520
studio code could actually help with
10422
09:22:59,436 --> 09:23:03,200
that because you see we haven't imported
10423
09:23:03,199 --> 09:23:07,199
this main dart file doesn't know what
10424
09:23:07,199 --> 09:23:11,360
exactly the same thing happened here do
10425
09:23:09,275 --> 09:23:12,959
you remember if we didn't have these
10426
09:23:11,360 --> 09:23:14,879
imports we got lots of errors saying
10427
09:23:12,959 --> 09:23:17,120
that they i don't know where this class
10428
09:23:14,879 --> 09:23:19,915
is so the same thing is happening in
10429
09:23:17,120 --> 09:23:21,436
this main dart file all right so i
10430
09:23:19,915 --> 09:23:23,040
believe in visual studio code now i'm
10431
09:23:21,436 --> 09:23:26,319
kind of improvising but i think if you
10432
09:23:23,040 --> 09:23:29,120
set login view and just press enter boom
10433
09:23:26,319 --> 09:23:32,400
it does an import automatically for you
10434
09:23:29,120 --> 09:23:34,000
and let's see where it is here you see
10435
09:23:32,400 --> 09:23:36,239
but if you're not comfortable doing that
10436
09:23:36,239 --> 09:23:40,559
by hand and do the same thing i showed
10437
09:23:38,319 --> 09:23:42,879
you before just command dot on mac or
10438
09:23:40,559 --> 09:23:45,839
controlled up in windows and linux and
10439
09:23:42,879 --> 09:23:47,915
say import okay so it's going to import
10440
09:23:47,915 --> 09:23:51,755
now we have the login view and if i
10441
09:23:49,839 --> 09:23:54,319
press command s or actually we have to
10442
09:23:54,319 --> 09:23:58,959
you see now there is a login button
10443
09:23:59,199 --> 09:24:03,199
so what we'll need to do is as you can
10444
09:24:01,519 --> 09:24:05,359
see in the caption now that we're
10445
09:24:03,199 --> 09:24:07,039
working on logging the login view go to
10446
09:24:07,040 --> 09:24:11,520
and go here where the button is pressed
10447
09:24:11,519 --> 09:24:17,839
what we'll need to do here is to
10448
09:24:14,559 --> 09:24:20,000
call the a new function on our firebase
10449
09:24:17,839 --> 09:24:21,915
auth instance instead of create user
10450
09:24:20,000 --> 09:24:23,680
with email and password we're going to
10451
09:24:26,000 --> 09:24:31,915
but sign in with email and password and
10452
09:24:30,400 --> 09:24:33,916
you can see the function signature is
10453
09:24:31,915 --> 09:24:35,595
very similar to create user with email
10454
09:24:33,915 --> 09:24:38,239
and password in that it takes two
10455
09:24:35,595 --> 09:24:40,959
parameters namely email and password
10456
09:24:38,239 --> 09:24:44,400
both of type string and then what it
10457
09:24:40,959 --> 09:24:46,319
does return in fact is user credential
10458
09:24:44,400 --> 09:24:48,000
and do you remember create user with
10459
09:24:46,319 --> 09:24:49,275
email and password also return user
10460
09:24:49,275 --> 09:24:55,595
it's very simple to switch between login
10461
09:24:52,720 --> 09:24:57,436
and register in that in that sense so
10462
09:24:55,595 --> 09:24:58,319
grab the sign in with email and password
10463
09:24:58,319 --> 09:25:01,436
that's the only thing we're interested
10464
09:24:59,839 --> 09:25:03,199
in and just paste it here instead of
10465
09:25:08,239 --> 09:25:12,159
scrcpy crashed and i have no idea why
10466
09:25:12,160 --> 09:25:16,640
that's okay that wasn't planned what we
10467
09:25:14,239 --> 09:25:18,879
could do is to go to our and i can see
10468
09:25:16,639 --> 09:25:21,040
you see it got an aborted so what we
10469
09:25:18,879 --> 09:25:25,199
could do is to go to our terminal and
10470
09:25:25,199 --> 09:25:28,719
and i'm going to bring it to the screen
10471
09:25:28,720 --> 09:25:33,275
and also if you're if you noticed here
10472
09:25:31,360 --> 09:25:36,319
we have a login button but the title
10473
09:25:33,275 --> 09:25:38,000
here still says register so let's go and
10474
09:25:36,319 --> 09:25:40,400
fix that let's go into the app bar and
10475
09:25:42,480 --> 09:25:47,840
and actually problem is i can also see
10476
09:25:47,839 --> 09:25:54,000
as scrcpy crash also the running of this
10477
09:25:51,436 --> 09:25:56,720
process this application on that android
10478
09:25:54,000 --> 09:25:58,480
phone also crashed so there is i mean
10479
09:25:56,720 --> 09:25:59,840
the flutter instance of this project
10480
09:25:58,480 --> 09:26:01,276
isn't really running at the moment so
10481
09:25:59,839 --> 09:26:05,119
what i'll have to do is to go to main
10482
09:26:01,275 --> 09:26:07,436
dart and say run without debugging so
10483
09:26:05,120 --> 09:26:09,520
and it's now launching doing a gradle
10484
09:26:07,436 --> 09:26:12,239
build gradle remember from the previous
10485
09:26:12,239 --> 09:26:16,319
and if it's using xcode it is for ios
10486
09:26:16,319 --> 09:26:20,400
it's doing the greater build so if
10487
09:26:18,239 --> 09:26:23,680
everything goes according to the plan
10488
09:26:23,680 --> 09:26:27,436
title up there and while this is doing
10489
09:26:25,756 --> 09:26:28,880
its work i'm going to go to my notes and
10490
09:26:28,879 --> 09:26:32,839
that i've talked about the things that i
10491
09:26:32,839 --> 09:26:37,595
about all right it's installing our
10492
09:26:35,360 --> 09:26:39,756
application i'm gonna remove the widget
10493
09:26:37,595 --> 09:26:40,720
inspector and now you can see we have a
10494
09:26:42,720 --> 09:26:48,559
that is working as expected all right so
10495
09:26:46,559 --> 09:26:50,559
as you can see here after the logging
10496
09:26:48,559 --> 09:26:53,275
call here sign in with email and
10497
09:26:57,275 --> 09:27:01,519
enter some information of a user that
10498
09:26:59,839 --> 09:27:04,799
doesn't exist okay so i'm just going to
10499
09:27:04,800 --> 09:27:08,960
and i'm going to say foo bar path
10500
09:27:07,120 --> 09:27:10,880
and i'm then going to bring up the
10501
09:27:08,959 --> 09:27:12,559
console here as you'll see the debug
10502
09:27:13,436 --> 09:27:18,639
and i'm going to actually remove
10503
09:27:16,639 --> 09:27:20,319
or do something like this so you can see
10504
09:27:18,639 --> 09:27:22,559
the debug console a little bit better in
10505
09:27:20,319 --> 09:27:25,275
its entirety and i'm going to press the
10506
09:27:31,519 --> 09:27:34,959
the next thing that we need to handle as
10507
09:27:35,756 --> 09:27:40,800
i'll perhaps increase the size even more
10508
09:27:47,680 --> 09:27:52,160
that doesn't exist meaning that we
10509
09:27:49,756 --> 09:27:54,480
haven't registered that user then we got
10510
09:27:52,160 --> 09:27:57,436
an error here that says firebase off
10511
09:27:54,480 --> 09:27:59,520
user not found and that that makes sense
10512
09:27:57,436 --> 09:28:00,720
actually completely because
10513
09:28:02,480 --> 09:28:06,560
registration for this user okay
10514
09:28:06,559 --> 09:28:11,680
what we could hear what we could do here
10515
09:28:11,680 --> 09:28:16,480
here and i'm gonna bring things back up
10516
09:28:19,839 --> 09:28:24,000
here we're recalling this function uh
10517
09:28:22,319 --> 09:28:26,159
let me decrease the size because it's
10518
09:28:28,000 --> 09:28:31,040
signing with email and password
10519
09:28:32,800 --> 09:28:37,200
a thing called an exception and i don't
10520
09:28:35,040 --> 09:28:38,879
think we talked about exceptions to be
10521
09:28:37,199 --> 09:28:40,799
honest with you while i was i was
10522
09:28:38,879 --> 09:28:42,479
teaching you about dart if you know
10523
09:28:40,800 --> 09:28:44,319
about exceptions you could just skip
10524
09:28:42,480 --> 09:28:46,640
through kind of skim through this little
10525
09:28:44,319 --> 09:28:48,400
bit of the video but if you're if you're
10526
09:28:46,639 --> 09:28:51,275
not a software development developer
10527
09:28:48,400 --> 09:28:52,880
from before or software engineer then
10528
09:28:51,275 --> 09:28:54,959
you may not know what an exception is an
10529
09:28:54,959 --> 09:28:58,959
things go wrong and you haven't kind of
10530
09:28:57,275 --> 09:29:02,639
thought about those things from the
10531
09:28:58,959 --> 09:29:04,479
beginning so as you can as you
10532
09:29:02,639 --> 09:29:05,756
for instance if you're if you're working
10533
09:29:05,756 --> 09:29:09,840
if you're a software if you're a
10534
09:29:09,839 --> 09:29:14,239
haven't done software development before
10535
09:29:11,595 --> 09:29:16,720
you may have also used other pieces of
10536
09:29:14,239 --> 09:29:18,720
software and sometimes software crashes
10537
09:29:16,720 --> 09:29:21,360
just like scr cpy just crashed a few
10538
09:29:22,639 --> 09:29:26,720
an exception or an error that the
10539
09:29:24,559 --> 09:29:29,040
software developers who created scrcpy
10540
09:29:26,720 --> 09:29:30,639
hadn't counted with so they hadn't
10541
09:29:31,595 --> 09:29:35,519
an error might occur in this scenario
10542
09:29:35,519 --> 09:29:39,839
not having handled that the application
10543
09:29:37,275 --> 09:29:41,360
crashes it means that an exception
10544
09:29:39,839 --> 09:29:43,119
happens and error happens that the
10545
09:29:41,360 --> 09:29:45,120
developers of that program hadn't
10546
09:29:45,120 --> 09:29:48,720
and this is an exception that you're
10547
09:29:46,639 --> 09:29:50,400
seeing here in your flutter application
10548
09:29:48,720 --> 09:29:52,000
so firebase is saying that you're trying
10549
09:29:50,400 --> 09:29:53,200
to log in with a user that doesn't exist
10550
09:29:52,000 --> 09:29:54,879
so what do you want to do with it i
10551
09:29:53,199 --> 09:29:56,799
can't continue after this i don't know
10552
09:29:56,800 --> 09:30:02,080
the way to handle exceptions in
10553
09:29:59,519 --> 09:30:04,719
flutter or in dart actually is using a
10554
09:30:02,080 --> 09:30:07,200
try catch block so i'm going to bring it
10555
09:30:04,720 --> 09:30:09,756
here put the entire code for your user
10556
09:30:07,199 --> 09:30:11,755
credential creation in the try statement
10557
09:30:09,756 --> 09:30:14,080
as you can see here and then go in here
10558
09:30:18,400 --> 09:30:22,639
and then i'm just gonna say something
10559
09:30:24,879 --> 09:30:28,879
all right so you can see here now we
10560
09:30:26,239 --> 09:30:31,275
have a try block as indicated here with
10561
09:30:28,879 --> 09:30:33,435
this line it's all the way from on top
10562
09:30:31,275 --> 09:30:35,595
to here and then we have a catch block
10563
09:30:33,436 --> 09:30:37,520
the way try catch works is that it as
10564
09:30:35,595 --> 09:30:39,680
its name indicates it tries to do the
10565
09:30:37,519 --> 09:30:42,479
work that you're saying it needs to be
10566
09:30:39,680 --> 09:30:45,519
done in the trial block should anything
10567
09:30:42,480 --> 09:30:47,200
bad happen it will go to various catch
10568
09:30:45,519 --> 09:30:49,275
statements that you can't then place
10569
09:30:50,959 --> 09:30:57,275
as you saw in the logs this error
10570
09:30:54,639 --> 09:31:01,275
let's see if we can find it here
10571
09:30:57,275 --> 09:31:03,595
it was of type firebase auth uh let me
10572
09:31:01,275 --> 09:31:07,040
see on handle exception but we didn't
10573
09:31:03,595 --> 09:31:09,040
actually get its type unfortunately so
10574
09:31:09,040 --> 09:31:14,879
print something bad happen and then
10575
09:31:14,879 --> 09:31:19,199
so i'm just going to say clear the logs
10576
09:31:19,199 --> 09:31:22,239
and then i'm going to press the login
10577
09:31:22,239 --> 09:31:27,360
sorry here and you can see now it says
10578
09:31:24,879 --> 09:31:31,119
something bad happened firebase auth
10579
09:31:27,360 --> 09:31:31,915
user not found and then some information
10580
09:31:31,915 --> 09:31:38,879
we could actually say print e
10581
09:31:35,756 --> 09:31:41,275
run time type and doing that will
10582
09:31:38,879 --> 09:31:44,559
actually give you information about
10583
09:31:41,275 --> 09:31:45,680
which class of exception this is because
10584
09:31:45,680 --> 09:31:49,360
as you're working with flutter and as
10585
09:31:47,275 --> 09:31:51,199
you're working with software generally
10586
09:31:49,360 --> 09:31:52,959
you're creating software you're writing
10587
09:31:51,199 --> 09:31:54,639
code different types of exceptions
10588
09:31:52,959 --> 09:31:57,360
happen and these exceptions have their
10589
09:31:54,639 --> 09:32:00,319
own identity every exception has its own
10590
09:31:57,360 --> 09:32:02,400
identity it's the series of classes or
10591
09:32:00,319 --> 09:32:04,720
different places that it may come from
10592
09:32:04,720 --> 09:32:09,040
anything can become an error even a text
10593
09:32:07,120 --> 09:32:11,040
can become an error or enum can become
10594
09:32:11,040 --> 09:32:14,480
when you come to this catch block as
10595
09:32:12,720 --> 09:32:16,080
i'll move my mouse over it you can see
10596
09:32:14,480 --> 09:32:18,640
that here it says i don't even know what
10597
09:32:20,319 --> 09:32:25,040
but you are actually in the in your
10598
09:32:22,319 --> 09:32:26,720
cache block you're mostly interested in
10599
09:32:25,040 --> 09:32:28,239
exceptions that might occur from
10600
09:32:28,239 --> 09:32:31,119
since we don't really know what this
10601
09:32:33,275 --> 09:32:37,436
and we're gonna have a look at what type
10602
09:32:41,436 --> 09:32:46,239
is this a little bit better arrangement
10603
09:32:43,360 --> 09:32:48,400
perhaps so you can see what happens yeah
10604
09:32:46,239 --> 09:32:50,720
perhaps then what i'm going to do
10605
09:32:50,720 --> 09:32:55,436
and go here press the login button and
10606
09:32:53,519 --> 09:32:58,559
you'll see that the type of that
10607
09:32:55,436 --> 09:32:59,680
exception is firebase auth exception all
10608
09:32:59,680 --> 09:33:03,120
so what we need to do now is to go to
10609
09:33:05,199 --> 09:33:10,479
firebase auth exceptions not just any
10610
09:33:08,160 --> 09:33:13,120
exception as we're doing here
10611
09:33:10,480 --> 09:33:15,520
because we're catching any exception so
10612
09:33:13,120 --> 09:33:17,436
what we want to do is to catch firebase
10613
09:33:15,519 --> 09:33:19,680
off exceptions in our cache block all
10614
09:33:17,436 --> 09:33:22,160
right and a way to do that is i'm going
10615
09:33:22,160 --> 09:33:27,200
and i'm going to do like we were doing
10616
09:33:25,199 --> 09:33:28,799
before get rid of the consoles to see
10617
09:33:28,800 --> 09:33:32,319
so what you could do you can have
10618
09:33:30,239 --> 09:33:35,119
specialized cache blocks in dart and
10619
09:33:32,319 --> 09:33:37,595
that means that you are not catching
10620
09:33:35,120 --> 09:33:40,000
everything but you tell dark that look
10621
09:33:37,595 --> 09:33:42,159
in this particular catch block i'm
10622
09:33:40,000 --> 09:33:43,680
interested only in exceptions of this
10623
09:33:43,680 --> 09:33:49,275
as you might have guessed that already a
10624
09:33:45,839 --> 09:33:51,275
try block can be accompanied by more
10625
09:33:51,275 --> 09:33:56,159
this cache block that you can see here
10626
09:33:53,120 --> 09:33:58,400
is called catch all it catches every
10627
09:33:56,160 --> 09:34:01,436
exception that might occur in the
10628
09:33:58,400 --> 09:34:02,480
running of the code inside the try block
10629
09:34:02,480 --> 09:34:06,960
if you're interested in specific
10630
09:34:04,559 --> 09:34:09,360
exceptions in this case firebase auth
10631
09:34:06,959 --> 09:34:11,040
exception i believe oh i've cleared it
10632
09:34:09,360 --> 09:34:13,680
but i think it was firebase off
10633
09:34:11,040 --> 09:34:15,200
exception i'm going to run it again
10634
09:34:13,680 --> 09:34:17,120
go to the login button and you can see
10635
09:34:15,199 --> 09:34:18,879
it says firebase off exception so we're
10636
09:34:17,120 --> 09:34:21,040
interested specifically in that so let's
10637
09:34:18,879 --> 09:34:22,479
go and say tell dart that we're
10638
09:34:21,040 --> 09:34:23,595
interested in that i'm just i'm going to
10639
09:34:29,680 --> 09:34:34,559
so this is the format of catching
10640
09:34:32,080 --> 09:34:37,120
specific exceptions you prefix your
10641
09:34:34,559 --> 09:34:39,519
catch statement with the keyword on and
10642
09:34:37,120 --> 09:34:41,120
then you write the type the runtime type
10643
09:34:39,519 --> 09:34:43,199
or the class name of the type of
10644
09:34:41,120 --> 09:34:45,520
exception that you're interested in
10645
09:34:45,519 --> 09:34:49,519
so in this case we said on firebase off
10646
09:34:47,436 --> 09:34:51,756
the exception catchy and we're gonna
10647
09:34:54,160 --> 09:34:57,520
actually i don't even have to cut and
10648
09:34:55,915 --> 09:34:59,680
what you'll need to do in here just say
10649
09:35:01,360 --> 09:35:05,680
save this before i before i tell you
10650
09:35:03,519 --> 09:35:08,000
what i was going to say after uc
10651
09:35:05,680 --> 09:35:10,480
let's test this let's say login and
10652
09:35:08,000 --> 09:35:11,360
you'll see that the code is used or not
10653
09:35:12,720 --> 09:35:16,959
now that we told dark that we're
10654
09:35:14,400 --> 09:35:19,680
specializing in catching exceptions of
10655
09:35:16,959 --> 09:35:22,159
firebase auth exception then this e is
10656
09:35:19,680 --> 09:35:25,275
not an object anymore really let's see
10657
09:35:22,160 --> 09:35:27,596
if we can get some help now it says okay
10658
09:35:25,275 --> 09:35:28,959
if i can catch exceptions of firebase
10659
09:35:27,595 --> 09:35:31,519
auth exception then i know that the
10660
09:35:28,959 --> 09:35:32,479
error that i can pass to you is of that
10661
09:35:32,480 --> 09:35:36,319
now that you catching firebase
10662
09:35:34,080 --> 09:35:37,360
authexception you can go to this code
10663
09:35:36,319 --> 09:35:38,559
and you see there are different
10664
09:35:37,360 --> 09:35:40,480
properties that you can read from
10665
09:35:38,559 --> 09:35:41,756
message code email credential et cetera
10666
09:35:41,756 --> 09:35:46,239
so we're now interested in the code
10667
09:35:46,239 --> 09:35:49,915
as the caption right here shows at the
10668
09:35:48,400 --> 09:35:52,319
bottom of the screen you'll see that we
10669
09:35:49,915 --> 09:35:56,000
need to handle e-code equal to user not
10670
09:35:52,319 --> 09:36:00,080
found all right so let's say if e code
10671
09:36:01,839 --> 09:36:07,435
user not found like that else e code oh
10672
09:36:06,319 --> 09:36:08,800
sorry actually we're not going to do it
10673
09:36:07,436 --> 09:36:11,520
outside kind of like running ahead of
10674
09:36:15,519 --> 09:36:18,959
e-code user not found then we're just
10675
09:36:17,120 --> 09:36:21,040
saying print user not found okay i'm
10676
09:36:18,959 --> 09:36:23,275
going to clear the logs here go back to
10677
09:36:21,040 --> 09:36:26,000
see our cpy here and i'm just gonna say
10678
09:36:23,275 --> 09:36:29,436
login and you'll see all it does it says
10679
09:36:31,120 --> 09:36:34,560
so that's that we haven't really i mean
10680
09:36:32,879 --> 09:36:37,839
the caption at the bottom left of the
10681
09:36:34,559 --> 09:36:40,079
screen says handle but depending on your
10682
09:36:40,080 --> 09:36:43,596
expect handle to do different things for
10683
09:36:42,239 --> 09:36:45,436
a software for a seasoned software
10684
09:36:43,595 --> 09:36:48,000
engineer handle may actually mean that
10685
09:36:45,436 --> 09:36:50,160
well do something about it okay tell him
10686
09:36:48,000 --> 09:36:52,639
tell the user like oh i couldn't log in
10687
09:36:52,639 --> 09:36:55,756
whatever reason just show something to
10688
09:36:54,160 --> 09:36:57,840
the user and we could do that but at the
10689
09:36:55,756 --> 09:36:59,436
moment we don't have the capacity to do
10690
09:36:57,839 --> 09:37:00,639
that we don't really know how to handle
10691
09:37:00,639 --> 09:37:06,479
what we need to do then is to simply say
10692
09:37:04,480 --> 09:37:08,560
print so we just print it to the screen
10693
09:37:06,480 --> 09:37:10,319
so this is our handling for now okay
10694
09:37:08,559 --> 09:37:12,799
it's very simple all it does is just
10695
09:37:10,319 --> 09:37:14,480
ensures that no exception is thrown to
10696
09:37:12,800 --> 09:37:17,720
the user's face or that the application
10697
09:37:18,080 --> 09:37:23,840
okay that was a lot of information um
10698
09:37:22,080 --> 09:37:25,916
now as the caption here shows in the
10699
09:37:23,839 --> 09:37:27,595
login view we also need to handle wrong
10700
09:37:27,595 --> 09:37:33,360
and i mean as you can see here the e
10701
09:37:30,720 --> 09:37:37,040
code is a string so anything here could
10702
09:37:33,360 --> 09:37:38,800
happen that could be defined by string
10703
09:37:40,480 --> 09:37:45,436
one of those errors actually is wrong
10704
09:37:43,275 --> 09:37:48,639
password so let's test that
10705
09:37:45,436 --> 09:37:52,000
in here let's say else if if the code is
10706
09:37:48,639 --> 09:37:54,479
not user not found just print
10707
09:37:55,839 --> 09:38:02,239
the errors code to the screen okay
10708
09:38:02,239 --> 09:38:07,680
and i'm going to then go here and then
10709
09:38:05,595 --> 09:38:09,519
actually change this email to an
10710
09:38:07,680 --> 09:38:11,275
existing email which was the one that i
10711
09:38:11,275 --> 09:38:14,799
and password i believe was foobar or
10712
09:38:16,959 --> 09:38:20,479
and i'm going to say login and you can
10713
09:38:18,879 --> 09:38:23,199
see here it says now something else
10714
09:38:23,199 --> 09:38:26,799
that could that could kind of mean that
10715
09:38:25,120 --> 09:38:28,400
well yeah actually that isn't my
10716
09:38:26,800 --> 09:38:29,680
password this foo bar was in my password
10717
09:38:28,400 --> 09:38:31,275
i don't even remember what it was maybe
10718
09:38:31,275 --> 09:38:35,199
but that is great it says something else
10719
09:38:33,360 --> 09:38:37,275
happen an e code and that's exactly what
10720
09:38:38,639 --> 09:38:43,519
and that is exactly what we need to
10721
09:38:39,915 --> 09:38:46,639
handle here um wrong password so in your
10722
09:38:52,480 --> 09:38:56,800
then we're going to say print
10723
09:38:59,915 --> 09:39:05,040
so that's there clear the logs i'm going
10724
09:39:02,239 --> 09:39:07,360
to say log in and you'll see the message
10725
09:39:13,519 --> 09:39:17,039
we've done quite a lot of work now in
10726
09:39:15,199 --> 09:39:19,435
the login view but we haven't really put
10727
09:39:17,040 --> 09:39:22,160
much energy into the register view you
10728
09:39:19,436 --> 09:39:24,080
see they're very similar in that they do
10729
09:39:22,160 --> 09:39:25,360
almost the same api calls with the email
10730
09:39:24,080 --> 09:39:26,720
and password ones that sign in the other
10731
09:39:26,720 --> 09:39:32,639
however in if if we go to our main dart
10732
09:39:29,595 --> 09:39:34,799
file you'll see in here in our register
10733
09:39:32,639 --> 09:39:36,400
view we're just calling the api and kind
10734
09:39:34,800 --> 09:39:38,720
of like hoping for the best there's no
10735
09:39:36,400 --> 09:39:40,800
try catch statement here okay so what we
10736
09:39:38,720 --> 09:39:43,680
could do is have a look at how we did it
10737
09:39:40,800 --> 09:39:45,680
for login we put the api call inside the
10738
09:39:43,680 --> 09:39:48,480
try block you see what we need to do is
10739
09:39:45,680 --> 09:39:49,360
to go to main dart and for our register
10740
09:39:49,360 --> 09:39:56,239
here register view state do the same
10741
09:39:51,595 --> 09:39:56,239
thing let's put this in a try block here
10742
09:39:58,480 --> 09:40:04,720
and then just say catch or say on
10743
09:40:05,120 --> 09:40:08,000
this is i mean i'm not going to explain
10744
09:40:06,400 --> 09:40:10,239
this again because it's exactly what we
10745
09:40:10,239 --> 09:40:14,959
i believe firebase authexception didn't
10746
09:40:12,720 --> 09:40:17,360
really exist in this in this dart file
10747
09:40:14,959 --> 09:40:19,199
before but that is what visual studio
10748
09:40:17,360 --> 09:40:21,436
code helped me with as i typed it and
10749
09:40:19,199 --> 09:40:23,755
pressed enter for auto completion
10750
09:40:21,436 --> 09:40:25,275
then it must have been imported
10751
09:40:25,275 --> 09:40:30,319
or it was probably part of firebase auth
10752
09:40:28,080 --> 09:40:31,520
dart i believe actually so if i command
10753
09:40:31,519 --> 09:40:35,680
it goes to firebase auth so that's why i
10754
09:40:34,400 --> 09:40:37,120
it probably didn't have to import
10755
09:40:35,680 --> 09:40:41,120
anything because it was already imported
10756
09:40:37,120 --> 09:40:41,120
as a part of firebase auth okay
10757
09:40:42,000 --> 09:40:45,199
oh wow that was a lot of information
10758
09:40:45,199 --> 09:40:49,039
now that we're working on the register
10759
09:40:49,040 --> 09:40:53,275
dar main function here and since we're
10760
09:40:51,680 --> 09:40:56,480
only seeing the login view let's switch
10761
09:40:56,480 --> 09:40:59,840
and command s but this is not going to
10762
09:40:58,319 --> 09:41:01,839
change anything as you remember hot
10763
09:40:59,839 --> 09:41:03,519
reload doesn't have an effect of any
10764
09:41:01,839 --> 09:41:05,359
changes that you it doesn't have an
10765
09:41:03,519 --> 09:41:06,719
effect on anything that you're changing
10766
09:41:05,360 --> 09:41:08,959
the main function remember that you have
10767
09:41:08,959 --> 09:41:13,199
so hot restart now we're in the register
10768
09:41:13,199 --> 09:41:19,275
and we need to now handle wrong password
10769
09:41:19,275 --> 09:41:24,000
no that's not the login sorry about that
10770
09:41:27,915 --> 09:41:32,799
as you're working with uh firebase zoom
10771
09:41:30,639 --> 09:41:35,199
you will notice that it has its own set
10772
09:41:32,800 --> 09:41:36,880
of security rules you also can override
10773
09:41:35,199 --> 09:41:38,239
these security rules later for your
10774
09:41:36,879 --> 09:41:40,639
server if you want to for instance you
10775
09:41:38,239 --> 09:41:44,159
can expect or you can say all my users
10776
09:41:40,639 --> 09:41:46,319
have to have passwords that are 18 um
10777
09:41:44,160 --> 09:41:48,080
characters long and a mixture of digits
10778
09:41:46,319 --> 09:41:49,519
and alpha numerical values etcetera
10779
09:41:49,519 --> 09:41:53,755
there are some default security rules
10780
09:41:53,756 --> 09:41:58,880
for credentials that every user needs to
10781
09:41:56,319 --> 09:42:00,239
abide by so let's actually have a look
10782
09:42:01,436 --> 09:42:05,680
do a print here and i'm going to say
10783
09:42:07,275 --> 09:42:11,040
and as you'll see in the caption as you
10784
09:42:08,959 --> 09:42:13,199
are seeing in the caption there is an e
10785
09:42:11,040 --> 09:42:14,959
code of equal to weak password that
10786
09:42:13,199 --> 09:42:17,199
needs to be handled so i'm going to go
10787
09:42:14,959 --> 09:42:20,080
here try to register user with my
10788
09:42:17,199 --> 09:42:22,239
personal email and the password of a b
10789
09:42:20,080 --> 09:42:23,680
c all right then i'm going to bring up
10790
09:42:22,239 --> 09:42:24,479
the console clear the console a little
10791
09:42:24,480 --> 09:42:27,360
i'm going to do this so you'll see it a
10792
09:42:27,360 --> 09:42:33,595
then i'm gonna try to register with a
10793
09:42:29,275 --> 09:42:33,595
password of abc press register
10794
09:42:35,680 --> 09:42:40,959
here you see the code was weak password
10795
09:42:38,879 --> 09:42:43,040
and as you'll expect yeah weak password
10796
09:42:40,959 --> 09:42:45,436
that is too weak a password to even be
10797
09:42:48,160 --> 09:42:52,480
so what we need to do here is to handle
10798
09:42:52,480 --> 09:42:57,520
error basically i'm gonna take in my
10799
09:42:55,680 --> 09:42:59,595
notes that i've talked about some other
10800
09:42:59,595 --> 09:43:04,319
all right so we'll handle weak password
10801
09:43:14,239 --> 09:43:19,595
and let's just say print week password
10802
09:43:20,959 --> 09:43:28,559
um so that's that's that for now okay
10803
09:43:23,915 --> 09:43:30,159
and i'm going to just bring up the um
10804
09:43:30,160 --> 09:43:32,800
and press the register button one more
10805
09:43:32,800 --> 09:43:37,200
now you'll see the information let me
10806
09:43:34,720 --> 09:43:38,800
bring it so you can actually see it
10807
09:43:37,199 --> 09:43:42,159
yeah you can actually see it great you
10808
09:43:38,800 --> 09:43:44,080
can see weak password being printed here
10809
09:43:44,080 --> 09:43:48,959
now let's go let me bring the let make
10810
09:43:46,639 --> 09:43:50,959
the screen a little bit bigger
10811
09:43:48,959 --> 09:43:53,756
the next thing we have to handle
10812
09:43:50,959 --> 09:43:56,559
is um in this register view as you can
10813
09:43:56,559 --> 09:44:00,639
you can also get an error called email
10814
09:43:58,480 --> 09:44:02,720
already in use so if you go to the else
10815
09:44:00,639 --> 09:44:03,436
statement here again and print
10816
09:44:03,436 --> 09:44:08,160
if i try to register with the same email
10817
09:44:08,160 --> 09:44:12,560
this user already exists and if even if
10818
09:44:10,160 --> 09:44:16,720
i have quite a good password for this
10819
09:44:12,559 --> 09:44:16,720
user so i'm going to say fubar bass
10820
09:44:18,400 --> 09:44:21,436
so we know that the error is not going
10821
09:44:20,000 --> 09:44:23,595
to be the password like it's actually a
10822
09:44:23,595 --> 09:44:28,720
better than fubar baz at least and that
10823
09:44:25,680 --> 09:44:30,959
or abc so i'm just going to say register
10824
09:44:31,120 --> 09:44:36,080
do we not get any value here or did i
10825
09:44:32,959 --> 09:44:36,080
even press the register button
10826
09:44:42,559 --> 09:44:48,639
oh i hadn't saved the file oops so yeah
10827
09:44:46,080 --> 09:44:51,040
i haven't saved my changes i'm gonna say
10828
09:44:51,040 --> 09:44:54,559
oh now it says email already in use and
10829
09:44:52,879 --> 09:44:55,755
that is exactly i mean that is pretty
10830
09:44:54,559 --> 09:44:57,595
much what we have to handle right
10831
09:44:55,756 --> 09:45:00,959
because we're printing e so
10832
09:44:57,595 --> 09:45:01,915
um i didn't have to say oh no surprises
10833
09:45:01,915 --> 09:45:06,799
so let's handle email already and use so
10834
09:45:05,120 --> 09:45:08,880
i'm going to copy this email already and
10835
09:45:06,800 --> 09:45:10,160
use string just exactly as it's
10836
09:45:10,160 --> 09:45:15,520
and i'm going to go to else and say
10837
09:45:15,519 --> 09:45:20,799
that string and then say uh email is
10838
09:45:25,595 --> 09:45:30,479
clear the logs press the register button
10839
09:45:27,839 --> 09:45:33,915
again you can see now it says email is
10840
09:45:36,239 --> 09:45:40,959
let me also have a little bit of a look
10841
09:45:44,480 --> 09:45:48,640
i can also i mean to be honest with you
10842
09:45:46,239 --> 09:45:52,079
in the notes i don't see anywhere
10843
09:45:48,639 --> 09:45:54,879
that we're really trying to handle
10844
09:45:52,080 --> 09:45:58,560
uh these errors like actually doing
10845
09:45:54,879 --> 09:45:59,915
something about them all right
10846
09:46:04,559 --> 09:46:09,275
to really like show a message or
10847
09:46:09,275 --> 09:46:13,756
and i'm kind of wondering that right now
10848
09:46:11,360 --> 09:46:16,160
like whether that's a good idea or a bad
10849
09:46:13,756 --> 09:46:18,639
idea for this chapter and perhaps just
10850
09:46:16,160 --> 09:46:19,680
doing a print will suffice to be honest
10851
09:46:19,680 --> 09:46:26,639
not entirely sure about that so
10852
09:46:22,639 --> 09:46:27,915
um let's leave it at that for now okay
10853
09:46:26,639 --> 09:46:30,319
i'm also gonna go here and make sure
10854
09:46:27,915 --> 09:46:32,399
that i'm not yeah i'm in do not disturb
10855
09:46:30,319 --> 09:46:34,000
so let's leave it leave it at that email
10856
09:46:32,400 --> 09:46:36,319
already use perfect okay let's leave it
10857
09:46:36,559 --> 09:46:38,399
now the next thing that we have to
10858
09:46:38,400 --> 09:46:42,800
it could also write a situation where
10859
09:46:40,319 --> 09:46:44,720
the user tries to enter an invalid email
10860
09:46:42,800 --> 09:46:46,400
all right so let's put an else statement
10861
09:46:50,319 --> 09:46:55,040
let's go and remove this add sign so it
10862
09:46:52,959 --> 09:46:57,360
becomes an invalid email and try to
10863
09:46:55,040 --> 09:47:00,639
press the register button okay now you
10864
09:46:57,360 --> 09:47:02,800
can see uh you can't actually see now
10865
09:47:00,639 --> 09:47:05,120
you can see at the bottom in the logs it
10866
09:47:02,800 --> 09:47:08,560
says invalid email and that is the code
10867
09:47:05,120 --> 09:47:10,800
for that error so let's handle invalid
10868
09:47:10,800 --> 09:47:16,800
so i'm going to go here and say else if
10869
09:47:13,275 --> 09:47:19,119
e code we call to invalid email then
10870
09:47:16,800 --> 09:47:22,160
we're going to say print invalid email
10871
09:47:19,120 --> 09:47:24,400
entered all right and save it
10872
09:47:24,400 --> 09:47:30,560
tap the register button and now you'll
10873
09:47:26,400 --> 09:47:31,840
see invalid email entered okay
10874
09:47:38,080 --> 09:47:41,680
error handling and as we're going on i
10875
09:47:40,639 --> 09:47:42,879
mean to be honest with you i still have
10876
09:47:41,680 --> 09:47:44,800
a little bit of time to figure out
10877
09:47:42,879 --> 09:47:46,799
whether we're really going to handle
10878
09:47:44,800 --> 09:47:48,240
these things by and by that i mean like
10879
09:47:48,239 --> 09:47:53,519
if we need to display some some error to
10880
09:47:50,319 --> 09:47:56,559
the user okay and we may need to do that
10881
09:47:53,519 --> 09:47:58,399
but it is a little bit complicated like
10882
09:47:56,559 --> 09:47:59,680
depending on how we want to handle it do
10883
09:47:58,400 --> 09:48:01,436
we want to show like a message to the
10884
09:47:59,680 --> 09:48:03,275
user do you want to show a toast to the
10885
09:48:03,275 --> 09:48:06,400
or do we want to like display another
10886
09:48:05,040 --> 09:48:09,040
screen to the user and that's kind of
10887
09:48:06,400 --> 09:48:10,880
like unclear even to me right now so
10888
09:48:09,040 --> 09:48:12,559
maybe we'll iron these things out then
10889
09:48:12,559 --> 09:48:18,879
in in the upcoming chapters as well
10890
09:48:31,436 --> 09:48:38,000
carry on with the upcoming chapters
10891
09:48:34,720 --> 09:48:40,800
is actually to make sure that we are
10892
09:48:38,000 --> 09:48:42,720
logged in to the application you see
10893
09:48:40,800 --> 09:48:44,639
we've worked on the register view we've
10894
09:48:44,639 --> 09:48:48,400
we're trying like so many different
10895
09:48:46,319 --> 09:48:50,239
combinations here to register new user
10896
09:48:48,400 --> 09:48:51,520
login so i personally don't know at the
10897
09:48:51,519 --> 09:48:56,639
this application firebase instance
10898
09:48:54,160 --> 09:48:59,200
actually has a logged in user and if
10899
09:48:56,639 --> 09:49:01,275
you're familiar with like python django
10900
09:48:59,199 --> 09:49:02,959
or flask or if you're doing nodejs or
10901
09:49:01,275 --> 09:49:04,400
whatever development like backend
10902
09:49:04,400 --> 09:49:09,040
you can be a logged in user but still
10903
09:49:09,040 --> 09:49:14,239
so if you send a login login user to a
10904
09:49:12,000 --> 09:49:15,839
login view doesn't mean that the user
10905
09:49:15,839 --> 09:49:19,359
instead it means well that user is
10906
09:49:17,680 --> 09:49:22,080
logged in but may want to log in as a
10907
09:49:19,360 --> 09:49:23,840
different user so that is the case in
10908
09:49:22,080 --> 09:49:25,520
our application as well we have a
10909
09:49:23,839 --> 09:49:27,119
register screen a login view but i
10910
09:49:25,519 --> 09:49:28,959
personally don't know what the state of
10911
09:49:27,120 --> 09:49:30,800
the application at the moment is are we
10912
09:49:28,959 --> 09:49:32,080
logged in or are we not logged in
10913
09:49:30,800 --> 09:49:34,639
because we're kind of like playing with
10914
09:49:32,080 --> 09:49:37,200
different views here okay so that's very
10915
09:49:37,199 --> 09:49:42,079
next chapter i can see in chapter 14 we
10916
09:49:43,519 --> 09:49:46,959
we're working on separating the app
10917
09:49:45,275 --> 09:49:48,639
initialization from the login and
10918
09:49:46,959 --> 09:49:51,040
register screens because you can see at
10919
09:49:48,639 --> 09:49:52,559
the moment we have this future builder
10920
09:49:52,559 --> 09:49:57,119
initializing firebase and it is doing
10921
09:49:55,040 --> 09:49:59,436
lots of work comes with snapshots stay
10922
09:49:57,120 --> 09:50:01,276
done blah blah and we're doing the exact
10923
09:49:59,436 --> 09:50:03,275
same thing in two views login view and
10924
09:50:03,275 --> 09:50:05,839
what we need to do is kind of like
10925
09:50:05,839 --> 09:50:09,359
and ensure that we display the correct
10926
09:50:07,519 --> 09:50:11,275
view depending on yeah what the state of
10927
09:50:09,360 --> 09:50:13,915
the application is and before we can
10928
09:50:11,275 --> 09:50:15,275
then continue or start that chapter we
10929
09:50:13,915 --> 09:50:17,839
kind of need to make sure that the user
10930
09:50:15,275 --> 09:50:22,000
the current user is logged in all right
10931
09:50:22,000 --> 09:50:27,040
main dart here and login logged in views
10932
09:50:24,800 --> 09:50:28,639
already displayed so i don't really you
10933
09:50:27,040 --> 09:50:30,959
don't need to worry about this part
10934
09:50:30,959 --> 09:50:36,000
what you need to do now is to make sure
10935
09:50:34,239 --> 09:50:37,680
that instead of register view we're
10936
09:50:37,680 --> 09:50:42,239
and remember now we're saving something
10937
09:50:39,839 --> 09:50:44,159
changing something in the main
10938
09:50:42,239 --> 09:50:46,559
function so hot reload isn't going to
10939
09:50:44,160 --> 09:50:50,000
work so you need to do hot restart
10940
09:50:46,559 --> 09:50:53,119
so we'll get to that login view
10941
09:50:50,000 --> 09:50:55,839
and let's then enter valid details here
10942
09:50:53,120 --> 09:50:58,639
so i'm going to say pixelityab.gmail.com
10943
09:50:55,839 --> 09:51:00,719
and i think the password was fubar best
10944
09:51:00,720 --> 09:51:06,000
i'm going to press the login button
10945
09:51:03,839 --> 09:51:09,595
all right and there we got the
10946
09:51:09,595 --> 09:51:14,799
wow that was a lot of information and i
10947
09:51:14,800 --> 09:51:20,080
so what we need to work on now i'm going
10948
09:51:16,959 --> 09:51:21,275
to take some stuff in my notes
10949
09:51:21,275 --> 09:51:25,199
as i mentioned we need to for the next
10950
09:51:23,756 --> 09:51:27,200
chapter i mean we're kind of done with
10951
09:51:25,199 --> 09:51:28,719
this chapter to be honest we've talked a
10952
09:51:27,199 --> 09:51:30,239
lot about like exception handling
10953
09:51:28,720 --> 09:51:32,239
separated the login view from the
10954
09:51:30,239 --> 09:51:34,239
register view but our register view is
10955
09:51:32,239 --> 09:51:35,275
still in the main dart we're gonna we're
10956
09:51:36,959 --> 09:51:40,559
but what you need to know to do before
10957
09:51:39,120 --> 09:51:42,080
you continue with the next chapter and
10958
09:51:40,559 --> 09:51:44,000
just ensure that you're displaying the
10959
09:51:42,080 --> 09:51:46,639
login view to the user and that you're
10960
09:51:44,000 --> 09:51:49,275
actually logging logging in with a valid
10961
09:51:46,639 --> 09:51:51,680
username and password this ensures that
10962
09:51:49,275 --> 09:51:53,839
the firebase instance that is running in
10963
09:51:51,680 --> 09:51:56,959
this application right now is going to
10964
09:51:53,839 --> 09:51:58,639
cache that information locally on ios is
10965
09:51:56,959 --> 09:52:01,595
going to cache that information in a
10966
09:51:58,639 --> 09:52:02,800
secure storage called keychain and on
10967
09:52:01,595 --> 09:52:05,360
android i think it's called shared
10968
09:52:02,800 --> 09:52:06,800
preferences or something like that
10969
09:52:05,360 --> 09:52:09,520
so that information is going to be
10970
09:52:06,800 --> 09:52:11,120
securely stored now on that telephone
10971
09:52:09,519 --> 09:52:13,359
which for me is an android telephone
10972
09:52:13,360 --> 09:52:17,040
when i restart the application whenever
10973
09:52:17,040 --> 09:52:21,040
telephone restart the telephone the os
10974
09:52:19,436 --> 09:52:23,916
come back up that information is already
10975
09:52:21,040 --> 09:52:25,756
saved on that telephone so my user is
10976
09:52:25,756 --> 09:52:29,360
so just ensure that before you continue
10977
09:52:27,756 --> 09:52:31,275
with the next chapter that you've
10978
09:52:29,360 --> 09:52:33,199
registered the user first and that
10979
09:52:31,275 --> 09:52:35,199
you've logged in with that user from
10980
09:52:33,199 --> 09:52:38,799
your application so that information is
10981
09:52:35,199 --> 09:52:41,199
cached inside the application all right
10982
09:52:43,436 --> 09:52:48,480
we're going to separate the app
10983
09:52:45,275 --> 09:52:51,360
initialization from the login and the
10984
09:52:48,480 --> 09:52:53,040
register screens there are only a few
10985
09:52:58,559 --> 09:53:02,720
so i don't think that chapter is going
10986
09:53:02,720 --> 09:53:07,756
so grab a cup of tea coffee whatever you
10987
09:53:05,120 --> 09:53:10,560
want chocolate or whatever it is and
10988
09:53:07,756 --> 09:53:13,040
i will see you in the next chapter
10989
09:53:10,559 --> 09:53:14,639
hello and welcome to chapter number 14
10990
09:53:14,639 --> 09:53:19,040
as you saw in the previous chapter we
10991
09:53:16,239 --> 09:53:21,915
worked on the login view now we have a
10992
09:53:19,040 --> 09:53:24,160
login view and a register view in place
10993
09:53:21,915 --> 09:53:25,915
and what you also saw is that we did
10994
09:53:25,915 --> 09:53:29,360
error handling for various scenarios
10995
09:53:29,360 --> 09:53:34,559
uh email address already registered
10996
09:53:36,720 --> 09:53:40,639
incorrect password or wrong password i
10997
09:53:40,639 --> 09:53:45,519
now we have two views in place
10998
09:53:42,879 --> 09:53:47,360
um we have but we have two main issues
10999
09:53:48,160 --> 09:53:54,080
registration or the register view that
11000
09:53:58,000 --> 09:54:02,080
and the other issue is as the caption
11001
09:54:00,000 --> 09:54:04,879
here displays is that the widgets are
11002
09:54:04,879 --> 09:54:09,275
if you remember from the code
11003
09:54:06,400 --> 09:54:10,560
there was this firebase initialization
11004
09:54:10,559 --> 09:54:15,435
invocation that we had to do and since
11005
09:54:13,199 --> 09:54:17,199
the login view and the register view are
11006
09:54:15,436 --> 09:54:18,880
very similar to each other they're both
11007
09:54:21,360 --> 09:54:24,000
what we're going to do in this chapter
11008
09:54:28,319 --> 09:54:32,400
make them one that's that's the first
11009
09:54:31,040 --> 09:54:34,080
first thing we need to do so we just
11010
09:54:32,400 --> 09:54:35,040
have one initialization that's going to
11011
09:54:35,040 --> 09:54:38,959
and what we're also going to do is to
11012
09:54:36,879 --> 09:54:40,879
bring the register view in its own file
11013
09:54:38,959 --> 09:54:42,959
so this this chapter is going to be a
11014
09:54:40,879 --> 09:54:44,639
quick one unlike the other chapters and
11015
09:54:42,959 --> 09:54:46,080
i think that's kind of refreshing to be
11016
09:54:44,639 --> 09:54:47,839
honest with you otherwise all chapters
11017
09:54:57,519 --> 09:55:00,719
start with the first thing we have to do
11018
09:55:00,720 --> 09:55:04,800
basically to move the register view into
11019
09:55:04,800 --> 09:55:08,080
i'm going to see if i can bring up
11020
09:55:10,639 --> 09:55:15,275
and i'm going to bring up scrcpy
11021
09:55:15,275 --> 09:55:19,680
is my android phone running our flutter
11022
09:55:19,680 --> 09:55:24,000
so let's do as the caption says here i'm
11023
09:55:22,959 --> 09:55:25,680
going to make the screen a little bit
11024
09:55:25,680 --> 09:55:30,080
then go to your project uh or explorer
11025
09:55:28,480 --> 09:55:31,436
here visual studio core if you're using
11026
09:55:30,080 --> 09:55:32,800
android studio you can go go to the
11027
09:55:31,436 --> 09:55:34,959
navigator there as well there's a
11028
09:55:32,800 --> 09:55:37,360
similar one in android studio or if
11029
09:55:34,959 --> 09:55:38,720
you're using sublime that is exactly the
11030
09:55:37,360 --> 09:55:40,559
same thing here on the left hand side
11031
09:55:38,720 --> 09:55:43,595
you can see the project structure
11032
09:55:40,559 --> 09:55:45,595
then go to lib and then views as we have
11033
09:55:43,595 --> 09:55:47,275
the login view there let's create a view
11034
09:55:45,595 --> 09:55:49,199
called register view so right click here
11035
09:55:47,275 --> 09:55:52,720
and say new file and i'm going to say
11036
09:55:53,199 --> 09:55:58,959
okay so then we have to as the question
11037
09:55:55,436 --> 09:56:01,436
says go back to our main dart file and
11038
09:55:58,959 --> 09:56:03,756
grab this register view from here
11039
09:56:01,436 --> 09:56:06,239
group all the register view including
11040
09:56:08,319 --> 09:56:12,800
cut it in mac you do it with command x
11041
09:56:11,040 --> 09:56:14,800
and in windows and linux i think you do
11042
09:56:14,800 --> 09:56:19,360
um i cut that and i'm gonna then bring
11043
09:56:19,360 --> 09:56:22,800
as you saw in the previous chapter doing
11044
09:56:21,199 --> 09:56:23,839
these things usually cause a lot of
11045
09:56:24,559 --> 09:56:29,119
for your editor because i mean it's not
11046
09:56:27,519 --> 09:56:30,399
a headache for you because we can easily
11047
09:56:29,120 --> 09:56:31,680
fix it for us it's not a problem but
11048
09:56:30,400 --> 09:56:32,959
it's just the editor that doesn't
11049
09:56:31,680 --> 09:56:35,595
understand where all these classes are
11050
09:56:32,959 --> 09:56:36,959
located at so i i've explained this
11051
09:56:36,959 --> 09:56:40,400
the exact previous chapter before this
11052
09:56:38,559 --> 09:56:42,159
so i'm not going to explain it again so
11053
09:56:40,400 --> 09:56:44,800
let's say command dot in visual studio
11054
09:56:42,160 --> 09:56:46,640
code and then say import material to fix
11055
09:56:44,800 --> 09:56:48,480
all the stateful widget problems and all
11056
09:56:46,639 --> 09:56:50,879
the things that all the classes are
11057
09:56:48,480 --> 09:56:53,040
stored in material dart here in the
11058
09:56:53,040 --> 09:56:55,595
then we have other problems such as
11059
09:56:55,595 --> 09:57:01,756
command dot import firebase core to fix
11060
09:56:58,720 --> 09:57:02,959
that command dot import firebase options
11061
09:57:02,959 --> 09:57:08,879
it's that problem and we will also have
11062
09:57:05,360 --> 09:57:11,199
to import firebase off i believe and
11063
09:57:08,879 --> 09:57:13,435
that is also fixed all right so now we
11064
09:57:11,199 --> 09:57:14,799
have a register view here perfect
11065
09:57:14,800 --> 09:57:19,520
if you see here in our main dart now
11066
09:57:18,000 --> 09:57:21,120
there are lots of things that are
11067
09:57:19,519 --> 09:57:23,595
imported which aren't which aren't
11068
09:57:23,595 --> 09:57:28,159
so let's remove those you can see these
11069
09:57:28,160 --> 09:57:32,080
you may say okay well how do i find all
11070
09:57:30,559 --> 09:57:33,915
these problems like there's lots of
11071
09:57:32,080 --> 09:57:35,596
issues here but had i not come back to
11072
09:57:33,915 --> 09:57:37,755
the main dart file i wouldn't have seen
11073
09:57:35,595 --> 09:57:39,915
them and the way to fix that is to
11074
09:57:39,915 --> 09:57:44,719
problems view here and you'll see that
11075
09:57:42,879 --> 09:57:47,040
there are lots of problems stated that
11076
09:57:44,720 --> 09:57:49,120
you can go go and fix those you see
11077
09:57:47,040 --> 09:57:52,000
print statements are here and then
11078
09:57:49,120 --> 09:57:54,240
unused imports which you can which you
11079
09:57:54,239 --> 09:57:57,680
that's how you can use the problems
11080
09:57:57,680 --> 09:58:02,639
i'm going to do that by hand now remove
11081
09:57:59,275 --> 09:58:04,559
this and remove this so we have a clean
11082
09:58:02,639 --> 09:58:06,159
void main function here all right i'm
11083
09:58:04,559 --> 09:58:08,079
gonna do a hot restart just to make sure
11084
09:58:06,160 --> 09:58:12,000
everything's working as expected
11085
09:58:08,080 --> 09:58:12,000
then we have the login view here okay
11086
09:58:12,239 --> 09:58:18,559
so the next thing we need to do now is
11087
09:58:16,879 --> 09:58:20,319
as the notes i'm actually going to go to
11088
09:58:18,559 --> 09:58:22,559
my notes and make sure that i have
11089
09:58:20,319 --> 09:58:23,915
talked about the previous point
11090
09:58:22,559 --> 09:58:26,959
so the next thing we need to do is to
11091
09:58:23,915 --> 09:58:30,000
create a dedicated home page that does
11092
09:58:26,959 --> 09:58:32,080
the app initialization and depending on
11093
09:58:30,000 --> 09:58:34,639
whether the user is logged in or logged
11094
09:58:32,080 --> 09:58:35,916
out or if the user is verified or not
11095
09:58:34,639 --> 09:58:38,639
then it's going to display the correct
11096
09:58:35,915 --> 09:58:40,000
widget on the screen okay so
11097
09:58:38,639 --> 09:58:42,559
just to explain that a little bit more
11098
09:58:40,000 --> 09:58:45,120
is that i mean you i can say that
11099
09:58:42,559 --> 09:58:47,040
you see in your main function here that
11100
09:58:45,120 --> 09:58:48,639
when your application run you it runs
11101
09:58:47,040 --> 09:58:49,756
you're telling it to go to login view
11102
09:58:49,756 --> 09:58:54,639
why are we saying go to login view
11103
09:58:52,319 --> 09:58:57,519
why are we saying go to register view we
11104
09:58:54,639 --> 09:58:59,436
have no logic at the moment that says
11105
09:58:57,519 --> 09:59:01,199
are you logged in then show the login
11106
09:58:59,436 --> 09:59:02,880
view or if you're not like me and show
11107
09:59:02,879 --> 09:59:06,399
that's what we're going to do with our
11108
09:59:04,080 --> 09:59:08,400
home page okay so imagine the home page
11109
09:59:06,400 --> 09:59:10,160
kind of being the manager of the
11110
09:59:08,400 --> 09:59:13,200
different routes that your application
11111
09:59:10,160 --> 09:59:15,276
can manage so saying that oh if this
11112
09:59:13,199 --> 09:59:18,000
condition then do this if that condition
11113
09:59:15,275 --> 09:59:20,799
display the other screen so
11114
09:59:18,000 --> 09:59:23,120
we need a home page and conveniently
11115
09:59:20,800 --> 09:59:25,200
named is home page i mean lots of other
11116
09:59:23,120 --> 09:59:27,596
people may try to call it something else
11117
09:59:27,595 --> 09:59:30,639
but for now we're going to go with
11118
09:59:29,120 --> 09:59:32,880
homepage because it's just so easy to
11119
09:59:37,275 --> 09:59:42,400
a stateless widget stl and we're going
11120
09:59:40,160 --> 09:59:44,560
to call it home page okay and i'm gonna
11121
09:59:42,400 --> 09:59:46,959
press escape after that so now we have a
11122
09:59:44,559 --> 09:59:50,079
stateless widget called home page in our
11123
09:59:50,959 --> 09:59:57,915
what we need to do then after doing that
11124
09:59:54,879 --> 09:59:59,680
we need to go in our main dart file and
11125
09:59:57,915 --> 10:00:02,159
instead of saying login view let's just
11126
09:59:59,680 --> 10:00:03,840
say home page okay and if i press
11127
10:00:02,160 --> 10:00:05,680
command is remember this is not going to
11128
10:00:03,839 --> 10:00:07,595
take any effect immediately because hot
11129
10:00:05,680 --> 10:00:09,275
reload doesn't take into consideration
11130
10:00:07,595 --> 10:00:10,639
it changes the main function here so you
11131
10:00:09,275 --> 10:00:12,479
have to do a hot restart so you'll see
11132
10:00:21,595 --> 10:00:25,275
basically have some scaffold in our
11133
10:00:24,239 --> 10:00:27,119
homepage because we don't want to
11134
10:00:25,275 --> 10:00:28,000
display just an empty screen to the user
11135
10:00:28,879 --> 10:00:34,479
let's go in here for our container
11136
10:00:31,040 --> 10:00:36,080
instead say we return a scaffold
11137
10:00:34,480 --> 10:00:37,916
talked about scaffold in previous
11138
10:00:36,080 --> 10:00:39,040
chapters so i'm not going to explain
11139
10:00:39,040 --> 10:00:44,959
and let's go and create an app bar with
11140
10:00:42,319 --> 10:00:48,080
which we've also talked about
11141
10:00:44,959 --> 10:00:50,400
title accounts text and say home page
11142
10:00:50,480 --> 10:00:55,436
well command s in mac or control s in
11143
10:00:53,436 --> 10:00:56,959
linux and windows to save this file and
11144
10:01:02,160 --> 10:01:07,120
what do we need in the home page we said
11145
10:01:04,720 --> 10:01:10,160
that the home page needs to initialize
11146
10:01:07,120 --> 10:01:12,880
firebase it needs to first do that so
11147
10:01:10,160 --> 10:01:14,880
that we can get rid of this code in both
11148
10:01:12,879 --> 10:01:16,799
register view you see this code future
11149
10:01:14,879 --> 10:01:19,199
builder firebase initialize app and then
11150
10:01:16,800 --> 10:01:21,520
connection state done blah blah and also
11151
10:01:19,199 --> 10:01:22,639
we have the exact same code in our login
11152
10:01:22,639 --> 10:01:26,639
there's a lot of code to write in every
11153
10:01:25,040 --> 10:01:27,915
view that we're gonna develop though
11154
10:01:26,639 --> 10:01:29,519
this application isn't gonna have so
11155
10:01:27,915 --> 10:01:31,435
many views maybe six seven views but
11156
10:01:29,519 --> 10:01:34,399
still we don't wanna do initialize app
11157
10:01:31,436 --> 10:01:36,639
in every view and do a future builder
11158
10:01:34,400 --> 10:01:38,880
it's just a lot of code so that's what
11159
10:01:42,160 --> 10:01:49,120
so let's do that uh let's go and grab
11160
10:01:51,519 --> 10:01:55,680
let's grab this code with the future
11161
10:01:53,519 --> 10:01:58,000
builder pretty much maybe the entire
11162
10:01:55,680 --> 10:02:00,559
build function okay from our login view
11163
10:01:58,000 --> 10:02:03,519
so go to your login view grab the entire
11164
10:02:00,559 --> 10:02:06,159
build function until its end which is
11165
10:02:03,519 --> 10:02:07,275
here this parenthesis okay ending
11166
10:02:07,275 --> 10:02:11,040
close your login view close your
11167
10:02:08,480 --> 10:02:13,360
register view if you want to then go and
11168
10:02:11,040 --> 10:02:15,436
replace the entire override of widget
11169
10:02:15,436 --> 10:02:20,560
with that code that you just cut or
11170
10:02:18,400 --> 10:02:22,000
sorry copied from the login view paste
11171
10:02:22,000 --> 10:02:26,879
now we we don't want the home page to
11172
10:02:24,400 --> 10:02:27,680
have any logic that has anything to do
11173
10:02:29,120 --> 10:02:33,916
text fields this homepage is we're going
11174
10:02:31,199 --> 10:02:37,039
to use it for something a lot more noble
11175
10:02:33,915 --> 10:02:37,915
so you don't need all the text fields
11176
10:02:38,879 --> 10:02:42,879
all of these columns and uh your text
11177
10:02:42,879 --> 10:02:48,399
go to here where you're creating the
11178
10:02:45,360 --> 10:02:50,800
column in connection state done
11179
10:02:48,400 --> 10:02:53,436
and grab that code all the way from
11180
10:02:50,800 --> 10:02:54,880
return so if i fold it you'll see that
11181
10:02:53,436 --> 10:02:56,639
that is the entire return and i'm going
11182
10:02:56,639 --> 10:02:59,519
oops it didn't delete the entire code
11183
10:02:58,239 --> 10:03:00,799
okay so i'm going to do it by hand from
11184
10:03:09,436 --> 10:03:13,040
and instead of that column what we're
11185
10:03:20,319 --> 10:03:24,559
just like that so if firebase
11186
10:03:22,319 --> 10:03:26,480
initialization is done it's just gonna
11187
10:03:24,559 --> 10:03:28,639
say done and let's also change the text
11188
10:03:26,480 --> 10:03:30,000
here and just call it home all right
11189
10:03:28,639 --> 10:03:31,360
now that we've done that you can see we
11190
10:03:30,000 --> 10:03:33,120
still have some problems with firebase
11191
10:03:31,360 --> 10:03:34,559
not being imported because i deleted
11192
10:03:35,519 --> 10:03:39,755
imports previously so i'm gonna fix that
11193
10:03:37,436 --> 10:03:42,160
now command dot on firebase and say
11194
10:03:39,756 --> 10:03:44,080
import that and command dot on default
11195
10:03:42,160 --> 10:03:46,080
firebase options or control dot
11196
10:03:44,080 --> 10:03:49,680
depending on whether on your linux
11197
10:03:46,080 --> 10:03:54,436
whether if you're on linux or a mac or
11198
10:03:49,680 --> 10:03:54,436
windows import firebase options
11199
10:03:54,480 --> 10:03:57,680
all right so now you'll see we have a
11200
10:03:56,080 --> 10:03:58,800
homepage that just displays the word
11201
10:03:58,800 --> 10:04:03,520
once the connection state of our future
11202
10:04:01,595 --> 10:04:06,319
which is initialized app of firebase is
11203
10:04:09,199 --> 10:04:12,719
done is also displayed hot done
11204
10:04:14,160 --> 10:04:18,320
i'm gonna take that in my notes that
11205
10:04:19,915 --> 10:04:23,680
the next thing we need to do in this
11206
10:04:23,680 --> 10:04:29,680
to make sure that the user is not null
11207
10:04:26,480 --> 10:04:32,080
and that also the user is verified so
11208
10:04:29,680 --> 10:04:34,000
under some rare circumstances with
11209
10:04:32,080 --> 10:04:36,000
firebase such as when you haven't
11210
10:04:34,000 --> 10:04:39,199
initialized your firebase application
11211
10:04:36,000 --> 10:04:42,000
using initialize app the user that is
11212
10:04:43,275 --> 10:04:46,720
code or in the instance of firebits
11213
10:04:45,199 --> 10:04:49,119
running inside your application may
11214
10:04:46,720 --> 10:04:51,200
actually be null and we've talked about
11215
10:04:49,120 --> 10:04:53,436
null in uh previous chapters where we
11216
10:04:51,199 --> 10:04:54,959
talked about dart and it's basics so you
11217
10:04:53,436 --> 10:04:56,239
can go back to those chapters and watch
11218
10:04:54,959 --> 10:04:57,595
those so i'm not going to explain what
11219
10:04:57,595 --> 10:05:01,595
but just quickly null is simply said the
11220
10:04:59,915 --> 10:05:03,680
absence of a value in this case absence
11221
10:05:03,680 --> 10:05:07,915
what we need to do in our application is
11222
10:05:09,839 --> 10:05:13,435
the user the current user in the
11223
10:05:13,436 --> 10:05:19,040
um non-null meaning that it should be
11224
10:05:16,000 --> 10:05:21,360
present and also that the user's email
11225
10:05:24,400 --> 10:05:28,319
is it important for a user's email to be
11226
10:05:29,436 --> 10:05:32,959
i mean also before i say why is it
11227
10:05:31,436 --> 10:05:34,800
important for a user's email to be
11228
10:05:32,959 --> 10:05:37,915
verified maybe let's talk first about
11229
10:05:34,800 --> 10:05:39,436
what an email verification is and
11230
10:05:37,915 --> 10:05:42,079
that whether you've already seen it or
11231
10:05:39,436 --> 10:05:44,319
not so in a lot of services online if
11232
10:05:42,080 --> 10:05:46,160
for instance you go to a website
11233
10:05:44,319 --> 10:05:48,239
even if it's a shopping website or
11234
10:05:46,160 --> 10:05:49,520
amazon or whatever ebay if you say okay
11235
10:05:48,239 --> 10:05:51,436
i want to register a new user and you
11236
10:05:49,519 --> 10:05:54,000
say okay here's my email address here's
11237
10:05:55,436 --> 10:05:59,275
you will be logged into the website
11238
10:05:57,275 --> 10:06:00,400
they'll say okay if this email doesn't
11239
10:06:00,400 --> 10:06:04,480
i'm gonna allow you to register this but
11240
10:06:02,319 --> 10:06:06,080
then you wouldn't really be able to do
11241
10:06:04,480 --> 10:06:07,680
so much with the website you can search
11242
10:06:06,080 --> 10:06:09,040
stuff but you probably won't be able to
11243
10:06:11,756 --> 10:06:15,436
verified your email and that means that
11244
10:06:13,915 --> 10:06:17,119
as soon as you register for amazon for
11245
10:06:15,436 --> 10:06:19,275
instance then it will send you an email
11246
10:06:17,120 --> 10:06:21,840
to the email that that you chose upon
11247
10:06:19,275 --> 10:06:23,915
registration and there will usually be a
11248
10:06:21,839 --> 10:06:26,959
link in that email and say thank you for
11249
10:06:23,915 --> 10:06:28,959
registering a user at amazon or ebay
11250
10:06:26,959 --> 10:06:30,159
click on this link to verify your email
11251
10:06:30,160 --> 10:06:34,240
you've probably seen emails like that so
11252
10:06:32,879 --> 10:06:35,915
you could just go to your inbox and
11253
10:06:34,239 --> 10:06:38,479
search for verify and you'll probably
11254
10:06:35,915 --> 10:06:42,639
find lots of emails that ask you verify
11255
10:06:38,480 --> 10:06:44,400
your account with the service so um
11256
10:06:42,639 --> 10:06:45,756
now let's now that we talked about what
11257
10:06:44,400 --> 10:06:48,239
email verification is let's talk about
11258
10:06:45,756 --> 10:06:50,400
why it's important well let's say that
11259
10:06:48,239 --> 10:06:51,839
i'm a user and i want to use this
11260
10:06:50,400 --> 10:06:53,680
application that we're developing so i
11261
10:06:51,839 --> 10:06:57,275
want to score some notes in it
11262
10:06:53,680 --> 10:06:59,680
then i'll go and and register myself
11263
10:06:57,275 --> 10:07:02,400
under an email that i don't own
11264
10:06:59,680 --> 10:07:03,680
all right so let's say then i register
11265
10:07:03,680 --> 10:07:08,080
your email address with a password of my
11266
10:07:06,080 --> 10:07:09,840
choosing since you haven't registered
11267
10:07:08,080 --> 10:07:12,080
your email address yet with the service
11268
10:07:09,839 --> 10:07:14,479
icon and ahead of you and register your
11269
10:07:12,080 --> 10:07:16,080
email address with the service and now
11270
10:07:16,080 --> 10:07:19,680
remember i'm not logging into your email
11271
10:07:17,680 --> 10:07:22,000
i'm logging into this application with
11272
10:07:22,000 --> 10:07:26,239
now i've taken that email so if you then
11273
10:07:24,319 --> 10:07:28,239
who's the rightful owner of your email
11274
10:07:26,239 --> 10:07:31,519
address comes to this application and
11275
10:07:28,239 --> 10:07:32,799
say oh i'm a foobarbaz gmail.com and i
11276
10:07:31,519 --> 10:07:34,639
want to register an account with this
11277
10:07:32,800 --> 10:07:36,400
application and it says oops that email
11278
10:07:34,639 --> 10:07:37,915
address was already taken so you'd be
11279
10:07:36,400 --> 10:07:39,520
like how is that taken that's my email
11280
10:07:39,519 --> 10:07:43,595
that is the importance of email
11281
10:07:41,436 --> 10:07:44,800
verification what we need to do in our
11282
10:07:43,595 --> 10:07:47,519
application is to make sure that
11283
10:07:44,800 --> 10:07:49,680
whenever someone comes and registers a
11284
10:07:47,519 --> 10:07:51,595
user using the email address and a
11285
10:07:49,680 --> 10:07:54,800
password of their choosing then we're
11286
10:07:51,595 --> 10:07:56,959
gonna send a real email using firebase
11287
10:07:54,800 --> 10:07:59,916
to that email address and say
11288
10:07:56,959 --> 10:08:03,040
hey you just registered a user here make
11289
10:07:59,915 --> 10:08:06,079
sure that you click on this link that
11290
10:08:03,040 --> 10:08:08,879
says verify blah blah to actually verify
11291
10:08:06,080 --> 10:08:11,520
your user with our application or with
11292
10:08:08,879 --> 10:08:13,755
our file with our applications firebase
11293
10:08:11,519 --> 10:08:15,680
instance that sits on firebase cloud all
11294
10:08:15,680 --> 10:08:19,680
so what we need to do now is to go in
11295
10:08:18,080 --> 10:08:20,560
here in the connection state done you
11296
10:08:20,559 --> 10:08:26,479
let's then check the current user okay
11297
10:08:23,756 --> 10:08:29,275
let's see if this current user actually
11298
10:08:26,480 --> 10:08:31,040
is logged into the application so let's
11299
10:08:34,720 --> 10:08:38,800
firebase app i believe it's called
11300
10:08:45,040 --> 10:08:49,520
all right let's see if we can actually
11301
10:08:47,756 --> 10:08:51,200
google that together okay so this is
11302
10:08:51,199 --> 10:08:56,239
right base flutter get current user
11303
10:08:54,720 --> 10:08:58,160
we're probably going to end up on some
11304
10:08:58,160 --> 10:09:02,640
and we'll have a look at how we can
11305
10:09:00,480 --> 10:09:04,880
actually retrieve the current user as
11306
10:09:02,639 --> 10:09:06,479
you can see the response here is from a
11307
10:09:08,959 --> 10:09:15,040
dissu kurt jr i apologize if i'm
11308
10:09:12,959 --> 10:09:16,479
butching this name but you can see that
11309
10:09:15,040 --> 10:09:18,480
it's provided here for you that it says
11310
10:09:18,480 --> 10:09:22,480
and using that instance then you can get
11311
10:09:20,639 --> 10:09:25,839
the current user so let's do the same
11312
10:09:22,480 --> 10:09:27,436
thing here let's say firebase off
11313
10:09:30,480 --> 10:09:34,720
i'm gonna get rid of this screen on the
11314
10:09:32,239 --> 10:09:36,559
left which which is our project browser
11315
10:09:34,720 --> 10:09:39,756
and i'm gonna print this statement right
11316
10:09:36,559 --> 10:09:42,639
here before we return the done text okay
11317
10:09:39,756 --> 10:09:44,559
so i'll bring up the debug console clear
11318
10:09:42,639 --> 10:09:47,199
the debug console and i'm going to say
11319
10:09:47,199 --> 10:09:50,719
and since we've made a lot of changes
11320
10:09:49,040 --> 10:09:52,720
here you see we created a home page lots
11321
10:09:50,720 --> 10:09:54,800
of stuff in here so what we need to do
11322
10:09:52,720 --> 10:09:56,480
is just do a hot restart basically
11323
10:09:54,800 --> 10:09:58,560
flutter in this case wasn't able to
11324
10:09:58,559 --> 10:10:03,119
what we've changed in our home page so
11325
10:10:01,275 --> 10:10:05,915
there were so many changes that it just
11326
10:10:03,120 --> 10:10:07,360
couldn't handle so a hot restart is the
11327
10:10:07,360 --> 10:10:11,360
now you can see here as we printed the
11328
10:10:11,360 --> 10:10:14,879
i'm going to do this so you can see more
11329
10:10:14,879 --> 10:10:18,319
the output i'm going to bring it up a
11330
10:10:16,800 --> 10:10:19,916
little bit i'm going to increase the
11331
10:10:18,319 --> 10:10:21,360
size quite dramatically so you can see
11332
10:10:22,879 --> 10:10:26,639
i'm going to highlight the parts that
11333
10:10:24,400 --> 10:10:28,319
were actually printed so this is what
11334
10:10:26,639 --> 10:10:30,639
firebase or this is what the print
11335
10:10:28,319 --> 10:10:33,120
statement printed out for us and this is
11336
10:10:30,639 --> 10:10:35,040
user credentials that were created by
11337
10:10:35,040 --> 10:10:38,239
if you remember from the previous
11338
10:10:36,080 --> 10:10:41,040
chapter i said that make sure before you
11339
10:10:38,239 --> 10:10:43,436
come to this chapter that you have a
11340
10:10:41,040 --> 10:10:45,840
login user and this is the reason i
11341
10:10:43,436 --> 10:10:47,596
wanted us to i wanted the firebase
11342
10:10:45,839 --> 10:10:49,275
instance in our application to already
11343
10:10:47,595 --> 10:10:51,680
know that you're logged in so that when
11344
10:10:49,275 --> 10:10:53,199
we print your current user credentials
11345
10:10:51,680 --> 10:10:55,199
then as you can see it says here's the
11346
10:10:55,199 --> 10:10:59,839
and then there's a property called email
11347
10:10:57,199 --> 10:11:01,519
verified false and it says are you an
11348
10:11:01,519 --> 10:11:05,199
false and if you remember from one of
11349
10:11:03,436 --> 10:11:07,275
the earlier chapters when i talked about
11350
10:11:07,275 --> 10:11:11,436
an anonymous user is a user who hasn't
11351
10:11:09,360 --> 10:11:12,239
really logged into the application yet
11352
10:11:12,239 --> 10:11:16,000
firebase is intelligent enough to
11353
10:11:13,839 --> 10:11:17,755
understand that any user who comes to
11354
10:11:16,000 --> 10:11:19,680
your application who hasn't logged in
11355
10:11:19,680 --> 10:11:24,000
information isn't saved in keychain or
11356
10:11:21,680 --> 10:11:26,400
shared preferences on android then that
11357
10:11:24,000 --> 10:11:28,559
user is anonymous anonymous by default
11358
10:11:28,559 --> 10:11:33,040
um last action from the previous chapter
11359
10:11:31,275 --> 10:11:35,040
and you didn't log into the application
11360
10:11:35,040 --> 10:11:38,559
then you will actually be anonymous here
11361
10:11:38,559 --> 10:11:41,915
but since we've already done that we've
11362
10:11:40,319 --> 10:11:43,915
logged into the application then you'll
11363
10:11:41,915 --> 10:11:45,915
see our credentials being printed to the
11364
10:11:45,915 --> 10:11:49,915
now this is the part that i was
11365
10:11:47,680 --> 10:11:51,680
interested in which is email verified
11366
10:11:51,680 --> 10:11:58,160
so what we're going to do here is to say
11367
10:11:56,000 --> 10:12:01,040
take the user so we're saying a final
11368
10:11:58,160 --> 10:12:02,320
user is firebase off instance current
11369
10:12:01,040 --> 10:12:04,400
user i'm going to decrease the size a
11370
10:12:04,400 --> 10:12:08,959
and i'm gonna make the screen a little
11371
10:12:06,239 --> 10:12:11,756
bit bigger so you can see it better
11372
10:12:08,959 --> 10:12:12,639
and let's go then create an if statement
11373
10:12:12,639 --> 10:12:17,199
and let's say that we're gonna say what
11374
10:12:15,519 --> 10:12:20,959
what have i planned for it let's just
11375
10:12:20,959 --> 10:12:24,879
verified email verified then we're going
11376
10:12:30,000 --> 10:12:37,199
we're going to say print you need
11377
10:12:39,275 --> 10:12:42,479
you see here because i'm so glad that
11378
10:12:40,800 --> 10:12:44,639
actually we're seeing this error you can
11379
10:12:45,680 --> 10:12:49,120
how can i scroll here it says the
11380
10:12:47,275 --> 10:12:50,959
property email verify can't be
11381
10:12:49,120 --> 10:12:53,436
unconditionally accessed because the
11382
10:12:50,959 --> 10:12:56,639
receiver can be null try making the
11383
10:12:53,436 --> 10:12:59,360
access condition using question mark dot
11384
10:12:56,639 --> 10:13:01,915
or adding a null check to the target so
11385
10:12:59,360 --> 10:13:04,559
what this is saying is if you go to this
11386
10:13:01,915 --> 10:13:06,879
user move your mouse over it uh if i can
11387
10:13:06,879 --> 10:13:12,079
here you'll see that it says user is an
11388
10:13:09,680 --> 10:13:13,199
optional user so what firebase has done
11389
10:13:13,199 --> 10:13:17,839
this current user property that you can
11390
10:13:15,360 --> 10:13:19,840
see here is an optional user meaning
11391
10:13:17,839 --> 10:13:21,915
that well if something goes wrong and
11392
10:13:19,839 --> 10:13:23,435
firebase can't actually calculate your
11393
10:13:23,436 --> 10:13:27,360
for instance if you disable anonymous
11394
10:13:25,360 --> 10:13:29,756
users which you can actually do
11395
10:13:27,360 --> 10:13:31,120
then firebase will be said it will be
11396
10:13:32,559 --> 10:13:36,159
the user is absent i don't know who this
11397
10:13:36,160 --> 10:13:40,320
that is firebase api telling your
11398
10:13:38,480 --> 10:13:42,080
application that if you're using my api
11399
10:13:40,319 --> 10:13:43,680
then you need to handle this case you
11400
10:13:42,080 --> 10:13:45,916
can't just ask me if the email is
11401
10:13:43,680 --> 10:13:48,879
verified because the user may actually
11402
10:13:45,915 --> 10:13:50,719
be null the user may be absent so
11403
10:13:48,879 --> 10:13:53,040
there was a great suggestion here you
11404
10:13:50,720 --> 10:13:54,800
saw here that says you can conditionally
11405
10:13:53,040 --> 10:13:57,200
access that property using the question
11406
10:13:57,199 --> 10:14:01,275
syntax so let's do that question mark
11407
10:13:58,800 --> 10:14:03,200
done but as you do that you see you'll
11408
10:14:05,040 --> 10:14:09,360
you're asking me to compare an optional
11409
10:14:10,720 --> 10:14:14,880
an actual boolean because remember your
11410
10:14:12,480 --> 10:14:16,880
if conditions need to resolve in into a
11411
10:14:16,879 --> 10:14:22,239
um so in this case what you can do is
11412
10:14:20,480 --> 10:14:24,000
to either create something called for
11413
10:14:22,239 --> 10:14:26,159
instance if an intermediate variable you
11414
10:14:29,120 --> 10:14:33,840
and you'll say that is equal to user
11415
10:14:31,275 --> 10:14:36,559
optional access to email verified field
11416
10:14:33,839 --> 10:14:38,159
or false you see this is the question
11417
10:14:36,559 --> 10:14:39,595
mark question mark which we've already
11418
10:14:38,160 --> 10:14:41,436
talked about when we talked about dark
11419
10:14:41,436 --> 10:14:46,239
what you said here is take the left hand
11420
10:14:43,915 --> 10:14:48,559
side of this operator of question mark
11421
10:14:46,239 --> 10:14:51,119
question mark which is a null aware
11422
10:14:48,559 --> 10:14:54,159
operator you say if the left hand side
11423
10:14:51,120 --> 10:14:56,080
exists take it otherwise take the value
11424
10:14:54,160 --> 10:14:57,916
on the right okay so now if you move
11425
10:14:56,080 --> 10:15:00,800
your mouse over email verify you'll see
11426
10:14:57,915 --> 10:15:03,595
that it's a boolean all right
11427
10:15:00,800 --> 10:15:05,120
perfect so you could either do that or
11428
10:15:03,595 --> 10:15:06,799
get rid of this intermediate variable
11429
10:15:05,120 --> 10:15:08,720
that you created here and literally just
11430
10:15:06,800 --> 10:15:10,720
put the exact same code in your if
11431
10:15:08,720 --> 10:15:12,800
statement and that will work exactly as
11432
10:15:10,720 --> 10:15:14,639
it did up there so let's just go ahead
11433
10:15:12,800 --> 10:15:16,240
with that one less line of code
11434
10:15:21,839 --> 10:15:25,519
if the user's email verified or false is
11435
10:15:25,519 --> 10:15:30,239
which means that if the user's email
11436
10:15:28,000 --> 10:15:33,680
verification could be read as true or
11437
10:15:30,239 --> 10:15:37,199
false and if you can't use false if the
11438
10:15:33,680 --> 10:15:38,879
equation then in itself is true then the
11439
10:15:38,879 --> 10:15:43,360
otherwise the user isn't verified so
11440
10:15:43,360 --> 10:15:48,000
let's bring up our console i'm going to
11441
10:15:46,000 --> 10:15:49,839
change the screen layout a little bit so
11442
10:15:49,839 --> 10:15:53,275
and you can see here it says you need to
11443
10:15:51,680 --> 10:15:54,879
verify your email i actually clean the
11444
10:15:53,275 --> 10:15:56,400
screen a little bit and command s again
11445
10:15:54,879 --> 10:15:58,399
so you'll see a little bit less
11446
10:15:56,400 --> 10:16:00,480
information on screen and you can see
11447
10:15:58,400 --> 10:16:03,120
our print statement which was here got
11448
10:16:00,480 --> 10:16:05,040
printed saying that yeah you haven't
11449
10:16:03,120 --> 10:16:07,040
verified your email and you need to do
11450
10:16:07,040 --> 10:16:11,040
okay a lot of information but maybe less
11451
10:16:09,199 --> 10:16:13,039
than the other chapters and to be honest
11452
10:16:11,040 --> 10:16:14,959
with you this is all we have to talk
11453
10:16:13,040 --> 10:16:15,915
about in this chapter i just wanted to
11454
10:16:15,915 --> 10:16:20,959
or and show you that um or actually
11455
10:16:18,800 --> 10:16:23,596
explain first what email verification is
11456
10:16:20,959 --> 10:16:25,519
why is it important and that we're we
11457
10:16:23,595 --> 10:16:27,595
are going to use email verification in
11458
10:16:25,519 --> 10:16:28,479
our in our application as you'll soon
11459
10:16:28,480 --> 10:16:34,400
and how can you actually read that
11460
10:16:30,319 --> 10:16:35,680
property from a firebase user
11461
10:16:35,680 --> 10:16:40,080
that was all for this chapter now the
11462
10:16:38,559 --> 10:16:42,239
next chapter is going to be a little bit
11463
10:16:40,080 --> 10:16:45,276
different you may actually expect a
11464
10:16:42,239 --> 10:16:46,479
continuation of this chapter you would
11465
10:16:45,275 --> 10:16:49,040
think that we're going to jump right
11466
10:16:46,480 --> 10:16:51,120
into email verification but i have
11467
10:16:49,040 --> 10:16:53,040
intentionally actually put a little bit
11468
10:16:53,040 --> 10:16:56,000
flow because this is something you'll
11469
10:16:54,639 --> 10:16:58,159
have to do as a software developer
11470
10:16:56,000 --> 10:17:00,160
sometimes in that if you see something
11471
10:17:00,160 --> 10:17:04,400
kind of correct something isn't working
11472
10:17:02,400 --> 10:17:05,680
right then you'll need to address it as
11473
10:17:04,400 --> 10:17:06,800
soon as possible and this is something
11474
10:17:05,680 --> 10:17:10,080
we're going to address in the next
11475
10:17:06,800 --> 10:17:11,360
chapter the problem here that you may
11476
10:17:10,080 --> 10:17:13,596
may if you're a seasoned software
11477
10:17:11,360 --> 10:17:14,800
developer or may not have thought about
11478
10:17:14,800 --> 10:17:21,276
we are just writing code on our computer
11479
10:17:17,915 --> 10:17:23,680
this code could be easily deleted by a
11480
10:17:21,275 --> 10:17:25,595
malicious program a virus or if
11481
10:17:23,680 --> 10:17:28,480
something happens to our computer all
11482
10:17:25,595 --> 10:17:30,159
this could just go away and you'll lose
11483
10:17:28,480 --> 10:17:31,276
everything that you've written so if
11484
10:17:30,160 --> 10:17:32,880
you're not coming from a software
11485
10:17:31,275 --> 10:17:35,595
engineering background then you may not
11486
10:17:36,400 --> 10:17:39,916
i'm not going to scare you to be honest
11487
10:17:37,915 --> 10:17:41,595
with you this is not something scary but
11488
10:17:41,595 --> 10:17:44,720
what we need to do is just to make sure
11489
10:17:43,275 --> 10:17:46,720
that we have a backup of our code and
11490
10:17:44,720 --> 10:17:48,239
just that's just common sense like even
11491
10:17:46,720 --> 10:17:50,400
if you're a designer even if you're a
11492
10:17:48,239 --> 10:17:53,199
music producer even if you're a soft if
11493
10:17:53,199 --> 10:17:58,000
or product manager you probably know
11494
10:17:56,000 --> 10:18:00,879
that whatever you're working on needs to
11495
10:17:58,000 --> 10:18:02,239
be saved somewhere safely so if you have
11496
10:18:00,879 --> 10:18:03,519
a video file you're not just going to
11497
10:18:02,239 --> 10:18:05,199
put it on your computer you're probably
11498
10:18:03,519 --> 10:18:07,435
going to make a backup of it if you're
11499
10:18:05,199 --> 10:18:09,595
working with figma that that file is
11500
10:18:07,436 --> 10:18:11,596
already shared in the cloud is sorry not
11501
10:18:09,595 --> 10:18:12,799
shared it's already stored in the cloud
11502
10:18:12,800 --> 10:18:18,960
it's very rarely that you will work on
11503
10:18:16,160 --> 10:18:21,276
pieces of um documents that are not
11504
10:18:18,959 --> 10:18:23,120
securely stored in some sort of cloud
11505
10:18:21,275 --> 10:18:25,756
and even if you're working for instance
11506
10:18:23,120 --> 10:18:28,240
with a document then nowadays there's
11507
10:18:25,756 --> 10:18:29,275
also shared like um sorry there are
11508
10:18:29,275 --> 10:18:32,720
solutions for storing your documents
11509
10:18:34,480 --> 10:18:38,480
almost always when you're working on a
11510
10:18:36,400 --> 10:18:39,840
user generated document or a source code
11511
10:18:38,480 --> 10:18:41,680
in this case you'll need to make sure
11512
10:18:39,839 --> 10:18:42,719
that it's securely stored in the cloud
11513
10:18:41,680 --> 10:18:44,720
and that's what we're going to do in the
11514
10:18:42,720 --> 10:18:46,800
next chapter so we're going to talk
11515
10:18:44,720 --> 10:18:48,880
about git and github we're going to set
11516
10:18:48,879 --> 10:18:53,119
or pgp keys how do you want to say it
11517
10:18:51,595 --> 10:18:55,360
and we're actually going to dive a
11518
10:18:53,120 --> 10:18:57,276
little bit deep into git and what it
11519
10:18:55,360 --> 10:18:59,275
actually means and why it is why is it
11520
10:18:57,275 --> 10:19:03,040
good why do software developers talk a
11521
10:18:59,275 --> 10:19:04,639
lot about git and as you might know
11522
10:19:04,639 --> 10:19:08,559
not might you already know this course
11523
10:19:08,559 --> 10:19:13,839
but i couldn't help put this chapter in
11524
10:19:12,319 --> 10:19:15,756
because i believe if you're not a
11525
10:19:13,839 --> 10:19:17,199
software developer if you're coming from
11526
10:19:17,199 --> 10:19:23,275
then it is my duty kind of to tell you
11527
10:19:20,720 --> 10:19:25,520
about git and github and why is it
11528
10:19:23,275 --> 10:19:28,239
important how to use it how i like to do
11529
10:19:25,519 --> 10:19:29,039
very simple tasks with getting github so
11530
10:19:29,040 --> 10:19:32,319
so let's then prepare ourselves for the
11531
10:19:31,120 --> 10:19:34,720
next chapter which is going to be a
11532
10:19:32,319 --> 10:19:36,879
little bit less coding it's not really
11533
10:19:34,720 --> 10:19:38,800
we're not at all almost not at all going
11534
10:19:36,879 --> 10:19:41,119
to be working on the source code we're
11535
10:19:38,800 --> 10:19:42,400
mainly going to work with git and github
11536
10:19:42,400 --> 10:19:48,319
with that said i will wrap up this
11537
10:19:44,800 --> 10:19:50,400
chapter and i'll see you in the next one
11538
10:19:48,319 --> 10:19:51,595
hello and welcome to chapter 15 of this
11539
10:19:51,595 --> 10:19:56,479
in previous chapters we talked a lot
11540
10:19:54,000 --> 10:19:58,319
about setting up our project so we've so
11541
10:19:56,480 --> 10:20:00,400
far been working a lot with setting up
11542
10:19:58,319 --> 10:20:02,879
the project and the basics we also
11543
10:20:00,400 --> 10:20:05,120
created our login and registered views
11544
10:20:02,879 --> 10:20:07,040
in our flutter application as i was
11545
10:20:05,120 --> 10:20:08,639
developing this course myself i got to
11546
10:20:07,040 --> 10:20:11,120
the point that there was a lot of code
11547
10:20:08,639 --> 10:20:12,959
being written by me and then i needed to
11548
10:20:12,959 --> 10:20:17,199
in a in a place where i can always go
11549
10:20:15,120 --> 10:20:19,040
back to even if i lose this information
11550
10:20:17,199 --> 10:20:21,595
on my computer that i can go back to
11551
10:20:19,040 --> 10:20:23,756
that place and then retrieve that code
11552
10:20:23,756 --> 10:20:26,400
if you're a software developer if you're
11553
10:20:25,040 --> 10:20:28,239
if you're a seasoned software developer
11554
10:20:26,400 --> 10:20:30,000
from before and you know what git and
11555
10:20:28,239 --> 10:20:31,199
github are and you're comfortable using
11556
10:20:30,000 --> 10:20:34,000
them and you know how to set up for
11557
10:20:31,199 --> 10:20:35,839
instance your secure keys with gpg
11558
10:20:34,000 --> 10:20:37,680
then you can safely jump over this
11559
10:20:35,839 --> 10:20:39,839
chapter but if you're a designer product
11560
10:20:37,680 --> 10:20:42,160
owner product manager whoever who
11561
10:20:39,839 --> 10:20:44,159
doesn't know what git and github are or
11562
10:20:42,160 --> 10:20:45,596
maybe need some help setting those
11563
10:20:45,595 --> 10:20:50,479
then this is a good chapter for you
11564
10:20:47,915 --> 10:20:51,360
uh otherwise you can just skim quickly
11565
10:20:54,080 --> 10:20:59,200
let's talk quickly about what git and
11566
10:20:56,000 --> 10:21:00,639
github are and why we need them um as i
11567
10:20:59,199 --> 10:21:02,079
mentioned when you're working with your
11568
10:21:00,639 --> 10:21:03,436
code for instance as i was while
11569
10:21:02,080 --> 10:21:05,436
developing this course then you're
11570
10:21:03,436 --> 10:21:08,560
writing a lot of code which
11571
10:21:05,436 --> 10:21:11,275
is i mean intrinsically valuable because
11572
10:21:08,559 --> 10:21:13,275
your time was translated into those
11573
10:21:11,275 --> 10:21:15,839
pieces of code as you were writing the
11574
10:21:13,275 --> 10:21:18,720
code you spent some time and energy and
11575
10:21:15,839 --> 10:21:20,479
effort and wrote the code so it is quite
11576
10:21:18,720 --> 10:21:22,720
an important piece of information for
11577
10:21:20,480 --> 10:21:24,000
you just to lose and depending on the
11578
10:21:22,720 --> 10:21:25,680
type of project you're working on for
11579
10:21:24,000 --> 10:21:28,480
instance this project it has taken me
11580
10:21:25,680 --> 10:21:31,040
quite a lot of time to even develop the
11581
10:21:28,480 --> 10:21:32,560
idea of the project and put it together
11582
10:21:31,040 --> 10:21:33,915
so while i was while i was putting
11583
10:21:32,559 --> 10:21:36,079
together the idea of the course and
11584
10:21:33,915 --> 10:21:38,399
written writing all the bits and pieces
11585
10:21:36,080 --> 10:21:40,560
that i have to explain in every video i
11586
10:21:38,400 --> 10:21:43,596
made quite a lot of backups of that of
11587
10:21:40,559 --> 10:21:45,435
those ideas because had i not done that
11588
10:21:43,595 --> 10:21:47,519
and had i just put everything in just
11589
10:21:45,436 --> 10:21:50,160
one piece of paper or something or just
11590
10:21:47,519 --> 10:21:53,519
even one digital document on my computer
11591
10:21:50,160 --> 10:21:55,680
had i lost a document then well yeah
11592
10:21:53,519 --> 10:21:58,079
i would have lost it and i would have
11593
10:21:55,680 --> 10:22:00,400
had to begin from the absolute beginning
11594
10:21:58,080 --> 10:22:01,840
and this is the same thing for your code
11595
10:22:01,839 --> 10:22:07,199
so you need to use two services called
11596
10:22:10,080 --> 10:22:14,560
in in a safe place so that you can
11597
10:22:14,559 --> 10:22:22,399
so let's talk quickly about what is git
11598
10:22:22,480 --> 10:22:28,080
so what you need to know about gitz is
11599
10:22:28,080 --> 10:22:35,276
piece of software on your computer
11600
10:22:36,879 --> 10:22:43,119
various changes that you make to a code
11601
10:22:40,319 --> 10:22:45,839
base such as our project at different
11602
10:22:43,120 --> 10:22:48,160
times keeping track of the date those
11603
10:22:45,839 --> 10:22:50,719
changes were made the person who made
11604
10:22:48,160 --> 10:22:52,880
the changes and the changes themselves
11605
10:22:50,720 --> 10:22:54,720
and also it will be able to provide you
11606
10:22:52,879 --> 10:22:57,595
the difference between your recent
11607
10:22:57,595 --> 10:23:03,275
provided in the or what was already
11608
10:22:59,839 --> 10:23:06,399
committed into this git repository
11609
10:23:03,275 --> 10:23:07,680
well what a git repository really is is
11610
10:23:07,680 --> 10:23:12,400
is an empty bucket initially where there
11611
10:23:09,756 --> 10:23:15,200
is nothing in there and as you interact
11612
10:23:12,400 --> 10:23:17,275
with your source code then you'd be like
11613
10:23:15,199 --> 10:23:19,199
okay now i want to turn this source code
11614
10:23:17,275 --> 10:23:20,959
that i've written into a bucket so then
11615
10:23:19,199 --> 10:23:23,519
there's a bucket created around your
11616
10:23:20,959 --> 10:23:26,319
source code called a git repository
11617
10:23:23,519 --> 10:23:28,959
which keeps track of all the changes
11618
10:23:26,319 --> 10:23:30,879
that you're that you're making or
11619
10:23:28,959 --> 10:23:33,915
anybody else that works on the same
11620
10:23:30,879 --> 10:23:37,275
source code is making to the code and it
11621
10:23:33,915 --> 10:23:39,275
will allow you to save snapshots of
11622
10:23:39,275 --> 10:23:44,159
at specific times of your choosing
11623
10:23:42,319 --> 10:23:45,360
if you're a designer of your and you're
11624
10:23:45,360 --> 10:23:50,639
figma for instance figma already
11625
10:23:48,000 --> 10:23:52,639
automatically saves your work at the
11626
10:23:50,639 --> 10:23:55,275
times that it sees fit so you never have
11627
10:23:52,639 --> 10:23:57,120
to press really a save button and also
11628
10:23:57,120 --> 10:24:03,360
and it keeps track it has a version
11629
10:24:00,080 --> 10:24:05,520
history so you can literally go to figma
11630
10:24:03,360 --> 10:24:07,520
and say okay i've done my work i want to
11631
10:24:05,519 --> 10:24:09,039
actually commit my changes in the
11632
10:24:07,519 --> 10:24:10,159
version history and i want to give it a
11633
10:24:10,160 --> 10:24:14,080
most designers don't do that and they
11634
10:24:11,839 --> 10:24:16,639
legislate must save their work
11635
10:24:14,080 --> 10:24:18,639
automatically and by that figma just
11636
10:24:16,639 --> 10:24:20,479
says here's the timeline of your changes
11637
10:24:18,639 --> 10:24:22,159
at this time you did this at this time
11638
10:24:22,160 --> 10:24:26,480
even if you're a designer you're
11639
10:24:23,680 --> 10:24:29,199
implicitly using something called a
11640
10:24:26,480 --> 10:24:30,720
version control and which in it in that
11641
10:24:30,720 --> 10:24:34,000
but when you're coming to the software
11642
10:24:32,559 --> 10:24:35,519
development world we're working with
11643
10:24:34,000 --> 10:24:38,080
your flutter application there is no
11644
10:24:35,519 --> 10:24:39,915
figma there and you're working with raw
11645
10:24:38,080 --> 10:24:42,880
code so you're going into visual studio
11646
10:24:39,915 --> 10:24:45,199
code or sublime or whatever text editor
11647
10:24:42,879 --> 10:24:47,199
that you're using android studio
11648
10:24:47,199 --> 10:24:51,275
then there is no service sitting there
11649
10:24:49,595 --> 10:24:53,199
and saying oh you made some changes let
11650
10:24:51,275 --> 10:24:54,559
me let me help you save it in some sort
11651
10:24:57,120 --> 10:25:01,520
the system that allows you to do that on
11652
10:24:59,199 --> 10:25:03,519
your computer is called git so git is a
11653
10:25:01,519 --> 10:25:05,435
software that allows you to keep track
11654
10:25:03,519 --> 10:25:07,755
of changes that you're making to source
11655
10:25:07,756 --> 10:25:11,360
so i can see here that before we
11656
10:25:09,595 --> 10:25:13,839
continue we're gonna actually talk a
11657
10:25:15,040 --> 10:25:19,680
what i'm gonna do here i'm gonna add lib
11658
10:25:17,360 --> 10:25:21,199
a little bit here and improvise
11659
10:25:19,680 --> 10:25:22,800
and i'm gonna go here and make the
11660
10:25:21,199 --> 10:25:24,959
screen a little bit bigger i'm gonna
11661
10:25:22,800 --> 10:25:27,276
bring up terminal and you don't see it
11662
10:25:24,959 --> 10:25:29,199
on that screen because it opened on
11663
10:25:29,199 --> 10:25:33,519
let me just increase the size and bring
11664
10:25:31,436 --> 10:25:35,916
it up here so you also see it
11665
10:25:33,519 --> 10:25:37,915
so i'm gonna go here to my development
11666
10:25:37,915 --> 10:25:46,479
and i'm going to go to my projects and
11667
10:25:47,199 --> 10:25:52,399
make a folder i'm going to say git
11668
10:25:52,400 --> 10:25:56,480
should i call it git or just let's
11669
10:25:54,480 --> 10:25:59,200
actually create a folder called
11670
10:25:59,199 --> 10:26:05,595
let's go into testing then it is an
11671
10:26:02,239 --> 10:26:07,275
empty folder as you can see for now
11672
10:26:05,595 --> 10:26:09,360
and what we're going to do is we're
11673
10:26:07,275 --> 10:26:12,479
going to tell git now which is a
11674
10:26:09,360 --> 10:26:14,160
software installed on my computer um to
11675
10:26:12,480 --> 10:26:16,560
tell it that okay all of a sudden i want
11676
10:26:14,160 --> 10:26:18,320
to turn this empty directory here into
11677
10:26:16,559 --> 10:26:20,639
something called a repository remember
11678
10:26:18,319 --> 10:26:22,720
it's going to be a bucket then that
11679
10:26:20,639 --> 10:26:25,360
keeps track of changes in the current
11680
10:26:22,720 --> 10:26:27,200
directory now before we continue maybe
11681
10:26:27,199 --> 10:26:31,275
maybe you also need to actually install
11682
10:26:29,275 --> 10:26:32,639
git on your computer if you're not
11683
10:26:31,275 --> 10:26:34,559
coming from a software development
11684
10:26:32,639 --> 10:26:36,639
background you probably don't even have
11685
10:26:34,559 --> 10:26:38,319
git installed on your computer so i'm
11686
10:26:38,319 --> 10:26:42,879
a browser window here and say install
11687
10:26:43,839 --> 10:26:49,275
if i google install git you will see
11688
10:26:46,000 --> 10:26:52,480
that there there's like information
11689
10:26:49,275 --> 10:26:53,680
how you can install git on your computer
11690
10:26:53,680 --> 10:27:01,120
are on a macintosh and you have already
11691
10:26:56,800 --> 10:27:03,840
installed xcode xcode comes pre pre like
11692
10:27:01,120 --> 10:27:05,916
pre-packaged with gits already
11693
10:27:03,839 --> 10:27:07,435
if you're on windows i believe that you
11694
10:27:05,915 --> 10:27:09,435
actually have to i have a windows
11695
10:27:07,436 --> 10:27:12,080
machine right here next to me which i
11696
10:27:09,436 --> 10:27:14,319
use daily i believe for windows you'll
11697
10:27:12,080 --> 10:27:16,959
have to install git personally like
11698
10:27:14,319 --> 10:27:19,120
manual so let's say install git
11699
10:27:19,120 --> 10:27:24,240
uh get download package get a time get
11700
10:27:24,800 --> 10:27:29,120
oops my ipad for some reason got
11701
10:27:27,436 --> 10:27:31,200
disconnected here so i'm going to have
11702
10:27:32,239 --> 10:27:38,479
let's see now install git on linux
11703
10:27:38,480 --> 10:27:42,000
i believe there is a good package
11704
10:27:40,319 --> 10:27:44,319
actually for getting it on windows let
11705
10:27:42,000 --> 10:27:45,680
me go back here installer on windows you
11706
10:27:45,680 --> 10:27:49,360
just go to i'm going to increase the
11707
10:27:47,680 --> 10:27:51,595
screen size a little bit as well so you
11708
10:27:49,360 --> 10:27:54,319
can see it a little bit better
11709
10:27:51,595 --> 10:27:56,639
here it says go to https get scm com
11710
10:27:54,319 --> 10:27:58,239
download win so i'm going to go here
11711
10:27:56,639 --> 10:27:59,519
and it's going to start downloading so
11712
10:27:58,239 --> 10:28:01,519
i'm just going to say cancel because
11713
10:27:59,519 --> 10:28:03,275
right now i'm in a macintosh so here is
11714
10:28:01,519 --> 10:28:04,879
where you can download git and install
11715
10:28:04,879 --> 10:28:08,159
if you are on a windows machine and you
11716
10:28:06,480 --> 10:28:09,680
have the linux subsystem which i do on
11717
10:28:08,160 --> 10:28:12,960
my windows machine then you may actually
11718
10:28:09,680 --> 10:28:14,000
want to download git using see sudo apt
11719
10:28:17,040 --> 10:28:20,480
it is possible that the linux subsystem
11720
10:28:18,720 --> 10:28:22,080
on windows already comes shipped with
11721
10:28:20,480 --> 10:28:23,596
git so you don't have to do anything i
11722
10:28:22,080 --> 10:28:25,120
wouldn't be surprised if git was one of
11723
10:28:23,595 --> 10:28:27,119
the absolute core components that was
11724
10:28:28,319 --> 10:28:32,319
so that's for a macintosh and also if
11725
10:28:30,879 --> 10:28:35,040
you're on a macintosh and you don't have
11726
10:28:36,319 --> 10:28:41,120
then you may need to also download git
11727
10:28:38,639 --> 10:28:42,559
separately so let's go back here and see
11728
10:28:42,559 --> 10:28:47,435
uh if you say mac os here it says there
11729
10:28:45,839 --> 10:28:49,435
are several ways to install get on mac
11730
10:28:47,436 --> 10:28:52,319
users probably install the xcode command
11731
10:28:49,436 --> 10:28:54,239
line tools which we've already done so
11732
10:28:52,319 --> 10:28:56,559
if you don't have it in slavery it will
11733
10:28:56,559 --> 10:29:01,199
so otherwise you can go in here get
11734
10:28:58,639 --> 10:29:03,360
semcom download mac and then you can do
11735
10:29:03,360 --> 10:29:07,040
so if that is what you want to do then
11736
10:29:05,360 --> 10:29:08,319
you first have to actually install
11737
10:29:09,120 --> 10:29:13,596
go into this link and say homebrew
11738
10:29:11,436 --> 10:29:16,400
install basically just do as it says
11739
10:29:13,595 --> 10:29:18,879
here you see there's the command
11740
10:29:21,839 --> 10:29:26,319
and if you're on linux then a sudo apt
11741
10:29:24,720 --> 10:29:28,000
install git i think maybe you don't even
11742
10:29:26,319 --> 10:29:30,480
need to have sudo if you're installing
11743
10:29:28,000 --> 10:29:33,436
for the current user so just apt
11744
10:29:30,480 --> 10:29:35,436
app is it get or install i forgot but
11745
10:29:42,160 --> 10:29:45,840
yeah i mean i'm assuming you're kind of
11746
10:29:44,160 --> 10:29:47,360
like on a debian based distribution as
11747
10:29:45,839 --> 10:29:50,799
well but otherwise there's information
11748
10:29:47,360 --> 10:29:50,800
here how you can install it otherwise so
11749
10:29:52,559 --> 10:29:55,435
that was a lot of information and before
11750
10:29:54,000 --> 10:29:57,595
we continue i'm just going to try to
11751
10:29:55,436 --> 10:29:59,840
make sure that i'm connected back to my
11752
10:29:59,839 --> 10:30:04,879
to my laptop to my ipad here because on
11753
10:30:02,480 --> 10:30:06,560
my ipad i keep hold of all the
11754
10:30:04,879 --> 10:30:08,399
information that i have to provide to
11755
10:30:06,559 --> 10:30:10,399
you in some sort of like a chronological
11756
10:30:08,400 --> 10:30:12,480
order so it is very important for me to
11757
10:30:10,400 --> 10:30:14,720
actually get my notes up there so i'm
11758
10:30:12,480 --> 10:30:16,480
going to try to connect to my ipad and
11759
10:30:19,519 --> 10:30:23,680
now that you've i'm assuming that you've
11760
10:30:21,360 --> 10:30:26,160
installed git i'm assuming that that is
11761
10:30:26,160 --> 10:30:30,320
then it's going to tell me in this case
11762
10:30:27,680 --> 10:30:32,959
that user being get that's where get it
11763
10:30:30,319 --> 10:30:34,400
installed if you're on windows to be
11764
10:30:32,959 --> 10:30:37,360
honest with you i don't know the command
11765
10:30:34,400 --> 10:30:39,360
on windows to know whether it come like
11766
10:30:37,360 --> 10:30:41,840
git is installed but on windows all you
11767
10:30:39,360 --> 10:30:43,120
have to do is just to type git and if if
11768
10:30:43,120 --> 10:30:47,916
it throws an error it says git isn't
11769
10:30:45,595 --> 10:30:51,119
available either you haven't installed
11770
10:30:47,915 --> 10:30:53,519
git and if you have installed git maybe
11771
10:30:51,120 --> 10:30:55,040
git isn't in the current path so you'll
11772
10:30:53,519 --> 10:30:57,435
have to go and adjust your environment
11773
10:30:55,040 --> 10:30:59,520
variables in order to get git and
11774
10:30:57,436 --> 10:31:01,680
is lots of information on the internet
11775
10:30:59,519 --> 10:31:03,680
so we're not going to focus right now on
11776
10:31:01,680 --> 10:31:05,199
how to install git exactly because
11777
10:31:03,680 --> 10:31:06,080
that's going to be like its own course
11778
10:31:06,080 --> 10:31:09,120
but if you follow the instructions that
11779
10:31:07,519 --> 10:31:11,199
were provided on the website that i just
11780
10:31:09,120 --> 10:31:12,880
showed you should be able to get far
11781
10:31:12,879 --> 10:31:17,275
i'm assuming now git is is installed on
11782
10:31:15,120 --> 10:31:19,040
our computer and you can see here we're
11783
10:31:17,275 --> 10:31:20,479
in a folder called testing so if i say
11784
10:31:19,040 --> 10:31:23,360
where that testing is you can see that
11785
10:31:20,480 --> 10:31:25,200
is is right here now what we want to do
11786
10:31:23,360 --> 10:31:26,800
is to say testing for instance is the
11787
10:31:25,199 --> 10:31:28,319
project that we're gonna place all our
11788
10:31:26,800 --> 10:31:30,480
code in okay so there's gonna be
11789
10:31:28,319 --> 10:31:33,436
information that we're gonna write here
11790
10:31:30,480 --> 10:31:35,840
in this um in this folder there's gonna
11791
10:31:33,436 --> 10:31:38,319
be some dart files there's gonna be some
11792
10:31:35,839 --> 10:31:40,639
png and jpeg files there's gonna be our
11793
10:31:38,319 --> 10:31:43,360
application icon all that stuff
11794
10:31:40,639 --> 10:31:44,239
and we want to store this safely
11795
10:31:44,239 --> 10:31:51,040
the first thing you may want to do is to
11796
10:31:48,239 --> 10:31:54,639
to basically tell git that this current
11797
10:31:51,040 --> 10:31:57,120
directory in itself is a git's
11798
10:31:54,639 --> 10:31:58,639
repository so the bucket remember the
11799
10:31:57,120 --> 10:32:00,160
bucket is going to wrap itself around
11800
10:32:00,160 --> 10:32:03,596
if i get the contents of this directory
11801
10:32:02,400 --> 10:32:05,520
at the moment you can see that it's
11802
10:32:03,595 --> 10:32:08,319
completely empty but if you want to
11803
10:32:05,519 --> 10:32:10,319
create a git bucket or a git repository
11804
10:32:08,319 --> 10:32:13,120
around this directory all you have to
11805
10:32:10,319 --> 10:32:14,800
say is just to say git init dots
11806
10:32:14,800 --> 10:32:19,360
you'll see here now it says that
11807
10:32:16,959 --> 10:32:20,720
initialize amt git repository in this
11808
10:32:20,720 --> 10:32:24,319
so now if i get the contents of this
11809
10:32:22,559 --> 10:32:26,959
folder you'll see that there is a new
11810
10:32:24,319 --> 10:32:29,120
directory called dot git and dot git
11811
10:32:26,959 --> 10:32:31,915
directory is where git basically keeps
11812
10:32:29,120 --> 10:32:33,840
track of its internal like the changes
11813
10:32:35,199 --> 10:32:40,799
save when you save it who is it that
11814
10:32:37,680 --> 10:32:42,239
saved the work etc so now that you've
11815
10:32:40,800 --> 10:32:44,240
done that now you've created a git
11816
10:32:42,239 --> 10:32:47,360
repository basically around this empty
11817
10:32:44,239 --> 10:32:49,119
directory you can issue various diff git
11818
10:32:50,400 --> 10:32:54,800
this will give you the current status on
11819
10:32:56,400 --> 10:33:01,436
directory and you can see here as soon
11820
10:32:58,879 --> 10:33:03,839
as we created a git repository with git
11821
10:33:01,436 --> 10:33:06,160
in it all of a sudden my terminal
11822
10:33:03,839 --> 10:33:08,639
changed my prompt here and said that all
11823
10:33:06,160 --> 10:33:09,840
of a sudden testing is not just testing
11824
10:33:08,639 --> 10:33:12,800
anymore but it's actually a git
11825
10:33:09,839 --> 10:33:14,399
directory and we're on a branch called
11826
10:33:15,436 --> 10:33:18,959
i don't want to talk about branches
11827
10:33:17,040 --> 10:33:20,080
right now but just know that there are
11828
10:33:20,080 --> 10:33:22,880
yeah let's just not talk about branches
11829
10:33:21,839 --> 10:33:25,359
right now because i'm planning to do
11830
10:33:25,360 --> 10:33:28,800
so but what we are going to talk about
11831
10:33:27,120 --> 10:33:31,276
is this little message here that says no
11832
10:33:31,275 --> 10:33:36,639
in git whenever you're working um git
11833
10:33:36,639 --> 10:33:41,519
automatically you need to tell git to
11834
10:33:38,720 --> 10:33:43,120
save your work and those points where
11835
10:33:41,519 --> 10:33:45,435
you save your work there are call
11836
10:33:43,120 --> 10:33:47,840
commits it commits as its name indicates
11837
10:33:45,436 --> 10:33:50,480
is you committing your work you say i
11838
10:33:47,839 --> 10:33:52,639
committed to this and i want to save it
11839
10:33:50,480 --> 10:33:54,640
and that's i mean it could be called
11840
10:33:59,436 --> 10:34:04,160
read as kind of more like a verb like oh
11841
10:34:02,080 --> 10:34:06,639
am i gonna save it now or what is it but
11842
10:34:04,160 --> 10:34:08,480
if i say here's my commit then
11843
10:34:06,639 --> 10:34:10,559
it could be a little bit easier to infer
11844
10:34:08,480 --> 10:34:13,276
that oh it's a piece of information that
11845
10:34:10,559 --> 10:34:14,399
you've saved and you've committed to so
11846
10:34:13,275 --> 10:34:16,799
i think maybe that's the reason it's
11847
10:34:14,400 --> 10:34:17,756
called the committee i'm not sure
11848
10:34:17,756 --> 10:34:22,160
those commits are points of time where a
11849
10:34:20,559 --> 10:34:24,799
person that has access to this
11850
10:34:22,160 --> 10:34:27,520
repository saved their work okay so just
11851
10:34:24,800 --> 10:34:30,319
remember that that is a commit and if we
11852
10:34:27,519 --> 10:34:31,839
see here the status says no commits yet
11853
10:34:30,319 --> 10:34:34,000
because there was literally nothing that
11854
10:34:31,839 --> 10:34:35,839
you told get to save now what we're
11855
10:34:34,000 --> 10:34:37,199
going to do is to open up visual studio
11856
10:34:35,839 --> 10:34:39,039
code so i'm going to bring up you just
11857
10:34:37,199 --> 10:34:40,719
to studio code here and you can see it's
11858
10:34:40,720 --> 10:34:44,160
and i'm gonna create a file here and
11859
10:34:48,199 --> 10:34:54,159
info.txt so just text file okay
11860
10:34:51,756 --> 10:34:56,319
so here's an empty file and i'm just
11861
10:34:54,160 --> 10:34:57,840
gonna type hello in here increase the
11862
10:34:56,319 --> 10:34:59,040
size a little bit as well so you can see
11863
10:34:59,756 --> 10:35:03,756
now if i say git status here you can see
11864
10:35:02,080 --> 10:35:06,639
all of a sudden it doesn't say no
11865
10:35:03,756 --> 10:35:10,400
commits yet it it well basically it says
11866
10:35:06,639 --> 10:35:14,479
dad but it also says on track files and
11867
10:35:10,400 --> 10:35:16,560
it puts the info text right here now
11868
10:35:14,480 --> 10:35:18,720
let me then explain what attract file
11869
10:35:16,559 --> 10:35:21,519
and on track file is a track file is a
11870
10:35:18,720 --> 10:35:24,559
file that you've told git about before
11871
10:35:21,519 --> 10:35:26,239
so it it's tracking the changes being
11872
10:35:26,239 --> 10:35:31,360
on track file is a file that you have
11873
10:35:28,319 --> 10:35:33,199
not told yet before about so it says oh
11874
10:35:31,360 --> 10:35:34,959
here's a file you're doing something
11875
10:35:33,199 --> 10:35:36,399
with it but i'm not gonna even look at
11876
10:35:34,959 --> 10:35:38,479
it i'm not gonna keep track of it
11877
10:35:36,400 --> 10:35:39,436
because you don't you didn't tell me to
11878
10:35:42,639 --> 10:35:47,595
i mean yeah a file basically can be in
11879
10:35:45,275 --> 10:35:49,915
three states in git right now you've
11880
10:35:47,595 --> 10:35:52,639
learned two of them either tracked or on
11881
10:35:49,915 --> 10:35:55,680
track but it could also be in another
11882
10:35:52,639 --> 10:35:56,559
state that i will show you soon
11883
10:35:56,559 --> 10:36:01,435
now you can see there's a message here
11884
10:35:58,639 --> 10:36:02,879
that it says let me bring actually the
11885
10:36:01,436 --> 10:36:05,520
terminal a little bit up here so you can
11886
10:36:02,879 --> 10:36:08,000
see the terminal in its entirety it says
11887
10:36:05,519 --> 10:36:10,239
use git add and then the name of the
11888
10:36:08,000 --> 10:36:12,319
file in order to include what will be
11889
10:36:10,239 --> 10:36:15,199
committed so let's do that i'm just
11890
10:36:12,319 --> 10:36:17,360
going to say git add info txt
11891
10:36:15,199 --> 10:36:18,959
and now i'm going to say git status and
11892
10:36:17,360 --> 10:36:21,275
all of a sudden you'll see that get
11893
10:36:18,959 --> 10:36:23,595
understood that here's a new file you're
11894
10:36:21,275 --> 10:36:26,479
committing committing this file
11895
10:36:23,595 --> 10:36:28,239
called info text but you can see
11896
10:36:26,480 --> 10:36:30,480
that it still says you haven't committed
11897
10:36:28,239 --> 10:36:32,159
anything but it says changes to be
11898
10:36:30,480 --> 10:36:34,240
committed and all of a sudden this file
11899
10:36:34,239 --> 10:36:38,400
remember i said a file can be in three
11900
10:36:36,239 --> 10:36:40,239
states on tracked which means git
11901
10:36:38,400 --> 10:36:42,800
doesn't know about it tracked which
11902
10:36:40,239 --> 10:36:44,400
means it does know about it or it could
11903
10:36:44,400 --> 10:36:50,080
so if you see here this file is green
11904
10:36:47,519 --> 10:36:51,915
and it says changes to be committed so
11905
10:36:51,915 --> 10:36:56,959
you have made changes to a file
11906
10:36:54,879 --> 10:36:59,199
and you've told git that you want to
11907
10:36:56,959 --> 10:37:00,159
commit it but you haven't committed it
11908
10:37:00,160 --> 10:37:04,720
now you may be asking okay why would i
11909
10:37:02,800 --> 10:37:07,680
have files that aren't going to be
11910
10:37:04,720 --> 10:37:09,275
committed in some projects if you have
11911
10:37:07,680 --> 10:37:11,756
some information for instance if you're
11912
10:37:09,275 --> 10:37:13,756
working with 10 other developers
11913
10:37:13,756 --> 10:37:17,756
tests and you're writing some code in
11914
10:37:15,680 --> 10:37:20,000
the in the directory where your source
11915
10:37:17,756 --> 10:37:21,756
code is placed at but you don't you're
11916
10:37:20,000 --> 10:37:23,199
not really ready with that file yet you
11917
10:37:21,756 --> 10:37:25,040
don't want to commit it into a branch
11918
10:37:23,199 --> 10:37:27,119
where everyone else sees then you could
11919
10:37:25,040 --> 10:37:29,595
say oh i'm not going to commit this it
11920
10:37:27,120 --> 10:37:31,360
is not staged file i'm not even ready
11921
10:37:29,595 --> 10:37:33,360
for staging it and putting it into the
11922
10:37:31,360 --> 10:37:35,436
commit so in that case you're not going
11923
10:37:33,360 --> 10:37:36,800
to add it to the staging area okay so
11924
10:37:36,800 --> 10:37:40,639
now that you've you've done that you
11925
10:37:38,239 --> 10:37:42,319
just said git add you can commit it and
11926
10:37:40,639 --> 10:37:45,436
a commit literally means that you're
11927
10:37:42,319 --> 10:37:47,199
going to save this work in git okay
11928
10:37:45,436 --> 10:37:48,480
and the way to do that is using git
11929
10:37:48,480 --> 10:37:53,916
and then you will provide a message
11930
10:37:50,959 --> 10:37:55,680
using dash m here and then quotation
11931
10:37:53,915 --> 10:37:58,000
marks okay so here you will write a
11932
10:37:55,680 --> 10:38:00,000
message that will be appended to your
11933
10:38:00,000 --> 10:38:04,319
so what we're going to do here says
11934
10:38:04,319 --> 10:38:10,720
add new info txt file for fun okay and
11935
10:38:08,559 --> 10:38:12,799
then i'm just going to press enter
11936
10:38:10,720 --> 10:38:15,520
and see here it says one file change and
11937
10:38:12,800 --> 10:38:17,756
one insertions and it will say that yeah
11938
10:38:15,519 --> 10:38:20,559
it has created this file okay so i'm
11939
10:38:17,756 --> 10:38:23,040
gonna clear my uh terminal now and we're
11940
10:38:23,040 --> 10:38:27,120
all of a sudden that message that about
11941
10:38:25,040 --> 10:38:28,879
no commits yet disappeared and all this
11942
10:38:27,120 --> 10:38:30,959
is is that is that you're on a branch
11943
10:38:28,879 --> 10:38:32,319
called main and there's nothing to
11944
10:38:33,756 --> 10:38:37,916
what do you do then if you want to see
11945
10:38:36,239 --> 10:38:39,595
the commit that you just made like if
11946
10:38:37,915 --> 10:38:41,119
you want to see okay what are all the
11947
10:38:39,595 --> 10:38:43,275
comments that were made then in that
11948
10:38:45,120 --> 10:38:49,276
all the all the commits that were made
11949
10:38:47,040 --> 10:38:51,275
and who they were made by and you will
11950
10:38:49,275 --> 10:38:53,519
also be able to see the date that were
11951
10:38:51,275 --> 10:38:56,159
made and the commit message do you
11952
10:38:53,519 --> 10:39:00,239
remember we said git commit dash m so
11953
10:38:56,160 --> 10:39:00,240
that was the message provided in the get
11954
10:39:00,400 --> 10:39:04,480
command and then saved in the repository
11955
10:39:05,436 --> 10:39:10,639
that is the message and that's the email
11956
10:39:07,040 --> 10:39:11,595
of the person who basically did that
11957
10:39:11,595 --> 10:39:16,079
now i jumped over a little bit here and
11958
10:39:16,080 --> 10:39:20,160
and to be honest with you that was
11959
10:39:18,000 --> 10:39:22,400
i didn't really think about that some
11960
10:39:20,160 --> 10:39:24,160
people if you're installing git
11961
10:39:22,400 --> 10:39:26,560
then you're not going to have all this
11962
10:39:24,160 --> 10:39:27,436
information already set up like who you
11963
10:39:27,436 --> 10:39:32,480
and there's information about how you
11964
10:39:29,680 --> 10:39:33,519
configured it and how you tell get who
11965
10:39:33,519 --> 10:39:39,275
and what your name is etc and that is
11966
10:39:36,559 --> 10:39:41,199
using a command called git config
11967
10:39:41,199 --> 10:39:45,915
but you could actually read about read
11968
10:39:43,436 --> 10:39:47,436
about that online so just say git config
11969
10:39:45,915 --> 10:39:50,239
and then you will get a lot of
11970
10:39:47,436 --> 10:39:53,040
information about how to do that so but
11971
10:39:50,239 --> 10:39:55,119
just know that git is such a big world
11972
10:39:53,040 --> 10:39:57,680
that if i want to explain everything
11973
10:39:55,120 --> 10:39:58,880
about git we could have a course that is
11974
10:39:58,879 --> 10:40:04,559
30 hours just talking about git so
11975
10:40:02,319 --> 10:40:07,040
just know that there's constraints for
11976
10:40:04,559 --> 10:40:09,119
on me to explain like the absolute
11977
10:40:07,040 --> 10:40:11,520
basics of get to you in order for us to
11978
10:40:09,120 --> 10:40:13,840
be able to use git in this course for
11979
10:40:11,519 --> 10:40:16,879
this particular use case so i'm gonna
11980
10:40:13,839 --> 10:40:19,039
just focus on those things okay so
11981
10:40:16,879 --> 10:40:20,239
um now that you know how to commit i
11982
10:40:24,160 --> 10:40:28,560
place to start learning more about git
11983
10:40:26,639 --> 10:40:30,720
and the thing you may want to know so
11984
10:40:28,559 --> 10:40:32,799
which we're not going to use in our in
11985
10:40:32,800 --> 10:40:37,360
is branch using git and why you'll need
11986
10:40:39,595 --> 10:40:44,879
is a piece of software that allows
11987
10:40:42,160 --> 10:40:48,080
groups of people work on the same piece
11988
10:40:44,879 --> 10:40:49,755
of code without losing their changes now
11989
10:40:48,080 --> 10:40:52,000
if you're for instance from a design
11990
10:40:49,756 --> 10:40:54,720
background if you're working with figma
11991
10:40:52,000 --> 10:40:57,116
if i go into the design file that you
11992
10:40:54,720 --> 10:40:58,959
you've shared with me as an observer i
11993
10:40:57,116 --> 10:41:01,756
cannot make any changes so i can only
11994
10:40:58,959 --> 10:41:05,275
observe you and i can just like export
11995
10:41:01,756 --> 10:41:06,720
assets uh or even if you're using um a
11996
10:41:06,720 --> 10:41:10,559
it's the same thing you can so someone
11997
10:41:08,959 --> 10:41:12,080
some designer sitting with sketch for
11998
10:41:10,559 --> 10:41:13,839
instance and then they're exporting the
11999
10:41:12,080 --> 10:41:14,959
work into zeppelin and then you as an
12000
10:41:14,959 --> 10:41:17,756
you're exporting that information from
12001
10:41:17,756 --> 10:41:22,800
but you can't make any changes to the
12002
10:41:19,595 --> 10:41:24,479
source however with git when you share
12003
10:41:22,800 --> 10:41:26,000
your information for like your git
12004
10:41:24,480 --> 10:41:28,480
repository with someone else they can
12005
10:41:26,000 --> 10:41:31,680
also make commits to it as you'll see
12006
10:41:28,480 --> 10:41:32,720
soon we're going to use github for that
12007
10:41:35,756 --> 10:41:40,239
make sure that every person is
12008
10:41:38,080 --> 10:41:42,959
identified correctly and then they have
12009
10:41:42,959 --> 10:41:47,519
that they have configured get in the
12010
10:41:47,519 --> 10:41:51,199
i mean we're talking about branches so
12011
10:41:51,199 --> 10:41:56,159
don't want to affect what you are doing
12012
10:41:53,680 --> 10:41:58,800
in this main branch so just imagine and
12013
10:41:58,800 --> 10:42:01,596
train line like your train is going
12014
10:42:01,595 --> 10:42:06,319
and maybe some some places your friends
12015
10:42:04,160 --> 10:42:08,400
want to visit a town in the city that
12016
10:42:06,319 --> 10:42:11,275
you hadn't planned so they get off the
12017
10:42:08,400 --> 10:42:13,040
train they go on another train line and
12018
10:42:11,275 --> 10:42:14,879
at the end you will meet so at that
12019
10:42:13,040 --> 10:42:16,480
point you can see that they branched out
12020
10:42:14,879 --> 10:42:18,879
into their own branch and that is like
12021
10:42:16,480 --> 10:42:20,160
the concept of branches in git as well
12022
10:42:18,879 --> 10:42:21,839
so sometimes when you're working with
12023
10:42:20,160 --> 10:42:24,640
other developers they may want to branch
12024
10:42:21,839 --> 10:42:27,199
out into their own branches on the same
12025
10:42:24,639 --> 10:42:28,559
source code do some experiments and once
12026
10:42:27,199 --> 10:42:31,039
they figure out what they actually
12027
10:42:28,559 --> 10:42:33,435
wanted to do maybe they will save their
12028
10:42:31,040 --> 10:42:35,595
own work into that branch and then they
12029
10:42:33,436 --> 10:42:37,360
will bring it back to your branch at the
12030
10:42:35,595 --> 10:42:38,799
end you will meet at the train station
12031
10:42:37,360 --> 10:42:41,915
and then they bring the results with
12032
10:42:38,800 --> 10:42:43,276
them and then you merge together so
12033
10:42:41,915 --> 10:42:46,079
there's a lot of information about
12034
10:42:43,275 --> 10:42:47,275
branches how they work in kit but just
12035
10:42:47,275 --> 10:42:50,400
branches are kind of like train lines
12036
10:42:48,879 --> 10:42:51,360
and right now you're on the main train
12037
10:42:51,360 --> 10:42:55,040
going from your city to the destination
12038
10:42:56,160 --> 10:43:00,240
um but again there's time constraints on
12039
10:42:58,639 --> 10:43:01,436
this course i can't explain everything
12040
10:43:00,239 --> 10:43:03,360
about git but if you're interested
12041
10:43:01,436 --> 10:43:05,275
there's lots of great content available
12042
10:43:03,360 --> 10:43:06,800
on youtube that you can watch and i'm
12043
10:43:05,275 --> 10:43:08,879
pretty sure that there's lots and lots
12044
10:43:06,800 --> 10:43:12,480
of tutorials online as well that you can
12045
10:43:13,680 --> 10:43:18,000
wow that was a lot of information okay
12046
10:43:18,000 --> 10:43:23,360
let's now talk about what github is
12047
10:43:23,360 --> 10:43:30,559
github is simply said a cloud service
12048
10:43:26,879 --> 10:43:32,479
for storing your git repositories so
12049
10:43:32,480 --> 10:43:36,800
right now this git repository is sitting
12050
10:43:34,160 --> 10:43:39,436
on my computer so even if if it is i'm
12051
10:43:36,800 --> 10:43:40,720
committing my work i'm saving my work
12052
10:43:40,720 --> 10:43:46,080
no uh traceability from the outside
12053
10:43:44,239 --> 10:43:47,360
world so no one else is allowed to see
12054
10:43:46,080 --> 10:43:49,360
this code right now it's sitting right
12055
10:43:47,360 --> 10:43:51,915
on my computer and for that if i want to
12056
10:43:49,360 --> 10:43:54,000
share this code with other people and
12057
10:43:51,915 --> 10:43:56,879
potentially allow them not to read only
12058
10:43:54,000 --> 10:43:59,595
but also to be able to commit and
12059
10:43:56,879 --> 10:44:01,915
collaborate with me in the source code
12060
10:43:59,595 --> 10:44:04,639
then i would be able to share that on a
12061
10:44:01,915 --> 10:44:06,079
cloud service such as github
12062
10:44:06,080 --> 10:44:10,240
has the word git in its name but it's
12063
10:44:08,160 --> 10:44:11,840
not the same thing as git so git is a
12064
10:44:10,239 --> 10:44:14,639
software that actually manages all your
12065
10:44:11,839 --> 10:44:17,275
commands and etc but github is the cloud
12066
10:44:14,639 --> 10:44:19,275
service that holds on these repositories
12067
10:44:20,080 --> 10:44:23,840
if you don't have a github account i'm
12068
10:44:21,756 --> 10:44:24,720
going to help you do that right now
12069
10:44:24,720 --> 10:44:28,959
let me close actually no i'm not going
12070
10:44:26,800 --> 10:44:32,639
to close i'm going to minimize this
12071
10:44:32,639 --> 10:44:36,319
yeah let's close this one i don't think
12072
10:44:36,319 --> 10:44:42,800
so i'm gonna bring up a window here
12073
10:44:48,879 --> 10:44:54,559
what we need here is that for you to
12074
10:44:51,275 --> 10:44:57,519
create a github account and to do that
12075
10:44:57,519 --> 10:45:03,115
this website that i will provide for you
12076
10:44:59,680 --> 10:45:06,160
right there github.com sign up okay
12077
10:45:03,116 --> 10:45:09,916
so i'm gonna if i bring up um
12078
10:45:06,160 --> 10:45:11,436
a browsing window here and say sign up
12079
10:45:09,915 --> 10:45:13,915
you will see that yeah it won't know
12080
10:45:11,436 --> 10:45:15,680
that i'm signed in already with my other
12081
10:45:13,915 --> 10:45:18,000
account and it will ask me to start
12082
10:45:18,000 --> 10:45:22,319
so this is like the main window for the
12083
10:45:20,080 --> 10:45:23,916
sign up of github and this they've done
12084
10:45:22,319 --> 10:45:25,519
it a little bit comically it kind of
12085
10:45:23,915 --> 10:45:27,595
like a star wars kind of theme i don't
12086
10:45:25,519 --> 10:45:29,519
know what you want to call it but
12087
10:45:27,595 --> 10:45:32,239
here you will go through a few steps in
12088
10:45:29,519 --> 10:45:33,275
order to create a github account okay
12089
10:45:33,275 --> 10:45:36,239
i'm not going to do that simply because
12090
10:45:36,239 --> 10:45:39,915
but in your case we'll just need to go
12091
10:45:37,839 --> 10:45:42,159
through this provide your email choose a
12092
10:45:39,915 --> 10:45:45,360
good secure password for your email for
12093
10:45:42,160 --> 10:45:49,116
your github account and then at the end
12094
10:45:45,360 --> 10:45:50,239
you will have a simple github account
12095
10:45:56,319 --> 10:46:01,915
we've talked about already setting up
12096
10:45:58,480 --> 10:46:03,276
git in the terminal so i'm not gonna
12097
10:46:01,915 --> 10:46:06,000
talk about that i'm just gonna maybe
12098
10:46:06,080 --> 10:46:13,436
um a little bit up all right
12099
10:46:09,839 --> 10:46:16,319
now after you've set up github on your
12100
10:46:13,436 --> 10:46:18,800
uh basically after you set up a github
12101
10:46:18,879 --> 10:46:23,680
you will need to set up something called
12102
10:46:23,680 --> 10:46:27,756
this is a little bit technical but
12103
10:46:28,800 --> 10:46:32,560
and it is nothing that you can jump over
12104
10:46:31,040 --> 10:46:34,639
it's not like you can actually commit
12105
10:46:32,559 --> 10:46:36,319
your work without setting up ssh keys on
12106
10:46:34,639 --> 10:46:38,400
your computer you can always go to
12107
10:46:36,319 --> 10:46:40,559
github and actually commit your work
12108
10:46:38,400 --> 10:46:42,800
right on github itself like you can
12109
10:46:44,559 --> 10:46:49,040
text right in the github interface like
12110
10:46:49,040 --> 10:46:52,800
then they will do all of that work for
12111
10:46:50,879 --> 10:46:54,959
you because they will commit it from
12112
10:46:52,800 --> 10:46:57,840
kind of like their key their own ssh
12113
10:46:54,959 --> 10:46:59,915
keys i believe but if you on your
12114
10:46:57,839 --> 10:47:02,239
computer want to be able to commit your
12115
10:47:02,239 --> 10:47:06,400
hard disk or your ssc or whatever into
12116
10:47:04,959 --> 10:47:10,000
github you will need something called
12117
10:47:24,239 --> 10:47:30,559
yeah cryptographically i don't know
12118
10:47:26,720 --> 10:47:32,559
yeah cryptographically signed
12119
10:47:30,559 --> 10:47:34,159
these are cryptographically signed
12120
10:47:39,595 --> 10:47:43,435
just kind of like private keys that we
12121
10:47:41,680 --> 10:47:45,360
worked with when we worked with keychain
12122
10:47:43,436 --> 10:47:48,319
in one of the previous chapters
12123
10:47:45,360 --> 10:47:50,559
they allow you to identify yourself as a
12124
10:47:54,959 --> 10:47:58,720
uh i apologize again for the hiccup of
12125
10:47:57,360 --> 10:48:00,879
cryptographically it's just because i'm
12126
10:47:58,720 --> 10:48:02,880
not a native english speaker so you
12127
10:48:00,879 --> 10:48:04,799
should be expecting these hiccups
12128
10:48:05,595 --> 10:48:13,040
an ssh key is a piece of key that is a
12129
10:48:09,756 --> 10:48:14,880
signature that you as a developer or a
12130
10:48:13,040 --> 10:48:16,000
committer of code create on your
12131
10:48:16,000 --> 10:48:19,915
and whenever you make a commit and you
12132
10:48:30,000 --> 10:48:35,360
person xyz and you're trying to push
12133
10:48:32,720 --> 10:48:36,720
your changes into this repository i'm
12134
10:48:35,360 --> 10:48:37,915
just gonna make sure you have access to
12135
10:48:37,915 --> 10:48:43,839
so you need your ssh key set up
12136
10:48:44,800 --> 10:48:51,756
what we need to do is to go to github
12137
10:48:47,360 --> 10:48:51,756
and i'm going to bring up a web browser
12138
10:48:52,239 --> 10:48:58,400
for you to understand how to set up your
12139
10:48:54,639 --> 10:49:00,239
ssh keys so let's say github sets up ssh
12140
10:49:00,239 --> 10:49:05,115
and you can see adding a new ssh key to
12141
10:49:02,879 --> 10:49:09,115
your github account so there is a very
12142
10:49:05,116 --> 10:49:11,436
very comprehensive guide here on how to
12143
10:49:09,116 --> 10:49:12,480
set up your ssh keys so you can see that
12144
10:49:16,080 --> 10:49:19,916
generating a new ssh key and adding it
12145
10:49:17,915 --> 10:49:21,275
to the ssh agent so this is where you
12146
10:49:21,275 --> 10:49:26,720
so after searching for github as a setup
12147
10:49:24,480 --> 10:49:28,800
ssh keys make sure that you at the end
12148
10:49:26,720 --> 10:49:32,880
go to this link generating a new ssh key
12149
10:49:28,800 --> 10:49:34,319
and adding it to the ssh ssh agent
12150
10:49:32,879 --> 10:49:36,719
read through this there is very
12151
10:49:34,319 --> 10:49:38,080
comprehensive guide there are only a few
12152
10:49:36,720 --> 10:49:39,520
commands that you have to issue in the
12153
10:49:39,519 --> 10:49:44,639
do them precisely as as it is specified
12154
10:49:44,639 --> 10:49:48,720
so after you've done that then what
12155
10:49:48,720 --> 10:49:54,559
to add that ssh key i believe into your
12156
10:49:52,319 --> 10:49:56,639
github account you see as the link
12157
10:49:54,559 --> 10:49:59,115
provides here adding a new ssh key to
12158
10:49:59,116 --> 10:50:03,596
you can see here then it says okay do
12159
10:50:01,275 --> 10:50:06,239
this command and then go to your github
12160
10:50:03,595 --> 10:50:09,435
account settings and then go to search
12161
10:50:06,239 --> 10:50:11,756
and gpg keys and then say new ssh key
12162
10:50:09,436 --> 10:50:13,756
and then add that information in here
12163
10:50:13,756 --> 10:50:19,595
and that's it then you have your ssh key
12164
10:50:16,639 --> 10:50:21,915
all set up and done so these are the two
12165
10:50:19,595 --> 10:50:24,879
things you'll need to do create an ssh
12166
10:50:21,915 --> 10:50:25,915
key and then upload the public key into
12167
10:50:25,915 --> 10:50:30,479
and again because of constraints on this
12168
10:50:30,480 --> 10:50:34,080
like line by line to i'm just providing
12169
10:50:32,639 --> 10:50:36,080
you the information that you need to
12170
10:50:34,080 --> 10:50:38,959
know and i kind of expect you to do
12171
10:50:36,080 --> 10:50:41,276
these things on your own okay
12172
10:50:45,915 --> 10:50:52,319
we also need to talk about um
12173
10:50:53,595 --> 10:50:58,639
and let's actually i think gpg was new
12174
10:51:04,080 --> 10:51:07,436
so is a piece of software that you
12175
10:51:05,756 --> 10:51:09,520
download on your computer you can see is
12176
10:51:07,436 --> 10:51:12,560
a free software replacement for
12177
10:51:09,519 --> 10:51:13,839
semantics pgp cryptographic software
12178
10:51:13,839 --> 10:51:19,679
uh it is compliant with rfc blah blah
12179
10:51:17,040 --> 10:51:21,520
all you need to know about gpg and how
12180
10:51:19,680 --> 10:51:22,319
we're going to use it in this course is
12181
10:51:25,116 --> 10:51:29,840
have your i mean we talked about ssh
12182
10:51:27,199 --> 10:51:31,755
keys where you have your ssh keys and
12183
10:51:29,839 --> 10:51:33,839
then you and i know this is a little bit
12184
10:51:31,756 --> 10:51:35,595
geeky but that's kind of like the nature
12185
10:51:36,800 --> 10:51:41,520
sign your commits with your ssh key with
12186
10:51:39,275 --> 10:51:43,199
your private key and then you push your
12187
10:51:41,519 --> 10:51:46,000
changes to github and github just
12188
10:51:46,000 --> 10:51:51,040
this commit is coming from someone who
12189
10:51:47,915 --> 10:51:52,559
has access to this repository
12190
10:51:52,559 --> 10:51:57,595
gpg keys and then you sign your commits
12191
10:51:57,595 --> 10:52:04,799
then that actually verifies that you are
12192
10:52:01,839 --> 10:52:06,719
who you say you are so a lot of software
12193
10:52:04,800 --> 10:52:08,080
developers are still continuing with ssh
12194
10:52:06,720 --> 10:52:09,520
keys and to be honest with you that's
12195
10:52:12,720 --> 10:52:16,559
well it it depends kind of on your
12196
10:52:14,639 --> 10:52:18,400
opinion but in my opinion is not good
12197
10:52:16,559 --> 10:52:20,720
enough because anybody getting a hold of
12198
10:52:18,400 --> 10:52:22,720
your ssh keys can literally just do
12199
10:52:20,720 --> 10:52:26,080
anything they want with your commits and
12200
10:52:22,720 --> 10:52:28,559
change anything they want but um
12201
10:52:26,080 --> 10:52:30,480
with the gpg keys you'll ensure that you
12202
10:52:28,559 --> 10:52:32,479
are who you are and anyone else even if
12203
10:52:30,480 --> 10:52:34,319
they have hold of like your ssh keys
12204
10:52:32,480 --> 10:52:35,680
their their commits won't be signed as
12205
10:52:38,319 --> 10:52:41,756
so let's now talk a little bit and we're
12206
10:52:40,319 --> 10:52:44,400
going to take some items here and just
12207
10:52:41,756 --> 10:52:46,319
make sure that we've talked about them
12208
10:52:46,319 --> 10:52:50,639
now we're going to talk about gpgm where
12209
10:52:48,400 --> 10:52:52,400
you actually need it so there's a little
12210
10:52:52,400 --> 10:52:57,275
i'm going to open that link here so we
12211
10:52:54,239 --> 10:52:59,199
can both see it and it says git is
12212
10:53:00,160 --> 10:53:02,960
still i this word is a little bit
12213
10:53:01,756 --> 10:53:04,639
different different for me to say
12214
10:53:02,959 --> 10:53:07,040
cryptographically secure but it's not
12215
10:53:04,639 --> 10:53:09,116
foolproof if you're taking work from
12216
10:53:07,040 --> 10:53:10,959
others on the internet and want to
12217
10:53:09,116 --> 10:53:12,959
verify that commits are actually from a
12218
10:53:10,959 --> 10:53:16,400
trusted source git has a few ways to
12219
10:53:12,959 --> 10:53:18,400
sign and verify work using gpg okay
12220
10:53:20,160 --> 10:53:24,640
so what you'll need to do is uh you need
12221
10:53:22,480 --> 10:53:26,400
to set up jpg basically on your computer
12222
10:53:26,400 --> 10:53:32,560
um if you just say gpg install mac or
12223
10:53:29,756 --> 10:53:34,559
gpg install windows or whatever then you
12224
10:53:32,559 --> 10:53:37,115
can come to for instance for i'm using
12225
10:53:37,116 --> 10:53:42,319
and for you can actually install gpg for
12226
10:53:40,400 --> 10:53:46,000
various operating systems for instance
12227
10:53:42,319 --> 10:53:47,756
windows or linux so just google gpg and
12228
10:53:46,000 --> 10:53:50,080
then your operating system is so for
12229
10:53:54,559 --> 10:53:59,915
gpg and download noon pg here and you
12230
10:53:57,360 --> 10:54:01,116
see so this is like the download tools
12231
10:54:01,116 --> 10:54:05,360
windows i believe let's see
12232
10:54:03,199 --> 10:54:07,519
and you can see here you could use
12233
10:54:07,519 --> 10:54:12,079
full featured windows version of you
12234
10:54:12,080 --> 10:54:15,116
all i'm trying to say is just to
12235
10:54:13,595 --> 10:54:17,275
download the piece of software called
12236
10:54:15,116 --> 10:54:19,276
gpg for your operating system so whether
12237
10:54:19,275 --> 10:54:24,239
gpg tools for mac os or if it's like for
12238
10:54:24,239 --> 10:54:27,756
canoe pc is part of debian okay so it's
12239
10:54:26,080 --> 10:54:29,116
already maybe built in so you don't have
12240
10:54:29,116 --> 10:54:32,639
your debian based linux operating
12241
10:54:33,595 --> 10:54:36,720
so after doing that then you will need
12242
10:54:36,720 --> 10:54:42,480
set up gpg for github and i'll provide a
12243
10:54:40,080 --> 10:54:44,080
link here for you that you can
12244
10:54:42,480 --> 10:54:47,520
read about says managing commit
12245
10:54:47,519 --> 10:54:52,719
and the link i'll open it here
12246
10:54:50,400 --> 10:54:54,720
so you can see how it looks like
12247
10:54:54,720 --> 10:54:59,200
generating a gpg key so you can first go
12248
10:54:57,360 --> 10:55:01,199
there and it will help you through the
12249
10:54:59,199 --> 10:55:03,275
various steps that you need to take in
12250
10:55:01,199 --> 10:55:06,799
order to create your gpg keys it's very
12251
10:55:03,275 --> 10:55:08,479
easy it's just a few lines of uh
12252
10:55:06,800 --> 10:55:10,160
code or a few lines of text that you
12253
10:55:08,480 --> 10:55:13,040
have to issue in your terminal in order
12254
10:55:13,040 --> 10:55:17,915
so after you've done that and
12255
10:55:16,080 --> 10:55:20,240
you need to make sure to go into this
12256
10:55:17,915 --> 10:55:21,275
section add a new gpg key we've done
12257
10:55:21,275 --> 10:55:25,915
and then you go here to your settings
12258
10:55:23,040 --> 10:55:28,239
you can see ssh and gpg keys and then
12259
10:55:25,915 --> 10:55:30,159
the same way you added your ssh keys
12260
10:55:28,239 --> 10:55:33,040
you'll need to add the gpg key in your
12261
10:55:33,040 --> 10:55:36,480
and after you've done that the
12262
10:55:34,239 --> 10:55:38,559
difference between sshk and a gpg key is
12263
10:55:36,480 --> 10:55:40,640
kind of like to you need to tell get
12264
10:55:38,559 --> 10:55:42,720
that you have a gpg key and then it
12265
10:55:40,639 --> 10:55:43,756
needs to sign your commits with your gpg
12266
10:55:43,756 --> 10:55:47,436
and that's where you go into this tell
12267
10:55:45,595 --> 10:55:49,915
get your assigning key and you need to
12268
10:55:47,436 --> 10:55:52,560
just follow these steps to tell get
12269
10:55:52,559 --> 10:55:57,275
git config global user signing key you
12270
10:55:57,275 --> 10:56:00,159
so just follow these steps to be honest
12271
10:55:59,116 --> 10:56:02,400
with you i don't think you need to
12272
10:56:00,160 --> 10:56:05,756
associate email with gpg really right
12273
10:56:02,400 --> 10:56:07,840
now but if you want to you can do that
12274
10:56:05,756 --> 10:56:09,680
so i'm kind of like assuming that you've
12275
10:56:12,559 --> 10:56:15,756
for your computer and that you've
12276
10:56:13,839 --> 10:56:17,915
created the ssh key you kind of know a
12277
10:56:15,756 --> 10:56:21,680
little bit about git you have a github
12278
10:56:17,915 --> 10:56:24,399
account now you have created your pgp
12279
10:56:21,680 --> 10:56:27,116
keys and then you have told git about
12280
10:56:24,400 --> 10:56:30,800
your pdp key so your signature comments
12281
10:56:30,879 --> 10:56:35,915
so the next thing we need to do is to
12282
10:56:33,436 --> 10:56:37,275
now can you see we've been working on
12283
10:56:37,275 --> 10:56:40,799
notes application my notes i think it
12284
10:56:42,959 --> 10:56:47,436
the project was called my notes here
12285
10:56:48,879 --> 10:56:52,639
if i say git status here you will see
12286
10:56:50,800 --> 10:56:54,080
that it says not a git repository and
12287
10:56:52,639 --> 10:56:56,080
that's kind of a little bit sad because
12288
10:56:54,080 --> 10:56:58,160
we've written quite a lot of code but we
12289
10:56:56,080 --> 10:56:59,040
haven't really backed it up in github
12290
10:57:00,000 --> 10:57:03,915
what we need to do now is to go and
12291
10:57:01,519 --> 10:57:05,275
create a github repository remember that
12292
10:57:03,915 --> 10:57:08,159
bucket we need to create one of those
12293
10:57:08,319 --> 10:57:12,879
so let's go i'm going to create a safari
12294
10:57:14,959 --> 10:57:18,799
firefox whatever you want to use and i'm
12295
10:57:18,800 --> 10:57:22,240
and i'm going to go into repositories
12296
10:57:20,800 --> 10:57:23,360
here as you can see and i'm going to say
12297
10:57:23,360 --> 10:57:27,436
and i'm going to give it the name my
12298
10:57:25,595 --> 10:57:28,799
notes all right i'm going to increase
12299
10:57:27,436 --> 10:57:30,560
the size of the window so you see it
12300
10:57:28,800 --> 10:57:33,436
better for the description i'm going to
12301
10:57:30,559 --> 10:57:35,435
say my notes flutter application
12302
10:57:33,436 --> 10:57:37,520
and you can see here that tells you it
12303
10:57:35,436 --> 10:57:39,116
asks you if you want to create a public
12304
10:57:37,519 --> 10:57:41,039
public repository or a private
12305
10:57:39,116 --> 10:57:42,880
repository and the difference here is
12306
10:57:41,040 --> 10:57:45,595
that if you create a public repository
12307
10:57:45,595 --> 10:57:49,275
the content that you're creating
12308
10:57:49,275 --> 10:57:53,915
if if you're if you're not 100 sure what
12309
10:57:51,519 --> 10:57:54,959
public means create a private repository
12310
10:57:54,959 --> 10:57:58,159
usually there's lots of information that
12311
10:57:56,720 --> 10:58:01,040
you may want to create like a private
12312
10:57:58,160 --> 10:58:02,720
information with some api keys
12313
10:58:01,040 --> 10:58:04,400
so you want to probably create a private
12314
10:58:02,720 --> 10:58:05,756
repository unless you know exactly what
12315
10:58:04,400 --> 10:58:07,520
you're doing or if you want to for
12316
10:58:07,519 --> 10:58:10,959
contribute to open source projects and
12317
10:58:09,275 --> 10:58:12,159
create an open source project from an
12318
10:58:10,959 --> 10:58:14,080
absolute beginning then you go and
12319
10:58:12,160 --> 10:58:18,240
create a public but you can always make
12320
10:58:14,080 --> 10:58:19,916
your private repository public later
12321
10:58:18,239 --> 10:58:22,400
and you can always make your public
12322
10:58:19,915 --> 10:58:24,799
repository private later but that
12323
10:58:24,800 --> 10:58:28,960
it's probably a good idea to create a pr
12324
10:58:27,040 --> 10:58:31,360
private in the beginning okay
12325
10:58:28,959 --> 10:58:33,915
then in here add a readme file a readme
12326
10:58:31,360 --> 10:58:35,595
file is pretty much just a file that
12327
10:58:33,915 --> 10:58:38,959
will be displayed to whoever goes to
12328
10:58:35,595 --> 10:58:41,115
your github repository and looks at just
12329
10:58:38,959 --> 10:58:43,199
the index file of the github repository
12330
10:58:41,116 --> 10:58:45,040
so you can place some information in
12331
10:58:43,199 --> 10:58:46,639
there but it's usually a good idea to do
12332
10:58:45,040 --> 10:58:49,116
that you don't have to but i suggest
12333
10:58:46,639 --> 10:58:50,479
that you actually do that and then say
12334
10:58:50,480 --> 10:58:54,560
and then say add git ignore and we
12335
10:58:53,116 --> 10:58:56,800
haven't talked about git ignore before
12336
10:58:54,559 --> 10:59:00,559
but what get ignore is that its name
12337
10:58:56,800 --> 10:59:02,720
indicates is a file that dictates to get
12338
10:59:02,720 --> 10:59:08,319
or on the computer of whoever has cloned
12339
10:59:04,879 --> 10:59:11,680
your repository about what files should
12340
10:59:08,319 --> 10:59:12,559
not be committed to your git repository
12341
10:59:12,559 --> 10:59:15,595
usually it's a good idea to have a get
12342
10:59:14,000 --> 10:59:18,239
ignore file and in here for the template
12343
10:59:20,480 --> 10:59:23,680
and in here you don't have to choose
12344
10:59:22,160 --> 10:59:24,960
license right now because you're
12345
10:59:23,680 --> 10:59:26,800
probably not going to share this code
12346
10:59:24,959 --> 10:59:29,275
with anybody as it is right now but you
12347
10:59:26,800 --> 10:59:30,080
can always add a license later okay
12348
10:59:30,080 --> 10:59:36,160
i created a private repository some name
12349
10:59:32,720 --> 10:59:38,000
uh which is my notes sorry yeah um
12350
10:59:36,160 --> 10:59:39,360
i actually feel no for the name of the
12351
10:59:38,000 --> 10:59:41,040
repository i'm going to change it just
12352
10:59:39,360 --> 10:59:43,595
to lower in case i have no space it's
12353
10:59:43,595 --> 10:59:47,040
and then i'm going to say create
12354
10:59:47,040 --> 10:59:52,879
so as you've done that now you will see
12355
10:59:50,319 --> 10:59:54,800
that you have a repository here
12356
10:59:54,800 --> 11:00:00,480
i mean there's nothing really in it okay
12357
11:00:00,480 --> 11:00:04,560
what we need to do now is to you see we
12358
11:00:04,559 --> 11:00:08,079
our code here and then we have a
12359
11:00:06,000 --> 11:00:09,360
repository how do we put this code in
12360
11:00:08,080 --> 11:00:11,520
there you may think okay i'm going to
12361
11:00:09,360 --> 11:00:13,275
upload all the files by hand or like go
12362
11:00:13,275 --> 11:00:16,400
you could kind of actually do that but
12363
11:00:16,400 --> 11:00:21,596
and so what you need to do is just tell
12364
11:00:19,116 --> 11:00:22,480
git now all of a sudden that hey
12365
11:00:22,480 --> 11:00:27,680
folder here is indeed a git repository
12366
11:00:25,756 --> 11:00:30,639
remember from what i said before so you
12367
11:00:30,639 --> 11:00:34,159
i'm going to bring up the caption so you
12368
11:00:32,400 --> 11:00:36,400
know what i'm talking about git init and
12369
11:00:34,160 --> 11:00:39,200
then you say good and it dot okay all of
12370
11:00:36,400 --> 11:00:41,360
a sudden this became a repository so if
12371
11:00:41,360 --> 11:00:44,559
let me see if i can actually change the
12372
11:00:42,639 --> 11:00:46,239
arrangement on the screen so you'll see
12373
11:00:48,000 --> 11:00:52,239
and perhaps i could even do something
12374
11:00:52,239 --> 11:00:55,519
is that a better idea than just doing
12375
11:00:55,519 --> 11:01:00,319
no probably not so this is better
12376
11:00:58,000 --> 11:01:02,000
uh okay this is a little bit better so
12377
11:01:00,319 --> 11:01:03,915
you see now it says now that you're a
12378
11:01:02,000 --> 11:01:05,116
git repository i can see you have a lot
12379
11:01:03,915 --> 11:01:07,435
of files that you haven't really
12380
11:01:05,116 --> 11:01:09,040
committed and what we could do then we
12381
11:01:10,000 --> 11:01:15,275
add all these files and folders to my
12382
11:01:12,879 --> 11:01:17,360
git repository and then i'm going to say
12383
11:01:17,360 --> 11:01:22,480
with the m as a message my initial
12384
11:01:22,480 --> 11:01:26,960
see now if i say git status it says
12385
11:01:26,959 --> 11:01:30,080
i want to kind of push these changes i
12386
11:01:28,720 --> 11:01:32,000
want to send these changes together but
12387
11:01:30,080 --> 11:01:33,436
how do i do that because if i say git
12388
11:01:33,436 --> 11:01:37,200
see it says oh i don't know where to
12389
11:01:38,239 --> 11:01:42,720
what you need to do now is to go to your
12390
11:01:40,239 --> 11:01:46,959
github repository and then go to code
12391
11:01:42,720 --> 11:01:49,840
and then grab this guy from here
12392
11:01:49,839 --> 11:01:54,879
and then copy this and then go in here
12393
11:01:52,319 --> 11:01:58,839
and do what it says here git remote ad
12394
11:01:54,879 --> 11:02:01,519
so i'm going to say git remote add
12395
11:01:58,839 --> 11:02:04,399
origin it's the name of our remote for
12396
11:02:01,519 --> 11:02:07,275
instance and now i'm going to add that
12397
11:02:07,275 --> 11:02:11,595
it says okay now that you've done that
12398
11:02:09,595 --> 11:02:13,360
you still need to tell me that this main
12399
11:02:11,595 --> 11:02:15,915
branch which is on your local computer
12400
11:02:13,360 --> 11:02:18,559
is actually mapping to the main branch
12401
11:02:15,915 --> 11:02:20,799
on github which is right here
12402
11:02:18,559 --> 11:02:22,799
so you see here's the main branch and
12403
11:02:20,800 --> 11:02:24,480
we're also on the main branch so
12404
11:02:22,800 --> 11:02:26,400
you don't have to do this complicated
12405
11:02:24,480 --> 11:02:28,880
code you could actually say git push you
12406
11:02:26,400 --> 11:02:29,840
origin head which to me is a little bit
12407
11:02:29,839 --> 11:02:34,239
and that will do the same thing for you
12408
11:02:32,720 --> 11:02:35,595
updates were rejected because the remote
12409
11:02:34,239 --> 11:02:37,199
contains work that you do not have
12410
11:02:35,595 --> 11:02:39,519
locally this is usually because it's
12411
11:02:37,199 --> 11:02:42,000
actually great that we got this
12412
11:02:39,519 --> 11:02:44,159
i had a plan for this to happen but what
12413
11:02:42,000 --> 11:02:46,319
is happening here is that you see if i
12414
11:02:49,199 --> 11:02:54,399
i can click on this initial commit here
12415
11:02:52,239 --> 11:02:56,559
you will see that when i created the
12416
11:02:54,400 --> 11:03:00,080
repository and we chose all those you
12417
11:03:00,080 --> 11:03:04,880
and the git ignore file these are files
12418
11:03:02,480 --> 11:03:08,160
that are literally created on github
12419
11:03:04,879 --> 11:03:10,239
using github by github and placed inside
12420
11:03:08,160 --> 11:03:11,756
this repository so that is a commit you
12421
11:03:17,595 --> 11:03:22,079
that commit is sitting there in that
12422
11:03:19,116 --> 11:03:25,436
bucket over here so there's a commit in
12423
11:03:22,080 --> 11:03:28,240
its own bucket okay now we have our own
12424
11:03:25,436 --> 11:03:30,319
computer here with its own bucket
12425
11:03:28,239 --> 11:03:32,159
and its own commit but all of a sudden
12426
11:03:30,319 --> 11:03:34,159
we're telling this using that git add
12427
11:03:34,160 --> 11:03:37,436
what we're doing is that we're we're
12428
11:03:35,915 --> 11:03:39,435
making a connection between this local
12429
11:03:37,436 --> 11:03:40,800
repository and the server repository and
12430
11:03:39,436 --> 11:03:42,800
saying that any changes have happened
12431
11:03:40,800 --> 11:03:44,560
here we want to push them over here and
12432
11:03:44,559 --> 11:03:49,199
these changes are rejected because it
12433
11:03:46,319 --> 11:03:51,915
says oh you're you have changes here
12434
11:03:49,199 --> 11:03:53,039
and commits and you're putting them in
12435
11:03:54,080 --> 11:03:59,520
your changes your repository here didn't
12436
11:03:57,116 --> 11:04:01,276
contain the changes that were already
12437
11:03:59,519 --> 11:04:02,399
there so it's saying that there's a
12438
11:04:01,275 --> 11:04:04,639
conflict i don't know what you're trying
12439
11:04:02,400 --> 11:04:06,639
to do are you trying to like replace the
12440
11:04:04,639 --> 11:04:08,000
contents that were over there with your
12441
11:04:08,000 --> 11:04:11,680
and to be honest with you that could
12442
11:04:13,116 --> 11:04:18,000
you see what we did here we have a git
12443
11:04:15,595 --> 11:04:20,479
ignore file here that was created for us
12444
11:04:18,000 --> 11:04:22,239
by github and also we have our readme
12445
11:04:20,480 --> 11:04:23,840
file which we probably actually don't
12446
11:04:22,239 --> 11:04:25,595
need to be honest with you maybe we
12447
11:04:23,839 --> 11:04:27,199
don't need that and also they get
12448
11:04:25,595 --> 11:04:29,435
ignored but if you looked at the changes
12449
11:04:27,199 --> 11:04:30,799
that were committed committing here if i
12450
11:04:32,959 --> 11:04:37,519
you will see there already is a file
12451
11:04:42,000 --> 11:04:46,400
which was created by flutter when we
12452
11:04:44,559 --> 11:04:49,040
created our project flutter already
12453
11:04:49,040 --> 11:04:52,879
and with ignore to see its contents and
12454
11:04:51,680 --> 11:04:54,879
you'll see there's lots of stuff that
12455
11:04:52,879 --> 11:04:58,159
fluffer has already created for us that
12456
11:04:54,879 --> 11:04:59,595
says these things need to be ignored so
12457
11:04:58,160 --> 11:05:01,116
what i'm trying to say is that all these
12458
11:04:59,595 --> 11:05:02,879
things that exist over here we don't
12459
11:05:01,116 --> 11:05:05,840
need them really so what you could do is
12460
11:05:07,839 --> 11:05:11,435
and i believe that force pushes a bit
12461
11:05:18,400 --> 11:05:23,200
so i'm going to clear that now and i'm
12462
11:05:20,480 --> 11:05:25,040
going to go to my notes repository and
12463
11:05:27,360 --> 11:05:31,275
and oh we already had a readme file as
12464
11:05:29,595 --> 11:05:33,519
well so flutter has created a readme
12465
11:05:31,275 --> 11:05:34,720
file that's that's amazing i didn't know
12466
11:05:33,519 --> 11:05:36,079
this so i learned something that's
12467
11:05:36,080 --> 11:05:41,529
all right there we go so now we have our
12468
11:05:50,400 --> 11:05:55,520
i'm gonna just take some items here that
12469
11:05:59,275 --> 11:06:03,756
so that is already done as well pushing
12470
11:06:01,839 --> 11:06:06,559
so now you have your changes over there
12471
11:06:06,559 --> 11:06:10,239
now what we need to talk about is also
12472
11:06:10,239 --> 11:06:15,040
in this course i'm going to use a
12473
11:06:15,040 --> 11:06:19,436
a tag is just as its name indicates it
12474
11:06:19,436 --> 11:06:23,520
so as you're as you become better and
12475
11:06:22,000 --> 11:06:26,720
better at software development you'll
12476
11:06:23,519 --> 11:06:28,559
understand that some places sometimes
12477
11:06:26,720 --> 11:06:30,800
during your journey as a software
12478
11:06:28,559 --> 11:06:32,559
developer the code that you wrote means
12479
11:06:30,800 --> 11:06:33,596
a special thing to you for instance you
12480
11:06:33,595 --> 11:06:39,839
after a whole weekend of work i could
12481
11:06:36,239 --> 11:06:42,720
finally deliver like the verification
12482
11:06:39,839 --> 11:06:45,115
screen to my users and that in itself in
12483
11:06:42,720 --> 11:06:47,595
its essence essence has a special
12484
11:06:45,116 --> 11:06:50,160
importance is it has a special meaning
12485
11:06:47,595 --> 11:06:51,756
and you may want to tag it and by
12486
11:06:50,160 --> 11:06:54,720
tagging it it means that i'm just going
12487
11:06:51,756 --> 11:06:56,480
to give a special name to this so in the
12488
11:06:54,720 --> 11:06:58,720
future if i want to go back to that
12489
11:06:56,480 --> 11:07:01,680
point in time i don't go i don't have to
12490
11:06:58,720 --> 11:07:03,916
go into my be it log and look at all my
12491
11:07:01,680 --> 11:07:06,160
commits and see which one was that
12492
11:07:03,915 --> 11:07:08,959
special commit but i also want to like
12493
11:07:06,160 --> 11:07:12,400
give it a special name okay and that
12494
11:07:08,959 --> 11:07:16,639
name is a an annotated tag or a tag that
12495
11:07:12,400 --> 11:07:17,360
has a message applied to it all right
12496
11:07:17,360 --> 11:07:25,520
that is in its essence what tagging is
12497
11:07:20,959 --> 11:07:29,360
so you're giving a name to your um
12498
11:07:29,360 --> 11:07:35,116
so what we need to do now here is to tag
12499
11:07:32,000 --> 11:07:36,800
our work as step one we've done a lot of
12500
11:07:35,116 --> 11:07:39,116
steps up to this point but none of them
12501
11:07:39,116 --> 11:07:43,680
like important that we actually have to
12502
11:07:41,436 --> 11:07:45,200
commit yet but i think this is important
12503
11:07:43,680 --> 11:07:47,116
enough now we have a registry screen and
12504
11:07:45,199 --> 11:07:49,039
a login screen so that we can tag it so
12505
11:07:47,116 --> 11:07:51,916
the way to create it to create an
12506
11:07:49,040 --> 11:07:55,275
annotated tag and git you will literally
12507
11:07:56,879 --> 11:08:02,079
let's go in here and say git tag and
12508
11:07:59,436 --> 11:08:03,756
give it the name of step one
12509
11:08:02,080 --> 11:08:06,720
all right now you can see if i want to
12510
11:08:03,756 --> 11:08:08,800
push these tags to the back end sorry to
12511
11:08:06,720 --> 11:08:10,480
github because those tags don't exist
12512
11:08:11,839 --> 11:08:17,679
what we could do is to say git push tags
12513
11:08:14,879 --> 11:08:19,435
dash tags and this pushes all those tags
12514
11:08:19,436 --> 11:08:22,639
which is github in that case
12515
11:08:21,436 --> 11:08:24,880
and to be honest with you i don't really
12516
11:08:22,639 --> 11:08:26,080
know here one tag i can see all of a
12517
11:08:26,080 --> 11:08:33,520
tags and step one is created there okay
12518
11:08:31,360 --> 11:08:36,080
so what we could do also is that's after
12519
11:08:33,519 --> 11:08:38,959
we have our gpg keys all set up we also
12520
11:08:36,080 --> 11:08:40,080
can confirm that our work is truly
12521
11:08:40,080 --> 11:08:44,000
and if i go to my notes here and then
12522
11:08:45,275 --> 11:08:48,400
let's see if you can see that
12523
11:08:48,400 --> 11:08:52,319
somewhere here can we see all our
12524
11:08:57,915 --> 11:09:01,199
oh it's not showing me that information
12525
11:09:01,199 --> 11:09:05,275
yeah but anyways you could you could
12526
11:09:03,436 --> 11:09:06,959
have a look at whether your commits are
12527
11:09:05,275 --> 11:09:08,639
signed by a little badge which i can't
12528
11:09:06,959 --> 11:09:10,959
see right now so maybe there's actually
12529
11:09:08,639 --> 11:09:12,800
something wrong with my pgp key so if
12530
11:09:10,959 --> 11:09:14,080
you've done all the pgp installation
12531
11:09:12,800 --> 11:09:15,916
correctly on our computer then you
12532
11:09:14,080 --> 11:09:18,000
should see all your commits being signed
12533
11:09:15,915 --> 11:09:19,595
and actually displayed here but with
12534
11:09:18,000 --> 11:09:21,839
some sort of a badge but i can't
12535
11:09:19,595 --> 11:09:23,680
unfortunately see that maybe github has
12536
11:09:21,839 --> 11:09:26,559
changed that interface so that we can't
12537
11:09:23,680 --> 11:09:28,720
see our verified and badge for our jpg
12538
11:09:28,720 --> 11:09:33,520
all right we talked a lot about
12539
11:09:33,519 --> 11:09:38,159
um so i think that's actually quite
12540
11:09:36,000 --> 11:09:40,319
enough for this chapter and git we've
12541
11:09:38,160 --> 11:09:43,276
talked almost 15 minutes about get to be
12542
11:09:40,319 --> 11:09:45,756
honest with you and that's sufficient
12543
11:09:43,275 --> 11:09:47,275
now that we've got get set up what we're
12544
11:09:45,756 --> 11:09:49,275
going to use it for in the upcoming
12545
11:09:47,275 --> 11:09:51,199
chapters is whenever we do something
12546
11:09:49,275 --> 11:09:53,595
significant that needs to be saved we
12547
11:09:51,199 --> 11:09:56,239
are going to commit that change and also
12548
11:09:53,595 --> 11:09:57,275
tag it and send both our commits and our
12549
11:09:57,275 --> 11:10:02,159
to github so that is stored securely in
12550
11:09:59,680 --> 11:10:03,680
some sort of a cloud storage basically
12551
11:10:03,680 --> 11:10:06,800
that's how we're going to use git and
12552
11:10:06,800 --> 11:10:11,040
and i thought of it as so important for
12553
11:10:09,519 --> 11:10:12,479
every software developer to know that i
12554
11:10:11,040 --> 11:10:14,000
thought if anybody is watching this
12555
11:10:12,480 --> 11:10:15,040
course who is not a software engineer in
12556
11:10:15,040 --> 11:10:20,400
then you definitely need to know about
12557
11:10:16,800 --> 11:10:21,680
git and github before you can continue
12558
11:10:20,400 --> 11:10:23,916
so what we're going to do in the next
12559
11:10:21,680 --> 11:10:26,239
chapter then is to talk about email
12560
11:10:23,915 --> 11:10:27,839
verification we've done login register
12561
11:10:26,239 --> 11:10:29,915
screen is very simple but we haven't
12562
11:10:27,839 --> 11:10:31,755
done the email verification yet and
12563
11:10:29,915 --> 11:10:34,319
that's exactly what we're going to do in
12564
11:10:31,756 --> 11:10:36,319
the next chapter so i'll see you there
12565
11:10:34,319 --> 11:10:37,680
hello and welcome to chapter 16 of the
12566
11:10:37,680 --> 11:10:41,756
in the previous chapters we've talked
12567
11:10:39,756 --> 11:10:44,639
about the login and registration page
12568
11:10:41,756 --> 11:10:46,000
and also we took a little detour to talk
12569
11:10:48,000 --> 11:10:51,199
so now you should have all those things
12570
11:10:49,519 --> 11:10:53,115
set up so you should also have some sort
12571
11:10:51,199 --> 11:10:56,079
of an emulator simulator or real device
12572
11:10:53,116 --> 11:10:57,596
setup so we're testing our application
12573
11:10:56,080 --> 11:10:59,840
right from visual studio code or android
12574
11:10:57,595 --> 11:11:02,159
studio or sublime whatever text everyone
12575
11:11:02,160 --> 11:11:05,916
um in this chapter we're going to as the
12576
11:11:04,480 --> 11:11:07,680
caption says here we're going to talk
12577
11:11:12,559 --> 11:11:16,159
one of the previous chapters why we need
12578
11:11:16,160 --> 11:11:20,000
but the main reason for that is as you
12579
11:11:18,400 --> 11:11:22,400
can see in the caption here says people
12580
11:11:20,000 --> 11:11:24,959
can sign up with emails they don't own
12581
11:11:22,400 --> 11:11:26,720
and that is a little bit of a problem
12582
11:11:30,319 --> 11:11:34,720
is a problem is that you might
12583
11:11:32,639 --> 11:11:37,839
get into a situation actually i can see
12584
11:11:34,720 --> 11:11:40,400
here my wi-fi is kind of tripping
12585
11:11:37,839 --> 11:11:42,159
okay it's connected now sorry about that
12586
11:11:42,160 --> 11:11:46,240
what could happen is if a user comes in
12587
11:11:44,879 --> 11:11:48,159
to the application and starts your
12588
11:11:46,239 --> 11:11:49,915
flutter application on their phone or
12589
11:11:48,160 --> 11:11:52,720
tablet and then they sign up with an
12590
11:11:49,915 --> 11:11:55,435
email that they don't own and then i as
12591
11:11:52,720 --> 11:11:56,959
the rightful owner of that email address
12592
11:11:55,436 --> 11:11:58,639
come to and download the same
12593
11:11:56,959 --> 11:12:01,040
application and try to register my email
12594
11:11:58,639 --> 11:12:02,400
and the applications as well this email
12595
11:12:04,720 --> 11:12:08,800
um so we have a problem here so what we
12596
11:12:06,639 --> 11:12:11,116
need to make sure is that the p people
12597
11:12:08,800 --> 11:12:14,560
who register in an email can also verify
12598
11:12:11,116 --> 11:12:16,319
that they own that email address okay
12599
11:12:14,559 --> 11:12:18,639
so let's take care of that in this
12600
11:12:18,720 --> 11:12:22,639
gonna bring up visual studio code or you
12601
11:12:22,639 --> 11:12:26,720
editor of your choice where you're um
12602
11:12:26,800 --> 11:12:30,400
the editor that you're comfortable with
12603
11:12:30,400 --> 11:12:35,596
and i'm just gonna take in my notes that
12604
11:12:35,595 --> 11:12:41,040
so what we're gonna do here as the first
12605
11:12:37,436 --> 11:12:44,400
step is to go to our main dart file here
12606
11:12:41,040 --> 11:12:47,040
right after home page and create a state
12607
11:12:47,756 --> 11:12:52,080
i'm going to do that right now so
12608
11:12:52,080 --> 11:12:55,680
then we're going to call let me see
12609
11:12:59,040 --> 11:13:05,915
and in here uh what we're gonna do
12610
11:13:03,199 --> 11:13:08,000
is just to return a simple scaffold so
12611
11:13:05,915 --> 11:13:09,915
i'm just gonna say return scaffold for
12612
11:13:08,000 --> 11:13:11,436
now we're gonna get a cons error here so
12613
11:13:15,756 --> 11:13:21,840
um that's for our stateful widget
12614
11:13:19,199 --> 11:13:24,879
then what we're gonna do is um
12615
11:13:21,839 --> 11:13:27,915
we are as you can see here as soon as we
12616
11:13:24,879 --> 11:13:30,879
see that um the email isn't verified
12617
11:13:27,915 --> 11:13:32,239
here we just say you are sorry that it
12618
11:13:30,879 --> 11:13:34,239
is verified we say you are a verified
12619
11:13:32,239 --> 11:13:36,559
user and if you're not verified we just
12620
11:13:34,239 --> 11:13:38,479
say you need to verify your email first
12621
11:13:36,559 --> 11:13:40,720
but in both cases what we're doing is
12622
11:13:38,480 --> 11:13:43,200
that we're just returning a text widget
12623
11:13:40,720 --> 11:13:45,595
that says done and it's displayed here
12624
11:13:50,160 --> 11:13:56,160
in here we're going to say return this
12625
11:13:53,116 --> 11:14:00,000
otherwise what we need to do is to
12626
11:13:56,160 --> 11:14:00,800
display this verify email view okay
12627
11:14:00,800 --> 11:14:04,720
the way we need to do this right now and
12628
11:14:03,199 --> 11:14:06,159
we're actually going to fix this quite a
12629
11:14:04,720 --> 11:14:08,559
lot as we go on but right now i just
12630
11:14:06,160 --> 11:14:11,200
want to show you how to push a view into
12631
11:14:08,559 --> 11:14:12,399
the screen now pushing is a concept that
12632
11:14:14,800 --> 11:14:20,000
like a widespread existence after ios
12633
11:14:18,239 --> 11:14:22,559
and android became popular in the early
12634
11:14:25,436 --> 11:14:31,116
and pushing is where you have a screen
12635
11:14:28,480 --> 11:14:32,640
and you're seeing that screen and then
12636
11:14:31,116 --> 11:14:34,639
you press a button or something and
12637
11:14:32,639 --> 11:14:36,800
another screen just kind of pushes
12638
11:14:34,639 --> 11:14:37,680
itself on top of the existing screen
12639
11:14:37,680 --> 11:14:43,275
so what we need to do now is to
12640
11:14:40,160 --> 11:14:45,040
if we see that well you haven't
12641
11:14:43,275 --> 11:14:47,360
verified your email you want to push
12642
11:14:45,040 --> 11:14:50,160
this verify email view and a way to do
12643
11:14:50,160 --> 11:14:54,160
is with something called a navigator and
12644
11:14:52,559 --> 11:14:55,519
remember this is a little bit
12645
11:14:54,160 --> 11:14:57,360
problematic the thing that we're gonna
12646
11:14:55,519 --> 11:14:59,435
do right now is actually gonna cause an
12647
11:14:57,360 --> 11:15:02,639
error and i will explain all this but
12648
11:14:59,436 --> 11:15:05,520
for now let's just go go ahead and do
12649
11:15:02,639 --> 11:15:06,319
this so we will fix things as we go on
12650
11:15:07,199 --> 11:15:10,799
right here that where we say you need to
12651
11:15:09,275 --> 11:15:13,595
verify your email first and we can
12652
11:15:10,800 --> 11:15:15,840
actually see that in the console um
12653
11:15:13,595 --> 11:15:17,040
here um oh you can't see it because it's
12654
11:15:17,040 --> 11:15:23,275
the caption but you can see now it says
12655
11:15:19,756 --> 11:15:26,080
you need to verify your email first
12656
11:15:28,160 --> 11:15:32,640
verify email view onto the screen what
12657
11:15:31,436 --> 11:15:35,116
i'm going to do i'm going to get rid of
12658
11:15:37,275 --> 11:15:42,319
what should i do here should i go back
12659
11:15:39,436 --> 11:15:44,400
to the same layout so you can see yeah
12660
11:15:42,319 --> 11:15:46,480
that's probably better so go in here and
12661
11:15:49,275 --> 11:15:54,400
then you say your build context and then
12662
11:15:54,400 --> 11:15:57,116
now push is the function that you're
12663
11:15:58,720 --> 11:16:02,800
you can see here it acts it says okay
12664
11:16:04,559 --> 11:16:09,519
and then you say material routes here
12665
11:16:09,519 --> 11:16:12,639
okay and then there's a builder function
12666
11:16:14,720 --> 11:16:18,959
like this i will explain all of this
12667
11:16:16,639 --> 11:16:20,800
soon to you and then in here say verify
12668
11:16:30,639 --> 11:16:34,479
there's something wrong with all this
12669
11:16:32,319 --> 11:16:36,319
let's see builder and then we're doing
12670
11:16:34,480 --> 11:16:38,240
that and then one parenthesis i think is
12671
11:16:42,319 --> 11:16:45,116
and it needs to be ruined and what is
12672
11:16:43,756 --> 11:16:46,880
the actual error that's being displayed
12673
11:16:45,116 --> 11:16:49,200
the return time future dynamic isn't a
12674
11:16:49,199 --> 11:16:53,680
and uh what we need to do is just to do
12675
11:16:54,000 --> 11:17:00,000
and yeah that's fine so let's bring this
12676
11:16:57,040 --> 11:17:02,720
return done back to where it was and
12677
11:17:00,000 --> 11:17:04,319
then we remove this print statement from
12678
11:17:02,720 --> 11:17:06,720
here as well and this print statement
12679
11:17:04,319 --> 11:17:08,319
from there and make this cons and i'm
12680
11:17:06,720 --> 11:17:10,400
gonna explain all of this so don't worry
12681
11:17:11,519 --> 11:17:15,680
what is happening here is as you can see
12682
11:17:16,239 --> 11:17:20,559
sorry about that my throat isn't really
12683
11:17:22,879 --> 11:17:29,595
you see in our future builder here
12684
11:17:26,480 --> 11:17:31,840
we are expected in the builder function
12685
11:17:29,595 --> 11:17:34,159
which we are right now in here you see
12686
11:17:31,839 --> 11:17:36,399
we're always expected to return a widget
12687
11:17:34,160 --> 11:17:38,400
so that's what the future builder does
12688
11:17:38,400 --> 11:17:42,959
that performs a feature and once that
12689
11:17:40,800 --> 11:17:44,000
future is done or it errors out or
12690
11:17:44,000 --> 11:17:48,959
then it calls this builder function and
12691
11:17:47,199 --> 11:17:50,719
in the builder function it is expected
12692
11:17:48,959 --> 11:17:53,116
to return that builder function itself
12693
11:17:50,720 --> 11:17:55,436
is expected to return a widget
12694
11:17:53,116 --> 11:17:57,756
something to display on the screen okay
12695
11:17:55,436 --> 11:17:59,840
now your job as a developer who's using
12696
11:17:57,756 --> 11:18:01,520
the future builder is to actually return
12697
11:17:59,839 --> 11:18:03,359
a widget in this builder function and
12698
11:18:01,519 --> 11:18:05,039
that's why we're doing here what we're
12699
11:18:03,360 --> 11:18:07,360
doing here we're saying if the
12700
11:18:05,040 --> 11:18:09,436
connection state if the future is done
12701
11:18:09,436 --> 11:18:13,756
otherwise return this text so we have
12702
11:18:13,756 --> 11:18:19,436
fulfilled the contractual um
12703
11:18:19,436 --> 11:18:24,319
builder expects a widget we return a
12704
11:18:22,000 --> 11:18:26,720
widget however we're trying to be clever
12705
11:18:24,319 --> 11:18:28,879
here in saying that okay we do return
12706
11:18:26,720 --> 11:18:31,840
done but also we're performing an action
12707
11:18:28,879 --> 11:18:33,915
which is navigator of this context which
12708
11:18:31,839 --> 11:18:35,359
is our build context and we haven't
12709
11:18:33,915 --> 11:18:38,000
talked about build context so much
12710
11:18:35,360 --> 11:18:40,319
before but you can actually see
12711
11:18:38,000 --> 11:18:42,720
i mean the documentation isn't so clear
12712
11:18:40,319 --> 11:18:44,959
maybe it says this class presents a set
12713
11:18:42,720 --> 11:18:46,880
of methods that can be used from build
12714
11:18:46,879 --> 11:18:51,680
but anyways what a build context is is
12715
11:18:50,080 --> 11:18:54,319
kind of like a packaged bit of
12716
11:18:51,680 --> 11:18:56,400
information that you can you can use in
12717
11:18:54,319 --> 11:18:59,680
order to pass data from one widget to
12718
11:18:56,400 --> 11:19:01,756
the other and it is very useful for for
12719
11:18:59,680 --> 11:19:03,199
instance if you're using block and we
12720
11:19:01,756 --> 11:19:05,436
haven't talked about block yet but just
12721
11:19:03,199 --> 11:19:08,159
know the build context is kind of like a
12722
11:19:05,436 --> 11:19:09,756
bit of information about the context
12723
11:19:11,040 --> 11:19:14,840
so in here what we're saying we're
12724
11:19:12,639 --> 11:19:17,680
saying create a navigator of this
12725
11:19:14,839 --> 11:19:19,435
context and navigator is just a class
12726
11:19:17,680 --> 11:19:21,116
for you okay and then when you tell
12727
11:19:19,436 --> 11:19:22,800
navigator to push something it says okay
12728
11:19:21,116 --> 11:19:25,596
what do you want me to push on the
12729
11:19:22,800 --> 11:19:27,040
screen then we say create a material
12730
11:19:28,160 --> 11:19:33,436
and you can see that material page route
12731
11:19:30,480 --> 11:19:36,480
has an argument called builder which
12732
11:19:33,436 --> 11:19:38,160
in itself expects a widget okay so you
12733
11:19:38,160 --> 11:19:41,360
in this build function but all we're
12734
11:19:39,839 --> 11:19:42,799
doing here to be honest with you it's
12735
11:19:41,360 --> 11:19:44,559
just saying that push a widget on the
12736
11:19:42,800 --> 11:19:46,240
screen that's all so this is like the
12737
11:19:44,559 --> 11:19:48,479
format that you need to learn about okay
12738
11:19:46,239 --> 11:19:50,799
navigator of the context push material
12739
11:19:48,480 --> 11:19:52,400
page route builder context and then you
12740
11:19:54,400 --> 11:19:59,275
all right that was a lot of information
12741
11:19:57,040 --> 11:20:01,680
i mean this looks kind of okay at the
12742
11:20:03,040 --> 11:20:07,040
however there is a problem with it and
12743
11:20:05,436 --> 11:20:09,520
if you're not careful you can miss that
12744
11:20:07,040 --> 11:20:11,595
problem and i really always like to
12745
11:20:11,595 --> 11:20:16,399
debug console so that i'm aware of all
12746
11:20:14,000 --> 11:20:18,239
problems that might happen and the
12747
11:20:16,400 --> 11:20:19,916
problem that you can see on the screen
12748
11:20:19,915 --> 11:20:24,879
on handle exception package flutter
12749
11:20:22,639 --> 11:20:27,436
widgets navigator dart failed assertion
12750
11:20:33,839 --> 11:20:39,039
there is actually a github issue for
12751
11:20:36,720 --> 11:20:40,720
that i can see i've actually linked it
12752
11:20:39,040 --> 11:20:42,959
there as well but we're going to come to
12753
11:20:40,720 --> 11:20:45,040
that but just be aware that what we are
12754
11:20:42,959 --> 11:20:47,680
doing here is not really good
12755
11:20:45,040 --> 11:20:50,160
it's not a good idea to push something
12756
11:20:47,680 --> 11:20:52,879
inside a future builder but we're going
12757
11:20:50,160 --> 11:20:55,436
to do it anyways just so we can fix it
12758
11:20:52,879 --> 11:20:57,680
later so that you know at least this
12759
11:20:55,436 --> 11:20:59,916
issue exists and at the same time we
12760
11:20:57,680 --> 11:21:03,275
achieve what we're trying to do here
12761
11:20:59,915 --> 11:21:05,519
which is displaying a new widget
12762
11:21:03,275 --> 11:21:09,839
once a condition is met in this case the
12763
11:21:05,519 --> 11:21:09,839
user's email is not verified okay
12764
11:21:13,915 --> 11:21:19,115
what we need to do now is fix this up
12765
11:21:20,639 --> 11:21:24,959
i'm gonna just take some items in my
12766
11:21:31,116 --> 11:21:35,276
it it's it's a completely wide scaffold
12767
11:21:33,680 --> 11:21:37,360
it doesn't even have an app bar there's
12768
11:21:35,275 --> 11:21:39,199
nothing in there so what we can do is
12769
11:21:37,360 --> 11:21:41,436
just to first of all go and create an
12770
11:21:39,199 --> 11:21:43,595
app bar here so we say app bar
12771
11:21:43,595 --> 11:21:46,559
we've done this before so you should
12772
11:21:44,959 --> 11:21:48,839
know already the syntax and then the
12773
11:21:46,559 --> 11:21:53,435
title is just gonna say verify
12774
11:21:53,680 --> 11:21:57,199
and i can see appbar title is text i
12775
11:21:56,000 --> 11:21:58,639
don't even know what i've done wrong
12776
11:21:57,199 --> 11:22:00,719
here to be honest with the constraint
12777
11:21:58,639 --> 11:22:02,720
isn't the cons instructor it just means
12778
11:22:00,720 --> 11:22:05,756
that well okay i have to remove this
12779
11:22:02,720 --> 11:22:07,756
and i have to make this text const
12780
11:22:07,756 --> 11:22:11,916
i'm i'm like moving past these things
12781
11:22:10,080 --> 11:22:13,116
but you may be a little bit confused if
12782
11:22:11,915 --> 11:22:14,559
you're not if you haven't done this
12783
11:22:13,116 --> 11:22:17,040
before you may be confused what i'm
12784
11:22:14,559 --> 11:22:19,199
doing here let's maybe i should explain
12785
11:22:17,040 --> 11:22:20,080
actually this what is happening here you
12786
11:22:20,080 --> 11:22:24,319
before we started using the app bar in
12787
11:22:22,080 --> 11:22:26,160
scaffold everything was completely fine
12788
11:22:24,319 --> 11:22:28,239
dart was completely okay and i said okay
12789
11:22:26,160 --> 11:22:30,080
i'm gonna accept this as it is what
12790
11:22:28,239 --> 11:22:32,720
we're telling dart here is that we're
12791
11:22:30,080 --> 11:22:34,880
creating a scaffold and it is a constant
12792
11:22:32,720 --> 11:22:36,880
scaffold it means it is we're not
12793
11:22:34,879 --> 11:22:39,595
actually doing any special configuration
12794
11:22:36,879 --> 11:22:42,159
that makes this not a constant okay but
12795
11:22:39,595 --> 11:22:43,595
that's so let's actually go here i'm
12796
11:22:42,160 --> 11:22:45,596
going to hold down command on my
12797
11:22:43,595 --> 11:22:47,595
macintosh you can hold down control your
12798
11:22:45,595 --> 11:22:49,115
linux machine or windows and click on
12799
11:22:50,480 --> 11:22:53,596
and you can see that the initializer
12800
11:22:52,160 --> 11:22:55,596
that i'm calling here or the constructor
12801
11:22:53,595 --> 11:22:56,959
that i'm calling here is marked as const
12802
11:22:56,959 --> 11:23:00,720
but as soon as we put app bar in here
12803
11:22:59,275 --> 11:23:03,680
and i'm going to click on the same thing
12804
11:23:04,239 --> 11:23:07,839
if we can find that initializer
12805
11:23:09,199 --> 11:23:14,719
scaffold app bar this app bar i can't
12806
11:23:12,319 --> 11:23:16,480
really seem to find that particular
12807
11:23:18,480 --> 11:23:22,800
essentially here is saying that
12808
11:23:22,800 --> 11:23:28,880
what you're trying to do here which is
12809
11:23:25,360 --> 11:23:31,360
creating an app bar with a text inside
12810
11:23:28,879 --> 11:23:33,915
here a text widget and an app bar makes
12811
11:23:31,360 --> 11:23:36,160
this scaffold widget not a constant
12812
11:23:36,160 --> 11:23:38,880
the first thing you need to do is say
12813
11:23:37,360 --> 11:23:40,639
okay i understand that that's not a
12814
11:23:38,879 --> 11:23:42,639
constant anymore remove this constant on
12815
11:23:40,639 --> 11:23:43,519
scaffold but then you get an error here
12816
11:23:43,519 --> 11:23:47,680
well a problem telling that okay you've
12817
11:23:46,080 --> 11:23:49,436
removed the comms from scaffold but
12818
11:23:47,680 --> 11:23:51,915
still you could make your code better by
12819
11:23:49,436 --> 11:23:54,239
making your text a constant because this
12820
11:23:51,915 --> 11:23:56,079
text scene text widget seems to be a
12821
11:23:54,239 --> 11:23:59,115
constant all right so i'm going to make
12822
11:24:01,915 --> 11:24:09,275
so i'm going to press command s here
12823
11:24:04,879 --> 11:24:09,275
is not true and i'm going to hot restart
12824
11:24:09,595 --> 11:24:13,040
verify email okay and i can see we have
12825
11:24:13,040 --> 11:24:17,200
again we have a problem with hot reload
12826
11:24:15,595 --> 11:24:18,720
because as soon as we do hot reload then
12827
11:24:17,199 --> 11:24:21,039
we get this error but this error is
12828
11:24:18,720 --> 11:24:23,200
simply because of something weird that
12829
11:24:21,040 --> 11:24:24,559
we're doing in here so if you get error
12830
11:24:23,199 --> 11:24:26,399
just do hot restart and you should be
12831
11:24:24,559 --> 11:24:27,435
good to go until we fix this problem
12832
11:24:27,436 --> 11:24:31,756
all right so as you can see in the
12833
11:24:29,839 --> 11:24:33,755
caption of this chapter what we need to
12834
11:24:31,756 --> 11:24:35,916
do here is to display a column text and
12835
11:24:33,756 --> 11:24:38,000
a text button to send the verification
12836
11:24:35,915 --> 11:24:40,559
email so let's go to the body of our
12837
11:24:38,000 --> 11:24:42,480
scaffold so i'm just going to say body
12838
11:24:42,480 --> 11:24:48,319
children and inside the children
12839
11:24:45,680 --> 11:24:51,360
let's just go and say we have a text and
12840
11:24:55,040 --> 11:24:59,200
and that's that and then what we're
12841
11:24:57,360 --> 11:25:01,680
gonna do in here we're gonna place a
12842
11:25:01,680 --> 11:25:05,275
and perhaps what could be better
12843
11:25:05,275 --> 11:25:09,199
if i scroll this a little bit up so you
12844
11:25:06,959 --> 11:25:10,479
can see the code in its entirety
12845
11:25:09,199 --> 11:25:12,239
then the text button if you remember
12846
11:25:10,480 --> 11:25:14,800
from the previous chapters it has two
12847
11:25:12,239 --> 11:25:16,559
very important and required parameters
12848
11:25:18,480 --> 11:25:21,520
analysis tools or flutters analysis
12849
11:25:21,519 --> 11:25:27,275
the child parameter of those widgets or
12850
11:25:24,959 --> 11:25:29,436
those functions that do accept the child
12851
11:25:27,275 --> 11:25:31,680
is preferred to always be the last
12852
11:25:29,436 --> 11:25:34,400
parameter so go ahead and create the
12853
11:25:31,680 --> 11:25:36,480
unpressed first and then go ahead ahead
12854
11:25:34,400 --> 11:25:38,319
and create the child so in the child
12855
11:25:43,199 --> 11:25:47,199
and make this text content so dark is
12856
11:25:45,519 --> 11:25:49,435
happy about that and make this constant
12857
11:25:49,436 --> 11:25:55,596
and don't forget the comma here then hot
12858
11:25:52,080 --> 11:25:58,080
reload so we can see the results
12859
11:25:55,595 --> 11:25:59,680
okay so now we have some text in there
12860
11:25:58,080 --> 11:26:03,720
and then we have a button here that says
12861
11:26:04,319 --> 11:26:07,116
okay i'm going to take it in my notes
12862
11:26:05,595 --> 11:26:08,879
that i've talked about that so we don't
12863
11:26:08,879 --> 11:26:13,115
now what we need to do here is upon
12864
11:26:13,116 --> 11:26:19,916
we actually need to send an email
12865
11:26:16,080 --> 11:26:22,959
verification to the current user okay so
12866
11:26:19,915 --> 11:26:24,719
what we need is the current user so that
12867
11:26:28,239 --> 11:26:33,275
login view and register view we have you
12868
11:26:30,400 --> 11:26:34,560
see login views or credentials firebase
12869
11:26:34,559 --> 11:26:39,435
um let's see actually we got the user
12870
11:26:37,360 --> 11:26:41,520
right here firebase initialize app and
12871
11:26:39,436 --> 11:26:43,680
then we were like fire yeah that's how
12872
11:26:41,519 --> 11:26:45,839
you get your current user firebase auth
12873
11:26:43,680 --> 11:26:49,040
instance current user okay so i'm going
12874
11:26:45,839 --> 11:26:52,159
to copy that information from our
12875
11:26:49,040 --> 11:26:54,800
home page okay and bring it into your
12876
11:26:52,160 --> 11:26:56,400
verify email view state in the button
12877
11:26:59,756 --> 11:27:04,080
now what we need to do is as the caption
12878
11:27:02,000 --> 11:27:07,519
says here we need to await on the user
12879
11:27:04,080 --> 11:27:09,756
send email verification so say await
12880
11:27:12,000 --> 11:27:16,559
user send email verification okay so now
12881
11:27:14,720 --> 11:27:19,595
you can see this is a function
12882
11:27:16,559 --> 11:27:22,559
and it says it can't be unconditionally
12883
11:27:19,595 --> 11:27:23,435
invoked and that is because user can be
12884
11:27:24,720 --> 11:27:28,559
and it is an optional user so as you've
12885
11:27:27,116 --> 11:27:30,560
understood from the previous chapters
12886
11:27:30,559 --> 11:27:34,159
access this function now be a little bit
12887
11:27:32,480 --> 11:27:36,720
careful here because this function is a
12888
11:27:34,160 --> 11:27:38,800
future you see it's a future void so as
12889
11:27:36,720 --> 11:27:41,916
you know calling a function that returns
12890
11:27:38,800 --> 11:27:44,160
a future void does not invoke the future
12891
11:27:41,915 --> 11:27:46,479
except it only tells the function to
12892
11:27:44,160 --> 11:27:48,720
return the future okay so if you
12893
11:27:46,480 --> 11:27:50,880
actually want the future to be executed
12894
11:27:48,720 --> 11:27:53,520
you need to wait on it so if you then
12895
11:27:53,519 --> 11:27:58,319
you'll see we get an error telling that
12896
11:27:55,839 --> 11:28:01,115
yeah you can't do asynchronous call
12897
11:28:01,116 --> 11:28:05,116
scope that you're at and that is simply
12898
11:28:02,720 --> 11:28:07,360
because the unpressed function is not
12899
11:28:05,116 --> 11:28:08,639
marked as asynchronous okay so remember
12900
11:28:10,400 --> 11:28:16,319
um i'm gonna press command s here we get
12901
11:28:12,480 --> 11:28:17,680
the error i'm gonna do this hot restart
12902
11:28:17,680 --> 11:28:21,756
uh if i'm not mistaken i mean if i bring
12903
11:28:19,915 --> 11:28:23,639
a browser up let's see if i can bring a
12904
11:28:21,756 --> 11:28:26,559
browser window here and i'm going to say
12905
11:28:26,559 --> 11:28:30,720
and let's go to our mynotes flatter
12906
11:28:28,480 --> 11:28:32,800
project and let's go and have a look at
12907
11:28:30,720 --> 11:28:34,840
our authentication i can see that
12908
11:28:34,839 --> 11:28:37,755
pixelityab.gmail.com for you it's
12909
11:28:36,319 --> 11:28:39,116
probably gonna say something else
12910
11:28:37,756 --> 11:28:40,639
hopefully it's gonna say something else
12911
11:28:39,116 --> 11:28:41,520
so that you haven't registered with my
12912
11:28:41,519 --> 11:28:46,639
and what we need to do then is to simply
12913
11:28:44,400 --> 11:28:48,560
go here and press the send email
12914
11:28:50,400 --> 11:28:55,756
so nothing happened on the screen
12915
11:28:55,756 --> 11:28:58,480
i'm going to bring up the right caption
12916
11:28:57,275 --> 11:29:00,239
here so you know what we're talking
12917
11:28:58,480 --> 11:29:02,319
about now we want to kind of look at how
12918
11:29:00,239 --> 11:29:05,595
this email actually looks like
12919
11:29:02,319 --> 11:29:08,480
so let's see if i can bring up that
12920
11:29:16,639 --> 11:29:21,199
other emails and other users because
12921
11:29:18,720 --> 11:29:22,080
that's kind of like private information
12922
11:29:22,080 --> 11:29:27,116
all right so uh let's go ahead and see
12923
11:29:25,436 --> 11:29:30,239
i'm gonna then bring up this email on
12924
11:29:27,116 --> 11:29:31,436
the screen so you can see how it looks
12925
11:29:32,800 --> 11:29:37,276
that email address you can see here
12926
11:29:35,040 --> 11:29:38,720
that's my email address or this is the
12927
11:29:37,275 --> 11:29:41,756
user that is logged in into our
12928
11:29:38,720 --> 11:29:43,436
application then received an email from
12929
11:29:41,756 --> 11:29:46,319
firebase which is no reply at
12930
11:29:43,436 --> 11:29:47,436
mynotesflusterproject.firebaseapp.com
12931
11:29:47,436 --> 11:29:53,596
and it says okay you need to click on
12932
11:29:48,959 --> 11:29:54,799
this link in order to verify your user
12933
11:29:55,519 --> 11:29:59,039
i'm just going to take in my actions in
12934
11:29:57,595 --> 11:30:01,360
my notes here that i've talked about
12935
11:30:01,360 --> 11:30:05,595
and let's then click on this link to
12936
11:30:03,436 --> 11:30:07,436
verify our identity and here it says
12937
11:30:05,595 --> 11:30:10,959
your email has been verified you cannot
12938
11:30:07,436 --> 11:30:12,880
sign in with your new account great okay
12939
11:30:10,959 --> 11:30:15,436
so i'm going to close that taking in my
12940
11:30:12,879 --> 11:30:18,079
notes that i've talked about it
12941
11:30:15,436 --> 11:30:18,800
um and what we can do here then is just
12942
11:30:18,800 --> 11:30:24,080
refresh here and there's nothing really
12943
11:30:20,959 --> 11:30:25,116
different about this user as you can see
12944
11:30:26,800 --> 11:30:30,160
we're also looking at that user and you
12945
11:30:28,720 --> 11:30:32,239
can't really i mean at the moment i
12946
11:30:30,160 --> 11:30:33,436
can't personally see if this user is
12947
11:30:35,199 --> 11:30:38,959
maybe that's something that firebase is
12948
11:30:37,199 --> 11:30:41,435
going to provide in the future just like
12949
11:30:38,959 --> 11:30:42,959
a checkbox or something saying or like a
12950
11:30:41,436 --> 11:30:44,880
yeah just like a check icon saying
12951
11:30:42,959 --> 11:30:46,400
whether this user is verified or not but
12952
11:30:44,879 --> 11:30:50,000
you can't see that at the moment in
12953
11:30:46,400 --> 11:30:50,000
firebase console at least i can't
12954
11:30:50,319 --> 11:30:56,959
all right a lot of information now let's
12955
11:30:56,959 --> 11:31:00,400
talk about this error that we got on the
12956
11:31:00,400 --> 11:31:04,480
and i've provided a little link here
12957
11:31:02,959 --> 11:31:06,559
which i'm going to click on on a
12958
11:31:04,480 --> 11:31:08,400
separate screen and then bring it bring
12959
11:31:06,559 --> 11:31:09,595
it up here on the screen that you can
12960
11:31:09,595 --> 11:31:14,399
now if you remember where we pushed this
12961
11:31:17,116 --> 11:31:21,276
using navigator and then material page
12962
11:31:21,275 --> 11:31:24,479
and where is it material page right here
12963
11:31:24,480 --> 11:31:28,319
then we got this error on handle
12964
11:31:26,160 --> 11:31:31,040
exception okay and then there's an issue
12965
11:31:33,040 --> 11:31:37,200
github repository so as you know flutter
12966
11:31:34,959 --> 11:31:39,275
is an open source project and
12967
11:31:37,199 --> 11:31:40,799
is an organization here on github and
12968
11:31:39,275 --> 11:31:43,360
pretty much everything that they're
12969
11:31:40,800 --> 11:31:45,840
doing for flutter is under that
12970
11:31:43,360 --> 11:31:48,480
organization on github so as you can see
12971
11:31:45,839 --> 11:31:50,479
here it says how to call navigator push
12972
11:31:48,480 --> 11:31:52,319
in future builder error log and then
12973
11:31:50,480 --> 11:31:53,040
there's lots of great discussions about
12974
11:31:53,040 --> 11:31:58,080
what should be done and etc but
12975
11:31:55,839 --> 11:32:00,319
just know that for now what you need to
12976
11:31:58,080 --> 11:32:02,400
know is that you cannot do that without
12977
11:32:00,319 --> 11:32:04,879
having that error although although
12978
11:32:04,879 --> 11:32:07,839
on the screen but as you saw as soon as
12979
11:32:08,879 --> 11:32:14,239
hot reload and then you will have this
12980
11:32:11,595 --> 11:32:16,559
error also so there is an exception
12981
11:32:20,480 --> 11:32:24,720
after you've looked at that uh
12982
11:32:22,639 --> 11:32:26,239
github issue and you've gone through the
12983
11:32:24,720 --> 11:32:28,160
comments you'll understand that that's
12984
11:32:26,239 --> 11:32:30,159
not the way to do things in flutter at
12985
11:32:30,160 --> 11:32:34,800
and um i'm actually gonna take it in my
12986
11:32:33,116 --> 11:32:36,240
notes so if you see me looking here i'm
12987
11:32:34,800 --> 11:32:37,840
just making sure that i'm explaining
12988
11:32:39,116 --> 11:32:43,360
so what we need to do now is to go and
12989
11:32:45,199 --> 11:32:50,159
our verify email view is created so
12990
11:32:53,915 --> 11:32:58,079
you see here what we're doing is that
12991
11:32:55,519 --> 11:32:59,435
we're in our verify email view what
12992
11:32:58,080 --> 11:33:02,480
we're returning we're returning an
12993
11:32:59,436 --> 11:33:05,116
entire scaffold and that is why we're
12994
11:33:02,480 --> 11:33:06,960
trying to push this screen on our
12995
11:33:05,116 --> 11:33:08,800
current home home page because we're
12996
11:33:06,959 --> 11:33:10,559
saying that here's the home page and
12997
11:33:08,800 --> 11:33:12,639
then there this is the verify email view
12998
11:33:10,559 --> 11:33:16,079
and it has a scaffold just like the home
12999
11:33:12,639 --> 11:33:18,400
page does do you remember if you go up
13000
11:33:16,080 --> 11:33:20,480
to our homepage homepage also has a
13001
11:33:18,400 --> 11:33:22,480
scaffold and an app bar so what we're
13002
11:33:20,480 --> 11:33:24,319
pretty much saying right now is that
13003
11:33:22,480 --> 11:33:26,720
this is the home page and we kind of
13004
11:33:24,319 --> 11:33:28,559
need to move another page on top of it
13005
11:33:26,720 --> 11:33:30,720
which pretty much has the same structure
13006
11:33:30,720 --> 11:33:33,916
and that is causing the problem because
13007
11:33:32,400 --> 11:33:36,639
we're pushing something in future
13008
11:33:33,915 --> 11:33:37,435
builder and we're not allowed to do that
13009
11:33:39,519 --> 11:33:42,799
in order to fix this problem just for
13010
11:33:42,800 --> 11:33:47,840
we go and remove the scaffold and in our
13011
11:33:45,680 --> 11:33:50,720
build function all we're gonna do is
13012
11:33:47,839 --> 11:33:53,115
just to return the column okay so go on
13013
11:33:54,000 --> 11:33:58,000
and what we're gonna do is we're just
13014
11:33:55,915 --> 11:34:00,239
gonna say uh let's see if we have a
13015
11:33:58,000 --> 11:34:01,360
remove functionality here and we don't
13016
11:34:01,360 --> 11:34:05,520
i'm just going to grab this column
13017
11:34:04,160 --> 11:34:06,960
and i'm going to bring it a little bit
13018
11:34:05,519 --> 11:34:08,159
up so you can see i'm going to put a
13019
11:34:08,160 --> 11:34:12,720
hot hot reload so we don't see the ugly
13020
11:34:15,116 --> 11:34:20,000
and without the comma at the end grab
13021
11:34:17,756 --> 11:34:21,840
that column and in the build function
13022
11:34:20,000 --> 11:34:24,720
just return that okay instead of your
13023
11:34:21,839 --> 11:34:27,275
scaffold and a semicolon at the end all
13024
11:34:28,480 --> 11:34:32,880
so that's what we're gonna do now
13025
11:34:31,275 --> 11:34:35,915
for now we're just gonna return column
13026
11:34:32,879 --> 11:34:36,799
there and then what we need to do
13027
11:34:36,800 --> 11:34:39,916
let me see actually that's what we're
13028
11:34:38,000 --> 11:34:41,519
gonna do now or is it something that
13029
11:34:44,800 --> 11:34:48,880
we've now changed verify email view and
13030
11:34:46,639 --> 11:34:51,595
that returns a column now let's go in
13031
11:34:48,879 --> 11:34:54,639
here you see in here when we see that
13032
11:34:51,595 --> 11:34:56,479
the user isn't verified uh what we need
13033
11:34:54,639 --> 11:34:59,040
to do then is to say navigator instead
13034
11:34:56,480 --> 11:35:01,840
of navigator of we're gonna just return
13035
11:34:59,040 --> 11:35:03,680
our verify email view in here okay so
13036
11:35:01,839 --> 11:35:04,799
let me go in here and just say return
13037
11:35:11,360 --> 11:35:14,720
otherwise do that so i'm going to press
13038
11:35:20,879 --> 11:35:24,639
let's go and see what is happening here
13039
11:35:24,639 --> 11:35:30,000
if user instance current if user email
13040
11:35:27,360 --> 11:35:32,239
verified then return done otherwise
13041
11:35:32,239 --> 11:35:34,559
what's happening to be honest with you
13042
11:35:34,559 --> 11:35:38,879
previously where we were pushing an
13043
11:35:36,239 --> 11:35:40,879
entire screen on the current screen now
13044
11:35:38,879 --> 11:35:44,719
what we're doing is saying that here is
13045
11:35:40,879 --> 11:35:47,275
a screen already put this verify emails
13046
11:35:47,275 --> 11:35:52,159
that returns that is returned from the
13047
11:35:48,879 --> 11:35:54,639
build function right inside this current
13048
11:35:52,160 --> 11:35:55,916
screen's content okay so it's a little
13049
11:35:54,639 --> 11:35:58,239
bit of a difference instead of pushing a
13050
11:35:55,915 --> 11:36:00,639
whole new screen we're putting that new
13051
11:35:58,239 --> 11:36:02,879
screen's contents in our screen all
13052
11:36:03,519 --> 11:36:08,915
okay and now we have this and i see now
13053
11:36:08,915 --> 11:36:13,755
our app still thinks that we're not
13054
11:36:11,595 --> 11:36:16,839
verified but what we could do is just to
13055
11:36:13,756 --> 11:36:19,520
make sure you can see here that
13056
11:36:16,839 --> 11:36:21,755
um at least we're not getting that ugly
13057
11:36:19,519 --> 11:36:23,915
error anymore so if i do a hot restart
13058
11:36:23,915 --> 11:36:27,360
i can see this email verification and
13059
11:36:25,680 --> 11:36:30,639
that's a little bit strange to be honest
13060
11:36:27,360 --> 11:36:31,915
with you because we did verify our user
13061
11:36:30,639 --> 11:36:34,559
so what i'm going to do is just to
13062
11:36:31,915 --> 11:36:35,519
ensure that this this phone right now
13063
11:36:40,319 --> 11:36:44,959
and it does so that user should have
13064
11:36:44,959 --> 11:36:49,116
and i think we actually did click on the
13065
11:36:47,116 --> 11:36:50,160
verification email so let me go back
13066
11:36:52,239 --> 11:36:56,720
and what we could do is just to stop the
13067
11:36:54,639 --> 11:36:58,639
application from running and then press
13068
11:36:56,720 --> 11:37:01,916
run without debugging and just to ensure
13069
11:36:58,639 --> 11:37:04,000
that everything is set up correctly
13070
11:37:01,915 --> 11:37:05,435
so if everything is working fine then we
13071
11:37:05,436 --> 11:37:09,916
verify email view instead we should go
13072
11:37:10,959 --> 11:37:14,559
we should display the done text to the
13073
11:37:16,080 --> 11:37:19,680
let's just let's just ensure that that
13074
11:37:17,756 --> 11:37:23,520
is working as expected before we
13075
11:37:25,040 --> 11:37:29,116
i can still see this and we could simply
13076
11:37:29,116 --> 11:37:33,040
poor man debugging in here and just
13077
11:37:30,879 --> 11:37:34,319
prints the user email like that prints
13078
11:37:34,319 --> 11:37:38,959
user to the screen command s okay
13079
11:37:36,959 --> 11:37:41,116
and let's go in here i can see email
13080
11:37:38,959 --> 11:37:42,720
verified is still false is anonymous
13081
11:37:42,720 --> 11:37:47,200
last signing time so it still thinks
13082
11:37:45,275 --> 11:37:48,879
that i'm not verified so what i'm going
13083
11:37:47,199 --> 11:37:50,879
to do is i'm going to send an email
13084
11:37:50,879 --> 11:37:57,435
and i'm just going to go to my mail here
13085
11:37:57,436 --> 11:38:01,275
and let's just i'm going to bring up
13086
11:38:01,275 --> 11:38:06,000
and let me just ensure that
13087
11:38:07,756 --> 11:38:11,916
and it says your email has been verified
13088
11:38:11,915 --> 11:38:16,000
then let's close this and i'm gonna do a
13089
11:38:17,360 --> 11:38:22,080
and to be honest with you i can still
13090
11:38:18,959 --> 11:38:24,639
see now that we're not verified so
13091
11:38:28,720 --> 11:38:34,000
flutter email verified not working
13092
11:38:36,160 --> 11:38:39,436
let's see if there's something that
13093
11:38:39,436 --> 11:38:45,436
uh firebase auth current user and then
13094
11:38:42,639 --> 11:38:47,519
user null is email verified and i
13095
11:38:45,436 --> 11:38:49,360
believe that is what we're doing here it
13096
11:38:47,519 --> 11:38:50,839
this is not hopefully a future is
13097
11:38:53,756 --> 11:38:57,040
in here we're initializing the
13098
11:38:55,275 --> 11:38:58,400
application so that that should work
13099
11:38:58,400 --> 11:39:03,840
and then we're getting the user and then
13100
11:39:00,160 --> 11:39:05,680
email verified that should also work so
13101
11:39:05,680 --> 11:39:09,040
one thing to implement is email verified
13102
11:39:07,360 --> 11:39:10,879
and initiate function imperiality can be
13103
11:39:09,040 --> 11:39:13,200
ideal approach to easy for verification
13104
11:39:10,879 --> 11:39:16,159
with firebase well that's not really
13105
11:39:18,480 --> 11:39:23,680
and it could simply be that we need to
13106
11:39:21,040 --> 11:39:25,840
just try to log in with that user so
13107
11:39:23,680 --> 11:39:26,720
that it tries to contact firebase again
13108
11:39:27,519 --> 11:39:34,159
what i'm gonna do here is to as we have
13109
11:39:30,639 --> 11:39:36,239
planned here let's go and change both
13110
11:39:34,160 --> 11:39:39,436
the login view and the register view as
13111
11:39:36,239 --> 11:39:41,756
well so that they don't return
13112
11:39:39,436 --> 11:39:44,160
an entire scaffold but instead we're
13113
11:39:41,756 --> 11:39:47,040
gonna make sure that they only return
13114
11:39:47,040 --> 11:39:50,480
okay as you can see i put in the caption
13115
11:39:48,720 --> 11:39:52,000
here that they shouldn't for now return
13116
11:39:53,116 --> 11:39:56,080
so that's going to be done in the home
13117
11:39:56,080 --> 11:39:59,916
and i can see i have a little bit of
13118
11:40:00,559 --> 11:40:07,040
now return a scaffold that's the
13119
11:40:03,360 --> 11:40:08,720
job of home page so i just fixed our
13120
11:40:07,040 --> 11:40:11,275
little caption there as well let's go to
13121
11:40:08,720 --> 11:40:13,360
login view and i'm gonna go here
13122
11:40:11,275 --> 11:40:15,199
and let's go to your login view here you
13123
11:40:13,360 --> 11:40:17,040
can see we have firebase initialize app
13124
11:40:15,199 --> 11:40:19,199
future builder we have all that logic
13125
11:40:17,040 --> 11:40:21,595
also in both login view and registering
13126
11:40:19,199 --> 11:40:24,079
we shouldn't be doing that so i'm gonna
13127
11:40:21,595 --> 11:40:24,879
grab this return column all the way from
13128
11:40:25,756 --> 11:40:29,520
go to all the way where the return
13129
11:40:29,519 --> 11:40:33,680
grab that then i'm gonna pretty much
13130
11:40:33,680 --> 11:40:40,559
build function and instead return the
13131
11:40:36,160 --> 11:40:42,960
column okay so that's our login view
13132
11:40:42,959 --> 11:40:46,319
unused imports i'm going to remove them
13133
11:40:51,116 --> 11:40:54,720
for now as well do the same thing for
13134
11:40:54,720 --> 11:40:58,400
go to your build function in the
13135
11:40:58,400 --> 11:41:02,880
needs to be removed except for the
13136
11:41:00,080 --> 11:41:04,720
actual content which is the column
13137
11:41:04,720 --> 11:41:10,239
grab the column as you can see here
13138
11:41:07,595 --> 11:41:13,839
nuke the entire build function
13139
11:41:10,239 --> 11:41:15,915
and just return your call all right
13140
11:41:17,199 --> 11:41:21,115
fix this email verification issue
13141
11:41:19,116 --> 11:41:22,959
perhaps what we need to do here
13142
11:41:27,040 --> 11:41:31,595
turn just comment out all the codes so
13143
11:41:29,680 --> 11:41:33,360
when the initialization of firebase is
13144
11:41:31,595 --> 11:41:34,799
done just return your login view so
13145
11:41:36,400 --> 11:41:41,360
okay as a constant so i'm just gonna
13146
11:41:38,720 --> 11:41:43,360
press command s and then we come here
13147
11:41:41,360 --> 11:41:46,720
and i'm going to enter pixelityab
13148
11:41:46,720 --> 11:41:50,959
and if you remember from login view if
13149
11:41:50,959 --> 11:41:54,400
we had this beautiful little thing that
13150
11:41:52,559 --> 11:41:55,519
printed the user credentials to the
13151
11:41:55,519 --> 11:41:59,595
that is saved already and i've saved
13152
11:41:59,595 --> 11:42:04,479
so let's go and enter that information
13153
11:42:01,519 --> 11:42:05,755
pixel tab at gmail.com and then through
13154
11:42:05,756 --> 11:42:09,595
and let me bring up the debug console
13155
11:42:08,000 --> 11:42:10,959
and kind of change the screen layout so
13156
11:42:09,595 --> 11:42:13,199
so you see it a little bit better as
13157
11:42:10,959 --> 11:42:15,915
well i'm going to clear the console
13158
11:42:13,199 --> 11:42:16,799
and i'm going to press the login button
13159
11:42:16,800 --> 11:42:21,596
here now we have the user credential you
13160
11:42:19,680 --> 11:42:25,680
can see it's printed to the screen
13161
11:42:21,595 --> 11:42:28,159
and now email verified is set to true so
13162
11:42:28,160 --> 11:42:31,520
when there's email verification sent
13163
11:42:31,519 --> 11:42:35,199
as you as a user i mean there's
13164
11:42:33,040 --> 11:42:36,720
something for me to learn as well so
13165
11:42:35,199 --> 11:42:38,639
i'm actually grateful that i'm learning
13166
11:42:39,436 --> 11:42:44,400
one once what happened here is that we
13167
11:42:42,000 --> 11:42:46,559
verified an email and that email
13168
11:42:46,559 --> 11:42:50,000
we clicked on the link but firebase
13169
11:42:48,639 --> 11:42:51,040
doesn't immediately understand that
13170
11:42:51,040 --> 11:42:55,040
as a user have verified your email now
13171
11:42:53,839 --> 11:42:57,435
so what you need to do you need to ask
13172
11:42:55,040 --> 11:42:58,800
the user to log in and upon that point
13173
11:42:57,436 --> 11:43:00,639
it seems like firebase is actually
13174
11:42:58,800 --> 11:43:02,960
refreshing that data locally as well as
13175
11:43:00,639 --> 11:43:04,959
contacting firebase backend and getting
13176
11:43:02,959 --> 11:43:06,959
the latest information from there so
13177
11:43:04,959 --> 11:43:08,639
just because your user has verified
13178
11:43:06,959 --> 11:43:09,915
their information doesn't mean that the
13179
11:43:08,639 --> 11:43:11,275
application is immediately going to
13180
11:43:09,915 --> 11:43:14,719
understand that so you need to ask the
13181
11:43:15,360 --> 11:43:20,800
so i can see here now we were supposed
13182
11:43:22,559 --> 11:43:25,756
i'm going to take some items in my notes
13183
11:43:24,319 --> 11:43:27,040
just to make sure that i've talked about
13184
11:43:27,040 --> 11:43:32,160
and we're returning the login view right
13185
11:43:32,160 --> 11:43:36,160
from our home page so this is something
13186
11:43:34,639 --> 11:43:40,239
you'll need to do also before we
13187
11:43:40,239 --> 11:43:45,799
all right that was a lot of information
13188
11:43:48,800 --> 11:43:54,400
what we've done pretty much is just to
13189
11:43:50,400 --> 11:43:56,160
create the uh verify uh email view or
13190
11:43:54,400 --> 11:43:58,239
what we call it is it called verify
13191
11:43:56,160 --> 11:44:00,320
verify email view we ensure that it can
13192
11:43:58,239 --> 11:44:01,839
send an email we clicked on the link in
13193
11:44:00,319 --> 11:44:04,000
the email and made sure that the user is
13194
11:44:01,839 --> 11:44:05,435
verified and that's and that all has
13195
11:44:06,639 --> 11:44:10,959
but we still have a lot to work on and
13196
11:44:09,199 --> 11:44:12,639
as you can see it right now i'm going
13197
11:44:10,959 --> 11:44:14,959
into the code and manually like
13198
11:44:12,639 --> 11:44:16,959
returning the screens that i personally
13199
11:44:14,959 --> 11:44:19,915
want to see or it's important for you to
13200
11:44:16,959 --> 11:44:21,680
see for instance the login view but
13201
11:44:19,915 --> 11:44:23,519
if you display login view how is the
13202
11:44:21,680 --> 11:44:26,239
user able to go from the login view to
13203
11:44:23,519 --> 11:44:28,639
register if they don't have an account
13204
11:44:26,239 --> 11:44:30,799
that they can log in with so that's what
13205
11:44:28,639 --> 11:44:33,116
we're gonna do in the next chapter we're
13206
11:44:30,800 --> 11:44:35,756
gonna create links between our screens
13207
11:44:33,116 --> 11:44:37,360
so that a user can go from one screen to
13208
11:44:40,239 --> 11:44:45,756
so yeah great job that's it for this
13209
11:44:42,720 --> 11:44:47,916
chapter and i'll see you in the next one
13210
11:44:45,756 --> 11:44:49,200
hello and welcome to chapter 17 of the
13211
11:44:49,199 --> 11:44:53,435
in the previous chapters we've been
13212
11:44:51,360 --> 11:44:56,000
working quite a lot with some of the
13213
11:44:53,436 --> 11:44:58,400
basics of flutter for instance stateful
13214
11:44:56,000 --> 11:45:01,116
stateless widgets we've been looking at
13215
11:44:58,400 --> 11:45:03,360
a column we've been looking at text
13216
11:45:01,116 --> 11:45:05,680
button and many other widgets and kind
13217
11:45:05,680 --> 11:45:09,756
our screens presentable to the user and
13218
11:45:08,559 --> 11:45:11,040
at the same time we've been working on
13219
11:45:09,756 --> 11:45:13,200
the functionality of the applications
13220
11:45:11,040 --> 11:45:15,040
such as logging in registering verifying
13221
11:45:17,360 --> 11:45:22,400
and um we're gonna break it down by
13222
11:45:20,160 --> 11:45:24,240
first starting to work on the link
13223
11:45:22,400 --> 11:45:26,239
between the login and the register view
13224
11:45:26,239 --> 11:45:30,720
at the moment we i mean i'm going to
13225
11:45:30,720 --> 11:45:33,275
the way we left it in the previous
13226
11:45:33,275 --> 11:45:39,199
as you can see here in the main function
13227
11:45:39,199 --> 11:45:43,275
home page widget and also let me change
13228
11:45:44,720 --> 11:45:48,880
let me change the structure on the
13229
11:45:46,879 --> 11:45:51,040
uh of the different views on the screen
13230
11:45:48,879 --> 11:45:54,239
so you can see a little bit better so if
13231
11:45:51,040 --> 11:45:56,080
i do a hot restart here you can see that
13232
11:45:54,239 --> 11:45:57,275
um when the connection state is done
13233
11:45:56,080 --> 11:45:59,200
when the firebase application is
13234
11:45:57,275 --> 11:46:01,275
initialized i'm displaying the or we're
13235
11:45:59,199 --> 11:46:04,079
displaying the login view here without
13236
11:46:01,275 --> 11:46:06,079
basically having the option to go to any
13237
11:46:04,080 --> 11:46:08,080
other screen from here so if i want to
13238
11:46:06,080 --> 11:46:09,520
send the user to the register view then
13239
11:46:08,080 --> 11:46:11,200
i have to change this code right here
13240
11:46:14,800 --> 11:46:19,756
that's why we need a link between these
13241
11:46:17,680 --> 11:46:22,080
two views i'm sorry i'm looking at this
13242
11:46:19,756 --> 11:46:24,000
screen just because i need to actually
13243
11:46:22,080 --> 11:46:26,639
ensure that i tick the items that i've
13244
11:46:24,000 --> 11:46:28,160
already explained so um we need to make
13245
11:46:26,639 --> 11:46:30,080
sure that when a user is on the login
13246
11:46:28,160 --> 11:46:31,756
screen even if that's the first screen
13247
11:46:30,080 --> 11:46:32,880
that we always display to the user which
13248
11:46:32,879 --> 11:46:36,559
but if even if it was we need to be able
13249
11:46:34,959 --> 11:46:38,159
to let the user to go from the login
13250
11:46:36,559 --> 11:46:41,839
screen to the registry and also from
13251
11:46:38,160 --> 11:46:44,320
registry view back to the login screen
13252
11:46:41,839 --> 11:46:46,239
so that's what we're gonna do in this
13253
11:46:50,639 --> 11:46:55,360
is to go to our login view and add a
13254
11:46:55,360 --> 11:47:00,239
the registry so i'm going to open up
13255
11:46:58,559 --> 11:47:02,879
i'm going to bring it here make the
13256
11:47:00,239 --> 11:47:05,360
screen a little bit smaller here
13257
11:47:02,879 --> 11:47:07,680
so let's go to our login view which i
13258
11:47:05,360 --> 11:47:10,239
can see is actually modified um yeah
13259
11:47:10,239 --> 11:47:14,799
and what we need here you can see we
13260
11:47:12,080 --> 11:47:17,840
have a text button and that is for our
13261
11:47:17,839 --> 11:47:20,399
and as you can see the cache has added
13262
11:47:19,116 --> 11:47:22,639
text but it's allowing you to send us a
13263
11:47:20,400 --> 11:47:24,480
registry view so right after this text
13264
11:47:22,639 --> 11:47:25,680
button let's create a new text button
13265
11:47:24,480 --> 11:47:27,520
and i'm going to bring it a little bit
13266
11:47:25,680 --> 11:47:30,800
higher so you can see i'm going to say
13267
11:47:27,519 --> 11:47:33,680
text button remember uh child parameter
13268
11:47:30,800 --> 11:47:36,240
always has to be at the la at the
13269
11:47:33,680 --> 11:47:38,800
it should be the last parameter so i'm
13270
11:47:36,239 --> 11:47:40,799
going to say unpressed ask visual studio
13271
11:47:38,800 --> 11:47:42,639
code to complete it for me and then i'm
13272
11:47:40,800 --> 11:47:44,560
going to say child the text is going to
13273
11:47:48,720 --> 11:47:53,360
and we say register here something like
13274
11:47:53,360 --> 11:47:56,480
and i'm gonna save this and you can see
13275
11:47:55,199 --> 11:47:59,115
now that we have a little button here
13276
11:47:56,480 --> 11:48:00,800
that says not registered yet register
13277
11:48:00,800 --> 11:48:04,400
okay so that part is done but the button
13278
11:48:03,040 --> 11:48:06,480
at the moment the way it is right now
13279
11:48:09,519 --> 11:48:13,039
but before we can do that we need to
13280
11:48:15,915 --> 11:48:20,159
you see in the previous exercise or in
13281
11:48:25,595 --> 11:48:28,639
and then we created a material page
13282
11:48:28,639 --> 11:48:32,080
that may have all been kind of like
13283
11:48:30,480 --> 11:48:33,436
alien to you and you didn't really know
13284
11:48:32,080 --> 11:48:35,276
what was happening and that's okay you
13285
11:48:33,436 --> 11:48:37,200
will get to know it more and more as we
13286
11:48:35,275 --> 11:48:39,040
go through the various chapters in this
13287
11:48:37,199 --> 11:48:42,000
in this course but what we need to do
13288
11:48:39,040 --> 11:48:44,720
here is to first talk about what a route
13289
11:48:42,000 --> 11:48:47,360
is and what a name route is and i've
13290
11:48:44,720 --> 11:48:49,436
actually put a link to a documentation
13291
11:48:49,436 --> 11:48:52,720
that we can go i'm going to bring up my
13292
11:48:51,199 --> 11:48:55,199
web browser and i'm going to create a
13293
11:48:52,720 --> 11:48:56,959
new window and i'm going to say flutter
13294
11:48:56,959 --> 11:49:01,680
which is going to end up in the exact
13295
11:48:58,879 --> 11:49:03,839
same link that you can see there
13296
11:49:01,680 --> 11:49:05,680
and it says here in the navig in the
13297
11:49:03,839 --> 11:49:06,879
navigate to a new screenplay recipe
13298
11:49:05,680 --> 11:49:08,959
however if you need to navigate to the
13299
11:49:06,879 --> 11:49:10,399
same screen actually it wasn't such a
13300
11:49:08,959 --> 11:49:12,000
great description to be honest i was
13301
11:49:10,400 --> 11:49:14,160
kind of expecting a little bit of better
13302
11:49:12,000 --> 11:49:15,756
description but maybe i can do that
13303
11:49:14,160 --> 11:49:17,116
myself instead of you having to look at
13304
11:49:15,756 --> 11:49:18,000
this and i can see to be honest with you
13305
11:49:19,116 --> 11:49:24,240
webpage is a part of a cookbook which
13306
11:49:24,239 --> 11:49:27,839
like linked together so in order for you
13307
11:49:26,480 --> 11:49:30,080
to understand this page you actually
13308
11:49:27,839 --> 11:49:31,679
have to go to this link and read that
13309
11:49:31,680 --> 11:49:34,879
and then this would be the continuation
13310
11:49:34,879 --> 11:49:38,959
i just put the link here just so you
13311
11:49:38,959 --> 11:49:44,000
but i'm gonna explain that myself here
13312
11:49:40,800 --> 11:49:45,756
now if we go back to um where we had the
13313
11:49:45,756 --> 11:49:50,319
uh where did we have the name route when
13314
11:49:48,080 --> 11:49:52,160
we pushed it it was quite a bit before
13315
11:49:54,720 --> 11:49:59,436
so this is something called an anonymous
13316
11:49:57,040 --> 11:50:02,160
route so sorry about that i said name
13317
11:49:59,436 --> 11:50:04,800
route but this is an anonymous route so
13318
11:50:02,160 --> 11:50:07,596
a route is as its name indicates in
13319
11:50:04,800 --> 11:50:09,840
flutter is it's a journey that has a
13320
11:50:07,595 --> 11:50:11,915
start and an end so it starts from a
13321
11:50:09,839 --> 11:50:13,275
view and it ends in a view okay that's a
13322
11:50:14,239 --> 11:50:18,000
however there are two types of routes
13323
11:50:15,915 --> 11:50:19,839
and you can create in flutter either you
13324
11:50:18,000 --> 11:50:22,080
do your routes either you go to a new
13325
11:50:19,839 --> 11:50:24,239
screen to your destination from the
13326
11:50:22,080 --> 11:50:25,916
current screen without providing any
13327
11:50:24,239 --> 11:50:27,915
sort of information about what this
13328
11:50:25,915 --> 11:50:29,755
route actually means to your application
13329
11:50:27,915 --> 11:50:32,319
so it's an anonymous route you're doing
13330
11:50:29,756 --> 11:50:34,800
it in line you're not telling flutter
13331
11:50:34,800 --> 11:50:39,840
so as the user presses the button or
13332
11:50:37,915 --> 11:50:41,839
for instance in this case as the user
13333
11:50:39,839 --> 11:50:45,039
ends up in the home page and the future
13334
11:50:41,839 --> 11:50:46,399
builder initializes firebase upon the
13335
11:50:45,040 --> 11:50:48,400
connections they've done meaning that
13336
11:50:46,400 --> 11:50:50,800
the initialization of firebase is
13337
11:50:50,800 --> 11:50:54,000
the verify email view on the screen and
13338
11:50:54,000 --> 11:50:58,239
fixed it by doing all this code
13339
11:50:56,639 --> 11:51:00,639
so that was an anonymous route you're
13340
11:50:58,239 --> 11:51:03,360
doing it in place as the done connection
13341
11:51:00,639 --> 11:51:04,319
state happens then we were pushing a new
13342
11:51:06,800 --> 11:51:12,480
but a named route is the exact same
13343
11:51:10,000 --> 11:51:15,839
thing that we write like we were doing
13344
11:51:12,480 --> 11:51:17,840
before but you tell flutter about that
13345
11:51:15,839 --> 11:51:20,399
route before so that when your
13346
11:51:17,839 --> 11:51:23,039
application is created and initialized
13347
11:51:20,400 --> 11:51:25,596
and the flutter engine starts it knows
13348
11:51:23,040 --> 11:51:27,520
that there is a route with the name xyz
13349
11:51:25,595 --> 11:51:28,720
for instance or fubar bass whatever you
13350
11:51:32,319 --> 11:51:36,559
screen okay so that is the difference
13351
11:51:34,720 --> 11:51:38,319
between an anonymous route and a name
13352
11:51:36,559 --> 11:51:39,680
route in that as its name indicates a
13353
11:51:39,680 --> 11:51:44,080
is a route that has a name so you tell
13354
11:51:41,756 --> 11:51:49,840
flutter that associate this particular
13355
11:51:44,080 --> 11:51:49,840
name as a type of string to this route
13356
11:51:52,639 --> 11:51:59,116
in my notes that we've talked about that
13357
11:51:59,116 --> 11:52:03,840
is to define two routes for our
13358
11:52:01,199 --> 11:52:05,199
application one called slash login slash
13359
11:52:03,839 --> 11:52:06,719
and the other one is called slash
13360
11:52:08,160 --> 11:52:13,840
so let me just go and ensure that i'm
13361
11:52:10,720 --> 11:52:15,840
bringing those routes correctly so
13362
11:52:13,839 --> 11:52:18,479
what i'm going to do here and you need
13363
11:52:15,839 --> 11:52:20,000
to do as well is to go to your main
13364
11:52:20,000 --> 11:52:25,275
and at the moment we have a title for a
13365
11:52:22,480 --> 11:52:27,116
material app and a theme data and then a
13366
11:52:27,116 --> 11:52:32,959
but what you also have is a parameter
13367
11:52:29,436 --> 11:52:36,160
called routes okay so let's go and say
13368
11:52:32,959 --> 11:52:39,275
we want to create these routes
13369
11:52:36,160 --> 11:52:42,400
and you can see here it says routes its
13370
11:52:39,275 --> 11:52:44,959
value is a map of string and a builder
13371
11:52:42,400 --> 11:52:47,040
function for the values of those
13372
11:52:44,959 --> 11:52:49,116
uh string keys so it's a little bit
13373
11:52:47,040 --> 11:52:50,959
strange it's a map whose keys are
13374
11:52:50,959 --> 11:52:56,879
values are functions that take in a
13375
11:52:54,959 --> 11:52:59,040
build context sorry about that and
13376
11:52:56,879 --> 11:53:00,000
return a widget so it's a little bit of
13377
11:53:00,000 --> 11:53:04,239
it's like maybe a paradigm shift in your
13378
11:53:01,839 --> 11:53:07,039
head but these things do exist and i've
13379
11:53:04,239 --> 11:53:08,639
already i've also created my own classes
13380
11:53:07,040 --> 11:53:09,756
that kind of expect this kind of
13381
11:53:09,756 --> 11:53:13,595
so let's go into routes and say okay now
13382
11:53:13,595 --> 11:53:18,079
as you know as you know this is how we
13383
11:53:15,199 --> 11:53:19,595
create a map map is a is a list of key
13384
11:53:19,595 --> 11:53:23,595
or map entries as they're called in
13385
11:53:23,595 --> 11:53:28,079
and then what we need to do here is i'm
13386
11:53:26,239 --> 11:53:30,159
sorry but i'll just move some code
13387
11:53:28,080 --> 11:53:31,756
around i have three screens here so i
13388
11:53:30,160 --> 11:53:34,640
kind of have to manage those screens at
13389
11:53:31,756 --> 11:53:37,275
the same time i'm explaining things so
13390
11:53:34,639 --> 11:53:40,080
what we're gonna do here is to define
13391
11:53:37,275 --> 11:53:42,559
two routes slash login all right and
13392
11:53:40,080 --> 11:53:45,360
remember the value of this of the value
13393
11:53:42,559 --> 11:53:48,399
of every key inside this routes needs to
13394
11:53:45,360 --> 11:53:50,639
be a function you see it's a function
13395
11:53:48,400 --> 11:53:53,520
that returns a widget and it takes a
13396
11:53:50,639 --> 11:53:56,800
build context inside so in here what
13397
11:53:53,519 --> 11:53:58,479
we're going to do is say we have a
13398
11:53:58,480 --> 11:54:05,040
and we return actually sorry login slash
13399
11:54:02,080 --> 11:54:07,596
we return the login view all right so we
13400
11:54:05,040 --> 11:54:10,959
say have a route called slash login
13401
11:54:07,595 --> 11:54:13,115
slash and when that route is used it
13402
11:54:13,116 --> 11:54:16,880
an instance of the login view now we
13403
11:54:15,275 --> 11:54:19,040
need to do the exact same thing but for
13404
11:54:16,879 --> 11:54:21,115
register so i'm going to copy this
13405
11:54:19,040 --> 11:54:23,040
and here just going to say register and
13406
11:54:21,116 --> 11:54:25,756
instead return the register view which
13407
11:54:23,040 --> 11:54:28,239
we haven't imported into our main dart
13408
11:54:25,756 --> 11:54:30,400
file and you can remedy that by pressing
13409
11:54:28,239 --> 11:54:33,275
command dot on mac or control dot on
13410
11:54:30,400 --> 11:54:34,480
windows and linux and then say import
13411
11:54:37,595 --> 11:54:43,756
okay that's that and i'm gonna have a
13412
11:54:40,639 --> 11:54:44,400
look at my notes a little bit
13413
11:54:44,400 --> 11:54:48,800
what we need to do now um i've already
13414
11:54:46,959 --> 11:54:51,595
explained that okay in log area all
13415
11:54:48,800 --> 11:54:54,000
right so what we need to do now is to go
13416
11:54:51,595 --> 11:54:56,079
from login to the register view
13417
11:54:54,000 --> 11:54:58,000
and as you can see i've explained it
13418
11:54:56,080 --> 11:55:00,240
here in the caption that this will
13419
11:54:58,000 --> 11:55:03,756
actually cause an error but we will fix
13420
11:55:00,239 --> 11:55:04,639
this error as we go forward okay
13421
11:55:04,639 --> 11:55:09,040
in this uh register view here sorry in
13422
11:55:09,040 --> 11:55:12,319
in our login view so let's go to the
13423
11:55:10,559 --> 11:55:14,559
login view we have this button right
13424
11:55:12,319 --> 11:55:17,116
here and what we need to do is just to
13425
11:55:14,559 --> 11:55:20,559
ensure that by pressing that we can go
13426
11:55:21,595 --> 11:55:25,595
i think i brought up the caption
13427
11:55:23,839 --> 11:55:28,319
and you can see that we need to use
13428
11:55:25,595 --> 11:55:30,479
navigator of context push named and
13429
11:55:30,480 --> 11:55:35,360
and this this is kind of a peculiar call
13430
11:55:33,436 --> 11:55:37,040
because what it essentially does is as
13431
11:55:35,360 --> 11:55:38,000
you can see right now on the screen we
13432
11:55:40,480 --> 11:55:44,240
we basically the way we've created
13433
11:55:42,559 --> 11:55:47,435
things at the moment is that we have the
13434
11:55:47,436 --> 11:55:52,080
and then depending on the state of
13435
11:55:49,839 --> 11:55:54,319
actually no not depending on anything
13436
11:55:52,080 --> 11:55:57,840
we're literally just hard coding login
13437
11:55:54,319 --> 11:56:00,319
view to be returned inside this okay so
13438
11:55:57,839 --> 11:56:02,399
we have the home widget and then inside
13439
11:56:00,319 --> 11:56:04,559
this home widget we're inserting the
13440
11:56:02,400 --> 11:56:06,959
contents of login view so login view and
13441
11:56:04,559 --> 11:56:08,559
home page are kind of like displayed on
13442
11:56:09,436 --> 11:56:12,639
this home page has the scaffold whereas
13443
11:56:12,639 --> 11:56:16,639
login view doesn't have any scaffold and
13444
11:56:14,720 --> 11:56:18,720
it's just a column at the moment if you
13445
11:56:16,639 --> 11:56:21,756
remember we can go back to login view so
13446
11:56:18,720 --> 11:56:24,559
you can see that it's just a column okay
13447
11:56:21,756 --> 11:56:26,160
so that's the structure currently by
13448
11:56:24,559 --> 11:56:28,639
doing this command that i'm providing
13449
11:56:26,160 --> 11:56:30,560
you here navigator of context push name
13450
11:56:30,559 --> 11:56:36,159
what is going to happen is that as its
13451
11:56:38,319 --> 11:56:42,400
before it pushes this new route
13452
11:56:42,400 --> 11:56:46,880
is what we're basically saying here is
13453
11:56:45,116 --> 11:56:48,880
that by pressing the not registered yet
13454
11:56:46,879 --> 11:56:50,799
button and register here we're going to
13455
11:56:48,879 --> 11:56:53,040
nuke this screen remove it completely
13456
11:56:50,800 --> 11:56:55,840
from the screen and replace it by this
13457
11:56:53,040 --> 11:56:57,680
new widget that we're returning okay so
13458
11:56:55,839 --> 11:57:00,559
let's go to our login view in this
13459
11:56:57,680 --> 11:57:04,239
button here into the login view and
13460
11:57:00,559 --> 11:57:06,799
sorry in the not registered yet button
13461
11:57:08,559 --> 11:57:15,360
and remove until here push and remove
13462
11:57:11,360 --> 11:57:18,480
until push named and remove until
13463
11:57:15,360 --> 11:57:21,520
and in here now we need to display our
13464
11:57:18,480 --> 11:57:24,480
register route and we refer to that
13465
11:57:26,000 --> 11:57:32,720
let's go and fix that now so we say here
13466
11:57:34,319 --> 11:57:39,360
put false there as it is and you can see
13467
11:57:37,040 --> 11:57:41,680
you can get documentation about this and
13468
11:57:39,360 --> 11:57:44,080
there's a predicate here that returns
13469
11:57:41,680 --> 11:57:45,519
returns true or false and it says push
13470
11:57:44,080 --> 11:57:46,880
the route with the given name onto the
13471
11:57:45,519 --> 11:57:48,799
navigator and then remove all the
13472
11:57:46,879 --> 11:57:50,319
previous routes until the predicate
13473
11:57:50,319 --> 11:57:53,680
and at the moment we're just saying
13474
11:57:51,595 --> 11:57:55,839
return false meaning return remove
13475
11:57:53,680 --> 11:57:57,436
everything from the route and just go to
13476
11:57:55,839 --> 11:57:59,435
the register view so just leave this as
13477
11:57:59,436 --> 11:58:04,319
and this is actually going to cause
13478
11:58:02,000 --> 11:58:06,879
a problem and you will see that soon i'm
13479
11:58:04,319 --> 11:58:08,959
going to hot restart just in case and we
13480
11:58:08,959 --> 11:58:14,400
and i'm going to press the not
13481
11:58:11,360 --> 11:58:16,480
registered button here and boom and you
13482
11:58:16,480 --> 11:58:19,436
that's actually great that we're getting
13483
11:58:17,839 --> 11:58:21,435
this error this is exactly what i what
13484
11:58:21,436 --> 11:58:25,756
what is happening here is that we're
13485
11:58:23,436 --> 11:58:26,720
removing everything that's on the screen
13486
11:58:26,720 --> 11:58:31,360
pushing around to the screen that has no
13487
11:58:29,275 --> 11:58:33,519
scaffold so this is the problem that you
13488
11:58:31,360 --> 11:58:35,520
can see on the screen that yeah i can't
13489
11:58:33,519 --> 11:58:37,595
just display a column on the screen
13490
11:58:35,519 --> 11:58:40,479
without anything around it so we need
13491
11:58:40,480 --> 11:58:44,720
and that is what this caption also is
13492
11:58:43,116 --> 11:58:47,276
saying at the bottom left of the screen
13493
11:58:47,275 --> 11:58:52,400
i'll check some items in my um
13494
11:58:52,400 --> 11:58:58,080
so as the next thing what we need to do
13495
11:58:54,559 --> 11:59:00,239
now is to go to our register view
13496
11:58:58,080 --> 11:59:02,400
which is what we're pushing here and
13497
11:59:00,239 --> 11:59:05,275
make sure that our register view now has
13498
11:59:02,400 --> 11:59:06,959
all of a sudden a scaffold all right so
13499
11:59:06,959 --> 11:59:12,000
lib here and register view i'm gonna
13500
11:59:09,436 --> 11:59:14,319
remove this project explorer here at the
13501
11:59:12,000 --> 11:59:16,959
moment we're returning a column what i'm
13502
11:59:14,319 --> 11:59:18,879
gonna do is gonna command click on mac
13503
11:59:16,959 --> 11:59:21,040
or control click on linux and windows
13504
11:59:21,040 --> 11:59:24,959
widget and then call this widget
13505
11:59:28,959 --> 11:59:35,595
and for the app bar create a new app bar
13506
11:59:32,480 --> 11:59:38,800
and for its title say text and this is
13507
11:59:35,595 --> 11:59:40,399
the register view or just say register
13508
11:59:38,800 --> 11:59:41,756
with constants okay we're just gonna
13509
11:59:40,400 --> 11:59:43,916
leave it like that i'm just gonna double
13510
11:59:41,756 --> 11:59:46,639
check in my notes to make sure that's
13511
11:59:43,915 --> 11:59:49,360
what i had intended for the register
13512
11:59:46,639 --> 11:59:50,879
view to actually be called yes i can see
13513
11:59:49,360 --> 11:59:53,436
that it was called register as well
13514
11:59:54,639 --> 11:59:58,879
we have that now and you can see
13515
11:59:56,959 --> 12:00:01,756
now we're in the register view and there
13516
11:59:58,879 --> 12:00:04,079
is no error i'm gonna do a hot restart
13517
12:00:01,756 --> 12:00:06,559
and we go here again and now i'm gonna
13518
12:00:04,080 --> 12:00:09,756
press the not registered yet button and
13519
12:00:06,559 --> 12:00:10,639
you can see we are going to the register
13520
12:00:12,639 --> 12:00:19,040
so now we have a good connection between
13521
12:00:15,756 --> 12:00:21,680
the login view to the register view
13522
12:00:19,040 --> 12:00:23,436
but there is no connection backwards
13523
12:00:21,680 --> 12:00:26,559
there's no connection from the register
13524
12:00:23,436 --> 12:00:30,239
view to the login view and that's
13525
12:00:26,559 --> 12:00:32,479
exactly what we're going to do now
13526
12:00:32,480 --> 12:00:36,319
i'm going to take some items in my notes
13527
12:00:41,360 --> 12:00:46,720
in the login view that i'm going to hot
13528
12:00:43,275 --> 12:00:48,559
restart so you just uh remember you can
13529
12:00:46,720 --> 12:00:51,360
be reminded of what we did we had a
13530
12:00:48,559 --> 12:00:53,360
login view as our login button and we
13531
12:00:51,360 --> 12:00:55,040
added a new item to go from login to
13532
12:00:53,360 --> 12:00:57,199
register but also we want to make sure
13533
12:00:55,040 --> 12:00:59,436
that if you are already registered and
13534
12:00:57,199 --> 12:01:01,519
you ended up on the screen then you can
13535
12:00:59,436 --> 12:01:03,596
go back to the login view okay so let's
13536
12:01:01,519 --> 12:01:05,519
do something similar here in our
13537
12:01:06,319 --> 12:01:10,639
at the end of the register button here
13538
12:01:08,639 --> 12:01:11,915
let's create a new one and we say text
13539
12:01:11,915 --> 12:01:16,319
and uh on crest gonna get help from
13540
12:01:14,559 --> 12:01:18,559
visual studio code to create that
13541
12:01:16,319 --> 12:01:19,915
function signature and then i'm going to
13542
12:01:27,915 --> 12:01:36,159
log in here like this okay as a constant
13543
12:01:34,480 --> 12:01:37,840
and i comma here so we get the
13544
12:01:36,160 --> 12:01:40,560
formatting in place and now you can see
13545
12:01:37,839 --> 12:01:42,000
the register view also has a button that
13546
12:01:40,559 --> 12:01:45,519
says if you're already registered then
13547
12:01:42,000 --> 12:01:49,199
log in here and the login view has
13548
12:01:45,519 --> 12:01:50,799
not registered yet register here so
13549
12:01:49,199 --> 12:01:52,879
now we have to program this and as you
13550
12:01:50,800 --> 12:01:55,276
saw in the login view we had this
13551
12:01:52,879 --> 12:01:57,680
functionality navigator of push name
13552
12:01:55,275 --> 12:01:59,436
blah blah let's copy that functionality
13553
12:01:57,680 --> 12:02:00,800
from the login view and bring it into
13554
12:02:00,800 --> 12:02:05,520
under already registered button there
13555
12:02:03,595 --> 12:02:07,435
and instead of going to registered main
13556
12:02:05,519 --> 12:02:09,115
route we're going to go to the login
13557
12:02:10,080 --> 12:02:13,916
hot hot uh hot reload you don't have to
13558
12:02:13,915 --> 12:02:17,360
i'm gonna press this button
13559
12:02:15,595 --> 12:02:19,275
and actually this is really great and
13560
12:02:26,800 --> 12:02:31,520
so i've talked about that i'm going to
13561
12:02:28,239 --> 12:02:33,360
just take some items um in the
13562
12:02:31,519 --> 12:02:35,519
in my notes to make sure that i've
13563
12:02:33,360 --> 12:02:36,239
covered all the grounds that i prepared
13564
12:02:36,239 --> 12:02:40,079
covering basically so you can see this
13565
12:02:38,400 --> 12:02:42,400
is the exact same error that we had in
13566
12:02:42,400 --> 12:02:47,040
or in the previous situation that our uh
13567
12:02:45,199 --> 12:02:49,199
register view didn't have a scaffold
13568
12:02:47,040 --> 12:02:50,400
because we went from login view and to
13569
12:02:49,199 --> 12:02:51,595
register view and then register we
13570
12:02:50,400 --> 12:02:53,200
didn't have scaffolds so we created a
13571
12:02:53,199 --> 12:02:56,319
if you remember okay but if you go to
13572
12:02:55,040 --> 12:02:58,639
the login view you can see the login
13573
12:02:56,319 --> 12:03:00,319
view still returns a column and the way
13574
12:02:58,639 --> 12:03:03,040
i mean the reason this has been working
13575
12:03:00,319 --> 12:03:05,595
so far is that because our home page had
13576
12:03:03,040 --> 12:03:08,080
a scaffold do you remember here homepage
13577
12:03:05,595 --> 12:03:09,595
had a scaffold and the contents of login
13578
12:03:09,595 --> 12:03:15,040
so far just been injected into the body
13579
12:03:13,116 --> 12:03:17,200
of our home page and that's the reason
13580
12:03:15,040 --> 12:03:19,595
if you hot restart your application you
13581
12:03:17,199 --> 12:03:21,275
come to this beautiful home screen it
13582
12:03:19,595 --> 12:03:24,319
says home and then you have the login
13583
12:03:27,040 --> 12:03:30,080
if you remember from the previous
13584
12:03:28,160 --> 12:03:31,680
chapter we removed the scaffold from
13585
12:03:30,080 --> 12:03:33,276
their login and their register and now
13586
12:03:31,680 --> 12:03:35,116
we're putting them back but i kind of
13587
12:03:33,275 --> 12:03:37,519
want you to understand the reasoning
13588
12:03:35,116 --> 12:03:38,959
behind why i'm doing things i don't want
13589
12:03:37,519 --> 12:03:40,719
you to think that everything is perfect
13590
12:03:38,959 --> 12:03:42,400
from the beginning because for me at
13591
12:03:40,720 --> 12:03:44,959
least when things are done perfectly in
13592
12:03:42,400 --> 12:03:47,200
the beginning i always question like
13593
12:03:44,959 --> 12:03:48,879
what if this thing wasn't there and i'm
13594
12:03:47,199 --> 12:03:50,239
just trying to make sure that we remedy
13595
12:03:48,879 --> 12:03:52,079
these things so you go through the
13596
12:03:50,239 --> 12:03:54,239
entire journey you see what's wrong and
13597
12:03:52,080 --> 12:03:56,639
how we can fix it instead of just
13598
12:03:54,239 --> 12:03:58,559
me presenting to you the exact right way
13599
12:04:00,000 --> 12:04:03,595
let's go to our login view and make sure
13600
12:04:02,239 --> 12:04:06,159
we do the same thing that we did with
13601
12:04:09,040 --> 12:04:14,559
so let's go in here and add a scaffold
13602
12:04:12,639 --> 12:04:17,436
so i'm going to write i'm going to click
13603
12:04:14,559 --> 12:04:18,959
on it sorry i'm going to command
13604
12:04:17,436 --> 12:04:21,596
and we're going to press command and dot
13605
12:04:18,959 --> 12:04:24,319
on it on mac or control dot on linux and
13606
12:04:21,595 --> 12:04:26,799
windows and you say wrap with widget and
13607
12:04:24,319 --> 12:04:28,559
just say your widget is called scaffold
13608
12:04:26,800 --> 12:04:30,960
scaffold unfortunately doesn't have a
13609
12:04:28,559 --> 12:04:33,519
child parameter so it has a body
13610
12:04:30,959 --> 12:04:35,756
so change that parameter to body
13611
12:04:33,519 --> 12:04:37,755
and let's create an app bar for it then
13612
12:04:37,756 --> 12:04:44,720
and it has a title and we say const text
13613
12:04:41,275 --> 12:04:47,275
and in here we just say login
13614
12:04:49,040 --> 12:04:53,520
as you can see i mean we've now added
13615
12:04:50,559 --> 12:04:55,040
the scaffold and as the top as the
13616
12:04:53,519 --> 12:04:56,799
caption here is telling you it says
13617
12:04:55,040 --> 12:04:58,959
about login view is being embedded into
13618
12:04:58,959 --> 12:05:04,080
so now what we need to do is to go to
13619
12:05:04,080 --> 12:05:10,160
section which is we need to remove now
13620
12:05:06,879 --> 12:05:12,719
the scaffold from our main dart or from
13621
12:05:13,519 --> 12:05:18,719
right now home page is our login view is
13622
12:05:16,319 --> 12:05:21,275
being embedded into home page but that
13623
12:05:22,000 --> 12:05:26,800
we can't have login view with its own
13624
12:05:24,000 --> 12:05:29,360
scaffold being embedded inside a home
13625
12:05:26,800 --> 12:05:31,436
page that already has a scaffold so
13626
12:05:29,360 --> 12:05:34,879
uh what we need to do is to remove the
13627
12:05:31,436 --> 12:05:36,400
scaffold from our homepage uh let's see
13628
12:05:34,879 --> 12:05:38,559
if we can do that and it doesn't seem
13629
12:05:36,400 --> 12:05:40,319
like it's working so i'm gonna go
13630
12:05:40,319 --> 12:05:43,915
say that i'm gonna grab the future
13631
12:05:42,160 --> 12:05:44,960
builder okay and this is what you need
13632
12:05:44,959 --> 12:05:48,720
grab the entire future builder and
13633
12:05:47,040 --> 12:05:51,275
instead of returning the scaffold just
13634
12:05:48,720 --> 12:05:53,916
return your future builder just like i'm
13635
12:05:58,800 --> 12:06:04,000
there's a lot of information and also
13636
12:06:04,000 --> 12:06:09,116
verify email view also has a scaffold
13637
12:06:07,040 --> 12:06:10,879
because this is what we need right now
13638
12:06:09,116 --> 12:06:13,040
we need all our views to have a scaffold
13639
12:06:13,040 --> 12:06:18,160
embed our verify email views columns as
13640
12:06:18,959 --> 12:06:23,680
wrap with widget and let's say scaffold
13641
12:06:23,680 --> 12:06:28,319
scaffold remember there is a body and
13642
12:06:25,915 --> 12:06:30,479
then we say app bar is an app bar a
13643
12:06:30,480 --> 12:06:35,116
text and we say verify email something
13644
12:06:35,116 --> 12:06:39,436
good now if i command s in order to save
13645
12:06:38,080 --> 12:06:40,560
all these changes we're gonna get an
13646
12:06:43,436 --> 12:06:48,000
which we didn't and that's also okay
13647
12:06:45,915 --> 12:06:49,915
it's probably because we actually fixed
13648
12:06:48,000 --> 12:06:53,436
home page so it doesn't have a scaffold
13649
12:06:49,915 --> 12:06:55,595
that's why we're not getting the error
13650
12:06:55,595 --> 12:06:59,040
that is really good i've also explained
13651
12:06:59,040 --> 12:07:01,840
so let's just make sure that the
13652
12:07:00,239 --> 12:07:03,595
connection is working between these two
13653
12:07:03,595 --> 12:07:07,756
login view is there you can see there is
13654
12:07:05,275 --> 12:07:09,756
no home page any anymore displayed here
13655
12:07:07,756 --> 12:07:12,319
if you remember from before this
13656
12:07:09,756 --> 12:07:14,239
refactoring then when we sh when we
13657
12:07:12,319 --> 12:07:16,159
showed the login view then there was the
13658
12:07:14,239 --> 12:07:18,639
home pages app bar displayed on the
13659
12:07:16,160 --> 12:07:20,960
screen but home page right now is just a
13660
12:07:18,639 --> 12:07:22,800
future builder that returns other things
13661
12:07:20,959 --> 12:07:23,680
such as a text of loading or the login
13662
12:07:23,680 --> 12:07:28,720
and also here i noticed that instead of
13663
12:07:26,080 --> 12:07:32,080
logging loading what we could do is to
13664
12:07:28,720 --> 12:07:34,000
display a circular progress indicator
13665
12:07:32,080 --> 12:07:35,840
this is a great widget if you're if
13666
12:07:34,000 --> 12:07:38,639
you're just doing some sort of a loading
13667
12:07:35,839 --> 12:07:40,719
that may not immediately have an end so
13668
12:07:38,639 --> 12:07:42,720
what circular progress indicator does it
13669
12:07:40,720 --> 12:07:45,275
just shows like a loading indicator we
13670
12:07:42,720 --> 12:07:46,800
could actually comment all of this code
13671
12:07:45,275 --> 12:07:49,040
out and just return the circular
13672
12:07:46,800 --> 12:07:51,116
progress indicator and comment the
13673
12:07:49,040 --> 12:07:52,879
switch out as well and then press
13674
12:07:51,116 --> 12:07:54,880
command s so you actually see how it
13675
12:07:52,879 --> 12:07:56,799
looks like it's ginormous at the moment
13676
12:07:54,879 --> 12:07:59,435
because there's no scaffold around it
13677
12:07:56,800 --> 12:08:00,880
but if you had scaffold everything put
13678
12:07:59,436 --> 12:08:02,400
in place then you would see the circle
13679
12:08:00,879 --> 12:08:04,079
progress indicator actually displayed
13680
12:08:05,756 --> 12:08:11,200
command s so we see the log loadings
13681
12:08:08,080 --> 12:08:13,360
sorry the login screen or the login view
13682
12:08:11,199 --> 12:08:14,839
and the connection between those screens
13683
12:08:14,839 --> 12:08:19,679
well the next thing we need to do is to
13684
12:08:18,000 --> 12:08:21,915
at the moment you see we have our login
13685
12:08:19,680 --> 12:08:24,959
view and the register view so they're in
13686
12:08:21,915 --> 12:08:26,799
their own files but in the main guard
13687
12:08:24,959 --> 12:08:28,479
file we've kind of forgotten or maybe
13688
12:08:26,800 --> 12:08:30,800
not forgotten we just haven't had the
13689
12:08:28,480 --> 12:08:33,596
time to do that we have the verify email
13690
12:08:30,800 --> 12:08:36,000
view still rightly like it's just
13691
12:08:33,595 --> 12:08:37,595
displayed or it's coded in the main dart
13692
12:08:36,000 --> 12:08:40,000
file so what we need to do is just to
13693
12:08:37,595 --> 12:08:43,275
create an an own file for it and we call
13694
12:08:40,000 --> 12:08:45,519
it verify email view okay so go to views
13695
12:08:43,275 --> 12:08:46,319
here and right click on it new file and
13696
12:08:52,319 --> 12:08:56,000
and grab the code from verify email view
13697
12:08:57,756 --> 12:09:00,880
or cut it basically and just place it
13698
12:09:00,879 --> 12:09:06,239
and make sure all the imports are in
13699
12:09:03,756 --> 12:09:09,275
place i've already explained in previous
13700
12:09:06,239 --> 12:09:11,436
chapters how we need to fix imports
13701
12:09:09,275 --> 12:09:13,915
so i'm not going to go into so much
13702
12:09:11,436 --> 12:09:15,756
detail about how imports work and how we
13703
12:09:13,915 --> 12:09:17,435
should do that because i think if you've
13704
12:09:15,756 --> 12:09:19,520
already gone through the chapters
13705
12:09:17,436 --> 12:09:21,360
chronologically then this is like
13706
12:09:19,519 --> 12:09:23,275
obvious for you how to fix it so it kind
13707
12:09:21,360 --> 12:09:25,116
of feels like if i try to over explain
13708
12:09:23,275 --> 12:09:26,799
all these things over and over again the
13709
12:09:25,116 --> 12:09:28,240
people who are watching this course
13710
12:09:26,800 --> 12:09:30,080
chronologically from the beginning and
13711
12:09:28,239 --> 12:09:31,915
they're kind of gonna get bored so in
13712
12:09:30,080 --> 12:09:33,916
the interest of not boring actual people
13713
12:09:31,915 --> 12:09:36,319
who are watching things i'm not gonna
13714
12:09:33,915 --> 12:09:38,639
over explain so there we go that is
13715
12:09:36,319 --> 12:09:40,720
fixed and also let's make sure that we
13716
12:09:38,639 --> 12:09:42,879
import firebase off as well so that
13717
12:09:45,680 --> 12:09:50,000
we do a hot restart as well just make
13718
12:09:47,595 --> 12:09:52,639
sure everything is working as expected
13719
12:09:52,839 --> 12:09:58,319
so what we need to do now also in
13720
12:09:59,680 --> 12:10:06,000
following through with the plan of
13721
12:10:03,595 --> 12:10:07,839
being a good software developer
13722
12:10:06,000 --> 12:10:10,160
what we talked about not in the previous
13723
12:10:07,839 --> 12:10:12,639
chapter but i think it was in chapter
13724
12:10:10,160 --> 12:10:14,560
let's see it was in chapter 15 i believe
13725
12:10:12,639 --> 12:10:16,239
where we talked about git and github now
13726
12:10:14,559 --> 12:10:19,839
we've done a lot of code things are
13727
12:10:16,239 --> 12:10:22,799
working great let's commit our code okay
13728
12:10:19,839 --> 12:10:24,639
so as we had if i bring up the terminal
13729
12:10:22,800 --> 12:10:26,319
here i'm going to do this so you see a
13730
12:10:24,639 --> 12:10:28,319
little bit better i'm going to bring up
13731
12:10:28,319 --> 12:10:32,639
and let's go to our terminal here i can
13732
12:10:30,319 --> 12:10:34,000
see scrcpy is running in this terminal
13733
12:10:32,639 --> 12:10:34,879
so i'm going to create a new terminal
13734
12:10:34,879 --> 12:10:39,199
and i'm going to just say be it log and
13735
12:10:37,436 --> 12:10:41,840
you can see we had the initial commit
13736
12:10:39,199 --> 12:10:43,680
and that was step one all right so
13737
12:10:41,839 --> 12:10:46,399
because we tagged it as a step one you
13738
12:10:43,680 --> 12:10:48,559
see here so what we do let's just get
13739
12:10:46,400 --> 12:10:50,880
git status and we see that we've done a
13740
12:10:48,559 --> 12:10:53,360
lot of work i'm gonna get add all the
13741
12:10:50,879 --> 12:10:54,959
files to the staging area remember from
13742
12:10:54,959 --> 12:10:59,680
and then let me also make this a little
13743
12:10:57,360 --> 12:11:00,559
bit bigger so you can see it better
13744
12:11:00,559 --> 12:11:07,360
okay then i'm gonna commit and i'm gonna
13745
12:11:02,559 --> 12:11:07,360
say git commit step two like this
13746
12:11:11,199 --> 12:11:17,519
and also actually before we do that i
13747
12:11:13,756 --> 12:11:19,436
believe we've missed a few things
13748
12:11:17,519 --> 12:11:21,359
then i just look a little bit in my
13749
12:11:19,436 --> 12:11:23,756
notes just to make sure that i'm not
13750
12:11:21,360 --> 12:11:27,116
missing things before we continue
13751
12:11:28,000 --> 12:11:31,519
yeah so what we need to actually there's
13752
12:11:29,436 --> 12:11:33,596
one thing we missed here at the moment
13753
12:11:31,519 --> 12:11:35,115
what we're doing is saying that okay
13754
12:11:33,595 --> 12:11:36,799
just go to the login view but one thing
13755
12:11:35,116 --> 12:11:40,319
that we've missed is to ensure that we
13756
12:11:36,800 --> 12:11:42,240
go to the correct correct view okay so
13757
12:11:42,239 --> 12:11:47,519
we say we first get the current user so
13758
12:11:53,116 --> 12:11:56,880
and we put an else statement here as
13759
12:11:58,559 --> 12:12:03,756
if the user is not null then we
13760
12:12:11,275 --> 12:12:16,799
and we just say print email is verified
13761
12:12:20,239 --> 12:12:23,436
email is verified something like this
13762
12:12:23,436 --> 12:12:27,040
let's go back to the print so
13763
12:12:25,756 --> 12:12:29,520
before we actually do all this maybe i
13764
12:12:27,040 --> 12:12:31,915
should explain why we're doing this so
13765
12:12:29,519 --> 12:12:33,595
at the moment or before we started with
13766
12:12:33,595 --> 12:12:36,479
whenever the application was running we
13767
12:12:35,040 --> 12:12:38,559
were just going directly to the login
13768
12:12:36,480 --> 12:12:39,916
screen but what we need to do now is to
13769
12:12:38,559 --> 12:12:41,519
now that we have three screens we have
13770
12:12:39,915 --> 12:12:43,680
the login view register view and also
13771
12:12:43,680 --> 12:12:46,480
is that what we call it verify email
13772
12:12:46,480 --> 12:12:50,560
we need to make sure that we're actually
13773
12:12:48,559 --> 12:12:52,959
accommodating these various conditions
13774
12:12:50,559 --> 12:12:54,720
into returning the the correct widget so
13775
12:12:52,959 --> 12:12:56,400
here we're saying that if the user's
13776
12:13:00,879 --> 12:13:06,639
and we can actually return maybe even a
13777
12:13:08,239 --> 12:13:14,400
and we'll return something so yeah let's
13778
12:13:10,879 --> 12:13:17,275
do that so we will return text
13779
12:13:17,275 --> 12:13:20,720
if the email is verified we just say
13780
12:13:18,959 --> 12:13:22,799
that your email is verified but the user
13781
12:13:20,720 --> 12:13:25,200
doesn't see that if the email is not
13782
12:13:22,800 --> 12:13:27,596
verified we will we will basically
13783
12:13:31,756 --> 12:13:36,959
that's us basically saying that yeah you
13784
12:13:41,040 --> 12:13:46,559
if the user is null then we send you to
13785
12:13:44,239 --> 12:13:48,720
the login view so let's go in here in
13786
12:13:46,559 --> 12:13:50,079
the ill statement we say return login
13787
12:13:56,879 --> 12:14:01,360
that should do it to be honest with you
13788
12:13:58,879 --> 12:14:03,115
return cons return log so we can remove
13789
12:14:07,756 --> 12:14:13,680
upon firebase initialization being done
13790
12:14:13,680 --> 12:14:17,360
check for the current user if there is a
13791
12:14:15,680 --> 12:14:19,756
user we're gonna check if the email is
13792
12:14:17,360 --> 12:14:21,520
verified if email is verified right now
13793
12:14:19,756 --> 12:14:23,520
we're just going to say print email is
13794
12:14:21,519 --> 12:14:25,435
verified and since we're not returning
13795
12:14:23,519 --> 12:14:27,595
anything in here the code is going to
13796
12:14:25,436 --> 12:14:30,239
fall through to line 48 here which in
13797
12:14:27,595 --> 12:14:32,879
turn then returns just a text done okay
13798
12:14:30,239 --> 12:14:34,400
so if you have a logged in user sorry if
13799
12:14:34,400 --> 12:14:37,200
logging into the application and the
13800
12:14:35,595 --> 12:14:39,915
email is verified all the user is going
13801
12:14:37,199 --> 12:14:41,839
to see is just a text done all right
13802
12:14:39,915 --> 12:14:43,755
but if you have a user in the
13803
12:14:41,839 --> 12:14:44,959
application whose email is not verified
13804
12:14:43,756 --> 12:14:46,160
that user is going to see the verify
13805
12:14:46,160 --> 12:14:50,960
if you don't have a user with firebase
13806
12:14:48,400 --> 12:14:52,720
so that user is not logged in then we're
13807
12:14:50,959 --> 12:14:54,239
going to display the login view all
13808
12:14:54,239 --> 12:14:58,559
a lot of information i understand this
13809
12:14:55,839 --> 12:15:00,799
may be a little bit frustrating so
13810
12:14:58,559 --> 12:15:03,275
so now i'm going to hot restart and what
13811
12:15:00,800 --> 12:15:05,756
you can see here is just a very ugly
13812
12:15:03,275 --> 12:15:07,360
text done displayed on the screen this
13813
12:15:05,756 --> 12:15:09,595
means the current user in the
13814
12:15:07,360 --> 12:15:12,319
application is logged in and the email
13815
12:15:12,319 --> 12:15:15,595
it is very ugly i understand but you
13816
12:15:14,080 --> 12:15:17,840
need to also understand the reason why
13817
12:15:15,595 --> 12:15:20,239
this is ugly at the moment and that is
13818
12:15:17,839 --> 12:15:22,479
what happens if you do not tell flutter
13819
12:15:20,239 --> 12:15:25,839
how things need to be rendered and
13820
12:15:22,480 --> 12:15:28,400
since our home page has a future builder
13821
12:15:25,839 --> 12:15:30,559
and nothing else surrounding it there is
13822
12:15:28,400 --> 12:15:33,360
no scaffold there's nothing it's just a
13823
12:15:30,559 --> 12:15:35,040
text widget that's flutter telling you
13824
12:15:33,360 --> 12:15:36,559
okay i don't even know how to render
13825
12:15:35,040 --> 12:15:38,239
things anymore i don't know what theme
13826
12:15:36,559 --> 12:15:40,159
you're using i don't know the font size
13827
12:15:38,239 --> 12:15:41,519
i don't know the default font color so
13828
12:15:40,160 --> 12:15:43,840
that's what happens if you don't
13829
12:15:41,519 --> 12:15:44,719
surround your widgets with a scaffold or
13830
12:15:44,720 --> 12:15:49,916
material widget that knows how to render
13831
12:15:50,080 --> 12:15:55,520
wow a lot of information again um but i
13832
12:15:52,720 --> 12:15:57,756
hope you're sticking with me here
13833
12:15:55,519 --> 12:16:00,719
now that we've done that we can go and
13834
12:15:57,756 --> 12:16:03,436
commit so let's have it look at our logs
13835
12:16:00,720 --> 12:16:05,275
and look at the status i'm gonna change
13836
12:16:03,436 --> 12:16:07,040
the structure or the layout of the
13837
12:16:07,040 --> 12:16:12,720
and now now we see that after we did git
13838
12:16:10,160 --> 12:16:15,840
add we've also changed the main dart
13839
12:16:12,720 --> 12:16:18,400
file with these changes so i'm gonna get
13840
12:16:15,839 --> 12:16:22,879
at that as well all those changes and
13841
12:16:18,400 --> 12:16:25,116
i'm gonna say git commit step two okay
13842
12:16:22,879 --> 12:16:29,115
so now that's gonna be committed and
13843
12:16:25,116 --> 12:16:29,116
we're also going to push the commit
13844
12:16:29,199 --> 12:16:33,039
and additionally we need to tag it okay
13845
12:16:31,436 --> 12:16:34,160
because if you remember if you look at
13846
12:16:34,160 --> 12:16:37,200
the first commit that we did here it was
13847
12:16:38,559 --> 12:16:43,360
now we've committed step two but we
13848
12:16:40,639 --> 12:16:45,436
haven't tagged it so let's go tag it
13849
12:16:48,160 --> 12:16:51,276
and then you need to push your tags with
13850
12:16:52,839 --> 12:16:59,595
tags and that creates the step two tag
13851
12:16:59,595 --> 12:17:02,879
i understand that was a lot of
13852
12:17:01,116 --> 12:17:04,720
information but i hope you could stick
13853
12:17:02,879 --> 12:17:07,275
with me and go through all these steps
13854
12:17:04,720 --> 12:17:10,400
so that we are ready basically for the
13855
12:17:10,559 --> 12:17:14,639
all right and also before continuing
13856
12:17:12,559 --> 12:17:16,559
with the next chapter just ensure that
13857
12:17:14,639 --> 12:17:18,400
you're logged in because in the next
13858
12:17:16,559 --> 12:17:20,879
chapter we're actually going to work on
13859
12:17:20,879 --> 12:17:25,435
i can see also i've planned a lot of
13860
12:17:23,116 --> 12:17:27,596
information in that chapter for you so
13861
12:17:25,436 --> 12:17:28,560
there's lots and lots and lots of things
13862
12:17:28,559 --> 12:17:32,559
so it's a very exciting chapter actually
13863
12:17:30,480 --> 12:17:34,160
the next chapter and but before you
13864
12:17:32,559 --> 12:17:36,879
continue with that just ensure that you
13865
12:17:34,160 --> 12:17:38,240
go to the login screen and ensure that
13866
12:17:36,879 --> 12:17:41,199
you log in with the user and you just
13867
12:17:38,239 --> 12:17:42,079
see this ugly done button here okay
13868
12:17:42,080 --> 12:17:46,400
as i mentioned in the next chapter we're
13869
12:17:44,000 --> 12:17:49,275
going to talk about displaying a simple
13870
12:17:46,400 --> 12:17:52,239
interface to the users who are logged in
13871
12:17:49,275 --> 12:17:54,479
and also allow those logged in users to
13872
12:17:54,480 --> 12:17:59,436
get some coffee tea if you want to or
13873
12:17:56,639 --> 12:18:01,436
whatever refreshments you want and i'll
13874
12:18:01,436 --> 12:18:04,880
hello and welcome to chapter 18 of this
13875
12:18:04,879 --> 12:18:10,079
in previous chapters we've talked a lot
13876
12:18:11,756 --> 12:18:15,520
and and we've also talked about
13877
12:18:15,519 --> 12:18:21,039
we now have pretty much like our login
13878
12:18:21,040 --> 12:18:24,480
well i don't want to say we've got them
13879
12:18:24,480 --> 12:18:28,240
we have a basic login and a basic
13880
12:18:29,116 --> 12:18:32,480
if you remember from the previous
13881
12:18:30,720 --> 12:18:33,840
chapter we kind of left the application
13882
12:18:33,839 --> 12:18:38,000
if the application detected that you
13883
12:18:38,000 --> 12:18:43,040
you were a logged in user and that you
13884
12:18:40,400 --> 12:18:44,840
had a verified email address then we
13885
12:18:44,839 --> 12:18:50,799
dirty done text on the screen and i can
13886
12:18:48,080 --> 12:18:52,319
bring bring the screen up on my android
13887
12:18:52,319 --> 12:18:54,639
and you see we kind of left it in this
13888
12:18:54,639 --> 12:18:57,595
and i'll bring the code up as well so
13889
12:18:57,595 --> 12:19:02,879
reminded of what we were doing so we
13890
12:19:00,720 --> 12:19:05,840
left the application in this state that
13891
12:19:02,879 --> 12:19:08,479
if the user wasn't null meaning that the
13892
12:19:08,480 --> 12:19:13,116
his or her email address was actually
13893
12:19:10,559 --> 12:19:15,115
verified we simply did a print statement
13894
12:19:15,116 --> 12:19:20,160
we left it like that meaning that
13895
12:19:22,959 --> 12:19:26,080
let me actually bring up the right
13896
12:19:26,080 --> 12:19:30,000
since the builder function of the future
13897
12:19:28,160 --> 12:19:32,480
builder requires that you return a
13898
12:19:30,000 --> 12:19:33,915
widget by moving your mouse over you can
13899
12:19:32,480 --> 12:19:36,640
actually see that it says required
13900
12:19:33,915 --> 12:19:38,399
widget you need to return a widget from
13901
12:19:38,400 --> 12:19:44,480
since it requires that what we did is
13902
12:19:40,639 --> 12:19:47,040
just we put a like a return cons text at
13903
12:19:44,480 --> 12:19:48,640
the end of all our if statements so if
13904
12:19:47,040 --> 12:19:50,800
none of these were present there we're
13905
12:19:50,800 --> 12:19:56,240
and since that was there and in this
13906
12:19:53,839 --> 12:19:57,519
user email verified we're not returning
13907
12:19:57,519 --> 12:20:03,039
then the code falls through to this line
13908
12:20:01,040 --> 12:20:04,559
meaning that if you're a logged in user
13909
12:20:03,040 --> 12:20:07,595
and you're verified then we're returning
13910
12:20:07,680 --> 12:20:12,959
so we need to kind of um now start
13911
12:20:10,959 --> 12:20:14,000
because you see okay before i say that
13912
12:20:15,275 --> 12:20:19,839
are have handled the email verification
13913
12:20:18,080 --> 12:20:21,360
view so if you're if you're a logged in
13914
12:20:19,839 --> 12:20:23,199
user but your email isn't verified we
13915
12:20:21,360 --> 12:20:24,480
displayed it verify email and if you're
13916
12:20:24,480 --> 12:20:28,319
registered meaning that like you don't
13917
12:20:25,915 --> 12:20:30,239
have a user then we show the login view
13918
12:20:28,319 --> 12:20:33,436
since we've got those down what we need
13919
12:20:30,239 --> 12:20:35,115
to do now is to work on the actual main
13920
12:20:33,436 --> 12:20:38,880
ui of our application because what you
13921
12:20:35,116 --> 12:20:40,639
can see here that says done this should
13922
12:20:38,879 --> 12:20:42,719
be the main ui of our application so
13923
12:20:40,639 --> 12:20:44,800
users who are logged in and their emails
13924
12:20:42,720 --> 12:20:47,840
are ready are verified should see the
13925
12:20:47,839 --> 12:20:52,319
in this chapter we're actually going to
13926
12:20:49,519 --> 12:20:55,680
work on the main ui of our application
13927
12:20:52,319 --> 12:20:58,319
and then allow the user to log out from
13928
12:20:55,680 --> 12:20:59,680
our application as well so i'm just
13929
12:20:58,319 --> 12:21:01,519
looking at my notes to ensure i'm
13930
12:20:59,680 --> 12:21:03,840
telling you all the stuff that i plan to
13931
12:21:04,400 --> 12:21:09,116
so without further ado maybe we could
13932
12:21:06,800 --> 12:21:11,436
actually get started with that so let's
13933
12:21:11,436 --> 12:21:17,116
main dart file here and create a new
13934
12:21:18,239 --> 12:21:21,680
i'm going to bring it up here
13935
12:21:21,680 --> 12:21:25,040
going to create a new stateful widget
13936
12:21:25,040 --> 12:21:28,879
and this notes you just imagine that it
13937
12:21:28,879 --> 12:21:32,079
it is the main ui of the application for
13938
12:21:32,080 --> 12:21:38,400
logged in okay so as i mentioned before
13939
12:21:35,275 --> 12:21:40,319
stf to create a stateful widget and then
13940
12:21:48,639 --> 12:21:53,436
let's see it doesn't even really have a
13941
12:21:51,116 --> 12:21:55,436
scaffold or anything so maybe that's
13942
12:21:53,436 --> 12:21:58,000
what we need to do i'm just gonna
13943
12:21:58,160 --> 12:22:03,040
so let's go create a scaffold and an app
13944
12:22:04,319 --> 12:22:08,800
we go in here into where we're returning
13945
12:22:06,959 --> 12:22:11,519
a container at the moment we just say we
13946
12:22:11,519 --> 12:22:17,359
and for our scaffold we want an app bar
13947
12:22:15,040 --> 12:22:18,400
and the app bar should just be an app
13948
12:22:24,480 --> 12:22:28,640
what should we call it i don't think
13949
12:22:26,480 --> 12:22:30,640
i've got notes for that to be honest
13950
12:22:28,639 --> 12:22:32,959
with you let's just call it your notes
13951
12:22:32,959 --> 12:22:36,479
i'm gonna actually go and have a look at
13952
12:22:40,800 --> 12:22:44,160
where i was actually preparing this
13953
12:22:42,160 --> 12:22:46,560
course for you and i can see i've
13954
12:22:44,160 --> 12:22:48,480
written main ui so let's just do that
13955
12:22:46,559 --> 12:22:51,839
let's just say main ui in here okay so
13956
12:22:56,160 --> 12:23:00,000
body is empty at the moment so there is
13957
12:22:58,400 --> 12:23:02,160
nobody and if you remember from previous
13958
12:23:00,000 --> 12:23:04,080
chapters when you return a scaffold and
13959
12:23:02,160 --> 12:23:06,000
an app bar all it does is that it
13960
12:23:04,080 --> 12:23:07,840
creates kind of like depending on your
13961
12:23:06,000 --> 12:23:11,595
theme but usually with the light theme
13962
12:23:07,839 --> 12:23:14,399
it creates a a bluish status bar and an
13963
12:23:11,595 --> 12:23:15,360
app bar with white text for the app bars
13964
12:23:15,360 --> 12:23:18,639
and the rest of the content of the
13965
12:23:16,959 --> 12:23:22,479
screen is just going to be white so it's
13966
12:23:18,639 --> 12:23:22,479
kind of like an empty container kind of
13967
12:23:33,275 --> 12:23:38,720
future builder here in our home page
13968
12:23:40,639 --> 12:23:44,400
we're going to remove that and now we're
13969
12:23:42,639 --> 12:23:46,319
going to get an error saying that well
13970
12:23:44,400 --> 12:23:49,200
the case should not complete normally
13971
12:23:46,319 --> 12:23:51,839
try adding break or return and that's
13972
12:23:49,199 --> 12:23:54,079
basically it's complaining in this
13973
12:23:51,839 --> 12:23:56,959
line of code here for me in line 41 it
13974
12:23:54,080 --> 12:23:58,720
may be another line of code for you
13975
12:23:56,959 --> 12:24:01,360
so it's saying that well one of the
13976
12:23:58,720 --> 12:24:03,756
cases of your your like the entire block
13977
12:24:01,360 --> 12:24:05,520
of code that you're placing in here it
13978
12:24:03,756 --> 12:24:07,116
doesn't always end with a return and
13979
12:24:05,519 --> 12:24:09,680
that's exactly right because in the case
13980
12:24:07,116 --> 12:24:11,116
of user being email verified we're not
13981
12:24:09,680 --> 12:24:12,400
returning a widget and what we're going
13982
12:24:11,116 --> 12:24:14,800
to do in here we're just going to say
13983
12:24:18,879 --> 12:24:25,199
all right um and i'm going to press
13984
12:24:21,199 --> 12:24:28,239
command s there and now we did a hot uh
13985
12:24:25,199 --> 12:24:30,159
reload and you can see the main ui of
13986
12:24:30,160 --> 12:24:33,520
and in my notes i can see here that
13987
12:24:32,000 --> 12:24:35,275
we're going to go and place a little
13988
12:24:40,639 --> 12:24:45,436
we're good to go for the body let's just
13989
12:24:48,959 --> 12:24:53,595
so now we can see the hello world
13990
12:24:53,595 --> 12:24:57,275
i can see i have a lot of notes to be
13991
12:24:55,595 --> 12:24:58,959
honest with you with this chapter so i'm
13992
12:24:57,275 --> 12:25:00,959
really making sure that i'm looking at
13993
12:24:58,959 --> 12:25:02,799
my notes while i'm giving you the
13994
12:25:00,959 --> 12:25:04,479
content to ensure that you're getting
13995
12:25:02,800 --> 12:25:06,480
all the information that i plan for you
13996
12:25:04,480 --> 12:25:08,560
to get so i apologize if i'm looking a
13997
12:25:08,559 --> 12:25:12,959
yeah it's just to deliver the best
13998
12:25:12,959 --> 12:25:17,595
okay so we've done that hello world
13999
12:25:17,595 --> 12:25:23,839
what we need to talk about is um
14000
12:25:21,756 --> 12:25:25,520
the app bar class and i've provided a
14001
12:25:27,360 --> 12:25:32,959
open on my screen and then bring to this
14002
12:25:30,639 --> 12:25:34,720
screen so you can also see it
14003
12:25:32,959 --> 12:25:36,959
increase the size a little bit and
14004
12:25:34,720 --> 12:25:40,080
perhaps also do this layout so you can
14005
12:25:36,959 --> 12:25:41,519
see it's um the caption as well
14006
12:25:41,519 --> 12:25:46,239
you can see for appbar the documentation
14007
12:25:43,680 --> 12:25:47,680
just says a material design app bar an
14008
12:25:46,239 --> 12:25:49,839
app bar consists of a toolbar and
14009
12:25:49,839 --> 12:25:54,559
all you need to do really or all you
14010
12:25:52,000 --> 12:25:56,400
need to know about an app bar is
14011
12:26:01,680 --> 12:26:06,160
various widgets i mean pretty much
14012
12:26:03,680 --> 12:26:09,595
everything in flutter is a widget so an
14013
12:26:09,595 --> 12:26:13,680
and an app bar consists of various
14014
12:26:13,680 --> 12:26:18,239
the default app bar allows you to
14015
12:26:15,756 --> 12:26:20,720
display a title as you can see here in
14016
12:26:18,239 --> 12:26:23,275
the title by default has its own styling
14017
12:26:20,720 --> 12:26:24,720
it means that it has its own left and
14018
12:26:24,720 --> 12:26:28,239
bottom margins so by default it's like
14019
12:26:26,559 --> 12:26:29,915
displayed vertically in the middle of
14020
12:26:28,239 --> 12:26:32,000
your app bar as you can see in the main
14021
12:26:33,595 --> 12:26:37,595
material component pretty much
14022
12:26:35,199 --> 12:26:38,799
everything you display on the screen has
14023
12:26:40,239 --> 12:26:45,040
an app bar has its own theme and it has
14024
12:26:45,040 --> 12:26:49,040
so what we're going to do the where
14025
12:26:47,275 --> 12:26:51,115
we're going to use the app bar in the
14026
12:26:51,116 --> 12:26:55,680
is not only to display a title but it's
14027
12:26:59,040 --> 12:27:04,800
to the far right that the user can click
14028
12:27:04,800 --> 12:27:09,116
in in our case tap on because there'll
14029
12:27:06,720 --> 12:27:11,200
be indirect users are going to run our
14030
12:27:09,116 --> 12:27:14,560
application on mobile devices so they're
14031
12:27:11,199 --> 12:27:16,719
going to tap and if we allowed the
14032
12:27:14,559 --> 12:27:18,559
our application to be run on desktops
14033
12:27:16,720 --> 12:27:20,480
then they'd be able to click and maybe
14034
12:27:18,559 --> 12:27:21,915
even tap on if they're running for for
14035
12:27:23,680 --> 12:27:28,160
what is it called surface book or
14036
12:27:33,360 --> 12:27:38,480
this is what an app bar is as is like
14037
12:27:36,400 --> 12:27:40,080
the gist of it and there's information
14038
12:27:38,480 --> 12:27:41,680
here in the documentation you can see
14039
12:27:40,080 --> 12:27:43,200
here it says there's a leading space and
14040
12:27:41,680 --> 12:27:45,116
then there's or you can actually put a
14041
12:27:43,199 --> 12:27:47,435
widget in the leading and then there's a
14042
12:27:45,116 --> 12:27:48,959
title and then some other actions and
14043
12:27:47,436 --> 12:27:53,596
these are the things we're actually
14044
12:27:48,959 --> 12:27:56,559
going to use actions in this um
14045
12:27:53,595 --> 12:27:57,915
in this section in this chapter of our
14046
12:27:57,915 --> 12:28:01,435
flutter course so you can see here for
14047
12:28:01,436 --> 12:28:07,436
code on how to configure an app bar with
14048
12:28:04,959 --> 12:28:09,595
some button you can see you can press
14049
12:28:07,436 --> 12:28:11,520
the button and then you get a snack bar
14050
12:28:11,519 --> 12:28:15,755
okay so keep this in mind you can have a
14051
12:28:14,160 --> 12:28:18,240
look at the documentation i really
14052
12:28:15,756 --> 12:28:21,200
actually suggest that you do that
14053
12:28:21,199 --> 12:28:24,399
and you can you can spend some time
14054
12:28:22,959 --> 12:28:25,680
reading through the documentation but i
14055
12:28:24,400 --> 12:28:27,436
don't think you need to get absorbed in
14056
12:28:25,680 --> 12:28:29,360
the documentation so much but just have
14057
12:28:27,436 --> 12:28:33,360
a look at the various parts of an app
14058
12:28:29,360 --> 12:28:33,360
bar and try it for yourself okay
14059
12:28:36,559 --> 12:28:41,040
i can see that i've told you about the
14060
12:28:48,400 --> 12:28:55,360
and now what i think we need to do
14061
12:28:51,839 --> 12:28:57,435
um is to talk about uh this print
14062
12:28:55,360 --> 12:28:58,639
statement and why we were getting an
14063
12:29:00,239 --> 12:29:04,479
if if i if i put a print here and if i
14064
12:29:06,720 --> 12:29:11,360
information here saying avoid print
14065
12:29:08,639 --> 12:29:13,116
calls in production code okay
14066
12:29:13,116 --> 12:29:17,040
before we move past this because you've
14067
12:29:15,275 --> 12:29:19,436
probably seen this quite a lot in this
14068
12:29:17,040 --> 12:29:21,680
course that i've placed print statements
14069
12:29:19,436 --> 12:29:24,160
and then we can like for instance if i
14070
12:29:21,680 --> 12:29:26,559
bring up the debug console and just do
14071
12:29:24,160 --> 12:29:27,916
command s on my mac or control so linux
14072
12:29:26,559 --> 12:29:29,040
and windows in order to hot reload
14073
12:29:29,040 --> 12:29:33,756
let's see actually email verify heart
14074
12:29:33,756 --> 12:29:38,080
oops see i can see that it crashed
14075
12:29:36,000 --> 12:29:41,519
that's okay so i'm gonna go and bring up
14076
12:29:42,559 --> 12:29:47,275
and these things do happen and that's
14077
12:29:44,400 --> 12:29:48,880
completely fine so and i'm gonna need to
14078
12:29:47,275 --> 12:29:50,639
run the application again because i
14079
12:29:48,879 --> 12:29:53,040
actually lost my connection with that
14080
12:29:50,639 --> 12:29:55,199
device but while that is doing its job
14081
12:29:53,040 --> 12:29:56,160
i'm gonna tell you also about
14082
12:29:59,915 --> 12:30:04,239
print is usually called a poor man's
14083
12:30:01,915 --> 12:30:05,435
debugger in that um if you're not a
14084
12:30:04,239 --> 12:30:06,879
software developer you probably don't
14085
12:30:05,436 --> 12:30:08,800
know about even debugging what that
14086
12:30:06,879 --> 12:30:10,559
means but what debugging is is it
14087
12:30:08,800 --> 12:30:11,756
essentially is is where there is a
14088
12:30:10,559 --> 12:30:13,756
problem in your source code but you
14089
12:30:11,756 --> 12:30:15,595
don't know really where so you try to
14090
12:30:13,756 --> 12:30:17,520
step through various lines of code in
14091
12:30:15,595 --> 12:30:18,959
your application and refine what the
14092
12:30:19,839 --> 12:30:24,000
um a lot of a lot of times when people
14093
12:30:22,000 --> 12:30:25,915
don't really either they don't have the
14094
12:30:24,000 --> 12:30:28,239
time to debug or they believe that the
14095
12:30:25,915 --> 12:30:29,915
debugger is just too slow they start
14096
12:30:28,239 --> 12:30:31,199
putting print statements in their
14097
12:30:31,199 --> 12:30:34,639
um by putting print statements in their
14098
12:30:32,959 --> 12:30:36,559
application they can kind of track where
14099
12:30:34,639 --> 12:30:38,800
they where the application is going
14100
12:30:36,559 --> 12:30:40,799
through the various lines of code and if
14101
12:30:38,800 --> 12:30:42,319
for instance they put a print statement
14102
12:30:40,800 --> 12:30:44,160
in a place of code where they didn't
14103
12:30:42,319 --> 12:30:45,839
expect the application to end up and
14104
12:30:44,160 --> 12:30:47,840
then they'd be like oh okay i ended up
14105
12:30:45,839 --> 12:30:50,479
in this code block i shouldn't have so
14106
12:30:47,839 --> 12:30:51,839
let me just check why i ended up here so
14107
12:30:50,480 --> 12:30:55,360
it's kind of called a poor amount
14108
12:30:51,839 --> 12:30:57,359
debugging because print is a piece of
14109
12:30:55,360 --> 12:30:59,840
code that you actually place in your
14110
12:30:57,360 --> 12:31:02,319
code so sometimes print isn't the
14111
12:31:02,319 --> 12:31:06,159
in banking applications for instance you
14112
12:31:04,000 --> 12:31:08,800
should be extremely careful what you
14113
12:31:06,160 --> 12:31:10,960
print because these things get logged
14114
12:31:08,800 --> 12:31:13,756
and you you may think well okay they get
14115
12:31:10,959 --> 12:31:15,199
logged on that phone uh what is the
14116
12:31:15,199 --> 12:31:19,595
the problem with logging things even if
14117
12:31:17,519 --> 12:31:21,839
it's on the phone is that you you must
14118
12:31:19,595 --> 12:31:23,839
know that the operating systems android
14119
12:31:21,839 --> 12:31:26,799
and ios usually like the most popular
14120
12:31:23,839 --> 12:31:28,959
ones right now they keep track of your
14121
12:31:26,800 --> 12:31:30,800
lot so these logs are actually stored in
14122
12:31:28,959 --> 12:31:32,720
a place on the operating system so you
14123
12:31:30,800 --> 12:31:35,200
can actually read them back later so
14124
12:31:32,720 --> 12:31:36,720
there is a buffer so this information
14125
12:31:35,199 --> 12:31:38,799
that your application may be printing to
14126
12:31:36,720 --> 12:31:41,116
the console isn't completely private
14127
12:31:38,800 --> 12:31:43,116
except that it is stored on the phone
14128
12:31:41,116 --> 12:31:45,596
even if it's for a short while while it
14129
12:31:43,116 --> 12:31:47,360
gets replaced by a new buffer if your
14130
12:31:45,595 --> 12:31:49,595
phone ends up in the wrong hands someone
14131
12:31:47,360 --> 12:31:51,915
can actually get a hold of your lock so
14132
12:31:49,595 --> 12:31:55,040
imagine a banking application logs your
14133
12:31:51,915 --> 12:31:57,595
like a login information username
14134
12:31:55,040 --> 12:31:59,595
password all that detail and even if
14135
12:31:57,595 --> 12:32:01,680
it's only for that application you may
14136
12:31:59,595 --> 12:32:04,239
think but someone else it may actually
14137
12:32:01,680 --> 12:32:05,680
end up in the wrong hand so that's what
14138
12:32:04,239 --> 12:32:07,756
this information is telling you avoid
14139
12:32:05,680 --> 12:32:10,160
print calls in production code okay so
14140
12:32:07,756 --> 12:32:11,756
there is another way of doing this
14141
12:32:11,756 --> 12:32:16,880
instead of doing prints you can actually
14142
12:32:16,879 --> 12:32:20,399
in your in your code and we're gonna i
14143
12:32:20,400 --> 12:32:24,880
we're actually going to talk about in
14144
12:32:24,879 --> 12:32:30,839
i think we're gonna talk about logging
14145
12:32:28,319 --> 12:32:34,159
so let me have a look here in my
14146
12:32:30,839 --> 12:32:36,799
notes um yes we're actually going to
14147
12:32:34,160 --> 12:32:38,000
talk about logging instead of printing
14148
12:32:38,000 --> 12:32:41,680
just keep that in mind that there's a
14149
12:32:39,519 --> 12:32:43,359
better way of doing print statements if
14150
12:32:41,680 --> 12:32:44,879
if they're if that's what you want to do
14151
12:32:43,360 --> 12:32:47,680
if that's what you want to see
14152
12:32:44,879 --> 12:32:49,595
on the console so we're gonna fix that
14153
12:32:47,680 --> 12:32:51,040
soon and this is you see hello world
14154
12:32:49,595 --> 12:32:52,959
information that was printed by this
14155
12:32:51,040 --> 12:32:54,879
print statement okay so sorry about that
14156
12:32:52,959 --> 12:32:56,400
that was just a little detour but i i
14157
12:32:54,879 --> 12:32:58,079
thought it was necessary to tell you
14158
12:32:56,400 --> 12:33:01,360
especially if you haven't done software
14159
12:33:01,360 --> 12:33:05,116
okay we've done the return notes view in
14160
12:33:03,436 --> 12:33:06,720
the home page we shouldn't have any
14161
12:33:05,116 --> 12:33:08,400
print in the home page and you can see
14162
12:33:06,720 --> 12:33:10,239
this is our home page right now and we
14163
12:33:08,400 --> 12:33:11,520
don't have any print statements let me
14164
12:33:17,199 --> 12:33:22,479
so what i'm gonna now describe to you is
14165
12:33:20,080 --> 12:33:26,240
that we need a an enumeration that
14166
12:33:27,436 --> 12:33:32,560
items that the user can click on you see
14167
12:33:32,559 --> 12:33:36,239
and this app bar will in itself be able
14168
12:33:36,239 --> 12:33:42,239
display something called a pop-up all
14169
12:33:38,800 --> 12:33:43,840
right so i haven't shown you how this is
14170
12:33:42,239 --> 12:33:45,275
going to work by the end of this chapter
14171
12:33:43,839 --> 12:33:48,319
so it may be a little bit difficult to
14172
12:33:45,275 --> 12:33:51,040
understand but just imagine that we have
14173
12:33:48,319 --> 12:33:52,480
our ui here and what we need to achieve
14174
12:33:51,040 --> 12:33:55,436
in this chapter is to place a little
14175
12:33:52,480 --> 12:33:56,880
button here with like a dot dot either
14176
12:33:55,436 --> 12:33:58,160
horizontally or vertically i don't
14177
12:33:56,879 --> 12:34:00,000
really know what the icon is going to be
14178
12:33:58,160 --> 12:34:01,276
so some sort of a button here upon
14179
12:34:01,275 --> 12:34:08,079
the user will get a little fine nice
14180
12:34:05,040 --> 12:34:10,160
like a drop down and in this drop down
14181
12:34:08,080 --> 12:34:11,520
then you can place various items like
14182
12:34:11,519 --> 12:34:15,755
settings blah blah blah so imagine we
14183
12:34:13,436 --> 12:34:18,800
have a drop down by pressing that button
14184
12:34:15,756 --> 12:34:20,400
and upon pressing the log out button
14185
12:34:18,800 --> 12:34:21,756
then we're going to display a dialect to
14186
12:34:20,400 --> 12:34:24,959
the user saying are you sure you want to
14187
12:34:21,756 --> 12:34:27,595
log out from the application so
14188
12:34:24,959 --> 12:34:29,040
this works very nicely i mean when
14189
12:34:27,595 --> 12:34:31,680
before i say this works very nicely
14190
12:34:29,040 --> 12:34:34,000
maybe i should explain that by pressing
14191
12:34:31,680 --> 12:34:35,360
each one of these items in the pop-up
14192
12:34:34,000 --> 12:34:37,360
menu that we're going to display to the
14193
12:34:35,360 --> 12:34:39,915
user we are going to get a call back
14194
12:34:37,360 --> 12:34:40,959
from the system saying oh this item got
14195
12:34:40,959 --> 12:34:45,756
and you need to tell the system what
14196
12:34:43,040 --> 12:34:47,840
this item is you can either give it like
14197
12:34:47,839 --> 12:34:52,959
numerical value or a string or even
14198
12:34:50,720 --> 12:34:54,800
better better you can give it an
14199
12:34:52,959 --> 12:34:55,519
enumeration value if you remember from
14200
12:34:55,519 --> 12:34:58,959
chapters where we talked about dart
14201
12:34:57,116 --> 12:35:01,596
basics we talked about enumerations and
14202
12:34:58,959 --> 12:35:04,559
why they're important and and that they
14203
12:35:01,595 --> 12:35:06,319
make things very easy because when you
14204
12:35:04,559 --> 12:35:08,959
specifying your enumeration and put
14205
12:35:10,720 --> 12:35:14,160
you you let me actually change this to
14206
12:35:12,639 --> 12:35:15,595
also do not do so sorry about i just
14207
12:35:15,595 --> 12:35:20,799
and you give those innovation values to
14208
12:35:18,080 --> 12:35:22,720
your pop-up menu items by press but by
14209
12:35:20,800 --> 12:35:24,560
the user pressing on any of those items
14210
12:35:22,720 --> 12:35:26,880
you will then get that enumeration value
14211
12:35:24,559 --> 12:35:29,756
back so you can do a switch statement in
14212
12:35:26,879 --> 12:35:31,360
your a callback and say oh which item
14213
12:35:29,756 --> 12:35:33,756
got called was it this case of the
14214
12:35:31,360 --> 12:35:35,360
enumeration so instead of you doing like
14215
12:35:33,756 --> 12:35:36,639
integer comparisons or string
14216
12:35:35,360 --> 12:35:38,800
comparisons you can actually use
14217
12:35:36,639 --> 12:35:41,116
enumerations which make your life a lot
14218
12:35:41,915 --> 12:35:46,799
we are going to talk about that
14219
12:35:44,800 --> 12:35:49,116
soon as you can see an enumeration that
14220
12:35:46,800 --> 12:35:52,560
describes our pop-up and we're going to
14221
12:35:59,680 --> 12:36:04,800
now let's talk about pop-up menu button
14222
12:36:04,800 --> 12:36:08,400
and as you can see the caption says
14223
12:36:06,080 --> 12:36:11,040
they're usually used together and let's
14224
12:36:08,400 --> 12:36:14,000
go actually bring up safari here and i'm
14225
12:36:11,040 --> 12:36:15,520
going to say pop-up menu item flutter
14226
12:36:14,000 --> 12:36:17,839
and i'm going to bring up the document
14227
12:36:17,839 --> 12:36:22,159
so we can have a look at it together
14228
12:36:20,559 --> 12:36:24,239
as you can see it says an item in a
14229
12:36:22,160 --> 12:36:26,560
material design pop-up menu so this is
14230
12:36:24,239 --> 12:36:28,400
the actual menu item itself so if you
14231
12:36:26,559 --> 12:36:32,000
imagine we're displaying a drop down
14232
12:36:28,400 --> 12:36:34,400
menu every item in that pop-up menu item
14233
12:36:37,116 --> 12:36:43,520
is of type pop-up menu item all right
14234
12:36:40,800 --> 12:36:45,200
and you can see a pop-up menu item in
14235
12:36:45,199 --> 12:36:51,595
a i mean a pop-up menu item is a generic
14236
12:36:48,639 --> 12:36:53,915
in advanced um a dart chapter we also
14237
12:36:51,595 --> 12:36:56,000
talked about generics and what a generic
14238
12:36:53,915 --> 12:36:57,360
item in this case a pop-up menu item
14239
12:36:57,360 --> 12:37:02,319
is that it has a value of this type that
14240
12:37:02,319 --> 12:37:06,480
is off in this case a pop-up menu item
14241
12:37:06,480 --> 12:37:11,200
why farther is a pop-up menu item is of
14242
12:37:09,199 --> 12:37:12,399
type y farther now we don't really know
14243
12:37:12,400 --> 12:37:17,040
why farther is but it could just be an
14244
12:37:14,639 --> 12:37:17,915
enumeration okay and you can see here
14245
12:37:17,915 --> 12:37:20,799
after you've decided decided that a
14246
12:37:20,800 --> 12:37:25,916
carries a value of of this type then its
14247
12:37:23,839 --> 12:37:28,239
value should actually be specified and i
14248
12:37:25,915 --> 12:37:29,275
can see that there is a case called
14249
12:37:29,275 --> 12:37:34,319
in that animation that you've assigned
14250
12:37:31,275 --> 12:37:35,199
to your pop-up menu item okay
14251
12:37:35,199 --> 12:37:41,360
what is a pop-up menu button so let's
14252
12:37:38,080 --> 12:37:43,360
search here pop-up menu button okay
14253
12:37:41,360 --> 12:37:45,116
let's go into the documentation here and
14254
12:37:43,360 --> 12:37:47,520
you can see it says displays a menu when
14255
12:37:45,116 --> 12:37:50,000
pressed and calls unselected when the
14256
12:37:47,519 --> 12:37:51,359
menu is dismissed all right so
14257
12:37:51,360 --> 12:37:55,680
what you need to know is that the pop-up
14258
12:37:55,680 --> 12:38:01,275
button that we will place on kind of on
14259
12:37:58,720 --> 12:38:02,955
our app bar upon pres upon pressing
14260
12:38:02,955 --> 12:38:08,720
a menu and you can see here in the code
14261
12:38:11,116 --> 12:38:15,596
has an unselected callback and it has an
14262
12:38:15,595 --> 12:38:19,519
and items inside the pop-up menu item
14263
12:38:19,519 --> 12:38:22,479
sorry the items inside the pop-up menu
14264
12:38:22,480 --> 12:38:27,756
are of type pop-up menu item so
14265
12:38:26,000 --> 12:38:30,800
imagine then you have the pop-up menu
14266
12:38:30,800 --> 12:38:34,800
and then you will have its item builder
14267
12:38:32,879 --> 12:38:37,360
and each of which of these items are of
14268
12:38:34,800 --> 12:38:40,160
type pop-up menu item and that's exactly
14269
12:38:42,720 --> 12:38:48,880
okay i'm gonna close that window i don't
14270
12:38:44,720 --> 12:38:50,800
think we need the safari window here um
14271
12:38:50,800 --> 12:38:55,756
now i think i explained this part of the
14272
12:38:53,116 --> 12:38:58,639
caption a little bit just now about when
14273
12:38:55,756 --> 12:39:00,160
we talked about the pop-up menu item but
14274
12:38:58,639 --> 12:39:01,595
you can see here i've said pop-up menu
14275
12:39:00,160 --> 12:39:03,360
item has a value let's look at the code
14276
12:39:01,595 --> 12:39:06,239
for pop-up menu items so maybe we could
14277
12:39:03,360 --> 12:39:08,160
just actually right here pop-up menu
14278
12:39:06,239 --> 12:39:11,595
item in our code and i'm going to
14279
12:39:08,160 --> 12:39:14,160
command click on it and you can also see
14280
12:39:11,595 --> 12:39:16,639
that a pop-up menu item has this
14281
12:39:14,160 --> 12:39:18,560
property called value okay and as you
14282
12:39:16,639 --> 12:39:21,116
can see a pop-up menu item as i
14283
12:39:18,559 --> 12:39:23,756
mentioned before is a generic class that
14284
12:39:21,116 --> 12:39:26,080
carries a value of type t and type d
14285
12:39:23,756 --> 12:39:27,916
basically when you see t in generics it
14286
12:39:26,080 --> 12:39:31,116
just means something that you specified
14287
12:39:27,915 --> 12:39:34,159
so anything that's specified inside the
14288
12:39:31,116 --> 12:39:36,240
less than and greater than size is a
14289
12:39:36,239 --> 12:39:40,319
which then gets replaced at a compile
14290
12:39:38,559 --> 12:39:42,479
time with the type that you as a
14291
12:39:43,360 --> 12:39:47,756
um that's the code for the pop-up menu
14292
12:39:45,915 --> 12:39:50,079
item and you're more than welcome to
14293
12:39:47,756 --> 12:39:52,800
drill down more into into that code to
14294
12:39:57,360 --> 12:40:01,040
our enumeration that we've now talked
14295
12:40:04,319 --> 12:40:10,879
here right above the notes view
14296
12:40:08,000 --> 12:40:13,199
and let's then define an enumeration
14297
12:40:10,879 --> 12:40:16,079
called menu action and in there we're
14298
12:40:13,199 --> 12:40:17,755
gonna have a case called log out okay so
14299
12:40:17,756 --> 12:40:22,239
menu action we said we're gonna call it
14300
12:40:20,400 --> 12:40:24,319
and then we have a case called log out
14301
12:40:22,239 --> 12:40:26,955
in there so if i do command s to hover
14302
12:40:24,319 --> 12:40:28,879
reload then nothing happens and the dart
14303
12:40:26,955 --> 12:40:32,639
formatter i can actually see they form
14304
12:40:33,436 --> 12:40:37,116
so the next part that we need to take
14305
12:40:37,116 --> 12:40:42,160
is to actually display our pop-up menu
14306
12:40:39,839 --> 12:40:44,239
button you can see in notes app view
14307
12:40:42,160 --> 12:40:48,880
state app bar create a pop-up menu
14308
12:40:50,160 --> 12:40:55,360
in the app bar in order for us to be
14309
12:40:52,559 --> 12:40:58,559
able to display a little action there we
14310
12:40:58,639 --> 12:41:02,879
actually go to the app bar here
14311
12:41:01,360 --> 12:41:05,040
and you can see there is a property
14312
12:41:02,879 --> 12:41:07,199
called actions which is it says it's a
14313
12:41:05,040 --> 12:41:10,879
list of widgets all right so we're gonna
14314
12:41:07,199 --> 12:41:13,115
say we need actions there okay i'm also
14315
12:41:10,879 --> 12:41:15,595
just going to ensure that i have
14316
12:41:13,116 --> 12:41:18,319
everything here so i can see the code as
14317
12:41:18,319 --> 12:41:21,756
i can take in my notes that we've talked
14318
12:41:26,720 --> 12:41:30,720
all right and now we're gonna create the
14319
12:41:30,720 --> 12:41:35,200
pop-up menu button all right so
14320
12:41:33,519 --> 12:41:36,955
you see the action as we saw in the
14321
12:41:35,199 --> 12:41:38,879
source code on the website that i
14322
12:41:36,955 --> 12:41:40,799
displayed you and that i displayed to
14323
12:41:38,879 --> 12:41:42,399
you as the documentation inside the
14324
12:41:40,800 --> 12:41:44,720
actions of our app bar then we're going
14325
12:41:42,400 --> 12:41:47,200
to create items of type pop-up menu
14326
12:41:44,720 --> 12:41:49,436
button okay so let's go ahead and do
14327
12:41:51,756 --> 12:41:55,360
all right and then you can see it has an
14328
12:41:56,879 --> 12:42:01,435
i think it's actually an item builder
14329
12:42:01,436 --> 12:42:04,400
let's first actually take care of the
14330
12:42:03,116 --> 12:42:06,400
unselected so i'm going to put
14331
12:42:04,400 --> 12:42:08,639
unselected command space in visual
14332
12:42:06,400 --> 12:42:10,160
studio code on a mac and control space
14333
12:42:08,639 --> 12:42:12,319
in linux and windows in order to get
14334
12:42:10,160 --> 12:42:14,880
this dialog get some help from visual
14335
12:42:12,319 --> 12:42:17,116
studio code to complete this code for us
14336
12:42:14,879 --> 12:42:20,079
you see upon selected it's going to
14337
12:42:17,116 --> 12:42:22,955
return the value to us and we're telling
14338
12:42:20,080 --> 12:42:26,319
darth in here that our pop-up menu
14339
12:42:22,955 --> 12:42:29,275
button actually manages values of type
14340
12:42:26,319 --> 12:42:32,720
menu action all right which is what we
14341
12:42:32,720 --> 12:42:35,756
and you can see we're getting an error
14342
12:42:34,080 --> 12:42:37,680
saying that the named parameter item
14343
12:42:35,756 --> 12:42:40,480
builder is required okay and we'll
14344
12:42:45,360 --> 12:42:49,680
get help from visual studio code with
14345
12:42:47,040 --> 12:42:50,955
the same command that i mentioned to you
14346
12:42:50,955 --> 12:42:56,720
and in here then we're going to create a
14347
12:42:52,879 --> 12:42:58,719
constant of a pop-up menu item
14348
12:42:56,720 --> 12:43:00,480
and we're going to say that this menu
14349
12:43:00,480 --> 12:43:04,880
values of type menu action as well okay
14350
12:43:03,436 --> 12:43:07,200
and we're going to say according to the
14351
12:43:04,879 --> 12:43:10,479
documentation remember every pop-up menu
14352
12:43:07,199 --> 12:43:12,799
item has a value so a value associated
14353
12:43:10,480 --> 12:43:15,680
with it which then in turn gets passed
14354
12:43:15,680 --> 12:43:20,239
when this pop-up menu item is tapped
14355
12:43:18,400 --> 12:43:23,436
okay so then we're going to say in this
14356
12:43:20,239 --> 12:43:26,000
case it has the value of menu actions
14357
12:43:26,000 --> 12:43:30,720
and this child is just going to be
14358
12:43:33,436 --> 12:43:38,160
okay and as a const as well actually the
14359
12:43:36,480 --> 12:43:39,680
entire thing is a cons so we don't have
14360
12:43:39,680 --> 12:43:43,680
so we just uh let me have a look item
14361
12:43:43,680 --> 12:43:48,319
menu actions constant body might return
14362
12:43:48,319 --> 12:43:54,319
okay i see because the item builder if
14363
12:43:54,720 --> 12:43:59,360
if i move the mouse over item blue you
14364
12:43:57,116 --> 12:44:01,360
can actually see that it needs a list of
14365
12:44:01,360 --> 12:44:05,680
and you can see pop-up menu item if you
14366
12:44:03,595 --> 12:44:08,559
go to this code is actually of type
14367
12:44:05,680 --> 12:44:10,400
pop-up menu entry so the problem we're
14368
12:44:08,559 --> 12:44:12,399
seeing here is that it says you aren't
14369
12:44:10,400 --> 12:44:14,319
returning a list but you're just
14370
12:44:12,400 --> 12:44:15,680
returning an item so we're going to say
14371
12:44:23,040 --> 12:44:28,480
can we actually make that entire list
14372
12:44:25,116 --> 12:44:30,720
const so yeah that works as well okay
14373
12:44:28,480 --> 12:44:33,596
i'm gonna do command s and what you'll
14374
12:44:33,595 --> 12:44:37,199
uh we've actually added log out
14375
12:44:37,199 --> 12:44:42,719
so and you'll see here now by pressing
14376
12:44:39,915 --> 12:44:43,915
this then we'll get a beautiful pop-up
14377
12:44:44,800 --> 12:44:48,000
and there is a log out item in it all
14378
12:44:49,360 --> 12:44:56,000
that logout text there is the child of
14379
12:44:56,000 --> 12:45:00,080
don't worry i mean don't get confused
14380
12:44:58,400 --> 12:45:02,160
with the child and the value what you
14381
12:45:00,080 --> 12:45:04,955
need to know is that the child is what
14382
12:45:02,160 --> 12:45:06,880
the user sees and the value is what you
14383
12:45:06,879 --> 12:45:11,915
when the user then taps on that item
14384
12:45:09,436 --> 12:45:13,756
your unselected is going to get called
14385
12:45:11,915 --> 12:45:15,839
and then we'll get that value so just to
14386
12:45:13,756 --> 12:45:18,000
test that let's go back to our print
14387
12:45:18,000 --> 12:45:22,720
and i'm going to bring up the console
14388
12:45:20,319 --> 12:45:25,199
here going to clear it and i'm gonna
14389
12:45:22,720 --> 12:45:27,756
change the ui layout a little bit so you
14390
12:45:25,199 --> 12:45:29,680
see it better i'm gonna do command s and
14391
12:45:27,756 --> 12:45:31,116
then i'm gonna tap on this log out
14392
12:45:31,116 --> 12:45:36,400
you'll see now our unselected got called
14393
12:45:36,400 --> 12:45:40,080
which was what you associated with your
14394
12:45:40,080 --> 12:45:45,520
got printed here and got sent sent to
14395
12:45:45,519 --> 12:45:51,275
okay so we've done that part we've
14396
12:45:48,400 --> 12:45:52,955
handled it with double quotes we haven't
14397
12:45:51,275 --> 12:45:56,799
really handled but we're just printing
14398
12:45:58,000 --> 12:46:02,319
go through some of the things that i
14399
12:46:10,800 --> 12:46:15,596
we can see that the print statement is
14400
12:46:15,595 --> 12:46:19,435
in the previous part of this chapter i
14401
12:46:17,756 --> 12:46:21,840
talked about why print usually isn't a
14402
12:46:21,839 --> 12:46:26,239
there is a better way of doing print and
14403
12:46:28,400 --> 12:46:31,756
pre-packed with a package called
14404
12:46:31,756 --> 12:46:36,559
and you can easily import developer and
14405
12:46:34,559 --> 12:46:38,955
inside the developer tools for dart
14406
12:46:36,559 --> 12:46:41,680
there is a good function called log and
14407
12:46:38,955 --> 12:46:44,000
you can use log which is a more
14408
12:46:41,680 --> 12:46:45,595
trustworthy and more even configurable
14409
12:46:44,000 --> 12:46:47,360
version of print and i'm going to show
14410
12:46:47,360 --> 12:46:52,319
so in your import statements let me
14411
12:46:50,080 --> 12:46:54,080
increase the size of the screen a little
14412
12:46:54,080 --> 12:46:59,200
say import dart from dart import
14413
12:46:59,199 --> 12:47:03,199
now i haven't talked so much about
14414
12:47:01,199 --> 12:47:05,839
import statements before but import is
14415
12:47:03,199 --> 12:47:07,519
actually configurable as well so in here
14416
12:47:05,839 --> 12:47:09,915
for instance if you look at the code
14417
12:47:07,519 --> 12:47:12,239
inside import this dart developer
14418
12:47:09,915 --> 12:47:14,955
there's a lot of stuff that you might
14419
12:47:12,239 --> 12:47:16,319
not need in your application okay so by
14420
12:47:16,319 --> 12:47:21,436
um a package or a library in your
14421
12:47:19,756 --> 12:47:23,116
program you're pretty much importing
14422
12:47:21,436 --> 12:47:24,880
everything that that package also
14423
12:47:23,116 --> 12:47:27,040
imports so in this case extension
14424
12:47:29,116 --> 12:47:34,560
these things will then be available in
14425
12:47:31,275 --> 12:47:36,955
your workspace just by you pressing for
14426
12:47:34,559 --> 12:47:39,519
instance for me is control space on my
14427
12:47:36,955 --> 12:47:41,756
macintosh so all these symbols will then
14428
12:47:39,519 --> 12:47:44,000
be available right here so there's tons
14429
12:47:41,756 --> 12:47:45,680
and tons of things that are available
14430
12:47:44,000 --> 12:47:47,595
right now in your application without
14431
12:47:45,680 --> 12:47:50,080
you having to do anything just because
14432
12:47:47,595 --> 12:47:53,199
you imported quite a lot of things now
14433
12:47:50,080 --> 12:47:55,040
by importing the dart developer
14434
12:47:53,199 --> 12:47:57,360
package in this case also you're making
14435
12:47:55,040 --> 12:48:00,559
all those symbols available kind of like
14436
12:47:57,360 --> 12:48:02,160
globally inside this file at least and
14437
12:48:00,559 --> 12:48:04,079
some developers don't like that some
14438
12:48:02,160 --> 12:48:06,160
developers kind of like to limit the
14439
12:48:06,160 --> 12:48:10,800
and only have the symbols available that
14440
12:48:10,800 --> 12:48:14,480
and because of this there is a good
14441
12:48:12,239 --> 12:48:16,079
functionality for import and dart where
14442
12:48:16,080 --> 12:48:20,160
and by doing a show you are telling dart
14443
12:48:20,160 --> 12:48:25,360
you only want to import a specific part
14444
12:48:22,720 --> 12:48:27,040
of this package so the specific part
14445
12:48:25,360 --> 12:48:29,040
that you're interested in is a function
14446
12:48:30,080 --> 12:48:34,639
after doing this you can basically go to
14447
12:48:32,239 --> 12:48:36,799
your application and then say log
14448
12:48:34,639 --> 12:48:39,199
now a lot of developers also don't like
14449
12:48:36,800 --> 12:48:41,276
this because they think oh log where did
14450
12:48:41,275 --> 12:48:45,915
um if you want to be more specific where
14451
12:48:44,239 --> 12:48:48,559
functions come from especially if
14452
12:48:45,915 --> 12:48:51,115
they're not your own functions or maybe
14453
12:48:48,559 --> 12:48:53,915
even if you have few log functions maybe
14454
12:48:51,116 --> 12:48:57,116
you even have a log function in in this
14455
12:48:53,915 --> 12:48:58,955
code right here like if you say void log
14456
12:49:01,519 --> 12:49:04,639
i mean it's there are so many logs
14457
12:49:03,275 --> 12:49:07,275
available now i don't even know which
14458
12:49:08,239 --> 12:49:14,079
dart allows you to do is to give an
14459
12:49:10,879 --> 12:49:17,199
alias to your import so for instance if
14460
12:49:14,080 --> 12:49:19,116
you want to use the log function that is
14461
12:49:17,199 --> 12:49:21,115
provided in this developer package for
14462
12:49:19,116 --> 12:49:24,240
you you can actually give an alias to
14463
12:49:21,116 --> 12:49:26,319
this entire package in this source file
14464
12:49:24,239 --> 12:49:27,680
which is the main dart file so you can
14465
12:49:27,680 --> 12:49:33,040
i'm going to say dev tools okay so what
14466
12:49:30,559 --> 12:49:35,915
happens here is that the log function
14467
12:49:33,040 --> 12:49:38,955
now is not available as it was before
14468
12:49:35,915 --> 12:49:40,559
except you have to say devtools log and
14469
12:49:38,955 --> 12:49:43,040
then you'll see that there's a log
14470
12:49:40,559 --> 12:49:45,199
function and that's the only function
14471
12:49:43,040 --> 12:49:46,480
available inside devtools now because it
14472
12:49:46,480 --> 12:49:51,276
if you hadn't done the show here
14473
12:49:48,400 --> 12:49:53,680
then devtools will have everything that
14474
12:49:51,275 --> 12:49:56,799
dev tools or the developer package in
14475
12:49:56,800 --> 12:50:02,400
or import it into your workspace okay so
14476
12:49:59,839 --> 12:50:04,000
do the code then as this import devtools
14477
12:50:02,400 --> 12:50:05,596
show log and the reason i'm explaining
14478
12:50:04,000 --> 12:50:07,915
all of these is because i think these
14479
12:50:05,595 --> 12:50:09,275
are so important to understand
14480
12:50:11,116 --> 12:50:15,360
as soon as possible and now that i'm
14481
12:50:13,436 --> 12:50:17,116
explaining these things in such detail
14482
12:50:15,360 --> 12:50:20,160
i'm not going to explain them anywhere
14483
12:50:17,116 --> 12:50:24,000
else in inside this chapter so i don't
14484
12:50:20,160 --> 12:50:25,116
want to have like half explained
14485
12:50:25,116 --> 12:50:28,639
that we actually need to fully
14486
12:50:26,559 --> 12:50:30,319
understand and explain half of it now
14487
12:50:28,639 --> 12:50:32,800
and then half of it later because then
14488
12:50:32,800 --> 12:50:36,800
chain the information to get the entire
14489
12:50:34,720 --> 12:50:39,595
picture so that's why i'm explaining
14490
12:50:36,800 --> 12:50:42,160
things sometimes in such great detail
14491
12:50:39,595 --> 12:50:43,756
okay now that we've done as devtools
14492
12:50:42,160 --> 12:50:46,720
show log let's go to this print
14493
12:50:46,720 --> 12:50:52,400
in our notes in the unselected and then
14494
12:50:54,239 --> 12:50:58,000
and you can see now that it's
14495
12:50:55,839 --> 12:51:01,115
complaining to us because it says the
14496
12:50:58,000 --> 12:51:03,199
devtools log it doesn't allow us to
14497
12:51:01,116 --> 12:51:05,756
print a value and if you have a look at
14498
12:51:03,199 --> 12:51:08,479
the log fi and log function signature it
14499
12:51:05,756 --> 12:51:11,116
expects a message of type string but our
14500
12:51:08,480 --> 12:51:13,040
a menu action is an enumeration but you
14501
12:51:11,116 --> 12:51:15,360
can always say to string on an
14502
12:51:13,040 --> 12:51:18,080
enumeration value in order to make it a
14503
12:51:18,080 --> 12:51:22,160
um so what we're going to do then is to
14504
12:51:22,160 --> 12:51:27,276
click on this log out and now you see a
14505
12:51:24,720 --> 12:51:29,200
log item being printed to the screen and
14506
12:51:27,275 --> 12:51:30,955
it's a little bit more distinct as well
14507
12:51:29,199 --> 12:51:33,595
you can see now now that we're not using
14508
12:51:30,955 --> 12:51:34,955
print using log make sure that your log
14509
12:51:33,595 --> 12:51:38,079
items are a little bit more
14510
12:51:34,955 --> 12:51:42,400
distinguished inside the debug console
14511
12:51:47,040 --> 12:51:51,116
let's go now to the next item
14512
12:51:51,915 --> 12:51:55,680
so what we're gonna do here now we have
14513
12:51:55,680 --> 12:52:00,000
button here so i'm going to tap on it it
14514
12:52:01,436 --> 12:52:06,480
what we need to do now is upon pressing
14515
12:52:03,915 --> 12:52:08,559
this item we are going to display a
14516
12:52:08,559 --> 12:52:12,000
now if you're a designer you may be
14517
12:52:10,480 --> 12:52:13,916
familiar with a dialogue and the
14518
12:52:12,000 --> 12:52:15,360
dialogue is basically like an alert
14519
12:52:13,915 --> 12:52:16,719
displayed on the screen depending on
14520
12:52:15,360 --> 12:52:19,520
what type of operating system you're
14521
12:52:16,720 --> 12:52:22,239
running on but both android and ios and
14522
12:52:19,519 --> 12:52:23,915
ipad os mac os windows everything they
14523
12:52:23,915 --> 12:52:28,479
way of handling dialogues and dialogues
14524
12:52:26,080 --> 12:52:30,955
are usually like a small little window
14525
12:52:28,480 --> 12:52:32,800
displayed usually in the center of the
14526
12:52:30,955 --> 12:52:34,799
main screen where that application is
14527
12:52:34,800 --> 12:52:40,319
configurable usually with a title with
14528
12:52:37,199 --> 12:52:42,479
the description text or even images and
14529
12:52:40,319 --> 12:52:46,319
usually with some action buttons which
14530
12:52:42,480 --> 12:52:47,116
are called cta or call to action
14531
12:52:47,116 --> 12:52:51,200
that is the exact same case here in
14532
12:52:48,639 --> 12:52:52,559
flutter so upon pressing this log out
14533
12:52:51,199 --> 12:52:54,799
button we're going to display a dialogue
14534
12:52:52,559 --> 12:52:56,319
to the user saying oh you want we see
14535
12:52:54,800 --> 12:52:57,916
that you want to log out are you sure
14536
12:52:56,319 --> 12:53:00,480
you want to log out and then like a
14537
12:52:57,915 --> 12:53:04,719
cancel or no button and a yes button
14538
12:53:00,480 --> 12:53:07,200
which is the call to action or cta okay
14539
12:53:07,199 --> 12:53:12,399
what we need to do now is to create that
14540
12:53:09,680 --> 12:53:14,400
function a function that can display an
14541
12:53:14,400 --> 12:53:19,436
to the user and you can see here that in
14542
12:53:17,360 --> 12:53:21,360
the caption i've mentioned write a login
14543
12:53:19,436 --> 12:53:22,639
function to display a dialog
14544
12:53:22,639 --> 12:53:27,040
signature is kind of like it returns a
14545
12:53:24,559 --> 12:53:28,399
feature of boolean and if you think i
14546
12:53:27,040 --> 12:53:30,480
mean if you really think about it a
14547
12:53:28,400 --> 12:53:33,520
dialogue that asks the user to log out
14548
12:53:30,480 --> 12:53:35,520
either has a cancel or a null button or
14549
12:53:35,519 --> 12:53:39,359
either a cancel or no button and
14550
12:53:39,360 --> 12:53:45,116
a call to action which does the log out
14551
12:53:41,436 --> 12:53:47,275
so it either logs out or it doesn't
14552
12:53:45,116 --> 12:53:49,276
or basically it either confirms that you
14553
12:53:47,275 --> 12:53:50,879
need to be logged out or it says no you
14554
12:53:49,275 --> 12:53:52,955
shouldn't be like that so it's true
14555
12:53:50,879 --> 12:53:54,559
false okay so a boolean so boolean is
14556
12:53:54,559 --> 12:53:58,399
um and what we're going to do now is to
14557
12:53:56,400 --> 12:54:00,720
write a function that returns a future
14558
12:53:58,400 --> 12:54:03,436
of that boolean saying true you have to
14559
12:54:00,720 --> 12:54:07,756
be logged out or false not and we're
14560
12:54:03,436 --> 12:54:09,840
going to call it show logout dialog okay
14561
12:54:07,756 --> 12:54:10,639
so let's go at the bottom of this file
14562
12:54:14,800 --> 12:54:18,080
and as i've mentioned in the caching
14563
12:54:16,400 --> 12:54:20,400
we're going to call the show log out
14564
12:54:18,080 --> 12:54:23,276
dialog and we say build context because
14565
12:54:20,400 --> 12:54:24,560
we need actually context to display our
14566
12:54:29,040 --> 12:54:34,400
okay a lot of information now um i'm
14567
12:54:32,480 --> 12:54:36,160
gonna go actually a little bit back to
14568
12:54:36,160 --> 12:54:41,040
uh because i forgot to mention something
14569
12:54:41,040 --> 12:54:45,275
and the important thing to mention here
14570
12:54:43,040 --> 12:54:48,955
are two things called show dialogue and
14571
12:54:45,275 --> 12:54:51,199
alert dialogue now show dialog
14572
12:54:48,955 --> 12:54:53,595
actually let's go to alert dialog first
14573
12:54:51,199 --> 12:54:57,115
alert dialog we can see is a class is a
14574
12:54:53,595 --> 12:54:59,435
stateless widget which defines the the
14575
12:54:57,116 --> 12:55:01,520
dialog that gets displayed to the user
14576
12:54:59,436 --> 12:55:03,436
itself so it doesn't have any concept of
14577
12:55:01,519 --> 12:55:05,275
being displayed to the screen or
14578
12:55:03,436 --> 12:55:07,436
what happens when the dialogue is
14579
12:55:05,275 --> 12:55:09,040
created after that point it doesn't care
14580
12:55:09,040 --> 12:55:12,955
performs the action of creating an alert
14581
12:55:12,955 --> 12:55:17,040
that's for alert dialogue but
14582
12:55:14,879 --> 12:55:18,559
you need a way to display that alert
14583
12:55:17,040 --> 12:55:20,480
dialogue to the user and the way to do
14584
12:55:20,480 --> 12:55:25,116
i believe it's called show dialogue
14585
12:55:25,116 --> 12:55:30,560
you can see here show dialog is a
14586
12:55:26,800 --> 12:55:33,200
function that returns an optional future
14587
12:55:30,559 --> 12:55:34,720
or sorry a future of an optional value
14588
12:55:33,199 --> 12:55:36,479
there's a difference between an optional
14589
12:55:34,720 --> 12:55:38,720
future and a future of an optional value
14590
12:55:36,480 --> 12:55:40,800
so in this case it's a future that
14591
12:55:38,720 --> 12:55:43,436
always gets returned but it optionally
14592
12:55:40,800 --> 12:55:46,319
contains a value okay and you can see it
14593
12:55:43,436 --> 12:55:48,400
says okay give me a context and then you
14594
12:55:46,319 --> 12:55:50,319
have to provide a builder to me okay and
14595
12:55:48,400 --> 12:55:51,840
this builder should return a widget so
14596
12:55:50,319 --> 12:55:54,720
what we're gonna say is going to say
14597
12:55:51,839 --> 12:55:56,319
show the dialogue you can see here
14598
12:55:56,319 --> 12:56:00,080
and builder we're going to get help from
14599
12:55:58,080 --> 12:56:00,880
visual studio code to complete it all
14600
12:56:00,879 --> 12:56:04,639
and in here in our builder what we're
14601
12:56:02,800 --> 12:56:08,000
going to do is we're going to actually
14602
12:56:09,360 --> 12:56:13,680
let's go back to this caption so we know
14603
12:56:12,000 --> 12:56:16,480
what we're doing what what the actual
14604
12:56:17,915 --> 12:56:22,799
the builder you're responsibility is to
14605
12:56:20,639 --> 12:56:24,479
create an alert dialogue so let's say we
14606
12:56:24,480 --> 12:56:29,200
an alert dialog which is a widget as you
14607
12:56:29,199 --> 12:56:32,719
and it has a title you can see the title
14608
12:56:32,720 --> 12:56:36,955
actually right like here is a widget
14609
12:56:37,040 --> 12:56:40,955
for the title we're going to create a
14610
12:56:40,955 --> 12:56:47,040
the text i can see we set sign out here
14611
12:56:44,639 --> 12:56:48,559
so we're basically configuring the alert
14612
12:56:52,480 --> 12:56:57,596
or the content also is a widget and
14613
12:56:55,275 --> 12:57:00,319
we're going to say this is also a const
14614
12:56:57,595 --> 12:57:03,199
text and we're going to ask the user
14615
12:57:00,319 --> 12:57:05,680
are you sure you want to sign out okay
14616
12:57:05,680 --> 12:57:11,040
now that we've put the title and the
14617
12:57:08,239 --> 12:57:13,199
content in there we need to specify the
14618
12:57:11,040 --> 12:57:15,200
parameters call actions and you can see
14619
12:57:13,199 --> 12:57:17,680
the type of this actions is list of
14620
12:57:15,199 --> 12:57:20,479
widgets all right and this is like the
14621
12:57:17,680 --> 12:57:22,879
buttons that the user will see on this
14622
12:57:22,879 --> 12:57:25,755
what we're going to do is going to
14623
12:57:24,000 --> 12:57:28,160
create two text buttons so i'm going to
14624
12:57:28,160 --> 12:57:31,520
and don't worry about all these errors
14625
12:57:30,080 --> 12:57:33,116
and things that we're seeing here this
14626
12:57:31,519 --> 12:57:34,955
is because as i mentioned in one of the
14627
12:57:33,116 --> 12:57:36,800
previous chapters or one of the first
14628
12:57:34,955 --> 12:57:38,639
introduction chapters i think
14629
12:57:36,800 --> 12:57:41,040
is because we have an extension here
14630
12:57:38,639 --> 12:57:43,519
called error lens and aero lens is
14631
12:57:41,040 --> 12:57:45,520
extend expanding all these errors that
14632
12:57:43,519 --> 12:57:47,199
are happening as we type and it's
14633
12:57:45,519 --> 12:57:48,955
displaying it on the screen it looks
14634
12:57:47,199 --> 12:57:51,519
really scary it looks like we're doing
14635
12:57:48,955 --> 12:57:53,519
everything wrong but these these bro
14636
12:57:51,519 --> 12:57:55,595
these errors actually do make sense if
14637
12:57:53,519 --> 12:57:57,755
you look at it it says text button the
14638
12:57:55,595 --> 12:58:00,479
named parameter on press is required but
14639
12:57:57,756 --> 12:58:02,160
there's no corresponding blah blah so we
14640
12:58:00,480 --> 12:58:04,480
need to fix these things okay so let's
14641
12:58:02,160 --> 12:58:06,240
go to text button and say unpressed get
14642
12:58:04,480 --> 12:58:08,880
help from visual studio go to complete
14643
12:58:06,239 --> 12:58:09,839
it and then after that i'm pressing say
14644
12:58:09,839 --> 12:58:16,399
so this first button is actually gonna
14645
12:58:16,639 --> 12:58:21,595
so that's the first text button and copy
14646
12:58:19,275 --> 12:58:23,839
this text button now and paste it in
14647
12:58:21,595 --> 12:58:27,360
here and instead of cancel this time say
14648
12:58:27,360 --> 12:58:32,879
like that now you see there's a lot less
14649
12:58:29,519 --> 12:58:35,519
information displayed on the screen and
14650
12:58:37,275 --> 12:58:40,879
now we have an alert with two buttons
14651
12:58:39,199 --> 12:58:42,559
cancel log out but you can see upon
14652
12:58:40,879 --> 12:58:44,879
pressing those buttons we aren't doing
14653
12:58:42,559 --> 12:58:47,275
anything here okay and we need to fix
14654
12:58:44,879 --> 12:58:49,360
this actually so let's go ahead and
14655
12:58:47,275 --> 12:58:51,115
first say we are returning this show
14656
12:58:49,360 --> 12:58:55,436
dialog which returns the value of
14657
12:58:51,116 --> 12:58:57,360
boolean and now you see we get a general
14658
12:58:55,436 --> 12:58:59,436
error here saying that wait you said
14659
12:58:57,360 --> 12:59:01,360
you're returning a future of bull but
14660
12:58:59,436 --> 12:59:03,520
this show dialogue of bull is going to
14661
12:59:01,360 --> 12:59:05,756
return an optional so what what do you
14662
12:59:03,519 --> 12:59:07,199
mean so this is dark getting a little
14663
12:59:07,199 --> 12:59:11,755
quite correctly actually is saying that
14664
12:59:09,436 --> 12:59:13,520
you saying that you return a boolean but
14665
12:59:11,756 --> 12:59:14,880
we know that show a dialogue returns an
14666
12:59:13,519 --> 12:59:16,879
optional boolean so what do you want to
14667
12:59:14,879 --> 12:59:18,319
do about it and a way to fix this to be
14668
12:59:19,116 --> 12:59:24,800
append something called a then function
14669
12:59:22,160 --> 12:59:26,000
to the entire show dialogue saying that
14670
12:59:26,000 --> 12:59:29,275
if this show dialogue isn't able to
14671
12:59:27,680 --> 12:59:31,436
return a boolean then i'm going to
14672
12:59:29,275 --> 12:59:33,756
return false otherwise return the value
14673
12:59:34,720 --> 12:59:38,160
because i mean you may be now asking why
14674
12:59:36,800 --> 12:59:40,160
wouldn't the show dialogue return a
14675
12:59:38,160 --> 12:59:41,756
value it either has a cancel or a logout
14676
12:59:40,160 --> 12:59:44,080
button but remember on android for
14677
12:59:41,756 --> 12:59:47,275
instance you have these physical keys
14678
12:59:44,080 --> 12:59:49,520
i'm going to change the layout so you
14679
12:59:47,275 --> 12:59:51,595
see this button down here if i show a
14680
12:59:49,519 --> 12:59:53,115
dialogue on the screen android users can
14681
12:59:51,595 --> 12:59:55,756
always press this little button which
14682
12:59:53,116 --> 12:59:57,680
will then change to an arrow down that
14683
12:59:55,756 --> 13:00:00,955
they can press on it to dismiss the
14684
12:59:57,680 --> 13:00:03,360
dialogue so they they have the ability
14685
13:00:00,955 --> 13:00:04,955
to dismiss a dialogue without actually
14686
13:00:03,360 --> 13:00:07,199
answering a question that the dialogue
14687
13:00:04,955 --> 13:00:10,000
asks them and ios users can sometimes
14688
13:00:07,199 --> 13:00:12,955
also tap outside a dialogue in order to
14689
13:00:10,000 --> 13:00:15,116
cancel that dialogue so that is why show
14690
13:00:12,955 --> 13:00:16,080
dialogue says i may not be able to
14691
13:00:16,080 --> 13:00:20,480
the value that i promised kind of to
14692
13:00:18,319 --> 13:00:24,000
return should this or tap on any of my
14693
13:00:20,480 --> 13:00:25,680
buttons quite correctly okay so append a
14694
13:00:24,000 --> 13:00:28,160
then statement let me change the screen
14695
13:00:28,160 --> 13:00:34,160
so append event statement here which is
14696
13:00:31,756 --> 13:00:38,160
a function that gets called
14697
13:00:34,160 --> 13:00:40,400
should this future complete so if the
14698
13:00:38,160 --> 13:00:42,080
user dismisses this dialogue this future
14699
13:00:40,400 --> 13:00:44,160
is going to complete but it won't have a
14700
13:00:42,080 --> 13:00:46,880
value you see it is an optional bull in
14701
13:00:44,160 --> 13:00:48,320
that case so in here we say either you
14702
13:00:48,319 --> 13:00:53,360
if it's present or you return false
14703
13:00:50,800 --> 13:00:56,000
that's it okay now you see dart is quite
14704
13:00:56,000 --> 13:01:02,720
now what we need to also do is
14705
13:01:02,720 --> 13:01:06,880
the way we're gonna display this
14706
13:01:09,756 --> 13:01:15,756
this like pause everything you're doing
14707
13:01:13,436 --> 13:01:16,800
and display this dialogue modelly on the
14708
13:01:16,800 --> 13:01:20,160
and this dialog is going to grab focus
14709
13:01:18,480 --> 13:01:22,720
from everything else that's on the
14710
13:01:20,160 --> 13:01:24,800
screen so the user kind of has to go and
14711
13:01:22,720 --> 13:01:26,720
choose an item unless they want to
14712
13:01:24,800 --> 13:01:28,240
cancel that item by for instance
14713
13:01:28,239 --> 13:01:31,115
physical key on an android phone
14714
13:01:31,116 --> 13:01:35,436
when we display the dialog we're going
14715
13:01:33,040 --> 13:01:36,879
to use the build contents context and
14716
13:01:36,879 --> 13:01:42,799
and display the screen just like we
14717
13:01:39,116 --> 13:01:45,276
display like a named route so
14718
13:01:42,800 --> 13:01:47,840
the show dialogue function here inside
14719
13:01:45,275 --> 13:01:50,559
our text buttons on press it is our
14720
13:01:47,839 --> 13:01:52,719
responsibility as the alert dialogue to
14721
13:01:52,720 --> 13:01:57,436
and it's our responsibility to actually
14722
13:01:55,436 --> 13:02:00,080
pass a value to this show dialogue and
14723
13:01:57,436 --> 13:02:02,639
say hey this button was pressed and this
14724
13:02:00,080 --> 13:02:03,360
is the value that it returned
14725
13:02:03,360 --> 13:02:07,756
what you to do on these unpressed is to
14726
13:02:08,680 --> 13:02:13,360
context and then you'll say pop
14727
13:02:13,360 --> 13:02:18,400
provide your value the boolean value in
14728
13:02:15,680 --> 13:02:20,160
this case so upon cancelling we'll pop
14729
13:02:20,160 --> 13:02:24,320
and we copy this code and we go into the
14730
13:02:22,480 --> 13:02:26,480
on press of the second text button which
14731
13:02:24,319 --> 13:02:28,480
is log out and in this case we should we
14732
13:02:26,480 --> 13:02:29,276
say that you should basically return
14733
13:02:32,400 --> 13:02:35,520
that was a lot of code i understand that
14734
13:02:34,080 --> 13:02:37,276
let's just make sure formatting is
14735
13:02:35,519 --> 13:02:39,595
correct as well put commas here before
14736
13:02:37,275 --> 13:02:41,915
your parentheses end so the formatting
14737
13:02:39,595 --> 13:02:42,720
is a little bit nicer in that case
14738
13:02:50,955 --> 13:02:56,955
now as the caption says what we need to
14739
13:03:03,199 --> 13:03:07,519
the user tapping this log out button
14740
13:03:05,275 --> 13:03:09,275
here you see the value is a menu action
14741
13:03:09,275 --> 13:03:14,559
is going to um do a switch statement so
14742
13:03:22,000 --> 13:03:25,275
warning that we're getting here saying
14743
13:03:23,360 --> 13:03:27,520
the missing cause clause for log out
14744
13:03:25,275 --> 13:03:28,559
dart is already understanding that
14745
13:03:28,559 --> 13:03:33,756
there's a case statement and there's a
14746
13:03:31,116 --> 13:03:35,276
case in this menu action enumeration
14747
13:03:33,756 --> 13:03:37,756
that we're not handling and it's asking
14748
13:03:35,275 --> 13:03:38,559
us to do that so you could tap on this
14749
13:03:38,559 --> 13:03:43,115
here icon and say add missing case
14750
13:03:40,879 --> 13:03:45,199
clauses or you can say command dot on
14751
13:03:43,116 --> 13:03:48,000
mac or control dot on linux and windows
14752
13:03:45,199 --> 13:03:49,680
to bring up this menu also and i've also
14753
13:03:48,000 --> 13:03:51,915
understood from my conversations with
14754
13:03:49,680 --> 13:03:53,756
others on linkedin that this option is
14755
13:03:53,756 --> 13:03:58,720
and other editors because this is part
14756
13:03:55,436 --> 13:04:00,639
of the language front end actually so
14757
13:03:58,720 --> 13:04:03,520
it's not only a thing you can do in
14758
13:04:00,639 --> 13:04:04,319
visual studio code thankfully
14759
13:04:04,319 --> 13:04:09,275
go and add the missing case clauses
14760
13:04:07,199 --> 13:04:12,319
and in this case what we need to do now
14761
13:04:09,275 --> 13:04:16,000
is to display our alert so we're going
14762
13:04:12,319 --> 13:04:18,955
to say await should log out or something
14763
13:04:18,955 --> 13:04:22,879
should log out is equal to wait and now
14764
13:04:21,275 --> 13:04:25,360
we're going to call this function that
14765
13:04:28,879 --> 13:04:33,040
and now it's complaining saying that you
14766
13:04:30,559 --> 13:04:35,519
can't do wait because this function here
14767
13:04:33,040 --> 13:04:37,040
is unselected is not asynchronous so now
14768
13:04:35,519 --> 13:04:39,519
we're gonna make it asynchronous and
14769
13:04:40,639 --> 13:04:48,639
should log out to a string okay
14770
13:04:44,800 --> 13:04:50,160
so command s and let's go to our ui now
14771
13:04:48,639 --> 13:04:51,756
and i'm going because we're doing
14772
13:04:50,160 --> 13:04:53,840
devtools log i'm going to bring up the
14773
13:04:51,756 --> 13:04:56,000
debug console here clear it so you see
14774
13:04:53,839 --> 13:04:57,839
better and i'm going to press the log
14775
13:04:56,000 --> 13:04:59,519
out now you see our dialogue is
14776
13:04:57,839 --> 13:05:01,199
displayed to the user saying sign up are
14777
13:04:59,519 --> 13:05:04,399
you sure you want to sign up with our
14778
13:05:01,199 --> 13:05:05,755
buttons pressing the cancel button where
14779
13:05:04,400 --> 13:05:07,756
we're then going to come to the
14780
13:05:05,756 --> 13:05:10,800
unselected here and get the value of
14781
13:05:07,756 --> 13:05:12,800
false boof you see right there
14782
13:05:10,800 --> 13:05:14,956
pressing the same button again saying
14783
13:05:12,800 --> 13:05:18,720
log out and then log out here we're
14784
13:05:14,955 --> 13:05:18,720
going to get the value of true
14785
13:05:19,436 --> 13:05:23,680
wow that was also a lot of information
14786
13:05:21,915 --> 13:05:25,040
so i'm just going to go to my notes and
14787
13:05:23,680 --> 13:05:26,720
ensure that i've explained everything
14788
13:05:32,480 --> 13:05:36,560
now that we've displayed amnata we can
14789
13:05:34,559 --> 13:05:38,559
actually display a dialog to the user
14790
13:05:36,559 --> 13:05:40,319
get the true and false values back we
14791
13:05:38,559 --> 13:05:43,040
need to also ensure that we're actually
14792
13:05:40,319 --> 13:05:44,800
logging out from firebase as well so the
14793
13:05:43,040 --> 13:05:46,480
true or false isn't enough we need to
14794
13:05:44,800 --> 13:05:48,080
log out from firebase and the way to do
14795
13:05:46,480 --> 13:05:50,240
that as you can see in the code here in
14796
13:05:48,080 --> 13:05:53,360
the captions is firebase auth instance
14797
13:05:55,756 --> 13:05:59,040
what we need to do then is to call a
14798
13:06:11,436 --> 13:06:15,840
then we are going to do that because you
14799
13:06:13,519 --> 13:06:17,595
see this should log out says true if you
14800
13:06:15,839 --> 13:06:19,199
do have to log out and false if you
14801
13:06:17,595 --> 13:06:20,955
don't have to so we just made sure that
14802
13:06:19,199 --> 13:06:23,360
it's true okay so you can either say it
14803
13:06:20,955 --> 13:06:26,799
should log out or you can say if it
14804
13:06:23,360 --> 13:06:28,879
shouldn't log out then return
14805
13:06:26,800 --> 13:06:30,639
and then you do the actual log out after
14806
13:06:28,879 --> 13:06:33,040
this so it completely depends on your
14807
13:06:30,639 --> 13:06:34,400
style i'm just gonna do if should log
14808
13:06:33,040 --> 13:06:36,955
out because it makes more like
14809
13:06:34,400 --> 13:06:38,480
grammatical sense for me if i should log
14810
13:06:36,955 --> 13:06:41,040
out and do this then saying if i
14811
13:06:38,480 --> 13:06:42,640
shouldn't log out don't do this
14812
13:06:41,040 --> 13:06:44,879
it's a little bit of a preference but
14813
13:06:42,639 --> 13:06:46,159
you're free to to choose your own style
14814
13:06:48,955 --> 13:06:53,839
um instance as we can see here and then
14815
13:06:53,839 --> 13:06:57,755
and you can see that it returns a future
14816
13:06:57,756 --> 13:07:02,840
so let's call it and then we say wait
14817
13:07:02,839 --> 13:07:09,115
right and now that we've done that
14818
13:07:06,720 --> 13:07:11,520
uh after we sign the user out then
14819
13:07:09,116 --> 13:07:13,680
there's no point keeping the user in
14820
13:07:11,519 --> 13:07:15,519
this user interface because this user
14821
13:07:13,680 --> 13:07:17,360
interface is only for people who are
14822
13:07:15,519 --> 13:07:19,755
logged into the application and signing
14823
13:07:17,360 --> 13:07:21,595
out from firebase means that well you're
14824
13:07:19,756 --> 13:07:24,000
not logged out anymore okay or you're
14825
13:07:21,595 --> 13:07:26,955
not signed in anymore sorry you're not
14826
13:07:24,000 --> 13:07:28,720
logged in anymore signed in anymore
14827
13:07:26,955 --> 13:07:31,436
they could be used interchangeably sign
14828
13:07:28,720 --> 13:07:34,000
in or log in and log out and sign up
14829
13:07:31,436 --> 13:07:37,436
depends of the lingo that you prefer to
14830
13:07:37,436 --> 13:07:41,275
i also use these terms interchangeably
14831
13:07:39,436 --> 13:07:43,275
so if i say sometimes sign out or log
14832
13:07:43,275 --> 13:07:46,720
all right in this case after you sign up
14833
13:07:45,360 --> 13:07:48,879
we also want to send you to the login
14834
13:07:46,720 --> 13:07:50,880
screen because that's like the in in my
14835
13:07:48,879 --> 13:07:52,479
opinion at least it's the most common
14836
13:07:50,879 --> 13:07:53,755
thing to do if you sign out of an
14837
13:07:52,480 --> 13:07:55,596
application you then go back to the
14838
13:07:55,595 --> 13:07:58,399
otherwise if you for instance are
14839
13:07:58,400 --> 13:08:03,275
website and then there is like a
14840
13:08:00,879 --> 13:08:06,239
a forum website or something and
14841
13:08:03,275 --> 13:08:08,799
the user goes and logs out you may send
14842
13:08:06,239 --> 13:08:10,479
them them to not to the login page but
14843
13:08:08,800 --> 13:08:12,560
but you may actually send them to like a
14844
13:08:10,480 --> 13:08:14,800
read-only copy of all the forms
14845
13:08:12,559 --> 13:08:16,399
available in your in your website but
14846
13:08:16,400 --> 13:08:20,955
any content to display to a user who has
14847
13:08:19,040 --> 13:08:22,559
signed out the only thing we can display
14848
13:08:20,955 --> 13:08:24,799
to them is the login screen because we
14849
13:08:22,559 --> 13:08:27,915
don't have any other content to display
14850
13:08:24,800 --> 13:08:29,756
okay so upon signing out we're gonna
14851
13:08:27,915 --> 13:08:30,955
send you to the login screen so let's do
14852
13:08:30,955 --> 13:08:36,000
so we're gonna see navigator
14853
13:08:32,800 --> 13:08:38,480
as you can see in the caption of um
14854
13:08:38,480 --> 13:08:43,436
and we're saying push remove push name
14855
13:08:41,436 --> 13:08:45,360
and remove until and then we're going to
14856
13:08:53,595 --> 13:09:01,115
all right does this make sense
14857
13:08:56,559 --> 13:09:01,115
so let's then see if this works um
14858
13:09:02,720 --> 13:09:06,239
let's have a look at that uh let me also
14859
13:09:04,800 --> 13:09:07,520
go to my notes to ensure that i'm
14860
13:09:12,239 --> 13:09:17,595
great and let's just make sure that sign
14861
13:09:14,720 --> 13:09:19,116
out is working okay so log out we say no
14862
13:09:17,595 --> 13:09:21,360
just to test that that is working and
14863
13:09:19,116 --> 13:09:23,116
then log out and then we say log out
14864
13:09:21,360 --> 13:09:24,800
here and i can see i'm even using the
14865
13:09:23,116 --> 13:09:26,000
language like interchangeably here which
14866
13:09:24,800 --> 13:09:28,240
is not a good idea are you sure you want
14867
13:09:26,000 --> 13:09:30,239
to sign out and then a log out button
14868
13:09:28,239 --> 13:09:31,680
it's not perfect but it works
14869
13:09:30,239 --> 13:09:33,680
you're free to change this if you want
14870
13:09:31,680 --> 13:09:35,595
to and then if you say log out then we
14871
13:09:33,680 --> 13:09:37,436
should go back to the login screen
14872
13:09:37,436 --> 13:09:41,200
that is working but something isn't
14873
13:09:39,595 --> 13:09:42,879
working quite right and i'll tell you
14874
13:09:41,199 --> 13:09:44,479
soon but before we do that let's go to
14875
13:09:44,480 --> 13:09:49,520
go to here i have two terminals one for
14876
13:09:46,800 --> 13:09:51,200
scr cpy and the other terminal is for
14877
13:09:49,519 --> 13:09:53,915
doing commits messages i'm going to
14878
13:09:51,199 --> 13:09:55,360
bring up actually so you see it better
14879
13:09:53,915 --> 13:09:56,639
so what we need to do as we've done in
14880
13:09:55,360 --> 13:09:58,080
the previous chapter is now that we have
14881
13:09:58,080 --> 13:10:04,160
set up let's commit our work and we're
14882
13:10:00,639 --> 13:10:05,915
going to call this step three okay
14883
13:10:04,160 --> 13:10:07,680
so that's what we're going to do now we
14884
13:10:05,915 --> 13:10:09,595
are going to commit our work and we're
14885
13:10:09,595 --> 13:10:13,360
so let's say git status just to have a
14886
13:10:11,756 --> 13:10:15,040
look at what we've changed i can see
14887
13:10:13,360 --> 13:10:17,680
that there's only changes in the main
14888
13:10:15,040 --> 13:10:20,239
dark file and you can also say git if so
14889
13:10:17,680 --> 13:10:21,915
you can see what you've changed you see
14890
13:10:20,239 --> 13:10:23,040
all the green ones are new and all the
14891
13:10:21,915 --> 13:10:25,040
red ones are things that you've
14892
13:10:23,040 --> 13:10:26,879
basically removed or replaced with new
14893
13:10:26,879 --> 13:10:30,719
for instance this one was removed this
14894
13:10:29,040 --> 13:10:32,955
one was removed and this one was added
14895
13:10:30,720 --> 13:10:36,639
all right so quite a bit of information
14896
13:10:32,955 --> 13:10:38,400
here let's say it gets at all so we
14897
13:10:36,639 --> 13:10:40,159
add all those to the staging environment
14898
13:10:38,400 --> 13:10:42,560
in order to commit them and then i'm
14899
13:10:40,160 --> 13:10:44,640
going to say git commit with a message
14900
13:10:44,639 --> 13:10:48,400
and let's have a look at our logs i can
14901
13:10:46,559 --> 13:10:51,680
see initial commit which is step one and
14902
13:10:48,400 --> 13:10:54,239
then step two and then step three
14903
13:10:51,680 --> 13:10:57,040
and then you will push these changes or
14904
13:10:54,239 --> 13:10:58,559
push the commits to github all right
14905
13:10:57,040 --> 13:11:00,239
now i'm gonna clear that terminal here
14906
13:10:58,559 --> 13:11:01,915
and we also need to tag our code
14907
13:11:00,239 --> 13:11:04,479
remember commits are not the same thing
14908
13:11:01,915 --> 13:11:06,559
as tags so i'm going to say git tag step
14909
13:11:10,879 --> 13:11:18,399
so that pushed the tags as well great
14910
13:11:14,879 --> 13:11:20,319
wow that was a lot of work um
14911
13:11:22,639 --> 13:11:26,639
keep up with me in this chapter as we
14912
13:11:24,720 --> 13:11:28,080
went through all these different bits
14913
13:11:26,639 --> 13:11:30,879
and pieces that we had to put in place
14914
13:11:28,080 --> 13:11:32,800
for the log out to work but like at such
14915
13:11:30,879 --> 13:11:34,799
an integral part of our application that
14916
13:11:32,800 --> 13:11:36,480
i think it's worth spending some time
14917
13:11:34,800 --> 13:11:38,480
explaining how things are working also
14918
13:11:36,480 --> 13:11:39,200
talk about a little bit of like basics
14919
13:11:39,199 --> 13:11:44,879
the show dialogue and menu items pop-ups
14920
13:11:42,559 --> 13:11:46,239
etc etc so once we talk about them now
14921
13:11:44,879 --> 13:11:48,239
we don't have to talk more about them
14922
13:11:48,239 --> 13:11:53,595
remember i told you something isn't
14923
13:11:53,595 --> 13:11:57,360
and that's what we're going to fix in
14924
13:11:55,116 --> 13:11:59,276
the next chapter which is fixing the
14925
13:11:57,360 --> 13:12:01,756
login screen and i'll tell you what is
14926
13:11:59,275 --> 13:12:04,799
isn't working if you now go in here and
14927
13:12:05,360 --> 13:12:09,595
and put your password in you can see
14928
13:12:07,436 --> 13:12:11,596
pressing login doesn't do anything
14929
13:12:09,595 --> 13:12:13,275
it just logs into the application
14930
13:12:11,595 --> 13:12:14,639
because if you go to login view and we
14931
13:12:13,275 --> 13:12:15,595
have a look at the code that we wrote
14932
13:12:15,595 --> 13:12:19,115
let me get rid of the console here
14933
13:12:19,116 --> 13:12:22,639
button that was pressed upon pressing it
14934
13:12:21,275 --> 13:12:25,115
all we're doing is just we're doing a
14935
13:12:22,639 --> 13:12:27,595
print user credential and you can see
14936
13:12:25,116 --> 13:12:30,319
that if you go here oh i can see i
14937
13:12:27,595 --> 13:12:32,955
actually got wrong password so let me go
14938
13:12:34,080 --> 13:12:36,639
now we got the user credential here you
14939
13:12:36,639 --> 13:12:40,479
but still nothing worked even if you
14940
13:12:38,800 --> 13:12:41,360
provide the correct user credentials
14941
13:12:41,360 --> 13:12:45,756
it's not working as it should and by
14942
13:12:43,360 --> 13:12:47,840
that i mean it's not taking you to the
14943
13:12:45,756 --> 13:12:49,595
next step what should happen in the next
14944
13:12:50,639 --> 13:12:55,199
that is what we're gonna fix in the next
14945
13:12:52,559 --> 13:12:57,275
chapter we're gonna work on fixing the
14946
13:12:55,199 --> 13:12:59,755
login view so for this chapter all you
14947
13:12:59,756 --> 13:13:04,955
uh take care of our main user interface
14948
13:13:04,955 --> 13:13:10,400
done text widget that we were displaying
14949
13:13:08,239 --> 13:13:14,159
at the end of the previous chapter
14950
13:13:10,400 --> 13:13:15,275
and we have now a main ui with a
14951
13:13:15,275 --> 13:13:18,879
bar item on top right and pressing that
14952
13:13:22,720 --> 13:13:28,080
item in it upon pressing which then you
14953
13:13:24,955 --> 13:13:29,360
get a dialog and then if you cancel
14954
13:13:29,360 --> 13:13:33,116
you go back to the main ui and if you
14955
13:13:31,040 --> 13:13:34,720
say log out or sign out you go back to
14956
13:13:33,116 --> 13:13:36,560
the long view so there was a lot of work
14957
13:13:34,720 --> 13:13:38,319
that we did and congratulations for you
14958
13:13:39,199 --> 13:13:43,275
uh get ready then and whatever you want
14959
13:13:41,275 --> 13:13:45,436
to do get some refreshments and that we
14960
13:13:43,275 --> 13:13:47,040
will fix our login screen in the next
14961
13:13:47,040 --> 13:13:50,639
hello and welcome to chapter 19 of the
14962
13:13:50,639 --> 13:13:53,756
in the previous chapter we worked on log
14963
13:13:53,756 --> 13:14:00,000
and after we completed log out you saw
14964
13:13:56,639 --> 13:14:01,915
that we went to the login screen and um
14965
13:14:00,000 --> 13:14:03,199
that it wasn't really working as it
14966
13:14:03,199 --> 13:14:07,915
what it was doing is um that it was
14967
13:14:05,680 --> 13:14:10,239
logging you in with firebase and it was
14968
13:14:07,915 --> 13:14:12,799
printing the user credentials to
14969
13:14:12,800 --> 13:14:16,880
or the cons basically the console and we
14970
13:14:16,879 --> 13:14:22,319
but the login view wasn't actually going
14971
13:14:22,319 --> 13:14:25,680
so as you can see here it says the login
14972
13:14:24,000 --> 13:14:26,720
doesn't route properly it just stays
14973
13:14:26,720 --> 13:14:30,239
does nothing upon successful login and
14974
13:14:29,040 --> 13:14:32,239
that's exactly what we're going to
14975
13:14:30,239 --> 13:14:33,756
address in this chapter this chapter is
14976
13:14:32,239 --> 13:14:35,756
going to be quite a short one because
14977
13:14:33,756 --> 13:14:38,000
all we're basically doing is just doing
14978
13:14:35,756 --> 13:14:40,480
some cleanup and we're going to go from
14979
13:14:38,000 --> 13:14:42,319
the login screen to um the login view to
14980
13:14:40,480 --> 13:14:44,080
the note c and we're going to remove
14981
13:14:44,800 --> 13:14:49,200
print statements um and this is like
14982
13:14:46,955 --> 13:14:50,799
what what is gonna happen as you become
14983
13:14:49,199 --> 13:14:52,000
more and more of a software developer
14984
13:14:50,800 --> 13:14:53,840
and that sometimes you do the heavy
14985
13:14:52,000 --> 13:14:56,879
lifting as we did in the previous
14986
13:14:53,839 --> 13:15:00,079
chapter we took care of uh logout
14987
13:14:56,879 --> 13:15:04,000
and you learned a lot about new classes
14988
13:15:00,080 --> 13:15:06,560
like the buttons and the menus and
14989
13:15:04,000 --> 13:15:08,080
unpressed of those menu items and then
14990
13:15:06,559 --> 13:15:09,680
after you've done that you'll probably
14991
13:15:08,080 --> 13:15:12,080
spend some time to clean up the code and
14992
13:15:09,680 --> 13:15:13,199
this is one of those chapters that we're
14993
13:15:16,160 --> 13:15:20,400
so let's have a look at the first thing
14994
13:15:17,680 --> 13:15:21,915
that we need to remedy and that is our
14995
13:15:22,879 --> 13:15:28,755
let's have a look at the code i'm going
14996
13:15:29,275 --> 13:15:35,839
so i think we call it my nodes so here i
14997
13:15:35,839 --> 13:15:39,839
and i'm going to get rid of the debug
14998
13:15:37,915 --> 13:15:42,559
console right there and i'm going to
14999
13:15:42,559 --> 13:15:46,879
which i have somewhere around here
15000
13:15:44,800 --> 13:15:48,720
okay so you can see in login view we
15001
13:15:46,879 --> 13:15:50,319
have quite a lot of print statements at
15002
13:15:48,720 --> 13:15:52,239
the moment they just say print user not
15003
13:15:50,319 --> 13:15:53,915
found wrong password user credentials
15004
13:15:53,915 --> 13:15:58,799
and we also have a register view here
15005
13:15:56,080 --> 13:16:02,000
which has a few print statements so
15006
13:15:58,800 --> 13:16:04,639
let's go and remedy this and use log as
15007
13:16:02,000 --> 13:16:08,160
we talked about it before so let's say
15008
13:16:08,480 --> 13:16:11,596
view layout here so you see the code a
15009
13:16:11,595 --> 13:16:15,040
let's go and use log and if you don't
15010
13:16:13,756 --> 13:16:16,720
know the difference between log and
15011
13:16:15,040 --> 13:16:18,080
print nice drawing i strongly suggest
15012
13:16:16,720 --> 13:16:20,400
that you watch the previous chapters
15013
13:16:18,080 --> 13:16:22,400
where we talked about this and why it is
15014
13:16:20,400 --> 13:16:23,596
actually advised to use log instead of
15015
13:16:23,595 --> 13:16:26,319
and login itself isn't perfect it has
15016
13:16:29,040 --> 13:16:33,436
not problems maybe downsize or things
15017
13:16:31,199 --> 13:16:34,559
that you need to be aware of and i
15018
13:16:33,436 --> 13:16:37,040
highly suggest that you read the
15019
13:16:34,559 --> 13:16:38,559
documentations for log as well but um in
15020
13:16:37,040 --> 13:16:41,200
this case as you can see it's also
15021
13:16:38,559 --> 13:16:43,756
suggested by the analyzer not to use a
15022
13:16:41,199 --> 13:16:45,435
print so we're going to change that to
15023
13:16:43,756 --> 13:16:46,955
both in the login view and registry
15024
13:16:45,436 --> 13:16:49,596
we're going to change that to
15025
13:16:46,955 --> 13:16:53,756
using log so let's go ahead and say
15026
13:16:49,595 --> 13:16:56,079
import dart developer and as devtools
15027
13:16:53,756 --> 13:16:58,720
show log all right now i'm gonna copy
15028
13:16:56,080 --> 13:17:01,436
paste this in here as well and at the
15029
13:16:58,720 --> 13:17:05,116
same time i'm gonna clean up the code a
15030
13:17:01,436 --> 13:17:05,116
little bit in register view all right
15031
13:17:05,275 --> 13:17:10,079
okay we've done the import in login view
15032
13:17:07,595 --> 13:17:11,756
and register you want to save those and
15033
13:17:10,080 --> 13:17:13,756
now let's go to the login view and
15034
13:17:11,756 --> 13:17:16,720
remove all these print statements and
15035
13:17:17,595 --> 13:17:21,756
and we're just going to say user
15036
13:17:19,040 --> 13:17:23,756
credential to string okay remember print
15037
13:17:28,800 --> 13:17:32,720
you can see the function signatures is
15038
13:17:32,720 --> 13:17:37,840
object which is kind of peculiar that it
15039
13:17:34,720 --> 13:17:38,880
can print an optional object i mean
15040
13:17:38,879 --> 13:17:42,479
does it mean that i don't have to
15041
13:17:40,160 --> 13:17:44,240
actually pass a parameter no it has a
15042
13:17:42,480 --> 13:17:46,840
positional argument but that argument
15043
13:17:49,040 --> 13:17:53,915
value is null like this like an optional
15044
13:17:51,756 --> 13:17:56,639
and just pass that here so i animal
15045
13:17:53,915 --> 13:17:59,435
still work that's what it means so let's
15046
13:17:56,639 --> 13:18:00,639
have fun it can accept an optional
15047
13:18:00,639 --> 13:18:06,080
and remember every object has a function
15048
13:18:03,275 --> 13:18:07,915
called to string so this two string
15049
13:18:06,080 --> 13:18:09,916
functions actually coming from objects
15050
13:18:07,915 --> 13:18:12,719
so we can command click on it
15051
13:18:09,915 --> 13:18:15,275
and you'll see that uh let's see oh that
15052
13:18:15,275 --> 13:18:21,199
user credential but if we look at um
15053
13:18:21,839 --> 13:18:26,000
if we create for instance how do i
15054
13:18:24,080 --> 13:18:26,800
explain the tostring and where it comes
15055
13:18:27,756 --> 13:18:32,080
let's let's do it like this let's say we
15056
13:18:32,080 --> 13:18:37,276
optional object value and that is null
15057
13:18:34,879 --> 13:18:38,955
now i can say value to string you see
15058
13:18:38,955 --> 13:18:43,915
so these are the op these are the
15059
13:18:41,040 --> 13:18:47,840
functions and properties that any object
15060
13:18:50,080 --> 13:18:55,276
implicitly a subclass of object
15061
13:18:52,800 --> 13:18:57,680
including user credential meaning that
15062
13:18:55,275 --> 13:19:00,400
user credential has inherited the
15063
13:19:00,559 --> 13:19:05,275
function from the object class however
15064
13:19:03,915 --> 13:19:07,040
if you looked at the source code for
15065
13:19:05,275 --> 13:19:08,479
this particular two string you can see
15066
13:19:07,040 --> 13:19:11,360
it comes from package firebase off
15067
13:19:08,480 --> 13:19:14,480
firebase off the dart meaning that user
15068
13:19:11,360 --> 13:19:16,160
credential this class has overwritten
15069
13:19:14,480 --> 13:19:18,880
the functionality of tostring meaning
15070
13:19:16,160 --> 13:19:20,880
that it is returning its own string to
15071
13:19:20,879 --> 13:19:23,915
and that's this long string that we saw
15072
13:19:23,915 --> 13:19:27,595
we can't see it now but let me see if i
15073
13:19:27,595 --> 13:19:32,000
log in here so you see it poof
15074
13:19:30,080 --> 13:19:33,596
and you see this user credential that is
15075
13:19:33,595 --> 13:19:38,319
let me change the screen layout a little
15076
13:19:39,595 --> 13:19:43,680
this is being printed or this is being
15077
13:19:43,680 --> 13:19:46,955
the to string function on user
15078
13:19:45,680 --> 13:19:48,480
credential and you can see it looks like
15079
13:19:46,955 --> 13:19:49,680
this user credential and then additional
15080
13:19:48,480 --> 13:19:50,880
information and then prints the
15081
13:19:49,680 --> 13:19:52,879
additional information and that's
15082
13:19:50,879 --> 13:19:54,479
exactly what you can see here you see
15083
13:19:52,879 --> 13:19:58,239
additional user info and then there's
15084
13:19:59,040 --> 13:20:03,436
it should be somewhere around here
15085
13:20:01,199 --> 13:20:07,039
is anonymous is here credential that's
15086
13:20:03,436 --> 13:20:10,160
the key and then another one called user
15087
13:20:10,160 --> 13:20:14,880
it's somewhere in here i can't see it
15088
13:20:12,080 --> 13:20:15,840
really but it should be somewhere in
15089
13:20:15,839 --> 13:20:19,679
user password i mean to be honest if you
15090
13:20:17,915 --> 13:20:22,239
copied this like if i actually copied
15091
13:20:19,680 --> 13:20:24,720
this and brought it into its own file
15092
13:20:28,319 --> 13:20:31,680
it's a little bit strange that it's all
15093
13:20:29,839 --> 13:20:34,319
in one line but that's okay too i'm
15094
13:20:31,680 --> 13:20:36,239
going to search for user boom
15095
13:20:34,319 --> 13:20:40,159
and that is the user information you can
15096
13:20:36,239 --> 13:20:42,159
see user is user display name etc so
15097
13:20:40,160 --> 13:20:43,916
that's two string okay the reason i'm
15098
13:20:42,160 --> 13:20:45,436
explaining all of this is because you
15099
13:20:43,915 --> 13:20:49,040
need to know that print can print an
15100
13:20:45,436 --> 13:20:50,639
object but log can't log needs a string
15101
13:20:49,040 --> 13:20:52,559
so if you look at the function signature
15102
13:20:50,639 --> 13:20:53,436
it says give me a message of type string
15103
13:20:54,239 --> 13:20:57,756
um that's what we're doing here we're
15104
13:20:56,000 --> 13:21:00,239
saying devtools log and then user
15105
13:21:00,239 --> 13:21:05,040
we need to do the tostring okay
15106
13:21:02,239 --> 13:21:06,159
so go ahead copy this dev tools log and
15107
13:21:06,160 --> 13:21:09,840
let's change all these print statements
15108
13:21:07,839 --> 13:21:12,559
to say that that's what needs to be
15109
13:21:12,559 --> 13:21:16,079
change all of those in your login view
15110
13:21:14,400 --> 13:21:17,040
so that you don't have any more warnings
15111
13:21:19,116 --> 13:21:22,639
save your login view and then go to
15112
13:21:20,639 --> 13:21:23,756
register view and do the exact same
15113
13:21:28,480 --> 13:21:33,680
and for weak password do the same thing
15114
13:21:31,519 --> 13:21:36,239
email to the same thing and then invalid
15115
13:21:33,680 --> 13:21:38,720
email entered and we have no other print
15116
13:21:36,239 --> 13:21:39,915
statements and what you could do i mean
15117
13:21:42,480 --> 13:21:47,436
in my notes here i don't see
15118
13:21:45,756 --> 13:21:48,955
anywhere that i'd plan for that but i
15119
13:21:49,756 --> 13:21:52,720
we could just improvise a little bit and
15120
13:21:51,275 --> 13:21:54,559
what i really like to do when i'm doing
15121
13:21:52,720 --> 13:21:56,160
like cleanups like this in my source
15122
13:21:54,559 --> 13:21:58,399
code i like to go and make sure that
15123
13:21:56,160 --> 13:22:01,276
there's no print statement statement
15124
13:21:58,400 --> 13:22:03,275
anywhere else because it just feels like
15125
13:22:01,275 --> 13:22:04,479
when you're clean on cleaning up your
15126
13:22:03,275 --> 13:22:06,000
code especially if you're doing
15127
13:22:04,480 --> 13:22:08,560
something as simple as what we're doing
15128
13:22:06,000 --> 13:22:10,080
here it is worth spending maybe just a
15129
13:22:08,559 --> 13:22:11,839
few more seconds and making sure that
15130
13:22:10,080 --> 13:22:14,240
you're applying the same cleanup in the
15131
13:22:11,839 --> 13:22:17,359
entire source now sometimes your source
15132
13:22:14,239 --> 13:22:19,839
code may be so big and complicated that
15133
13:22:17,360 --> 13:22:21,756
you changing even a simple bit of code
15134
13:22:19,839 --> 13:22:23,595
may affect the source code in such a way
15135
13:22:21,756 --> 13:22:25,520
that you may not know if you're breaking
15136
13:22:26,639 --> 13:22:32,080
and for that we need tests unit tests
15137
13:22:28,800 --> 13:22:33,436
widget tests etc but if that is the case
15138
13:22:32,080 --> 13:22:35,040
you don't have to do that but in this
15139
13:22:33,436 --> 13:22:37,040
case since our application is so new
15140
13:22:35,040 --> 13:22:38,720
we've just created it there's not much
15141
13:22:37,040 --> 13:22:40,800
logic in it i think it's worth maybe
15142
13:22:40,800 --> 13:22:44,560
in visual studio on mac or ctrl shift f
15143
13:22:43,199 --> 13:22:46,955
it was just here to go on linux and
15144
13:22:44,559 --> 13:22:49,435
windows just to go go to this global
15145
13:22:46,955 --> 13:22:51,040
search and just search for print
15146
13:22:49,436 --> 13:22:53,436
and i can see here that we don't have
15147
13:22:51,040 --> 13:22:54,800
any print left in our source code so we
15148
13:22:53,436 --> 13:22:56,800
don't have to change anything else all
15149
13:22:54,800 --> 13:22:59,360
the prints seem to have been in the
15150
13:22:56,800 --> 13:23:03,596
login view and in the register view so
15151
13:22:59,360 --> 13:23:03,595
don't worry about that anymore okay
15152
13:23:08,839 --> 13:23:14,399
um so now what we need to do is to
15153
13:23:15,360 --> 13:23:19,040
yeah basically we need to now focus on
15154
13:23:16,955 --> 13:23:21,839
what we wanted to do in this chapter
15155
13:23:19,040 --> 13:23:24,000
that was a side kind of like a
15156
13:23:21,839 --> 13:23:24,955
side note there to clean up our print
15157
13:23:24,000 --> 13:23:26,400
statements what we need to do in this
15158
13:23:24,955 --> 13:23:28,955
chapter to make sure that we can go from
15159
13:23:28,955 --> 13:23:32,559
notes view i believe is what we created
15160
13:23:32,559 --> 13:23:39,839
and one of the previous chapters um
15161
13:23:35,915 --> 13:23:39,839
is it here in the main dart perhaps
15162
13:23:43,436 --> 13:23:48,160
so let's do that and you remember from
15163
13:23:46,000 --> 13:23:49,595
the previous chapters where we oh we
15164
13:23:51,680 --> 13:23:54,800
if you remember from one of the previous
15165
13:23:52,955 --> 13:23:56,479
chapters where we talked about named
15166
13:23:54,800 --> 13:23:59,680
routes and named routes as you can see
15167
13:23:56,480 --> 13:24:02,160
that are defined in the main function
15168
13:23:59,680 --> 13:24:05,275
now remember the main function
15169
13:24:05,275 --> 13:24:10,239
when you do a hot reload keep that in
15170
13:24:07,915 --> 13:24:13,360
mind so we're now going to modify our
15171
13:24:10,239 --> 13:24:15,519
routes and allow and create a new route
15172
13:24:13,360 --> 13:24:18,559
as you can see here it's called nodes
15173
13:24:15,519 --> 13:24:21,755
actually it should be node slash
15174
13:24:18,559 --> 13:24:24,079
so i'm going to hide this caption
15175
13:24:21,756 --> 13:24:26,080
and change it so that it is actually
15176
13:24:27,519 --> 13:24:32,000
um and i'm going to bring it up
15177
13:24:32,000 --> 13:24:34,879
correct route that we have to create
15178
13:24:34,879 --> 13:24:39,275
so let's go in here and create a new
15179
13:24:43,116 --> 13:24:46,240
push this route on the screen will get
15180
13:24:48,000 --> 13:24:53,199
on their screen okay so let's just say
15181
13:24:50,160 --> 13:24:54,720
as a string and notes slash as the
15182
13:24:53,199 --> 13:24:58,319
captions suggest and then you have to
15183
13:24:54,720 --> 13:25:00,319
provide remember the routes was a map
15184
13:24:58,319 --> 13:25:03,199
where the keys were strings and the
15185
13:25:00,319 --> 13:25:05,199
values had to be functions that accept
15186
13:25:03,199 --> 13:25:07,039
the build context and return a widget
15187
13:25:05,199 --> 13:25:09,115
it's a little bit of a string syntax but
15188
13:25:07,040 --> 13:25:10,800
you'll get used to so the value should
15189
13:25:09,116 --> 13:25:12,955
accept the build context as you can see
15190
13:25:10,800 --> 13:25:15,756
here and it should return a widget so in
15191
13:25:12,955 --> 13:25:18,639
this case we return the notes view okay
15192
13:25:19,040 --> 13:25:24,879
okay that part is done now so
15193
13:25:22,239 --> 13:25:27,436
what we need to do now is to ensure that
15194
13:25:24,879 --> 13:25:30,000
upon pressing the login view sorry upon
15195
13:25:27,436 --> 13:25:33,680
press upon pressing the login button
15196
13:25:30,000 --> 13:25:36,480
that we are doing a code similar to
15197
13:25:33,680 --> 13:25:38,559
what we did in um if you look here in
15198
13:25:36,480 --> 13:25:40,000
our login view when we went to register
15199
13:25:38,559 --> 13:25:44,799
do you remember this navigator of
15200
13:25:40,000 --> 13:25:45,839
context push name and remove until okay
15201
13:25:45,839 --> 13:25:50,399
we need to we need to do that and
15202
13:25:50,400 --> 13:25:54,080
when we did this initially when we
15203
13:25:52,160 --> 13:25:55,840
worked with push name and remove until i
15204
13:25:54,080 --> 13:25:58,240
don't think i actually explained
15205
13:25:55,839 --> 13:26:00,559
entirely what push named and remove
15206
13:26:02,955 --> 13:26:07,436
as its name suggests it pushes around on
15207
13:26:05,680 --> 13:26:09,199
the screen so it says that you have a
15208
13:26:07,436 --> 13:26:10,955
screen and you want to put something on
15209
13:26:09,199 --> 13:26:12,479
top of it okay so pushing is something
15210
13:26:10,955 --> 13:26:14,720
that is very popular in mobile
15211
13:26:16,319 --> 13:26:21,436
usually i mean after ios came um
15212
13:26:19,680 --> 13:26:23,116
it became very popular that you had a
15213
13:26:21,436 --> 13:26:26,160
screen you press the button and another
15214
13:26:23,116 --> 13:26:27,840
screen got pushed on top of that screen
15215
13:26:26,160 --> 13:26:29,840
so this has been available i mean in
15216
13:26:27,839 --> 13:26:32,000
many other places even web browsers are
15217
13:26:29,839 --> 13:26:33,915
not doing it these days and even nokia
15218
13:26:32,000 --> 13:26:35,360
phones in in the good old days were
15219
13:26:33,915 --> 13:26:38,000
doing the same thing but it wasn't as
15220
13:26:35,360 --> 13:26:40,319
popular back then and it wasn't like
15221
13:26:38,000 --> 13:26:42,080
coined as a term of pushing until ios
15222
13:26:40,319 --> 13:26:43,756
and android became more and more popular
15223
13:26:45,116 --> 13:26:48,319
pushing is the concept of having a
15224
13:26:48,319 --> 13:26:52,800
moving and pushing physically another
15225
13:26:52,800 --> 13:26:58,000
so that's what push means in push name
15226
13:26:56,080 --> 13:27:00,000
all right the named part of this
15227
13:26:58,000 --> 13:27:02,319
function means that you have a named
15228
13:27:00,000 --> 13:27:05,199
route so you have defined a route
15229
13:27:02,319 --> 13:27:07,595
somewhere such as your main screen here
15230
13:27:05,199 --> 13:27:09,360
and you are trying to push that using
15231
13:27:07,595 --> 13:27:11,680
its name so you're not just pushing a
15232
13:27:09,360 --> 13:27:13,680
new widget out of nowhere okay so that's
15233
13:27:14,639 --> 13:27:20,559
the part that says and remove until
15234
13:27:20,559 --> 13:27:23,839
if you have for instance one screen here
15235
13:27:22,319 --> 13:27:25,839
another one is pushed on top of it and
15236
13:27:23,839 --> 13:27:27,039
now you want to push another one on the
15237
13:27:27,040 --> 13:27:30,800
what the remove until says it says if
15238
13:27:29,199 --> 13:27:32,000
you want to push this one on the screen
15239
13:27:30,800 --> 13:27:34,880
i'm going to give you the chance to get
15240
13:27:32,000 --> 13:27:37,436
rid of the existing screen on the stack
15241
13:27:34,879 --> 13:27:39,680
so i remove these first and then i'll
15242
13:27:37,436 --> 13:27:41,840
push yours and this is kind of useful
15243
13:27:39,680 --> 13:27:43,519
for for instance if you're let's say you
15244
13:27:43,519 --> 13:27:47,839
and then you press the login button and
15245
13:27:46,160 --> 13:27:50,800
in the in our case when the user
15246
13:27:47,839 --> 13:27:52,000
credentials are correct if we then
15247
13:27:52,000 --> 13:27:57,756
if we then want to go to the notes view
15248
13:27:55,436 --> 13:28:00,000
we don't have to keep this logging view
15249
13:27:57,756 --> 13:28:02,319
on the screen so if this login view is
15250
13:28:00,000 --> 13:28:04,080
here what we could do is to push the
15251
13:28:02,319 --> 13:28:06,319
notes via on top of it some nodes view
15252
13:28:04,080 --> 13:28:08,800
is always sitting here but then you as a
15253
13:28:06,319 --> 13:28:10,639
programmer not the user as a programmer
15254
13:28:10,639 --> 13:28:14,955
login view is sitting behind this so
15255
13:28:12,879 --> 13:28:16,079
that's not so good because once you're
15256
13:28:16,080 --> 13:28:19,276
and you're on the notes view you don't
15257
13:28:17,680 --> 13:28:21,275
need this view anymore you don't need
15258
13:28:19,275 --> 13:28:24,159
the login view sitting there and
15259
13:28:21,275 --> 13:28:26,079
consuming memory so that's what remove
15260
13:28:24,160 --> 13:28:28,640
until does because it gives you the
15261
13:28:26,080 --> 13:28:32,319
opportunity it passes you see a route of
15262
13:28:28,639 --> 13:28:33,915
dynamic and it says let me know when you
15263
13:28:33,915 --> 13:28:38,719
move removing things from the screen
15264
13:28:36,160 --> 13:28:40,560
before i push yours and us returning
15265
13:28:40,559 --> 13:28:44,720
just remove everything don't care about
15266
13:28:42,955 --> 13:28:46,400
the routes that are on the screen at the
15267
13:28:44,720 --> 13:28:48,160
moment and don't care about the routes
15268
13:28:46,400 --> 13:28:50,400
that you're telling me about just remove
15269
13:28:48,160 --> 13:28:52,160
everything and go to this register view
15270
13:28:52,160 --> 13:28:55,680
all right that was a lot of information
15271
13:28:55,680 --> 13:29:00,639
now we need to do is to go to our login
15272
13:28:57,756 --> 13:29:04,000
view which we are right now and upon
15273
13:29:00,639 --> 13:29:07,519
getting our user credentials here what
15274
13:29:04,000 --> 13:29:08,559
we need to do is to send the user to the
15275
13:29:09,915 --> 13:29:13,360
so i'm just gonna check in my notes that
15276
13:29:11,839 --> 13:29:15,915
i've explained everything to you before
15277
13:29:15,915 --> 13:29:20,955
and yeah that seems to be the case so um
15278
13:29:18,800 --> 13:29:22,160
let's then go ahead and do that right
15279
13:29:22,160 --> 13:29:27,840
what we're going to do is going to get
15280
13:29:23,839 --> 13:29:30,000
rid of this dev tools log here okay
15281
13:29:27,839 --> 13:29:31,595
let's then go in here and say
15282
13:29:31,595 --> 13:29:35,360
of and remember we have a build context
15283
13:29:33,680 --> 13:29:37,275
and we're going to say push name and
15284
13:29:37,275 --> 13:29:43,756
uh like this and our new route name is
15285
13:29:41,915 --> 13:29:46,559
actually what's it called notes i think
15286
13:29:43,756 --> 13:29:48,720
we call it right in here yeah slash note
15287
13:29:48,720 --> 13:29:52,559
so put put that in there and in here you
15288
13:29:55,436 --> 13:30:00,080
this is one thing of also i haven't
15289
13:29:57,360 --> 13:30:02,400
mentioned in the previous chapters but
15290
13:30:00,080 --> 13:30:05,840
in dart it is very important that you
15291
13:30:08,239 --> 13:30:13,360
a comma and a comma you can see here
15292
13:30:11,360 --> 13:30:15,199
is placed usually between parameters but
15293
13:30:13,360 --> 13:30:16,955
also the last parameter is suggested to
15294
13:30:15,199 --> 13:30:18,479
have a comma because as you can see here
15295
13:30:16,955 --> 13:30:20,400
the dart formatter right now isn't
15296
13:30:20,400 --> 13:30:24,639
these two parameters into two separate
15297
13:30:22,720 --> 13:30:26,480
lines of code and that's what we usually
15298
13:30:24,639 --> 13:30:29,436
do in dart you can see here for instance
15299
13:30:26,480 --> 13:30:32,000
when we did a wait on firebase instance
15300
13:30:29,436 --> 13:30:34,160
sign in in the last parameter we had a
15301
13:30:32,000 --> 13:30:36,720
comma if i remove that the code will
15302
13:30:34,160 --> 13:30:38,800
actually be a little bit uglier in this
15303
13:30:36,720 --> 13:30:41,360
it looks like this but if you put a
15304
13:30:38,800 --> 13:30:43,756
comma at the end of your last parameter
15305
13:30:41,360 --> 13:30:46,080
dark is able to break your parameters
15306
13:30:43,756 --> 13:30:48,400
each parameter and its value in its own
15307
13:30:46,080 --> 13:30:50,240
line and that's like a usual convention
15308
13:30:48,400 --> 13:30:51,916
in dart so if you see something like
15309
13:30:50,239 --> 13:30:53,519
this that doesn't look quite right put a
15310
13:30:51,915 --> 13:30:55,755
comma at the end of the last parameter
15311
13:30:53,519 --> 13:30:57,519
and press command s for dark formatter
15312
13:31:02,400 --> 13:31:07,756
and at the moment we're not using
15313
13:31:04,400 --> 13:31:09,436
the user credentials um at all so what
15314
13:31:07,756 --> 13:31:11,916
we could do to be honest with you is to
15315
13:31:09,436 --> 13:31:13,840
get rid of that so all we'll do is we
15316
13:31:11,915 --> 13:31:15,435
say firebase instance sign in with email
15317
13:31:15,436 --> 13:31:20,480
and um that's it because this whole
15318
13:31:18,000 --> 13:31:22,000
thing is in a try block so if this thing
15319
13:31:20,480 --> 13:31:23,360
doesn't work properly then we'll come
15320
13:31:24,879 --> 13:31:28,239
well this is great actually now we're
15321
13:31:28,239 --> 13:31:33,436
um login view to the notes view but
15322
13:31:31,756 --> 13:31:36,000
you'll be a bit disappointed to see that
15323
13:31:33,436 --> 13:31:37,680
this isn't going to work as it should so
15324
13:31:37,680 --> 13:31:42,480
uh ui a little bit here and then press
15325
13:31:42,480 --> 13:31:46,720
and you'll see we get an error here that
15326
13:31:44,080 --> 13:31:48,880
says unfortunately on unknown route was
15327
13:31:48,879 --> 13:31:52,319
it's quite cute that they say
15328
13:31:55,756 --> 13:32:00,000
that's what this caption also tells you
15329
13:31:58,000 --> 13:32:00,879
you see i i talked about it a little bit
15330
13:32:00,879 --> 13:32:03,839
when we kind of started with this
15331
13:32:02,239 --> 13:32:05,040
chapter that we said that we're going to
15332
13:32:07,116 --> 13:32:10,880
name route in the main function
15333
13:32:10,879 --> 13:32:14,799
this is i told you that this isn't going
15334
13:32:12,400 --> 13:32:17,680
to really work so well the reason is
15335
13:32:14,800 --> 13:32:20,800
again the main function isn't going to
15336
13:32:17,680 --> 13:32:22,400
rebuild when you do hot reload so
15337
13:32:20,800 --> 13:32:24,160
in order for your changes in the main
15338
13:32:22,400 --> 13:32:26,480
function to take effect you need to do a
15339
13:32:24,160 --> 13:32:28,160
hot restart so what is happening here is
15340
13:32:26,480 --> 13:32:29,756
that you've defined everything correctly
15341
13:32:28,160 --> 13:32:31,916
everything is done right there's nothing
15342
13:32:29,756 --> 13:32:33,595
wrong in the code itself it's just the
15343
13:32:31,915 --> 13:32:35,360
way we are executing the code that is
15344
13:32:33,595 --> 13:32:36,955
wrong and now you have to do a hot
15345
13:32:35,360 --> 13:32:38,559
restart for flutter to be able to pick
15346
13:32:36,955 --> 13:32:40,799
up your changes in the main function as
15347
13:32:38,559 --> 13:32:42,799
well okay so hot reload is not going to
15348
13:32:40,800 --> 13:32:45,520
do it so you need to do a hot restart so
15349
13:32:42,800 --> 13:32:46,956
i'm going to do hot restart here
15350
13:32:45,519 --> 13:32:48,719
we come here and now you see we're in
15351
13:32:48,720 --> 13:32:52,239
we are actually logged in from the
15352
13:32:54,480 --> 13:32:58,000
and we come here now i'm going to enter
15353
13:32:59,275 --> 13:33:03,275
foo bar baths and please don't
15354
13:33:01,360 --> 13:33:05,680
use football bats as your password i'm
15355
13:33:03,275 --> 13:33:08,879
just doing it for the sake of simplicity
15356
13:33:05,680 --> 13:33:12,639
and now we say login and you see that by
15357
13:33:08,879 --> 13:33:16,879
doing login we come to the main ui of
15358
13:33:12,639 --> 13:33:20,000
the application so and as you saw
15359
13:33:16,879 --> 13:33:22,079
pushing in android using material design
15360
13:33:22,080 --> 13:33:25,916
pushing on ios let me let me demonstrate
15361
13:33:24,319 --> 13:33:26,879
it one more time for you so you'll have
15362
13:33:26,879 --> 13:33:32,479
good look at it in the login view enter
15363
13:33:34,239 --> 13:33:39,040
through barbados and then do log in and
15364
13:33:36,955 --> 13:33:40,400
before you do that just have just make
15365
13:33:39,040 --> 13:33:41,915
sure that you're focusing very well on
15366
13:33:40,400 --> 13:33:43,596
the screen i'm going to bring it up a
15367
13:33:43,595 --> 13:33:49,115
so you'll see better um look how this
15368
13:33:47,519 --> 13:33:51,359
main ui of the application won't
15369
13:33:49,116 --> 13:33:53,756
actually be pushed but it instead will
15370
13:33:51,360 --> 13:33:55,275
be kind of like moved from the bottom of
15371
13:33:53,756 --> 13:33:58,400
the screen to the top while that
15372
13:33:55,275 --> 13:34:01,360
previous screen gets faded away so
15373
13:34:02,800 --> 13:34:06,480
ios and android are going to work
15374
13:34:04,239 --> 13:34:08,720
differently differently but the
15375
13:34:06,480 --> 13:34:11,200
concept is the same so now that the main
15376
13:34:08,720 --> 13:34:13,520
ui is pushed to the screen where an
15377
13:34:11,199 --> 13:34:16,319
android is displayed on the screen the
15378
13:34:13,519 --> 13:34:19,595
login view has disappeared and been
15379
13:34:16,319 --> 13:34:22,239
removed from the view stack okay
15380
13:34:19,595 --> 13:34:24,799
so that's great that's all we have to do
15381
13:34:22,239 --> 13:34:27,756
in this chapter so i hope actually you
15382
13:34:24,800 --> 13:34:29,596
are happy with the results and that we
15383
13:34:27,756 --> 13:34:30,720
didn't have to do too much now what we
15384
13:34:29,595 --> 13:34:32,239
need to do also we need to make sure
15385
13:34:30,720 --> 13:34:35,200
that we do like we did in the other
15386
13:34:32,239 --> 13:34:38,079
chapters so let's go ahead and
15387
13:34:35,199 --> 13:34:41,519
let's go and commit and tag our changes
15388
13:34:38,080 --> 13:34:42,955
all right so we if you look at our tag
15389
13:34:42,955 --> 13:34:46,000
if you say git tag we have now step one
15390
13:34:47,436 --> 13:34:51,040
chapter in this chapter we're gonna
15391
13:34:48,720 --> 13:34:54,080
commit our message commit our changes
15392
13:34:51,040 --> 13:34:57,275
and tag it with the tag name of step
15393
13:34:54,080 --> 13:34:58,880
four so if you look at git log we did
15394
13:34:57,275 --> 13:35:01,040
step three in the previous chapter now
15395
13:34:58,879 --> 13:35:02,319
we're gonna do step four so let's say
15396
13:35:02,319 --> 13:35:06,400
all and you can see it was just a few
15397
13:35:06,400 --> 13:35:10,880
now let's um i'm not sorry i'm going to
15398
13:35:10,879 --> 13:35:14,479
i'm also going to say git commit
15399
13:35:22,800 --> 13:35:30,720
let's push our changes to uh github and
15400
13:35:26,480 --> 13:35:32,800
also let's get a push our tags
15401
13:35:32,800 --> 13:35:39,436
so if you say git tag now now we have
15402
13:35:35,116 --> 13:35:41,436
four tags and if we do its log
15403
13:35:39,436 --> 13:35:43,520
you'll see we have step two three and
15404
13:35:41,436 --> 13:35:47,116
four and the initial commit which is
15405
13:35:43,519 --> 13:35:49,680
step one all right well done that was
15406
13:35:47,116 --> 13:35:52,240
great and work for this chapter quite a
15407
13:35:49,680 --> 13:35:53,840
short chapter and sweet um and now we
15408
13:35:52,239 --> 13:35:55,115
need to get ready for the next chapter
15409
13:35:53,839 --> 13:35:56,719
as you can see in the caption here says
15410
13:35:55,116 --> 13:35:58,080
we need to clean up our routes since
15411
13:35:58,080 --> 13:36:02,319
and that means that you can see here
15412
13:35:59,839 --> 13:36:04,559
we've defined our routes login register
15413
13:36:02,319 --> 13:36:06,400
nodes but also in the login view we're
15414
13:36:04,559 --> 13:36:07,839
like redefining we're saying that
15415
13:36:06,400 --> 13:36:09,916
actually not redefining we're trying to
15416
13:36:07,839 --> 13:36:12,719
like go to the notes route but we're
15417
13:36:09,915 --> 13:36:14,239
typing the entire route name again and
15418
13:36:12,720 --> 13:36:15,916
this is usually in programming not a
15419
13:36:14,239 --> 13:36:18,000
good idea like if you have strings
15420
13:36:15,915 --> 13:36:20,319
flying all over the all over the place
15421
13:36:18,000 --> 13:36:22,239
like one is defined in the main dart the
15422
13:36:20,319 --> 13:36:24,639
other one is called in the login view
15423
13:36:22,239 --> 13:36:26,239
and this something similar is used for
15424
13:36:24,639 --> 13:36:28,080
instance in the register view as you can
15425
13:36:28,080 --> 13:36:33,520
usually this means that you need to um
15426
13:36:30,879 --> 13:36:36,000
bring these into one central place and
15427
13:36:33,519 --> 13:36:38,000
kind of reuse them and that is exactly
15428
13:36:36,000 --> 13:36:38,955
what we're gonna do in the next chapter
15429
13:36:40,720 --> 13:36:44,160
leave it like this and i'll see you in
15430
13:36:44,160 --> 13:36:47,916
hello and welcome to chapter 20 of this
15431
13:36:47,915 --> 13:36:51,519
in this chapter which is going to be a
15432
13:36:50,000 --> 13:36:52,955
very short one i think it's going to be
15433
13:36:51,519 --> 13:36:55,115
the shortest chapter of all the chapters
15434
13:36:52,955 --> 13:36:57,519
we've done so far we're going to do some
15435
13:36:57,519 --> 13:37:02,955
you can see that uh i mean i'll show you
15436
13:37:00,080 --> 13:37:04,560
what state we left our code in in the
15437
13:37:04,559 --> 13:37:08,479
this is what we've done so i'm gonna
15438
13:37:10,559 --> 13:37:15,756
you will see that um the state that we
15439
13:37:12,800 --> 13:37:19,200
left our project in was if we go to our
15440
13:37:15,756 --> 13:37:19,916
main dart we had some routes defined i'm
15441
13:37:19,915 --> 13:37:23,595
do it like this you'll see it better we
15442
13:37:26,000 --> 13:37:30,239
and one was called a login which the
15443
13:37:28,160 --> 13:37:32,000
register view actually uses to send the
15444
13:37:36,239 --> 13:37:39,360
if the user had already registered and
15445
13:37:40,160 --> 13:37:44,320
about that without showing it so let's
15446
13:37:42,400 --> 13:37:46,400
go here let's go here in the register
15447
13:37:44,319 --> 13:37:48,080
view so if the user ends up in the
15448
13:37:50,879 --> 13:37:55,275
their email and password setup then they
15449
13:37:53,199 --> 13:37:58,079
can click on this or tap on this button
15450
13:37:55,275 --> 13:38:01,436
that says already registered log in here
15451
13:38:01,436 --> 13:38:06,955
register view here navigator of push
15452
13:38:04,955 --> 13:38:09,595
name and then goes to the login route
15453
13:38:06,955 --> 13:38:11,915
which is defined in main art and kind of
15454
13:38:09,595 --> 13:38:15,275
the same thing happens in the login view
15455
13:38:11,915 --> 13:38:16,159
here so if the user doesn't have
15456
13:38:16,160 --> 13:38:20,640
if the user hasn't registered for our
15457
13:38:18,639 --> 13:38:22,955
service then they can actually tap on
15458
13:38:20,639 --> 13:38:23,839
not register yet register here button
15459
13:38:23,839 --> 13:38:28,479
and that's the register route and the
15460
13:38:26,480 --> 13:38:30,956
third route that we have is the notes
15461
13:38:28,480 --> 13:38:34,319
route which allows us to send the user
15462
13:38:30,955 --> 13:38:36,239
from the login screen to the main ui of
15463
13:38:34,319 --> 13:38:37,199
the application which we just call at
15464
13:38:39,915 --> 13:38:45,360
resides inside main dart and i'll just
15465
13:38:43,116 --> 13:38:48,480
have a look at my code here and just to
15466
13:38:48,480 --> 13:38:51,756
what i had intended yeah so we haven't
15467
13:38:51,756 --> 13:38:57,116
refactored notes view and we haven't yet
15468
13:38:58,480 --> 13:39:03,116
let's talk about hard coding now
15469
13:39:01,595 --> 13:39:04,239
if you're not a programmer like if you
15470
13:39:03,116 --> 13:39:06,319
don't have a software development
15471
13:39:04,239 --> 13:39:08,159
background you probably don't know what
15472
13:39:08,160 --> 13:39:15,360
i'll i'll kind of give you the um
15473
13:39:12,239 --> 13:39:17,360
i'll give you example maybe in different
15474
13:39:17,360 --> 13:39:21,756
be relevant for a programmer let's say
15475
13:39:19,436 --> 13:39:24,720
you're working in figma and you're
15476
13:39:21,756 --> 13:39:26,400
working with a design so you have a list
15477
13:39:24,720 --> 13:39:29,756
of items to display on the screen and
15478
13:39:26,400 --> 13:39:31,275
you create these list designs like you
15479
13:39:29,756 --> 13:39:33,595
have a little cell that should be
15480
13:39:31,275 --> 13:39:35,360
displayed inside a view then you go and
15481
13:39:35,360 --> 13:39:40,319
in 10 different places and then
15482
13:39:38,319 --> 13:39:41,680
you talk to the team about the design
15483
13:39:40,319 --> 13:39:43,519
that you've created and then they say oh
15484
13:39:41,680 --> 13:39:45,275
you'd be really great if this label was
15485
13:39:43,519 --> 13:39:47,519
a little bit bigger then what you'd have
15486
13:39:45,275 --> 13:39:50,639
to do is to go to every place that
15487
13:39:50,639 --> 13:39:54,720
cell and you have to change the label a
15488
13:39:53,116 --> 13:39:57,200
better way of doing that in figma if
15489
13:39:54,720 --> 13:39:59,756
you're a designer would be to create a
15490
13:39:57,199 --> 13:40:02,879
component and then create instances of
15491
13:39:59,756 --> 13:40:04,880
that design component in various pages
15492
13:40:06,000 --> 13:40:10,480
so you need to update something then you
15493
13:40:07,756 --> 13:40:11,756
need to just update it in one place
15494
13:40:11,756 --> 13:40:14,800
even if you're not coming from a design
15495
13:40:13,595 --> 13:40:17,275
background and you're working for
15496
13:40:14,800 --> 13:40:20,080
instance as a project this is a product
15497
13:40:17,275 --> 13:40:22,239
owner or a project manager you may be
15498
13:40:22,239 --> 13:40:27,199
excel sheets and you're creating maybe
15499
13:40:27,199 --> 13:40:31,360
graphs now if you create a graph from a
15500
13:40:31,360 --> 13:40:35,116
you probably want to reuse that graph in
15501
13:40:33,199 --> 13:40:37,039
other places so if someone says okay can
15502
13:40:35,116 --> 13:40:38,480
i get like all the graphs available in
15503
13:40:37,040 --> 13:40:40,239
the project then you don't go and create
15504
13:40:38,480 --> 13:40:42,080
the same graph over and over again you
15505
13:40:40,239 --> 13:40:43,275
kind of want to refer to the same sheet
15506
13:40:43,275 --> 13:40:49,360
google sheets or your excel sheets so
15507
13:40:47,040 --> 13:40:51,360
the concept is the same you don't want
15508
13:40:49,360 --> 13:40:52,879
to repeat yourself and that's what the
15509
13:40:51,360 --> 13:40:54,879
mistake that we've done at the moment in
15510
13:40:52,879 --> 13:40:57,595
our source code in that we have our
15511
13:40:54,879 --> 13:41:00,079
routes defined in one place however
15512
13:40:57,595 --> 13:41:01,680
where every word we're gonna use these
15513
13:41:00,080 --> 13:41:03,360
routes we're writing their names again
15514
13:41:03,360 --> 13:41:08,480
that most programmers do not like
15515
13:41:06,239 --> 13:41:11,040
when you become more of a seasoned like
15516
13:41:08,480 --> 13:41:14,560
a senior developer then you try to avoid
15517
13:41:11,040 --> 13:41:17,275
these things because if we now go to our
15518
13:41:14,559 --> 13:41:19,756
main dart file and change this login to
15519
13:41:17,275 --> 13:41:21,680
just slash login then we have to search
15520
13:41:19,756 --> 13:41:24,239
everywhere in our project for a name
15521
13:41:21,680 --> 13:41:27,360
route called slash login slash as it was
15522
13:41:24,239 --> 13:41:30,720
before and change that to this new form
15523
13:41:31,040 --> 13:41:35,680
that's hard coding and that is why
15524
13:41:33,199 --> 13:41:38,639
developers don't like it and i suggest
15525
13:41:35,680 --> 13:41:40,559
that you don't like it either
15526
13:41:38,639 --> 13:41:42,955
so uh what we're gonna do in this
15527
13:41:40,559 --> 13:41:44,559
chapter very quickly hopefully we can
15528
13:41:44,559 --> 13:41:50,079
uh be done with it soon we're gonna
15529
13:41:46,800 --> 13:41:52,000
create a new file in our project is the
15530
13:41:50,080 --> 13:41:53,680
first file of its kind that we're
15531
13:41:52,000 --> 13:41:56,160
creating where we're going to put our
15532
13:41:53,680 --> 13:41:58,080
constants okay so constants as you know
15533
13:41:56,160 --> 13:41:59,756
from where we talked about dart are
15534
13:41:58,080 --> 13:42:01,276
values that don't change during the
15535
13:42:01,275 --> 13:42:05,519
and they don't change during the runtime
15536
13:42:03,116 --> 13:42:07,520
either so these are our route names
15537
13:42:05,519 --> 13:42:09,199
because they're always constant they're
15538
13:42:07,519 --> 13:42:10,399
no one is going in there and changing
15539
13:42:10,400 --> 13:42:14,720
so let's go ahead and do that as a
15540
13:42:12,000 --> 13:42:17,275
caption says here let's go create a fox
15541
13:42:14,720 --> 13:42:19,360
under lib under folder called constants
15542
13:42:17,275 --> 13:42:20,799
and then routes and as i showed you
15543
13:42:19,360 --> 13:42:23,116
before you don't have to create the
15544
13:42:20,800 --> 13:42:25,756
intermediate directories in this case
15545
13:42:23,116 --> 13:42:27,680
constants before you create the route
15546
13:42:25,756 --> 13:42:29,275
start file what you'll need to do is
15547
13:42:27,680 --> 13:42:31,519
just right click on lib where you want
15548
13:42:29,275 --> 13:42:34,955
to create the constants and then the lib
15549
13:42:31,519 --> 13:42:37,595
sorry the constants folder and then um
15550
13:42:34,955 --> 13:42:40,319
route start file just right click here
15551
13:42:37,595 --> 13:42:43,360
say new file then say constants um if i
15552
13:42:47,040 --> 13:42:52,879
and that will create the constants
15553
13:42:48,639 --> 13:42:53,680
folder intermediate folder for you okay
15554
13:42:53,680 --> 13:42:57,199
what we need now is to define as the
15555
13:42:55,436 --> 13:43:00,000
caption says here we need to define
15556
13:42:57,199 --> 13:43:01,839
three routes one for the login route one
15557
13:43:00,000 --> 13:43:03,680
for register and the other one for the
15558
13:43:01,839 --> 13:43:05,915
notes route so let's just say
15559
13:43:05,915 --> 13:43:11,360
and we just say that's equal to login
15560
13:43:08,239 --> 13:43:13,519
slash i'm gonna copy paste this and i'm
15561
13:43:11,360 --> 13:43:14,720
just gonna in this second one just say
15562
13:43:14,720 --> 13:43:19,520
uh register route as the caption
15563
13:43:16,879 --> 13:43:21,360
suggests and then the notes route okay
15564
13:43:19,519 --> 13:43:23,115
and in here i'm going to say register
15565
13:43:21,360 --> 13:43:26,400
and in here you should say also notes
15566
13:43:23,116 --> 13:43:28,880
okay so now we've defined these three
15567
13:43:28,879 --> 13:43:32,479
but what we need to do now we've defined
15568
13:43:30,559 --> 13:43:35,360
them but this is not enough what we need
15569
13:43:32,480 --> 13:43:37,436
to do is to actually go and use them so
15570
13:43:35,360 --> 13:43:40,160
let's go back to our main dart file and
15571
13:43:37,436 --> 13:43:43,680
in here instead of using login we need
15572
13:43:40,160 --> 13:43:45,360
to use a login route right and you can
15573
13:43:43,680 --> 13:43:47,040
see now visual studio code smart enough
15574
13:43:45,360 --> 13:43:50,239
to understand that this is a symbol that
15575
13:43:50,239 --> 13:43:53,915
but this symbol right now isn't
15576
13:43:52,160 --> 13:43:57,840
available in the current context because
15577
13:43:53,915 --> 13:43:58,955
we haven't imported that constant
15578
13:44:02,879 --> 13:44:06,799
allow visual studio code to auto import
15579
13:44:04,800 --> 13:44:08,800
that you can see all of a sudden the
15580
13:44:08,800 --> 13:44:13,200
in my current context and if i go up
15581
13:44:11,199 --> 13:44:15,595
here then i should be able to see that
15582
13:44:13,199 --> 13:44:18,000
visual studio code has imported this
15583
13:44:15,595 --> 13:44:19,680
file for me but if you're if you're
15584
13:44:18,000 --> 13:44:22,559
working with veeam or if you're working
15585
13:44:19,680 --> 13:44:24,400
with android studio and you're not
15586
13:44:24,400 --> 13:44:28,000
uh to import you can always go to this
15587
13:44:28,000 --> 13:44:31,756
uh command dot or control dot depending
15588
13:44:30,160 --> 13:44:34,240
on your operating system and just say
15589
13:44:35,915 --> 13:44:39,839
editor isn't smart enough to do
15590
13:44:37,839 --> 13:44:42,000
importing in this way you can import it
15591
13:44:39,839 --> 13:44:44,955
yourself so you can just say
15592
13:44:44,955 --> 13:44:48,720
package then the name of the application
15593
13:44:46,955 --> 13:44:53,040
which is my notes and then you'd say
15594
13:44:48,720 --> 13:44:54,639
constants slash routes dot darts so
15595
13:44:53,040 --> 13:44:56,879
there you have three ways of solving the
15596
13:44:54,639 --> 13:44:59,360
same problem i usually do auto import so
15597
13:44:56,879 --> 13:45:01,435
i don't have to type all of that um and
15598
13:44:59,360 --> 13:45:03,756
i'm not gonna explain this more than in
15599
13:45:01,436 --> 13:45:05,840
the upcoming chapter so you have all the
15600
13:45:03,756 --> 13:45:08,239
tools necessary in order to be able to
15601
13:45:05,839 --> 13:45:10,079
fix a problem like this okay so in here
15602
13:45:08,239 --> 13:45:10,955
i'm going to use register route and
15603
13:45:10,955 --> 13:45:15,519
uh route start is now imported here
15604
13:45:15,519 --> 13:45:19,039
then i'm not going to have a problem and
15605
13:45:17,436 --> 13:45:21,360
i don't have to auto import anything
15606
13:45:19,040 --> 13:45:23,756
okay and for notes i'm going to say
15607
13:45:23,756 --> 13:45:28,955
oh that's great now we've defined them
15608
13:45:26,639 --> 13:45:31,040
in our main function however we still
15609
13:45:28,955 --> 13:45:33,436
have a few places where we're doing
15610
13:45:31,040 --> 13:45:37,520
routing and we're hard coding those
15611
13:45:33,436 --> 13:45:39,756
routes so let's fix first our notes view
15612
13:45:37,519 --> 13:45:45,359
which is the main ui of the application
15613
13:45:39,756 --> 13:45:45,360
so if i type here pixel tab gmail.com
15614
13:45:53,915 --> 13:45:59,040
and we're getting some oh foobar baz
15615
13:46:00,319 --> 13:46:04,879
in here when we do log out that's where
15616
13:46:03,116 --> 13:46:06,800
we sending the user to the login route
15617
13:46:04,879 --> 13:46:10,159
so let's change that as well to say
15618
13:46:06,800 --> 13:46:13,596
login route okay so that's one place
15619
13:46:10,160 --> 13:46:14,956
uh i'm gonna then say log out here poof
15620
13:46:14,955 --> 13:46:19,116
so that's fixed now the other place we
15621
13:46:16,955 --> 13:46:20,559
have to fix is in the login view as you
15622
13:46:20,559 --> 13:46:25,040
where we press the not register yet
15623
13:46:23,040 --> 13:46:26,239
register here button so let's go to the
15624
13:46:29,040 --> 13:46:31,360
i'm going to get rid of the explorer
15625
13:46:33,199 --> 13:46:38,319
in this button not registered yet let's
15626
13:46:40,400 --> 13:46:44,239
you see we're sending the user to the
15627
13:46:41,839 --> 13:46:46,000
register route so i'm going to send them
15628
13:46:44,239 --> 13:46:48,000
instead to register router and you can
15629
13:46:46,000 --> 13:46:49,680
see you should code smart enough again
15630
13:46:48,000 --> 13:46:50,955
to do auto import so i'm going to take
15631
13:46:50,955 --> 13:46:55,756
and also we have another route here
15632
13:46:52,400 --> 13:46:57,436
which sends you to notes where you
15633
13:46:55,756 --> 13:47:00,000
have successfully logged in so let's
15634
13:47:02,080 --> 13:47:06,560
and now the other place that we have to
15635
13:47:03,756 --> 13:47:08,720
fix is in register so go to your project
15636
13:47:06,559 --> 13:47:10,239
explorer and then go to register view
15637
13:47:08,720 --> 13:47:13,360
and have a look at where we're doing
15638
13:47:24,400 --> 13:47:30,480
if you now search for push name and
15639
13:47:26,720 --> 13:47:32,400
remove until and then show the results
15640
13:47:30,480 --> 13:47:34,720
if you click through them you shouldn't
15641
13:47:32,400 --> 13:47:35,756
have any routes that is hard coded okay
15642
13:47:37,595 --> 13:47:44,239
register route and the login route so
15643
13:47:41,680 --> 13:47:47,040
now we fix this and just remember
15644
13:47:44,239 --> 13:47:49,199
because we now have changed the main
15645
13:47:47,040 --> 13:47:51,436
function here and we have some routes
15646
13:47:49,199 --> 13:47:53,435
here do you have to do hot restart in
15647
13:47:51,436 --> 13:47:55,596
order to see your changes but
15648
13:47:53,436 --> 13:47:58,480
if everything's working according to the
15649
13:47:55,595 --> 13:48:00,639
plan and that we didn't like to make any
15650
13:47:58,480 --> 13:48:02,800
wrong choices in our rat names and that
15651
13:48:00,639 --> 13:48:04,559
we gave them the same name or anything
15652
13:48:04,559 --> 13:48:07,839
if everything is working like it did
15653
13:48:06,160 --> 13:48:10,160
before then you shouldn't see any
15654
13:48:07,839 --> 13:48:13,839
changes in here so if you enter your
15655
13:48:10,160 --> 13:48:16,400
information like you did before
15656
13:48:13,839 --> 13:48:17,839
and i say foobar about then i should be
15657
13:48:19,915 --> 13:48:24,000
and i should be able to go to register
15658
13:48:24,000 --> 13:48:29,116
it's working exactly as it did before
15659
13:48:29,116 --> 13:48:34,000
all right great stuff that was a quick
15660
13:48:31,040 --> 13:48:36,319
chapter as other chapters since now we
15661
13:48:34,000 --> 13:48:38,720
have made some changes and we've
15662
13:48:36,319 --> 13:48:40,319
actually made the code better and we've
15663
13:48:38,720 --> 13:48:43,040
tested to make sure everything works
15664
13:48:40,319 --> 13:48:46,239
fine it's time to commit our changes as
15665
13:48:43,040 --> 13:48:49,436
you can see the previous chapter we
15666
13:48:46,239 --> 13:48:51,756
committed our changes as step 4
15667
13:48:49,436 --> 13:48:54,239
and in this chapter we're gonna commit
15668
13:48:51,756 --> 13:48:55,360
our changes as step five and we're also
15669
13:48:56,319 --> 13:49:00,000
we're also going to tag it like we did
15670
13:49:01,436 --> 13:49:06,239
layout as well so you'll see the
15671
13:49:04,160 --> 13:49:08,000
terminal a little bit better i'm gonna
15672
13:49:06,239 --> 13:49:10,720
do it like this gonna make the terminal
15673
13:49:08,000 --> 13:49:13,915
bigger even so you see it even better
15674
13:49:10,720 --> 13:49:16,000
so let's go ahead and see what the
15675
13:49:13,915 --> 13:49:18,159
status is i can see there are lots of
15676
13:49:16,000 --> 13:49:19,839
changes as you can see here it says
15677
13:49:18,160 --> 13:49:21,520
you've made changes you modified these
15678
13:49:19,839 --> 13:49:24,399
existing files and now all of a sudden
15679
13:49:21,519 --> 13:49:26,000
there's a new folder as well so what i
15680
13:49:24,400 --> 13:49:29,360
like to do in these cases when there is
15681
13:49:26,000 --> 13:49:31,519
a new folder i like to do bits add all
15682
13:49:29,360 --> 13:49:32,720
because this adds all the files and
15683
13:49:32,720 --> 13:49:37,200
so you can take it at all and if you say
15684
13:49:37,199 --> 13:49:42,000
the new folder including its content is
15685
13:49:39,519 --> 13:49:44,955
now added to the staging environment or
15686
13:49:45,199 --> 13:49:49,519
okay now we've staged so now let's
15687
13:49:47,199 --> 13:49:53,435
commit and we say we said that we are
15688
13:49:49,519 --> 13:49:56,399
going to commit and tag as step five
15689
13:49:53,436 --> 13:49:57,436
so let's say step five um and then get
15690
13:49:57,436 --> 13:50:01,680
um step five as well get push your
15691
13:50:01,680 --> 13:50:06,639
and then give push the tags as well
15692
13:50:04,955 --> 13:50:08,239
all right so if i say you tag now we
15693
13:50:08,239 --> 13:50:13,199
and if i say gitland we have step five
15694
13:50:10,639 --> 13:50:14,955
four three two and then the initial
15695
13:50:13,199 --> 13:50:16,799
commit which is pretty much step one all
15696
13:50:16,800 --> 13:50:20,880
great stuff well done for going through
15697
13:50:19,116 --> 13:50:23,276
this chapter so fast as well together
15698
13:50:20,879 --> 13:50:25,680
with me and what we need to do now is to
15699
13:50:23,275 --> 13:50:27,519
get ready for the next chapter
15700
13:50:25,680 --> 13:50:29,915
and just to give you a little preview
15701
13:50:27,519 --> 13:50:32,399
what we're going to work on is to have a
15702
13:50:29,915 --> 13:50:34,719
look at our error handling in
15703
13:50:32,400 --> 13:50:36,400
specifically the login view so if i make
15704
13:50:34,720 --> 13:50:39,116
this a little bit smaller so it's more
15705
13:50:36,400 --> 13:50:41,436
digestible you can see at the moment our
15706
13:50:39,116 --> 13:50:43,040
error handling the reason i put
15707
13:50:41,436 --> 13:50:44,560
quotation marks around it is that it's
15708
13:50:43,040 --> 13:50:46,879
not so much of an error handling to be
15709
13:50:44,559 --> 13:50:49,435
honest with you what it is doing is just
15710
13:50:46,879 --> 13:50:52,399
says if an error of this type happens
15711
13:50:49,436 --> 13:50:55,275
then log this message to the console a
15712
13:50:52,400 --> 13:50:56,955
normal user sitting with their phone
15713
13:50:55,275 --> 13:50:59,040
they don't have access to logs they're
15714
13:50:56,955 --> 13:51:01,915
not going to see any logs so logs are
15715
13:50:59,040 --> 13:51:03,680
very very much useless for them and what
15716
13:51:01,915 --> 13:51:05,755
we're going to do in the next chapter is
15717
13:51:03,680 --> 13:51:06,955
actually display meaningful information
15718
13:51:12,239 --> 13:51:17,519
grab your refreshments if you want to
15719
13:51:14,080 --> 13:51:19,916
and i'll see you in the next chapter
15720
13:51:17,519 --> 13:51:21,359
hello and welcome to chapter 21 of this
15721
13:51:21,360 --> 13:51:25,756
in the previous chapter as you remember
15722
13:51:23,275 --> 13:51:27,915
we talked about cleaning up the routes
15723
13:51:25,756 --> 13:51:30,480
that we have in our main function and we
15724
13:51:27,915 --> 13:51:33,199
put them inside their own dart files so
15725
13:51:30,480 --> 13:51:35,040
that they are separate from um so we're
15726
13:51:33,199 --> 13:51:36,239
basically not hard coding hard coding
15727
13:51:35,040 --> 13:51:37,436
them in different places of the
15728
13:51:37,436 --> 13:51:41,275
we talked about what hard coding also is
15729
13:51:39,360 --> 13:51:43,275
if you're not coming from a software
15730
13:51:41,275 --> 13:51:45,115
development background and why it is
15731
13:51:43,275 --> 13:51:47,275
usually a good thing not to hard code
15732
13:51:45,116 --> 13:51:50,000
your strings and spread them around in
15733
13:51:50,000 --> 13:51:54,239
in this chapter we are going to focus on
15734
13:51:54,239 --> 13:51:59,519
error handling in our login view to
15735
13:51:56,720 --> 13:52:00,955
start with if you remember our login
15736
13:52:00,955 --> 13:52:04,080
actually i don't have to say if you
15737
13:52:02,319 --> 13:52:07,116
remember because i can bring up the code
15738
13:52:04,080 --> 13:52:10,160
so we can have a look at it together
15739
13:52:11,680 --> 13:52:16,239
i'm going to bring up scrcpy here as
15740
13:52:16,239 --> 13:52:21,360
the android phone working okay
15741
13:52:18,800 --> 13:52:23,040
so i'm going to also change a little bit
15742
13:52:23,040 --> 13:52:29,520
screen layout so if you remember uh we
15743
13:52:26,639 --> 13:52:31,595
have our login view right here probably
15744
13:52:29,519 --> 13:52:33,755
have to move some things around here so
15745
13:52:31,595 --> 13:52:36,955
it becomes a little bit better layout
15746
13:52:33,756 --> 13:52:37,916
let's go to login view and we have then
15747
13:52:38,879 --> 13:52:43,519
lock statements here should anything go
15748
13:52:43,519 --> 13:52:48,479
if we could sign in with an email and a
15749
13:52:45,839 --> 13:52:50,319
password then we were pushing the notes
15750
13:52:50,319 --> 13:52:54,639
but if there was a problem with our
15751
13:52:52,720 --> 13:52:56,720
firebase authentication and we got a
15752
13:52:56,720 --> 13:53:02,239
we are simply at the moment logging that
15753
13:52:59,275 --> 13:53:04,400
information to the debug console and
15754
13:53:02,239 --> 13:53:06,559
that is not good enough because should
15755
13:53:04,400 --> 13:53:08,800
any errors happen for instance if the
15756
13:53:06,559 --> 13:53:10,955
current user couldn't be found or that
15757
13:53:10,955 --> 13:53:16,080
uh your end user will not receive these
15758
13:53:14,080 --> 13:53:18,319
logs because they're not running this
15759
13:53:16,080 --> 13:53:20,000
application beside visual studio code or
15760
13:53:20,000 --> 13:53:24,080
except your actual users are going to be
15761
13:53:22,319 --> 13:53:27,839
running the application on a normal
15762
13:53:24,080 --> 13:53:28,800
telephone such as an android or an ios
15763
13:53:31,116 --> 13:53:34,560
so that's what we are going to do in
15764
13:53:32,879 --> 13:53:38,479
this chapter we're going to clean up the
15765
13:53:34,559 --> 13:53:40,479
logic for our error handling so um
15766
13:53:38,480 --> 13:53:42,800
so before you begin with this chapter
15767
13:53:40,480 --> 13:53:45,276
just make sure that you're inside your
15768
13:53:42,800 --> 13:53:47,520
login view as we are right here and then
15769
13:53:45,275 --> 13:53:50,239
ensure that your application or your
15770
13:53:47,519 --> 13:53:52,879
user is logged out so if you're in the
15771
13:53:50,239 --> 13:53:55,040
main interface of the application or
15772
13:53:52,879 --> 13:53:57,519
you're inside the notes view as we call
15773
13:53:55,040 --> 13:53:59,520
it ensure that you go to the menu and
15774
13:53:57,519 --> 13:54:01,359
then you log out of the application also
15775
13:53:59,519 --> 13:54:03,435
make sure that your telephone or your
15776
13:54:01,360 --> 13:54:04,800
emulator simulator also has internet
15777
13:54:04,800 --> 13:54:09,756
you can actually hit firebase back end
15778
13:54:10,839 --> 13:54:17,839
so as you've seen in our login view and
15779
13:54:14,559 --> 13:54:19,275
register view we have logic that tries
15780
13:54:19,275 --> 13:54:22,799
different kinds of errors that may arise
15781
13:54:21,116 --> 13:54:25,276
for instance in the registration view we
15782
13:54:22,800 --> 13:54:29,200
have weak password handling and we have
15783
13:54:25,275 --> 13:54:30,720
email already in use or an invalid email
15784
13:54:30,720 --> 13:54:37,116
and so here we have three error handling
15785
13:54:34,319 --> 13:54:39,040
and also in login view we have two error
15786
13:54:39,040 --> 13:54:44,879
aside from these we also need to handle
15787
13:54:42,239 --> 13:54:47,915
the case of any other exception that
15788
13:54:44,879 --> 13:54:49,519
might arise in this try block and we
15789
13:54:47,915 --> 13:54:51,680
don't have that at the moment you can
15790
13:54:49,519 --> 13:54:55,435
see we're only catching firebase off
15791
13:54:51,680 --> 13:54:57,756
exceptions so we have to have a generic
15792
13:54:55,436 --> 13:55:00,560
catch block at the end of our try
15793
13:54:57,756 --> 13:55:02,720
statement in the login view
15794
13:55:00,559 --> 13:55:04,879
and another catch block which is a
15795
13:55:02,720 --> 13:55:09,040
generic catch block at the end of the
15796
13:55:04,879 --> 13:55:10,479
try statement on our register view three
15797
13:55:10,480 --> 13:55:15,200
auth exceptions plus and a generic
15798
13:55:12,955 --> 13:55:16,799
exception handling here four total in
15799
13:55:16,800 --> 13:55:23,276
plus two here six and a generic one here
15800
13:55:20,080 --> 13:55:25,756
seven so we are going to handle seven
15801
13:55:23,275 --> 13:55:28,639
types of errors that might occur during
15802
13:55:25,756 --> 13:55:30,880
login and registration and for any one
15803
13:55:28,639 --> 13:55:32,720
of these we are going to display an
15804
13:55:30,879 --> 13:55:34,719
alert to the user so we're just gonna
15805
13:55:32,720 --> 13:55:37,360
alert the user that something has
15806
13:55:34,720 --> 13:55:39,595
happened and it needs to be taken care
15807
13:55:44,720 --> 13:55:49,275
the end of your main dart file and you
15808
13:55:46,800 --> 13:55:51,436
can see we already have a future bowl
15809
13:55:49,275 --> 13:55:53,595
show log out dial again this is a log
15810
13:55:53,595 --> 13:55:58,319
that you can see is an alert dialog that
15811
13:55:56,080 --> 13:56:00,319
at the moment just returns a boolean
15812
13:56:00,319 --> 13:56:05,756
future void as the caption shows here a
15813
13:56:03,275 --> 13:56:08,879
function that says show error dialog and
15814
13:56:05,756 --> 13:56:10,480
it has a context and a string to display
15815
13:56:08,879 --> 13:56:12,639
to the user so we're just going to use
15816
13:56:10,480 --> 13:56:15,116
it generically generically from anywhere
15817
13:56:15,116 --> 13:56:19,520
so for now i need you to go to your
15818
13:56:19,519 --> 13:56:23,039
and at the bottom of the login view
15819
13:56:21,436 --> 13:56:25,040
we're going to create the function
15820
13:56:23,040 --> 13:56:26,879
signature for this so let's just say
15821
13:56:26,879 --> 13:56:30,239
and as i've called it here show error
15822
13:56:28,639 --> 13:56:32,319
dialog and we're going to get a build
15823
13:56:30,239 --> 13:56:34,799
context called context and then we're
15824
13:56:32,319 --> 13:56:36,480
also going to say string text okay
15825
13:56:36,480 --> 13:56:42,080
and remember you can always put a comma
15826
13:56:42,080 --> 13:56:46,160
to make sure that the dart formatter
15827
13:56:44,160 --> 13:56:49,116
actually formats your functions
15828
13:56:50,559 --> 13:56:55,839
show error dialogue uh what it needs to
15829
13:56:53,275 --> 13:56:58,079
do all it has to do is just to create a
15830
13:56:55,839 --> 13:57:00,399
dialogue and then display it so to do
15831
13:56:58,080 --> 13:57:02,080
you i mean you may think that you always
15832
13:57:00,400 --> 13:57:04,080
start with the creation of the dialogue
15833
13:57:02,080 --> 13:57:05,680
but in fact you need to first think
15834
13:57:04,080 --> 13:57:07,916
about returning the result of the
15835
13:57:05,680 --> 13:57:10,239
dialogue which is in cases of void so
15836
13:57:15,756 --> 13:57:21,360
and the context is available for you as
15837
13:57:18,720 --> 13:57:23,520
a parameter to your function and also
15838
13:57:21,360 --> 13:57:25,520
let me should i make this a bit bigger
15839
13:57:23,519 --> 13:57:27,680
or is the size okay i think this size is
15840
13:57:28,480 --> 13:57:34,319
now that we have that let's then go and
15841
13:57:31,116 --> 13:57:35,916
say that we want to have a builder
15842
13:57:34,319 --> 13:57:37,595
and your builder i'm going to get help
15843
13:57:35,915 --> 13:57:41,199
from visual studio code to complete this
15844
13:57:37,595 --> 13:57:43,360
you see it takes the um it brings the
15845
13:57:41,199 --> 13:57:44,559
build context in as a parameter and it
15846
13:57:44,559 --> 13:57:49,595
to return let's get the documentation on
15847
13:57:47,436 --> 13:57:51,596
it and expect you to return a widget and
15848
13:57:49,595 --> 13:57:54,079
the widget that we're gonna have to
15849
13:57:51,595 --> 13:57:56,879
display in our short in our show dialog
15850
13:57:54,080 --> 13:57:59,360
is an alert dialog so let's go create
15851
13:58:02,160 --> 13:58:07,276
for the title of our alert dialog since
15852
13:58:04,955 --> 13:58:09,116
this is as you can see from the
15853
13:58:07,275 --> 13:58:12,040
function signature here that says show
15854
13:58:09,116 --> 13:58:14,240
air dialog this is this dialog is
15855
13:58:12,040 --> 13:58:17,360
explicitly going to be used and
15856
13:58:14,239 --> 13:58:19,360
exclusively gonna be used for displaying
15857
13:58:17,360 --> 13:58:20,400
errors to the user so something has
15858
13:58:20,400 --> 13:58:25,200
and we need to handle that error okay so
15859
13:58:23,199 --> 13:58:27,839
we are going to in this case write a
15860
13:58:25,199 --> 13:58:29,839
specific very specific title for our
15861
13:58:27,839 --> 13:58:31,755
alert dialogue that the user understands
15862
13:58:29,839 --> 13:58:33,915
something bad has happened and it needs
15863
13:58:33,915 --> 13:58:38,639
so for the title we're just going to say
15864
13:58:35,519 --> 13:58:40,319
a constant text remember the title
15865
13:58:38,639 --> 13:58:42,239
property if you just move your mouse
15866
13:58:40,319 --> 13:58:44,159
over you can see it's a widget it's not
15867
13:58:42,239 --> 13:58:45,839
a string you actually can configure the
15868
13:58:44,160 --> 13:58:47,276
title to be whatever you want so this is
15869
13:58:47,275 --> 13:58:51,915
flutter almost everything is a widget so
15870
13:58:49,839 --> 13:58:53,755
you'd expect oh the title should just be
15871
13:58:51,915 --> 13:58:56,319
a string but no you can configure the
15872
13:58:53,756 --> 13:58:59,756
title to be exactly what you want so it
15873
13:58:56,319 --> 13:59:01,680
can just be an icon if you wanted to so
15874
13:58:59,756 --> 13:59:03,040
so let's in here in the text say an
15875
13:59:06,319 --> 13:59:10,080
and then we're going to go for the
15876
13:59:11,519 --> 13:59:16,799
dialogue remember the content comes in
15877
13:59:13,756 --> 13:59:19,520
here as the text as a string so let's
15878
13:59:19,519 --> 13:59:24,399
widget and we just say we display the
15879
13:59:29,519 --> 13:59:34,639
and let's for the actions then say we're
15880
13:59:31,915 --> 13:59:37,360
gonna create a text button remember the
15881
13:59:34,639 --> 13:59:39,839
text button has two parameters
15882
13:59:39,839 --> 13:59:43,755
file the other one is unpressed the text
15883
13:59:41,915 --> 13:59:46,559
button always has to have both these
15884
13:59:47,360 --> 13:59:52,879
what do we want to do on the unpressed
15885
13:59:50,000 --> 13:59:55,360
we're going to just create the um
15886
13:59:52,879 --> 13:59:58,399
function signature for it and for its
15887
13:59:55,360 --> 14:00:01,040
child we're just going to say text
15888
14:00:06,800 --> 14:00:12,319
and uh let's just do some formatting in
15889
14:00:09,360 --> 14:00:14,800
there so let's think about what we need
15890
14:00:12,319 --> 14:00:16,319
to do on the on press just remember this
15891
14:00:14,800 --> 14:00:18,080
dialog is just going to be displayed to
15892
14:00:16,319 --> 14:00:19,756
the user the user is just going to get
15893
14:00:18,080 --> 14:00:21,840
the information such as we're going to
15894
14:00:19,756 --> 14:00:24,880
display an alert saying that oh
15895
14:00:21,839 --> 14:00:26,559
um your password is too weak or uh hey
15896
14:00:24,879 --> 14:00:28,799
this user already exists or this email
15897
14:00:26,559 --> 14:00:31,595
already exists or incorrect password so
15898
14:00:28,800 --> 14:00:33,200
it's just text and then ok button so
15899
14:00:31,595 --> 14:00:34,479
pressing the ok button the only thing is
15900
14:00:33,199 --> 14:00:36,239
going to do is just going to dismiss the
15901
14:00:34,480 --> 14:00:39,276
alert dialogue so only thing you need to
15902
14:00:36,239 --> 14:00:42,400
do in here is just to say navigator of
15903
14:00:39,275 --> 14:00:45,115
your context and then you'll just pop
15904
14:00:42,400 --> 14:00:47,040
this ensures that your dialogue then
15905
14:00:47,040 --> 14:00:50,800
i've done some videos about this before
15906
14:00:49,040 --> 14:00:52,955
on linkedin and twitter i've done live
15907
14:00:50,800 --> 14:00:54,639
videos about this where we talked about
15908
14:00:52,955 --> 14:00:56,000
a better way of displaying error
15909
14:00:56,000 --> 14:01:00,000
this way of displaying error dialects is
15910
14:01:02,319 --> 14:01:08,400
pressing of the button dismisses the
15911
14:01:04,720 --> 14:01:10,160
dialog however sometimes you may need to
15912
14:01:08,400 --> 14:01:11,756
have persistent dialogue displayed on
15913
14:01:10,160 --> 14:01:14,720
the screen even when you push new
15914
14:01:11,756 --> 14:01:16,400
screens on top of other screens so
15915
14:01:14,720 --> 14:01:18,639
it's a little bit strange that a
15916
14:01:16,400 --> 14:01:20,800
dialogue is doing navigation in that it
15917
14:01:20,800 --> 14:01:24,720
a better way of doing this is using
15918
14:01:22,480 --> 14:01:26,800
overlays but overlays are a little bit
15919
14:01:24,720 --> 14:01:28,400
complicated for this part of the course
15920
14:01:26,800 --> 14:01:31,276
so we're not going to talk about
15921
14:01:28,400 --> 14:01:33,275
overlays right now let's just say now we
15922
14:01:31,275 --> 14:01:37,115
have a generic dialogue that can display
15923
14:01:33,275 --> 14:01:40,115
a text with a title of an err occurred
15924
14:01:40,160 --> 14:01:46,320
all right so that is in place now and
15925
14:01:43,915 --> 14:01:48,239
now let's go to the next item that we
15926
14:01:48,239 --> 14:01:54,400
and that is to handle user not found
15927
14:01:56,000 --> 14:01:59,275
sorry i just need to have a look at my
15928
14:01:57,680 --> 14:02:01,595
notes to ensure that i'm telling you
15929
14:01:59,275 --> 14:02:03,436
everything that i i was supposed to tell
15930
14:02:03,436 --> 14:02:08,560
all right so in here on your login view
15931
14:02:06,639 --> 14:02:12,080
in the case that the error is used or
15932
14:02:08,559 --> 14:02:15,115
not found we are going to display an
15933
14:02:12,080 --> 14:02:19,200
alert to the user using our new function
15934
14:02:15,116 --> 14:02:21,436
okay so in if e code user not found
15935
14:02:19,199 --> 14:02:22,639
instead of devtools log we're going to
15936
14:02:22,639 --> 14:02:28,000
show error dialog the context is already
15937
14:02:25,839 --> 14:02:29,679
available for us because you see it is
15938
14:02:29,680 --> 14:02:33,275
your build function already so you don't
15939
14:02:31,680 --> 14:02:35,595
have to grab it from anywhere else it's
15940
14:02:33,275 --> 14:02:40,239
available right there and for a text
15941
14:02:35,595 --> 14:02:40,239
we're just gonna say user not found okay
15942
14:02:40,559 --> 14:02:45,915
and close the string you can see now if
15943
14:02:42,879 --> 14:02:47,755
i format this um code these two
15944
14:02:45,915 --> 14:02:49,360
parameters are displayed on the same
15945
14:02:47,756 --> 14:02:51,840
line as i mentioned in the previous
15946
14:02:49,360 --> 14:02:53,360
chapter all you have to do for the dart
15947
14:02:51,839 --> 14:02:54,955
formatter to be able to format this code
15948
14:02:53,360 --> 14:02:56,559
correctly is put a comma at the end of
15949
14:02:54,955 --> 14:02:58,799
the last parameter and just press
15950
14:02:56,559 --> 14:03:00,879
command s and it will format it again
15951
14:02:58,800 --> 14:03:02,720
for you so each parameter goes into its
15952
14:03:02,720 --> 14:03:09,040
okay um in case of the so now that we've
15953
14:03:06,400 --> 14:03:10,720
handled user not found okay so we could
15954
14:03:09,040 --> 14:03:12,559
literally test that let me do a hot
15955
14:03:10,720 --> 14:03:15,040
restart just to ensure every piece of
15956
14:03:12,559 --> 14:03:16,639
code is injected into the binary that is
15957
14:03:16,639 --> 14:03:22,239
let's go and place an email that doesn't
15958
14:03:19,275 --> 14:03:24,159
exist so that we get the user not found
15959
14:03:22,239 --> 14:03:26,319
and let's just enter some password and
15960
14:03:24,160 --> 14:03:28,880
then i'm going to press the login button
15961
14:03:26,319 --> 14:03:30,400
and you can see now we get our error
15962
14:03:28,879 --> 14:03:33,519
displayed on the screen that says an
15963
14:03:30,400 --> 14:03:36,400
error occurred user not found and you
15964
14:03:33,519 --> 14:03:37,275
can press the ok button to get rid of
15965
14:03:37,275 --> 14:03:41,360
um the dialog and getting rid of the
15966
14:03:39,595 --> 14:03:43,360
dialog is happening here you see
15967
14:03:41,360 --> 14:03:45,680
pressing that button says navigator of
15968
14:03:45,680 --> 14:03:51,275
that's what is happening there
15969
14:03:49,275 --> 14:03:53,839
all right great stuff what we need to do
15970
14:03:51,275 --> 14:03:55,199
now is to handle wrong password as well
15971
14:03:53,839 --> 14:03:57,755
and this one is going to be a breeze
15972
14:03:55,199 --> 14:04:00,319
because we've already handled user not
15973
14:03:57,756 --> 14:04:02,319
found so what you can do is copy and
15974
14:04:00,319 --> 14:04:04,480
paste this code that was placed here in
15975
14:04:02,319 --> 14:04:07,040
the user not found statement and bring
15976
14:04:04,480 --> 14:04:09,360
it here and replace this devtools log
15977
14:04:07,040 --> 14:04:11,200
wrong password with that and instead of
15978
14:04:09,360 --> 14:04:14,559
saying user not found what we're going
15979
14:04:11,199 --> 14:04:16,879
to say is going to say wrong credentials
15980
14:04:19,595 --> 14:04:23,360
try to log in you can also do that at
15981
14:04:21,915 --> 14:04:25,755
home or wherever you're watching this
15982
14:04:23,360 --> 14:04:27,275
course from you can enter the email
15983
14:04:25,756 --> 14:04:28,955
address of a user who's already
15984
14:04:27,275 --> 14:04:30,559
registered with your application so like
15985
14:04:28,955 --> 14:04:32,720
if you're testing you may enter the
15986
14:04:30,559 --> 14:04:34,079
email address of the person that or your
15987
14:04:32,720 --> 14:04:35,680
own email address if that's what you're
15988
14:04:34,080 --> 14:04:38,319
testing with but enter the wrong
15989
14:04:38,319 --> 14:04:41,839
and then press login and now you can see
15990
14:04:40,000 --> 14:04:44,955
that message being printed to the screen
15991
14:04:53,756 --> 14:04:58,400
is handle other firebase authentication
15992
14:04:58,400 --> 14:05:02,319
and you can see here in this case we're
15993
14:05:00,639 --> 14:05:04,239
saying if there is a firebase auth
15994
14:05:02,319 --> 14:05:07,275
exception and if the code is used or not
15995
14:05:04,239 --> 14:05:10,239
found or if the code is wrong password
15996
14:05:07,275 --> 14:05:12,400
however there might also be an exception
15997
14:05:10,239 --> 14:05:15,199
that you haven't accounted for and
15998
14:05:12,400 --> 14:05:17,680
although these are the most known error
15999
14:05:15,199 --> 14:05:19,680
codes that you can get there's always a
16000
14:05:17,680 --> 14:05:22,400
possibility that there will be another
16001
14:05:19,680 --> 14:05:23,915
error code in the future maybe not now
16002
14:05:22,400 --> 14:05:25,275
that you will receive from firebase
16003
14:05:23,915 --> 14:05:26,239
which you haven't accounted for in that
16004
14:05:26,239 --> 14:05:30,079
the code then goes in here and says oh
16005
14:05:27,839 --> 14:05:31,915
the code is not user not found
16006
14:05:30,080 --> 14:05:34,160
is not wrong password and it will just
16007
14:05:31,915 --> 14:05:36,879
fall through meaning that this entire
16008
14:05:34,160 --> 14:05:38,400
code will this entire catch block will
16009
14:05:36,879 --> 14:05:42,479
not be able to catch the actual
16010
14:05:38,400 --> 14:05:44,639
exception and your code will crash
16011
14:05:42,480 --> 14:05:45,916
so it is very or you will actually get
16012
14:05:47,116 --> 14:05:51,276
it's very important that you
16013
14:05:48,955 --> 14:05:54,000
think about your exception handling
16014
14:05:51,275 --> 14:05:55,519
early on so you don't send out a code to
16015
14:05:54,000 --> 14:05:57,116
production that doesn't have proper
16016
14:05:58,879 --> 14:06:02,799
that's what we're going to do
16017
14:06:01,040 --> 14:06:05,520
so two things we need to do we have to
16018
14:06:02,800 --> 14:06:07,840
handle other exceptions that might occur
16019
14:06:05,519 --> 14:06:11,275
and also other firebase off exceptions
16020
14:06:14,080 --> 14:06:18,160
actually we need to first do this so
16021
14:06:15,595 --> 14:06:21,040
let's first take care of other all
16022
14:06:18,160 --> 14:06:23,840
firebase auth exception so place an else
16023
14:06:21,040 --> 14:06:25,840
statement in here and then in that case
16024
14:06:25,839 --> 14:06:30,399
like i'm doing here and for the error
16025
14:06:28,400 --> 14:06:31,436
we're just going to say error and then
16026
14:06:33,360 --> 14:06:37,040
now you may not be familiar with this
16027
14:06:35,199 --> 14:06:38,639
syntax from before because maybe i
16028
14:06:37,040 --> 14:06:40,400
haven't explained this before but this
16029
14:06:38,639 --> 14:06:42,559
is like string formatting and guardian
16030
14:06:40,400 --> 14:06:44,480
is very elegant it's also available i
16031
14:06:42,559 --> 14:06:46,159
mean kind of the same thing is available
16032
14:06:44,480 --> 14:06:47,916
in almost every language that i work
16033
14:06:46,160 --> 14:06:49,040
with swift it's available in python when
16034
14:06:47,915 --> 14:06:50,559
you're working with django it's
16035
14:06:49,040 --> 14:06:53,275
available in ros it's available in
16036
14:06:53,275 --> 14:06:58,159
you're basically escaping a string and
16037
14:06:55,595 --> 14:07:00,159
injecting some actual variables inside
16038
14:07:00,160 --> 14:07:05,116
so in python for instance you would do a
16039
14:07:03,360 --> 14:07:06,800
f which means you're formatting and
16040
14:07:06,800 --> 14:07:11,116
and you would i think you would say
16041
14:07:12,800 --> 14:07:16,880
and then you would put your value at the
16042
14:07:15,040 --> 14:07:18,720
end something with a percentage sign
16043
14:07:16,879 --> 14:07:20,239
something like that and in javascript
16044
14:07:20,239 --> 14:07:24,955
back quotes like this so and in swift
16045
14:07:22,639 --> 14:07:27,436
you will do something like this uh e
16046
14:07:24,955 --> 14:07:30,799
code like that inside a string so this
16047
14:07:27,436 --> 14:07:32,480
is basically a way for dark to inject an
16048
14:07:35,839 --> 14:07:40,239
in the case of firebase auth exception
16049
14:07:38,239 --> 14:07:43,115
the e becomes then a firebase auth
16050
14:07:43,116 --> 14:07:47,360
exception of this type has a code of
16051
14:07:47,360 --> 14:07:52,400
and this is us basically injecting that
16052
14:07:49,839 --> 14:07:54,000
string inside our own string so every
16053
14:07:52,400 --> 14:07:57,040
code then will be prefixed with the
16054
14:07:54,000 --> 14:07:59,756
value of error and then a double double
16055
14:07:57,040 --> 14:08:01,520
column here and then space and the code
16056
14:08:01,519 --> 14:08:05,519
now that we've done that we also need to
16057
14:08:03,199 --> 14:08:07,680
handle the case where the exception is
16058
14:08:05,519 --> 14:08:09,275
not a firebase auth exception and that's
16059
14:08:07,680 --> 14:08:11,360
the next point that we need to talk
16060
14:08:11,360 --> 14:08:17,199
so in here uh at the end of this
16061
14:08:15,360 --> 14:08:18,879
on firebase auth exception block and if
16062
14:08:17,199 --> 14:08:20,799
you're kind of like unsure where things
16063
14:08:18,879 --> 14:08:22,000
start and then you can see that as you
16064
14:08:22,000 --> 14:08:25,756
end of this curly bracket here you can
16065
14:08:24,400 --> 14:08:27,596
see that visual studio code has
16066
14:08:25,756 --> 14:08:29,360
highlighted this curly bracket right
16067
14:08:27,595 --> 14:08:31,360
there saying that this is the beginning
16068
14:08:29,360 --> 14:08:32,720
of the code and even if that's not
16069
14:08:31,360 --> 14:08:35,275
enough for you you can always go to
16070
14:08:35,275 --> 14:08:40,559
gutter on the left hand side and like
16071
14:08:42,319 --> 14:08:46,480
here here you can easily see them you
16072
14:08:46,480 --> 14:08:50,880
can we not collapse this entire if
16073
14:08:48,800 --> 14:08:53,756
no we can't collapse that entire thing
16074
14:08:50,879 --> 14:08:54,955
but anyway so at the end of this we need
16075
14:08:58,559 --> 14:09:02,720
this is a generic catch block meaning
16076
14:09:02,720 --> 14:09:06,720
the exception that occurs in the try
16077
14:09:04,800 --> 14:09:09,840
statement is not a firebase auth
16078
14:09:06,720 --> 14:09:12,559
exception then go into this catch block
16079
14:09:09,839 --> 14:09:15,039
and in this cache block now e you can
16080
14:09:12,559 --> 14:09:17,040
see is an object so it's not like a
16081
14:09:15,040 --> 14:09:19,116
normal exception anymore it's just any
16082
14:09:17,040 --> 14:09:21,436
object because if you remember when we
16083
14:09:19,116 --> 14:09:24,240
talked about exceptions in dart you can
16084
14:09:21,436 --> 14:09:25,436
throw pretty much anything in dart as an
16085
14:09:24,239 --> 14:09:27,275
exception you can even throw an
16086
14:09:27,275 --> 14:09:30,720
that's why it's telling us saying that
16087
14:09:28,879 --> 14:09:33,115
any except any other exception other
16088
14:09:30,720 --> 14:09:35,275
than this is just an object it's not
16089
14:09:33,116 --> 14:09:38,160
known to me i don't know what it is so
16090
14:09:35,275 --> 14:09:39,756
it's up to you now to display that error
16091
14:09:38,160 --> 14:09:42,480
now if you remember from before from the
16092
14:09:39,756 --> 14:09:44,559
previous chapter objects all have a
16093
14:09:44,559 --> 14:09:49,040
so that's perfect then we can go here
16094
14:09:47,680 --> 14:09:50,800
let me expand these so that they don't
16095
14:09:49,040 --> 14:09:51,915
become a little bit cryptic like they
16096
14:09:51,915 --> 14:09:57,839
and paste that code to display a show
16097
14:09:55,199 --> 14:10:00,559
error dialogue again in here also we're
16098
14:10:07,436 --> 14:10:10,720
we we're handling wrong credentials with
16099
14:10:09,116 --> 14:10:13,916
handling any other error that might
16100
14:10:10,720 --> 14:10:15,275
arise and also sorry any other firebase
16101
14:10:15,275 --> 14:10:21,595
of exception and any other exception in
16102
14:10:18,400 --> 14:10:24,560
general that might arise during logging
16103
14:10:26,559 --> 14:10:30,079
that was a lot of information i
16104
14:10:28,000 --> 14:10:32,559
understand and i move past this quite
16105
14:10:30,080 --> 14:10:33,916
fast since when we talk about one thing
16106
14:10:32,559 --> 14:10:35,360
like we've already talked about
16107
14:10:33,915 --> 14:10:37,199
displaying dialogues i don't think it's
16108
14:10:35,360 --> 14:10:39,040
worth your time and my time to spend too
16109
14:10:37,199 --> 14:10:41,680
much time explaining all of these over
16110
14:10:41,680 --> 14:10:45,756
and that's why i move past these
16111
14:10:45,756 --> 14:10:49,520
what we need to do now is to do some
16112
14:10:47,839 --> 14:10:51,595
cleanup because you see now we have our
16113
14:10:51,595 --> 14:10:56,639
sorry login view dart file here and the
16114
14:10:54,000 --> 14:10:59,595
m in visual studio code means modified
16115
14:10:56,639 --> 14:11:01,756
since we last committed this into git
16116
14:10:59,595 --> 14:11:03,756
and we have that file however we also
16117
14:11:01,756 --> 14:11:06,160
have the show error dialog that is
16118
14:11:03,756 --> 14:11:08,559
sitting here that is also going to be
16119
14:11:06,160 --> 14:11:10,640
useful for the register view however
16120
14:11:08,559 --> 14:11:13,040
it's right now just sitting in the login
16121
14:11:10,639 --> 14:11:15,116
view so if register view wants to then
16122
14:11:13,040 --> 14:11:17,436
use this same code you will have to
16123
14:11:15,116 --> 14:11:20,400
import the login view and then use this
16124
14:11:17,436 --> 14:11:22,560
feature it's a little bit wrong this is
16125
14:11:20,400 --> 14:11:24,000
supposed to be like a generic show error
16126
14:11:22,559 --> 14:11:25,839
dialogue and it should be available for
16127
14:11:24,000 --> 14:11:28,160
pretty much any piece of code that needs
16128
14:11:25,839 --> 14:11:29,519
it so what we were going to do as a
16129
14:11:28,160 --> 14:11:30,720
caption says here we're going to create
16130
14:11:30,720 --> 14:11:37,595
um and folder as i can see under lib
16131
14:11:34,955 --> 14:11:40,400
so open your project explorer under lib
16132
14:11:37,595 --> 14:11:42,720
go and create and you can see here we
16133
14:11:40,400 --> 14:11:44,955
need to create a file called show error
16134
14:11:42,720 --> 14:11:46,000
dialog dart and it's it needs to be
16135
14:11:46,000 --> 14:11:50,720
a folder called utility so i'm going to
16136
14:11:48,319 --> 14:11:54,319
right click on lib and say new file and
16137
14:11:50,720 --> 14:11:55,436
i'm just going to type utilities
16138
14:12:00,000 --> 14:12:05,915
and go to your login view and grab that
16139
14:12:05,915 --> 14:12:11,519
uh for show error dialogue uh poof
16140
14:12:13,199 --> 14:12:18,239
however you cut in your operating system
16141
14:12:15,680 --> 14:12:20,639
in mac is command x in visual studio
16142
14:12:18,239 --> 14:12:22,400
code and bring it into your show error
16143
14:12:20,639 --> 14:12:24,720
dialog file all right we're gonna get a
16144
14:12:22,400 --> 14:12:26,160
lot of uh errors but as i've explained
16145
14:12:24,720 --> 14:12:28,160
in the previous chapters we can also
16146
14:12:26,160 --> 14:12:30,560
import these things material dart to get
16147
14:12:28,160 --> 14:12:32,720
rid of almost actually all of those
16148
14:12:30,559 --> 14:12:33,915
errors so that was fantastic
16149
14:12:32,720 --> 14:12:35,520
now that we've done that you can see
16150
14:12:33,915 --> 14:12:37,435
visual studio is already showing this
16151
14:12:35,519 --> 14:12:40,079
tab the login view as having an error
16152
14:12:37,436 --> 14:12:42,800
and that is because login view is using
16153
14:12:40,080 --> 14:12:44,800
show error dialog but now that we've
16154
14:12:42,800 --> 14:12:46,240
removed show error dialog from there it
16155
14:12:44,800 --> 14:12:49,680
doesn't know where this show error
16156
14:12:49,680 --> 14:12:55,275
so what we need to do is to use our new
16157
14:12:51,915 --> 14:12:56,955
file in the login view dart file
16158
14:12:55,275 --> 14:12:58,879
and you could do that you could ask
16159
14:12:56,955 --> 14:13:01,275
visual studio code to help you with this
16160
14:12:58,879 --> 14:13:02,319
and you could just say import library
16161
14:13:02,319 --> 14:13:07,116
that's it it imported it for us
16162
14:13:08,559 --> 14:13:14,159
now that we're we don't have any more
16163
14:13:14,160 --> 14:13:18,000
visual studio code is helping and saying
16164
14:13:15,915 --> 14:13:20,159
you're no more using you're no longer
16165
14:13:18,000 --> 14:13:21,360
using the dev tools or the dart
16166
14:13:23,360 --> 14:13:27,840
what you can do is just to safely remove
16167
14:13:25,756 --> 14:13:29,840
that and clean up your imports as well
16168
14:13:31,360 --> 14:13:34,720
that is working fine and we can just
16169
14:13:33,116 --> 14:13:37,116
confirm that so i'm just going to enter
16170
14:13:37,116 --> 14:13:40,480
with the wrong credentials and just to
16171
14:13:38,879 --> 14:13:42,399
ensure that we're getting the dialogue
16172
14:13:43,756 --> 14:13:47,040
now that we've done that i'm going to
16173
14:13:45,116 --> 14:13:49,840
change the screen layout a little bit
16174
14:13:47,040 --> 14:13:51,756
and what we're going to do is that we
16175
14:13:49,839 --> 14:13:53,359
need to wrap up this chapter we've
16176
14:13:51,756 --> 14:13:55,520
cleaned up our error handling and we
16177
14:13:53,360 --> 14:13:58,000
need to just make a commit remember
16178
14:13:55,519 --> 14:14:01,519
pretty much in every chapter from a few
16179
14:13:58,000 --> 14:14:03,040
chapters uh back onwards we're to commit
16180
14:14:01,519 --> 14:14:04,719
our code at the end of the chapter just
16181
14:14:03,040 --> 14:14:06,800
to make sure that you have traceability
16182
14:14:04,720 --> 14:14:08,160
for for your code and this is what you
16183
14:14:06,800 --> 14:14:10,080
will need to do even if you're working
16184
14:14:08,160 --> 14:14:12,000
for instance actually especially if
16185
14:14:12,000 --> 14:14:16,400
a team with other people doing flutter
16186
14:14:14,480 --> 14:14:18,640
code or any other code you need to
16187
14:14:16,400 --> 14:14:20,955
ensure that your code which is ready or
16188
14:14:18,639 --> 14:14:22,239
even if it's not ready it is committed
16189
14:14:22,239 --> 14:14:26,239
even if your code isn't ready you can
16190
14:14:23,756 --> 14:14:29,040
commit it into a specific branch but you
16191
14:14:26,239 --> 14:14:30,799
should never leave your work day
16192
14:14:29,040 --> 14:14:32,480
without committing your work remember
16193
14:14:32,480 --> 14:14:37,200
so let's now go and commit our work i'm
16194
14:14:35,199 --> 14:14:39,680
gonna bring up the terminal a little bit
16195
14:14:37,199 --> 14:14:42,639
here so and you can see that the
16196
14:14:39,680 --> 14:14:44,480
previous chapter we did a step five
16197
14:14:42,639 --> 14:14:47,116
and in here we're going to commit our
16198
14:14:44,480 --> 14:14:48,956
work as step 6 and also we're going to
16199
14:14:48,955 --> 14:14:53,275
so let's say git status you can see
16200
14:14:51,116 --> 14:14:55,276
utilities is a new folder i'm just going
16201
14:14:53,275 --> 14:14:56,720
to say git add all i'm going to increase
16202
14:14:55,275 --> 14:14:57,915
the size of the screen as well so you
16203
14:14:57,915 --> 14:15:00,719
make your studio code a little bit
16204
14:15:02,319 --> 14:15:07,915
and get add dash dash all and then git
16205
14:15:05,680 --> 14:15:09,436
status now you can see these are staged
16206
14:15:07,915 --> 14:15:13,115
for committing and i'm going to commit
16207
14:15:13,116 --> 14:15:16,800
after doing that let's tag it as well as
16208
14:15:16,800 --> 14:15:23,360
um and get push our changes and we're
16209
14:15:23,360 --> 14:15:29,116
all right that is absolutely perfect
16210
14:15:26,879 --> 14:15:30,879
so that was that to be honest with you
16211
14:15:29,116 --> 14:15:32,880
for this chapter so this was a quick
16212
14:15:30,879 --> 14:15:34,479
chapter as well and that's completely
16213
14:15:32,879 --> 14:15:37,040
okay actually quite refreshing to have
16214
14:15:34,480 --> 14:15:38,560
these short chapters for me as well
16215
14:15:38,559 --> 14:15:42,720
so now that we've done error handling in
16216
14:15:42,720 --> 14:15:46,955
we also need to clean up our register
16217
14:15:44,955 --> 14:15:48,479
view you can see our registry has kind
16218
14:15:48,480 --> 14:15:52,640
as login view had at the beginning of
16219
14:15:50,480 --> 14:15:55,680
this chapter in that we have a lot of
16220
14:15:52,639 --> 14:15:58,080
error like dev tools log stuff in here
16221
14:15:55,680 --> 14:16:00,000
which aren't so useful so for the next
16222
14:16:00,000 --> 14:16:03,915
what we need to do is to ensure that
16223
14:16:01,915 --> 14:16:07,595
we're logged out of the application and
16224
14:16:03,915 --> 14:16:10,719
that we can go to the register view as
16225
14:16:07,595 --> 14:16:13,040
we can do here so that's where you need
16226
14:16:10,720 --> 14:16:15,200
to be for the next chapter and before we
16227
14:16:15,199 --> 14:16:19,360
with the course to the next chapter so i
16228
14:16:17,275 --> 14:16:21,680
hope you enjoyed this chapter and i'll
16229
14:16:21,680 --> 14:16:25,915
hello everyone and welcome to chapter 22
16230
14:16:25,915 --> 14:16:28,639
in the previous chapters we've been
16231
14:16:27,275 --> 14:16:30,799
talking quite a lot about login and
16232
14:16:28,639 --> 14:16:33,116
register and email verification and as
16233
14:16:30,800 --> 14:16:34,956
you saw in the previous chapter and we
16234
14:16:33,116 --> 14:16:37,596
have some problems still in our register
16235
14:16:34,955 --> 14:16:38,400
view in that when we come to
16236
14:16:38,400 --> 14:16:42,480
error handling we're still doing logs
16237
14:16:40,400 --> 14:16:44,000
basically instead of using our new
16238
14:16:42,480 --> 14:16:45,116
function that was called show error
16239
14:16:45,116 --> 14:16:50,480
and also our register view basically
16240
14:16:48,400 --> 14:16:52,800
isn't really able to send us to the
16241
14:16:50,480 --> 14:16:54,640
correct place after a successful
16242
14:16:52,800 --> 14:16:56,956
registration you see we have email
16243
14:16:54,639 --> 14:16:59,360
verification set up in that every user
16244
14:16:56,955 --> 14:17:01,519
who registers also needs to
16245
14:16:59,360 --> 14:17:04,160
verify his or her email before entering
16246
14:17:01,519 --> 14:17:07,115
the main ui of the application so if
16247
14:17:04,160 --> 14:17:09,436
that is the default behavior in that a
16248
14:17:07,116 --> 14:17:11,520
newly registered user needs to verify
16249
14:17:09,436 --> 14:17:12,955
their email perhaps it would be best
16250
14:17:12,955 --> 14:17:18,080
send the user right after registration
16251
14:17:15,519 --> 14:17:19,199
to the email verification view and these
16252
14:17:18,080 --> 14:17:21,680
are the things that basically we're
16253
14:17:19,199 --> 14:17:23,680
going to solve in this chapter fixing
16254
14:17:21,680 --> 14:17:25,915
our log statements in the register view
16255
14:17:23,680 --> 14:17:28,080
and also sending the user to the email
16256
14:17:28,080 --> 14:17:31,276
sending the registered user to the email
16257
14:17:29,915 --> 14:17:33,755
verification view right after
16258
14:17:33,756 --> 14:17:37,116
so these are the goals of this chapter
16259
14:17:35,275 --> 14:17:38,559
so you know and i'm gonna bring up my
16260
14:17:37,116 --> 14:17:40,880
visual studio code to the screen so you
16261
14:17:38,559 --> 14:17:43,115
can also see it i'm gonna bring up scr
16262
14:17:40,879 --> 14:17:45,360
cpy to the right hand side so you see
16263
14:17:43,116 --> 14:17:47,360
you see that too position these windows
16264
14:17:48,559 --> 14:17:52,479
the first task that we we need to do
16265
14:17:50,480 --> 14:17:55,596
here is to make sure that we're using
16266
14:17:57,436 --> 14:18:00,560
and if you haven't watched the previous
16267
14:17:58,720 --> 14:18:02,000
chapter that's what we did in one of the
16268
14:18:00,559 --> 14:18:03,915
previous chapters that we talked about
16269
14:18:02,000 --> 14:18:06,080
this uh file here in utilities show
16270
14:18:03,915 --> 14:18:07,755
error dialog that increase the size of
16271
14:18:06,080 --> 14:18:09,916
the window so you see it better
16272
14:18:07,756 --> 14:18:11,200
so this show error dialog is a generic
16273
14:18:11,199 --> 14:18:16,799
has a title that says an error occurred
16274
14:18:13,595 --> 14:18:18,799
and also a text of your choosing
16275
14:18:16,800 --> 14:18:20,240
so let's go to our registry view as the
16276
14:18:18,800 --> 14:18:22,639
caption says here i'm going to minimize
16277
14:18:20,239 --> 14:18:23,915
the terminal here and get rid of the
16278
14:18:23,915 --> 14:18:28,639
and let's go to this weak password and
16279
14:18:28,639 --> 14:18:32,159
show error dialog and you can see it's
16280
14:18:33,519 --> 14:18:37,680
it's going to auto import it for us so
16281
14:18:35,839 --> 14:18:38,799
let's say show air dialog with that
16282
14:18:38,800 --> 14:18:42,560
and i'm just going to in this in the
16283
14:18:43,436 --> 14:18:50,000
we need to just say weak password okay
16284
14:18:48,000 --> 14:18:51,519
so that part is done and you can also
16285
14:18:50,000 --> 14:18:54,319
put a comma at the end of the second
16286
14:18:51,519 --> 14:18:56,639
parameter just to make sure that it is
16287
14:18:54,319 --> 14:18:58,319
clean but remember also that show error
16288
14:18:58,319 --> 14:19:02,319
is an asynchronous function so if you
16289
14:19:00,639 --> 14:19:04,559
move your mouse over it you'll see that
16290
14:19:02,319 --> 14:19:05,915
it says future void so by just calling
16291
14:19:04,559 --> 14:19:07,435
show air dial like you're not showing
16292
14:19:05,915 --> 14:19:09,435
the error dialogue you're basically just
16293
14:19:07,436 --> 14:19:12,239
telling the short i like to return the
16294
14:19:09,436 --> 14:19:14,880
future which in turn then uh can display
16295
14:19:12,239 --> 14:19:16,720
the error dialogue if you await on it so
16296
14:19:16,720 --> 14:19:21,916
after doing that let's remove our dev
16297
14:19:19,839 --> 14:19:25,359
devtools log from there from the weak
16298
14:19:26,559 --> 14:19:31,519
now what we're going to do is to copy
16299
14:19:29,275 --> 14:19:34,239
this code that we wrote here and go to
16300
14:19:31,519 --> 14:19:36,079
email already in use and display another
16301
14:19:34,239 --> 14:19:39,275
error dialog in here using the same
16302
14:19:36,080 --> 14:19:43,840
exact code and i'm just going to say
16303
14:19:39,275 --> 14:19:46,159
email is already in use okay
16304
14:19:43,839 --> 14:19:48,319
so that's for email rna news and also
16305
14:19:46,160 --> 14:19:51,116
for invalid email we're going to say
16306
14:19:51,436 --> 14:19:54,880
let me have a look for invalid email if
16307
14:19:54,879 --> 14:20:01,360
um this is an invalid email address
16308
14:20:01,756 --> 14:20:07,840
and i can see that we haven't really
16309
14:20:05,436 --> 14:20:11,040
handled other exceptions that might
16310
14:20:07,839 --> 14:20:11,839
occur because you remember in the login
16311
14:20:13,839 --> 14:20:19,359
handling for instance other uh
16312
14:20:17,595 --> 14:20:21,756
other exceptions that might occur like
16313
14:20:19,360 --> 14:20:23,595
firebase off exceptions that we did in
16314
14:20:21,756 --> 14:20:25,840
an else statement there and also we did
16315
14:20:23,595 --> 14:20:27,519
a generic catch statement that catches
16316
14:20:25,839 --> 14:20:29,755
any other exception that is not a
16317
14:20:27,519 --> 14:20:31,359
firebase auth exception and i can see
16318
14:20:29,756 --> 14:20:32,880
now we haven't done that in register
16319
14:20:31,360 --> 14:20:34,955
view so let's go and take care of that
16320
14:20:34,955 --> 14:20:39,436
so in this else statement we're catching
16321
14:20:37,116 --> 14:20:41,360
any other firebase off exception that
16322
14:20:39,436 --> 14:20:42,560
might occur okay so i'm just going to
16323
14:20:46,239 --> 14:20:50,955
and dollar e code okay so that's very
16324
14:20:48,955 --> 14:20:52,720
similar to what we're doing in
16325
14:20:53,436 --> 14:20:57,275
and i apologize i could just see that
16326
14:20:55,275 --> 14:20:59,360
you couldn't see the code because it was
16327
14:20:57,275 --> 14:21:00,720
hidden behind the caption but now you
16328
14:20:59,360 --> 14:21:02,639
can see it so i'm putting an else
16329
14:21:00,720 --> 14:21:05,116
statement here and then i'm saying
16330
14:21:02,639 --> 14:21:06,720
basically a weight shorter dialogue and
16331
14:21:06,720 --> 14:21:11,200
that's for if you if you look at have a
16332
14:21:11,199 --> 14:21:16,955
curly bracket right here which you can
16333
14:21:13,436 --> 14:21:18,955
now see this purple one it it starts
16334
14:21:16,955 --> 14:21:20,639
here because it's the beginning of where
16335
14:21:18,955 --> 14:21:21,915
we start catching firebase off
16336
14:21:22,879 --> 14:21:27,519
what we also need to do is put another l
16337
14:21:25,436 --> 14:21:31,596
another catch statement here which
16338
14:21:27,519 --> 14:21:33,839
catches any other exception that is not
16339
14:21:31,595 --> 14:21:35,915
a firebase auth exception okay
16340
14:21:33,839 --> 14:21:37,359
so we've covered this in the previous
16341
14:21:35,915 --> 14:21:39,360
chapter when we talked about exception
16342
14:21:37,360 --> 14:21:43,275
handling in the login view so i don't
16343
14:21:39,360 --> 14:21:45,116
think i need to explain that again um
16344
14:21:43,275 --> 14:21:46,559
okay so what we're going to do in here
16345
14:21:45,116 --> 14:21:48,800
we're also going to show the error
16346
14:21:46,559 --> 14:21:50,559
dialog in this case as well but for the
16347
14:21:48,800 --> 14:21:52,000
message we're just going to say e2
16348
14:21:52,000 --> 14:21:56,480
similar something similar we did in
16349
14:21:54,480 --> 14:21:59,040
our login view actually exactly the same
16350
14:21:59,040 --> 14:22:02,800
okay that was great so now we're using
16351
14:22:00,879 --> 14:22:04,399
short error dialog instead of log in the
16352
14:22:04,400 --> 14:22:07,596
basically i don't think we're using dev
16353
14:22:07,595 --> 14:22:11,915
over using devtools login here i don't
16354
14:22:10,319 --> 14:22:13,199
think we need to do that anymore so we
16355
14:22:13,199 --> 14:22:17,435
and we can also then get rid of devtools
16356
14:22:21,116 --> 14:22:24,160
it's gonna have a look at my notes a
16357
14:22:23,040 --> 14:22:25,595
little bit just to ensure that i'm
16358
14:22:24,160 --> 14:22:26,800
telling you all the information that you
16359
14:22:28,800 --> 14:22:32,560
um now that we've done all of this we
16360
14:22:33,756 --> 14:22:36,559
you can see as the cache that says after
16361
14:22:35,275 --> 14:22:40,479
every registration we need to confirm
16362
14:22:36,559 --> 14:22:42,955
the user's email and that is like the um
16363
14:22:42,955 --> 14:22:46,559
newly registered user in application
16364
14:22:46,559 --> 14:22:51,915
a newly registered user cannot have
16365
14:22:49,915 --> 14:22:53,595
already confirmed their email because
16366
14:22:51,915 --> 14:22:55,915
it's just not possible the two don't go
16367
14:22:53,595 --> 14:22:57,756
together a newly user a newly registered
16368
14:22:55,915 --> 14:22:59,595
user hasn't had their email address
16369
14:22:57,756 --> 14:23:02,720
registered in our system therefore has
16370
14:22:59,595 --> 14:23:04,079
not received a verification email during
16371
14:23:04,080 --> 14:23:08,160
this is a pattern that we need to
16372
14:23:05,680 --> 14:23:09,915
basically help our users with so after
16373
14:23:08,160 --> 14:23:12,560
every successful registration we're then
16374
14:23:09,915 --> 14:23:15,275
going to automatically send the user to
16375
14:23:12,559 --> 14:23:16,720
the verify email view and if you
16376
14:23:15,275 --> 14:23:18,879
remember from the previous chapters we
16377
14:23:16,720 --> 14:23:20,840
have this verify email view right here
16378
14:23:22,800 --> 14:23:26,400
i mean it doesn't necessarily have to be
16379
14:23:24,800 --> 14:23:28,160
a stateful widget i can see it's not
16380
14:23:26,400 --> 14:23:30,560
doing anything stateful but we've just
16381
14:23:28,160 --> 14:23:32,720
left it that state will stay full widget
16382
14:23:30,559 --> 14:23:34,879
and it can just be like that for now
16383
14:23:32,720 --> 14:23:37,040
um but we can also turn it into a
16384
14:23:34,879 --> 14:23:39,435
stateless widget if you want to
16385
14:23:39,436 --> 14:23:44,319
so that's for the pattern of what our
16386
14:23:42,239 --> 14:23:46,639
users are doing with the register view
16387
14:23:46,639 --> 14:23:50,400
uh oops no we are actually on the
16388
14:23:50,400 --> 14:23:54,080
um okay so what we need to do now is
16389
14:23:52,639 --> 14:23:56,639
since we're gonna send the user from the
16390
14:23:54,080 --> 14:23:58,880
register view we're gonna send to the
16391
14:23:56,639 --> 14:24:00,159
verify email view we need a route for
16392
14:23:58,879 --> 14:24:01,595
that and if you remember from the
16393
14:24:00,160 --> 14:24:03,756
previous chapters we're defining our
16394
14:24:01,595 --> 14:24:05,435
routes now inside this file lib
16395
14:24:06,639 --> 14:24:11,436
and we've right now defined login route
16396
14:24:08,800 --> 14:24:14,240
register route and nodes route
16397
14:24:11,436 --> 14:24:15,596
then we need a new route for the verify
16398
14:24:14,239 --> 14:24:17,199
email view so let's go ahead as the
16399
14:24:15,595 --> 14:24:19,519
caption says in here and just type that
16400
14:24:22,955 --> 14:24:28,319
slash verify email like that with a
16401
14:24:28,319 --> 14:24:33,275
now that we've defined the route
16402
14:24:30,400 --> 14:24:36,319
we need to then go excuse me we need to
16403
14:24:33,275 --> 14:24:38,000
go into our main dart file so i'm going
16404
14:24:36,319 --> 14:24:40,239
to close this file close this file and
16405
14:24:38,000 --> 14:24:44,160
then command p on mac in visual studio
16406
14:24:40,239 --> 14:24:46,319
or or control p in linux and windows and
16407
14:24:47,595 --> 14:24:52,479
in your main.dart you remember all the
16408
14:24:49,915 --> 14:24:54,399
routes were registered inside the routes
16409
14:24:52,480 --> 14:24:58,080
parameter of your material application
16410
14:24:54,400 --> 14:25:01,040
so let's go ahead and register the um
16411
14:24:58,080 --> 14:25:03,916
email verify email wrap here
16412
14:25:01,040 --> 14:25:05,680
and we say context and we just say const
16413
14:25:05,680 --> 14:25:11,275
and so that's also then registered
16414
14:25:08,559 --> 14:25:12,639
inside the main function okay
16415
14:25:11,275 --> 14:25:14,799
remember anything that you're doing
16416
14:25:12,639 --> 14:25:17,756
inside the main function is not going to
16417
14:25:14,800 --> 14:25:20,160
be reloading when you do hot uh
16418
14:25:17,756 --> 14:25:23,436
hot reload so you need to do a hot
16419
14:25:20,160 --> 14:25:24,720
restart here in order for for those to
16420
14:25:23,436 --> 14:25:26,560
for for those changes in the main
16421
14:25:24,720 --> 14:25:29,360
function to take effect so i'm just
16422
14:25:26,559 --> 14:25:30,559
going to do a hot restart here
16423
14:25:31,839 --> 14:25:36,079
let's now that we've registered that
16424
14:25:33,519 --> 14:25:37,680
let's go to our register and now that
16425
14:25:36,080 --> 14:25:38,955
we've registered there are so many
16426
14:25:37,680 --> 14:25:40,319
registered words i'm throwing out there
16427
14:25:38,955 --> 14:25:42,955
so i just want to clarify now that we've
16428
14:25:40,319 --> 14:25:45,519
registered to verify email routes in our
16429
14:25:42,955 --> 14:25:48,559
routes in main dart we need to go to the
16430
14:25:45,519 --> 14:25:51,115
register view and use this verify email
16431
14:25:48,559 --> 14:25:53,040
route in there after a successful
16432
14:25:57,199 --> 14:26:00,159
i'm going to close this and i'm going to
16433
14:26:07,756 --> 14:26:11,360
getting the user credentials and then
16434
14:26:09,519 --> 14:26:12,719
assigning it to this user credential we
16435
14:26:11,360 --> 14:26:14,559
don't have to do that anymore so let's
16436
14:26:14,559 --> 14:26:17,915
we are not going to actually use the
16437
14:26:15,915 --> 14:26:19,595
returning user credentials upon a
16438
14:26:17,915 --> 14:26:21,680
successful create user with email and
16439
14:26:19,595 --> 14:26:24,639
password we're going to go to the next
16440
14:26:21,680 --> 14:26:28,000
line automatically because we have a try
16441
14:26:30,879 --> 14:26:35,519
uh we're gonna show the verify email
16442
14:26:40,720 --> 14:26:45,436
uh verify email around in here and what
16443
14:26:42,955 --> 14:26:46,479
we're going to say is to say navigator
16444
14:26:50,639 --> 14:26:54,879
and then we're going to say push named
16445
14:26:52,800 --> 14:26:56,880
and you see in this case we're actually
16446
14:26:54,879 --> 14:26:58,799
going to say push name instead of using
16447
14:26:56,879 --> 14:27:00,079
the other functionality that says push
16448
14:27:01,680 --> 14:27:06,756
and the reason behind this is that
16449
14:27:14,400 --> 14:27:18,400
let's say that you enter some email in
16450
14:27:16,000 --> 14:27:20,319
here and then you enter some password
16451
14:27:18,400 --> 14:27:21,916
and you click the register button or you
16452
14:27:21,915 --> 14:27:27,040
and we send you to the verify email page
16453
14:27:28,000 --> 14:27:32,319
here you can verify your email et cetera
16454
14:27:30,160 --> 14:27:35,200
now in there if you if you realize that
16455
14:27:32,319 --> 14:27:37,199
oh i register with the wrong email you
16456
14:27:35,199 --> 14:27:39,435
need to be able to go back to the
16457
14:27:37,199 --> 14:27:41,360
register page so in order to avoid
16458
14:27:39,436 --> 14:27:43,520
having all these buttons that go send
16459
14:27:41,360 --> 14:27:45,436
one user from one page to the other it
16460
14:27:43,519 --> 14:27:47,359
would make a lot more sense if he from
16461
14:27:45,436 --> 14:27:50,480
the register view could just push the
16462
14:27:47,360 --> 14:27:53,360
new uh email verification route so we
16463
14:27:50,480 --> 14:27:56,160
don't replace the entire routes like the
16464
14:27:53,360 --> 14:27:57,520
register page with the new route so
16465
14:27:56,160 --> 14:27:59,200
basically the desired effect here is
16466
14:27:57,519 --> 14:28:00,879
that our register page is gonna stay
16467
14:27:59,199 --> 14:28:03,115
right here and then we're gonna push the
16468
14:28:00,879 --> 14:28:05,199
verify email route on top of it if the
16469
14:28:03,116 --> 14:28:06,400
user in the verify email route realizes
16470
14:28:05,199 --> 14:28:07,915
that they've done something wrong with
16471
14:28:06,400 --> 14:28:11,520
the email address then they can just
16472
14:28:07,915 --> 14:28:13,115
press the back button on the top bar and
16473
14:28:11,519 --> 14:28:15,359
go back to the register page so that
16474
14:28:15,360 --> 14:28:19,520
way of navigating between screens so
16475
14:28:17,839 --> 14:28:21,115
that's why we're using push named in
16476
14:28:21,116 --> 14:28:26,080
so i'm gonna say push names and push
16477
14:28:23,116 --> 14:28:28,000
name and and then in the name we're just
16478
14:28:28,000 --> 14:28:33,680
email route oops and verify email route
16479
14:28:33,680 --> 14:28:38,160
i'm gonna do a command s right there and
16480
14:28:38,160 --> 14:28:43,436
then let's make sure that we can put all
16481
14:28:40,480 --> 14:28:45,360
of this in action all right so i'm gonna
16482
14:28:43,436 --> 14:28:47,200
hot restart just to make sure you
16483
14:28:47,199 --> 14:28:50,559
change in our main function so if you
16484
14:28:48,639 --> 14:28:52,955
forgot to do hot restart please do that
16485
14:28:50,559 --> 14:28:55,199
now um so that your changes can actually
16486
14:28:52,955 --> 14:28:56,639
take effect from the login view which is
16487
14:28:55,199 --> 14:28:59,519
the first view that the user sees we're
16488
14:28:56,639 --> 14:29:01,756
gonna go to the register page
16489
14:28:59,519 --> 14:29:05,359
and inside this register page i'm going
16490
14:29:01,756 --> 14:29:08,480
to register with a new user so since
16491
14:29:05,360 --> 14:29:11,040
i've already registered my user and i
16492
14:29:08,480 --> 14:29:14,000
can actually go to firebase console so
16493
14:29:14,000 --> 14:29:18,800
the user which i usually use is already
16494
14:29:16,400 --> 14:29:20,800
registered with this application so my
16495
14:29:20,800 --> 14:29:25,596
let's go to authentication and i can see
16496
14:29:23,160 --> 14:29:27,360
pixelityab gmail.com is already
16497
14:29:25,595 --> 14:29:29,040
registered so i'm going to register with
16498
14:29:27,360 --> 14:29:31,199
a new user in here i'm going to say
16499
14:29:31,199 --> 14:29:35,519
and the password is foobarbaz i'm just
16500
14:29:33,436 --> 14:29:37,916
going to choose here and please don't
16501
14:29:35,519 --> 14:29:39,839
use this password in production for any
16502
14:29:37,915 --> 14:29:42,639
of your accounts anywhere at all this is
16503
14:29:39,839 --> 14:29:44,799
just a bad idea i'm using fubar bass for
16504
14:29:42,639 --> 14:29:47,360
consensus consistency and and for the
16505
14:29:44,800 --> 14:29:49,520
sake of simplicity in this project so
16506
14:29:47,360 --> 14:29:51,840
because for me it's a lot easier as i'm
16507
14:29:49,519 --> 14:29:52,955
typing and writing all the passwords
16508
14:29:51,839 --> 14:29:54,719
over and over again just to use
16509
14:29:52,955 --> 14:29:57,360
fullbarbass but this is not a good
16510
14:29:54,720 --> 14:29:58,160
password so i think just to make this
16511
14:29:58,160 --> 14:30:02,800
um now i'm going to register this user
16512
14:30:02,800 --> 14:30:06,560
after a successful registration now
16513
14:30:04,559 --> 14:30:09,680
we're ending up in this verify email
16514
14:30:06,559 --> 14:30:11,360
screen and this is really good
16515
14:30:11,360 --> 14:30:15,199
there is a way we can actually make this
16516
14:30:13,199 --> 14:30:17,275
better and let's go to firebase here and
16517
14:30:15,199 --> 14:30:19,595
i can see now that user is already
16518
14:30:17,275 --> 14:30:20,879
registered here you see and it has a
16519
14:30:20,879 --> 14:30:24,879
and here's the last sign-in date okay
16520
14:30:24,879 --> 14:30:30,559
how can we make this better you see
16521
14:30:27,756 --> 14:30:32,800
if this is the natural flow of going
16522
14:30:30,559 --> 14:30:35,115
like when the user is in the register
16523
14:30:32,800 --> 14:30:38,639
page or the register view and they
16524
14:30:35,116 --> 14:30:41,040
always end up in the verify email page
16525
14:30:38,639 --> 14:30:42,639
the way that we can make this better
16526
14:30:42,639 --> 14:30:47,839
that upon successful registration right
16527
14:30:51,915 --> 14:30:56,799
is that we actually send a verification
16528
14:30:54,160 --> 14:30:58,240
email to that user because otherwise
16529
14:30:56,800 --> 14:30:59,916
what you're creating you're creating a
16530
14:30:58,239 --> 14:31:02,239
logic for the user that they have to
16531
14:30:59,915 --> 14:31:04,159
take an extra step in order to verify
16532
14:31:02,239 --> 14:31:05,915
their account so they come here and now
16533
14:31:04,160 --> 14:31:07,596
they have to press another button but it
16534
14:31:05,915 --> 14:31:09,595
would be really good if you actually did
16535
14:31:07,595 --> 14:31:11,915
that button press kind of for them
16536
14:31:09,595 --> 14:31:13,519
before we went to that screen so
16537
14:31:11,915 --> 14:31:15,360
we're not actually going to physically
16538
14:31:13,519 --> 14:31:16,955
like tap that button for them but we're
16539
14:31:15,360 --> 14:31:21,116
going to execute the same code that that
16540
14:31:16,955 --> 14:31:21,116
button executes for the user okay
16541
14:31:21,595 --> 14:31:26,879
so that's what we're gonna do now so um
16542
14:31:24,800 --> 14:31:28,956
as the caption says in here in your
16543
14:31:26,879 --> 14:31:31,915
register view right before you navigate
16544
14:31:28,955 --> 14:31:34,239
to the verify email route ensure that
16545
14:31:31,915 --> 14:31:35,435
you get the current user basically so
16546
14:31:39,360 --> 14:31:44,319
instance i believe and current user okay
16547
14:31:49,839 --> 14:31:53,915
there is a function called send email
16548
14:31:51,915 --> 14:31:55,519
verification and remember your user is
16549
14:31:53,915 --> 14:31:57,680
an optional user and that's why you're
16550
14:31:57,680 --> 14:32:01,680
operator here which is kind of like a
16551
14:31:59,839 --> 14:32:03,115
moustache or something i don't know what
16552
14:32:01,680 --> 14:32:05,360
you want to call it some some people
16553
14:32:03,116 --> 14:32:08,000
call it elvis operator if you're coming
16554
14:32:05,360 --> 14:32:10,400
from kotlin or in swift you would say
16555
14:32:08,000 --> 14:32:11,680
like an optional invocation depending on
16556
14:32:10,400 --> 14:32:13,520
the language that you're coming from but
16557
14:32:11,680 --> 14:32:15,040
if you're not if you don't i have like a
16558
14:32:13,519 --> 14:32:17,915
software development background then you
16559
14:32:15,040 --> 14:32:19,680
may just call that a question mark
16560
14:32:19,680 --> 14:32:23,840
so user is optional and this function
16561
14:32:21,519 --> 14:32:26,799
returns a fusion voice so you can't just
16562
14:32:23,839 --> 14:32:28,719
call it you need to wait on it and
16563
14:32:26,800 --> 14:32:31,596
so now we're doing that so we're now
16564
14:32:31,595 --> 14:32:36,079
and also since now we've changed our
16565
14:32:34,080 --> 14:32:37,520
logic in that when you press the
16566
14:32:36,080 --> 14:32:39,276
register button upon successful
16567
14:32:37,519 --> 14:32:40,719
registration we're sending you an email
16568
14:32:40,720 --> 14:32:44,800
is not a good idea to end up on this
16569
14:32:42,559 --> 14:32:46,879
screen that just says please verify your
16570
14:32:44,800 --> 14:32:48,880
email address because let's let's just
16571
14:32:46,879 --> 14:32:50,639
face it we have already sent an email
16572
14:32:48,879 --> 14:32:53,199
verification so we don't want the user
16573
14:32:50,639 --> 14:32:55,595
to click this button actually we want
16574
14:32:53,199 --> 14:32:56,559
the user to click this button or tap
16575
14:32:56,559 --> 14:33:01,199
if they haven't received the email in a
16576
14:32:59,199 --> 14:33:03,519
while all right so we don't want like
16577
14:33:01,199 --> 14:33:05,839
double emails for users so it's just not
16578
14:33:05,839 --> 14:33:11,359
so uh sorry i'll just have a look at my
16579
14:33:11,360 --> 14:33:16,400
okay so what we need to do now is as the
16580
14:33:14,000 --> 14:33:17,360
caption now says here we need to go to
16581
14:33:17,360 --> 14:33:21,915
verify email view and add a text on top
16582
14:33:20,480 --> 14:33:24,400
to say we have already sent a
16583
14:33:21,915 --> 14:33:26,159
verification email okay and that's just
16584
14:33:28,955 --> 14:33:34,239
verify email route which is basically
16585
14:33:34,239 --> 14:33:38,079
and you can see that we have a column in
16586
14:33:36,480 --> 14:33:40,319
here and the first text at the moment
16587
14:33:38,080 --> 14:33:42,240
says please verify your email address so
16588
14:33:40,319 --> 14:33:44,239
let's create another text in here i'm
16589
14:33:48,319 --> 14:33:53,436
you see because i want to write the word
16590
14:33:50,720 --> 14:33:55,756
weave as in we have there is a single
16591
14:33:53,436 --> 14:33:58,160
code in here so i cannot have my own
16592
14:33:55,756 --> 14:34:00,000
string having single codes because then
16593
14:33:58,160 --> 14:34:02,080
dart doesn't understand where
16594
14:34:00,000 --> 14:34:04,239
this what this string is because it
16595
14:34:02,080 --> 14:34:06,400
thinks here's a string that starts here
16596
14:34:04,239 --> 14:34:08,479
and it ends here but what is this one
16597
14:34:06,400 --> 14:34:10,720
so in in order to have single quotes
16598
14:34:08,480 --> 14:34:11,756
inside your dark strings then you would
16599
14:34:13,275 --> 14:34:18,720
basically put your string inside double
16600
14:34:16,080 --> 14:34:20,796
quotes so you avoid that confusion
16601
14:34:20,796 --> 14:34:26,319
sent you an email verification
16602
14:34:30,955 --> 14:34:34,879
to verify your yeah so please open it to
16603
14:34:39,116 --> 14:34:42,955
and also this text then we need to
16604
14:34:41,360 --> 14:34:44,400
change that as well because you see we
16605
14:34:42,955 --> 14:34:46,795
don't want this text to be kind of like
16606
14:34:44,400 --> 14:34:48,319
a call to action saying that hello
16607
14:34:46,796 --> 14:34:49,596
like here we're saying we sent you an
16608
14:34:48,319 --> 14:34:51,116
email verification please open the
16609
14:34:49,595 --> 14:34:53,519
verifier again and then right after that
16610
14:34:51,116 --> 14:34:54,955
we're saying hey click this button so
16611
14:34:53,519 --> 14:34:56,639
that's not a good idea let's just change
16612
14:34:58,480 --> 14:35:03,040
and let's make this double quotes as
16613
14:34:59,915 --> 14:35:04,239
well just the same story as before
16614
14:35:10,955 --> 14:35:16,795
the button below something like this
16615
14:35:14,559 --> 14:35:18,795
okay so i'm just gonna press command s
16616
14:35:16,796 --> 14:35:20,400
and now you can see those texts being
16617
14:35:18,796 --> 14:35:21,520
displayed on the screen they're not very
16618
14:35:20,400 --> 14:35:24,319
pretty to be honest with you at the
16619
14:35:24,319 --> 14:35:28,955
um that's not a problem let it be like
16620
14:35:28,955 --> 14:35:33,839
all right so we're displaying that text
16621
14:35:31,275 --> 14:35:35,040
uh to the user and what we need to do
16622
14:35:38,239 --> 14:35:43,519
flow basically again just to make sure
16623
14:35:41,040 --> 14:35:45,275
that yeah it's working as expected so
16624
14:35:43,519 --> 14:35:46,639
in order to do that go to your firebase
16625
14:35:46,639 --> 14:35:50,559
and i'm gonna bring up the console in
16626
14:35:48,639 --> 14:35:52,000
here hopefully you can see it too and
16627
14:35:50,559 --> 14:35:54,239
i'm gonna go to that project then
16628
14:35:52,000 --> 14:35:56,400
authentication and this user i'm gonna
16629
14:35:54,239 --> 14:35:57,275
delete this user okay delete
16630
14:35:57,275 --> 14:36:02,720
all right that user is gone i'm gonna
16631
14:36:02,720 --> 14:36:06,400
and and what we're gonna do then is just
16632
14:36:04,639 --> 14:36:09,595
to hot restart the application in order
16633
14:36:16,480 --> 14:36:23,276
all right i'm gonna then uh verify email
16634
14:36:21,595 --> 14:36:25,519
i can see that there is no back button
16635
14:36:25,519 --> 14:36:30,319
uh we're ending up in in that screen
16636
14:36:33,040 --> 14:36:37,200
i believe that we're actually sending
16637
14:36:34,720 --> 14:36:41,116
the user to verify email view in this
16638
14:36:37,199 --> 14:36:43,435
case user firebase instance card okay
16639
14:36:41,116 --> 14:36:44,955
so this is a lot a little bit a bit of a
16640
14:36:43,436 --> 14:36:47,756
problem because now we're kind of like
16641
14:36:50,480 --> 14:36:54,560
view because firebase as a caption right
16642
14:36:53,040 --> 14:36:56,480
here says it says firebase doesn't
16643
14:36:54,559 --> 14:36:59,199
understand the remote changes
16644
14:36:56,480 --> 14:37:01,040
we removed that user completely but
16645
14:36:59,199 --> 14:37:02,955
firebase still believes that that user
16646
14:37:01,040 --> 14:37:05,915
exists and that is because you see
16647
14:37:02,955 --> 14:37:07,680
firebase can't like the client that is
16648
14:37:05,915 --> 14:37:08,879
inside the code that is inside the
16649
14:37:07,680 --> 14:37:11,519
client application which you are
16650
14:37:08,879 --> 14:37:13,199
developing can't constantly talk with
16651
14:37:11,519 --> 14:37:14,955
firebase and say give me the latest
16652
14:37:13,199 --> 14:37:18,319
state give me the latest state
16653
14:37:14,955 --> 14:37:19,915
this user that is right now on this on
16654
14:37:19,915 --> 14:37:24,079
is a local user that once had a
16655
14:37:22,796 --> 14:37:25,680
connection with the backend but it
16656
14:37:24,080 --> 14:37:29,520
doesn't anymore but firebase doesn't
16657
14:37:25,680 --> 14:37:31,275
like delete this user locally so
16658
14:37:31,275 --> 14:37:36,955
the best way to handle this case is to
16659
14:37:33,839 --> 14:37:40,559
have kind of like a restart uh
16660
14:37:36,955 --> 14:37:43,839
button in our verify email so if for
16661
14:37:40,559 --> 14:37:46,479
some reason the user like in this case
16662
14:37:43,839 --> 14:37:48,955
understands that hey um i'm stuck
16663
14:37:46,480 --> 14:37:50,640
i need to get out of here from verify
16664
14:37:48,955 --> 14:37:54,080
email i kind of want to go back to where
16665
14:37:50,639 --> 14:37:56,879
i was so what we need to do is to
16666
14:37:54,080 --> 14:37:58,639
upon the user pressing a restart button
16667
14:37:58,639 --> 14:38:02,720
sign that user out so firebase
16668
14:38:00,639 --> 14:38:05,360
understands well this user isn't signed
16669
14:38:02,720 --> 14:38:08,796
in anymore so that we don't end up in
16670
14:38:05,360 --> 14:38:11,680
this case that email is verified etc etc
16671
14:38:08,796 --> 14:38:14,480
and we also are going to send the user
16672
14:38:11,680 --> 14:38:15,680
to the register view okay and as you can
16673
14:38:15,680 --> 14:38:19,756
we can't send the user back to the
16674
14:38:19,756 --> 14:38:25,040
i mean that we can't expect the register
16675
14:38:25,040 --> 14:38:29,436
on the view stack in this case because
16676
14:38:27,199 --> 14:38:31,915
if a user has just freshly started the
16677
14:38:29,436 --> 14:38:33,436
application application so they will end
16678
14:38:31,915 --> 14:38:34,879
up in this future builder the future
16679
14:38:33,436 --> 14:38:36,480
builder would then check the user and
16680
14:38:34,879 --> 14:38:38,399
says oh you should go to the verify
16681
14:38:36,480 --> 14:38:40,400
email view and in this case there is no
16682
14:38:40,400 --> 14:38:45,116
um verify email view so in that case you
16683
14:38:43,199 --> 14:38:48,000
will see that we won't push but we will
16684
14:38:45,116 --> 14:38:50,080
actually do push name and remove until
16685
14:38:48,000 --> 14:38:52,319
but we will get there soon okay
16686
14:38:50,080 --> 14:38:54,955
first off let's go to your uh to your
16687
14:38:52,319 --> 14:38:56,796
verify email view and right after this
16688
14:38:54,955 --> 14:38:58,400
text button we're gonna add another text
16689
14:38:58,400 --> 14:39:04,000
up a little bit so you see it better
16690
14:39:00,400 --> 14:39:05,840
and let's just say a text button
16691
14:39:04,000 --> 14:39:07,839
unpressed is just going to be empty for
16692
14:39:05,839 --> 14:39:10,955
now and then for his child we're going
16693
14:39:07,839 --> 14:39:13,755
to add a const text that just says
16694
14:39:13,756 --> 14:39:18,880
so that's that and then here what we
16695
14:39:15,915 --> 14:39:22,000
then need to do is as i mentioned before
16696
14:39:22,000 --> 14:39:27,360
explains here we need to actually log
16697
14:39:24,160 --> 14:39:28,400
the user out so let's say firebase auth
16698
14:39:28,400 --> 14:39:32,796
and and then what we need to do is to
16699
14:39:32,796 --> 14:39:38,880
okay remember cyano i also believe is a
16700
14:39:36,000 --> 14:39:40,839
future of void so you need to await on
16701
14:39:40,839 --> 14:39:44,719
um see i just jumped screens without
16702
14:39:43,275 --> 14:39:46,479
actually really wanting to do that so
16703
14:39:44,720 --> 14:39:48,000
let's wait on it and it's going to give
16704
14:39:46,480 --> 14:39:51,520
you an error because now your unpressed
16705
14:39:48,000 --> 14:39:53,199
function is not async so make it async
16706
14:39:53,199 --> 14:39:57,199
after doing that using if i do command s
16707
14:39:55,519 --> 14:39:58,159
now we're gonna see the restart button
16708
14:39:58,160 --> 14:40:00,956
doing that just does a sign out it
16709
14:39:59,680 --> 14:40:02,480
doesn't actually send you to the
16710
14:40:00,955 --> 14:40:05,040
register view and we're gonna take care
16711
14:40:02,480 --> 14:40:09,040
of that soon so as a caption says
16712
14:40:05,040 --> 14:40:11,680
navigator of context i push named remove
16713
14:40:09,040 --> 14:40:14,160
until and in here we're going to send
16714
14:40:11,680 --> 14:40:16,720
the user to remember from our routes
16715
14:40:14,160 --> 14:40:20,796
view sorry a routes file there is a
16716
14:40:16,720 --> 14:40:23,116
register route okay so let's go there
16717
14:40:23,116 --> 14:40:27,436
out and in here we just leave the code
16718
14:40:25,756 --> 14:40:30,639
as it is and i come at the end to clean
16719
14:40:31,116 --> 14:40:34,319
and that should be good to go
16720
14:40:35,360 --> 14:40:40,000
okay now i'm gonna do a hot restart
16721
14:40:37,756 --> 14:40:42,239
you'll see now we end up in here
16722
14:40:40,000 --> 14:40:43,915
and because it's still the user is
16723
14:40:42,239 --> 14:40:46,079
logged in because we haven't executed
16724
14:40:43,915 --> 14:40:48,319
this code yet and i'm just gonna then
16725
14:40:46,080 --> 14:40:50,796
press the restart button and you'll see
16726
14:40:48,319 --> 14:40:52,239
we end up in the register view just to
16727
14:40:50,796 --> 14:40:53,520
make sure that we're not going to go
16728
14:40:53,519 --> 14:40:56,559
vicious cycle again that every time we
16729
14:40:55,116 --> 14:40:58,955
do a hot restart we're going to end up
16730
14:40:58,955 --> 14:41:03,436
and let's just do a hot restart now to
16731
14:41:01,756 --> 14:41:05,840
see what the state of the application is
16732
14:41:03,436 --> 14:41:08,319
going to be and as you can see upon hot
16733
14:41:05,839 --> 14:41:10,319
restart we end up in the login view
16734
14:41:08,319 --> 14:41:13,915
which means that the main dart file in
16735
14:41:10,319 --> 14:41:16,639
the future builder it went to this code
16736
14:41:13,915 --> 14:41:18,319
so the user is null at the moment and
16737
14:41:16,639 --> 14:41:22,000
that's exactly what we wanted because we
16738
14:41:18,319 --> 14:41:22,000
signed the current user out okay
16739
14:41:22,720 --> 14:41:27,916
all right so we are then going to use
16740
14:41:27,915 --> 14:41:30,879
as before to register let's just go to
16741
14:41:29,436 --> 14:41:32,116
the register view then and i'm going to
16742
14:41:32,116 --> 14:41:39,200
round.np np gmail.com and then fubarbas
16743
14:41:36,160 --> 14:41:41,116
and i'm going to then register this user
16744
14:41:39,199 --> 14:41:42,795
and you can see it says it sent you an
16745
14:41:41,116 --> 14:41:44,639
email verification please open it to
16746
14:41:42,796 --> 14:41:46,840
verify and i can see on my third screen
16747
14:41:44,639 --> 14:41:50,080
here that i actually got the email
16748
14:41:51,040 --> 14:41:55,040
as you can see in the caption it says
16749
14:41:52,480 --> 14:41:57,596
get the confirmation email but don't
16750
14:41:55,040 --> 14:41:59,680
confirm yet because we kind of need to
16751
14:41:57,595 --> 14:42:00,955
have a look at a problem that we have in
16752
14:42:04,160 --> 14:42:08,320
now let's see if we can log in so what
16753
14:42:08,319 --> 14:42:12,159
go back on the screen from the verify
16754
14:42:10,480 --> 14:42:14,560
email go back to the register view and
16755
14:42:12,160 --> 14:42:17,596
instead of doing a registration again go
16756
14:42:14,559 --> 14:42:18,479
to the login view now use your current
16757
14:42:18,480 --> 14:42:22,720
like the new user that you just created
16758
14:42:20,480 --> 14:42:26,080
but you haven't confirmed the email use
16759
14:42:22,720 --> 14:42:28,955
the credentials of that user and say
16760
14:42:28,955 --> 14:42:33,595
and then press the login button
16761
14:42:31,275 --> 14:42:36,400
you'll see now we've ended up in the
16762
14:42:36,400 --> 14:42:41,275
and that is problematic because
16763
14:42:38,720 --> 14:42:43,200
any user just like i did can go to the
16764
14:42:41,275 --> 14:42:46,000
register view then they will go to the
16765
14:42:43,199 --> 14:42:48,795
confirmation view automatically they say
16766
14:42:46,000 --> 14:42:50,879
okay i got a confirmation email and then
16767
14:42:48,796 --> 14:42:52,400
they don't confirm the email they press
16768
14:42:50,879 --> 14:42:54,479
the back button to go to the registry
16769
14:42:52,400 --> 14:42:56,000
view again and from registry google they
16770
14:42:54,480 --> 14:42:57,360
go to the login view and then they log
16771
14:42:57,360 --> 14:43:01,915
because you see in our login view
16772
14:43:01,915 --> 14:43:05,595
right after signing with email and
16773
14:43:03,519 --> 14:43:08,795
password we are not verifying that the
16774
14:43:05,595 --> 14:43:11,360
user has actually verified their email
16775
14:43:08,796 --> 14:43:13,276
address we're just saying sign in and
16776
14:43:11,360 --> 14:43:15,436
firebase says all right sign in great
16777
14:43:13,275 --> 14:43:17,680
the email and password match an entry in
16778
14:43:15,436 --> 14:43:19,596
the authentication database i'm good to
16779
14:43:17,680 --> 14:43:21,275
go and then we're just saying push to
16780
14:43:23,680 --> 14:43:27,040
that we have that we need to fix in the
16781
14:43:27,040 --> 14:43:31,680
but for now we've got a lot of code i
16782
14:43:29,116 --> 14:43:34,639
can see all the files are changed so
16783
14:43:31,680 --> 14:43:36,559
let's commit our code and tag it like
16784
14:43:34,639 --> 14:43:37,595
what we're doing in other chapters as
16785
14:43:37,595 --> 14:43:41,199
gonna go to the terminal i'm going to
16786
14:43:39,519 --> 14:43:43,039
change the screen layout a little bit so
16787
14:43:44,720 --> 14:43:49,916
views so you see it even better
16788
14:43:47,436 --> 14:43:52,319
and you can see the previous tag was
16789
14:43:49,915 --> 14:43:54,399
step 6. now let's have a look at the
16790
14:43:52,319 --> 14:43:57,040
status of our code and i can see there's
16791
14:43:54,400 --> 14:44:00,080
lots of changes modified you can always
16792
14:44:00,080 --> 14:44:04,560
which i call gopa and that will show you
16793
14:44:02,639 --> 14:44:07,595
all your changes but i'm just gonna say
16794
14:44:07,595 --> 14:44:11,275
i'm going to say git commit and we said
16795
14:44:09,519 --> 14:44:12,955
that we're going to commit this as step
16796
14:44:12,955 --> 14:44:20,080
and push those changes to github
16797
14:44:16,239 --> 14:44:22,559
and i'm going to also tag it as step 7
16798
14:44:20,080 --> 14:44:26,080
so like that step seven and then i'm
16799
14:44:28,239 --> 14:44:31,436
as the caption says here we need to get
16800
14:44:29,839 --> 14:44:33,039
ready for the next chapter and as you
16801
14:44:31,436 --> 14:44:34,880
can see it says user needs to verify
16802
14:44:33,040 --> 14:44:37,040
email before going to the main ui
16803
14:44:34,879 --> 14:44:38,955
because that is as i explained there is
16804
14:44:37,040 --> 14:44:40,639
a problem that we have which we haven't
16805
14:44:38,955 --> 14:44:42,559
addressed yet but it's quite easy to
16806
14:44:40,639 --> 14:44:44,239
address as you'll see in the next
16807
14:44:46,000 --> 14:44:49,915
hello everyone and welcome to chapter 23
16808
14:44:48,319 --> 14:44:51,756
of this vlog course as you saw in the
16809
14:44:49,915 --> 14:44:54,079
previous chapter we talked about
16810
14:44:51,756 --> 14:44:57,436
cleaning up our registration flow so
16811
14:44:54,080 --> 14:44:59,840
that when we tap on registration or the
16812
14:44:57,436 --> 14:45:02,560
register button we actually send an
16813
14:44:59,839 --> 14:45:04,795
email confirmation to the user and we
16814
14:45:02,559 --> 14:45:06,639
saw that we go to the email confirmation
16815
14:45:04,796 --> 14:45:08,956
view and before we even get there we
16816
14:45:06,639 --> 14:45:11,360
then receive our email confirmation in
16817
14:45:08,955 --> 14:45:13,915
our inbox so that all worked very well
16818
14:45:11,360 --> 14:45:15,840
except for the fact that now a user who
16819
14:45:13,915 --> 14:45:18,239
hasn't registered who hasn't verified
16820
14:45:15,839 --> 14:45:20,079
their email account can still end up in
16821
14:45:18,239 --> 14:45:21,360
the main ui of our application and
16822
14:45:20,080 --> 14:45:24,160
that's what we're going to fix in this
16823
14:45:26,000 --> 14:45:30,720
title shows here or as the caption shows
16824
14:45:28,319 --> 14:45:31,519
here what we need to do is to ensure
16825
14:45:31,519 --> 14:45:34,159
we first before we continue with the
16826
14:45:33,040 --> 14:45:36,879
chapter we need to make sure that we've
16827
14:45:34,160 --> 14:45:38,320
logged out of the application so um
16828
14:45:36,879 --> 14:45:40,239
now that you're in the main ui of the
16829
14:45:38,319 --> 14:45:42,639
application let's just go in here and
16830
14:45:40,239 --> 14:45:44,559
say log out and we're logging out to end
16831
14:45:44,559 --> 14:45:51,040
i'm gonna i'm also gonna bring up visual
16832
14:45:46,559 --> 14:45:52,079
studio code as we left it before
16833
14:45:52,080 --> 14:45:54,796
what we need to do now i'm going to
16834
14:45:54,796 --> 14:45:59,116
other tabs except for the login view
16835
14:46:00,720 --> 14:46:04,480
right after we're signing with email and
16836
14:46:02,559 --> 14:46:07,199
password right now we're sending the
16837
14:46:04,480 --> 14:46:08,956
user to the notes route and we need to
16838
14:46:08,955 --> 14:46:13,595
what we need to do is just to get the
16839
14:46:16,559 --> 14:46:20,239
the correct correct caption as well and
16840
14:46:18,720 --> 14:46:21,916
i'm gonna change the screen layouts a
16841
14:46:24,879 --> 14:46:28,399
so as you can see the caption says you
16842
14:46:26,319 --> 14:46:30,480
need to add an if statement before you
16843
14:46:28,400 --> 14:46:31,680
send the user to the main ui of the
16844
14:46:31,680 --> 14:46:35,040
and to make sure that the user is
16845
14:46:35,040 --> 14:46:37,436
in order to do that we also need to get
16846
14:46:37,436 --> 14:46:43,040
concurrent user so we can say final user
16847
14:46:39,915 --> 14:46:45,275
is equal to firebase off instance
16848
14:46:45,275 --> 14:46:50,079
and the current user okay so that's for
16849
14:46:50,080 --> 14:46:54,480
and we're going to say if the user
16850
14:46:52,639 --> 14:46:57,756
optional you see we need to optionally
16851
14:46:54,480 --> 14:47:00,000
access that email verified or false
16852
14:46:57,756 --> 14:47:02,955
when we get a boolean value here either
16853
14:47:00,000 --> 14:47:05,519
this returns a true or reuse false
16854
14:47:02,955 --> 14:47:08,080
so in here we say user's email is
16855
14:47:14,160 --> 14:47:20,240
if i can spell it is not verified okay
16856
14:47:18,000 --> 14:47:22,319
so now we have the two conditions in
16857
14:47:22,319 --> 14:47:26,319
so what we need to do now is to grab
16858
14:47:24,559 --> 14:47:28,879
this code that we had from before you
16859
14:47:26,319 --> 14:47:31,116
can see it sends the user to the main ui
16860
14:47:28,879 --> 14:47:35,595
of the application and of course that
16861
14:47:31,116 --> 14:47:36,880
needs to happen only if the user has
16862
14:47:36,879 --> 14:47:43,115
verified their email address so grab
16863
14:47:39,275 --> 14:47:44,955
that code and place it in user email is
16864
14:47:44,955 --> 14:47:49,360
and in the case that the user email is
16865
14:47:47,519 --> 14:47:50,719
not verified then we kind of need to do
16866
14:47:50,720 --> 14:47:55,275
but instead of going to the nodes route
16867
14:47:53,275 --> 14:47:57,040
which is the main ui of the application
16868
14:47:55,275 --> 14:47:59,436
we actually know we need to go to the
16869
14:47:57,040 --> 14:48:01,840
verify email route if you remember from
16870
14:47:59,436 --> 14:48:03,916
the previous chapters in a route start
16871
14:48:01,839 --> 14:48:04,839
we've already defined verify email route
16872
14:48:06,400 --> 14:48:11,916
let's go back in our login view and then
16873
14:48:09,275 --> 14:48:15,436
paste the same code except for going to
16874
14:48:11,915 --> 14:48:17,680
notes route we're gonna go to and verify
16875
14:48:18,720 --> 14:48:22,480
really all we have to do for this
16876
14:48:20,796 --> 14:48:24,880
chapter so it's just cleaning up the
16877
14:48:22,480 --> 14:48:26,720
logic one step at a time okay and that's
16878
14:48:24,879 --> 14:48:28,159
okay some chapters are going to be long
16879
14:48:26,720 --> 14:48:30,160
some chapters are going to be short it's
16880
14:48:28,160 --> 14:48:32,796
actually quite refreshing even for me to
16881
14:48:30,160 --> 14:48:35,520
have some shorter chapters so
16882
14:48:32,796 --> 14:48:38,639
um now what we need to do is let's put
16883
14:48:38,639 --> 14:48:41,915
and as you can see what we're going to
16884
14:48:39,756 --> 14:48:44,160
do is to remove that test user again
16885
14:48:41,915 --> 14:48:45,595
from firebase console and test the
16886
14:48:44,160 --> 14:48:47,520
entire flow again so i'm going to do a
16887
14:48:47,519 --> 14:48:52,399
and just to make sure that the state is
16888
14:48:49,839 --> 14:48:54,239
completely restarted i'm gonna bring up
16889
14:48:52,400 --> 14:48:55,756
a firebase console let's go to our
16890
14:48:54,239 --> 14:48:57,680
application which for me is called
16891
14:48:57,680 --> 14:49:01,116
i'm gonna go to authentication and
16892
14:48:59,199 --> 14:49:03,039
remove that test user that i created
16893
14:49:03,040 --> 14:49:06,559
and do another hot restart just to make
16894
14:49:04,879 --> 14:49:08,479
sure the cache is invalidated if there's
16895
14:49:09,839 --> 14:49:16,000
what we need to do now is to just oops
16896
14:49:13,680 --> 14:49:17,840
what we need to do now is to do kind of
16897
14:49:16,000 --> 14:49:20,000
like the same registration again so i'm
16898
14:49:17,839 --> 14:49:21,755
gonna go to the register page here and
16899
14:49:20,000 --> 14:49:23,116
then i'm gonna go to your enter your
16900
14:49:24,480 --> 14:49:29,040
write the same email address to register
16901
14:49:26,319 --> 14:49:31,040
the user again through bar bath
16902
14:49:31,040 --> 14:49:35,116
and we end up here then i'm going to do
16903
14:49:32,796 --> 14:49:37,276
the same hacked as we did before uh
16904
14:49:35,116 --> 14:49:40,080
press the back button and then go to the
16905
14:49:37,275 --> 14:49:42,795
login screen i'm going to type the same
16906
14:49:40,080 --> 14:49:44,400
credentials and say fubar baz if
16907
14:49:42,796 --> 14:49:47,596
everything is worked according to our
16908
14:49:44,400 --> 14:49:49,756
plan upon pressing the login button the
16909
14:49:47,595 --> 14:49:52,319
code is going to end up in here saying
16910
14:49:49,756 --> 14:49:54,080
that the user's email is not verified
16911
14:49:52,319 --> 14:49:55,199
and it's going to remove the login route
16912
14:49:55,199 --> 14:50:00,239
from the stack and push the verify email
16913
14:49:57,436 --> 14:50:02,080
route on the screen okay so both
16914
14:50:00,239 --> 14:50:03,915
and that is exactly what we're getting
16915
14:50:02,080 --> 14:50:08,160
here you can see we're going to the
16916
14:50:03,915 --> 14:50:09,915
verify email view as we planned
16917
14:50:08,160 --> 14:50:11,520
okay as i mentioned this chapter was a
16918
14:50:09,915 --> 14:50:14,079
short one and that's actually really
16919
14:50:11,519 --> 14:50:15,755
good so what we need to do now is to
16920
14:50:14,080 --> 14:50:17,200
focus on what we're gonna do in the next
16921
14:50:15,756 --> 14:50:19,520
chapter as you can see it says our
16922
14:50:17,199 --> 14:50:21,360
authentication logic is all over the ui
16923
14:50:19,519 --> 14:50:23,199
and we need to make a service for the
16924
14:50:23,199 --> 14:50:27,360
up until this point we've been working
16925
14:50:24,796 --> 14:50:29,040
with firebase directly in the source
16926
14:50:27,360 --> 14:50:32,879
code in that we've been like writing
16927
14:50:29,040 --> 14:50:35,275
firebase auth code pretty much in our ui
16928
14:50:32,879 --> 14:50:36,239
now you may think that well that's okay
16929
14:50:36,239 --> 14:50:39,519
if you're if you don't come from a
16930
14:50:38,000 --> 14:50:41,756
software development background you may
16931
14:50:39,519 --> 14:50:43,595
think that that is fine and it should as
16932
14:50:44,879 --> 14:50:48,159
the software development industry has
16933
14:50:46,160 --> 14:50:51,040
shown us over and over again that the
16934
14:50:48,160 --> 14:50:53,276
saying of oh if it if it's working if
16935
14:50:51,040 --> 14:50:55,436
it's not broken don't fix it that that
16936
14:50:53,275 --> 14:50:58,239
doesn't that doesn't really apply to all
16937
14:50:55,436 --> 14:51:01,360
cases as we've seen uh in the case of
16938
14:50:58,239 --> 14:51:03,115
for instance log 4j uh it was working
16939
14:51:01,360 --> 14:51:04,955
but then there was a security flying and
16940
14:51:03,116 --> 14:51:06,400
everybody had to go out to their code
16941
14:51:04,955 --> 14:51:08,795
base and fix everything so we're
16942
14:51:06,400 --> 14:51:10,560
entirely still of the weekends so the
16943
14:51:10,559 --> 14:51:15,680
but there's a problem with it in that
16944
14:51:12,720 --> 14:51:17,595
here you have your user interface so the
16945
14:51:15,680 --> 14:51:20,239
code is quite high level it's like
16946
14:51:17,595 --> 14:51:22,319
literally the user is here and then we
16947
14:51:20,239 --> 14:51:25,115
have our user interface here and then we
16948
14:51:22,319 --> 14:51:27,436
have like the code that we've written
16949
14:51:25,116 --> 14:51:29,436
and like a little bit more low level
16950
14:51:27,436 --> 14:51:31,200
like our if statements and then firebase
16951
14:51:29,436 --> 14:51:33,116
is sitting all the way down here and
16952
14:51:31,199 --> 14:51:35,519
we're like exposing this firebase layer
16953
14:51:33,116 --> 14:51:38,400
all the way to our ui layers the ui is
16954
14:51:35,519 --> 14:51:39,839
talking directly with a layer of the
16955
14:51:38,400 --> 14:51:41,436
code that is so level that they
16956
14:51:39,839 --> 14:51:43,595
shouldn't have direct connection with
16957
14:51:43,595 --> 14:51:45,915
if you're not from a software
16958
14:51:44,796 --> 14:51:47,520
development background this may be a
16959
14:51:45,915 --> 14:51:49,435
little bit alien to you but software
16960
14:51:47,519 --> 14:51:50,399
developers really like to make sure
16961
14:51:54,639 --> 14:51:58,159
what we need to do is in order to get
16962
14:51:56,480 --> 14:52:00,240
ready for the next chapter is just get a
16963
14:51:58,160 --> 14:52:01,596
good cup of coffee or tea because the
16964
14:52:00,239 --> 14:52:02,559
next chapter is actually going to be a
16965
14:52:01,595 --> 14:52:05,115
long one and it's going to be a
16966
14:52:02,559 --> 14:52:07,595
complicated one but i'm gonna do my best
16967
14:52:05,116 --> 14:52:09,756
to explain all the concepts as good as i
16968
14:52:07,595 --> 14:52:11,360
can but just know that the next chapter
16969
14:52:12,796 --> 14:52:19,436
so uh grab your refreshments juice tea
16970
14:52:16,559 --> 14:52:21,915
water coffee whatever you want and i'll
16971
14:52:19,436 --> 14:52:24,239
see you in the next chapter
16972
14:52:21,915 --> 14:52:26,319
hello and welcome to chapter 24 of this
16973
14:52:24,239 --> 14:52:28,559
flutter course in the previous chapter
16974
14:52:26,319 --> 14:52:30,879
we talked about ensuring that the user's
16975
14:52:28,559 --> 14:52:32,639
email is verified before he or she can
16976
14:52:33,680 --> 14:52:38,239
by before the user is able to go to the
16977
14:52:38,239 --> 14:52:43,680
um and what we are going to do now is
16978
14:52:41,040 --> 14:52:46,796
take a step back from developing our ui
16979
14:52:43,680 --> 14:52:50,239
and logic of the application by creating
16980
14:52:51,275 --> 14:52:54,795
i'm going to provide you with a caption
16981
14:52:53,116 --> 14:52:56,480
here and as you can see it says auth
16982
14:52:54,796 --> 14:52:59,680
provider auth service meaning an author
16983
14:52:56,480 --> 14:53:01,200
provide abstract class on an off service
16984
14:53:01,199 --> 14:53:04,639
if we have a look at the code that we've
16985
14:53:02,796 --> 14:53:06,240
created so far let me bring up visual
16986
14:53:04,639 --> 14:53:08,639
studio code so you can see it on the
16987
14:53:06,239 --> 14:53:11,519
screen like i do here um i'm going to
16988
14:53:08,639 --> 14:53:12,879
increase the size so you see better
16989
14:53:11,519 --> 14:53:14,479
and i'm going to bring up the
16990
14:53:17,839 --> 14:53:22,159
i have three screens here so it's a lot
16991
14:53:19,680 --> 14:53:23,275
it's a little bit difficult to juggle
16992
14:53:24,796 --> 14:53:28,400
so i'm going to change the screen layout
16993
14:53:35,275 --> 14:53:39,040
register and verify email view okay
16994
14:53:37,519 --> 14:53:42,159
or we actually have four views the other
16995
14:53:39,040 --> 14:53:44,796
one is the main ui of the application
16996
14:53:42,160 --> 14:53:47,116
um which we have right now created in
16997
14:53:48,400 --> 14:53:51,520
but if you have a look at the login view
16998
14:53:50,239 --> 14:53:53,115
you can see one of the things that we're
16999
14:53:51,519 --> 14:53:54,239
doing immediately as we go to the login
17000
14:53:55,116 --> 14:53:58,240
is not actually immediately by pressing
17001
14:53:56,559 --> 14:54:00,955
the login button we're talking with
17002
14:53:58,239 --> 14:54:02,639
firebase off signing in we are kind of
17003
14:54:00,955 --> 14:54:05,199
doing the same thing talking with
17004
14:54:02,639 --> 14:54:07,040
firebase by uh in the register view you
17005
14:54:05,199 --> 14:54:08,159
can see firebase auth instance create
17006
14:54:08,160 --> 14:54:11,916
and we also have firebase in our verify
17007
14:54:11,915 --> 14:54:17,360
so you can see here we are actually
17008
14:54:13,680 --> 14:54:19,680
importing firebase auth firebase so
17009
14:54:17,360 --> 14:54:21,680
if you're not uh like if you don't have
17010
14:54:19,680 --> 14:54:23,595
a software development background from
17011
14:54:21,680 --> 14:54:25,680
from before you may think well this is
17012
14:54:23,595 --> 14:54:27,360
this is fine very important firebase but
17013
14:54:25,680 --> 14:54:30,400
you also need to know that firebase is
17014
14:54:27,360 --> 14:54:32,639
kind of like a low-level abstraction
17015
14:54:32,639 --> 14:54:35,915
that is talking to the firebase backend
17016
14:54:34,400 --> 14:54:38,319
and providing you with a lot of
17017
14:54:38,319 --> 14:54:42,080
functionality but those high-level
17018
14:54:39,756 --> 14:54:44,319
functionalities at the firebase level
17019
14:54:42,080 --> 14:54:45,360
they're kind of high level but if you
17020
14:54:47,595 --> 14:54:50,639
a dependency that we're bringing into
17021
14:54:49,519 --> 14:54:53,435
our application that's talking with
17022
14:54:50,639 --> 14:54:56,879
firebase back-end in itself is
17023
14:54:53,436 --> 14:54:58,400
low-level compared with our ui so if you
17024
14:54:58,400 --> 14:55:03,116
the ui code is here then what we are
17025
14:55:01,199 --> 14:55:05,360
doing is that we're like saying here is
17026
14:55:03,116 --> 14:55:07,680
firebase and then the ui is talking
17027
14:55:05,360 --> 14:55:09,436
directly with the firebase libraries and
17028
14:55:09,436 --> 14:55:13,116
in the in the eyes of a like a software
17029
14:55:11,756 --> 14:55:14,880
developer has been doing this for a
17030
14:55:13,116 --> 14:55:18,160
while this is not a good idea simply
17031
14:55:14,879 --> 14:55:20,639
because we're missing a little bit of a
17032
14:55:18,160 --> 14:55:22,560
layer in between the ui and firebase
17033
14:55:20,639 --> 14:55:24,400
which abstracts away the firebase
17034
14:55:22,559 --> 14:55:25,915
functionality from the ui of the
17035
14:55:25,915 --> 14:55:30,319
and as we talked about it before um it
17036
14:55:28,639 --> 14:55:32,639
is possible that in the future you may
17037
14:55:30,319 --> 14:55:35,360
want to allow for instance apple login
17038
14:55:32,639 --> 14:55:38,639
or google login or sign in with facebook
17039
14:55:35,360 --> 14:55:41,680
etc various options for signing in and
17040
14:55:38,639 --> 14:55:44,159
if you look at um the console at
17041
14:55:41,680 --> 14:55:46,879
firebase you'll see immediately that
17042
14:55:44,160 --> 14:55:48,880
you have various ways of authenticating
17043
14:55:46,879 --> 14:55:51,115
a user at the moment we've enabled sign
17044
14:55:48,879 --> 14:55:53,115
in method for email and password but you
17045
14:55:51,116 --> 14:55:54,880
also have the ability to add a new
17046
14:55:53,116 --> 14:55:56,796
provider you can as you can see google
17047
14:55:54,879 --> 14:55:59,360
facebook and these as you can see
17048
14:55:56,796 --> 14:56:01,200
they're called providers a new provider
17049
14:55:59,360 --> 14:56:05,040
and that is what we're going to do in
17050
14:56:01,199 --> 14:56:06,479
this chapter of our flashlight course as
17051
14:56:06,480 --> 14:56:11,040
we're going to take firebase and
17052
14:56:09,116 --> 14:56:12,955
think of it as an authentication
17053
14:56:11,040 --> 14:56:14,239
provider okay so we're going to create a
17054
14:56:14,239 --> 14:56:19,199
which i believe we're calling at the
17055
14:56:16,080 --> 14:56:21,116
moment firebase auth provider
17056
14:56:19,199 --> 14:56:23,519
but we're gonna say that this firebase
17057
14:56:21,116 --> 14:56:26,319
auth provider comes from another class
17058
14:56:23,519 --> 14:56:29,435
which is called auth provider so what
17059
14:56:26,319 --> 14:56:33,275
we're gonna do then is gonna say okay
17060
14:56:29,436 --> 14:56:35,596
any auth provider that needs to that our
17061
14:56:33,275 --> 14:56:37,595
application can work with is expected to
17062
14:56:35,595 --> 14:56:40,239
have certain functionalities
17063
14:56:37,595 --> 14:56:41,839
and certain properties okay such as the
17064
14:56:40,239 --> 14:56:44,239
current auth provider should be able to
17065
14:56:41,839 --> 14:56:46,719
return the current user the author
17066
14:56:44,239 --> 14:56:47,680
provider should be able to log a user in
17067
14:56:47,680 --> 14:56:51,840
log user out register users send an
17068
14:56:54,720 --> 14:56:59,360
so that will be our abstract offs
17069
14:56:57,116 --> 14:57:02,319
provider class and then we will create
17070
14:56:59,360 --> 14:57:04,796
another class which is as we call it it
17071
14:57:02,319 --> 14:57:06,480
will be the concrete implementation of
17072
14:57:04,796 --> 14:57:08,956
that abstract class so think of the
17073
14:57:06,480 --> 14:57:12,720
abstract class as kind of like a
17074
14:57:08,955 --> 14:57:14,239
as it's it is our um contract
17075
14:57:12,720 --> 14:57:16,639
so we're saying any authentication
17076
14:57:14,239 --> 14:57:18,239
provider such as google facebook etc
17077
14:57:18,239 --> 14:57:21,915
functionality that we specified in this
17078
14:57:21,915 --> 14:57:25,435
then we will go and develop a concrete
17079
14:57:23,756 --> 14:57:27,040
implementation of that abstract class
17080
14:57:25,436 --> 14:57:29,916
and we will call it firebase auth
17081
14:57:27,040 --> 14:57:31,436
provider and we will actually place the
17082
14:57:33,040 --> 14:57:39,116
for firebase such as creating a user
17083
14:57:35,040 --> 14:57:41,520
logging user in etc etc in that concrete
17084
14:57:41,519 --> 14:57:45,359
and then what we will do also we will
17085
14:57:43,360 --> 14:57:49,040
create another class which we will call
17086
14:57:45,360 --> 14:57:51,595
it i believe we call it off service
17087
14:57:51,595 --> 14:57:56,079
and in this course it won't do so much
17088
14:57:56,080 --> 14:58:01,200
take a provider such as a firebase auth
17089
14:57:59,040 --> 14:58:03,275
provider a google auth provider and it
17090
14:58:01,199 --> 14:58:05,839
will just expose the functionalities of
17091
14:58:03,275 --> 14:58:08,400
that provider to the outside world and
17092
14:58:05,839 --> 14:58:10,955
and the goal of this is that so we will
17093
14:58:10,955 --> 14:58:15,595
with that service and that service will
17094
14:58:13,275 --> 14:58:17,680
talk to a provider which which is the
17095
14:58:15,595 --> 14:58:19,435
firebase auth provider and that firebase
17096
14:58:17,680 --> 14:58:20,319
auth provider will talk to firebase so
17097
14:58:20,319 --> 14:58:25,116
right now we have firebase ui
17098
14:58:23,275 --> 14:58:27,199
but after after the end of this chapter
17099
14:58:30,080 --> 14:58:35,596
auth service and then the ui so we will
17100
14:58:32,559 --> 14:58:38,479
have two layers sitting in in between
17101
14:58:35,595 --> 14:58:40,000
and you may actually correctly think
17102
14:58:38,480 --> 14:58:41,756
that well this is a lot of work why do
17103
14:58:41,756 --> 14:58:46,559
for me i if i wanted this course to be
17104
14:58:44,319 --> 14:58:48,720
just another course where i show you how
17105
14:58:46,559 --> 14:58:50,079
to include firebase then it wouldn't be
17106
14:58:48,720 --> 14:58:52,160
to be honest with you worth actually
17107
14:58:50,080 --> 14:58:53,680
doing yet another course about firebase
17108
14:58:52,160 --> 14:58:56,000
and flutter because there are lots of
17109
14:58:53,680 --> 14:58:57,915
courses available maybe not maybe not
17110
14:58:56,000 --> 14:59:00,879
courses that go through so much details
17111
14:58:57,915 --> 14:59:02,719
as i am going but i still believe that
17112
14:59:00,879 --> 14:59:04,879
my job here is not just to make you a
17113
14:59:02,720 --> 14:59:07,116
developer but also make you a good
17114
14:59:04,879 --> 14:59:08,639
developer where you take some extra
17115
14:59:07,116 --> 14:59:10,160
steps in order to make your code a
17116
14:59:08,639 --> 14:59:12,559
little bit better and this is why you
17117
14:59:10,160 --> 14:59:14,080
will actually notice as as you get more
17118
14:59:12,559 --> 14:59:16,319
into software development and working
17119
14:59:14,080 --> 14:59:18,240
with others in inside teams which you
17120
14:59:16,319 --> 14:59:19,595
may not be doing at the moment but when
17121
14:59:18,239 --> 14:59:20,955
you get your first job a software
17122
14:59:19,595 --> 14:59:22,479
developer you'll understand that other
17123
14:59:20,955 --> 14:59:24,319
software developers are actually taking
17124
14:59:22,480 --> 14:59:26,480
some extra steps in order to make their
17125
14:59:24,319 --> 14:59:29,199
code a little bit easier and better to
17126
14:59:26,480 --> 14:59:32,480
maintain so that's what we're gonna do
17127
14:59:35,519 --> 14:59:39,115
uh the intro for this chapter what we
17128
14:59:39,116 --> 14:59:44,000
um first think about how we're handling
17129
14:59:44,000 --> 14:59:48,080
if you look inside the i mean in the
17130
14:59:46,080 --> 14:59:49,596
verify view we're not taking care of
17131
14:59:48,080 --> 14:59:51,840
exceptions as such maybe that's
17132
14:59:49,595 --> 14:59:53,360
something we'll need to do as well
17133
14:59:51,839 --> 14:59:56,159
but if you look at the login screen for
17134
14:59:53,360 --> 14:59:58,559
instance we're having here a try block
17135
14:59:56,160 --> 15:00:01,436
and then when it gets to firebase off
17136
14:59:58,559 --> 15:00:03,756
exception we're handling user not found
17137
15:00:01,436 --> 15:00:05,916
wrong password and then if anything else
17138
15:00:03,756 --> 15:00:07,680
happens we just say show error
17139
15:00:07,680 --> 15:00:12,840
specific errors off errors that we're
17140
15:00:09,839 --> 15:00:16,079
handling wrong password and the user not
17141
15:00:16,080 --> 15:00:21,200
the register view you will also see we
17142
15:00:18,319 --> 15:00:25,116
have weak password email already used
17143
15:00:25,116 --> 15:00:30,400
so these are some of the exceptions that
17144
15:00:27,275 --> 15:00:32,795
we'll need to handle in our um in our
17145
15:00:30,400 --> 15:00:34,955
application but right now as you can see
17146
15:00:32,796 --> 15:00:37,200
our ui is going directly to firebase
17147
15:00:34,955 --> 15:00:40,080
auth exception and it's like importing
17148
15:00:37,199 --> 15:00:42,000
firebase auth exception which is
17149
15:00:40,080 --> 15:00:45,200
created inside let's have a look
17150
15:00:42,000 --> 15:00:48,559
firebase off accession src interface
17151
15:00:49,275 --> 15:00:54,720
it's in one of the files which i believe
17152
15:00:51,595 --> 15:00:56,720
is accessible through firebase auth so
17153
15:00:56,720 --> 15:01:02,796
that probably imports all the exceptions
17154
15:00:59,040 --> 15:01:04,400
as well there we go here it is
17155
15:01:04,400 --> 15:01:08,560
so our ui shouldn't really know anything
17156
15:01:06,796 --> 15:01:10,639
about firebase off by the end of this
17157
15:01:08,559 --> 15:01:13,756
chapter so let's take the first step
17158
15:01:10,639 --> 15:01:15,915
here then and let's go and create our
17159
15:01:17,275 --> 15:01:20,519
under folder called services auth and
17160
15:01:20,519 --> 15:01:23,435
exceptions.dart so i'm gonna do that
17161
15:01:23,436 --> 15:01:27,275
i'm going to collapse these and let's go
17162
15:01:25,595 --> 15:01:29,115
under lay down you can see that we don't
17163
15:01:27,275 --> 15:01:30,795
have con right now we have constants
17164
15:01:29,116 --> 15:01:32,796
utilities and views so we don't have
17165
15:01:30,796 --> 15:01:34,480
anything called services so let me right
17166
15:01:32,796 --> 15:01:35,840
click on lib and say new file and you
17167
15:01:35,839 --> 15:01:40,479
and in here just enter the entire path
17168
15:01:47,436 --> 15:01:51,116
oh that is our new file that we created
17169
15:01:51,116 --> 15:01:55,360
and what we need to do is to go and
17170
15:01:52,955 --> 15:01:58,400
define all those exceptions so let's
17171
15:01:55,360 --> 15:02:00,480
begin by saying that we need a new
17172
15:01:58,400 --> 15:02:02,796
exception called user not found off
17173
15:02:00,480 --> 15:02:04,080
exception and if you remember user not
17174
15:02:02,796 --> 15:02:05,436
found is something that we're handling
17175
15:02:05,436 --> 15:02:09,756
firebase off exception in the login view
17176
15:02:07,519 --> 15:02:12,479
and if we cannot find that user we're
17177
15:02:09,756 --> 15:02:14,955
just showing an error saying show error
17178
15:02:12,480 --> 15:02:17,680
dialog so let's define an exception for
17179
15:02:14,955 --> 15:02:22,559
that and i'm going to say class
17180
15:02:25,436 --> 15:02:30,400
and i'm going to say implements
17181
15:02:28,000 --> 15:02:33,040
exception so this is a typical way of
17182
15:02:30,400 --> 15:02:34,796
creating exception classes in your in
17183
15:02:33,040 --> 15:02:36,480
your application that you say
17184
15:02:36,480 --> 15:02:41,116
my own class that is that for instance
17185
15:02:38,955 --> 15:02:42,795
represents an exception and it's it's
17186
15:02:41,116 --> 15:02:44,796
good practice just to say that it
17187
15:02:42,796 --> 15:02:46,796
implements an existing exception
17188
15:02:44,796 --> 15:02:48,160
exception you can see here by command
17189
15:02:46,796 --> 15:02:51,436
pressing on it you can see it goes to
17190
15:02:48,160 --> 15:02:53,756
flutter bin cache core exception start
17191
15:02:51,436 --> 15:02:55,116
so it is already imported by default you
17192
15:02:53,756 --> 15:02:56,955
don't have to import any specific file
17193
15:02:55,116 --> 15:02:57,916
in order to get access to the exception
17194
15:02:57,915 --> 15:03:04,319
so it's it suffices that you just
17195
15:03:04,319 --> 15:03:08,239
so now let's go ahead and implement the
17196
15:03:08,239 --> 15:03:13,915
exception as the title as the caption
17197
15:03:11,116 --> 15:03:16,480
says here wrong password off exception
17198
15:03:13,915 --> 15:03:17,915
and that is also handled inside our
17199
15:03:21,595 --> 15:03:27,519
i'm just gonna go and kind of like copy
17200
15:03:24,160 --> 15:03:29,276
that code and in here i'm just gonna say
17201
15:03:33,360 --> 15:03:37,915
all right what else are we handling here
17202
15:03:35,839 --> 15:03:40,079
nothing else in the login view at least
17203
15:03:37,915 --> 15:03:41,519
so that's that's really good so
17204
15:03:40,080 --> 15:03:42,720
i'm just going to close the login view
17205
15:03:46,319 --> 15:03:50,080
so let's now start taking care of some
17206
15:03:48,559 --> 15:03:51,519
of the exceptions that we're handling in
17207
15:03:50,080 --> 15:03:53,840
our register view and let's go to
17208
15:03:51,519 --> 15:03:55,435
register view and you'll see here that
17209
15:03:53,839 --> 15:03:57,679
the first section exception that we're
17210
15:03:55,436 --> 15:03:58,560
handling is called weak password
17211
15:03:58,559 --> 15:04:02,639
i'm going to put a comment in here and
17212
15:04:00,955 --> 15:04:04,239
a comment in here i'm going to say login
17213
15:04:08,400 --> 15:04:11,916
so as the caption says let's create a
17214
15:04:10,239 --> 15:04:14,955
class called weak password auth
17215
15:04:11,915 --> 15:04:16,879
exception gonna copy this code from here
17216
15:04:20,559 --> 15:04:24,795
so that's for the register views weak
17217
15:04:22,559 --> 15:04:27,915
password the next one is email already
17218
15:04:24,796 --> 15:04:30,160
in use so that's what the caption says
17219
15:04:27,915 --> 15:04:32,639
here as well so let's go and copy this
17220
15:04:30,160 --> 15:04:35,436
and i'm gonna say email already in use
17221
15:04:36,559 --> 15:04:42,639
so now we have the password and email
17222
15:04:44,480 --> 15:04:49,276
and we also have the invalid email
17223
15:04:49,275 --> 15:04:53,360
which i don't think i had planned for
17224
15:04:51,756 --> 15:04:57,275
but let's go and implement that as well
17225
15:05:02,955 --> 15:05:08,559
now what we also need to do is to
17226
15:05:08,559 --> 15:05:12,479
other exceptions as you remember from
17227
15:05:12,480 --> 15:05:17,040
we also have the case of an else where
17228
15:05:15,116 --> 15:05:18,720
we basically say something else happened
17229
15:05:17,040 --> 15:05:20,160
here it's an off exception but something
17230
15:05:18,720 --> 15:05:22,880
else may have happened that we haven't
17231
15:05:20,160 --> 15:05:25,040
handled with this code or we may also
17232
15:05:22,879 --> 15:05:26,879
have another cat statement here that
17233
15:05:25,040 --> 15:05:28,955
catches like generic exceptions and
17234
15:05:26,879 --> 15:05:31,680
we're we're doing the same thing as you
17235
15:05:28,955 --> 15:05:33,680
can see the code here um and let me
17236
15:05:31,680 --> 15:05:36,000
change the screen layout so you see it
17237
15:05:36,000 --> 15:05:39,436
the login view as well because we're
17238
15:05:37,839 --> 15:05:41,435
doing the exact same thing in the login
17239
15:05:41,436 --> 15:05:45,520
upon getting a firebase auth exception
17240
15:05:45,519 --> 15:05:50,000
then we also have an else statement even
17241
15:05:48,239 --> 15:05:53,115
in there so we're saying if the code is
17242
15:05:50,000 --> 15:05:55,839
not like handled by us it may be another
17243
15:05:53,116 --> 15:05:58,880
code in that case also show the show
17244
15:05:55,839 --> 15:06:00,000
error dialog or in that case show error
17245
15:06:00,000 --> 15:06:04,879
and we're also doing a catch like a
17246
15:06:02,400 --> 15:06:05,756
generic catch as well so we need kind of
17247
15:06:05,756 --> 15:06:08,796
exception that handles all those cases
17248
15:06:08,796 --> 15:06:14,000
an unknown code during the firebase off
17249
15:06:11,680 --> 15:06:16,796
exception and an unknown exception so
17250
15:06:14,000 --> 15:06:17,680
we're gonna create a generic exception
17251
15:06:17,680 --> 15:06:21,040
i'm gonna change the screen layout a
17252
15:06:21,040 --> 15:06:24,796
um like that i'm gonna go to my notes
17253
15:06:24,796 --> 15:06:30,080
so let's just in here say generic
17254
15:06:38,400 --> 15:06:42,560
today i'm gonna bring this one first so
17255
15:06:40,639 --> 15:06:44,239
let's go ahead and create a generic auth
17256
15:06:42,559 --> 15:06:46,159
exception i'm gonna copy this code from
17257
15:06:44,239 --> 15:06:47,756
here i'm going to say generic auth
17258
15:06:48,720 --> 15:06:51,756
and what we also need to do is to
17259
15:06:51,756 --> 15:06:57,360
this thing user not logged in
17260
15:06:57,360 --> 15:07:01,436
and you will you will know now that
17261
15:07:01,436 --> 15:07:05,520
i mean you will need to know why we're
17262
15:07:03,275 --> 15:07:07,040
actually having a use or not logged in
17263
15:07:07,040 --> 15:07:12,639
this will be an exception that our um
17264
15:07:10,400 --> 15:07:14,400
that our firebase provider will be able
17265
15:07:17,915 --> 15:07:23,680
after registering that user for instance
17266
15:07:21,275 --> 15:07:26,000
so let's say that we tell our auth
17267
15:07:23,680 --> 15:07:28,879
provider we say register a user with
17268
15:07:26,000 --> 15:07:30,639
this email and password and no exception
17269
15:07:30,639 --> 15:07:34,639
so we the application thinks that all
17270
15:07:32,480 --> 15:07:36,880
right everything went as expected but
17271
15:07:40,559 --> 15:07:44,239
is null in that case our auth provider
17272
15:07:42,796 --> 15:07:46,160
should be able to handle that and send
17273
15:07:44,239 --> 15:07:48,559
an exception saying that oh i couldn't
17274
15:07:46,160 --> 15:07:50,720
find this user or this user isn't logged
17275
15:07:48,559 --> 15:07:52,559
in so let's create that exception as
17276
15:07:50,720 --> 15:07:55,200
well so i'm just going to say
17277
15:07:52,559 --> 15:07:56,879
user not logged in exception so let's
17278
15:07:59,199 --> 15:08:05,435
okay so user not logged in off exception
17279
15:08:02,000 --> 15:08:05,436
and i'm gonna save that as well
17280
15:08:06,720 --> 15:08:10,880
all right that was a lot of work now we
17281
15:08:08,720 --> 15:08:12,319
have created all those files oh sorry
17282
15:08:10,879 --> 15:08:13,755
maybe you didn't actually see the code
17283
15:08:12,319 --> 15:08:15,680
that i wrote i don't like having
17284
15:08:13,756 --> 15:08:17,360
captions up all the time but i also
17285
15:08:15,680 --> 15:08:19,199
think captions are so important so that
17286
15:08:17,360 --> 15:08:20,879
you always know what we're working with
17287
15:08:19,199 --> 15:08:22,079
but the downside of having these
17288
15:08:20,879 --> 15:08:24,319
captions at the bottom left of the
17289
15:08:22,080 --> 15:08:26,955
screen is that sometimes they hide what
17290
15:08:24,319 --> 15:08:27,680
i'm typing so i'm doing my best really
17291
15:08:29,839 --> 15:08:33,115
catch that issue and if i see that
17292
15:08:31,756 --> 15:08:34,720
happening i'll i'm gonna bring the
17293
15:08:33,116 --> 15:08:36,400
screen up like this so you see it but
17294
15:08:34,720 --> 15:08:39,275
sometimes i may be missing that i
17295
15:08:36,400 --> 15:08:41,756
apologize for that so let's let's say
17296
15:08:39,275 --> 15:08:43,275
that and now we've implemented all our
17297
15:08:43,275 --> 15:08:47,199
and as you can see in the captions it
17298
15:08:45,116 --> 15:08:49,756
says we need an auth user we shouldn't
17299
15:08:47,199 --> 15:08:51,360
expose firebase's user to the ui
17300
15:08:49,756 --> 15:08:54,796
and this to be honest with you is the
17301
15:08:51,360 --> 15:08:58,239
same story as we had for our exceptions
17302
15:08:54,796 --> 15:09:00,720
the ui code should not at all be working
17303
15:08:58,239 --> 15:09:03,436
with firebase the ui code should be so
17304
15:09:00,720 --> 15:09:05,275
high level and so abstracted from the
17305
15:09:03,436 --> 15:09:08,400
rest of your application that it
17306
15:09:05,275 --> 15:09:10,319
shouldn't even at all know how it is
17307
15:09:08,400 --> 15:09:11,275
functioning you're just giving it
17308
15:09:11,275 --> 15:09:15,199
providers and services and it should be
17309
15:09:13,360 --> 15:09:17,595
calling those services and providers not
17310
15:09:15,199 --> 15:09:19,839
really knowing how they're tied together
17311
15:09:17,595 --> 15:09:22,159
and at the moment you can see our login
17312
15:09:24,160 --> 15:09:29,680
you can see here in login view and for
17313
15:09:27,275 --> 15:09:32,319
me it's on line 67 for you maybe in a
17314
15:09:29,680 --> 15:09:33,915
different line but we're after calling
17315
15:09:32,319 --> 15:09:35,360
the sign in with email and password
17316
15:09:33,915 --> 15:09:36,559
function which we also shouldn't be
17317
15:09:37,595 --> 15:09:41,756
what we're doing after that is we're
17318
15:09:39,839 --> 15:09:44,399
getting the current user from firebase
17319
15:09:41,756 --> 15:09:46,400
and this user is of type you can see
17320
15:09:44,400 --> 15:09:49,916
let's go in here and see it's of type
17321
15:09:46,400 --> 15:09:52,239
user so if i go put the type in here and
17322
15:09:49,915 --> 15:09:54,955
command click on it you'll see this user
17323
15:09:52,239 --> 15:09:58,239
is part of firebase auth you see there's
17324
15:09:54,955 --> 15:10:01,436
a fun there's a class called user so
17325
15:09:58,239 --> 15:10:04,159
we are all we were also like exposing a
17326
15:10:01,436 --> 15:10:05,840
firebase user to our ui and that is not
17327
15:10:05,839 --> 15:10:10,879
so as a caption says here we shouldn't
17328
15:10:08,559 --> 15:10:14,000
expose firebase's user to the ui so we
17329
15:10:10,879 --> 15:10:16,479
need to have our own user that abstracts
17330
15:10:16,480 --> 15:10:21,916
or that that the current user at
17331
15:10:22,955 --> 15:10:29,116
let's go ahead and do that so
17332
15:10:26,239 --> 15:10:32,239
we're going to create an off user dart
17333
15:10:29,116 --> 15:10:33,200
file in lib services auth a file called
17334
15:10:33,199 --> 15:10:37,915
user so i'm going to remove or sorry i'm
17335
15:10:36,239 --> 15:10:39,595
going to close all the files that i've
17336
15:10:39,595 --> 15:10:44,559
services auth i'm going to then create
17337
15:10:44,559 --> 15:10:50,955
so i'm going to say off user.dark
17338
15:10:48,000 --> 15:10:53,680
and in this off user then we need to
17339
15:10:50,955 --> 15:10:55,519
basically start working with firebase in
17340
15:10:53,680 --> 15:10:56,559
this case so i'm going to go to my notes
17341
15:10:55,519 --> 15:10:58,795
just to ensure i'm telling you
17342
15:10:56,559 --> 15:11:01,115
everything that i'm um that i plan to
17343
15:11:01,116 --> 15:11:04,796
all right so let's go in here and import
17344
15:11:13,199 --> 15:11:18,000
firebase auth i believe and then we're
17345
15:11:15,116 --> 15:11:20,639
gonna say show user okay and as i've
17346
15:11:18,000 --> 15:11:23,040
mentioned before this is a great way of
17347
15:11:20,639 --> 15:11:26,159
just ensuring that you're not exposing
17348
15:11:23,040 --> 15:11:28,720
too much of a packages classes to your
17349
15:11:26,160 --> 15:11:31,276
current workspace except what you're
17350
15:11:28,720 --> 15:11:33,360
saying is that firebase auth is isn't it
17351
15:11:31,275 --> 15:11:35,595
maybe an entire dart file with its
17352
15:11:33,360 --> 15:11:37,116
structures maybe thousands of classes
17353
15:11:35,595 --> 15:11:39,680
now i'm exaggerating but a lot of
17354
15:11:37,116 --> 15:11:41,916
classes but you are only interested in
17355
15:11:48,319 --> 15:11:52,955
off like that and then you would say
17356
15:11:50,160 --> 15:11:54,796
show user and that will allow you so if
17357
15:11:54,796 --> 15:11:58,160
then you will be able to say
17358
15:11:58,160 --> 15:12:02,400
you can also do that if you if you
17359
15:12:00,000 --> 15:12:04,639
prefer to for instance ha prefix the
17360
15:12:02,400 --> 15:12:06,480
user in this case that comes from
17361
15:12:04,639 --> 15:12:09,519
firebase with the actual place that it
17362
15:12:06,480 --> 15:12:12,080
comes from you could also use as
17363
15:12:09,519 --> 15:12:14,159
some people may like it and i also do
17364
15:12:12,080 --> 15:12:15,436
but i haven't planned to do that in in
17365
15:12:15,436 --> 15:12:19,756
file so do it if you want to the way
17366
15:12:18,160 --> 15:12:21,360
that i'm doing it here so you can follow
17367
15:12:19,756 --> 15:12:24,400
along with the steps that i'm providing
17368
15:12:21,360 --> 15:12:25,199
for you in this course without diverging
17369
15:12:27,199 --> 15:12:31,595
okay now that we've done the um
17370
15:12:31,595 --> 15:12:34,720
what we need to do as a caption in the
17371
15:12:33,199 --> 15:12:37,595
case we need to create the actual class
17372
15:12:37,595 --> 15:12:45,275
and in here what we need is a field
17373
15:12:40,879 --> 15:12:48,000
called is email verified now remember
17374
15:12:45,275 --> 15:12:49,519
right now all we need from our off user
17375
15:12:48,000 --> 15:12:51,436
is to know whether that email is
17376
15:12:49,519 --> 15:12:53,359
verified or not so if you go for
17377
15:12:53,360 --> 15:12:56,796
you can see that we have this code here
17378
15:12:56,796 --> 15:13:00,160
that signs a user in with email and
17379
15:12:58,639 --> 15:13:02,639
password and right after that gets the
17380
15:13:00,160 --> 15:13:04,560
user and all it does with that user says
17381
15:13:04,559 --> 15:13:08,239
and we're doing the same thing in
17382
15:13:06,080 --> 15:13:10,639
register view i believe so let's go to
17383
15:13:08,239 --> 15:13:12,079
register view and you can see in here
17384
15:13:12,080 --> 15:13:15,916
actually there we're not doing anything
17385
15:13:13,839 --> 15:13:17,915
with the email verified all we're doing
17386
15:13:15,915 --> 15:13:19,915
is just saying a send email verification
17387
15:13:17,915 --> 15:13:23,115
so sorry about that so it's in login
17388
15:13:19,915 --> 15:13:25,680
screen okay so let's go in our off user
17389
15:13:23,116 --> 15:13:27,840
in here and say it has a property called
17390
15:13:27,839 --> 15:13:34,955
i'm gonna say final and bull is email
17391
15:13:32,720 --> 15:13:36,639
and you saw that firebase has
17392
15:13:34,955 --> 15:13:39,040
implemented this function this uh
17393
15:13:36,639 --> 15:13:41,839
property as email verified i personally
17394
15:13:39,040 --> 15:13:43,915
prefer to call boolean functions boolean
17395
15:13:41,839 --> 15:13:47,519
getters in this case like a property of
17396
15:13:43,915 --> 15:13:48,879
a class with is wherever i see that fit
17397
15:13:47,519 --> 15:13:51,755
it's just because it makes a lot more
17398
15:13:48,879 --> 15:13:53,519
sense for me at least to say user dot is
17399
15:13:51,756 --> 15:13:55,680
email verified rather than saying
17400
15:13:55,680 --> 15:14:00,639
it just makes it more like complete
17401
15:13:58,000 --> 15:14:02,639
grammatically is blah blah verified or
17402
15:14:02,639 --> 15:14:06,400
so that's the reason that we're
17403
15:14:07,915 --> 15:14:12,479
now you see this in here and we're
17404
15:14:11,040 --> 15:14:14,796
saying it's email verified you can get
17405
15:14:12,480 --> 15:14:17,200
help from visual studio code to
17406
15:14:14,796 --> 15:14:18,560
create a constructor for final fields
17407
15:14:17,199 --> 15:14:20,079
and even if you don't want to do that
17408
15:14:18,559 --> 15:14:22,479
you could always just type it by hand
17409
15:14:20,080 --> 15:14:25,840
you can say off user self is email
17410
15:14:22,480 --> 15:14:29,116
verified sorry this is email verified
17411
15:14:25,839 --> 15:14:31,435
and since this class it only has a
17412
15:14:29,116 --> 15:14:33,276
property that you can set upon
17413
15:14:31,436 --> 15:14:34,955
initialization and you're not changing
17414
15:14:33,275 --> 15:14:36,559
it because it's a final field
17415
15:14:36,559 --> 15:14:43,519
you can make your constructor a const
17416
15:14:40,796 --> 15:14:45,276
excuse me again and it would also be
17417
15:14:46,879 --> 15:14:51,595
immutable as another try defining
17418
15:14:49,595 --> 15:14:53,839
undefined i believe you actually have to
17419
15:14:57,519 --> 15:15:01,039
but immutable here i don't think we've
17420
15:14:59,519 --> 15:15:04,159
talked about that before but it's just
17421
15:15:01,040 --> 15:15:06,879
like an annotation telling that this
17422
15:15:04,160 --> 15:15:08,956
class and any subclasses of this class
17423
15:15:06,879 --> 15:15:10,795
are going to be immutable meaning that
17424
15:15:08,955 --> 15:15:13,519
their internals are never going to be
17425
15:15:10,796 --> 15:15:16,480
changed upon initialization so if you
17426
15:15:13,519 --> 15:15:20,879
then go and create for instance class my
17427
15:15:16,480 --> 15:15:22,796
off user and say extends the auth user
17428
15:15:22,796 --> 15:15:27,840
um let's say in here and you create a
17429
15:15:26,239 --> 15:15:31,360
constructor for it so let's create a
17430
15:15:27,839 --> 15:15:33,915
constructor for it so boom okay
17431
15:15:31,360 --> 15:15:36,319
prefer declaring what is a const okay
17432
15:15:33,915 --> 15:15:38,719
then we say const then you say okay well
17433
15:15:36,319 --> 15:15:39,839
i want a boolean flag in here bull is
17434
15:15:45,519 --> 15:15:49,115
now you see it says null not
17435
15:15:47,519 --> 15:15:50,559
non-nullable instance flab but it must
17436
15:15:49,116 --> 15:15:53,840
be initialized let's just initialize it
17437
15:15:50,559 --> 15:15:55,435
to false and and it says can't define a
17438
15:15:53,839 --> 15:15:57,595
cons constructor okay then we're not
17439
15:15:55,436 --> 15:15:59,596
going to make it a cons constructor and
17440
15:15:57,595 --> 15:16:01,756
now you see that little warning here it
17441
15:15:59,595 --> 15:16:04,159
says this class or a class that this
17442
15:16:01,756 --> 15:16:06,720
class inherits from is marked as
17443
15:16:04,160 --> 15:16:09,916
immutable but one or more of its
17444
15:16:06,720 --> 15:16:11,756
instance feels aren't final so
17445
15:16:09,915 --> 15:16:14,319
now you see what immutable means it
17446
15:16:11,756 --> 15:16:17,116
tells dart that this class and all its
17447
15:16:14,319 --> 15:16:19,680
subclasses need to be immune immutable
17448
15:16:17,116 --> 15:16:22,319
they cannot have any fields that change
17449
15:16:19,680 --> 15:16:23,436
so by removing this field then you get
17450
15:16:23,436 --> 15:16:28,400
little warning and you can make this
17451
15:16:25,275 --> 15:16:30,479
cons and the error completely goes away
17452
15:16:28,400 --> 15:16:32,639
so now you know what immutable means
17453
15:16:32,639 --> 15:16:36,879
all right great now we created that is
17454
15:16:34,955 --> 15:16:38,795
email verified at a cons constructor for
17455
15:16:42,400 --> 15:16:47,520
the next point as you can see here it
17456
15:16:44,239 --> 15:16:50,400
says we need a factory constructor
17457
15:16:50,400 --> 15:16:55,436
auth user from a firebase user and
17458
15:16:53,116 --> 15:16:58,639
factory constructors are really useful
17459
15:16:55,436 --> 15:17:00,720
for this purpose in that you have
17460
15:16:58,639 --> 15:17:03,595
let's say object x and you want to
17461
15:17:00,720 --> 15:17:06,000
create an object y from that instead of
17462
15:17:03,595 --> 15:17:08,000
you manually gluing things in some sort
17463
15:17:06,000 --> 15:17:10,480
of a middle layer saying now i take the
17464
15:17:08,000 --> 15:17:12,400
object x and add some blah blah and fuse
17465
15:17:10,480 --> 15:17:14,640
it together and then put object y you
17466
15:17:12,400 --> 15:17:17,275
can put that responsibility on object y
17467
15:17:14,639 --> 15:17:19,116
and saying that you need to be able to
17468
15:17:17,275 --> 15:17:21,199
initialize yourself or construct an
17469
15:17:19,116 --> 15:17:22,720
instance of yourself from this object
17470
15:17:21,199 --> 15:17:25,115
and this is like a typical pattern that
17471
15:17:25,116 --> 15:17:29,756
um well everywhere everywhere but where
17472
15:17:27,275 --> 15:17:31,839
you have the ability to do that so
17473
15:17:29,756 --> 15:17:34,239
that's what we're gonna do now with a
17474
15:17:31,839 --> 15:17:36,879
factory constructor so let's say we have
17475
15:17:36,879 --> 15:17:42,319
we'll say off user and we say from
17476
15:17:39,839 --> 15:17:45,115
firebase okay as the caption says then
17477
15:17:42,319 --> 15:17:47,199
we take a firebase user in here
17478
15:17:45,116 --> 15:17:49,040
like that and then we say what we will
17479
15:17:47,199 --> 15:17:52,239
do in here we will actually create an
17480
15:17:49,040 --> 15:17:55,040
instance of our own class an off user
17481
15:17:52,239 --> 15:17:56,159
given that user okay so let's say that
17482
15:17:58,955 --> 15:18:03,040
and a lot of user and it's email
17483
15:18:00,796 --> 15:18:04,000
verified comes from user email verified
17484
15:18:04,000 --> 15:18:07,116
all right so this shouldn't be they
17485
15:18:06,000 --> 15:18:08,720
shouldn't be that difficult to
17486
15:18:13,116 --> 15:18:18,639
and it takes the email verified value of
17487
15:18:15,680 --> 15:18:20,239
the firebase user and places it in this
17488
15:18:18,639 --> 15:18:21,839
class so all we did is just we kind of
17489
15:18:25,040 --> 15:18:29,595
made a copy of it into our own off user
17490
15:18:29,595 --> 15:18:37,756
exposing firebase's user and all of its
17491
15:18:32,879 --> 15:18:37,755
properties to our user interface
17492
15:18:39,040 --> 15:18:44,160
all right that was a lot of information
17493
15:18:40,720 --> 15:18:45,595
now let's talk about an auth provider as
17494
15:18:44,160 --> 15:18:46,640
i mentioned in the beginning of this
17495
15:18:46,639 --> 15:18:52,080
and as you saw in the firebase console
17496
15:18:49,275 --> 15:18:53,756
you will have the possibility to add
17497
15:18:52,080 --> 15:18:54,880
various auth providers to your
17498
15:18:53,756 --> 15:18:56,480
application when you're working with
17499
15:18:59,360 --> 15:19:03,199
and many many more okay an email and
17500
15:19:01,436 --> 15:19:05,520
password combination like we're doing so
17501
15:19:05,519 --> 15:19:10,955
what we need to do now is to create an
17502
15:19:07,199 --> 15:19:14,159
alt provider class that encapsulates
17503
15:19:10,955 --> 15:19:17,116
every provider that we may add in the
17504
15:19:14,160 --> 15:19:19,520
future and creates a nice interface for
17505
15:19:17,116 --> 15:19:22,000
them says every provider that our
17506
15:19:19,519 --> 15:19:24,559
application can work with should conform
17507
15:19:22,000 --> 15:19:26,879
to this particular interface okay
17508
15:19:24,559 --> 15:19:29,115
so let's go ahead and take care of that
17509
15:19:26,879 --> 15:19:31,275
now and i can see here we're going to
17510
15:19:29,116 --> 15:19:32,080
create that file on the lib services
17511
15:19:32,080 --> 15:19:38,080
off provider so we have lib services off
17512
15:19:36,000 --> 15:19:40,879
but we don't have auth provider files so
17513
15:19:38,080 --> 15:19:44,639
let's let's right click on auth and say
17514
15:19:51,756 --> 15:19:56,720
what we're going to do in here then is
17515
15:20:02,239 --> 15:20:05,360
the the functions that we're going to
17516
15:20:03,595 --> 15:20:08,879
provide for our auth provider are for
17517
15:20:05,360 --> 15:20:10,559
instance a getter that gets the current
17518
15:20:08,879 --> 15:20:12,719
user so that's not a function it's just
17519
15:20:10,559 --> 15:20:14,639
a getter the way we're actually doing it
17520
15:20:12,720 --> 15:20:15,916
in here if you see let me go to login
17521
15:20:15,915 --> 15:20:20,795
and you'll see in login view here this
17522
15:20:18,559 --> 15:20:22,955
thing at the moment say firebase auth
17523
15:20:20,796 --> 15:20:25,520
instance current user this is a getter
17524
15:20:22,955 --> 15:20:28,879
so this is a property and returns the
17525
15:20:25,519 --> 15:20:31,519
firebase user what we want is for our
17526
15:20:28,879 --> 15:20:34,079
auth provider to also be able to provide
17527
15:20:31,519 --> 15:20:37,595
us with the current user now remember
17528
15:20:34,080 --> 15:20:40,080
we've abstracted away the firebase user
17529
15:20:37,595 --> 15:20:43,435
with our own auth user which we just
17530
15:20:40,080 --> 15:20:46,000
created okay so what we need is this
17531
15:20:43,436 --> 15:20:48,955
abstract class that can return an
17532
15:20:48,955 --> 15:20:54,239
so for that we need to import this off
17533
15:20:51,839 --> 15:20:56,159
user into this dart file so let's just
17534
15:20:57,199 --> 15:21:01,115
this application that i've created as
17535
15:20:59,275 --> 15:21:02,079
you can see in the title it's called my
17536
15:21:02,080 --> 15:21:08,955
so let's go to my notes services
17537
15:21:05,519 --> 15:21:11,039
auth and then auth user so that's the
17538
15:21:08,955 --> 15:21:13,116
import statement as you can see in the
17539
15:21:11,040 --> 15:21:14,955
caption i've written package xxx and
17540
15:21:13,116 --> 15:21:17,200
that's where you need to put the name of
17541
15:21:14,955 --> 15:21:19,519
your package in this case for me is my
17542
15:21:20,796 --> 15:21:26,720
all right that's great now let's go and
17543
15:21:24,239 --> 15:21:29,436
create an abstract class so i've
17544
15:21:26,720 --> 15:21:31,756
mentioned this twice before but our auth
17545
15:21:29,436 --> 15:21:33,436
provider dart file is not gonna have
17546
15:21:33,436 --> 15:21:38,160
is not gonna have any logic it's an
17547
15:21:36,239 --> 15:21:40,955
abstract class though abstract classes
17548
15:21:38,160 --> 15:21:42,640
in dart can contain logic but in this
17549
15:21:40,955 --> 15:21:44,559
case our abstract class is just going to
17550
15:21:42,639 --> 15:21:47,199
be a protocol or you may know it as
17551
15:21:44,559 --> 15:21:50,079
interface or you may also know it as
17552
15:21:47,199 --> 15:21:52,319
well an abstract class so let's go ahead
17553
15:21:50,080 --> 15:21:55,040
and create that let's say abstract class
17554
15:21:55,040 --> 15:22:01,116
and so the abstract class creation is
17555
15:21:58,000 --> 15:22:03,595
done what we need to do is now give it
17556
15:22:01,116 --> 15:22:05,596
like the ability to return the current
17557
15:22:03,595 --> 15:22:08,839
off user okay so as the caption says
17558
15:22:05,595 --> 15:22:10,879
we're going to say off user and get
17559
15:22:10,879 --> 15:22:14,479
so we're saying any author provider
17560
15:22:12,955 --> 15:22:16,319
whether it works with email password
17561
15:22:14,480 --> 15:22:18,560
whether it's a google auth provider
17562
15:22:16,319 --> 15:22:20,000
whether it's an apple facebook twitter
17563
15:22:18,559 --> 15:22:22,955
whatever it needs to be able to
17564
15:22:20,000 --> 15:22:24,796
optionally return the current currently
17565
15:22:22,955 --> 15:22:26,080
authenticated user and that's what this
17566
15:22:28,796 --> 15:22:32,400
and then what we will also need to do is
17567
15:22:33,680 --> 15:22:39,680
be able to log a user in okay so we're
17568
15:22:36,955 --> 15:22:41,116
going to say we will have a function
17569
15:22:51,756 --> 15:22:56,080
and now we have to think what does this
17570
15:22:53,519 --> 15:22:58,399
login actually require well in our case
17571
15:22:56,080 --> 15:23:00,080
it requires email and password so let's
17572
15:22:58,400 --> 15:23:02,000
just put email and password we're
17573
15:23:00,080 --> 15:23:03,840
thinking that every author provider that
17574
15:23:02,000 --> 15:23:06,239
we're writing is going to have an email
17575
15:23:03,839 --> 15:23:09,039
and password combination of some sort
17576
15:23:06,239 --> 15:23:10,559
you could say id and password but i'm
17577
15:23:09,040 --> 15:23:12,796
just going to go with email and password
17578
15:23:10,559 --> 15:23:14,479
for now okay so let's make these
17579
15:23:12,796 --> 15:23:16,160
required parameters as well so i'm going
17580
15:23:14,480 --> 15:23:18,240
to put curly brackets here and curly
17581
15:23:16,160 --> 15:23:19,596
bracket here i'm going to say required
17582
15:23:19,595 --> 15:23:23,680
and then a required stream password like
17583
15:23:24,559 --> 15:23:28,720
and a semicolon at the end of that
17584
15:23:26,955 --> 15:23:31,275
command s to save the file so dark
17585
15:23:31,275 --> 15:23:37,756
and the reason where you see if we go to
17586
15:23:35,436 --> 15:23:39,200
author sorry if you go to our login
17587
15:23:39,199 --> 15:23:43,839
and in here we say sign in with user and
17588
15:23:42,080 --> 15:23:46,319
password you can see that it always
17589
15:23:43,839 --> 15:23:49,039
returns a user credential now you may
17590
15:23:46,319 --> 15:23:51,756
you may think how can i always return a
17591
15:23:49,040 --> 15:23:53,116
user credential if the current email and
17592
15:23:51,756 --> 15:23:55,436
password are actually incorrect and they
17593
15:23:53,116 --> 15:23:57,276
don't belong to a valid user well the
17594
15:23:55,436 --> 15:23:58,955
way that firebase is handling is that if
17595
15:23:57,275 --> 15:24:01,680
you say sign in with email and password
17596
15:23:58,955 --> 15:24:03,199
if you can grab the current user if he
17597
15:24:01,680 --> 15:24:05,040
can't sign in that user with the
17598
15:24:03,199 --> 15:24:07,595
information that you provide it returns
17599
15:24:05,040 --> 15:24:09,360
it otherwise it fails with an exception
17600
15:24:07,595 --> 15:24:11,199
meaning that it's saying that as long as
17601
15:24:09,360 --> 15:24:13,275
you call me and there's no exception i
17602
15:24:11,199 --> 15:24:15,199
will give you user credential if there
17603
15:24:13,275 --> 15:24:18,159
is an exception well you need to handle
17604
15:24:15,199 --> 15:24:20,559
that so that is a great way to avoid
17605
15:24:18,160 --> 15:24:23,200
having functions let me close the off
17606
15:24:20,559 --> 15:24:25,519
user as well avoid having functions that
17607
15:24:23,199 --> 15:24:27,039
do like this that option on your return
17608
15:24:27,040 --> 15:24:32,559
do your work in your functions
17609
15:24:29,360 --> 15:24:35,116
return the user and return the object
17610
15:24:32,559 --> 15:24:37,435
that you promised if you can't do that
17611
15:24:35,116 --> 15:24:40,400
throw an error so you don't have to do
17612
15:24:37,436 --> 15:24:42,639
this do this kind of a optional return
17613
15:24:43,595 --> 15:24:48,479
for a the login function now we need to
17614
15:24:46,239 --> 15:24:50,955
also have a function that can create a
17615
15:24:48,480 --> 15:24:52,480
user so that imagine that it's for the
17616
15:24:53,360 --> 15:24:57,680
yeah what else do we call it uh register
17617
15:24:57,680 --> 15:25:03,680
let's call it a create user so we say
17618
15:25:00,559 --> 15:25:06,239
this also returns a auth user
17619
15:25:03,680 --> 15:25:08,239
and we call it creates user like this
17620
15:25:06,239 --> 15:25:09,680
and this also has all these parameters
17621
15:25:08,239 --> 15:25:12,079
so i'm just going to copy and paste this
17622
15:25:09,680 --> 15:25:14,480
you don't have to do that twice and a
17623
15:25:14,480 --> 15:25:20,080
all right guard formatter do its thing
17624
15:25:20,080 --> 15:25:24,880
and create a function that allows us
17625
15:25:22,639 --> 15:25:26,479
then to log a user out because that's
17626
15:25:24,879 --> 15:25:28,719
what we're doing in the main ui of the
17627
15:25:28,720 --> 15:25:32,319
the log out it's not going to return any
17628
15:25:30,639 --> 15:25:34,639
value as you can see in the caption here
17629
15:25:32,319 --> 15:25:37,680
just a future void so we say future void
17630
15:25:40,879 --> 15:25:45,519
and also we will need a function that
17631
15:25:42,879 --> 15:25:47,040
can send an email verification okay so
17632
15:25:45,519 --> 15:25:49,115
this one's also very easy it's just a
17633
15:25:47,040 --> 15:25:52,840
future void and as you can see in
17634
15:25:49,116 --> 15:25:55,276
captions we're calling it send email
17635
15:26:01,915 --> 15:26:05,915
our office provider at the moment is
17636
15:26:06,839 --> 15:26:11,519
dictating an interface for any
17637
15:26:09,595 --> 15:26:13,915
authentication provider that we're gonna
17638
15:26:13,915 --> 15:26:19,115
we but just so you know we are only
17639
15:26:16,400 --> 15:26:20,160
going to add an email author provider
17640
15:26:20,879 --> 15:26:26,399
sorry a firebase author provider
17641
15:26:23,839 --> 15:26:28,719
but this way by creating an abstract
17642
15:26:26,400 --> 15:26:30,239
class with an author provider as a name
17643
15:26:28,720 --> 15:26:32,080
and then you create a concrete class
17644
15:26:30,239 --> 15:26:34,159
called firebase auth provider you're
17645
15:26:32,080 --> 15:26:36,560
able to in the future to extend this and
17646
15:26:34,160 --> 15:26:38,640
add more and more auth providers all of
17647
15:26:36,559 --> 15:26:40,955
which will follow the same interface
17648
15:26:40,955 --> 15:26:46,000
but we're only in this in this course
17649
15:26:43,595 --> 15:26:48,879
are gonna use firebase auth provider
17650
15:26:48,879 --> 15:26:53,435
as the caption says go ahead and create
17651
15:26:50,720 --> 15:26:56,080
a a file called firebase auth provider
17652
15:26:53,436 --> 15:26:58,319
in your services auth folder i'm gonna
17653
15:26:56,080 --> 15:27:00,720
right click here and i'm gonna say oops
17654
15:26:58,319 --> 15:27:02,955
uh and say new file i'm gonna call it
17655
15:27:07,519 --> 15:27:11,115
um i'm gonna go to my notes a little bit
17656
15:27:11,116 --> 15:27:17,040
like that okay so this is gonna be like
17657
15:27:17,040 --> 15:27:22,720
of this chapter we are actually going to
17658
15:27:19,915 --> 15:27:25,199
abstract the way firebase authentication
17659
15:27:22,720 --> 15:27:27,116
into our own provider so expect this
17660
15:27:25,199 --> 15:27:29,839
file to grow a little bit in size i can
17661
15:27:27,116 --> 15:27:33,200
see my notes it's going to go to about
17662
15:27:29,839 --> 15:27:36,000
100 lines of code but that's okay too so
17663
15:27:33,199 --> 15:27:37,595
and um we can just get started with it
17664
15:27:37,595 --> 15:27:42,000
as you can see in the caption we need to
17665
15:27:39,040 --> 15:27:44,639
import a few of files auth user
17666
15:27:42,000 --> 15:27:47,040
auth provider and off exceptions we need
17667
15:27:44,639 --> 15:27:48,559
auth user because this sorry actually
17668
15:27:48,559 --> 15:27:52,079
explain why we need to import auth
17669
15:27:50,160 --> 15:27:53,360
provider because our firebase auth
17670
15:27:52,080 --> 15:27:56,080
provider is going to be a concrete
17671
15:27:53,360 --> 15:27:58,000
implementation of the file auth provider
17672
15:27:56,080 --> 15:27:59,360
or the class auth provider that we just
17673
15:27:58,000 --> 15:28:00,559
created so that's the reason for that
17674
15:28:00,559 --> 15:28:04,079
the os user import is going to be
17675
15:28:02,239 --> 15:28:05,115
because as you can see in the auth
17676
15:28:05,116 --> 15:28:09,840
the login and create user functions they
17677
15:28:07,436 --> 15:28:11,840
need to return an off user so that's why
17678
15:28:09,839 --> 15:28:13,595
we need to import off users so that our
17679
15:28:11,839 --> 15:28:14,559
provider can return instances of that
17680
15:28:14,559 --> 15:28:18,720
and last but not least we also need to
17681
15:28:16,480 --> 15:28:20,640
import auth exceptions because remember
17682
15:28:18,720 --> 15:28:21,595
our firebase auth provider is also going
17683
15:28:21,595 --> 15:28:25,756
abstract away all the authentication
17684
15:28:23,680 --> 15:28:28,080
errors and exceptions that otherwise
17685
15:28:25,756 --> 15:28:30,720
happen at the firebase level into our
17686
15:28:28,080 --> 15:28:33,360
own exceptions that we've created
17687
15:28:30,720 --> 15:28:36,639
here off exceptions okay so let me go
17688
15:28:33,360 --> 15:28:38,160
ahead and first import off user so
17689
15:28:38,160 --> 15:28:44,320
and this application called my notes
17690
15:28:46,080 --> 15:28:51,200
off user okay so i'm gonna import that
17691
15:28:49,116 --> 15:28:53,436
and i'm gonna copy this file then and
17692
15:28:51,199 --> 15:28:55,360
this line and the next one is gonna be
17693
15:28:55,360 --> 15:29:01,360
and as you can see in the captures we
17694
15:28:57,040 --> 15:29:01,360
also have to import auth exceptions
17695
15:29:02,160 --> 15:29:05,840
so those are the three imports
17696
15:29:06,796 --> 15:29:11,360
since we have our own imports
17697
15:29:09,680 --> 15:29:12,879
and this file is going to talk directly
17698
15:29:11,360 --> 15:29:15,360
with firebase we also need to import
17699
15:29:12,879 --> 15:29:17,360
firebase of course so and let's go ahead
17700
15:29:17,360 --> 15:29:20,879
and i'm going to actually copy that code
17701
15:29:19,275 --> 15:29:22,639
so i don't have to type all of it
17702
15:29:20,879 --> 15:29:23,519
because it's a little bit boring but you
17703
15:29:23,519 --> 15:29:28,239
in the captions at least what you need
17704
15:29:25,680 --> 15:29:30,720
to import the firebase off and you need
17705
15:29:28,239 --> 15:29:32,479
to also import firebase off exception
17706
15:29:36,720 --> 15:29:40,720
um now what we need to do is to create
17707
15:29:40,720 --> 15:29:43,916
um as you can see it's going to be
17708
15:29:42,480 --> 15:29:45,916
called firebase all provider and
17709
15:29:43,915 --> 15:29:48,399
implements auth provider which is our
17710
15:29:45,915 --> 15:29:51,199
own class so let's say firebase
17711
15:29:51,199 --> 15:29:54,559
a provider just like that okay and now
17712
15:29:53,275 --> 15:29:56,479
you can see you get an error same
17713
15:29:54,559 --> 15:29:58,239
missing concrete implementation i'm
17714
15:29:56,480 --> 15:30:01,200
going to change the layout of the screen
17715
15:29:58,239 --> 15:30:02,720
so you see the code in its entirety
17716
15:30:01,199 --> 15:30:05,275
and then what we need to do is to
17717
15:30:02,720 --> 15:30:08,160
implement you see those function
17718
15:30:05,275 --> 15:30:09,595
functions and getters that auth provider
17719
15:30:09,595 --> 15:30:14,239
says that every class that implements it
17720
15:30:12,559 --> 15:30:16,319
needs to implement those things as well
17721
15:30:14,239 --> 15:30:18,639
so you may try to do those things by
17722
15:30:18,639 --> 15:30:24,720
i i i'm not at all a fan of doing things
17723
15:30:22,319 --> 15:30:26,639
by hand sorry about that so i prefer to
17724
15:30:24,720 --> 15:30:27,756
get help from the editor to complete
17725
15:30:26,639 --> 15:30:29,116
these things so i'm just going to say
17726
15:30:29,116 --> 15:30:34,480
and make class firebase off abstract
17727
15:30:31,839 --> 15:30:36,639
create five missing overrides okay so
17728
15:30:34,480 --> 15:30:38,400
there we go so visual studio code
17729
15:30:36,639 --> 15:30:39,756
created all those functions in here and
17730
15:30:38,400 --> 15:30:42,239
you can see in all of them it just says
17731
15:30:44,080 --> 15:30:48,560
i'm gonna decrease the size of the font
17732
15:30:48,559 --> 15:30:53,680
same layout that we had before
17733
15:30:51,360 --> 15:30:56,559
so the first thing that we need to do in
17734
15:30:53,680 --> 15:30:59,199
here let's go ahead and implement this
17735
15:30:59,199 --> 15:31:03,680
so this is going to have a lot of
17736
15:31:01,915 --> 15:31:05,680
not a lot but it's going to have a bit
17737
15:31:03,680 --> 15:31:07,360
of logic so i'm going to do this instead
17738
15:31:07,360 --> 15:31:12,559
and let's go ahead in here and try to
17739
15:31:12,559 --> 15:31:17,680
you see our job is now to get the
17740
15:31:15,116 --> 15:31:20,319
firebase user and turn it into an off
17741
15:31:17,680 --> 15:31:22,239
user remember our off user had a factory
17742
15:31:20,319 --> 15:31:24,239
constructor so we need to call that
17743
15:31:22,239 --> 15:31:28,879
factory constructor okay so let's just
17744
15:31:24,239 --> 15:31:30,720
say final user is equal to firebase off
17745
15:31:35,519 --> 15:31:40,159
and then we say if user is not null
17746
15:31:40,319 --> 15:31:45,116
and we need to create an instance of it
17747
15:31:42,480 --> 15:31:50,480
as off users so we just say return
17748
15:31:45,116 --> 15:31:54,319
off user from firebase user okay
17749
15:31:50,480 --> 15:31:56,319
otherwise we return null like this so
17750
15:31:54,319 --> 15:31:58,319
if firebase says there's a user then we
17751
15:31:56,319 --> 15:32:01,360
create an off user out of that and we
17752
15:32:02,559 --> 15:32:06,399
okay that was for a current user it
17753
15:32:04,720 --> 15:32:08,319
wasn't so much of code to be honest with
17754
15:32:08,319 --> 15:32:12,639
now what we need to do is to take care
17755
15:32:10,400 --> 15:32:14,239
of create user which is this function
17756
15:32:14,239 --> 15:32:19,275
so create user is going to be a little
17757
15:32:22,796 --> 15:32:27,360
first do a little bit of formatting in
17758
15:32:27,360 --> 15:32:31,360
append a comma at the end of the last
17759
15:32:29,199 --> 15:32:33,199
parameter of my function so that when i
17760
15:32:33,199 --> 15:32:37,839
or dart format it's going to break all
17761
15:32:35,839 --> 15:32:39,755
these parameters into their own
17762
15:32:37,839 --> 15:32:41,519
lines okay because before it looked like
17763
15:32:39,756 --> 15:32:43,275
this and it's not so clean in my eyes at
17764
15:32:44,720 --> 15:32:50,160
in here what we need to do is to
17765
15:32:53,116 --> 15:32:57,276
so i'm going to put this entire thing in
17766
15:32:55,275 --> 15:33:01,360
in a try block and then we're going to
17767
15:32:57,275 --> 15:33:02,559
catch firebase off exception
17768
15:33:02,559 --> 15:33:10,000
on firebase off exception catch e okay
17769
15:33:10,000 --> 15:33:13,595
and then we're going to have a generic
17770
15:33:17,360 --> 15:33:21,840
all right uh now what we need to do in
17771
15:33:19,680 --> 15:33:23,680
create user in the tri-state main
17772
15:33:21,839 --> 15:33:25,275
statement we need to actually tell
17773
15:33:23,680 --> 15:33:28,000
firebase that we want to create a new
17774
15:33:30,000 --> 15:33:33,839
instant and then we say create user with
17775
15:33:32,239 --> 15:33:36,639
email and password okay so we have the
17776
15:33:33,839 --> 15:33:38,319
email here and the password and we can
17777
15:33:36,639 --> 15:33:39,756
see those parameters already there so we
17778
15:33:40,559 --> 15:33:45,199
um but what we need to do here is you
17779
15:33:43,360 --> 15:33:46,480
can first actually see yeah this
17780
15:33:45,199 --> 15:33:48,479
function needs to return a value we're
17781
15:33:46,480 --> 15:33:51,200
gonna fix this so don't worry about that
17782
15:33:48,480 --> 15:33:52,956
but we also need to await on this
17783
15:33:51,199 --> 15:33:54,479
because remember creating a user or
17784
15:33:52,955 --> 15:33:56,400
email password is not a function that
17785
15:33:54,480 --> 15:33:57,436
just returns immediately and this is one
17786
15:33:56,400 --> 15:33:59,275
of the things that is absolutely
17787
15:33:57,436 --> 15:34:00,720
beautiful about dart in that in the
17788
15:33:59,275 --> 15:34:03,040
interface we didn't actually say that
17789
15:34:00,720 --> 15:34:04,955
this function has to be async but you
17790
15:34:03,040 --> 15:34:07,436
can in this concrete implementation make
17791
15:34:04,955 --> 15:34:09,040
this function async so it's absolutely
17792
15:34:07,436 --> 15:34:11,436
beautiful so async is not the part of
17793
15:34:09,040 --> 15:34:12,955
the signature of the function but it has
17794
15:34:11,436 --> 15:34:14,955
more to do with the internals of that
17795
15:34:12,955 --> 15:34:17,436
function so in order to call this
17796
15:34:14,955 --> 15:34:19,199
function with an await you see if we put
17797
15:34:17,436 --> 15:34:22,239
a weight here we get an error we need to
17798
15:34:19,199 --> 15:34:24,879
make this function async all right so
17799
15:34:25,360 --> 15:34:30,955
all right so after doing that what we're
17800
15:34:28,080 --> 15:34:33,680
going to do is to get the current user
17801
15:34:30,955 --> 15:34:35,839
if the current user is there then we're
17802
15:34:33,680 --> 15:34:38,000
just gonna return the current user if
17803
15:34:35,839 --> 15:34:40,239
the current user after creating a user
17804
15:34:38,000 --> 15:34:42,955
or email and password and no exceptions
17805
15:34:40,239 --> 15:34:45,360
is not there then that is a bad sign and
17806
15:34:42,955 --> 15:34:47,595
we need to return then one of our auth
17807
15:34:45,360 --> 15:34:48,879
exceptions called user not logged in off
17808
15:34:48,879 --> 15:34:52,719
so i'm going to close this so let's go
17809
15:34:54,319 --> 15:34:59,595
get or just user is the current user
17810
15:34:57,595 --> 15:35:01,839
remember we already have a getter for a
17811
15:35:03,040 --> 15:35:07,360
and it just gets the current user from
17812
15:35:04,639 --> 15:35:10,955
firebase so we say here's the user
17813
15:35:07,360 --> 15:35:12,639
if the user is available there
17814
15:35:15,360 --> 15:35:20,319
otherwise you should throw a user not
17815
15:35:18,559 --> 15:35:23,435
found or i think that's what we call the
17816
15:35:28,559 --> 15:35:32,559
that's for the creation of the user if
17817
15:35:31,040 --> 15:35:34,319
everything goes fine except for this
17818
15:35:34,319 --> 15:35:38,159
now we need to go to our firebase auth
17819
15:35:36,160 --> 15:35:39,680
exception and we need to handle a few
17820
15:35:39,680 --> 15:35:44,879
so if you look at where in our register
17821
15:35:44,879 --> 15:35:51,040
in here we are handling weak password
17822
15:35:48,160 --> 15:35:53,436
email already in use and invalid email
17823
15:35:51,040 --> 15:35:55,595
so let's just copy these three things
17824
15:35:53,436 --> 15:35:58,319
okay actually these four things because
17825
15:35:55,595 --> 15:35:59,275
we have an else block in there as well
17826
15:35:59,275 --> 15:36:03,915
so i'm gonna copy that code just do the
17827
15:36:02,160 --> 15:36:05,756
same thing please so go to your registry
17828
15:36:03,915 --> 15:36:08,000
and copy that code go back to your
17829
15:36:05,756 --> 15:36:09,680
firebase auth provider inside the
17830
15:36:08,000 --> 15:36:11,756
firebase off exception where you're
17831
15:36:11,756 --> 15:36:15,916
paste that code but remove everything
17832
15:36:14,239 --> 15:36:19,519
that has anything to do with the show
17833
15:36:15,915 --> 15:36:21,839
error dialog okay so at least we have
17834
15:36:21,839 --> 15:36:26,079
like this so you should end up with a
17835
15:36:27,040 --> 15:36:31,595
where there is a weak password we are
17836
15:36:29,595 --> 15:36:33,275
actually going to throw our own error so
17837
15:36:33,275 --> 15:36:38,079
weak password off exception
17838
15:36:36,239 --> 15:36:40,559
it is an email already in use we're
17839
15:36:38,080 --> 15:36:42,000
going to throw email already and use
17840
15:36:42,000 --> 15:36:47,519
in case on invalid email throw invalid
17841
15:36:44,720 --> 15:36:49,275
email off exception and if there is any
17842
15:36:47,519 --> 15:36:51,595
other code that we don't know about
17843
15:36:49,275 --> 15:36:54,079
we're just going to throw a generic auth
17844
15:36:54,559 --> 15:36:59,839
and also if there is a final catch
17845
15:36:57,756 --> 15:37:01,756
basically meaning that by calling the
17846
15:36:59,839 --> 15:37:03,915
create user an email with email and
17847
15:37:01,756 --> 15:37:06,080
password if there is any other exception
17848
15:37:03,915 --> 15:37:08,399
other than firebase auth exception we
17849
15:37:06,080 --> 15:37:11,840
also need to handle that and throw
17850
15:37:08,400 --> 15:37:13,360
a generic auth exception there as well
17851
15:37:15,360 --> 15:37:20,955
hopefully this makes our ui code
17852
15:37:19,040 --> 15:37:23,360
easier to read okay so we're doing this
17853
15:37:25,915 --> 15:37:30,719
create user i'm gonna fall create user
17854
15:37:28,400 --> 15:37:33,680
uh if it allows me to fold the entire
17855
15:37:30,720 --> 15:37:35,360
create user poof and i'm gonna fold
17856
15:37:33,680 --> 15:37:36,480
current user as well so this is a
17857
15:37:35,360 --> 15:37:37,840
technique that you can or not a
17858
15:37:36,480 --> 15:37:39,840
technique that's just a trick you can do
17859
15:37:37,839 --> 15:37:41,359
in your editor if it supports folding
17860
15:37:39,839 --> 15:37:43,519
and unfolding just to make sure that it
17861
15:37:41,360 --> 15:37:45,199
looks a little bit cleaner okay because
17862
15:37:43,519 --> 15:37:47,839
now that you've written create user you
17863
15:37:45,199 --> 15:37:49,199
may not be directly interested in all
17864
15:37:47,839 --> 15:37:52,639
its details you may just want to know
17865
15:37:53,275 --> 15:37:57,915
all right the next thing we need to do
17866
15:37:54,879 --> 15:38:00,159
is to implement send email verification
17867
15:37:57,915 --> 15:38:01,435
so let's find that function and i can
17868
15:38:00,160 --> 15:38:02,796
see it's right here send email
17869
15:38:01,436 --> 15:38:04,400
verification i'm gonna scroll a little
17870
15:38:06,239 --> 15:38:11,680
i'm gonna go to my notes as well okay
17871
15:38:09,199 --> 15:38:14,559
so what we need to do then is to
17872
15:38:11,680 --> 15:38:17,360
incent email verification what we need
17873
15:38:14,559 --> 15:38:18,955
is to also mark this as async because
17874
15:38:17,360 --> 15:38:21,756
it's going to call an asynchronous
17875
15:38:18,955 --> 15:38:23,116
function on firebase as well okay
17876
15:38:23,116 --> 15:38:26,955
call the send email verification
17877
15:38:24,879 --> 15:38:28,719
function on the firebase user remember
17878
15:38:26,955 --> 15:38:30,795
our user doesn't have that functionality
17879
15:38:28,720 --> 15:38:34,319
our user only has is email verified
17880
15:38:30,796 --> 15:38:36,240
property so in here let's get the
17881
15:38:34,319 --> 15:38:38,400
firebase user so i'm going to say user
17882
15:38:42,839 --> 15:38:50,319
if user is not null then we call that
17883
15:38:47,519 --> 15:38:51,915
function so we say await user send email
17884
15:38:50,319 --> 15:38:53,595
verification i remember i think this was
17885
15:38:51,915 --> 15:38:55,519
the future of void so that's why we're
17886
15:38:53,595 --> 15:38:58,879
doing a weight on it and that is why we
17887
15:38:55,519 --> 15:39:01,680
have the async tag in here okay now
17888
15:38:58,879 --> 15:39:04,079
if the user is nil then we're gonna just
17889
15:39:01,680 --> 15:39:05,840
say user is not logged in you cannot
17890
15:39:04,080 --> 15:39:08,080
send an email verification from user
17891
15:39:05,839 --> 15:39:10,239
who's not logged in okay so then you
17892
15:39:14,559 --> 15:39:19,839
so that's our send email verification
17893
15:39:19,839 --> 15:39:23,679
let's then fold this function as well so
17894
15:39:23,680 --> 15:39:28,239
as the caption says now we need to go
17895
15:39:25,519 --> 15:39:30,479
and implement a login login is just as
17896
15:39:28,239 --> 15:39:32,079
important as creating a user i'm going
17897
15:39:30,480 --> 15:39:34,480
to start by putting a comma at the end
17898
15:39:32,080 --> 15:39:36,000
of password parameter here and command s
17899
15:39:36,000 --> 15:39:40,559
and in here in the login function we're
17900
15:39:38,796 --> 15:39:41,756
going to do something very similar to
17901
15:39:40,559 --> 15:39:43,915
what we're doing in the register
17902
15:39:41,756 --> 15:39:45,756
function i can see in my notes
17903
15:39:45,756 --> 15:39:50,319
and then we say on firebase off
17904
15:39:58,160 --> 15:40:03,840
let's in in here then start by um
17905
15:40:02,400 --> 15:40:06,840
telling firebase that we want to log in
17906
15:40:03,839 --> 15:40:09,915
with those credentials so let's say
17907
15:40:06,839 --> 15:40:10,719
firebase auth instance and then we say
17908
15:40:10,720 --> 15:40:15,756
sign in with email and password so
17909
15:40:13,519 --> 15:40:17,680
there's a function in there okay
17910
15:40:17,680 --> 15:40:20,955
semicolon at the end so you can see the
17911
15:40:20,955 --> 15:40:24,400
all right so that's what we're doing but
17912
15:40:22,480 --> 15:40:26,720
remember again these functions are
17913
15:40:24,400 --> 15:40:28,720
asynchronous so you can't just call that
17914
15:40:26,720 --> 15:40:31,200
function and expect it to work it's a
17915
15:40:28,720 --> 15:40:32,880
future of user credential okay so make
17916
15:40:31,199 --> 15:40:34,839
your function asynchronous and then
17917
15:40:34,839 --> 15:40:39,039
function so we're going to do something
17918
15:40:37,360 --> 15:40:41,116
very similar similar to what we're doing
17919
15:40:39,040 --> 15:40:43,595
in register sorry in the create user in
17920
15:40:41,116 --> 15:40:45,916
in that we're saying final user is
17921
15:40:45,915 --> 15:40:51,519
i hope you can see that code yes i can
17922
15:40:47,756 --> 15:40:54,160
see that you can see so in this in this
17923
15:40:51,519 --> 15:40:56,479
uh code we're gonna take the exact same
17924
15:40:56,480 --> 15:41:00,319
create user so i'm gonna expand that you
17925
15:41:00,319 --> 15:41:04,080
i'm gonna copy that code and you could
17926
15:41:02,160 --> 15:41:06,796
do the same what we're doing is just
17927
15:41:04,080 --> 15:41:10,160
making sure after signing in then there
17928
15:41:06,796 --> 15:41:12,400
is a current user okay copy that code
17929
15:41:10,160 --> 15:41:15,116
gonna fold this then i'm gonna bring it
17930
15:41:12,400 --> 15:41:16,480
to the login and right after sign in
17931
15:41:15,116 --> 15:41:19,360
with email and password i'm gonna paste
17932
15:41:16,480 --> 15:41:20,080
that code okay so that's that part
17933
15:41:22,239 --> 15:41:27,115
authexception again to handle just like
17934
15:41:24,080 --> 15:41:29,596
we did with create so let's go to your
17935
15:41:32,319 --> 15:41:37,360
and which exceptions we were handling so
17936
15:41:34,879 --> 15:41:39,595
i can see here we're handling these
17937
15:41:37,360 --> 15:41:41,595
i'm actually going to copy that entire
17938
15:41:39,595 --> 15:41:44,159
code from login view you see a firebase
17939
15:41:41,595 --> 15:41:46,879
off exception username wrong password
17940
15:41:44,160 --> 15:41:49,680
etc and including the catch any other
17941
15:41:46,879 --> 15:41:52,795
exception block right here copy that
17942
15:41:55,595 --> 15:41:58,559
replace let me actually see how it looks
17943
15:41:58,559 --> 15:42:05,595
yeah replace all of this with that okay
17944
15:42:02,559 --> 15:42:07,595
and then remove your weights as we did
17945
15:42:05,595 --> 15:42:09,435
before to be honest with you this this
17946
15:42:07,595 --> 15:42:10,955
is just a lot of big talk for saying
17947
15:42:12,720 --> 15:42:16,880
need some code from another place to
17948
15:42:14,639 --> 15:42:18,796
bring here so your code now should look
17949
15:42:16,879 --> 15:42:20,559
like this so it says on firebase off
17950
15:42:18,796 --> 15:42:22,720
exception and we're handling user not
17951
15:42:20,559 --> 15:42:27,519
found wrong password off exceptions from
17952
15:42:22,720 --> 15:42:30,000
firebase and a generic catch block okay
17953
15:42:27,519 --> 15:42:31,275
so in the case of a user not found a
17954
15:42:30,000 --> 15:42:35,116
firebase office session we're going to
17955
15:42:31,275 --> 15:42:36,479
say throw user not found alt exception
17956
15:42:35,116 --> 15:42:38,796
in the case of a wrong password we're
17957
15:42:36,480 --> 15:42:39,840
going to say throw on password boss
17958
15:42:39,839 --> 15:42:43,755
and any other case that might occur here
17959
15:42:42,000 --> 15:42:45,756
we're just going to throw generic off
17960
15:42:45,756 --> 15:42:50,559
and in here as well we're going to say
17961
15:42:47,595 --> 15:42:52,159
throw generic with exception
17962
15:42:52,160 --> 15:42:56,400
thing i really like to do is you see in
17963
15:42:54,000 --> 15:42:58,319
dart it's not yet possible to say that i
17964
15:42:56,400 --> 15:43:00,720
want to ignore a variable in this case
17965
15:42:58,319 --> 15:43:01,915
you can see that in this like where we
17966
15:43:01,915 --> 15:43:05,839
we actually have to pattern match
17967
15:43:03,915 --> 15:43:07,755
against an exception and then we have to
17968
15:43:05,839 --> 15:43:09,519
assign a name to it and that name is
17969
15:43:07,756 --> 15:43:11,275
called e inside this function so if i
17970
15:43:09,519 --> 15:43:13,039
type e you can see it's an object
17971
15:43:11,275 --> 15:43:14,319
however as you can see in the body of
17972
15:43:13,040 --> 15:43:16,160
this function we're not actually
17973
15:43:14,319 --> 15:43:18,400
interested in e at all we're not using
17974
15:43:16,160 --> 15:43:20,480
it so in in other languages it is
17975
15:43:18,400 --> 15:43:23,040
possible to ignore like in javascript
17976
15:43:20,480 --> 15:43:25,756
python swift rust it is possible to
17977
15:43:23,040 --> 15:43:27,595
ignore a variable and saying that hey
17978
15:43:25,756 --> 15:43:28,796
i'm not interested in this value by
17979
15:43:27,595 --> 15:43:30,559
putting something called like an
17980
15:43:28,796 --> 15:43:33,040
underscore or something you can do the
17981
15:43:30,559 --> 15:43:34,720
same thing in art the difference is that
17982
15:43:33,040 --> 15:43:36,796
in dart if you say underscore you're not
17983
15:43:34,720 --> 15:43:38,720
actually ignoring it that variable is
17984
15:43:36,796 --> 15:43:40,956
also there but it's just called
17985
15:43:38,720 --> 15:43:44,400
underscore in this case so you can see
17986
15:43:40,955 --> 15:43:45,915
you can still call to string on it so
17987
15:43:44,400 --> 15:43:47,436
you may want to do it or you may just
17988
15:43:45,915 --> 15:43:49,275
want to leave it alone because you can
17989
15:43:47,436 --> 15:43:50,955
see guard an analyzer it doesn't give
17990
15:43:50,955 --> 15:43:54,955
of any kind saying that yeah your
17991
15:43:53,275 --> 15:43:57,199
pattern matching but you're not using it
17992
15:43:54,955 --> 15:44:00,720
so it's up to you how you want to do it
17993
15:44:01,040 --> 15:44:05,200
wow that was a lot of code um or maybe
17994
15:44:03,360 --> 15:44:07,756
more like a lot of explanations so let's
17995
15:44:05,199 --> 15:44:08,795
go to login and fold that and as you can
17996
15:44:07,756 --> 15:44:10,720
see in the caption now we have to take
17997
15:44:08,796 --> 15:44:12,160
care of the logout function and
17998
15:44:10,720 --> 15:44:14,639
the caption also says that this function
17999
15:44:14,639 --> 15:44:20,000
and you know why because we're going to
18000
15:44:16,559 --> 15:44:22,795
call a function on firebase in order to
18001
15:44:22,796 --> 15:44:26,639
so in order for a user to be logged out
18002
15:44:24,796 --> 15:44:28,000
the user should actually exist so let's
18003
15:44:32,559 --> 15:44:38,000
and then we're going to say current user
18004
15:44:34,559 --> 15:44:40,879
and we say if user is not null
18005
15:44:38,000 --> 15:44:42,955
and it's a user sign uh logout what's it
18006
15:44:42,955 --> 15:44:46,839
oh we have to tell a firebase off so we
18007
15:44:52,720 --> 15:44:58,559
otherwise we say throw user not
18008
15:44:58,559 --> 15:45:02,319
so we're basically saying here that you
18009
15:45:00,400 --> 15:45:04,480
cannot log out a user if that user
18010
15:45:02,319 --> 15:45:06,955
doesn't exist okay or that user isn't
18011
15:45:09,116 --> 15:45:14,000
lots of code lots of description but
18012
15:45:11,040 --> 15:45:16,796
that's okay we've now implemented an
18013
15:45:14,000 --> 15:45:18,239
auth provider firebase auth provider
18014
15:45:18,239 --> 15:45:22,319
which is a concrete implementation of
18015
15:45:22,319 --> 15:45:28,639
now as the caption indicates here we
18016
15:45:28,839 --> 15:45:33,115
um now what is an auth service i
18017
15:45:31,839 --> 15:45:35,435
mentioned this a little bit before but
18018
15:45:33,116 --> 15:45:38,240
an auth service is also going to
18019
15:45:39,519 --> 15:45:45,199
in itself is going to take an instance
18020
15:45:45,199 --> 15:45:49,755
but as you'll see in this chapter and in
18021
15:45:52,559 --> 15:45:58,559
our auth service is really just the
18022
15:45:58,559 --> 15:46:02,639
exposing all the functionalities of the
18023
15:46:02,639 --> 15:46:07,595
and it's not and it has absolutely no
18024
15:46:05,040 --> 15:46:09,840
other logic at the moment okay but the
18025
15:46:07,595 --> 15:46:12,239
reason we're doing that is for me to
18026
15:46:09,839 --> 15:46:13,679
just to show you that you need to have
18027
15:46:12,239 --> 15:46:15,595
providers and then you need to have
18028
15:46:13,680 --> 15:46:17,840
services that they talk to each other
18029
15:46:15,595 --> 15:46:20,479
and then this service can then expose
18030
15:46:17,839 --> 15:46:23,275
more value to your user interface to
18031
15:46:20,480 --> 15:46:26,000
your ui code than the provider does
18032
15:46:23,275 --> 15:46:27,680
that's usually the case that the service
18033
15:46:27,680 --> 15:46:32,720
a few other providers talk to few
18034
15:46:30,000 --> 15:46:34,400
providers and at the end it grabs the
18035
15:46:32,720 --> 15:46:37,275
data fuses together and provides that
18036
15:46:34,400 --> 15:46:40,160
information to the ui now in our case
18037
15:46:37,275 --> 15:46:43,360
that's not gonna be the case okay our
18038
15:46:40,160 --> 15:46:46,320
firebit our auth service is only going
18039
15:46:43,360 --> 15:46:48,319
to talk with our the given auth provider
18040
15:46:46,319 --> 15:46:50,796
and expose all its functionalities to
18041
15:46:48,319 --> 15:46:53,595
the ui but we're doing this exercise so
18042
15:46:50,796 --> 15:46:55,596
that you see how you can abstract away
18043
15:46:53,595 --> 15:46:58,159
various bits and pieces of functionality
18044
15:46:55,595 --> 15:47:00,479
from the ui code so remember that that's
18045
15:46:58,160 --> 15:47:03,916
the reason we have our auth service
18046
15:47:00,480 --> 15:47:06,080
which we're gonna soon create okay
18047
15:47:03,915 --> 15:47:07,680
so as a caption in the case here let's
18048
15:47:06,080 --> 15:47:10,720
go ahead and create our odd service
18049
15:47:07,680 --> 15:47:12,400
inside the auth folder here so auth and
18050
15:47:10,720 --> 15:47:15,840
i'm going to create a new file here i'm
18051
15:47:12,400 --> 15:47:15,840
just going to call it all service
18052
15:47:16,639 --> 15:47:22,000
in this dart file then we need to create
18053
15:47:24,559 --> 15:47:28,000
sorry gonna go to my notes in here as
18054
15:47:30,559 --> 15:47:34,720
import a few things we need to import
18055
15:47:32,480 --> 15:47:38,000
our auth provider and an off user so i'm
18056
15:47:34,720 --> 15:47:39,116
not to explain this again so um package
18057
15:47:41,519 --> 15:47:45,275
and we have and we need to import auth
18058
15:47:45,275 --> 15:47:51,839
and copy this kind of code and then i'm
18059
15:47:47,680 --> 15:47:51,840
going to say off news user i believe
18060
15:47:54,955 --> 15:47:59,360
so let's have a look in here in the
18061
15:48:01,595 --> 15:48:06,239
okay so we need to create now as you can
18062
15:48:03,680 --> 15:48:09,360
see we need to create an auth service
18063
15:48:06,239 --> 15:48:10,159
that also implements auth provider okay
18064
15:48:11,275 --> 15:48:14,559
if i look at the captions here why is
18065
15:48:13,116 --> 15:48:17,276
auth service an author provider i've
18066
15:48:14,559 --> 15:48:19,115
already explained this to you but you
18067
15:48:17,275 --> 15:48:20,400
can see it says but can have more logic
18068
15:48:19,116 --> 15:48:23,200
so that's the reason okay so don't
18069
15:48:20,400 --> 15:48:26,480
forget that so let's go and create a
18070
15:48:26,480 --> 15:48:30,000
and it implements an off of the auth
18071
15:48:33,680 --> 15:48:37,595
now what you'll need to do what you need
18072
15:48:36,000 --> 15:48:39,360
to know is that the auth service in
18073
15:48:37,595 --> 15:48:42,079
itself isn't going to be hard coded to
18074
15:48:39,360 --> 15:48:43,595
use the firebase auth provider
18075
15:48:42,080 --> 15:48:46,160
what it's going to do is that it's going
18076
15:48:43,595 --> 15:48:47,040
to actually take an audit provider from
18077
15:48:47,040 --> 15:48:50,160
and saying that okay i will then expose
18078
15:48:48,879 --> 15:48:52,159
the functionalities from that auth
18079
15:48:50,160 --> 15:48:54,240
provider to the outside world with the
18080
15:48:52,160 --> 15:48:55,840
ability to maybe even change that data
18081
15:48:54,239 --> 15:48:57,756
before it returns it to you but in our
18082
15:48:55,839 --> 15:48:58,879
chapter and then the rest of this course
18083
15:48:57,756 --> 15:49:00,720
it's not going to do that it's just
18084
15:48:58,879 --> 15:49:02,559
going to expose the same auth providers
18085
15:49:00,720 --> 15:49:05,116
functionality to the outside world so
18086
15:49:02,559 --> 15:49:08,079
let's go ahead and as the caption says
18087
15:49:05,116 --> 15:49:11,276
say we take an auth provider and we just
18088
15:49:11,275 --> 15:49:14,400
we need to do then is to create a
18089
15:49:14,400 --> 15:49:19,436
for your auth servicing here so command
18090
15:49:17,360 --> 15:49:21,360
dot on mac or control dot windows and
18091
15:49:19,436 --> 15:49:22,955
linux and say create constructor for
18092
15:49:21,360 --> 15:49:24,080
final fields and make it constant as
18093
15:49:24,080 --> 15:49:28,955
okay so now we have this beautiful
18094
15:49:27,519 --> 15:49:30,795
little off service that takes the
18095
15:49:28,955 --> 15:49:32,479
provider but as you can see it says
18096
15:49:30,796 --> 15:49:34,560
missing concrete implementations and
18097
15:49:32,480 --> 15:49:37,596
that's because we said our auth service
18098
15:49:34,559 --> 15:49:41,115
is also an auth provider so we have to
18099
15:49:37,595 --> 15:49:43,680
implement those auth provider classes
18100
15:49:41,116 --> 15:49:46,000
overrides as well so let's add them in
18101
15:49:43,680 --> 15:49:48,319
here as well but this time it's gonna be
18102
15:49:46,000 --> 15:49:49,915
a lot easier uh to implement these
18103
15:49:48,319 --> 15:49:52,879
functions because our because our auth
18104
15:49:49,915 --> 15:49:54,879
service internally has a provider and
18105
15:49:54,879 --> 15:49:58,559
expose the functionalities of the
18106
15:50:03,436 --> 15:50:06,880
as the caption also says we need to
18107
15:50:08,796 --> 15:50:11,276
before we do that i'm going to do a
18108
15:50:10,160 --> 15:50:13,436
little bit of a clean up here and i
18109
15:50:11,275 --> 15:50:14,720
suggest that you do too and in places
18110
15:50:13,436 --> 15:50:16,480
that we have more than one parameter
18111
15:50:14,720 --> 15:50:19,595
let's go and put a comma at the end of
18112
15:50:16,480 --> 15:50:20,560
the last parameter right here and there
18113
15:50:21,519 --> 15:50:25,595
that was it i'm going to do command s so
18114
15:50:23,756 --> 15:50:26,880
that dart formatter formats the code a
18115
15:50:26,879 --> 15:50:31,275
and let's just go and go ahead and
18116
15:50:29,519 --> 15:50:33,755
expose the functionalities of our
18117
15:50:33,756 --> 15:50:40,000
concrete implementations of the auth
18118
15:50:36,319 --> 15:50:44,080
provider so in here we say provider dot
18119
15:50:40,000 --> 15:50:46,319
creates user email and password perfect
18120
15:50:44,080 --> 15:50:50,080
for the current user we return the
18121
15:50:46,319 --> 15:50:50,080
provider's current user we say provider
18122
15:50:53,116 --> 15:50:59,040
for the login we then expose the
18123
15:50:56,080 --> 15:51:01,756
providers login function we say provider
18124
15:51:01,756 --> 15:51:08,480
and for our logout we do the same thing
18125
15:51:05,116 --> 15:51:10,796
so i'm going to say provider logout okay
18126
15:51:16,400 --> 15:51:22,955
and notification great stuff that was uh
18127
15:51:19,839 --> 15:51:25,039
that went really fast as you can see
18128
15:51:27,275 --> 15:51:32,559
you see we've done a lot of code now if
18129
15:51:29,275 --> 15:51:34,479
we go to our if if i change the screen
18130
15:51:32,559 --> 15:51:36,639
layout a little bit better a little bit
18131
15:51:34,480 --> 15:51:38,640
so you see the code better and let's go
18132
15:51:36,639 --> 15:51:40,479
to our terminal the built-in terminal i
18133
15:51:38,639 --> 15:51:42,559
absolutely love it in visual studio code
18134
15:51:40,480 --> 15:51:45,756
that there is an integrated terminal
18135
15:51:42,559 --> 15:51:48,159
and let's have a look at our git status
18136
15:51:45,756 --> 15:51:50,796
you'll see that we have changed login
18137
15:51:48,160 --> 15:51:53,596
view but also there is an entirely new
18138
15:51:50,796 --> 15:51:56,400
folder here called lib services so if
18139
15:51:56,400 --> 15:52:01,840
and to get status you'll see that we
18140
15:51:58,239 --> 15:52:03,199
actually have done a lot of work so
18141
15:52:01,839 --> 15:52:05,359
if i increase the size you see we've
18142
15:52:03,199 --> 15:52:07,680
added all exceptions auth provider all
18143
15:52:05,360 --> 15:52:08,720
service auth user and firebase auth
18144
15:52:08,720 --> 15:52:13,200
plus the changes in the login view
18145
15:52:13,199 --> 15:52:16,479
um actually i don't know what did we
18146
15:52:17,360 --> 15:52:20,639
that's interesting to know if you go to
18147
15:52:20,639 --> 15:52:24,000
did we change anything in login view
18148
15:52:22,400 --> 15:52:26,639
because at the moment i can't really
18149
15:52:24,000 --> 15:52:28,879
remember if we change anything special
18150
15:52:28,879 --> 15:52:34,000
so it would be interesting to actually
18151
15:52:31,839 --> 15:52:35,519
see what we've done so if i go to my
18152
15:52:36,319 --> 15:52:40,796
if i issue this command as you can see
18153
15:52:38,080 --> 15:52:43,360
here i'm going to remove that
18154
15:52:40,796 --> 15:52:45,276
login view from the staging environment
18155
15:52:47,519 --> 15:52:52,079
and i'm gonna say git status and then
18156
15:52:49,756 --> 15:52:53,840
i'm gonna say bit diff i can say okay
18157
15:52:53,839 --> 15:53:00,479
have added firebase core in here
18158
15:53:07,839 --> 15:53:11,955
has this navigator been removed
18159
15:53:12,400 --> 15:53:16,080
there's a lot of code in here that may
18160
15:53:14,639 --> 15:53:18,559
have not been committed from the
18161
15:53:16,080 --> 15:53:20,000
previous chapter that may be it so that
18162
15:53:18,559 --> 15:53:22,879
may be the reason okay but that's all
18163
15:53:20,000 --> 15:53:25,680
right as well so now let's get at all
18164
15:53:22,879 --> 15:53:27,595
and let's then go to the next stage as
18165
15:53:25,680 --> 15:53:28,955
you can see we've done a lot of work
18166
15:53:27,595 --> 15:53:31,199
let's just make sure everything is
18167
15:53:28,955 --> 15:53:32,795
committed this time okay so get status
18168
15:53:31,199 --> 15:53:34,879
everything is added to the staging
18169
15:53:32,796 --> 15:53:37,200
environment then i'm just gonna say git
18170
15:53:37,199 --> 15:53:43,680
message and step eight this time
18171
15:53:41,040 --> 15:53:45,360
and i'm going to push all those changes
18172
15:53:43,680 --> 15:53:46,720
and get status i can see everything's
18173
15:53:46,720 --> 15:53:51,680
also let's tag our code because i
18174
15:53:51,680 --> 15:53:55,680
chapter we didn't tag anything but the
18175
15:53:53,915 --> 15:53:58,399
one before that we tagged that step
18176
15:53:55,680 --> 15:54:00,160
seven and that was chapter number 22
18177
15:53:58,400 --> 15:54:01,520
where we talked about error handling in
18178
15:54:00,160 --> 15:54:03,756
the registry and going to the next
18179
15:54:01,519 --> 15:54:05,199
screen after registration so we didn't
18180
15:54:03,756 --> 15:54:08,080
tag anything in the previous chapter so
18181
15:54:05,199 --> 15:54:11,435
now we're going to tag things as step 8
18182
15:54:08,080 --> 15:54:13,756
so let's just say git tag step 8
18183
15:54:16,796 --> 15:54:21,436
if you can say git log you will see get
18184
15:54:18,796 --> 15:54:23,040
step 8 is there step 7 every step is
18185
15:54:21,436 --> 15:54:25,275
there an initial commit is there as well
18186
15:54:23,040 --> 15:54:27,680
which is step one and if you say git tag
18187
15:54:25,275 --> 15:54:29,839
you'll see all your tags available as
18188
15:54:29,839 --> 15:54:33,839
we've committed and tagged we've done a
18189
15:54:32,080 --> 15:54:35,680
lot of work in this chapter and i don't
18190
15:54:33,839 --> 15:54:37,679
think we need to actually drag it on for
18191
15:54:35,680 --> 15:54:40,160
longer because yeah it will be
18192
15:54:37,680 --> 15:54:41,275
unbearable maybe if it's too long
18193
15:54:41,275 --> 15:54:45,199
as we usually do which is the tradition
18194
15:54:43,275 --> 15:54:47,756
here before going to the next chapter we
18195
15:54:45,199 --> 15:54:48,795
prepare ourselves for what is coming as
18196
15:54:47,756 --> 15:54:51,275
you can see in the caches that we need
18197
15:54:48,796 --> 15:54:54,080
to migrate our existing code to using
18198
15:54:51,275 --> 15:54:55,519
our own auth service we have an auth
18199
15:54:55,519 --> 15:55:00,319
which abstracts away the provider and we
18200
15:54:58,080 --> 15:55:03,116
have a firebase auth provider but we
18201
15:55:00,319 --> 15:55:04,796
still are not using that code so that's
18202
15:55:03,116 --> 15:55:07,276
exactly what we're going to do in the
18203
15:55:04,796 --> 15:55:10,160
next chapter and if i look a little bit
18204
15:55:07,275 --> 15:55:12,720
in my in my notes i can actually see the
18205
15:55:10,160 --> 15:55:15,276
next chapter will also be quite a long
18206
15:55:12,720 --> 15:55:17,595
one maybe not as long as this chapter so
18207
15:55:15,275 --> 15:55:18,559
maybe you'll need a cup of coffee or tea
18208
15:55:18,559 --> 15:55:22,639
let's do that and without further ado
18209
15:55:20,480 --> 15:55:24,956
i'll see you in the next chapter
18210
15:55:22,639 --> 15:55:26,479
hello everyone and welcome to chapter 25
18211
15:55:26,480 --> 15:55:30,000
in the previous chapter we talked about
18212
15:55:28,400 --> 15:55:32,880
earth service and that was quite a big
18213
15:55:30,000 --> 15:55:35,275
chapter we talked about cleaning up
18214
15:55:32,879 --> 15:55:37,275
making sure that our authentication
18215
15:55:37,275 --> 15:55:42,559
one central place we created the auth
18216
15:55:40,080 --> 15:55:43,756
provider the firebase auth provider then
18217
15:55:49,199 --> 15:55:54,879
both the service and the provider are
18218
15:55:51,915 --> 15:55:58,719
conforming to the interface provided by
18219
15:55:54,879 --> 15:56:01,755
our abstract class for authentication
18220
15:55:58,720 --> 15:56:03,680
so um we call those the off service and
18221
15:56:01,756 --> 15:56:07,595
the firebase auth provider and then our
18222
15:56:03,680 --> 15:56:09,360
abstract class was called auth provider
18223
15:56:07,595 --> 15:56:11,915
now we've done all that work but we
18224
15:56:09,360 --> 15:56:14,160
haven't really even started using that
18225
15:56:11,915 --> 15:56:18,000
auth service and that's what we're going
18226
15:56:19,595 --> 15:56:22,559
the first thing that we have to do is
18227
15:56:22,559 --> 15:56:26,399
making sure that we have easy access to
18228
15:56:26,400 --> 15:56:30,880
um you see the way we created the auth
18229
15:56:30,879 --> 15:56:35,040
bring the code here so we can all see
18230
15:56:35,839 --> 15:56:42,000
change visual studio codes um
18231
15:56:42,000 --> 15:56:46,639
let's then have a look at our um let me
18232
15:56:44,955 --> 15:56:49,756
see if i can resize this a little bit as
18233
15:56:46,639 --> 15:56:52,000
well okay let's have a look here at our
18234
15:56:49,756 --> 15:56:53,840
auth service you see that with the way
18235
15:56:52,000 --> 15:56:56,239
that we created our off service is that
18236
15:56:53,839 --> 15:56:58,719
it in its initializer or constructor
18237
15:56:56,239 --> 15:57:01,756
however you want to call it um it is
18238
15:56:58,720 --> 15:57:04,559
taking a provider so for us to be able
18239
15:57:01,756 --> 15:57:06,080
to use our auth service every time you
18240
15:57:04,559 --> 15:57:08,239
want to use our auth service we actually
18241
15:57:06,080 --> 15:57:09,596
have to provide it with an auth provider
18242
15:57:08,239 --> 15:57:12,319
which in our case is going to be the
18243
15:57:09,595 --> 15:57:13,680
firebase auth provider which it resides
18244
15:57:13,680 --> 15:57:17,116
so this could be cumbersome especially
18245
15:57:15,756 --> 15:57:18,880
if you're working with firebase quite a
18246
15:57:17,116 --> 15:57:21,680
lot in your user interface every time
18247
15:57:18,879 --> 15:57:24,079
you want to use it then you need to say
18248
15:57:21,680 --> 15:57:25,680
auth service initialize the auth service
18249
15:57:24,080 --> 15:57:28,480
and then initialize your firebase auth
18250
15:57:25,680 --> 15:57:30,239
provider and give that to your
18251
15:57:30,239 --> 15:57:35,436
we don't want to do that every time
18252
15:57:33,680 --> 15:57:38,160
and that is exactly why we need to
18253
15:57:40,239 --> 15:57:44,319
initializer as you can see here in the
18254
15:57:45,199 --> 15:57:49,755
the captions so uh it says add firebase
18255
15:57:47,915 --> 15:57:52,239
factory to officers and that's exactly
18256
15:57:52,239 --> 15:57:56,955
so let's go to our auth service and as
18257
15:57:55,199 --> 15:57:57,680
the code is provided for you just write
18258
15:57:57,680 --> 15:58:01,116
factory and i'm going to say auth
18259
15:58:01,116 --> 15:58:07,680
in firebase so the responsibility of
18260
15:58:04,400 --> 15:58:09,360
this off service firebase factory here
18261
15:58:07,680 --> 15:58:12,239
or sorry the the responsibility of the
18262
15:58:13,595 --> 15:58:17,915
on our off service is to return an
18263
15:58:16,160 --> 15:58:21,200
instance of our auth service that is
18264
15:58:17,915 --> 15:58:23,115
already configured with a firebase auth
18265
15:58:23,116 --> 15:58:27,596
then we're going to say it returns an
18266
15:58:27,595 --> 15:58:32,159
change the layout of the code here the
18267
15:58:29,839 --> 15:58:34,479
screen as well so you can see it better
18268
15:58:32,160 --> 15:58:35,596
and we're going to say firebase
18269
15:58:38,796 --> 15:58:44,400
so that's that um now you see i have a
18270
15:58:42,879 --> 15:58:45,680
column here in visual studio code that
18271
15:58:44,400 --> 15:58:48,560
tells me where the code is going to
18272
15:58:45,680 --> 15:58:51,116
break some people even for one parameter
18273
15:58:48,559 --> 15:58:53,435
in their uh dart code or flutter code
18274
15:58:51,116 --> 15:58:55,596
they prefer to have a comma at the end
18275
15:58:53,436 --> 15:58:57,360
of it so that it is ready to take new
18276
15:58:55,595 --> 15:58:59,040
parameters in the future so if you do
18277
15:58:59,040 --> 15:59:02,796
dart format is going to break that code
18278
15:59:00,639 --> 15:59:04,479
for you into multiple lines ready for
18279
15:59:02,796 --> 15:59:06,319
you to enter the next parameter if
18280
15:59:04,480 --> 15:59:07,840
that's your preference go for it but i
18281
15:59:06,319 --> 15:59:09,756
have no preference here i just leave it
18282
15:59:07,839 --> 15:59:13,115
like that when i have one parameter i
18283
15:59:09,756 --> 15:59:14,239
just leave it in one line okay
18284
15:59:14,239 --> 15:59:20,559
before we actually go about uh starting
18285
15:59:18,000 --> 15:59:22,955
to use our auth service we need to take
18286
15:59:20,559 --> 15:59:25,275
a little trip back to the main dart file
18287
15:59:22,955 --> 15:59:27,275
as the caption indicates here so you
18288
15:59:25,275 --> 15:59:29,436
either go to the explorer but the way i
18289
15:59:27,275 --> 15:59:32,079
usually like to do it is with command p
18290
15:59:29,436 --> 15:59:34,080
and i say main dart and then i go there
18291
15:59:32,080 --> 15:59:36,319
remember if you are linux or windows
18292
15:59:34,080 --> 15:59:38,560
then you have to do control p okay so
18293
15:59:36,319 --> 15:59:40,720
let's have a look at our main dar file
18294
15:59:38,559 --> 15:59:43,839
and let's see if i can close these
18295
15:59:40,720 --> 15:59:46,400
places firebase off firebase provider
18296
15:59:46,400 --> 15:59:49,680
what did we change there save that as
18297
15:59:48,080 --> 15:59:51,840
well let's go back to the main now so
18298
15:59:49,680 --> 15:59:53,519
basically i just closed all the files
18299
15:59:51,839 --> 15:59:55,839
uh because i just want to have them in
18300
15:59:53,519 --> 15:59:59,275
our files so as the caption is
18301
15:59:55,839 --> 16:00:02,159
is telling you here um our menu action
18302
15:59:59,275 --> 16:00:03,756
and the notes view are right now spread
18303
16:00:02,160 --> 16:00:07,116
just around in the main dart file and
18304
16:00:03,756 --> 16:00:08,880
this is usually not a good idea because
18305
16:00:07,116 --> 16:00:10,160
you need to as part of your journey into
18306
16:00:08,879 --> 16:00:12,479
becoming a software developer you need
18307
16:00:10,160 --> 16:00:15,360
to make sure that your code is clean and
18308
16:00:12,480 --> 16:00:17,116
it's easy for other people to read now
18309
16:00:15,360 --> 16:00:20,400
i'm not saying i mean i'm not a true
18310
16:00:17,116 --> 16:00:22,160
true believer that the code has to be so
18311
16:00:20,400 --> 16:00:23,680
easy to understand that even if you grab
18312
16:00:22,160 --> 16:00:25,200
a random person from the street they
18313
16:00:23,680 --> 16:00:27,680
have to understand the code because
18314
16:00:25,199 --> 16:00:29,360
sometimes you need to make sure that
18315
16:00:27,680 --> 16:00:32,239
the person looking at your code has a
18316
16:00:29,360 --> 16:00:34,319
certain level of knowledge from before
18317
16:00:32,239 --> 16:00:35,680
but with all that said you need to make
18318
16:00:34,319 --> 16:00:38,000
sure that your code is easy to
18319
16:00:38,000 --> 16:00:42,639
let's make sure that the menu action and
18320
16:00:40,000 --> 16:00:45,275
notes view are refactored and that
18321
16:00:42,639 --> 16:00:48,559
they're in the right place and not just
18322
16:00:45,275 --> 16:00:50,479
spread around in main dart file
18323
16:00:48,559 --> 16:00:52,795
so as a caption indicates we're going to
18324
16:00:52,796 --> 16:00:58,080
a new new folder called enums inside lib
18325
16:00:56,319 --> 16:01:00,720
and the file name is going to be menu
18326
16:01:00,720 --> 16:01:04,639
the caption was a little bit wrong it
18327
16:01:02,480 --> 16:01:07,360
shouldn't be dark 10 it should be dart
18328
16:01:04,639 --> 16:01:10,720
so i'm going to save the caption and
18329
16:01:07,360 --> 16:01:13,199
bring it back up so it's with the right
18330
16:01:13,199 --> 16:01:19,039
so let's go and create that file i'm
18331
16:01:16,239 --> 16:01:21,199
gonna go here into lib i'm gonna right
18332
16:01:19,040 --> 16:01:22,639
click on lib and i'm gonna say new file
18333
16:01:21,199 --> 16:01:24,719
and in the new file i'm just going to
18334
16:01:25,680 --> 16:01:31,319
bring it up as well so you see it better
18335
16:01:28,480 --> 16:01:33,756
or you see it at all enums and then menu
18336
16:01:35,275 --> 16:01:39,915
let's just go and grab that menu action
18337
16:01:37,199 --> 16:01:42,399
from there and paste it inside this menu
18338
16:01:39,915 --> 16:01:44,239
action and save that file okay don't
18339
16:01:42,400 --> 16:01:45,680
worry main.dart at the moment has a
18340
16:01:44,239 --> 16:01:47,436
problem because menu action doesn't
18341
16:01:45,680 --> 16:01:48,879
exist here anymore so we're getting some
18342
16:01:47,436 --> 16:01:50,639
errors and that's okay we're gonna fix
18343
16:01:54,319 --> 16:01:59,360
to the main dark file again and we have
18344
16:01:57,199 --> 16:02:00,479
to clean up this notes view and as the
18345
16:01:59,360 --> 16:02:01,756
caption in the case we're going to move
18346
16:02:01,756 --> 16:02:06,639
lib views notes view okay we already
18347
16:02:04,879 --> 16:02:08,719
have the views folder remember from
18348
16:02:06,639 --> 16:02:11,040
before all we're going to do is just to
18349
16:02:08,720 --> 16:02:12,480
move this notes view into its own file
18350
16:02:11,040 --> 16:02:14,239
so i'm going to right right click on
18351
16:02:18,796 --> 16:02:24,400
okay let's go to main guard grab the
18352
16:02:21,360 --> 16:02:26,559
notes view and it's state so from there
18353
16:02:24,400 --> 16:02:28,000
notes view stateful widget and i'm gonna
18354
16:02:31,436 --> 16:02:37,596
take the show log out dialog with it
18355
16:02:37,595 --> 16:02:42,639
to note2 and paste that there okay so
18356
16:02:40,080 --> 16:02:44,880
now we have a lot of problems because uh
18357
16:02:42,639 --> 16:02:48,159
in an empty dart file as i've mentioned
18358
16:02:44,879 --> 16:02:49,915
before there's no material import so i'm
18359
16:02:48,160 --> 16:02:52,640
going to do the material import now so
18360
16:02:49,915 --> 16:02:54,239
command dot and say import library
18361
16:02:52,639 --> 16:02:56,239
package flower material and that is
18362
16:02:58,160 --> 16:03:02,480
now this file doesn't have it hasn't
18363
16:03:02,480 --> 16:03:06,956
uh menu action so let's fix that as well
18364
16:03:04,796 --> 16:03:08,400
with visual studio command dot and get
18365
16:03:06,955 --> 16:03:11,436
help from visual studio code to
18366
16:03:08,400 --> 16:03:14,560
automatically import our menu action
18367
16:03:14,559 --> 16:03:21,519
so that is also fixed and also remember
18368
16:03:17,680 --> 16:03:23,680
now in notes view also right now is
18369
16:03:21,519 --> 16:03:25,359
using firebase off and we're going to
18370
16:03:23,680 --> 16:03:28,160
fix somebody into this chapter so that
18371
16:03:25,360 --> 16:03:29,520
note2 isn't or any of our views none of
18372
16:03:28,160 --> 16:03:31,276
them are going to talk directly with
18373
16:03:29,519 --> 16:03:32,795
firebase so that's going to be fixed by
18374
16:03:32,796 --> 16:03:36,956
but for now let's go ahead and clean
18375
16:03:34,720 --> 16:03:39,360
this up and make sure that firebase auth
18376
16:03:36,955 --> 16:03:43,116
is imported and also remember login
18377
16:03:39,360 --> 16:03:45,680
route was used here when we log out of
18378
16:03:43,116 --> 16:03:48,720
the main interface of the application so
18379
16:03:45,680 --> 16:03:51,116
when we log out then it sends us back to
18380
16:03:48,720 --> 16:03:53,040
the login route and that is defined in
18381
16:03:53,040 --> 16:03:58,559
dart file here so let's import that too
18382
16:03:58,639 --> 16:04:02,639
all right so that was a lot of work
18383
16:04:00,559 --> 16:04:04,559
we've we've done that now so we're done
18384
16:04:02,639 --> 16:04:06,955
so i'm going to save this notes view dot
18385
16:04:08,160 --> 16:04:12,160
now as the the case we need to go back
18386
16:04:09,915 --> 16:04:14,239
to the main dart and remedy this issue
18387
16:04:12,160 --> 16:04:16,400
which we have and we need to import
18388
16:04:14,239 --> 16:04:18,720
notes view uh get help from visual
18389
16:04:16,400 --> 16:04:20,880
studio code or your favorite editor or
18390
16:04:18,720 --> 16:04:22,639
if you don't have this functionality in
18391
16:04:20,879 --> 16:04:24,319
your editor if you're using vim or
18392
16:04:22,639 --> 16:04:25,839
something you may just need to import
18393
16:04:24,319 --> 16:04:28,720
that by hand and the import is just the
18394
16:04:25,839 --> 16:04:31,435
package name of your application views
18395
16:04:28,720 --> 16:04:33,116
notes view okay so i'm gonna
18396
16:04:31,436 --> 16:04:34,160
get help from visual studio code to do
18397
16:04:39,680 --> 16:04:43,199
now let's have a look at something that
18398
16:04:41,275 --> 16:04:44,400
we actually forgot in the previous
18399
16:04:44,400 --> 16:04:49,040
um you see we've done everything in our
18400
16:04:46,879 --> 16:04:51,275
off service if you have a look at our
18401
16:04:49,040 --> 16:04:53,040
auth service it has almost all the
18402
16:04:51,275 --> 16:04:55,360
functionalities that we need it has
18403
16:04:53,040 --> 16:04:58,080
create view sorry create user it has
18404
16:04:55,360 --> 16:04:59,915
current user it has login log out and
18405
16:04:58,080 --> 16:05:02,319
send email verification but there's one
18406
16:04:59,915 --> 16:05:04,955
detail that we forgot about let's go to
18407
16:05:02,319 --> 16:05:08,955
main dart and have a look at it
18408
16:05:04,955 --> 16:05:09,839
you can see in here our entire main dart
18409
16:05:09,839 --> 16:05:15,435
like the home page build function is
18410
16:05:12,319 --> 16:05:17,275
built around a future builder that i i
18411
16:05:15,436 --> 16:05:19,436
know i'm saying build quite a lot maybe
18412
16:05:17,275 --> 16:05:21,839
i should say it's revol it's revolving
18413
16:05:19,436 --> 16:05:24,480
around a future builder which in turn
18414
16:05:21,839 --> 16:05:26,879
initializes firebase you see it calls
18415
16:05:24,480 --> 16:05:29,520
firebase initialize app and now that we
18416
16:05:26,879 --> 16:05:30,719
want to move away from our user
18417
16:05:30,720 --> 16:05:35,116
interacting directly with firebase we
18418
16:05:35,116 --> 16:05:40,720
this user interface it shouldn't go to
18419
16:05:37,915 --> 16:05:42,795
firebase directly it should ideally go
18420
16:05:44,160 --> 16:05:47,360
and that's what the caption says
18421
16:05:51,040 --> 16:05:56,480
auth provider abstract class so let's
18422
16:05:55,040 --> 16:05:58,000
close all these files make sure
18423
16:06:00,559 --> 16:06:03,435
and make sure that we have a function
18424
16:06:03,436 --> 16:06:10,480
and let me actually bring up my notes
18425
16:06:10,480 --> 16:06:14,560
we're going to say future void
18426
16:06:14,559 --> 16:06:17,595
remember now that we've added this
18427
16:06:16,160 --> 16:06:19,756
function to our auth provider we're
18428
16:06:17,595 --> 16:06:22,079
going to have problems because both the
18429
16:06:19,756 --> 16:06:24,720
firebase auth provider and auth service
18430
16:06:22,080 --> 16:06:26,880
they're they're conforming currently to
18431
16:06:24,720 --> 16:06:28,880
the author provider abstract class and
18432
16:06:26,879 --> 16:06:30,795
adding a new function to this abstract
18433
16:06:28,879 --> 16:06:33,435
class means that we're gonna get two
18434
16:06:30,796 --> 16:06:35,276
errors indicating that this function
18435
16:06:33,436 --> 16:06:37,596
isn't implemented in firebase auth
18436
16:06:35,275 --> 16:06:39,519
provider and in our auth service so we
18437
16:06:37,595 --> 16:06:44,079
need to fix those problems you can see
18438
16:06:39,519 --> 16:06:47,275
they're actually highlighted as red here
18439
16:06:47,839 --> 16:06:51,839
let's go then to the next caption
18440
16:06:52,160 --> 16:06:57,040
and i'm gonna get rid of that bottom
18441
16:06:54,400 --> 16:06:58,720
view so it doesn't bother us so let's go
18442
16:06:57,040 --> 16:07:00,955
now as you can see in the firebase auth
18443
16:06:58,720 --> 16:07:04,000
provider and overwrite initialize and
18444
16:07:00,955 --> 16:07:05,275
make it async and call initialize app on
18445
16:07:05,275 --> 16:07:10,159
so to in order to do the firebase
18446
16:07:08,400 --> 16:07:11,916
initialize code we need to have a look
18447
16:07:10,160 --> 16:07:13,360
at our main dart and see how that is
18448
16:07:11,915 --> 16:07:15,680
done at the moment you can see it is
18449
16:07:13,360 --> 16:07:17,595
called firebase initialize app so i'm
18450
16:07:15,680 --> 16:07:19,275
gonna grab that code and i suggest that
18451
16:07:17,595 --> 16:07:22,159
you do the same thing i'm just gonna
18452
16:07:19,275 --> 16:07:25,199
copy that code for initialize app
18453
16:07:22,160 --> 16:07:27,116
and let's then go to our firebase auth
18454
16:07:27,116 --> 16:07:30,639
and get help from visual studio code or
18455
16:07:29,040 --> 16:07:32,559
android studio in order to complete that
18456
16:07:30,639 --> 16:07:33,595
one missing override for initialize
18457
16:07:33,595 --> 16:07:37,839
and i believe it gets added here
18458
16:07:41,360 --> 16:07:46,879
we should have an initialize a missing
18459
16:07:46,955 --> 16:07:54,116
create one missing override initialize i
18460
16:07:55,915 --> 16:08:01,275
i'm gonna do that here myself future
18461
16:07:57,595 --> 16:08:03,595
void initialize like this okay
18462
16:08:01,275 --> 16:08:05,519
and uh what we're gonna do as the name
18463
16:08:03,595 --> 16:08:07,519
indicates it's gonna be an async
18464
16:08:05,519 --> 16:08:11,680
function here and what we need to do is
18465
16:08:07,519 --> 16:08:12,559
just to save firebase initialize app so
18466
16:08:12,559 --> 16:08:15,756
and we're gonna await on this so like
18467
16:08:15,756 --> 16:08:21,116
and remember we have we need to have two
18468
16:08:18,160 --> 16:08:22,796
imports here and one is for the firebase
18469
16:08:21,116 --> 16:08:24,880
and the other one is default firebase
18470
16:08:22,796 --> 16:08:26,956
options so let's get help from visual
18471
16:08:24,879 --> 16:08:27,839
studio code to import those firebase
18472
16:08:29,680 --> 16:08:34,400
firebase options dark file which if you
18473
16:08:32,639 --> 16:08:36,479
remember when we set up firebase
18474
16:08:36,480 --> 16:08:40,880
application from the firebase cli so
18475
16:08:39,199 --> 16:08:42,955
is is not a file that we've created
18476
16:08:40,879 --> 16:08:46,399
ourselves except it's the firebase cli
18477
16:08:42,955 --> 16:08:46,400
that created this for us okay
18478
16:08:46,559 --> 16:08:50,479
here now it says annotate over members
18479
16:08:49,040 --> 16:08:51,840
and that's exactly what we need to do so
18480
16:08:53,116 --> 16:08:58,796
right like this and now we have
18481
16:08:55,275 --> 16:09:01,115
initialize uh over member of our author
18482
16:08:58,796 --> 16:09:01,916
provider inside firebase author provider
18483
16:09:01,915 --> 16:09:05,755
basically all we're saying is firebase
18484
16:09:03,839 --> 16:09:07,435
auth provider implements initialize
18485
16:09:10,400 --> 16:09:14,796
all right we have one error left and
18486
16:09:12,239 --> 16:09:17,115
that is inside auth service so let's go
18487
16:09:17,116 --> 16:09:20,400
and we'll have the exact same problem
18488
16:09:19,040 --> 16:09:23,275
here and says missing concrete
18489
16:09:20,400 --> 16:09:25,360
implementation so i'm gonna see if i can
18490
16:09:23,275 --> 16:09:27,756
get visual studio code to add that
18491
16:09:25,360 --> 16:09:29,360
implementation and it added it here
18492
16:09:29,360 --> 16:09:34,955
so in here what we have to do is just to
18493
16:09:32,796 --> 16:09:38,720
delegate this function to the actual
18494
16:09:34,955 --> 16:09:40,795
provider so we're going to say provider
18495
16:09:38,720 --> 16:09:43,436
and we're going to say initialize just
18496
16:09:40,796 --> 16:09:44,160
like that all right so this was the easy
18497
16:09:44,160 --> 16:09:47,436
and if you don't remember from the
18498
16:09:45,839 --> 16:09:48,955
previous chapter or maybe you jumped
18499
16:09:47,436 --> 16:09:50,480
over the previous chapter i don't know
18500
16:09:48,955 --> 16:09:52,239
how you ended up in this chapter if you
18501
16:09:50,480 --> 16:09:54,160
haven't watched the previous chapter i
18502
16:09:52,239 --> 16:09:56,639
strongly suggest that you do that there
18503
16:09:54,160 --> 16:09:58,480
is a reason we have our off service that
18504
16:09:58,480 --> 16:10:03,840
and the reason behind that is that
18505
16:10:00,080 --> 16:10:05,756
usually services have more logic in them
18506
16:10:05,756 --> 16:10:09,756
bring into themselves so if a service
18507
16:10:07,839 --> 16:10:12,079
has two other services connected to
18508
16:10:09,756 --> 16:10:13,840
itself then it may actually take bits
18509
16:10:12,080 --> 16:10:16,160
and pieces from the service and other
18510
16:10:13,839 --> 16:10:18,399
bits and pieces from another service and
18511
16:10:16,160 --> 16:10:20,400
fuse them together with some extra logic
18512
16:10:18,400 --> 16:10:23,200
and that is exactly why the author
18513
16:10:20,400 --> 16:10:25,756
services as an odd provider so the goal
18514
16:10:23,199 --> 16:10:27,915
for us is to allow the officers to do
18515
16:10:25,756 --> 16:10:29,840
more work than an author provider even
18516
16:10:27,915 --> 16:10:32,159
though right now only thing it does is
18517
16:10:29,839 --> 16:10:34,239
just delegates all its functionality to
18518
16:10:32,160 --> 16:10:36,880
the auth provider and remember you could
18519
16:10:34,239 --> 16:10:38,879
also see make sure that i mean if you
18520
16:10:36,879 --> 16:10:41,519
don't like this implementation you can
18521
16:10:38,879 --> 16:10:44,719
for instance remove this and then
18522
16:10:41,519 --> 16:10:46,479
basically remove all these functions and
18523
16:10:44,720 --> 16:10:48,480
by doing that you're just saying that an
18524
16:10:46,480 --> 16:10:50,000
auth service includes an off provider
18525
16:10:48,480 --> 16:10:53,436
and that's all you're doing or you could
18526
16:10:50,000 --> 16:10:55,436
completely kill you your off service so
18527
16:10:53,436 --> 16:10:57,840
it's up to you but if you're following
18528
16:10:55,436 --> 16:10:59,200
along with this uh with this course i
18529
16:10:57,839 --> 16:11:01,115
suggest that you keep it the way it is
18530
16:10:59,199 --> 16:11:03,275
because there's a there's a point to it
18531
16:11:04,796 --> 16:11:09,680
now that we've done that uh it's time to
18532
16:11:07,839 --> 16:11:12,479
do some cleanup and this is this is a
18533
16:11:09,680 --> 16:11:14,796
very exciting part of this uh
18534
16:11:12,480 --> 16:11:17,360
chapter because we now have our auth
18535
16:11:14,796 --> 16:11:20,080
service and our firebase auth provider
18536
16:11:17,360 --> 16:11:22,559
and in and additionally we have an off
18537
16:11:20,080 --> 16:11:24,480
service firebase factory which allows us
18538
16:11:22,559 --> 16:11:26,879
to anywhere inside our code we could
18539
16:11:26,879 --> 16:11:32,955
and in that way we get access to
18540
16:11:29,680 --> 16:11:35,275
our um firebase auth provider inside the
18541
16:11:32,955 --> 16:11:37,519
auth services so it's it's really
18542
16:11:35,275 --> 16:11:39,839
magical you're gonna see it soon
18543
16:11:37,519 --> 16:11:41,915
so i'm going to close all files here
18544
16:11:39,839 --> 16:11:43,595
ensure everything is saved then as the
18545
16:11:41,915 --> 16:11:46,955
caption indicates i'm going to go into
18546
16:11:49,595 --> 16:11:53,519
and as you can see it says remove
18547
16:11:51,680 --> 16:11:56,239
everything related to firebase and
18548
16:11:53,519 --> 16:11:59,435
replace with auth service by importing
18549
16:11:56,239 --> 16:12:01,519
auth service okay so one way of doing
18550
16:11:59,436 --> 16:12:03,596
that is just to ensure that you go and
18551
16:12:01,519 --> 16:12:06,000
kill it from the source so you can see
18552
16:12:03,595 --> 16:12:08,079
here we have two firebase imports and if
18553
16:12:06,000 --> 16:12:08,955
you remove these two firebase imports
18554
16:12:08,955 --> 16:12:13,519
my preferred way of usually working with
18555
16:12:10,796 --> 16:12:15,596
software is that i try to like remove
18556
16:12:13,519 --> 16:12:17,755
something from its source so now that
18557
16:12:15,595 --> 16:12:19,839
i've removed those then visual studio is
18558
16:12:17,756 --> 16:12:22,000
telling me that hey you're using
18559
16:12:19,839 --> 16:12:23,275
firebase in two places you need to fix
18560
16:12:22,000 --> 16:12:24,955
this because you don't have the imports
18561
16:12:24,955 --> 16:12:28,879
here are the two places that i have to
18562
16:12:29,595 --> 16:12:32,955
as you can see here it says firebase
18563
16:12:31,116 --> 16:12:34,480
initialize app and we need to make sure
18564
16:12:32,955 --> 16:12:36,479
that we're not doing that anymore so
18565
16:12:36,480 --> 16:12:43,680
in this case our future remember is um
18566
16:12:40,639 --> 16:12:45,436
it's auth service and since i haven't
18567
16:12:43,680 --> 16:12:47,519
imported that yet visual studio is
18568
16:12:45,436 --> 16:12:49,040
offering to auto import it so i'm gonna
18569
16:12:49,040 --> 16:12:52,879
um it's auto imported now but if you
18570
16:12:51,360 --> 16:12:55,275
don't wanna if you're you're working
18571
16:12:52,879 --> 16:12:57,755
with vim or some other a text editor
18572
16:12:55,275 --> 16:12:58,955
that doesn't have that capability you
18573
16:13:03,116 --> 16:13:07,756
per package the name of your package
18574
16:13:04,955 --> 16:13:09,519
services off auth service dart
18575
16:13:07,756 --> 16:13:11,436
and i just noticed that this is another
18576
16:13:09,519 --> 16:13:12,795
firebase import which i'm going to
18577
16:13:14,955 --> 16:13:19,116
so auth service now we want to tell
18578
16:13:17,595 --> 16:13:22,559
because we're using firebase we're going
18579
16:13:19,116 --> 16:13:24,319
to say auth service dot firebase and in
18580
16:13:22,559 --> 16:13:27,360
here we're just going to say initialize
18581
16:13:24,319 --> 16:13:29,756
okay so that fits in perfectly
18582
16:13:29,756 --> 16:13:35,040
you can see we're using firebase um
18583
16:13:32,955 --> 16:13:36,720
instance firebase auth instance current
18584
16:13:35,040 --> 16:13:40,559
user in this case we're just going to
18585
16:13:40,559 --> 16:13:46,399
dot our base man current user just like
18586
16:13:43,436 --> 16:13:48,560
that okay and now remember odd i talked
18587
16:13:46,400 --> 16:13:50,720
about this in previous chapters but
18588
16:13:48,559 --> 16:13:53,040
i prefer to have boolean flags prefix
18589
16:13:53,040 --> 16:13:56,559
whenever that makes sense and in this
18590
16:13:54,955 --> 16:13:58,955
case you can see firebase implementation
18591
16:13:56,559 --> 16:14:00,399
had email verified but we have is email
18592
16:13:58,955 --> 16:14:02,239
verified so i'm going to say is email
18593
16:14:03,519 --> 16:14:09,199
and s or control x and linux and windows
18594
16:14:06,080 --> 16:14:10,160
a command is on on mac to save this file
18595
16:14:10,160 --> 16:14:14,480
it looks fine right now but we're not
18596
16:14:14,480 --> 16:14:21,520
we also have problems in our login view
18597
16:14:18,480 --> 16:14:23,756
i mean problems not errors or warnings
18598
16:14:21,519 --> 16:14:26,079
but problems in that we're using
18599
16:14:23,756 --> 16:14:29,595
firebase directly and we're going to the
18600
16:14:26,080 --> 16:14:31,116
firebase auth directly in our login view
18601
16:14:29,595 --> 16:14:32,479
and we need to fix as you can see the
18602
16:14:31,116 --> 16:14:35,276
caption system login view remove
18603
16:14:32,480 --> 16:14:37,596
firebase and replace with off service
18604
16:14:37,595 --> 16:14:44,639
so let's go to uh to the source and
18605
16:14:40,879 --> 16:14:46,399
remove firebase completely from
18606
16:14:46,400 --> 16:14:51,916
command s and now you'll see we have a
18607
16:14:48,319 --> 16:14:55,116
lot of problems here and one two three
18608
16:14:51,915 --> 16:14:57,680
yep that was it so three three places
18609
16:14:57,680 --> 16:15:02,796
so let's go ahead and fix those places
18610
16:15:02,796 --> 16:15:06,956
there's a lot to handle here so we start
18611
16:15:05,360 --> 16:15:08,879
by this one at the moment we're saying
18612
16:15:06,955 --> 16:15:10,159
firebase off instant sign in with email
18613
16:15:10,160 --> 16:15:14,720
and what we need to do is just to uh
18614
16:15:14,720 --> 16:15:20,239
so we're gonna say auth service and
18615
16:15:20,239 --> 16:15:26,079
and auth service has firebase auth
18616
16:15:22,720 --> 16:15:29,116
provider and we're then gonna say assign
18617
16:15:26,080 --> 16:15:31,116
in or do we say login yeah email
18618
16:15:29,116 --> 16:15:33,520
password okay so i'm gonna i'm gonna
18619
16:15:31,116 --> 16:15:36,880
take this code the way it is
18620
16:15:33,519 --> 16:15:38,079
and i'm not paste then them in
18621
16:15:38,080 --> 16:15:42,796
so now we're saying auth service
18622
16:15:43,519 --> 16:15:47,519
then we're seeing here that we're
18623
16:15:45,275 --> 16:15:49,436
getting the current user and the right
18624
16:15:47,519 --> 16:15:51,595
way now to get the current user is by
18625
16:15:54,239 --> 16:15:58,955
and email verified should be ms email
18626
16:15:56,639 --> 16:16:02,000
verified okay so now we fix those
18627
16:15:58,955 --> 16:16:04,795
problems in this area by going to all
18628
16:16:02,000 --> 16:16:07,436
the search instead of going directly to
18629
16:16:07,595 --> 16:16:13,115
okay that was that now we need to start
18630
16:16:10,720 --> 16:16:15,360
looking a little bit at our error
18631
16:16:15,360 --> 16:16:20,160
you can see here we have on firebase off
18632
16:16:20,160 --> 16:16:25,360
so we need to fix these with various um
18633
16:16:25,360 --> 16:16:29,595
exception handlings not firebase auth
18634
16:16:29,595 --> 16:16:36,319
but now remember we have our own
18635
16:16:32,000 --> 16:16:37,116
exceptions in auth exception start
18636
16:16:38,639 --> 16:16:42,559
all coming from exception but what we're
18637
16:16:40,879 --> 16:16:43,519
going to do is we're going to have like
18638
16:16:43,519 --> 16:16:48,719
blah blah for various of those
18639
16:16:45,839 --> 16:16:51,039
exceptions as you'll see soon so um i'm
18640
16:16:48,720 --> 16:16:54,480
gonna what i'm gonna do is i'm gonna
18641
16:16:51,040 --> 16:16:56,000
take this code and keep it the way it is
18642
16:16:56,000 --> 16:17:00,400
and i'm going to add new on statement so
18643
16:17:00,400 --> 16:17:04,639
let's take care of user not found so i'm
18644
16:17:02,239 --> 16:17:06,479
going to say on user not found exception
18645
16:17:04,639 --> 16:17:08,000
and you can see that it says user not
18646
16:17:06,480 --> 16:17:09,596
found exception is an exception that we
18647
16:17:08,000 --> 16:17:11,680
created manually but it's not imported
18648
16:17:09,595 --> 16:17:13,680
here because it was inside the auth
18649
16:17:11,680 --> 16:17:15,360
exceptions dart file so i'm going to say
18650
16:17:13,680 --> 16:17:17,756
visual studio code please complete that
18651
16:17:15,360 --> 16:17:21,915
and also import it for me okay
18652
16:17:17,756 --> 16:17:24,880
so say in this case then we have to do
18653
16:17:21,915 --> 16:17:28,000
show error dialog so grab that code and
18654
16:17:31,199 --> 16:17:36,239
what else do we have wrong password
18655
16:17:33,915 --> 16:17:40,000
because it's this thing i'm going to say
18656
16:17:36,239 --> 16:17:43,275
on wrong password of exception
18657
16:17:40,000 --> 16:17:45,199
and go in here and grab then your show
18658
16:17:49,116 --> 16:17:55,040
and then we also need to have the on
18659
16:17:51,915 --> 16:17:56,795
generic auth exception so on generic
18660
16:17:56,796 --> 16:18:02,480
and we do this show error i like
18661
16:18:02,480 --> 16:18:06,400
so then we go and bring that here and
18662
16:18:04,400 --> 16:18:08,160
you can see on generic error off
18663
16:18:06,400 --> 16:18:10,160
exception we don't have any specific
18664
16:18:08,160 --> 16:18:12,400
like information like any e or anything
18665
16:18:10,160 --> 16:18:13,756
to string so all we're gonna do in here
18666
16:18:12,400 --> 16:18:15,756
we'll just say we're gonna say
18667
16:18:15,756 --> 16:18:19,840
okay and then you need to go and remove
18668
16:18:19,839 --> 16:18:25,115
catch blocks so your code should
18669
16:18:25,116 --> 16:18:32,240
okay so a try block and then three
18670
16:18:28,720 --> 16:18:34,080
special exception handlings one after
18671
16:18:34,080 --> 16:18:39,040
great command s on your login view now
18672
16:18:36,879 --> 16:18:41,839
you shouldn't have any problems in your
18673
16:18:39,040 --> 16:18:44,559
login view and there's no import of
18674
16:18:41,839 --> 16:18:46,719
firebase in your login view just as it
18675
16:18:44,559 --> 16:18:48,399
was in the main dart file let's just
18676
16:18:46,720 --> 16:18:50,840
make sure that there's no firebase
18677
16:18:50,839 --> 16:18:55,199
yeah firebase yeah no imports of
18678
16:18:57,595 --> 16:19:02,239
and as the caption now says we need to
18679
16:18:59,595 --> 16:19:03,915
go to register view and remove firebase
18680
16:19:02,239 --> 16:19:06,720
and replace with auth service now that
18681
16:19:03,915 --> 16:19:09,040
we've done the same exercise now for
18682
16:19:06,720 --> 16:19:10,639
login view you should now know basically
18683
16:19:09,040 --> 16:19:12,480
what we're gonna do in register view
18684
16:19:10,639 --> 16:19:14,080
we're gonna go to pretty much the exact
18685
16:19:12,480 --> 16:19:16,796
same thing we did in login view except
18686
16:19:14,080 --> 16:19:19,200
in registry removing firebase from the
18687
16:19:16,796 --> 16:19:21,840
imports get all the errors that we're
18688
16:19:19,199 --> 16:19:23,360
going to get and after we get those
18689
16:19:21,839 --> 16:19:25,435
errors we're going to fix the problems
18690
16:19:23,360 --> 16:19:27,040
in register so let's go ahead and do
18691
16:19:27,040 --> 16:19:30,955
let's go to our imports there's firebase
18692
16:19:29,519 --> 16:19:32,955
imported right there we're going to
18693
16:19:32,955 --> 16:19:37,360
probably quite a lot of errors yeah
18694
16:19:37,360 --> 16:19:41,360
and let's go then and fix that i'm going
18695
16:19:39,595 --> 16:19:44,159
to go to my notes just to ensure that
18696
16:19:44,160 --> 16:19:48,160
notes that i was supposed to tell you
18697
16:19:48,955 --> 16:19:52,879
we don't create user with email and
18698
16:19:50,955 --> 16:19:54,559
password in our auth server so let's
18699
16:19:54,559 --> 16:19:59,275
and it's not imported so let's auto
18700
16:19:56,480 --> 16:20:01,680
import it dot firebase and we're gonna
18701
16:19:59,275 --> 16:20:05,360
say sign and what do we call it create
18702
16:20:05,360 --> 16:20:10,955
on the end of the last parameter grab
18703
16:20:07,915 --> 16:20:13,755
the code and replace your firebase auth
18704
16:20:10,955 --> 16:20:16,795
create user email and password with our
18705
16:20:17,839 --> 16:20:23,359
and in the place where we're getting the
18706
16:20:19,436 --> 16:20:25,596
user let's then say auth service
18707
16:20:23,360 --> 16:20:27,840
firebase and we're gonna say current
18708
16:20:27,839 --> 16:20:31,839
and now we have send email verification
18709
16:20:30,160 --> 16:20:34,160
but i think we called it some something
18710
16:20:35,595 --> 16:20:40,000
oh we didn't implement the send email
18711
16:20:44,400 --> 16:20:49,275
um send email verification yeah it is
18712
16:20:46,879 --> 16:20:51,360
right there so i'm gonna oh i see
18713
16:20:53,116 --> 16:20:58,080
firebase implements send email
18714
16:20:55,199 --> 16:21:00,239
verification at the user level but we
18715
16:20:58,080 --> 16:21:02,480
don't have we don't want that anymore
18716
16:21:00,239 --> 16:21:05,115
and our user doesn't have that
18717
16:21:02,480 --> 16:21:06,880
functionality actually our user has just
18718
16:21:06,879 --> 16:21:10,955
so what we need to do in here we're
18719
16:21:08,639 --> 16:21:13,116
going to ask our service to to send that
18720
16:21:10,955 --> 16:21:15,595
email verification so we're going to say
18721
16:21:15,595 --> 16:21:21,040
and this send email verification just
18722
16:21:22,559 --> 16:21:26,319
then we need to fix these exceptions as
18723
16:21:24,796 --> 16:21:27,840
well because as you saw in the login
18724
16:21:26,319 --> 16:21:29,436
view we don't have firebase auth
18725
16:21:27,839 --> 16:21:32,000
exception in this case like we've
18726
16:21:32,000 --> 16:21:36,639
ability to talk directly with firebase
18727
16:21:34,319 --> 16:21:37,839
by removing all the imports so now we
18728
16:21:36,639 --> 16:21:39,680
need to make sure that we handle
18729
16:21:37,839 --> 16:21:42,159
exceptions just like we did in the login
18730
16:21:47,040 --> 16:21:50,639
each password because i think that's the
18731
16:21:50,639 --> 16:21:54,796
um i mean you see almost the entire
18732
16:21:53,275 --> 16:21:56,559
screen is now red and that's one of the
18733
16:21:54,796 --> 16:21:59,040
downsides of using the extension that i
18734
16:21:56,559 --> 16:22:00,559
talked to about during one of the first
18735
16:22:00,559 --> 16:22:05,275
course where i'm using an extension
18736
16:22:02,239 --> 16:22:07,595
called air lens and air lens extends and
18737
16:22:05,275 --> 16:22:09,915
expands all the errors that would
18738
16:22:07,595 --> 16:22:12,319
otherwise just happen with little icons
18739
16:22:09,915 --> 16:22:15,199
next to the lines it's expanding them
18740
16:22:12,319 --> 16:22:16,720
into their own separate lines and it
18741
16:22:15,199 --> 16:22:19,199
kind of makes the code look a little bit
18742
16:22:16,720 --> 16:22:21,360
angry at times when you're making
18743
16:22:19,199 --> 16:22:23,360
drastic changes to your code but don't
18744
16:22:21,360 --> 16:22:25,360
worry about it just have a look at your
18745
16:22:23,360 --> 16:22:27,040
syntax and kind of see that yeah i'm
18746
16:22:25,360 --> 16:22:28,955
kind of doing the right thing i'm going
18747
16:22:27,040 --> 16:22:30,639
to fix it soon so don't be intimidated
18748
16:22:30,639 --> 16:22:38,319
flags in here okay or these red lines
18749
16:22:34,480 --> 16:22:39,680
so let's handle weak password exception
18750
16:22:38,319 --> 16:22:41,360
now it's going to be a little bit
18751
16:22:41,360 --> 16:22:45,756
then grab your show error dialog
18752
16:22:43,915 --> 16:22:46,795
from there and that's for a week
18753
16:22:57,595 --> 16:23:03,595
on email already in use off exception
18754
16:23:01,360 --> 16:23:05,520
and we're gonna then take the code from
18755
16:23:03,595 --> 16:23:07,915
email already and use which is just a
18756
16:23:05,519 --> 16:23:10,159
shorter dialog right there put it there
18757
16:23:15,275 --> 16:23:22,319
invalid email so i'm gonna go in here
18758
16:23:18,559 --> 16:23:25,040
and say on invalid email off exception
18759
16:23:22,319 --> 16:23:27,595
let's grab the code from invalid email
18760
16:23:30,239 --> 16:23:35,915
and and that part is done as well
18761
16:23:33,275 --> 16:23:37,756
also we need to have on generic als
18762
16:23:35,915 --> 16:23:40,479
exception so let's go in here and just
18763
16:23:37,756 --> 16:23:43,040
say on generic auth exception
18764
16:23:45,040 --> 16:23:49,436
and actually this is what we did for the
18765
16:23:47,915 --> 16:23:50,955
generic auth exception so i'm just going
18766
16:23:50,955 --> 16:23:56,479
put it there and since on generic off
18767
16:23:53,519 --> 16:23:59,359
exception we're not accepting any e so
18768
16:23:56,480 --> 16:24:01,040
we're not saying on catch like e like
18769
16:23:59,360 --> 16:24:04,000
that we could have done that but we're
18770
16:24:01,040 --> 16:24:06,480
just ignoring completely at the e and in
18771
16:24:04,000 --> 16:24:07,839
here and we're just gonna say failed to
18772
16:24:07,839 --> 16:24:10,955
and then let's clean up the rest of the
18773
16:24:09,275 --> 16:24:13,199
code remove the other cat statements
18774
16:24:10,955 --> 16:24:14,720
okay so your code basically is going to
18775
16:24:13,199 --> 16:24:17,360
look clean like this now so you have a
18776
16:24:14,720 --> 16:24:19,756
try block and then you say okay i'm
18777
16:24:17,360 --> 16:24:21,840
trying this code right here create user
18778
16:24:19,756 --> 16:24:24,160
if weak password auth exception happens
18779
16:24:21,839 --> 16:24:27,199
do this if email is already in use do
18780
16:24:24,160 --> 16:24:30,240
this if invalid email do this or any
18781
16:24:27,199 --> 16:24:33,115
other auth exception do this so
18782
16:24:30,239 --> 16:24:34,879
it looks cleaner in my eyes at least the
18783
16:24:33,116 --> 16:24:37,116
way we've done it now than the way we've
18784
16:24:34,879 --> 16:24:39,275
done it before in that before we were
18785
16:24:37,116 --> 16:24:41,680
going to firebase and firebase do this
18786
16:24:39,275 --> 16:24:43,115
do that on firebase auth exception do
18787
16:24:43,116 --> 16:24:47,520
so now the only thing we're doing is
18788
16:24:50,080 --> 16:24:54,796
auth related exceptions and that's it
18789
16:24:57,595 --> 16:25:02,079
now that we've we've done our work in
18790
16:25:00,480 --> 16:25:04,480
the register you can see there's no
18791
16:25:02,080 --> 16:25:06,796
errors in the register we need to go to
18792
16:25:06,796 --> 16:25:10,796
as the caption indicates so i close
18793
16:25:08,720 --> 16:25:12,559
register view now let's open up our
18794
16:25:12,559 --> 16:25:17,360
and see what we are doing with firebase
18795
16:25:15,519 --> 16:25:19,755
and notes view so do the same thing like
18796
16:25:17,360 --> 16:25:22,319
we did before remove firebase as one of
18797
16:25:19,756 --> 16:25:25,116
your imports so you get the you get the
18798
16:25:22,319 --> 16:25:26,639
idea like an overall idea of what is
18799
16:25:25,116 --> 16:25:28,000
happening in here and how we're using
18800
16:25:26,639 --> 16:25:30,796
firebase and i can see the only place
18801
16:25:28,000 --> 16:25:33,199
where using firebase in notes view is
18802
16:25:30,796 --> 16:25:34,956
firebase off instance sign out that's
18803
16:25:33,199 --> 16:25:36,639
good it's just one place but we have to
18804
16:25:36,639 --> 16:25:41,199
let's then go um sorry i'm just gonna
18805
16:25:38,400 --> 16:25:43,756
bring up my notes as well um we're in
18806
16:25:45,116 --> 16:25:50,319
so let's just then go to um
18807
16:25:48,319 --> 16:25:52,159
here and we're gonna we're just gonna
18808
16:25:54,559 --> 16:25:58,639
all right and then we're going to say
18809
16:25:56,400 --> 16:26:00,400
log out i think we call it and we need
18810
16:26:03,436 --> 16:26:08,639
it's bad so what we could do now
18811
16:26:06,639 --> 16:26:09,595
we've removed firebase from there as
18812
16:26:13,275 --> 16:26:16,479
as the caption indicates we need to now
18813
16:26:14,796 --> 16:26:19,276
go through the entire app and make sure
18814
16:26:16,480 --> 16:26:21,360
that everything is working as expected
18815
16:26:19,275 --> 16:26:23,915
but before we do that let's have a look
18816
16:26:21,360 --> 16:26:26,639
at our views and make sure none of them
18817
16:26:23,915 --> 16:26:28,239
is importing firebase so i can see login
18818
16:26:26,639 --> 16:26:29,839
view is not importing anything related
18819
16:26:28,239 --> 16:26:32,795
to firebase meaning that it's not using
18820
16:26:29,839 --> 16:26:34,879
firebase let's go to notes view
18821
16:26:32,796 --> 16:26:36,880
no imports related to firebase either
18822
16:26:36,879 --> 16:26:40,399
or at least not using firebase directly
18823
16:26:38,639 --> 16:26:43,915
remember it's using firebase but through
18824
16:26:40,400 --> 16:26:46,955
our auth service okay so no imports from
18825
16:26:43,915 --> 16:26:49,915
firebase here either and we have our
18826
16:26:46,955 --> 16:26:52,239
verify email view which at the moment i
18827
16:26:52,400 --> 16:26:57,040
verify email view oh i see that we
18828
16:26:54,879 --> 16:26:58,559
haven't clean up our verify email view
18829
16:26:57,040 --> 16:27:00,559
and that's something that we also need
18830
16:26:58,559 --> 16:27:02,639
to do so we forgot about that let's
18831
16:27:00,559 --> 16:27:05,275
let's take care of that okay
18832
16:27:05,275 --> 16:27:09,680
remove this firebase auth from here as
18833
16:27:16,480 --> 16:27:21,520
so let's have a look at that now let's
18834
16:27:18,796 --> 16:27:23,680
say that uh send email verification
18835
16:27:21,519 --> 16:27:26,479
shouldn't be there so let's just then
18836
16:27:31,275 --> 16:27:36,400
a current user and i can see you see
18837
16:27:33,915 --> 16:27:37,915
here it was using the current user just
18838
16:27:36,400 --> 16:27:39,756
to send the email verification but we
18839
16:27:37,915 --> 16:27:41,199
don't do that anymore we just
18840
16:27:39,756 --> 16:27:42,880
because send email verification is not
18841
16:27:41,199 --> 16:27:44,479
at a user level anymore when we've
18842
16:27:42,879 --> 16:27:46,079
developed our off service remember so
18843
16:27:44,480 --> 16:27:47,840
we'll just say send email verification
18844
16:27:48,796 --> 16:27:52,400
and then remove those two lines of code
18845
16:27:50,720 --> 16:27:53,916
which were just getting the user and
18846
16:27:52,400 --> 16:27:55,436
sending an email verification remove
18847
16:27:55,436 --> 16:27:59,840
and and to answer you i hadn't planned
18848
16:27:57,756 --> 16:28:01,436
for this i can actually see in my notes
18849
16:28:01,436 --> 16:28:04,720
fixed the verify email view and that's
18850
16:28:03,360 --> 16:28:06,796
why i'm not showing it in the captions
18851
16:28:04,720 --> 16:28:09,436
and that's completely okay i have to
18852
16:28:06,796 --> 16:28:12,080
improvise as well sometimes so
18853
16:28:09,436 --> 16:28:14,400
let's then go ahead in here in them
18854
16:28:12,080 --> 16:28:16,560
in the text button that says restart as
18855
16:28:14,400 --> 16:28:18,560
you can see here that needs to just sign
18856
16:28:16,559 --> 16:28:20,639
the user out so let's just say off
18857
16:28:20,639 --> 16:28:26,479
base log out and make sure that you wait
18858
16:28:23,839 --> 16:28:28,879
on it okay just like that and remove
18859
16:28:26,480 --> 16:28:31,436
this line of code as well so verify view
18860
16:28:28,879 --> 16:28:32,879
now doesn't have any imports to uh from
18861
16:28:35,756 --> 16:28:39,520
all of our views except for also main
18862
16:28:38,000 --> 16:28:41,040
let's make sure there's no firebase
18863
16:28:41,040 --> 16:28:45,680
perfect so now we're done with this and
18864
16:28:44,080 --> 16:28:47,916
what we could do as the caption in the
18865
16:28:45,680 --> 16:28:50,160
case we're going to do a hot a restart
18866
16:28:50,160 --> 16:28:54,796
and let's see if things are working yeah
18867
16:28:52,559 --> 16:28:56,720
and i'm just going to say restart here
18868
16:28:56,720 --> 16:29:01,116
the current state of the application i'm
18869
16:28:58,559 --> 16:29:03,915
going to bring up a firebase console
18870
16:29:01,116 --> 16:29:06,080
go to my notes application here
18871
16:29:03,915 --> 16:29:08,319
authentication and i can see i have two
18872
16:29:06,080 --> 16:29:11,680
users here okay so i'm gonna i'm just
18873
16:29:08,319 --> 16:29:13,275
gonna say pixelityab.gmail.com
18874
16:29:13,275 --> 16:29:17,519
and let's say register and then it
18875
16:29:15,519 --> 16:29:19,519
should give us an error saying email is
18876
16:29:17,519 --> 16:29:24,039
already in use so email is already in
18877
16:29:19,519 --> 16:29:25,755
use let's go in here and say pixelityab
18878
16:29:24,040 --> 16:29:27,275
gmail.combarbaz and i remember from the
18879
16:29:25,756 --> 16:29:30,639
previous chapters this is a user that's
18880
16:29:27,275 --> 16:29:32,239
already verified his um email address so
18881
16:29:30,639 --> 16:29:34,239
by pressing login we should actually go
18882
16:29:32,239 --> 16:29:36,720
to the main ui of the application so
18883
16:29:34,239 --> 16:29:38,720
logout should work as it did before
18884
16:29:39,595 --> 16:29:44,639
uh and try to log in with the user
18885
16:29:45,519 --> 16:29:50,239
verified his email address so
18886
16:29:48,239 --> 16:29:52,319
you can see then we're getting sent here
18887
16:29:50,239 --> 16:29:53,839
verify email and then we can press the
18888
16:29:52,319 --> 16:29:58,639
send email verification which in turn
18889
16:29:53,839 --> 16:29:59,679
then sends the email and to the user
18890
16:29:59,680 --> 16:30:04,879
that was a lot of information and
18891
16:30:02,796 --> 16:30:06,560
some improvised edition as well in this
18892
16:30:04,879 --> 16:30:08,399
chapter for the verify email view that i
18893
16:30:06,559 --> 16:30:09,756
hadn't planned for so it's good for me
18894
16:30:08,400 --> 16:30:11,360
to know as well that sometimes i can
18895
16:30:09,756 --> 16:30:13,436
miss things as well but now we haven't
18896
16:30:11,360 --> 16:30:14,955
missed it during talking about it in
18897
16:30:17,199 --> 16:30:21,595
wrap up this chapter we've done quite a
18898
16:30:19,040 --> 16:30:22,480
lot and the main goal of this chapter is
18899
16:30:22,480 --> 16:30:26,240
we've achieved that because we wanted to
18900
16:30:24,400 --> 16:30:29,436
go away from using firebase directly in
18901
16:30:26,239 --> 16:30:31,595
our ui and going away from that using
18902
16:30:29,436 --> 16:30:34,400
our auth service for everything related
18903
16:30:31,595 --> 16:30:35,839
to firebase and that's achieved so
18904
16:30:35,839 --> 16:30:40,079
now what we need to do is as we're doing
18905
16:30:37,680 --> 16:30:42,000
in other chapters we need to uh commit
18906
16:30:40,080 --> 16:30:43,116
and tag all the code that we've done
18907
16:30:44,635 --> 16:30:50,319
lost all this code for some reason
18908
16:30:47,199 --> 16:30:51,755
so let me change the um layout of the
18909
16:30:54,400 --> 16:30:58,560
browse the editor a little bit bigger so
18910
16:30:56,480 --> 16:31:00,240
you see it better and i'm going to go
18911
16:30:58,559 --> 16:31:01,275
into the terminal which i absolutely
18912
16:31:00,239 --> 16:31:04,000
love in visual studio called the
18913
16:31:01,275 --> 16:31:06,319
integrated terminal and you can see that
18914
16:31:04,000 --> 16:31:08,480
in the previous chapter we had committed
18915
16:31:06,319 --> 16:31:11,436
and tagged our code as step that's step
18916
16:31:08,480 --> 16:31:13,200
eight now we need to commit as step nine
18917
16:31:11,436 --> 16:31:15,040
first let's have a look at status and
18918
16:31:15,040 --> 16:31:22,080
status and we say git commit and we say
18919
16:31:26,720 --> 16:31:30,635
nine as well and we first push our
18920
16:31:34,635 --> 16:31:39,275
all right that's pushed as well
18921
16:31:37,199 --> 16:31:42,319
well done great job we are done with
18922
16:31:39,275 --> 16:31:43,680
this chapter and as it is uh for the
18923
16:31:42,319 --> 16:31:45,116
case for other chapters i've talked
18924
16:31:43,680 --> 16:31:46,480
about we usually talk about what we're
18925
16:31:45,116 --> 16:31:48,400
gonna do in the next chapter at the end
18926
16:31:48,400 --> 16:31:51,520
we're done with auth service it's
18927
16:31:51,519 --> 16:31:58,000
but what we don't have are some um tests
18928
16:31:58,000 --> 16:32:03,199
there are three different types of tests
18929
16:32:00,480 --> 16:32:06,160
that you can write in flutter
18930
16:32:03,199 --> 16:32:09,115
unit tests integration tests and widget
18931
16:32:09,116 --> 16:32:13,116
a unit test is where you for instance
18932
16:32:13,116 --> 16:32:19,360
your current off service and then you uh
18933
16:32:17,199 --> 16:32:22,559
want to just say okay auth service log
18934
16:32:19,360 --> 16:32:24,720
in register do this do that and
18935
16:32:22,559 --> 16:32:27,199
given this condition i expect you to do
18936
16:32:24,720 --> 16:32:28,796
this now our auth service is working
18937
16:32:28,796 --> 16:32:34,160
we can't be 100 sure that it is working
18938
16:32:32,160 --> 16:32:36,400
as it should and let's say you're
18939
16:32:34,160 --> 16:32:38,080
working inside a team and there are
18940
16:32:36,400 --> 16:32:40,480
three other people working on the same
18941
16:32:38,080 --> 16:32:42,240
code base with you and you work on the
18942
16:32:40,480 --> 16:32:44,880
auth service and then you committed
18943
16:32:42,239 --> 16:32:47,115
everybody reviews the code or
18944
16:32:44,879 --> 16:32:49,199
the way i like to do my code is to a
18945
16:32:47,116 --> 16:32:51,276
pair program or mob program so there's
18946
16:32:49,199 --> 16:32:52,635
no code reviewing because everyone's
18947
16:32:51,275 --> 16:32:55,199
working on the same code at the same
18948
16:32:52,635 --> 16:32:57,595
time so it depending on how you're
18949
16:32:55,199 --> 16:32:59,435
working inside your team then you send
18950
16:32:57,595 --> 16:33:01,360
your code then two weeks later a new
18951
16:32:59,436 --> 16:33:02,480
developer comes in changes your auth
18952
16:33:02,480 --> 16:33:06,880
and to and they change the service that
18953
16:33:05,040 --> 16:33:09,436
it makes sense to them but then they
18954
16:33:06,879 --> 16:33:10,955
break your code so maybe for instance
18955
16:33:10,955 --> 16:33:15,275
screen stops working because they change
18956
16:33:12,720 --> 16:33:17,275
the code so that it's not executing the
18957
16:33:15,275 --> 16:33:19,595
logic the way you thought it should
18958
16:33:17,275 --> 16:33:22,400
execute the logic so that's why we need
18959
16:33:23,436 --> 16:33:30,000
the way we design software is actually
18960
16:33:27,360 --> 16:33:32,319
uh is the way that it should perform its
18961
16:33:30,000 --> 16:33:33,040
work so that it's not missing any points
18962
16:33:33,040 --> 16:33:36,080
that's what we're going to do in the
18963
16:33:36,080 --> 16:33:41,916
um grab some refreshments and i'll see
18964
16:33:41,915 --> 16:33:45,519
hello and welcome to chapter 26 of this
18965
16:33:45,519 --> 16:33:50,719
in the previous chapter you saw that we
18966
16:33:47,519 --> 16:33:52,955
started using our auth service in
18967
16:33:50,720 --> 16:33:54,880
our user interface code so we're not
18968
16:33:54,879 --> 16:33:59,040
firebase directly so we removed all the
18969
16:33:59,040 --> 16:34:05,756
to firebase in our user interface
18970
16:34:13,040 --> 16:34:18,080
and we have a good working auth service
18971
16:34:16,400 --> 16:34:21,275
however what we're missing are some
18972
16:34:18,080 --> 16:34:23,436
tests and tests are one of my absolute
18973
16:34:21,275 --> 16:34:25,115
favorite topics when i talk about
18974
16:34:23,436 --> 16:34:27,680
software development because
18975
16:34:25,116 --> 16:34:29,200
they make your code a lot more robust
18976
16:34:29,199 --> 16:34:32,479
just writing the code and leaving it in
18977
16:34:30,879 --> 16:34:34,319
there and i understand some software
18978
16:34:34,319 --> 16:34:38,635
look at things as black and white
18979
16:34:36,796 --> 16:34:40,480
saying that you have to have codes or
18980
16:34:38,635 --> 16:34:43,756
you don't have to have codes but i'm
18981
16:34:43,756 --> 16:34:47,040
thinking that well you have to be
18982
16:34:45,116 --> 16:34:48,635
realistic sometimes you if you're for
18983
16:34:47,040 --> 16:34:51,520
instance writing an application for
18984
16:34:48,635 --> 16:34:53,915
yourself in a hackathon for instance and
18985
16:34:51,519 --> 16:34:55,595
in in your you're in time pressure and
18986
16:34:53,915 --> 16:34:57,115
you just want to get something out well
18987
16:34:55,595 --> 16:35:00,159
that's not the right place to write a
18988
16:34:57,116 --> 16:35:02,880
unit test if you're in a hackathon
18989
16:35:00,160 --> 16:35:04,240
but if you're working with a company and
18990
16:35:02,879 --> 16:35:06,319
they and you're getting paid to write
18991
16:35:04,239 --> 16:35:08,079
good software and you're getting paid to
18992
16:35:06,319 --> 16:35:09,360
write your tests as well to make sure
18993
16:35:08,080 --> 16:35:10,400
everything's working out as it should
18994
16:35:09,360 --> 16:35:12,239
especially if you're a back-end
18995
16:35:10,400 --> 16:35:13,275
developer software like a front-end
18996
16:35:13,275 --> 16:35:20,079
then you will need to ensure that your
18997
16:35:20,080 --> 16:35:23,916
i'm going to bring up the caption
18998
16:35:23,915 --> 16:35:29,915
about why we actually need tests and
18999
16:35:29,915 --> 16:35:34,399
um and we're going to talk about the
19000
16:35:31,680 --> 16:35:36,955
different types of tests in a while but
19001
16:35:34,400 --> 16:35:39,200
let's just talk about unit tests um i
19002
16:35:39,199 --> 16:35:43,275
like the outro to the previous chapter
19003
16:35:45,595 --> 16:35:49,756
for me the main reason having a unit
19004
16:35:47,519 --> 16:35:52,319
test is to ensure that if you if you
19005
16:35:49,756 --> 16:35:54,480
think here's the auth provider we left
19006
16:35:52,319 --> 16:35:57,680
it in a state that well it's working
19007
16:35:54,480 --> 16:36:00,160
okay code codes on code working so
19008
16:35:57,680 --> 16:36:02,319
it's working but what if a new developer
19009
16:36:02,319 --> 16:36:06,319
tries to change some code so that it
19010
16:36:06,319 --> 16:36:10,080
but unintentionally changes it changes
19011
16:36:08,480 --> 16:36:13,116
the code so that it's not working for us
19012
16:36:10,080 --> 16:36:15,200
the way that we intended it so
19013
16:36:13,116 --> 16:36:17,276
that's why that's one of the reasons we
19014
16:36:17,275 --> 16:36:20,795
um so that's what we're going to do in
19015
16:36:18,796 --> 16:36:23,276
this chapter and i completely understand
19016
16:36:20,796 --> 16:36:24,796
that this you if you're watching this of
19017
16:36:23,275 --> 16:36:27,595
course you're probably sitting somewhere
19018
16:36:24,796 --> 16:36:29,520
in a calm area a calm room and you're
19019
16:36:27,595 --> 16:36:31,115
watching this course yourself it's the
19020
16:36:29,519 --> 16:36:33,519
chat i think the chances of you watching
19021
16:36:31,116 --> 16:36:35,116
this course with a group of people are
19022
16:36:35,116 --> 16:36:38,480
um and chances are you're just following
19023
16:36:37,040 --> 16:36:39,840
along with the course and you're trying
19024
16:36:38,480 --> 16:36:41,520
to write an application or release it to
19025
16:36:39,839 --> 16:36:42,635
the app store or play store and play
19026
16:36:43,360 --> 16:36:47,275
maybe you're not so interested in making
19027
16:36:45,680 --> 16:36:48,879
sure that your auth service is actually
19028
16:36:47,275 --> 16:36:51,360
tested and i completely understand that
19029
16:36:48,879 --> 16:36:53,360
but i'm basically designing this course
19030
16:36:51,360 --> 16:36:55,520
for people who are trying to become also
19031
16:36:53,360 --> 16:36:56,955
good software developers so if you're
19032
16:36:55,519 --> 16:36:58,795
coming as i've mentioned like one of the
19033
16:36:56,955 --> 16:37:00,479
personas that i developed this course
19034
16:36:58,796 --> 16:37:02,635
for are designers so if you're a
19035
16:37:00,480 --> 16:37:04,956
designer have no background in flutter
19036
16:37:02,635 --> 16:37:07,199
development you may also be interested
19037
16:37:04,955 --> 16:37:09,436
in writing tests for your application
19038
16:37:07,199 --> 16:37:11,275
especially if your goal is to go into a
19039
16:37:09,436 --> 16:37:12,955
bigger organization and actually get a
19040
16:37:11,275 --> 16:37:14,879
job as a flutter developer or as a
19041
16:37:14,879 --> 16:37:18,955
given that background you should know
19042
16:37:17,040 --> 16:37:21,200
what tests are what unit tests are
19043
16:37:18,955 --> 16:37:25,199
integration tests are and what for
19044
16:37:21,199 --> 16:37:27,755
instance widget tests are in flutter
19045
16:37:25,199 --> 16:37:30,319
now i need to also mention that
19046
16:37:27,756 --> 16:37:32,400
there's something called a tdd or test
19047
16:37:34,635 --> 16:37:38,720
doing test driven development is to
19048
16:37:38,720 --> 16:37:42,880
write the tests and then you write your
19049
16:37:41,680 --> 16:37:44,319
software at the moment we're doing it
19050
16:37:42,879 --> 16:37:47,040
the exact opposite because i didn't want
19051
16:37:44,319 --> 16:37:48,559
to complicate uh things as we're going
19052
16:37:47,040 --> 16:37:49,840
because i have this as i said i designed
19053
16:37:48,559 --> 16:37:51,360
this course for someone who's probably
19054
16:37:49,839 --> 16:37:53,115
new to flutter development or software
19055
16:37:51,360 --> 16:37:54,635
development in general so like going
19056
16:37:53,116 --> 16:37:56,880
into test development test driven
19057
16:37:54,635 --> 16:37:58,159
development directly and then writing
19058
16:37:56,879 --> 16:38:00,635
our off service probably would have
19059
16:37:58,160 --> 16:38:02,796
complicated things more so in for the
19060
16:38:00,635 --> 16:38:04,400
sake of simplicity we wrote the code and
19061
16:38:02,796 --> 16:38:07,040
then we're writing the test but just so
19062
16:38:04,400 --> 16:38:09,200
you know if you're if you hear people
19063
16:38:07,040 --> 16:38:10,879
talking about tdd tested with the test
19064
16:38:09,199 --> 16:38:13,360
driven development what they mean is
19065
16:38:10,879 --> 16:38:15,519
that you write the tests and in the
19066
16:38:13,360 --> 16:38:17,595
writing of the tests you come towards
19067
16:38:15,519 --> 16:38:19,199
the conclusion of how the interface of
19068
16:38:17,595 --> 16:38:21,275
the class you're actually writing the
19069
16:38:19,199 --> 16:38:22,719
tests for should look like if you're
19070
16:38:22,720 --> 16:38:27,200
so test driven development is there's
19071
16:38:24,879 --> 16:38:29,915
very important and we should be aware of
19072
16:38:27,199 --> 16:38:32,079
it how to use it and if you're
19073
16:38:29,915 --> 16:38:34,079
working in a software development
19074
16:38:32,080 --> 16:38:35,916
organization you should do test
19075
16:38:35,915 --> 16:38:40,795
driven development if time allows and if
19076
16:38:38,559 --> 16:38:42,955
um all the constraints are in the right
19077
16:38:40,796 --> 16:38:45,200
place for you to actually do tests and
19078
16:38:42,955 --> 16:38:48,479
as i said i look at things more like in
19079
16:38:48,480 --> 16:38:52,880
vision more like a gray vision
19080
16:38:50,879 --> 16:38:55,199
i say that you should do tests but that
19081
16:38:52,879 --> 16:38:56,795
is again something that is completely up
19082
16:38:55,199 --> 16:38:58,479
to you and up to the situation that
19083
16:38:58,480 --> 16:39:03,680
just be aware of what tdd is and that
19084
16:39:01,839 --> 16:39:05,435
the right way of doing test driven
19085
16:39:03,680 --> 16:39:06,796
development is that you first write your
19086
16:39:06,796 --> 16:39:11,276
and then you write the interfaces and
19087
16:39:09,199 --> 16:39:14,319
the code that the tests are actually
19088
16:39:11,275 --> 16:39:16,879
performing their tests on there's lots
19089
16:39:14,319 --> 16:39:19,199
uh lots and lots of resources online
19090
16:39:16,879 --> 16:39:22,559
about tdd and what it actually means how
19091
16:39:19,199 --> 16:39:24,399
it should be used tdd flutter as well so
19092
16:39:22,559 --> 16:39:26,879
i strongly suggest that you have a look
19093
16:39:24,400 --> 16:39:28,880
at those resources as well and maybe
19094
16:39:26,879 --> 16:39:30,635
perhaps after you've gone through this
19095
16:39:28,879 --> 16:39:33,275
chapter and done like the basics of
19096
16:39:33,275 --> 16:39:38,239
now um you see we have time limit in
19097
16:39:36,319 --> 16:39:41,360
this course because this course can't go
19098
16:39:38,239 --> 16:39:43,275
on for hundreds and hundreds of hours um
19099
16:39:41,360 --> 16:39:45,116
first because i i wouldn't probably be
19100
16:39:43,275 --> 16:39:48,239
able to put so much time i know that
19101
16:39:45,116 --> 16:39:49,916
this course is already gonna go over 20
19102
16:39:49,915 --> 16:39:55,680
it is it is going to take a lot of time
19103
16:39:53,116 --> 16:39:58,240
if you want to go and cover everything
19104
16:39:55,680 --> 16:40:00,796
and all different types of testing
19105
16:40:00,796 --> 16:40:04,720
for the sake of simplicity and making
19106
16:40:02,635 --> 16:40:06,159
sure that you follow along with this
19107
16:40:04,720 --> 16:40:08,000
course without dropping off and getting
19108
16:40:06,160 --> 16:40:10,080
scared of all testing things that we're
19109
16:40:08,000 --> 16:40:12,000
gonna do i'm gonna give you like the
19110
16:40:10,080 --> 16:40:13,756
basics and i'm gonna give you the
19111
16:40:12,000 --> 16:40:15,680
building blocks that you're you need in
19112
16:40:13,756 --> 16:40:17,916
order to be able to carry on later on
19113
16:40:15,680 --> 16:40:18,720
your own and write more and more tests
19114
16:40:18,720 --> 16:40:22,400
i just know that the reason we're
19115
16:40:20,319 --> 16:40:23,756
dedicating this chapter to testing is to
19116
16:40:22,400 --> 16:40:25,200
make sure that everybody understands
19117
16:40:23,756 --> 16:40:28,160
that testing is very important but also
19118
16:40:25,199 --> 16:40:31,115
we are not going to have many many many
19119
16:40:28,160 --> 16:40:34,796
hours just to focus on testing
19120
16:40:31,116 --> 16:40:37,040
though it is a very important subject
19121
16:40:34,796 --> 16:40:40,400
now let's talk about different types of
19122
16:40:37,040 --> 16:40:42,796
tests i mentioned this in the outro to
19123
16:40:40,400 --> 16:40:44,560
the previous chapter and but i'll
19124
16:40:42,796 --> 16:40:45,840
mention it here in case you've jumped
19125
16:40:44,559 --> 16:40:48,635
over that chapter which i don't
19126
16:40:45,839 --> 16:40:50,879
recommend and if if you talk about
19127
16:40:48,635 --> 16:40:52,239
different types of tests in the flutter
19128
16:40:50,879 --> 16:40:55,199
you should know that there are unit
19129
16:40:52,239 --> 16:40:57,839
tests widget tests and integration tests
19130
16:40:55,199 --> 16:41:01,115
and let's just quickly talk about
19131
16:40:57,839 --> 16:41:02,719
what these different types of tests are
19132
16:41:02,720 --> 16:41:05,756
let's go and talk about the concept for
19133
16:41:04,160 --> 16:41:07,840
instance of a class let's say you've
19134
16:41:05,756 --> 16:41:10,239
created a class called auth service
19135
16:41:07,839 --> 16:41:12,719
which is the case for us and you want to
19136
16:41:10,239 --> 16:41:15,275
write some tests for this class now this
19137
16:41:12,720 --> 16:41:17,756
class is very isolated in its own in its
19138
16:41:15,275 --> 16:41:19,436
own like it is it has a set of function
19139
16:41:17,756 --> 16:41:21,436
functionalities functions and it has a
19140
16:41:21,436 --> 16:41:24,720
if you don't remember that let me just
19141
16:41:22,720 --> 16:41:29,436
bring it to the screen so you see better
19142
16:41:24,720 --> 16:41:29,436
um so let's go to our auth service
19143
16:41:30,400 --> 16:41:34,796
it conforms to and implements the auth
19144
16:41:32,879 --> 16:41:36,479
provider it has a constructor it has a
19145
16:41:34,796 --> 16:41:38,160
factory constructor here as well and it
19146
16:41:36,480 --> 16:41:40,880
has all the functionalities that are
19147
16:41:38,160 --> 16:41:43,360
provided by the auth provider because it
19148
16:41:40,879 --> 16:41:45,435
implements auth provider so i'm gonna
19149
16:41:43,360 --> 16:41:46,319
actually increase the size so you see
19150
16:41:48,559 --> 16:41:54,319
this is a unit of itself so it's a an
19151
16:41:51,756 --> 16:41:58,400
isolated piece of code that talks with
19152
16:41:54,319 --> 16:42:00,720
an auth provider and then it gives us uh
19153
16:41:58,400 --> 16:42:02,480
basically mirrors the functionalities of
19154
16:42:00,720 --> 16:42:04,796
that author provider which in in this
19155
16:42:02,480 --> 16:42:06,956
case is that in the firebase case is the
19156
16:42:06,955 --> 16:42:10,720
it doesn't have so much functionality
19157
16:42:08,720 --> 16:42:12,480
but it has functionality good enough in
19158
16:42:10,720 --> 16:42:13,916
order for it to be tested and it's
19159
16:42:12,480 --> 16:42:16,000
actually important to test it just to
19160
16:42:13,915 --> 16:42:18,079
make sure nobody unintentionally changes
19161
16:42:16,000 --> 16:42:20,239
this code without without consulting
19162
16:42:18,080 --> 16:42:22,160
with us or without like and making sure
19163
16:42:20,239 --> 16:42:24,479
that their changes aren't gonna break
19164
16:42:22,160 --> 16:42:25,916
our code so that's unit tests so you
19165
16:42:24,480 --> 16:42:28,720
have a unit of code you have a piece of
19166
16:42:25,915 --> 16:42:30,795
code isolated and you want to test that
19167
16:42:28,720 --> 16:42:33,916
piece of code and to ensure the
19168
16:42:30,796 --> 16:42:36,000
different functions inside that code um
19169
16:42:33,915 --> 16:42:38,000
are working as they should so that's
19170
16:42:36,000 --> 16:42:38,839
just like a general idea of what a unit
19171
16:42:38,839 --> 16:42:45,519
is now a widget test as its name
19172
16:42:42,400 --> 16:42:48,000
indicates is a way for you as a software
19173
16:42:45,519 --> 16:42:49,435
developer in order to make it as a way
19174
16:42:48,000 --> 16:42:51,756
for you as a software developer to make
19175
16:42:49,436 --> 16:42:54,080
sure that your widgets like the ui that
19176
16:42:51,756 --> 16:42:57,360
you are creating is working as a shift
19177
16:42:54,080 --> 16:42:59,596
for instance if you have a login view in
19178
16:42:59,595 --> 16:43:04,720
and this login view allows the user to
19179
16:43:01,595 --> 16:43:06,399
tap on a button in order to log in and
19180
16:43:04,720 --> 16:43:07,520
you're saying that okay in the ui i'm
19181
16:43:06,400 --> 16:43:08,880
going to make sure as soon as you press
19182
16:43:08,879 --> 16:43:13,839
until the user is logged in that this
19183
16:43:11,040 --> 16:43:15,360
login button should be disabled okay so
19184
16:43:13,839 --> 16:43:17,839
that's a piece of logic that you thought
19185
16:43:15,360 --> 16:43:18,635
about good idea you put that code in
19186
16:43:18,635 --> 16:43:22,080
but how do you test it how do you make
19187
16:43:20,400 --> 16:43:25,436
sure that the login button stays
19188
16:43:22,080 --> 16:43:27,756
disabled until login is successful
19189
16:43:25,436 --> 16:43:31,040
that's where widget testing comes into
19190
16:43:27,756 --> 16:43:34,480
play so widget testing is some sort of
19191
16:43:31,040 --> 16:43:38,160
uh like an end to end test and by that
19192
16:43:34,480 --> 16:43:40,720
we mean that your widgets are probably
19193
16:43:38,160 --> 16:43:42,160
talking with your services and with your
19194
16:43:42,955 --> 16:43:45,595
your widget for instance the login
19195
16:43:45,595 --> 16:43:49,595
or the login screen upon pressing the
19196
16:43:47,595 --> 16:43:51,915
login button is gonna call into your
19197
16:43:49,595 --> 16:43:53,519
service in this case the auth service
19198
16:43:51,915 --> 16:43:55,360
and it's going to go into this login
19199
16:43:53,519 --> 16:43:57,115
function this login function in turn is
19200
16:43:55,360 --> 16:43:59,520
going to talk with a provider the
19201
16:43:57,116 --> 16:44:01,596
provider in turn is going to talk with
19202
16:43:59,519 --> 16:44:03,359
the firebase code which in turn is going
19203
16:44:01,595 --> 16:44:06,159
to talk with the firebase backend so you
19204
16:44:03,360 --> 16:44:09,040
see the layers are stacking up ui is
19205
16:44:06,160 --> 16:44:11,596
here the button is on the ui
19206
16:44:09,040 --> 16:44:14,319
ui is talking with auth service
19207
16:44:11,595 --> 16:44:16,399
here auth service is talking with the
19208
16:44:14,319 --> 16:44:18,080
provider the provider is talking with
19209
16:44:16,400 --> 16:44:19,680
firebase firebase is talking with the
19210
16:44:18,080 --> 16:44:21,276
firebase backend and maybe the backend
19211
16:44:19,680 --> 16:44:22,239
is also talking with some other services
19212
16:44:22,239 --> 16:44:27,915
that's end to end it's one end and the
19213
16:44:27,915 --> 16:44:31,680
you are basically by writing widget
19214
16:44:29,915 --> 16:44:35,115
tests you're doing end-to-end testing in
19215
16:44:31,680 --> 16:44:37,275
a way okay so that's widget tests
19216
16:44:35,116 --> 16:44:38,400
the other things are integration tests
19217
16:44:38,400 --> 16:44:43,520
an integration test is where you for
19218
16:44:40,879 --> 16:44:46,000
instance have a service which we have in
19219
16:44:43,519 --> 16:44:49,435
this case the auth service and the auth
19220
16:44:46,000 --> 16:44:50,955
service is in this case the auth service
19221
16:44:49,436 --> 16:44:53,596
constructor or the factory constructor
19222
16:44:50,955 --> 16:44:56,400
is talking with firebase so if you test
19223
16:44:53,595 --> 16:44:58,239
our off service the exact way it is in
19224
16:44:56,400 --> 16:44:59,360
that you go and say auth service
19225
16:45:00,400 --> 16:45:04,560
issue commands against this auth service
19226
16:45:02,559 --> 16:45:06,559
firebase you create a user you sign in
19227
16:45:04,559 --> 16:45:08,159
with the user you log out you send an
19228
16:45:08,160 --> 16:45:12,480
if you're doing these tests you are
19229
16:45:10,319 --> 16:45:15,116
actually doing integration tests so
19230
16:45:12,480 --> 16:45:17,360
you're because you're making sure that
19231
16:45:15,116 --> 16:45:19,916
the code is also working end-to-end but
19232
16:45:21,915 --> 16:45:25,839
i mentioned i mean you're now thinking
19233
16:45:23,595 --> 16:45:28,079
okay what if testing auth service the
19234
16:45:25,839 --> 16:45:29,275
way it is is integration tests how come
19235
16:45:28,080 --> 16:45:30,880
you said in the beginning of this
19236
16:45:29,275 --> 16:45:32,955
chapter that we're going to do unit
19237
16:45:32,955 --> 16:45:38,080
and that's what we need to talk about
19238
16:45:35,199 --> 16:45:39,199
now because you see in this unit test
19239
16:45:38,080 --> 16:45:40,796
exercise that we're going to do in this
19240
16:45:39,199 --> 16:45:42,635
chapter we're not actually going to call
19241
16:45:40,796 --> 16:45:45,756
firebase we're going to call we're going
19242
16:45:42,635 --> 16:45:47,915
to do something called mocking
19243
16:45:45,756 --> 16:45:50,239
i don't know if i've actually
19244
16:45:47,915 --> 16:45:52,319
mentioned some something here
19245
16:45:50,239 --> 16:45:54,319
yes i can see that later i'm actually
19246
16:45:54,319 --> 16:45:58,000
and mocking in english it could mean
19247
16:45:56,480 --> 16:45:59,916
that you're making fun of someone and
19248
16:45:58,000 --> 16:46:02,796
that's not this and what we're talking
19249
16:45:59,915 --> 16:46:06,955
about here mocking is kind of like you
19250
16:46:02,796 --> 16:46:08,480
imitating um a real service so imagine
19251
16:46:06,955 --> 16:46:10,479
you have the auth service the off
19252
16:46:08,480 --> 16:46:12,080
service has a firebase factory talks
19253
16:46:10,480 --> 16:46:13,520
with firebase and it turns talks with
19254
16:46:12,080 --> 16:46:15,436
the firebase code and then talks to the
19255
16:46:13,519 --> 16:46:17,680
backend we're going to get rid of all of
19256
16:46:15,436 --> 16:46:20,239
that pipeline and say we're going to
19257
16:46:17,680 --> 16:46:21,275
test off service but we're going to give
19258
16:46:21,275 --> 16:46:26,795
another provider a provider that we
19259
16:46:23,915 --> 16:46:28,719
control you see the fire the firebase
19260
16:46:26,796 --> 16:46:30,080
auth provider has a lot of code in it so
19261
16:46:30,080 --> 16:46:34,240
let's go in the firebase auth provider
19262
16:46:31,915 --> 16:46:36,479
it talks directly with firebase but what
19263
16:46:36,480 --> 16:46:41,520
auth provider that conforms to auth
19264
16:46:38,879 --> 16:46:43,915
provider and then write a lot of logic
19265
16:46:41,519 --> 16:46:46,719
in that auth provider and provide that
19266
16:46:43,915 --> 16:46:48,159
author provider to the auth service
19267
16:46:46,720 --> 16:46:50,880
now all of a sudden we have an auth
19268
16:46:48,160 --> 16:46:52,560
service that delegates all his tasks to
19269
16:46:54,000 --> 16:46:58,559
auth provider that we control the code
19270
16:46:56,400 --> 16:46:59,916
for so we know exactly what the sign-in
19271
16:46:58,559 --> 16:47:01,360
is going to do we know exactly what the
19272
16:46:59,915 --> 16:47:02,879
sign out is going to do or log in and
19273
16:47:01,360 --> 16:47:04,400
lock it depending on the terminology
19274
16:47:05,436 --> 16:47:09,275
what we are going to do in this chapter
19275
16:47:06,955 --> 16:47:11,360
is mocking and i'm going to explain that
19276
16:47:09,275 --> 16:47:13,595
soon so let's just jump over that for
19277
16:47:16,319 --> 16:47:20,480
the next thing that we need to talk
19278
16:47:20,480 --> 16:47:24,560
if you're coming from like a node
19279
16:47:22,879 --> 16:47:27,360
background if you've worked with nodejs
19280
16:47:24,559 --> 16:47:30,319
or express you know already about npm
19281
16:47:27,360 --> 16:47:33,040
which is the node package manager
19282
16:47:30,319 --> 16:47:34,559
and you know what dev dependencies are
19283
16:47:34,559 --> 16:47:39,756
if you're coming from an ios background
19284
16:47:37,680 --> 16:47:41,360
there isn't much of a dev dependency to
19285
16:47:39,756 --> 16:47:42,480
be honest with you except if you're
19286
16:47:41,360 --> 16:47:43,360
coming from an ios development
19287
16:47:42,480 --> 16:47:45,596
background then you know when you're
19288
16:47:43,360 --> 16:47:48,239
writing your tests those test frameworks
19289
16:47:45,595 --> 16:47:50,399
etc that you bring into your test target
19290
16:47:48,239 --> 16:47:52,559
there are inside their own target so
19291
16:47:50,400 --> 16:47:54,480
that they're not shipped with the final
19292
16:47:52,559 --> 16:47:55,595
product if you're not coming from any of
19293
16:47:54,480 --> 16:47:57,040
those backgrounds and you just want to
19294
16:47:55,595 --> 16:47:59,040
know what dev dependencies are all
19295
16:47:57,040 --> 16:48:01,915
explaining now you see when we're
19296
16:47:59,040 --> 16:48:04,796
working with our application if we go to
19297
16:48:04,796 --> 16:48:09,360
you'll see that we have a section here
19298
16:48:07,199 --> 16:48:11,839
called dependencies and at the moment we
19299
16:48:09,360 --> 16:48:13,756
have dependencies on various libraries
19300
16:48:13,756 --> 16:48:18,000
firebase auth cloud firestore and
19301
16:48:16,319 --> 16:48:20,400
firebase analytics these are the
19302
16:48:18,000 --> 16:48:22,559
dependencies or libraries that we're
19303
16:48:22,559 --> 16:48:25,519
which if you think this is our
19304
16:48:24,080 --> 16:48:27,916
application these are the various
19305
16:48:25,519 --> 16:48:28,955
libraries coming in and then we're at
19306
16:48:28,955 --> 16:48:32,239
actually at the end of this um
19307
16:48:30,879 --> 16:48:34,479
course we're gonna send our application
19308
16:48:32,239 --> 16:48:36,795
to app store and google play store
19309
16:48:34,480 --> 16:48:38,956
when we create our application to send
19310
16:48:36,796 --> 16:48:41,276
to these respective stores we're
19311
16:48:38,955 --> 16:48:44,159
bundling the application and all the
19312
16:48:41,275 --> 16:48:47,199
dependencies together and sending this
19313
16:48:44,160 --> 16:48:48,636
as a complete binary to the respective
19314
16:48:50,080 --> 16:48:54,319
however you also have a section here in
19315
16:48:52,239 --> 16:48:55,756
your pop spec yaml called def
19316
16:48:55,756 --> 16:49:01,595
now dev dependencies are dependencies
19317
16:48:59,116 --> 16:49:03,756
that you use and bring into your
19318
16:49:03,756 --> 16:49:06,796
during the development of your
19319
16:49:05,040 --> 16:49:08,720
application meaning that when you ship
19320
16:49:06,796 --> 16:49:09,436
your application which is a term used
19321
16:49:09,436 --> 16:49:12,239
saying that when you create the
19322
16:49:10,559 --> 16:49:14,159
application and post it to the
19323
16:49:12,239 --> 16:49:16,400
respective app store for instance for
19324
16:49:14,160 --> 16:49:18,080
review then those dependencies aren't
19325
16:49:18,080 --> 16:49:22,319
application so they're only inside your
19326
16:49:20,160 --> 16:49:23,916
application while you're developing it
19327
16:49:22,319 --> 16:49:25,519
and as soon as you package it up and
19328
16:49:23,915 --> 16:49:27,040
send it for release then those
19329
16:49:25,519 --> 16:49:28,879
dependencies are not going to be packed
19330
16:49:27,040 --> 16:49:29,840
inside the application all right
19331
16:49:42,720 --> 16:49:49,200
so as you can see here we need to bring
19332
16:49:49,360 --> 16:49:52,635
into our flutter application to make
19333
16:49:51,116 --> 16:49:55,040
sure that we can actually run our tests
19334
16:49:52,635 --> 16:49:56,479
so you will see here flutter test is
19335
16:49:55,040 --> 16:49:58,400
already included i'm going to show you
19336
16:49:56,480 --> 16:50:00,000
the command that you'll need to issue in
19337
16:49:58,400 --> 16:50:00,880
terminal in order to bring it manually
19338
16:50:00,879 --> 16:50:08,595
and that is if we go in here and just
19339
16:50:02,879 --> 16:50:08,595
type flutter pop add test dev
19340
16:50:15,680 --> 16:50:19,915
okay this job is done now now let's have
19341
16:50:19,915 --> 16:50:24,955
and you can see now we have a dev
19342
16:50:22,480 --> 16:50:26,720
dependency called test and that's how
19343
16:50:24,955 --> 16:50:28,635
you bring it into your application using
19344
16:50:26,720 --> 16:50:31,595
this command so i'm going to bring it up
19345
16:50:28,635 --> 16:50:35,519
again just so you see it flutter pop add
19346
16:50:31,595 --> 16:50:37,199
test and and a dash dash dev if as i
19347
16:50:37,199 --> 16:50:40,795
node.js developer you'll know this from
19348
16:50:40,796 --> 16:50:46,160
d which adds it as a development
19349
16:50:44,000 --> 16:50:48,635
requirement or dependency to your
19350
16:50:48,635 --> 16:50:52,159
i'm not going to assume that you brought
19351
16:50:50,319 --> 16:50:53,519
in this test package into your
19352
16:50:52,160 --> 16:50:55,756
application with the command that i
19353
16:50:53,519 --> 16:50:57,839
provided here for you in the terminal so
19354
16:50:55,756 --> 16:51:00,319
if then you look at your pops back yaml
19355
16:50:57,839 --> 16:51:02,239
file so i'm going to bring this down
19356
16:51:00,319 --> 16:51:04,000
if you look at your pop spec yaml file
19357
16:51:02,239 --> 16:51:06,479
inside dev dependency then you should
19358
16:51:04,000 --> 16:51:08,400
have this test package only inside your
19359
16:51:06,480 --> 16:51:10,160
dev dependencies if you see that is
19360
16:51:08,400 --> 16:51:12,160
brought into the dependency section that
19361
16:51:10,160 --> 16:51:14,320
is incorrect it shouldn't be there and
19362
16:51:12,160 --> 16:51:16,956
that is because you've missed perhaps
19363
16:51:14,319 --> 16:51:19,915
adding the dash dash dev at the end of
19364
16:51:16,955 --> 16:51:21,595
your flutter pop add test command so if
19365
16:51:21,595 --> 16:51:25,435
then test is going to be added to
19366
16:51:23,360 --> 16:51:29,520
dependencies and that's incorrect so
19367
16:51:25,436 --> 16:51:29,520
make sure that you fix that error
19368
16:51:30,000 --> 16:51:36,720
okay so let's go to the next section and
19369
16:51:34,239 --> 16:51:39,115
talk about that now if you bring up your
19370
16:51:36,720 --> 16:51:41,116
explorer you will notice that if you go
19371
16:51:39,116 --> 16:51:43,680
to your test folder the entire test
19372
16:51:41,116 --> 16:51:45,360
folder at the moment is marked as red
19373
16:51:45,360 --> 16:51:50,000
uh actually it's not marked as red like
19374
16:51:50,000 --> 16:51:54,955
rendered in red color that's what i mean
19375
16:51:54,955 --> 16:52:00,080
heard in in the wrong tone so if you go
19376
16:51:57,915 --> 16:52:02,239
in there that folder was read and then
19377
16:52:00,080 --> 16:52:04,160
if you click on on this file which is
19378
16:52:02,239 --> 16:52:06,159
called a widget test that file is also
19379
16:52:04,160 --> 16:52:07,596
red has a lot of errors here actually no
19380
16:52:06,160 --> 16:52:08,560
it has one error because it's creating
19381
16:52:10,239 --> 16:52:13,915
what we need to do in here because we
19382
16:52:11,915 --> 16:52:15,839
don't need this existing test you see
19383
16:52:13,915 --> 16:52:17,839
this test was created for us when we
19384
16:52:15,839 --> 16:52:20,000
created our flutter application we need
19385
16:52:17,839 --> 16:52:22,159
to get rid of it okay so let's go in
19386
16:52:20,000 --> 16:52:26,160
here and right click on it and just say
19387
16:52:22,160 --> 16:52:27,840
delete and that file is gone okay
19388
16:52:26,160 --> 16:52:29,116
so that's the first thing that we have
19389
16:52:29,116 --> 16:52:33,116
and collapse this leap folder here as
19390
16:52:33,116 --> 16:52:36,955
now what we need to do here as a caption
19391
16:52:35,040 --> 16:52:40,955
indicates we need to create a new file
19392
16:52:36,955 --> 16:52:44,319
called auth test dot dart okay
19393
16:52:40,955 --> 16:52:47,756
so let's go ahead and do that under the
19394
16:52:47,756 --> 16:52:52,480
let me go ahead and do that right now
19395
16:52:50,559 --> 16:52:55,519
under the test folder right click and
19396
16:52:52,480 --> 16:52:56,480
say new file and then call it off test
19397
16:52:59,595 --> 16:53:04,635
okay and what we need to do then in this
19398
16:53:02,319 --> 16:53:08,239
off test start right now this function
19399
16:53:04,635 --> 16:53:10,635
is completely empty so let's first
19400
16:53:10,635 --> 16:53:14,796
like that and you can see as soon as we
19401
16:53:12,635 --> 16:53:16,400
add the main function in here dart is
19402
16:53:14,796 --> 16:53:18,400
intelligent enough to give us a run and
19403
16:53:16,400 --> 16:53:20,000
a debug functionality here and that's
19404
16:53:18,400 --> 16:53:22,160
displayed in visual studio code i think
19405
16:53:20,000 --> 16:53:24,879
android studio also does the same thing
19406
16:53:22,160 --> 16:53:27,276
i don't think vim is availa is able to
19407
16:53:24,879 --> 16:53:29,360
do that it may be vim is time and time
19408
16:53:27,275 --> 16:53:31,680
again has surprised me with all this uh
19409
16:53:33,275 --> 16:53:38,239
um on the tool or the text editor or the
19410
16:53:36,239 --> 16:53:39,756
id that you're using this could be
19411
16:53:38,239 --> 16:53:41,519
different but don't worry about it we're
19412
16:53:39,756 --> 16:53:43,520
not actually going to click on these
19413
16:53:41,519 --> 16:53:45,039
things so if you don't see these things
19414
16:53:43,519 --> 16:53:47,199
in your text editor you don't have to
19415
16:53:49,839 --> 16:53:54,399
adding the test package now that we've
19416
16:53:52,635 --> 16:53:56,159
imported test packages that depends we
19417
16:53:54,400 --> 16:53:58,400
also need to import it so let's go in
19418
16:53:58,400 --> 16:54:03,275
and get rid of this editor sorry
19419
16:54:01,199 --> 16:54:05,595
explorer on the left hand side and i'm
19420
16:54:03,275 --> 16:54:07,115
going to say if we import a package
19421
16:54:07,116 --> 16:54:13,840
and there's a file in there called test
19422
16:54:08,955 --> 16:54:13,839
start so now we're ready basically okay
19423
16:54:18,319 --> 16:54:22,720
you may not have noticed it but
19424
16:54:20,400 --> 16:54:25,200
i have this application already running
19425
16:54:22,720 --> 16:54:26,635
on my actual android phone as we've done
19426
16:54:25,199 --> 16:54:28,879
in the previous chapter so i never
19427
16:54:26,635 --> 16:54:30,319
killed this application without a reason
19428
16:54:28,879 --> 16:54:33,115
it's always running on that android
19429
16:54:30,319 --> 16:54:36,239
phone i can always bring it up with scr
19430
16:54:33,116 --> 16:54:39,040
cpy so i can see right here that is
19431
16:54:40,239 --> 16:54:44,319
remember one of the previous chapters
19432
16:54:42,239 --> 16:54:46,000
one of the first previous chapters when
19433
16:54:44,319 --> 16:54:48,635
we talked about adding firebase to our
19434
16:54:46,000 --> 16:54:50,635
application i think it was chapter five
19435
16:54:48,635 --> 16:54:53,680
or six it was very early in the course
19436
16:54:50,635 --> 16:54:55,199
when we brought in firebase we need to
19437
16:54:53,680 --> 16:54:56,559
we needed to kill the application
19438
16:54:55,199 --> 16:54:58,955
meaning that we needed to terminate the
19439
16:54:56,559 --> 16:54:59,756
application and run it from scratch
19440
16:54:59,756 --> 16:55:03,360
depending on some dependent actually no
19441
16:55:01,756 --> 16:55:05,040
i don't think it's depending when you
19442
16:55:03,360 --> 16:55:06,879
bring in a new dependency in your
19443
16:55:05,040 --> 16:55:09,040
project you need to always ensure that
19444
16:55:06,879 --> 16:55:10,795
you rebuild your project so you cannot
19445
16:55:09,040 --> 16:55:13,116
do hot reload and hot restart because
19446
16:55:10,796 --> 16:55:14,880
some of these dependencies they actually
19447
16:55:13,116 --> 16:55:16,880
need your application to be
19448
16:55:18,160 --> 16:55:22,796
then be brought into your binary so hot
19449
16:55:21,116 --> 16:55:23,680
reload and hot restart aren't going to
19450
16:55:23,680 --> 16:55:28,635
like be able to bring those dependencies
19451
16:55:26,796 --> 16:55:30,796
yet at least into your flutter
19452
16:55:28,635 --> 16:55:34,479
application so what i need you to do
19453
16:55:30,796 --> 16:55:36,880
is to stop the execution of your program
19454
16:55:34,480 --> 16:55:41,116
and then let's go in here save these
19455
16:55:42,879 --> 16:55:47,839
and let's run the application
19456
16:55:45,360 --> 16:55:49,199
without debugging and let's see if this
19457
16:55:47,839 --> 16:55:50,955
is going to launch the application
19458
16:55:49,199 --> 16:55:53,199
correctly on the right device as well
19459
16:55:50,955 --> 16:55:55,199
and i can see yes it is going to run it
19460
16:55:53,199 --> 16:55:58,479
on the correct device i change the
19461
16:55:55,199 --> 16:55:59,435
screen layout a little bit here as well
19462
16:55:59,436 --> 16:56:05,916
let's just then wait for uh this gradle
19463
16:56:02,319 --> 16:56:05,915
belt to finish doing its work
19464
16:56:06,400 --> 16:56:09,596
it might take some time depending on the
19465
16:56:08,000 --> 16:56:11,519
changes that you've made to the
19466
16:56:09,595 --> 16:56:13,275
application in this case we brought in a
19467
16:56:11,519 --> 16:56:14,795
whole new package called testing to our
19468
16:56:14,796 --> 16:56:19,040
it is taking its time and that's
19469
16:56:22,879 --> 16:56:29,435
run our code without a problem great
19470
16:56:26,319 --> 16:56:33,116
stuff for this chapter i don't think we
19471
16:56:29,436 --> 16:56:34,720
need our um device with scr cpy if
19472
16:56:33,116 --> 16:56:36,560
you're using ios simulator i don't think
19473
16:56:34,720 --> 16:56:37,840
you need it if you're using an emulator
19474
16:56:36,559 --> 16:56:39,360
i don't think you need it either so we
19475
16:56:37,839 --> 16:56:40,635
could just get rid of it so we don't
19476
16:56:39,360 --> 16:56:42,239
have to display it on the screen but
19477
16:56:40,635 --> 16:56:43,116
remember my application is still running
19478
16:56:44,319 --> 16:56:48,955
um let me get rid of this here get rid
19479
16:56:46,635 --> 16:56:52,239
of the widget inspector get rid of the
19480
16:56:48,955 --> 16:56:54,955
main dart and let's go to our auth test
19481
16:56:56,796 --> 16:57:02,160
now one thing that we also need to fix
19482
16:56:59,199 --> 16:57:04,479
before we start writing our tests is
19483
16:57:02,160 --> 16:57:08,560
this little functionality here this
19484
16:57:11,116 --> 16:57:16,080
you'll see that it has the way we left
19485
16:57:16,080 --> 16:57:21,680
um we added a member variable to this
19486
16:57:19,199 --> 16:57:23,199
off user immutable class here called is
19487
16:57:21,680 --> 16:57:25,360
email verified and the way we're
19488
16:57:23,199 --> 16:57:27,755
constructing this auth user if you see
19489
16:57:25,360 --> 16:57:30,160
here we're saying off user just give us
19490
16:57:27,756 --> 16:57:33,756
this william so if from anywhere inside
19491
16:57:34,080 --> 16:57:37,200
a if from anywhere inside of your
19492
16:57:36,000 --> 16:57:39,199
application you want to create an
19493
16:57:37,199 --> 16:57:41,595
instance of off user you'll probably do
19494
16:57:39,199 --> 16:57:44,559
like this off user and then you have to
19495
16:57:41,595 --> 16:57:47,040
pass that boolean is email verified
19496
16:57:50,955 --> 16:57:56,239
if i as a programmer see auth user true
19497
16:57:53,595 --> 16:57:58,795
obvious or false i don't understand what
19498
16:57:56,239 --> 16:58:00,400
this true or false is what does that
19499
16:57:58,796 --> 16:58:02,240
even mean does that mean the auth user
19500
16:58:00,400 --> 16:58:03,680
is turned on is turned off what does it
19501
16:58:03,680 --> 16:58:10,879
for that dart has the capability to give
19502
16:58:07,436 --> 16:58:11,916
you required named parameters and that
19503
16:58:11,915 --> 16:58:18,079
instead of passing true in here you will
19504
16:58:14,319 --> 16:58:21,915
be forced to write off user his email
19505
16:58:18,080 --> 16:58:24,160
verified true or false like that
19506
16:58:21,915 --> 16:58:25,915
so in order to do that as the caption
19507
16:58:24,160 --> 16:58:27,596
indicates we need to go and make this a
19508
16:58:25,915 --> 16:58:29,199
required parameter and the way to do
19509
16:58:29,199 --> 16:58:33,755
wrap it inside curly brackets like this
19510
16:58:31,360 --> 16:58:36,796
and then prefix it with the word for the
19511
16:58:36,796 --> 16:58:40,560
so after you've done that and this
19512
16:58:38,955 --> 16:58:43,436
function is not going to work anymore
19513
16:58:40,559 --> 16:58:45,115
because this parameter is missing so
19514
16:58:49,519 --> 16:58:53,275
okay and let's just move that remove
19515
16:58:53,275 --> 16:58:57,839
now we've achieved what we said we're
19516
16:58:58,955 --> 16:59:03,436
um because you see we're not gonna we're
19517
16:59:01,595 --> 16:59:05,360
not actually you may think that okay
19518
16:59:03,436 --> 16:59:07,680
we've changed this parameter to required
19519
16:59:05,360 --> 16:59:09,360
so where are all the errors in our code
19520
16:59:07,680 --> 16:59:11,595
why didn't anything break and that's one
19521
16:59:09,360 --> 16:59:13,116
of the beauties of what we've done so
19522
16:59:11,595 --> 16:59:15,595
far and that we've abstracted away so
19523
16:59:13,116 --> 16:59:18,720
much code that the code is a lot more
19524
16:59:15,595 --> 16:59:20,795
robust now so because nowhere inside our
19525
16:59:18,720 --> 16:59:24,319
application we're actually creating us
19526
16:59:20,796 --> 16:59:26,400
users except from this factory function
19527
16:59:24,319 --> 16:59:28,400
the only place we have to fix this is
19528
16:59:26,400 --> 16:59:29,596
email verified is inside this factory
19529
16:59:29,595 --> 16:59:34,000
to me that's beautiful because
19530
16:59:31,680 --> 16:59:36,720
doing something like drastic by adding a
19531
16:59:34,000 --> 16:59:39,519
required parameter to a class it didn't
19532
16:59:36,720 --> 16:59:42,520
break anything so we're just good to go
19533
16:59:44,955 --> 16:59:50,479
now this is the point that i mentioned
19534
16:59:47,199 --> 16:59:52,879
previously that we need a mock off
19535
16:59:52,879 --> 16:59:57,595
in order to do a mock author provider i
19536
16:59:55,756 --> 17:00:00,319
need to go a little bit more into what
19537
16:59:57,595 --> 17:00:02,239
mocks are and why we need them you see
19538
17:00:02,239 --> 17:00:06,720
we have especially in testing as well or
19539
17:00:04,635 --> 17:00:08,796
even as the app architecture level or
19540
17:00:06,720 --> 17:00:10,720
software architect architecture level we
19541
17:00:08,796 --> 17:00:12,160
have something called dependency in
19542
17:00:14,000 --> 17:00:18,559
just quickly explaining it is very
19543
17:00:16,239 --> 17:00:21,360
similar to our auth service let's have a
19544
17:00:18,559 --> 17:00:24,559
look at our off service here you see off
19545
17:00:21,360 --> 17:00:27,199
service is dependent on an auth provider
19546
17:00:24,559 --> 17:00:30,079
and it's not just making the assumption
19547
17:00:27,199 --> 17:00:32,559
that it's auth providers always firebase
19548
17:00:30,080 --> 17:00:34,880
it provides a factory for firebase but
19549
17:00:32,559 --> 17:00:37,435
it's not making an assumption about that
19550
17:00:34,879 --> 17:00:38,559
hey i'm always locked to firebase auth
19551
17:00:38,559 --> 17:00:43,680
this is dependency injection so this off
19552
17:00:41,360 --> 17:00:44,400
service is dependent on a provider using
19553
17:00:44,400 --> 17:00:49,916
constant constructor initializer we're
19554
17:00:47,275 --> 17:00:50,879
injecting the provider into it
19555
17:00:50,879 --> 17:00:55,040
in a nutshell is dependency injection in
19556
17:00:55,040 --> 17:00:58,559
you could go into a lot more details
19557
17:00:56,635 --> 17:00:59,436
about it but we don't have time for it
19558
17:00:59,436 --> 17:01:04,480
so what is a mock the mock goes very
19559
17:01:04,480 --> 17:01:09,040
hand in hand with dependency injection
19560
17:01:07,040 --> 17:01:11,360
in that in this case you can see we have
19561
17:01:09,040 --> 17:01:13,520
an off service that is mirroring the
19562
17:01:11,360 --> 17:01:15,680
functionality of its provider which you
19563
17:01:16,400 --> 17:01:19,916
the provider that we're using at the
19564
17:01:17,915 --> 17:01:22,000
moment is called firebase what if we
19565
17:01:22,000 --> 17:01:27,595
completely new provider that we have
19566
17:01:24,239 --> 17:01:30,000
complete control over we can we can make
19567
17:01:27,595 --> 17:01:32,000
sure that it conforms and implements
19568
17:01:30,000 --> 17:01:33,595
auth provider and we can make sure that
19569
17:01:32,000 --> 17:01:35,756
it implements all those functionalities
19570
17:01:33,595 --> 17:01:37,915
that is that auth provider implements
19571
17:01:35,756 --> 17:01:40,955
and overrides all those but we have some
19572
17:01:43,680 --> 17:01:48,160
then we will give this auth provider to
19573
17:01:45,915 --> 17:01:51,435
our auth service and then let the auth
19574
17:01:48,160 --> 17:01:54,160
service do its magic and and mirror all
19575
17:01:51,436 --> 17:01:58,000
those functionalities of the provider so
19576
17:01:54,160 --> 17:02:00,840
we're gonna mock an off provider and
19577
17:02:00,839 --> 17:02:05,839
service so that's what mocking is when
19578
17:02:05,839 --> 17:02:10,719
a new function or a class and then you
19579
17:02:13,116 --> 17:02:17,840
place and then test that another place
19580
17:02:18,400 --> 17:02:22,880
so let's go in our off test dart file
19581
17:02:21,360 --> 17:02:25,915
that we have right here i'm going to
19582
17:02:22,879 --> 17:02:31,275
command s on it and let's go and create
19583
17:02:25,915 --> 17:02:33,040
our little off like mock off provider
19584
17:02:31,275 --> 17:02:35,839
so i'm gonna go in here and i'm just
19585
17:02:33,040 --> 17:02:37,360
gonna say class mock off provider and
19586
17:02:35,839 --> 17:02:39,915
suggest you do the same thing and this
19587
17:02:41,839 --> 17:02:48,559
the auth provider okay auto imported for
19588
17:02:50,080 --> 17:02:53,520
now what we need to do is just to get
19589
17:02:53,519 --> 17:02:57,915
to implement all the functionalities
19590
17:02:55,519 --> 17:03:00,159
that the auth provider apps abstract
19591
17:02:57,915 --> 17:03:02,719
class requires us to implement so i'm
19592
17:03:00,160 --> 17:03:04,956
going to command dot on it and
19593
17:03:02,720 --> 17:03:07,275
respectfully ask visual studio code to
19594
17:03:04,955 --> 17:03:09,275
create those six missing overrides thank
19595
17:03:07,275 --> 17:03:13,199
you so much visual studio code for
19596
17:03:14,160 --> 17:03:19,520
now what we need to do is just to do the
19597
17:03:16,480 --> 17:03:22,160
heavy lifting of this mock auth provider
19598
17:03:19,519 --> 17:03:25,595
which means to go ahead and create the
19599
17:03:22,160 --> 17:03:27,200
functionality for the auth provider okay
19600
17:03:25,595 --> 17:03:28,479
i understand that the code is completely
19601
17:03:27,199 --> 17:03:30,000
ginormous right now so i'm going to
19602
17:03:28,480 --> 17:03:32,080
decrease the size a little bit so you
19603
17:03:32,080 --> 17:03:37,680
so let's go ahead and take care of the
19604
17:03:34,879 --> 17:03:38,839
first function in here which is create
19605
17:03:47,436 --> 17:03:50,955
has a function called initialize all
19606
17:03:50,955 --> 17:03:56,879
now when we're using auth provider in
19607
17:03:53,680 --> 17:03:59,519
the context of firebase firebase
19608
17:03:56,879 --> 17:04:01,519
internally has the concept of whether it
19609
17:04:01,519 --> 17:04:06,000
but when we're creating a mock auth
19610
17:04:03,519 --> 17:04:09,039
provider where is that functionality we
19611
17:04:06,000 --> 17:04:11,275
don't keep track yet of whether our mock
19612
17:04:09,040 --> 17:04:12,160
auth provider is actually initialized or
19613
17:04:12,160 --> 17:04:18,720
and we just have an initialize function
19614
17:04:14,879 --> 17:04:21,519
but what if someone calls create user on
19615
17:04:18,720 --> 17:04:24,400
our mock auth provider without having
19616
17:04:21,519 --> 17:04:26,399
initialized the provider yet and that's
19617
17:04:26,400 --> 17:04:31,275
so let's go ahead and keep track of that
19618
17:04:29,199 --> 17:04:34,159
so what we're going to do here is we're
19619
17:04:31,275 --> 17:04:36,879
just going to say var is initialized
19620
17:04:34,160 --> 17:04:39,520
it is false to begin with okay
19621
17:04:36,879 --> 17:04:42,000
and the reason i'm saying underscore is
19622
17:04:42,000 --> 17:04:47,519
this is making this property pretty much
19623
17:04:44,480 --> 17:04:49,200
private to our mock-off provider so
19624
17:04:47,519 --> 17:04:50,795
we're indicating to the outside world
19625
17:04:49,199 --> 17:04:52,559
that hey you shouldn't be reading from
19626
17:04:50,796 --> 17:04:54,956
this property or writing to this
19627
17:04:55,680 --> 17:05:00,635
okay that is done now let's create a
19628
17:04:58,000 --> 17:05:03,275
little getter for this property so that
19629
17:05:00,635 --> 17:05:05,680
when we're testing our mock auth
19630
17:05:03,275 --> 17:05:07,756
provider we can actually say
19631
17:05:07,756 --> 17:05:11,680
and we can also create a test for a mock
19632
17:05:10,319 --> 17:05:14,559
auth provider which we're actually going
19633
17:05:11,680 --> 17:05:16,319
to do is to say okay when we create the
19634
17:05:14,559 --> 17:05:19,199
mock auth provider it shouldn't
19635
17:05:16,319 --> 17:05:21,756
initially be initialized however after
19636
17:05:19,199 --> 17:05:24,000
calling initialize on it then we make a
19637
17:05:21,756 --> 17:05:26,720
test to make sure that initialize flag
19638
17:05:24,000 --> 17:05:28,319
is set to true so let's in order to do
19639
17:05:26,720 --> 17:05:30,480
that we need to be able to read this is
19640
17:05:28,319 --> 17:05:32,879
initialize flag let's go ahead and
19641
17:05:30,480 --> 17:05:34,956
create a boolean getter for it we call
19642
17:05:34,955 --> 17:05:41,595
it's initialized and we just return is
19643
17:05:43,595 --> 17:05:47,519
now let's go into our create user i'm
19644
17:05:46,080 --> 17:05:49,200
going to put a comma at the end of that
19645
17:05:47,519 --> 17:05:51,115
parameter i'm also going to take the
19646
17:05:49,199 --> 17:05:52,955
liberty of going and creating and
19647
17:05:51,116 --> 17:05:54,635
putting a comma at the end of login
19648
17:05:54,635 --> 17:05:59,756
and that's the only two places that had
19649
17:05:57,839 --> 17:06:01,435
that required a comma at the end of
19650
17:05:59,756 --> 17:06:03,680
their parameter list so now dart
19651
17:06:01,436 --> 17:06:06,080
formatter is able to format the code a
19652
17:06:06,319 --> 17:06:11,680
okay let's go to create user now you see
19653
17:06:09,595 --> 17:06:13,199
in create user i'm pretty much in all
19654
17:06:11,680 --> 17:06:14,796
these functions that we're writing in
19655
17:06:13,199 --> 17:06:16,635
here for instance login send email
19656
17:06:14,796 --> 17:06:20,080
verification we're we need to make sure
19657
17:06:16,635 --> 17:06:22,319
that this mock auth provider is already
19658
17:06:20,080 --> 17:06:24,796
initialized so we're actually going to
19659
17:06:22,319 --> 17:06:26,796
throw an exception if you call these
19660
17:06:24,796 --> 17:06:29,040
functions that require initialization
19661
17:06:26,796 --> 17:06:32,880
without having initialized the mock auth
19662
17:06:29,040 --> 17:06:36,720
provider first so let's go and define a
19663
17:06:36,720 --> 17:06:40,720
so let me see actually if i have written
19664
17:06:40,720 --> 17:06:45,275
nope so let's go in here and just say
19665
17:06:51,040 --> 17:06:54,559
exception so you should know this from
19666
17:06:59,040 --> 17:07:03,756
so what we need to do in here we need to
19667
17:07:03,756 --> 17:07:08,559
is initialized if it's not initialized
19668
17:07:14,080 --> 17:07:17,596
so that's an if statement it's a
19669
17:07:15,756 --> 17:07:19,520
one-liner that's why we don't really
19670
17:07:17,595 --> 17:07:20,795
break it in here otherwise you put curly
19671
17:07:19,519 --> 17:07:22,319
brackets in here and then do the
19672
17:07:20,796 --> 17:07:24,635
throwing in there but you could also use
19673
17:07:22,319 --> 17:07:25,915
a one-liner if statement if that's all
19674
17:07:25,915 --> 17:07:29,755
what you're doing just one line of code
19675
17:07:28,000 --> 17:07:31,519
all right and i kind of like these
19676
17:07:29,756 --> 17:07:34,955
one-liner if statements to be honest
19677
17:07:31,519 --> 17:07:36,719
with you so i hope you got this if the
19678
17:07:34,955 --> 17:07:40,239
mock auth provider is not initialized
19679
17:07:36,720 --> 17:07:41,756
throw that particular exception
19680
17:07:40,239 --> 17:07:44,319
and what we're going to do is just we're
19681
17:07:41,756 --> 17:07:46,080
going to fake creating a user okay so
19682
17:07:46,080 --> 17:07:50,080
if you call the create user on firebase
19683
17:07:48,480 --> 17:07:51,916
for instance it probably needs to go and
19684
17:07:50,080 --> 17:07:54,160
talk with firebase back-end so it's
19685
17:07:51,915 --> 17:07:57,680
going to take some time so let's build
19686
17:07:54,160 --> 17:07:58,880
in some little uh delay in here
19687
17:07:57,680 --> 17:08:00,559
and what we're going to do is just to
19688
17:08:02,559 --> 17:08:06,399
and here you have to pass the duration
19689
17:08:04,000 --> 17:08:08,480
to it so we say const duration
19690
17:08:14,160 --> 17:08:20,400
let's just say one in here and remember
19691
17:08:17,275 --> 17:08:22,559
future delayed if i go and move over
19692
17:08:20,400 --> 17:08:25,520
it's a function signature it returns a
19693
17:08:22,559 --> 17:08:27,839
future of dynamic so by creating a
19694
17:08:25,519 --> 17:08:30,719
future you're not actually waiting on it
19695
17:08:27,839 --> 17:08:32,839
so let's mark our function as async and
19696
17:08:40,955 --> 17:08:45,275
this create user actually returns an
19697
17:08:43,360 --> 17:08:48,480
author user but remember also in
19698
17:08:45,275 --> 17:08:50,400
firebase um or i don't actually know if
19699
17:08:48,480 --> 17:08:52,400
firebase works like this by but by
19700
17:08:50,400 --> 17:08:55,116
creating a user what we're going to do
19701
17:08:52,400 --> 17:08:58,796
in our mock auth provider is actually
19702
17:08:55,116 --> 17:08:59,596
logging that user in as well okay
19703
17:08:59,595 --> 17:09:04,795
let's just say you see login returns
19704
17:09:02,080 --> 17:09:06,635
also a future of auth user so at the end
19705
17:09:04,796 --> 17:09:08,319
of this create user we're just going to
19706
17:09:06,635 --> 17:09:10,080
make our lives easier and just return
19707
17:09:08,319 --> 17:09:11,275
the result of logging in so let's just
19708
17:09:17,595 --> 17:09:23,040
so this is a very dumb and very easy
19709
17:09:20,480 --> 17:09:26,319
mock implementation of create user in
19710
17:09:23,040 --> 17:09:27,756
itself it does three things checks to
19711
17:09:26,319 --> 17:09:29,595
make sure that you're initialized and if
19712
17:09:27,756 --> 17:09:30,880
you're not initialized it throws an
19713
17:09:30,879 --> 17:09:37,435
it does a mock uh one second wait just
19714
17:09:34,559 --> 17:09:39,360
to like fake making an api call and the
19715
17:09:37,436 --> 17:09:40,955
third thing that it does is that it
19716
17:09:39,360 --> 17:09:43,116
calls the login function with the same
19717
17:09:40,955 --> 17:09:45,519
email and password and returns the
19718
17:09:43,116 --> 17:09:48,796
result of login just so that it can get
19719
17:09:49,275 --> 17:09:54,559
okay now we need the mock current user
19720
17:09:54,559 --> 17:09:59,040
how do we do that how do we get a
19721
17:09:59,040 --> 17:10:03,200
firebase has the ability to keep track
19722
17:10:01,199 --> 17:10:05,199
of the current user but how do we do
19723
17:10:03,199 --> 17:10:07,275
that we can't just go and delegate this
19724
17:10:05,199 --> 17:10:10,079
functionality to firebase right now so
19725
17:10:07,275 --> 17:10:12,795
we also need to create an auth user in
19726
17:10:10,080 --> 17:10:15,520
here okay so let's go to deter mock auth
19727
17:10:15,519 --> 17:10:20,319
off is initialized or below it doesn't
19728
17:10:17,915 --> 17:10:22,319
matter somewhere i'm gonna do it above
19729
17:10:23,595 --> 17:10:29,756
you see in far in a dart if you make a
19730
17:10:27,040 --> 17:10:32,400
member variable optional by default it
19731
17:10:29,756 --> 17:10:34,400
is null so it has no value so you don't
19732
17:10:32,400 --> 17:10:35,916
have to actually go and say no and you
19733
17:10:34,400 --> 17:10:38,560
can see it says don't explicitly
19734
17:10:35,915 --> 17:10:40,635
initialize variables to no good good
19735
17:10:40,635 --> 17:10:44,000
i don't have a user that we're
19736
17:10:42,319 --> 17:10:46,159
internally going to manage and i'm
19737
17:10:44,000 --> 17:10:48,796
actually going to make it prefix it with
19738
17:10:46,160 --> 17:10:50,796
an underscore so that it is marked as a
19739
17:10:48,796 --> 17:10:52,080
private function as a private member
19740
17:10:52,080 --> 17:10:58,796
then in the current user simply return
19741
17:11:01,595 --> 17:11:06,159
we need to go and take care of the
19742
17:11:03,915 --> 17:11:07,199
initialize function let's see if we can
19743
17:11:11,839 --> 17:11:15,679
the only thing we're going to do in
19744
17:11:12,955 --> 17:11:18,239
initializers we're going to fake waiting
19745
17:11:18,239 --> 17:11:25,519
and and then set r is initialize flag to
19746
17:11:22,080 --> 17:11:27,756
true so let's grab this code of a weight
19747
17:11:25,519 --> 17:11:30,319
from our create user function and then
19748
17:11:27,756 --> 17:11:31,840
bring it to initialize and then just say
19749
17:11:31,839 --> 17:11:35,039
asynchronous and then we're gonna just
19750
17:11:35,040 --> 17:11:38,480
and we're just going to say initialized
19751
17:11:38,480 --> 17:11:43,116
so that was an easy one all right so
19752
17:11:43,519 --> 17:11:48,635
then the meatiest part of our
19753
17:11:46,879 --> 17:11:51,040
mock author provider is actually the
19754
17:11:48,635 --> 17:11:54,080
login function because it's not that
19755
17:11:51,040 --> 17:11:56,400
it's doing login but it's also
19756
17:11:54,080 --> 17:11:58,635
the function that the register
19757
17:11:56,400 --> 17:11:59,840
function is using or do we say create
19758
17:11:59,839 --> 17:12:03,435
create user so that function is also
19759
17:12:03,436 --> 17:12:07,275
it's calling the login function so we
19760
17:12:05,756 --> 17:12:10,239
need to really test this function to
19761
17:12:07,275 --> 17:12:12,159
ensure that it's working properly okay
19762
17:12:10,239 --> 17:12:13,839
as i mentioned before in most of these
19763
17:12:12,160 --> 17:12:15,840
functions when we need to make sure that
19764
17:12:13,839 --> 17:12:17,435
our mock auth providers initialize
19765
17:12:15,839 --> 17:12:20,079
before these functions are called on
19766
17:12:17,436 --> 17:12:22,796
them so let's go and grab this code you
19767
17:12:20,080 --> 17:12:26,400
see it says if is initialized and bring
19768
17:12:22,796 --> 17:12:27,840
that code as well in our login function
19769
17:12:26,400 --> 17:12:29,840
so that's the first thing that we're
19770
17:12:30,879 --> 17:12:36,319
we're also going to build in some fake
19771
17:12:33,595 --> 17:12:38,879
functionality into the login function
19772
17:12:36,319 --> 17:12:40,879
just so we can write tests for them
19773
17:12:38,879 --> 17:12:43,115
because you see in the real world you
19774
17:12:40,879 --> 17:12:45,115
probably have like lots and lots of real
19775
17:12:45,116 --> 17:12:49,916
inside your uh auth providers and auth
19776
17:12:47,915 --> 17:12:51,435
services but we don't have all that real
19777
17:12:49,915 --> 17:12:53,519
logic right now because our application
19778
17:12:51,436 --> 17:12:55,436
is quite small right now so we're gonna
19779
17:12:53,519 --> 17:12:58,559
build some fake functionality into our
19780
17:12:55,436 --> 17:13:00,319
mod provider and then sorry in our mock
19781
17:12:58,559 --> 17:13:03,040
auth provider and then we're going to
19782
17:13:03,040 --> 17:13:07,520
scenarios so you learn about mocking and
19783
17:13:05,680 --> 17:13:09,199
you'll also learn about writing tests
19784
17:13:07,519 --> 17:13:12,000
for those mocks okay so that's the
19785
17:13:09,199 --> 17:13:12,795
entire purpose of this chapter
19786
17:13:12,796 --> 17:13:16,000
what we're going to do then is we're
19787
17:13:16,000 --> 17:13:20,319
and so we're going to make up an email
19788
17:13:18,319 --> 17:13:21,519
that we don't like we're going to say if
19789
17:13:24,160 --> 17:13:29,116
then throw user not found exception okay
19790
17:13:27,595 --> 17:13:31,275
so if you're trying to log in with this
19791
17:13:29,116 --> 17:13:33,916
email address we're just gonna say user
19792
17:13:38,955 --> 17:13:42,955
unlike the foobar password either then
19793
17:13:42,955 --> 17:13:47,839
wrong password off exception so
19794
17:13:47,839 --> 17:13:53,275
login in itself if we go to our
19795
17:13:51,275 --> 17:13:56,400
firebase auth provider so go to this
19796
17:13:53,275 --> 17:13:58,079
file firebase auth provider dart it has
19797
17:13:56,400 --> 17:14:00,239
those functionalities like if you have a
19798
17:13:58,080 --> 17:14:01,916
look at login it has a functionality
19799
17:14:00,239 --> 17:14:03,915
like handling user not found wrong
19800
17:14:01,915 --> 17:14:05,275
password generic auth exception so what
19801
17:14:03,915 --> 17:14:07,115
we're doing is that we're creating some
19802
17:14:05,275 --> 17:14:09,040
sort of a mock of kind of the same thing
19803
17:14:07,116 --> 17:14:11,840
but we're locking it to specific email
19804
17:14:12,000 --> 17:14:16,319
okay so that's for password we don't
19805
17:14:13,839 --> 17:14:20,000
like the email of foo at bar.com and we
19806
17:14:16,319 --> 17:14:21,199
don't like the password of foobar
19807
17:14:21,199 --> 17:14:24,559
we're also going to remove the
19808
17:14:22,275 --> 17:14:26,795
unimplemented error here now in this
19809
17:14:24,559 --> 17:14:30,000
case let's just create a user so we're
19810
17:14:26,796 --> 17:14:32,480
going to say user is and off user
19811
17:14:30,000 --> 17:14:34,720
and it's email verified we just say true
19812
17:14:32,480 --> 17:14:36,240
or let's just say false actually so we
19813
17:14:34,720 --> 17:14:39,116
say when you're trying to log in we're
19814
17:14:36,239 --> 17:14:40,879
just saying is email verify false okay
19815
17:14:39,116 --> 17:14:42,880
now that we've created a user let's
19816
17:14:42,879 --> 17:14:46,559
like this because remember we have a
19817
17:14:48,955 --> 17:14:54,795
just keep hold of it like this
19818
17:14:52,239 --> 17:14:56,400
and then we will do because remember we
19819
17:14:54,796 --> 17:14:59,680
need to return a future of that auth
19820
17:14:56,400 --> 17:15:04,880
user then we say return future
19821
17:14:59,680 --> 17:15:04,879
of a value equal to our user like this
19822
17:15:12,319 --> 17:15:16,720
that was quite a lot of work but i think
19823
17:15:14,480 --> 17:15:19,116
you hopefully understand what we did
19824
17:15:19,275 --> 17:15:23,839
now we have to look at a logout function
19825
17:15:21,756 --> 17:15:26,080
and the logout function is gonna have
19826
17:15:26,080 --> 17:15:30,635
um it's not just gonna be saying okay i
19827
17:15:28,796 --> 17:15:32,240
logged out as i mentioned before we need
19828
17:15:32,239 --> 17:15:35,915
mock provider is initialized so let's
19829
17:15:35,915 --> 17:15:40,635
boom okay and we also need to make sure
19830
17:15:38,879 --> 17:15:43,040
if you want to log out that you've
19831
17:15:40,635 --> 17:15:44,239
actually logged in before so let's just
19832
17:15:51,040 --> 17:15:57,436
uh user not found off exception okay
19833
17:15:55,915 --> 17:15:59,199
otherwise what we're gonna do is we're
19834
17:15:59,199 --> 17:16:04,079
so let's find an await code from before
19835
17:16:01,839 --> 17:16:06,635
we're just gonna fake waiting a little
19836
17:16:06,635 --> 17:16:12,080
and and we're gonna set our user as well
19837
17:16:09,839 --> 17:16:13,839
to null we're just gonna say the current
19838
17:16:12,080 --> 17:16:15,596
user then is not you can see it's
19839
17:16:13,839 --> 17:16:18,239
complaining that we're using a weight
19840
17:16:15,595 --> 17:16:19,275
but let me just say in here then
19841
17:16:19,275 --> 17:16:23,519
just like that then the error goes away
19842
17:16:21,595 --> 17:16:26,479
because if you mark your logout function
19843
17:16:23,519 --> 17:16:29,199
as async then you can wait on a future
19844
17:16:26,480 --> 17:16:30,560
so easy as well logout says am i
19845
17:16:30,559 --> 17:16:34,479
and in order for me to log out there
19846
17:16:32,480 --> 17:16:36,160
needs to be a user and then i'm gonna
19847
17:16:34,480 --> 17:16:38,560
fake waiting one second and then i'm
19848
17:16:36,160 --> 17:16:40,796
gonna set that user to null so easy pc
19849
17:16:41,040 --> 17:16:45,680
now let's mock our email verification
19850
17:16:45,680 --> 17:16:49,116
so same thing so you should now be
19851
17:16:47,756 --> 17:16:50,720
familiar with this let's just make sure
19852
17:16:49,116 --> 17:16:52,955
that we are initialized i'm going to
19853
17:16:50,720 --> 17:16:54,559
grab a code from there room throw
19854
17:16:52,955 --> 17:16:55,275
unimplemented error actually let's leave
19855
17:17:00,955 --> 17:17:05,756
then during the send email verification
19856
17:17:03,360 --> 17:17:08,080
what we're gonna do is you see when we
19857
17:17:05,756 --> 17:17:09,840
did a login we said that uh let's have a
19858
17:17:08,080 --> 17:17:11,680
look at the login we said by default the
19859
17:17:09,839 --> 17:17:14,479
email for the user's email verification
19860
17:17:11,680 --> 17:17:16,160
is false but upon send doing a send
19861
17:17:14,480 --> 17:17:17,436
email verification we're just gonna flip
19862
17:17:16,160 --> 17:17:19,436
that flag where all of a sudden i'm
19863
17:17:17,436 --> 17:17:20,480
gonna say oh now outside of your email
19864
17:17:20,480 --> 17:17:24,160
which which isn't so realistic but
19865
17:17:22,635 --> 17:17:27,116
that's the logic that we're mocking
19866
17:17:24,160 --> 17:17:28,080
right now okay and remember a an auth
19867
17:17:29,519 --> 17:17:35,275
has a and it's email verified it's read
19868
17:17:33,040 --> 17:17:36,955
only like you it's a constant you cannot
19869
17:17:36,955 --> 17:17:41,040
just because we have an optional user in
19870
17:17:39,275 --> 17:17:43,115
our mock auth provider it doesn't mean
19871
17:17:41,040 --> 17:17:45,680
that we can just go and say off user is
19872
17:17:43,116 --> 17:17:48,400
email verified true we can't write to it
19873
17:17:45,680 --> 17:17:49,595
so we need to rewrite this entire user
19874
17:17:50,955 --> 17:17:55,839
after checking that you're initialized
19875
17:17:53,595 --> 17:17:57,595
what we're doing is saying that
19876
17:17:57,595 --> 17:18:00,879
let's get the user actually final user
19877
17:18:00,879 --> 17:18:06,479
this let's get your current user and we
19878
17:18:06,480 --> 17:18:12,319
and throw user not found so our
19879
17:18:10,480 --> 17:18:14,400
send email verification code is make
19880
17:18:12,319 --> 17:18:15,519
sure making sure that you've logged in
19881
17:18:15,519 --> 17:18:20,159
verification or at least you register
19882
17:18:22,955 --> 17:18:27,116
then what we're going to do is to create
19883
17:18:24,955 --> 17:18:29,199
a new user we're saying new user is an
19884
17:18:27,116 --> 17:18:31,840
off user and his email verified is true
19885
17:18:29,199 --> 17:18:33,839
this time and then we set that as our
19886
17:18:31,839 --> 17:18:36,159
current user so we say the current user
19887
17:18:36,160 --> 17:18:43,596
and then we just remove that and we make
19888
17:18:39,199 --> 17:18:44,399
our sure our code async as well
19889
17:18:49,040 --> 17:18:53,595
it did take a while but we've actually
19890
17:18:50,879 --> 17:18:55,435
written now a mock auth provider that
19891
17:18:53,595 --> 17:18:57,839
has its own code and it has its own
19892
17:18:57,839 --> 17:19:03,275
now what we need to do is to
19893
17:19:08,720 --> 17:19:14,239
so what are test groups and what are
19894
17:19:14,239 --> 17:19:20,079
if you think of tests as or at least
19895
17:19:16,955 --> 17:19:22,159
unit tests as pieces of code that test
19896
17:19:22,160 --> 17:19:26,080
you may think okay i'm going to write a
19897
17:19:26,080 --> 17:19:29,840
here i'm going to then write a test for
19898
17:19:28,400 --> 17:19:32,080
current user i'm going to write test for
19899
17:19:29,839 --> 17:19:34,000
initialized login blah blah now all of
19900
17:19:32,080 --> 17:19:36,635
these are common and group they're kind
19901
17:19:34,000 --> 17:19:39,040
of related they're all testing mock auth
19902
17:19:36,635 --> 17:19:42,239
provider and that's what test groups are
19903
17:19:39,040 --> 17:19:45,360
for in your test functions in flutter
19904
17:19:42,239 --> 17:19:47,680
sorry in your tests and test suites in
19905
17:19:45,360 --> 17:19:50,239
florida you can actually group your test
19906
17:19:47,680 --> 17:19:52,559
functionalities into a group that has a
19907
17:19:50,239 --> 17:19:55,436
name and then you can ask flutter to run
19908
17:19:52,559 --> 17:20:00,079
that entire group of tests for you so
19909
17:19:55,436 --> 17:20:02,160
that's what test groups are for
19910
17:20:00,080 --> 17:20:05,040
so now what we need to do is to go into
19911
17:20:02,160 --> 17:20:07,276
our main test function right there and
19912
17:20:05,040 --> 17:20:10,080
basically create a group and then add
19913
17:20:07,275 --> 17:20:12,955
provider inside that so let's just go
19914
17:20:12,955 --> 17:20:17,595
and in here we're just going to say mock
19915
17:20:17,595 --> 17:20:20,955
and let's go in here the second
19916
17:20:20,955 --> 17:20:23,915
and like that so now you should have
19917
17:20:22,400 --> 17:20:26,000
your code like this so basically you
19918
17:20:23,915 --> 17:20:28,000
created a test group and you can see
19919
17:20:26,000 --> 17:20:29,756
visual studio code is telling me that oh
19920
17:20:29,756 --> 17:20:34,400
so we're gonna put all our mock
19921
17:20:32,160 --> 17:20:36,240
authentication tests inside this group
19922
17:20:36,239 --> 17:20:40,559
and as a caption says the first thing
19923
17:20:37,915 --> 17:20:43,275
we're gonna do is we're gonna create our
19924
17:20:40,559 --> 17:20:46,319
an instance of our mock aus provider so
19925
17:20:43,275 --> 17:20:48,479
let's go ahead and say a final
19926
17:20:48,480 --> 17:20:52,080
is a mock-off provider just like that
19927
17:20:55,040 --> 17:20:58,796
so now we're getting to the juicy parts
19928
17:20:57,595 --> 17:21:00,239
and i'm so happy about this because
19929
17:20:58,796 --> 17:21:01,756
we've done quite a lot of groundwork
19930
17:21:00,239 --> 17:21:02,879
just to get to this point for this
19931
17:21:02,879 --> 17:21:07,199
so now we're gonna write our first test
19932
17:21:05,595 --> 17:21:09,360
so as you can see the title says testing
19933
17:21:07,199 --> 17:21:11,115
provider is initialized providers
19934
17:21:09,360 --> 17:21:13,199
shouldn't be initialized to begin with
19935
17:21:11,116 --> 17:21:14,240
you see we're starting with
19936
17:21:14,239 --> 17:21:18,720
an assertion we're saying that according
19937
17:21:16,720 --> 17:21:21,436
to our implementation the way we've
19938
17:21:18,720 --> 17:21:23,680
implemented our mock auth provider it
19939
17:21:21,436 --> 17:21:25,275
should not be initialized to start with
19940
17:21:23,680 --> 17:21:26,879
so we're just making sure that by
19941
17:21:25,275 --> 17:21:29,839
creating an instance of mock auth
19942
17:21:26,879 --> 17:21:31,275
provider it's is initialized the boolean
19943
17:21:31,275 --> 17:21:36,079
should return false if it if it returns
19944
17:21:34,080 --> 17:21:37,840
true we're going to fail our tests so
19945
17:21:36,080 --> 17:21:39,360
meaning that if someone then sneakily
19946
17:21:37,839 --> 17:21:41,519
goes into the code later and says oh
19947
17:21:39,360 --> 17:21:43,116
this is true by default then the tests
19948
17:21:41,519 --> 17:21:45,115
are gonna fail and all the developers in
19949
17:21:43,116 --> 17:21:46,319
the team are gonna be notified about
19950
17:21:47,436 --> 17:21:52,080
let's create our first test the way to
19951
17:21:50,000 --> 17:21:54,400
create tests in flutter is that you
19952
17:21:54,400 --> 17:21:58,080
and you give it a name in this case i'm
19953
17:21:58,080 --> 17:22:03,916
be initialized to begin with okay so
19954
17:22:02,000 --> 17:22:05,915
that's the name then you're gonna
19955
17:22:03,915 --> 17:22:08,159
provide it with a function to execute
19956
17:22:08,160 --> 17:22:13,116
and in here you could say you could use
19957
17:22:18,239 --> 17:22:23,360
it should be false to begin with
19958
17:22:23,360 --> 17:22:28,400
that's the first test that we wrote so
19959
17:22:25,595 --> 17:22:30,955
test function then you write a name for
19960
17:22:28,400 --> 17:22:33,596
it then a function to be executed and in
19961
17:22:30,955 --> 17:22:35,595
there you can use various flavors of the
19962
17:22:35,595 --> 17:22:39,595
expect there are various flavors of that
19963
17:22:39,595 --> 17:22:44,479
right now we're just expecting the easy
19964
17:22:46,160 --> 17:22:52,880
now the next test that we have to do um
19965
17:22:49,436 --> 17:22:55,116
so as the captioning case test logging
19966
17:22:52,879 --> 17:22:57,360
out before initialization the provider
19967
17:22:55,116 --> 17:22:59,040
should throw and not initialize
19968
17:22:59,756 --> 17:23:03,756
basically what we're saying is that
19969
17:23:01,360 --> 17:23:05,595
according to the log out function it
19970
17:23:03,756 --> 17:23:07,756
shouldn't be able to log out if it's not
19971
17:23:05,595 --> 17:23:09,915
initialized first so we're literally
19972
17:23:07,756 --> 17:23:11,916
testing this line of code okay to make
19973
17:23:09,915 --> 17:23:14,239
sure that no one just unintentionally
19974
17:23:11,915 --> 17:23:16,000
comments it out or unintentionally
19975
17:23:14,239 --> 17:23:18,720
removes the same we don't need it all
19976
17:23:18,720 --> 17:23:22,635
functionality so let's just say test i'm
19977
17:23:21,199 --> 17:23:24,239
going to look at my notes to see what
19978
17:23:26,080 --> 17:23:29,756
if not initialize okay now you know that
19979
17:23:28,319 --> 17:23:31,595
as a second parameter to your test
19980
17:23:29,756 --> 17:23:32,955
function you need to provide a function
19981
17:23:34,160 --> 17:23:38,560
and then curly brackets and in here
19982
17:23:39,839 --> 17:23:44,000
and now we're using a new flavor of this
19983
17:23:42,559 --> 17:23:46,239
expect and in here i'm just going to say
19984
17:23:46,239 --> 17:23:54,239
and upon calling this logout function
19985
17:23:50,080 --> 17:23:56,840
we actually want to expect an exception
19986
17:23:56,839 --> 17:24:01,755
uh catch that you can use in here that
19987
17:24:01,756 --> 17:24:06,796
and you can see throws a is a matcher
19988
17:24:04,160 --> 17:24:08,636
and it matches the result of the log out
19989
17:24:06,796 --> 17:24:11,116
function against whatever you provide
19990
17:24:12,955 --> 17:24:18,000
an exception in here you see the const
19991
17:24:18,000 --> 17:24:21,756
height matcher is just going to say not
19992
17:24:21,756 --> 17:24:26,400
exception so i'm going to type this and
19993
17:24:24,480 --> 17:24:28,480
then i'm going to show you what i'm
19994
17:24:28,480 --> 17:24:33,436
see what i've done through jose const
19995
17:24:35,436 --> 17:24:41,520
and let's see why type manager is not
19996
17:24:38,720 --> 17:24:43,520
extract method cons throws i probably
19997
17:24:45,915 --> 17:24:50,559
so let's see what is happening here so
19998
17:24:48,635 --> 17:24:53,595
what we're telling expect in here is
19999
17:24:50,559 --> 17:24:54,479
saying that execute the logout function
20000
17:24:54,480 --> 17:24:59,756
we're now testing the result of that
20001
17:24:57,199 --> 17:25:02,795
function against something called a
20002
17:24:59,756 --> 17:25:05,116
matcher and matcher is because you see
20003
17:25:02,796 --> 17:25:07,596
in here you can't say that this result
20004
17:25:05,116 --> 17:25:08,880
should be an exception because what are
20005
17:25:07,595 --> 17:25:09,915
you going to do are you going to create
20006
17:25:09,915 --> 17:25:13,519
an instance of that exception that's not
20007
17:25:11,839 --> 17:25:15,435
that's not a good way of testing your
20008
17:25:13,519 --> 17:25:17,199
functionality in here you're saying
20009
17:25:15,436 --> 17:25:19,756
you're matching the result of calling
20010
17:25:17,199 --> 17:25:22,635
the logout function it gains that
20011
17:25:19,756 --> 17:25:25,840
expected type as you can see type
20012
17:25:22,635 --> 17:25:27,839
matcher is if you go into it you can see
20013
17:25:27,839 --> 17:25:36,519
okay so that's how you would expect a
20014
17:25:31,275 --> 17:25:36,519
function to throw an exception all right
20015
17:25:37,756 --> 17:25:42,000
all right a lot of information um
20016
17:25:40,239 --> 17:25:43,756
now what we need to do after testing
20017
17:25:42,000 --> 17:25:45,839
that functionality we just need to make
20018
17:25:43,756 --> 17:25:47,680
sure that we can actually initialize our
20019
17:25:47,680 --> 17:25:52,480
i'm going to bring the code a little bit
20020
17:25:49,116 --> 17:25:52,480
up here so you can see it better
20021
17:25:54,720 --> 17:25:58,796
go in here and say test and let me see
20022
17:25:57,199 --> 17:25:59,915
it should be able to be initialized
20023
17:26:02,080 --> 17:26:06,480
and create an empty function in here
20024
17:26:04,559 --> 17:26:08,795
then what we're going to do is just to
20025
17:26:11,436 --> 17:26:14,955
and remember just like everywhere in
20026
17:26:13,199 --> 17:26:17,199
your dart code you can make your
20027
17:26:14,955 --> 17:26:19,199
functions asynchronous just by putting
20028
17:26:17,199 --> 17:26:20,635
async right before the curly bracket so
20029
17:26:19,199 --> 17:26:22,399
it's not a part of the signature of the
20030
17:26:20,635 --> 17:26:23,595
function it's just telling dart that
20031
17:26:22,400 --> 17:26:26,635
inside this function i'm going to
20032
17:26:23,595 --> 17:26:29,680
execute some code asynchronously okay
20033
17:26:26,635 --> 17:26:30,955
so upon initializing we then after
20034
17:26:29,680 --> 17:26:32,720
initialize if you look at the code that
20035
17:26:35,040 --> 17:26:39,040
and a weight of one second and then it
20036
17:26:36,720 --> 17:26:41,275
sets the flag of is initialized to true
20037
17:26:39,040 --> 17:26:44,239
and we can read that flag by reading
20038
17:26:41,275 --> 17:26:45,756
this boolean getter so let's say away
20039
17:26:44,239 --> 17:26:48,000
provider initialize and then we're going
20040
17:26:48,000 --> 17:26:52,000
the provider is initialized flag to be
20041
17:26:52,000 --> 17:26:56,955
all right so that one was an easy one
20042
17:26:57,915 --> 17:27:02,559
so after we've done all of this you see
20043
17:27:00,400 --> 17:27:04,560
is initialized and doing initialization
20044
17:27:02,559 --> 17:27:06,159
is not actually going to create a user
20045
17:27:04,559 --> 17:27:08,079
for us so let's make sure upon
20046
17:27:06,160 --> 17:27:10,956
initializing our provider that the user
20047
17:27:10,955 --> 17:27:15,436
user should be null after initialization
20048
17:27:16,796 --> 17:27:21,680
and then let's just expect the user the
20049
17:27:20,000 --> 17:27:22,796
current user to be known so let's say
20050
17:27:25,040 --> 17:27:29,680
that it should be known all right so
20051
17:27:27,275 --> 17:27:32,079
easy to read and it's almost like
20052
17:27:35,680 --> 17:27:39,436
all right now what we're going to do is
20053
17:27:37,436 --> 17:27:40,720
doing some asynchronous testing i want
20054
17:27:39,436 --> 17:27:43,040
you to see this as well because it's
20055
17:27:40,720 --> 17:27:45,436
very important now let's say that you're
20056
17:27:43,040 --> 17:27:47,116
we want to test as the caption is
20057
17:27:45,436 --> 17:27:49,436
telling you testing the time required to
20058
17:27:47,116 --> 17:27:50,635
initialize we can test timeouts in this
20059
17:27:50,635 --> 17:27:57,680
what we're going to do is look at our
20060
17:27:52,796 --> 17:27:59,680
initialization code here and let's see
20061
17:27:59,680 --> 17:28:03,680
at the moment is waiting one second what
20062
17:28:02,160 --> 17:28:06,320
we're going to do in our test just for
20063
17:28:03,680 --> 17:28:08,319
the sake of using how you can test
20064
17:28:06,319 --> 17:28:10,796
timeouts and how you you can test for
20065
17:28:08,319 --> 17:28:12,720
instance api calls in the future we're
20066
17:28:10,796 --> 17:28:15,276
going to do some asynchronous testing in
20067
17:28:12,720 --> 17:28:16,480
here with a timeout saying that our test
20068
17:28:16,480 --> 17:28:23,200
if initialize on our provider takes more
20069
17:28:19,360 --> 17:28:25,915
than x amount of seconds all right so
20070
17:28:23,199 --> 17:28:26,879
now let's go in here and say test um
20071
17:28:32,480 --> 17:28:36,636
okay and an empty function which is
20072
17:28:39,756 --> 17:28:45,200
and what we're going to do in here is to
20073
17:28:45,199 --> 17:28:49,595
on the provider's initialization
20074
17:28:49,595 --> 17:28:53,595
and after initialization we're also
20075
17:28:51,360 --> 17:28:56,000
going to expect the is initialize flag
20076
17:28:59,040 --> 17:29:04,080
parameter of our test called timeout
20077
17:29:01,680 --> 17:29:06,796
now timeout will provide a constant
20078
17:29:09,199 --> 17:29:12,479
duration and in this case we're just
20079
17:29:11,199 --> 17:29:13,915
going to say two seconds and i think we
20080
17:29:12,480 --> 17:29:16,796
have one extra parameter in here
20081
17:29:16,796 --> 17:29:22,160
argument zero expected what one found
20082
17:29:18,879 --> 17:29:25,595
cons time and then here seconds
20083
17:29:22,160 --> 17:29:27,756
and avoid cons here okay so this is very
20084
17:29:25,595 --> 17:29:29,435
simple simply said we're saying that
20085
17:29:27,756 --> 17:29:31,436
we're created a test that calls the
20086
17:29:29,436 --> 17:29:35,040
initialize function on our provider and
20087
17:29:31,436 --> 17:29:38,239
just ensures that that function returns
20088
17:29:35,040 --> 17:29:40,480
to the test context before the timeout
20089
17:29:38,239 --> 17:29:42,720
has passed so internally this test
20090
17:29:40,480 --> 17:29:45,276
function which you provided timeout to
20091
17:29:42,720 --> 17:29:47,116
is going to create a little timer and
20092
17:29:45,275 --> 17:29:49,199
then it's going to set the timer to
20093
17:29:47,116 --> 17:29:50,319
start with as soon as it calls the
20094
17:29:50,319 --> 17:29:54,635
this function in here let me show you
20095
17:29:55,915 --> 17:30:01,040
progressing and doing its work it's
20096
17:29:58,160 --> 17:30:04,000
going to terminate its result processing
20097
17:30:01,040 --> 17:30:06,080
as soon as the timeout basically passes
20098
17:30:04,000 --> 17:30:08,000
so in this case our initialize function
20099
17:30:06,080 --> 17:30:10,880
is going to take one second to process
20100
17:30:08,000 --> 17:30:13,756
this work if it can't do that during
20101
17:30:10,879 --> 17:30:16,719
these two seconds of timeout that test
20102
17:30:13,756 --> 17:30:19,840
is going to fail okay so now you know
20103
17:30:19,915 --> 17:30:24,955
so let's go in here and now test the
20104
17:30:24,955 --> 17:30:30,080
provider which is creating a user as you
20105
17:30:27,915 --> 17:30:32,319
can see we have to test make sure that
20106
17:30:30,080 --> 17:30:34,560
creating a user actually delegates to
20107
17:30:32,319 --> 17:30:37,756
our login function and we have to test
20108
17:30:34,559 --> 17:30:37,756
all the edge cases all right
20109
17:30:38,160 --> 17:30:42,840
so let's go ahead and do that let's then
20110
17:30:42,839 --> 17:30:49,275
uh create user should delegate um
20111
17:30:51,360 --> 17:30:55,040
function and in here we're gonna create
20112
17:30:53,436 --> 17:30:57,040
a function which is an asynchronous
20113
17:30:57,436 --> 17:31:01,756
need to do is to create this
20114
17:31:00,239 --> 17:31:03,436
basically if you remember create user
20115
17:31:01,756 --> 17:31:04,955
doesn't have internal logic of its own
20116
17:31:03,436 --> 17:31:06,880
it's just going to call login but login
20117
17:31:04,955 --> 17:31:09,879
has this beautiful logic that first test
20118
17:31:09,915 --> 17:31:14,319
with any password should throw this
20119
17:31:12,000 --> 17:31:16,720
error user not found off exception so
20120
17:31:14,319 --> 17:31:17,915
let's just test that scenario okay let's
20121
17:31:17,915 --> 17:31:25,360
and say final bad email user is
20122
17:31:27,680 --> 17:31:31,840
writer oh don't we have our provider
20123
17:31:32,796 --> 17:31:38,160
oh i've added this test i apologize i've
20124
17:31:35,360 --> 17:31:40,319
added this test i believe at the end of
20125
17:31:38,160 --> 17:31:42,160
this entire test group i should have
20126
17:31:40,319 --> 17:31:43,839
added it here so if you've made the same
20127
17:31:42,160 --> 17:31:46,000
mistake i apologize for that it's my
20128
17:31:43,839 --> 17:31:48,239
fault you should fix that and make make
20129
17:31:46,000 --> 17:31:50,796
sure that your test is in the same group
20130
17:31:48,239 --> 17:31:53,040
where it has access to the provider so
20131
17:31:50,796 --> 17:31:56,000
then i'm going to say provider and so
20132
17:32:01,595 --> 17:32:04,795
and password could just be any password
20133
17:32:04,796 --> 17:32:10,000
comma semicolon make sure dart formatter
20134
17:32:07,436 --> 17:32:11,916
formats your code properly so then what
20135
17:32:14,480 --> 17:32:19,276
basically returned to us then it should
20136
17:32:16,955 --> 17:32:21,595
actually contain a user not found off
20137
17:32:19,275 --> 17:32:23,275
exception so let's go ahead and say
20138
17:32:37,756 --> 17:32:41,756
not found off exception like this
20139
17:32:45,436 --> 17:32:50,000
have to close that here as well
20140
17:32:48,239 --> 17:32:52,319
so we're basically saying calling the
20141
17:32:50,000 --> 17:32:55,360
bad email user the creation of a user
20142
17:32:52,319 --> 17:32:56,955
with that specific email should throw a
20143
17:32:55,360 --> 17:32:58,955
user not found off exception and
20144
17:32:56,955 --> 17:33:00,955
remember you may think oh we've tested
20145
17:32:58,955 --> 17:33:02,319
this before yet but that was in the
20146
17:33:05,519 --> 17:33:08,399
actually no we haven't tested that
20147
17:33:06,635 --> 17:33:09,595
before it's it's this thing that we've
20148
17:33:08,400 --> 17:33:10,880
tested so sorry about that so we've
20149
17:33:09,595 --> 17:33:12,795
tested a lot yeah we haven't tested this
20150
17:33:14,160 --> 17:33:18,636
now we've tested that now let's test
20151
17:33:16,080 --> 17:33:20,319
this scenario with a bad password a
20152
17:33:18,635 --> 17:33:22,879
password of fubar you see we have that
20153
17:33:20,319 --> 17:33:24,796
logic in our mock provider here for the
20154
17:33:22,879 --> 17:33:26,719
login function let's test this scenario
20155
17:33:24,796 --> 17:33:29,840
now let's test this code we should throw
20156
17:33:26,720 --> 17:33:33,275
the wrong password off exception okay so
20157
17:33:34,400 --> 17:33:40,560
i can see that you can't see the code so
20158
17:33:36,955 --> 17:33:43,199
bad password user is provider and create
20159
17:33:40,559 --> 17:33:45,915
user with the email of let's just say
20160
17:33:43,199 --> 17:33:47,519
someone at bar.com and the password is
20161
17:33:45,915 --> 17:33:50,000
fubar and that's the password we didn't
20162
17:33:50,000 --> 17:33:53,915
now we copy the code from here
20163
17:33:53,915 --> 17:34:00,559
that that password user should throw an
20164
17:33:57,436 --> 17:34:03,520
exception called wrong password
20165
17:34:00,559 --> 17:34:06,479
off exception okay so we've tested that
20166
17:34:06,480 --> 17:34:12,240
now we actually should test the um
20167
17:34:09,436 --> 17:34:16,720
the positive scenario so let's go ahead
20168
17:34:12,239 --> 17:34:18,955
and say final user is awaits provider
20169
17:34:23,040 --> 17:34:27,520
foo and the password is going to be bar
20170
17:34:25,116 --> 17:34:30,720
remember our our mock auth provider is
20171
17:34:27,519 --> 17:34:32,559
not actually testing whether an email is
20172
17:34:32,559 --> 17:34:36,955
firebase is doing that but a mock
20173
17:34:34,480 --> 17:34:39,276
provider isn't doing that so
20174
17:34:36,955 --> 17:34:41,275
we could just provide any email
20175
17:34:39,275 --> 17:34:43,436
foo and password a bar and it will just
20176
17:34:41,275 --> 17:34:45,275
accept it as long as it's not
20177
17:34:43,436 --> 17:34:49,436
it the password isn't foobar and as long
20178
17:34:45,275 --> 17:34:52,955
as the email is not footbar.com okay
20179
17:34:49,436 --> 17:34:56,635
all right now let's let's make sure that
20180
17:34:52,955 --> 17:34:59,040
this user is then being assigned to the
20181
17:34:56,635 --> 17:35:02,080
current user of our auth provider okay
20182
17:34:59,040 --> 17:35:04,559
so let's expect the auth provider
20183
17:35:02,080 --> 17:35:07,916
offer sorry the provider's current user
20184
17:35:04,559 --> 17:35:09,595
to actually be equal to this user okay
20185
17:35:09,595 --> 17:35:13,519
that's what we did in our create user
20186
17:35:11,436 --> 17:35:15,436
remember we create user delegates this
20187
17:35:13,519 --> 17:35:17,595
work to the login and then login
20188
17:35:15,436 --> 17:35:19,916
internally sets the current user to that
20189
17:35:17,595 --> 17:35:21,915
user they just created okay so that's
20190
17:35:19,915 --> 17:35:25,115
the scenario now we're testing with this
20191
17:35:28,879 --> 17:35:31,595
so what we need to do then is just to
20192
17:35:31,595 --> 17:35:36,795
by just creating a user which we're
20193
17:35:33,595 --> 17:35:38,559
doing here that the is email verified
20194
17:35:36,796 --> 17:35:41,916
functionality sorry that is email
20195
17:35:38,559 --> 17:35:45,435
verified um parameter of our auth user
20196
17:35:41,915 --> 17:35:47,275
is set to false by default remember
20197
17:35:47,275 --> 17:35:51,519
is set is email verified false let's
20198
17:35:49,680 --> 17:35:54,080
test that functionality okay so we just
20199
17:35:55,199 --> 17:36:00,559
we use email verified to be false
20200
17:36:02,160 --> 17:36:06,400
code to be honest with you and i hope
20201
17:36:04,319 --> 17:36:08,480
that you got everything that i mentioned
20202
17:36:08,480 --> 17:36:13,756
so now that we've done that let's test
20203
17:36:10,559 --> 17:36:14,955
the email verification functionality uh
20204
17:36:13,756 --> 17:36:17,595
and let's have a look at what we
20205
17:36:14,955 --> 17:36:19,436
actually did in email verification
20206
17:36:17,595 --> 17:36:20,479
you see we have this functionality not
20207
17:36:20,480 --> 17:36:24,480
then we take the current user if the
20208
17:36:22,319 --> 17:36:26,720
current user is null then we say user
20209
17:36:24,480 --> 17:36:29,276
not found exception and then we create a
20210
17:36:26,720 --> 17:36:32,000
new user with is email verified to true
20211
17:36:29,275 --> 17:36:34,319
and we're then setting that user as the
20212
17:36:32,000 --> 17:36:38,160
current user so that's what the send
20213
17:36:34,319 --> 17:36:39,519
email verification code is doing okay
20214
17:36:40,400 --> 17:36:43,436
when flutter then runs our code it's
20215
17:36:42,160 --> 17:36:45,596
going to run them sequentially so it's
20216
17:36:43,436 --> 17:36:47,200
just going to go from top to bottom and
20217
17:36:47,199 --> 17:36:51,275
before we test the email verification
20218
17:36:48,955 --> 17:36:54,720
we're actually testing create user which
20219
17:36:51,275 --> 17:36:56,239
in turn calls the login function so
20220
17:36:54,720 --> 17:36:57,436
since we're keeping a hold of our
20221
17:36:57,436 --> 17:37:01,520
this create user calling login function
20222
17:36:59,680 --> 17:37:05,040
ensures that the current user actually
20223
17:37:01,519 --> 17:37:06,795
sets and is not email verified so we can
20224
17:37:10,720 --> 17:37:17,595
and we say login user should be able to
20225
17:37:13,040 --> 17:37:19,200
get verified uh logged in user should be
20226
17:37:20,955 --> 17:37:25,915
okay and then an empty function in here
20227
17:37:25,915 --> 17:37:31,040
so in here we then say provider send
20228
17:37:31,040 --> 17:37:36,080
and with the final user is providers
20229
17:37:39,915 --> 17:37:45,915
and we now make sure that the current
20230
17:37:42,080 --> 17:37:48,240
user is not null so we say expect user
20231
17:37:48,239 --> 17:37:54,000
yeah expect the user is not null which
20232
17:37:52,239 --> 17:37:55,756
as you can see is a great matcher that
20233
17:37:54,000 --> 17:37:58,796
you can match something against it so
20234
17:37:55,756 --> 17:38:00,720
you say shouldn't be no okay like that
20235
17:38:00,720 --> 17:38:05,595
and then we also we need to make sure
20236
17:38:02,879 --> 17:38:07,360
that this user's uh verification is set
20237
17:38:05,595 --> 17:38:08,795
so it's email verified should be true
20238
17:38:07,360 --> 17:38:11,116
then we say expect and we'll get an
20239
17:38:08,796 --> 17:38:14,080
error now you'll see user is email
20240
17:38:14,080 --> 17:38:16,880
okay and you can see you get an error
20241
17:38:15,360 --> 17:38:17,915
here saying that a user is optional but
20242
17:38:17,915 --> 17:38:24,000
and do an asterisk here saying that
20243
17:38:19,915 --> 17:38:24,000
force force on rapid for us okay
20244
17:38:25,519 --> 17:38:30,319
now what we should do as the last test
20245
17:38:27,839 --> 17:38:31,679
we as the caption says test logging out
20246
17:38:30,319 --> 17:38:33,360
and logging in and this is normal
20247
17:38:31,680 --> 17:38:35,116
scenario that should just work let's
20248
17:38:33,360 --> 17:38:37,360
create a test for it so let's just say
20249
17:38:37,360 --> 17:38:41,275
and we're going to call it should be
20250
17:38:39,116 --> 17:38:45,276
able to log out and log in again should
20251
17:38:41,275 --> 17:38:47,275
be able to log out and log in
20252
17:38:49,116 --> 17:38:53,360
so and a semicolon at the end
20253
17:38:51,595 --> 17:38:55,275
so what we're going to do here then is
20254
17:38:55,275 --> 17:38:59,040
log out and log in and then we get the
20255
17:38:57,275 --> 17:39:00,720
current user and we just make sure that
20256
17:39:00,720 --> 17:39:06,080
null so let's say a wait on the provider
20257
17:39:06,080 --> 17:39:10,080
and we say await on the provider to log
20258
17:39:10,080 --> 17:39:18,400
with an email of just user and password
20259
17:39:14,239 --> 17:39:19,839
just like that okay so or just email
20260
17:39:18,400 --> 17:39:21,436
because we're not actually validating
20261
17:39:19,839 --> 17:39:25,435
the email and password in our auth
20262
17:39:21,436 --> 17:39:26,796
provider in our mock author provider
20263
17:39:25,436 --> 17:39:30,160
and then we're going to get the current
20264
17:39:26,796 --> 17:39:32,000
user so we say final user is provider
20265
17:39:30,160 --> 17:39:34,160
current user and we just make sure that
20266
17:39:32,000 --> 17:39:39,275
that user is not known so let's just say
20267
17:39:39,275 --> 17:39:43,756
which is a method built into
20268
17:39:43,756 --> 17:39:48,559
all right that was a lot of work and i'm
20269
17:39:51,116 --> 17:39:55,596
we talked a lot about tests there's so
20270
17:39:53,436 --> 17:39:56,955
much that you need to go through so much
20271
17:39:55,595 --> 17:39:58,720
material and you need to learn on your
20272
17:39:56,955 --> 17:40:01,360
own as well about different types of
20273
17:39:58,720 --> 17:40:03,040
matters and different flavors of expect
20274
17:40:01,360 --> 17:40:04,559
and talking about expect i kind of
20275
17:40:04,559 --> 17:40:08,720
and read these things also on your own
20276
17:40:06,796 --> 17:40:10,000
and learn about them in your own time as
20277
17:40:10,000 --> 17:40:15,756
now the exciting part we need to run our
20278
17:40:12,879 --> 17:40:17,040
tests so let me change the screen layout
20279
17:40:24,480 --> 17:40:29,360
uh break this and as you can see you can
20280
17:40:27,360 --> 17:40:32,319
tell flutter to run your test by saying
20281
17:40:29,360 --> 17:40:34,720
flutter test and providing that path to
20282
17:40:32,319 --> 17:40:37,360
your test so now flutter is going to go
20283
17:40:34,720 --> 17:40:40,480
ahead and issue and go through those
20284
17:40:41,040 --> 17:40:44,796
and let's see what we get as the result
20285
17:40:45,360 --> 17:40:50,000
and you can see it's giving like time
20286
17:40:47,595 --> 17:40:52,720
for all of these tests and it says all
20287
17:40:50,000 --> 17:40:54,955
tests passed now i just want to
20288
17:40:52,720 --> 17:40:57,756
highlight this before we go on we did a
20289
17:40:54,955 --> 17:41:00,080
lot of tests i've prepared these tests
20290
17:40:57,756 --> 17:41:02,080
manually so to make sure that they
20291
17:41:00,080 --> 17:41:04,400
actually testing important functionality
20292
17:41:02,080 --> 17:41:06,880
inside our auth provider however i've
20293
17:41:04,400 --> 17:41:07,680
written the tests very carefully to make
20294
17:41:09,915 --> 17:41:14,399
this is not the case when you're doing
20295
17:41:12,000 --> 17:41:16,879
things in real life your tests should
20296
17:41:14,400 --> 17:41:19,436
fail if you've done things right your
20297
17:41:16,879 --> 17:41:22,239
tests should fail to begin with and you
20298
17:41:19,436 --> 17:41:24,560
then need to go and write your and fix
20299
17:41:22,239 --> 17:41:26,720
your logic if you're doing things even
20300
17:41:24,559 --> 17:41:29,115
more right you should write your tests
20301
17:41:26,720 --> 17:41:31,520
first nothing is going to work then you
20302
17:41:29,116 --> 17:41:34,000
should go and write your logic to fit
20303
17:41:31,519 --> 17:41:35,915
those tests and expectations so just
20304
17:41:34,000 --> 17:41:38,480
because these tests are passing right
20305
17:41:35,915 --> 17:41:40,159
now i know we have joy inside we say oh
20306
17:41:38,480 --> 17:41:41,916
everything's passing everything's great
20307
17:41:40,160 --> 17:41:45,436
but in reality that's not going to be
20308
17:41:46,400 --> 17:41:51,040
a lot of work we did let's do as we
20309
17:41:48,400 --> 17:41:54,955
usually do keep the tradition and let's
20310
17:41:51,040 --> 17:41:57,116
commit our work and and also tag it so
20311
17:41:54,955 --> 17:41:59,756
let's then say git status to see the
20312
17:41:57,116 --> 17:42:01,276
status lots of things changed
20313
17:42:04,160 --> 17:42:07,756
all right we're going to commit this as
20314
17:42:07,756 --> 17:42:13,680
and we're going to say in here get push
20315
17:42:11,436 --> 17:42:16,635
it's going to push our commit to github
20316
17:42:13,680 --> 17:42:18,239
and then we get the tag as well as step
20317
17:42:24,000 --> 17:42:28,635
traditions as it is tradition in this uh
20318
17:42:26,559 --> 17:42:29,756
philosophy course we always talk about
20319
17:42:28,635 --> 17:42:31,680
what we're going to do in the next
20320
17:42:29,756 --> 17:42:33,360
chapter before we wrap up the current
20321
17:42:31,680 --> 17:42:34,319
chapter so as you can see the cache has
20322
17:42:33,360 --> 17:42:36,720
said let's get ready for the next
20323
17:42:34,319 --> 17:42:38,480
chapter we need a database to store user
20324
17:42:36,720 --> 17:42:41,275
notes before you use or if we use
20325
17:42:41,275 --> 17:42:46,559
you see we at the moment we're not
20326
17:42:44,080 --> 17:42:48,319
actually writing anything anywhere there
20327
17:42:48,319 --> 17:42:52,400
the user can't even create new nodes so
20328
17:42:50,796 --> 17:42:54,160
but what if we wanted to give the
20329
17:42:52,400 --> 17:42:55,680
ability for the user to create new nodes
20330
17:42:54,160 --> 17:42:56,956
and then delete those nodes and update
20331
17:42:56,955 --> 17:43:03,040
uh to begin with uh we're going to store
20332
17:43:00,796 --> 17:43:05,040
these nodes in a local database inside
20333
17:43:03,040 --> 17:43:06,400
the application so you will learn in the
20334
17:43:08,635 --> 17:43:12,955
and local databases and how to use them
20335
17:43:12,955 --> 17:43:18,479
sorry and how to use them in flutter
20336
17:43:18,480 --> 17:43:22,636
in the later chapters we will change
20337
17:43:20,400 --> 17:43:25,916
that logic so we'll be won't use sql
20338
17:43:22,635 --> 17:43:26,879
lite uh but i believe for any developer
20339
17:43:29,116 --> 17:43:31,840
i can't say any developer but if you're
20340
17:43:30,480 --> 17:43:33,436
a front-end developer or a back-end
20341
17:43:31,839 --> 17:43:35,435
developer you should be comfortable with
20342
17:43:33,436 --> 17:43:36,480
databases and that's exactly what we're
20343
17:43:36,480 --> 17:43:40,480
in the next chapter so grab some
20344
17:43:38,480 --> 17:43:42,319
refreshments and i'll see you in the
20345
17:43:42,319 --> 17:43:46,080
hello and welcome to chapter 27 of this
20346
17:43:46,080 --> 17:43:49,276
in the previous chapters we've been
20347
17:43:49,275 --> 17:43:54,479
our user interface and also we've been
20348
17:43:57,915 --> 17:44:03,199
time also to create some um
20349
17:44:00,480 --> 17:44:04,956
tests for our services and providers
20350
17:44:03,199 --> 17:44:07,039
up until this up until this point we've
20351
17:44:04,955 --> 17:44:08,559
been talking quite a lot about like the
20352
17:44:07,040 --> 17:44:11,756
logic of going from one screen to the
20353
17:44:08,559 --> 17:44:13,680
other uh integrating with firebase etc
20354
17:44:11,756 --> 17:44:16,796
however we haven't actually talked about
20355
17:44:13,680 --> 17:44:18,400
storing um user created content
20356
17:44:16,796 --> 17:44:20,480
inside our application or inside some
20357
17:44:20,480 --> 17:44:25,680
what we're going to do in this chapter
20358
17:44:22,239 --> 17:44:27,756
is we're going to talk about sql lite
20359
17:44:25,680 --> 17:44:30,559
and storing user generated content in
20360
17:44:27,756 --> 17:44:33,840
this case the user generated nodes
20361
17:44:33,839 --> 17:44:37,359
i'm gonna get to what sqlite is but
20362
17:44:35,915 --> 17:44:38,879
first of all let's have a look at the
20363
17:44:37,360 --> 17:44:41,436
title of this chapter which as you can
20364
17:44:38,879 --> 17:44:42,879
see it says crotlocal storage for
20365
17:44:41,436 --> 17:44:44,319
those of you who are software developers
20366
17:44:42,879 --> 17:44:46,159
from before and are comfortable with
20367
17:44:44,319 --> 17:44:48,480
crowd you can just jump over this
20368
17:44:46,160 --> 17:44:50,400
part of the chapter for those who are
20369
17:44:48,480 --> 17:44:53,360
not familiar with crowdcrot stands for
20370
17:44:50,400 --> 17:44:55,596
create read update and delete these are
20371
17:44:53,360 --> 17:44:58,559
four very fundamental operations that
20372
17:44:55,595 --> 17:45:00,955
any developer would perform on their
20373
17:44:58,559 --> 17:45:04,319
data and for instance if you're a flask
20374
17:45:00,955 --> 17:45:06,559
or a django developer node express um
20375
17:45:04,319 --> 17:45:08,879
developer you're you're probably already
20376
17:45:08,879 --> 17:45:13,839
you're probably using some sort of a
20377
17:45:13,839 --> 17:45:17,199
um and you're storing your data in there
20378
17:45:15,839 --> 17:45:18,795
and you're just working with the data
20379
17:45:17,199 --> 17:45:21,115
and you're familiar with the term crop
20380
17:45:18,796 --> 17:45:24,319
but if you're not familiar with it then
20381
17:45:21,116 --> 17:45:25,360
think of it as c which is create is you
20382
17:45:25,360 --> 17:45:30,559
some sort of a an object inside a
20383
17:45:28,000 --> 17:45:33,360
database some such as for instance a
20384
17:45:33,360 --> 17:45:37,040
you read of course want to be able to
20385
17:45:35,275 --> 17:45:38,635
read that data back for instance in our
20386
17:45:37,040 --> 17:45:40,480
application's main user interface you
20387
17:45:38,635 --> 17:45:41,839
may want to read the entire contents of
20388
17:45:41,839 --> 17:45:45,519
not the entire contents but at least in
20389
17:45:43,756 --> 17:45:48,000
user generated notes for that specific
20390
17:45:45,519 --> 17:45:50,079
user so that's the r in crowd
20391
17:45:50,080 --> 17:45:54,955
which it stands for update um or it
20392
17:45:52,796 --> 17:45:56,720
doesn't stand for update it means update
20393
17:45:54,955 --> 17:45:59,436
because u is the first letter of update
20394
17:45:56,720 --> 17:46:01,116
so on update is for instance if i have
20395
17:45:59,436 --> 17:46:02,796
already generated a node inside this
20396
17:46:01,116 --> 17:46:04,880
application i want to go and change the
20397
17:46:02,796 --> 17:46:06,160
contents of that node then that's the u
20398
17:46:06,160 --> 17:46:11,840
and um last but not least you have d
20399
17:46:08,635 --> 17:46:14,000
which is delete um and as its name
20400
17:46:14,000 --> 17:46:17,680
you allow the user to be able to delete
20401
17:46:15,595 --> 17:46:20,399
their own generated content from the
20402
17:46:20,635 --> 17:46:24,080
what we're going to do in this course is
20403
17:46:24,080 --> 17:46:29,596
talk about sqlite that is a database or
20404
17:46:29,595 --> 17:46:33,756
library and a library created in c
20405
17:46:35,839 --> 17:46:40,559
see as a programmer language c that
20406
17:46:37,680 --> 17:46:42,559
allows us to store data inside a file
20407
17:46:40,559 --> 17:46:44,319
now if you're if you're coming from like
20408
17:46:42,559 --> 17:46:46,879
the backend world if you're if you're
20409
17:46:44,319 --> 17:46:48,559
programmed with inside with python in
20410
17:46:46,879 --> 17:46:50,319
django you're already familiar with this
20411
17:46:48,559 --> 17:46:52,955
because sqlite is the default database
20412
17:46:50,319 --> 17:46:55,595
that will be provided to you in django
20413
17:46:52,955 --> 17:46:57,595
and a flask as well i believe is using
20414
17:46:55,595 --> 17:46:59,275
sqlite by default which is very similar
20415
17:47:01,519 --> 17:47:06,479
but if you're not familiar with sqlite
20416
17:47:03,519 --> 17:47:07,755
is i've prepared a website here which i
20417
17:47:06,480 --> 17:47:10,000
mean i haven't prepared the website i've
20418
17:47:11,116 --> 17:47:15,436
so you can see here i'll increase the
20419
17:47:12,559 --> 17:47:17,275
size of the font here and you can see
20420
17:47:15,436 --> 17:47:19,275
sqlite is a c language library that
20421
17:47:17,275 --> 17:47:21,360
implements a small fast self-contained
20422
17:47:19,275 --> 17:47:23,360
high reliable full-featured sql database
20423
17:47:23,360 --> 17:47:29,199
used database engine in the world well
20424
17:47:26,635 --> 17:47:30,559
just think of sqlite as the database
20425
17:47:29,199 --> 17:47:33,519
engine that we're going to use in our
20426
17:47:30,559 --> 17:47:37,115
application and it's not something that
20427
17:47:33,519 --> 17:47:40,319
is built in inside um flutter we will
20428
17:47:37,116 --> 17:47:41,200
have to use a so-called plug-in for it
20429
17:47:41,199 --> 17:47:46,239
but that's also okay and i mean not many
20430
17:47:44,080 --> 17:47:49,200
languages have support for talking with
20431
17:47:50,319 --> 17:47:54,159
but we'll get there we'll get to that
20432
17:47:54,160 --> 17:47:58,880
now let's talk about how we're actually
20433
17:47:56,160 --> 17:48:00,240
going to integrate with sqlite and to
20434
17:47:58,879 --> 17:48:02,635
start with so i'm assuming that you
20435
17:48:00,239 --> 17:48:04,479
don't you have never worked with sqlite
20436
17:48:02,635 --> 17:48:05,915
before or you haven't worked with any
20437
17:48:04,480 --> 17:48:07,596
type of database before and you're
20438
17:48:05,915 --> 17:48:08,955
trying to learn how to do that okay so
20439
17:48:07,595 --> 17:48:10,720
that's that's been my assumption from
20440
17:48:08,955 --> 17:48:12,239
the beginning of this course so if
20441
17:48:10,720 --> 17:48:14,400
you're already seasoned developer you
20442
17:48:12,239 --> 17:48:16,239
know exactly how school sql light works
20443
17:48:14,400 --> 17:48:18,160
you may want to jump over this section
20444
17:48:16,239 --> 17:48:20,239
of this chapter and get to like more
20445
17:48:18,160 --> 17:48:22,080
juicy parts where we integrate actually
20446
17:48:20,239 --> 17:48:23,360
with equal light inside the floater
20447
17:48:23,360 --> 17:48:27,116
so let me close this um or maybe let's
20448
17:48:27,116 --> 17:48:31,916
and what i'm going to talk about now is
20449
17:48:31,915 --> 17:48:38,559
a free program called db browser for sql
20450
17:48:34,720 --> 17:48:40,400
lite you see sqlite allows you to
20451
17:48:40,400 --> 17:48:44,239
sql lite has different components first
20452
17:48:42,400 --> 17:48:46,720
you have your database which is just a
20453
17:48:46,720 --> 17:48:52,480
and then you will have the sqlite
20454
17:48:49,519 --> 17:48:54,879
engine that can read from this this file
20455
17:48:52,480 --> 17:48:56,880
and write to this file so that's the
20456
17:48:54,879 --> 17:48:59,199
engine and then this engine should run
20457
17:48:56,879 --> 17:49:01,360
somewhere so it's either going to run
20458
17:48:59,199 --> 17:49:03,360
inside an application such as the one
20459
17:49:01,360 --> 17:49:05,915
i'm mentioning here a db browser for sql
20460
17:49:03,360 --> 17:49:08,319
light okay so sqlite's like baked into
20461
17:49:05,915 --> 17:49:10,239
that application or you can also bring
20462
17:49:08,319 --> 17:49:12,080
sql light into your terminal so that you
20463
17:49:10,239 --> 17:49:14,400
can actually talk with sql lite
20464
17:49:12,080 --> 17:49:15,840
databases from within your terminal
20465
17:49:14,400 --> 17:49:17,916
or if you for instance have install
20466
17:49:15,839 --> 17:49:20,159
django on your computer then you can use
20467
17:49:17,915 --> 17:49:22,955
django in order to integrate with sql
20468
17:49:20,160 --> 17:49:25,040
iso sqlite is the engine that talks to
20469
17:49:25,040 --> 17:49:30,400
uh which are your databases but then
20470
17:49:27,839 --> 17:49:32,399
it this engine should run somewhere it's
20471
17:49:30,400 --> 17:49:35,040
not just an executable that like you say
20472
17:49:32,400 --> 17:49:36,796
here take this file you now have to have
20473
17:49:35,040 --> 17:49:40,160
like some sort of a container where the
20474
17:49:36,796 --> 17:49:41,520
sequel light engine basically resides
20475
17:49:40,160 --> 17:49:42,796
when we then talk about our flutter
20476
17:49:41,519 --> 17:49:45,435
application we're going to bring this
20477
17:49:42,796 --> 17:49:47,596
engine into the flutter application so
20478
17:49:45,436 --> 17:49:49,680
our app can talk with that database but
20479
17:49:47,595 --> 17:49:52,559
for now we're going to look at a program
20480
17:49:49,680 --> 17:49:54,720
called db browser for lite db browser
20481
17:49:52,559 --> 17:49:56,720
for sql lite is a free and i believe
20482
17:49:54,720 --> 17:49:57,840
it's an open source program let's search
20483
17:50:04,839 --> 17:50:09,199
website and um and as you can see the
20484
17:50:07,756 --> 17:50:11,200
official home of the db browser for
20485
17:50:09,199 --> 17:50:12,719
sqlite and this is how the program kind
20486
17:50:12,720 --> 17:50:18,000
um i'm not sure if yeah i can see now
20487
17:50:15,756 --> 17:50:19,756
it's actually available for windows mac
20488
17:50:18,000 --> 17:50:21,595
os and it would be amazing if it was
20489
17:50:25,915 --> 17:50:30,159
uh and you can actually use snap so
20490
17:50:27,915 --> 17:50:31,275
that's great so if you're on ubuntu like
20491
17:50:31,275 --> 17:50:33,915
not on this machine right now but if
20492
17:50:32,559 --> 17:50:36,239
you're on ubuntu you can actually use
20493
17:50:33,915 --> 17:50:38,159
snapstore or even debian any type of
20494
17:50:36,239 --> 17:50:40,720
operating system linux space operating
20495
17:50:38,160 --> 17:50:44,880
system that has snapstore so that is
20496
17:50:40,720 --> 17:50:48,080
really good even on arch linux fantastic
20497
17:50:44,879 --> 17:50:49,915
all right on debian you used apt so
20498
17:50:48,080 --> 17:50:53,276
that's fine but anyway so it's available
20499
17:50:49,915 --> 17:50:56,159
for windows linux and mac os so i need
20500
17:50:53,275 --> 17:50:58,400
you to basically go to sqlite browser or
20501
17:50:56,160 --> 17:51:02,320
db browser as it's called db browser for
20502
17:50:58,400 --> 17:51:04,319
sqlite if you go to the home page i need
20503
17:51:04,319 --> 17:51:07,436
and let me change the screen layout so
20504
17:51:07,436 --> 17:51:11,596
and i need you to download this program
20505
17:51:09,680 --> 17:51:14,080
okay i've already downloaded it on my
20506
17:51:11,595 --> 17:51:15,756
computer so i'm going to close that
20507
17:51:14,080 --> 17:51:18,240
safari window and i'm going to bring you
20508
17:51:15,756 --> 17:51:19,916
the db browser for sqlite as it looks
20509
17:51:19,915 --> 17:51:23,680
the only thing i've changed on my
20510
17:51:21,595 --> 17:51:25,839
interface here is i've changed the font
20511
17:51:25,839 --> 17:51:30,795
not because i don't like the number 13.
20512
17:51:29,275 --> 17:51:34,239
it has nothing to do with that but it's
20513
17:51:30,796 --> 17:51:37,916
just i thought 20 is a little bit of a
20514
17:51:34,239 --> 17:51:40,795
nicer font size for this course um
20515
17:51:37,915 --> 17:51:44,159
all right so what are we gonna do now so
20516
17:51:44,160 --> 17:51:47,840
the structure of our database and how
20517
17:51:47,839 --> 17:51:52,000
if you think about how we've created our
20518
17:51:49,839 --> 17:51:55,755
user interface in that here's the user
20519
17:51:52,000 --> 17:51:58,000
interface if we go here you can see that
20520
17:51:55,756 --> 17:52:00,480
we can register with different users so
20521
17:51:58,000 --> 17:52:02,720
then we have a user entity or a user
20522
17:52:00,480 --> 17:52:05,596
table as we're going to call it
20523
17:52:07,360 --> 17:52:11,436
the creation of these users in our
20524
17:52:09,275 --> 17:52:13,199
database so imagine that we will have
20525
17:52:11,436 --> 17:52:15,360
some sort of a table some sort of entity
20526
17:52:13,199 --> 17:52:17,595
in our database that is dedicated to
20527
17:52:15,360 --> 17:52:19,436
users and users are probably just going
20528
17:52:20,879 --> 17:52:24,795
what are they going to have they're
20529
17:52:21,915 --> 17:52:27,435
going to have an id and an email so as
20530
17:52:24,796 --> 17:52:30,160
you remember when you create a
20531
17:52:27,436 --> 17:52:32,880
when you register a user with firebase
20532
17:52:30,160 --> 17:52:35,276
you always get a user identifier so
20533
17:52:35,275 --> 17:52:40,000
plus the user's email in our database
20534
17:52:38,160 --> 17:52:41,840
okay so we're not gonna store the user's
20535
17:52:40,000 --> 17:52:43,360
password that isn't that is an absolute
20536
17:52:43,360 --> 17:52:48,319
so user id which comes from firebase and
20537
17:52:46,160 --> 17:52:50,636
the email address we're gonna store in
20538
17:52:52,480 --> 17:52:58,480
we are going to have another table and
20539
17:52:55,756 --> 17:53:00,796
another table in our database dedicated
20540
17:52:58,480 --> 17:53:01,840
to notes so as a user when i log into
20541
17:53:00,796 --> 17:53:04,000
the application i should be able to
20542
17:53:01,839 --> 17:53:07,115
create my own notes and these notes
20543
17:53:04,000 --> 17:53:09,519
should be kind of like bound to and like
20544
17:53:07,116 --> 17:53:11,200
they should be glued to my user so if my
20545
17:53:09,519 --> 17:53:14,079
user is in the database i should be able
20546
17:53:11,199 --> 17:53:15,755
to have notes and if my user is deleted
20547
17:53:14,080 --> 17:53:17,200
all those notes should kind of also be
20548
17:53:15,756 --> 17:53:19,200
deleted from the database so it's kind
20549
17:53:17,199 --> 17:53:21,915
of like a cascade for those of you who
20550
17:53:19,199 --> 17:53:23,199
are familiar with back-end development
20551
17:53:23,199 --> 17:53:27,755
that is like the structure that we're
20552
17:53:25,199 --> 17:53:30,000
going to set up for our database so
20553
17:53:27,756 --> 17:53:32,319
in our i can see in my notes that for
20554
17:53:30,000 --> 17:53:35,199
our notes table we are actually going to
20555
17:53:35,199 --> 17:53:39,755
integer in that table that like binds
20556
17:53:39,756 --> 17:53:43,680
every node object to the user who
20557
17:53:42,080 --> 17:53:45,360
created it but we'll get there so don't
20558
17:53:45,360 --> 17:53:49,275
so i'm going to get rid of this
20559
17:53:50,879 --> 17:53:55,360
now what we need to do is start testing
20560
17:53:52,955 --> 17:53:58,080
so we want to create a database a simple
20561
17:53:55,360 --> 17:53:59,595
database and start creating some tables
20562
17:53:58,080 --> 17:54:02,000
in there okay so what i need you to do
20563
17:53:59,595 --> 17:54:03,756
is just to press the new database and
20564
17:54:02,000 --> 17:54:06,955
i'm going to save it on my desktop and
20565
17:54:03,756 --> 17:54:09,116
let's just call it testing okay
20566
17:54:11,915 --> 17:54:17,519
okay you can see now we created a
20567
17:54:14,559 --> 17:54:19,756
database and we have a table here it
20568
17:54:17,519 --> 17:54:21,435
doesn't look so nice i mean it's not
20569
17:54:19,756 --> 17:54:23,040
rendered so fine because i've changed
20570
17:54:23,040 --> 17:54:26,796
but you i think you can you get the idea
20571
17:54:26,796 --> 17:54:30,720
so what we need to do is to as the
20572
17:54:28,635 --> 17:54:32,879
caption says we need to create a table
20573
17:54:32,879 --> 17:54:37,755
so go in here at the table section here
20574
17:54:36,319 --> 17:54:39,116
and i'm improvising a little bit here
20575
17:54:37,756 --> 17:54:40,796
because this is like something that i
20576
17:54:39,116 --> 17:54:42,955
plan to show you but i haven't actually
20577
17:54:40,796 --> 17:54:44,796
prepared any notes for it so let's just
20578
17:54:42,955 --> 17:54:47,199
go ahead and create a table here called
20579
17:54:44,796 --> 17:54:48,880
user and as you can see we're gonna be
20580
17:54:50,720 --> 17:54:55,360
fields in here what is called a field in
20581
17:54:53,116 --> 17:54:56,560
here is pretty much just like a column
20582
17:54:56,559 --> 17:55:00,559
by creating a field you're creating a
20583
17:54:58,160 --> 17:55:03,040
column okay and the great thing about db
20584
17:55:00,559 --> 17:55:04,720
browser for sqlite is that you can see
20585
17:55:04,720 --> 17:55:08,400
code that will be generated for you
20586
17:55:06,635 --> 17:55:10,796
which we're actually going to use later
20587
17:55:08,400 --> 17:55:12,160
when we integrate sqlite into our
20588
17:55:10,796 --> 17:55:14,319
flutter application but for now i just
20589
17:55:12,160 --> 17:55:16,000
want you to get the idea of how sqlite
20590
17:55:14,319 --> 17:55:17,680
works how it creates the tables et
20591
17:55:20,720 --> 17:55:25,360
empty table it doesn't have any fields
20592
17:55:22,796 --> 17:55:27,116
or columns i need you to press this add
20593
17:55:25,360 --> 17:55:29,915
button right here and what we're going
20594
17:55:27,116 --> 17:55:31,840
to do is we're going to just create um
20595
17:55:32,796 --> 17:55:36,319
now if you're not a developer or
20596
17:55:34,796 --> 17:55:37,200
software engineer friend before you may
20597
17:55:37,199 --> 17:55:41,275
know about id field and why it's
20598
17:55:38,955 --> 17:55:43,275
important or if you're a developer from
20599
17:55:41,275 --> 17:55:44,400
before you may know id as primary key
20600
17:55:45,116 --> 17:55:51,520
um an id is just usually an integer
20601
17:55:48,480 --> 17:55:54,080
identifier an integer is a number so a
20602
17:55:51,519 --> 17:55:57,115
number identifier for every row that you
20603
17:55:54,080 --> 17:55:59,200
later later insert into your table so
20604
17:55:59,199 --> 17:56:04,079
usually an id is something called a
20605
17:56:01,595 --> 17:56:05,519
primary key and a primary key by default
20606
17:56:06,319 --> 17:56:10,955
unique what that means is that for you
20607
17:56:08,635 --> 17:56:13,116
to be able to create a user in this
20608
17:56:10,955 --> 17:56:15,116
table it has to have its unique
20609
17:56:18,879 --> 17:56:22,795
how we are basically treating users in
20610
17:56:21,116 --> 17:56:24,480
our user interface is that we're
20611
17:56:22,796 --> 17:56:26,956
treating them by their email so you may
20612
17:56:24,480 --> 17:56:28,560
think well the email is a unique
20613
17:56:26,955 --> 17:56:31,116
thing as well so why don't we go with
20614
17:56:28,559 --> 17:56:33,199
uniqueness off the email well we can
20615
17:56:31,116 --> 17:56:36,560
apply uniqueness constraints on the
20616
17:56:33,199 --> 17:56:39,199
email field and or the email column but
20617
17:56:36,559 --> 17:56:41,680
it is very well established pattern in
20618
17:56:41,680 --> 17:56:46,480
world where you're working with
20619
17:56:42,879 --> 17:56:48,159
databases that you i mean you can make a
20620
17:56:48,160 --> 17:56:54,000
unique such as then such as an email but
20621
17:56:50,400 --> 17:56:57,520
a primary key is usually an integer such
20622
17:56:54,000 --> 17:57:00,720
as pk or id so it's just a convention
20623
17:56:57,519 --> 17:57:01,519
and it's also a good practice to not go
20624
17:57:01,519 --> 17:57:05,839
like a uniqueness of a string because it
20625
17:57:04,400 --> 17:57:07,596
takes more resources in order to
20626
17:57:05,839 --> 17:57:10,079
calculate the uniqueness of a string
20627
17:57:07,595 --> 17:57:14,079
than it takes for an integer so we're
20628
17:57:10,080 --> 17:57:16,000
then going to call this field id
20629
17:57:14,080 --> 17:57:17,840
going to be integer and there are some
20630
17:57:16,000 --> 17:57:19,116
fields in here which are not rendered so
20631
17:57:17,839 --> 17:57:20,479
well i'm going to increase the size of
20632
17:57:25,360 --> 17:57:30,635
what we're going to do in here um
20633
17:57:28,239 --> 17:57:32,079
we're going to take you see n n in here
20634
17:57:30,635 --> 17:57:36,159
at the type we're going to leave as
20635
17:57:32,080 --> 17:57:38,160
integer that's fine n n means not null
20636
17:57:36,160 --> 17:57:40,796
meaning that this field should always be
20637
17:57:38,160 --> 17:57:42,796
present it should never allow the value
20638
17:57:40,796 --> 17:57:44,400
and emptiness of the value or the
20639
17:57:42,796 --> 17:57:46,796
absence of a value to be present there
20640
17:57:44,400 --> 17:57:48,160
okay the absence of value to be present
20641
17:57:46,796 --> 17:57:50,400
i hope that makes sense basically just
20642
17:57:48,160 --> 17:57:52,636
means that the value cannot not be
20643
17:57:50,400 --> 17:57:55,520
either so we're we're going to leave it
20644
17:57:52,635 --> 17:57:57,436
like that pk stands for primary key and
20645
17:57:55,519 --> 17:57:59,039
that is what i oh actually i can move my
20646
17:57:57,436 --> 17:58:00,400
mouse over them that's great primary key
20647
17:58:00,400 --> 17:58:06,480
it means that it is the key using which
20648
17:58:06,480 --> 17:58:11,916
table using which we should be able to
20649
17:58:11,915 --> 17:58:15,915
different users from this table so what
20650
17:58:14,720 --> 17:58:18,160
we're going to do is we're going to take
20651
17:58:18,160 --> 17:58:22,080
ai is auto increment i believe and auto
20652
17:58:20,720 --> 17:58:24,635
increment is a great functionality in
20653
17:58:22,080 --> 17:58:27,116
sqlite and many other uh databases that
20654
17:58:24,635 --> 17:58:28,239
allows you as the as the name uh
20655
17:58:28,239 --> 17:58:34,159
and as the name indicates that by you
20656
17:58:31,436 --> 17:58:36,880
creating for instance a user with a
20657
17:58:34,160 --> 17:58:39,116
specific email and you insert that user
20658
17:58:36,879 --> 17:58:41,275
into the database in this table
20659
17:58:39,116 --> 17:58:42,880
and you don't even have to assign an id
20660
17:58:41,275 --> 17:58:46,559
to that user you just say here is the
20661
17:58:42,879 --> 17:58:48,000
user email boof put it in the database
20662
17:58:48,000 --> 17:58:53,436
excuse me then sqlite is smart enough to
20663
17:58:50,879 --> 17:58:55,040
say oh i but i need an id field as well
20664
17:58:53,436 --> 17:58:56,880
you haven't provided it and then it
20665
17:58:55,040 --> 17:58:59,360
looks at this field and says oh id is
20666
17:58:56,879 --> 17:59:01,680
auto increment so it's going to create
20667
17:58:59,360 --> 17:59:04,080
that id for you and increment the
20668
17:59:01,680 --> 17:59:06,720
previously generated id and assign the
20669
17:59:04,080 --> 17:59:10,240
new id to your object for instance if
20670
17:59:06,720 --> 17:59:12,955
you have no objects inside this table
20671
17:59:10,239 --> 17:59:15,275
and then you add a new user then it
20672
17:59:12,955 --> 17:59:17,116
automatically gets the id of zero
20673
17:59:15,275 --> 17:59:18,635
and then if you generate the next user
20674
17:59:17,116 --> 17:59:21,436
and put it in there then it will get the
20675
17:59:18,635 --> 17:59:23,199
id of one so you get the idea okay and
20676
17:59:21,436 --> 17:59:25,040
that is exactly what we're gonna do for
20677
17:59:25,040 --> 17:59:29,040
and unique is just yeah as its name
20678
17:59:27,436 --> 17:59:31,116
indicates this field needs to be unique
20679
17:59:29,040 --> 17:59:35,520
but if you indicate something as primary
20680
17:59:31,116 --> 17:59:36,480
key implicitly it is a unique field okay
20681
17:59:35,519 --> 17:59:38,239
and to be honest with you we could
20682
17:59:36,480 --> 17:59:39,840
actually check not null as well meaning
20683
17:59:38,239 --> 17:59:41,680
that yeah it should always be there so
20684
17:59:41,680 --> 17:59:47,199
so that's for the user field okay
20685
17:59:47,199 --> 17:59:51,199
and now let's go ahead and create a new
20686
17:59:51,199 --> 17:59:56,879
like this and for the email you should
20687
17:59:56,879 --> 18:00:03,275
and what we'll do we'll say it shouldn't
20688
17:59:58,796 --> 18:00:06,080
be null and also the emails are unique
20689
18:00:03,275 --> 18:00:08,319
so have a look at this now it generated
20690
18:00:06,080 --> 18:00:11,200
code for it that says create table user
20691
18:00:08,319 --> 18:00:14,000
id integer not null email text not now
20692
18:00:11,199 --> 18:00:17,519
unique and it sets a primary key of id
20693
18:00:14,000 --> 18:00:20,559
with an auto auto increment so
20694
18:00:17,519 --> 18:00:22,879
this is kind of like the code that we're
20695
18:00:20,559 --> 18:00:25,275
actually going to use in our flutter
20696
18:00:22,879 --> 18:00:27,115
application in order to programmatically
20697
18:00:27,116 --> 18:00:31,040
later but for now just keep it in mind
20698
18:00:29,116 --> 18:00:32,720
this is kind of like the syntax of
20699
18:00:32,720 --> 18:00:39,200
sqlite table programmatically okay
20700
18:00:37,360 --> 18:00:40,080
all right so then you can press ok in
20701
18:00:40,080 --> 18:00:43,436
and now you can see the user table has
20702
18:00:41,915 --> 18:00:45,435
been created for you and here's the code
20703
18:00:43,436 --> 18:00:47,596
for it or the schema as it says right
20704
18:00:49,519 --> 18:00:55,359
great stuff now as we did the user table
20705
18:00:52,559 --> 18:00:57,040
we need to go and create our notes table
20706
18:00:55,360 --> 18:00:58,480
because remember from before i said
20707
18:00:57,040 --> 18:00:59,680
we're going to allow the user to create
20708
18:00:58,480 --> 18:01:01,276
notes when they're logged into the
20709
18:00:59,680 --> 18:01:02,879
application and by the time they're
20710
18:01:01,275 --> 18:01:06,000
actually logged into the application we
20711
18:01:02,879 --> 18:01:07,435
should have already created a user uh
20712
18:01:09,519 --> 18:01:14,479
and then by creation of every note we're
20713
18:01:12,400 --> 18:01:16,480
going to create also a new note in the
20714
18:01:14,480 --> 18:01:17,680
database in our note table which we're
20715
18:01:16,480 --> 18:01:18,796
just going to create as the caption
20716
18:01:18,796 --> 18:01:24,000
and then we're going to bind that note
20717
18:01:20,796 --> 18:01:25,756
to that user in the database so
20718
18:01:24,000 --> 18:01:27,839
i need you to go here then and then we
20719
18:01:25,756 --> 18:01:30,000
need to create a new table by pressing
20720
18:01:30,000 --> 18:01:34,000
so as the caption in the case here let's
20721
18:01:34,000 --> 18:01:38,635
and we're then gonna start by creating a
20722
18:01:36,480 --> 18:01:40,000
new field called id and we've already
20723
18:01:38,635 --> 18:01:43,275
gone through this you know exactly what
20724
18:01:40,000 --> 18:01:44,796
to do in here an id field as integer and
20725
18:01:43,275 --> 18:01:46,239
we say it shouldn't be in it shouldn't
20726
18:01:51,595 --> 18:01:55,275
and i think that's it to be honest with
20727
18:01:55,275 --> 18:02:00,159
auto increment as well of course so
20728
18:01:58,160 --> 18:02:02,720
all right so that's for that's for the
20729
18:02:02,720 --> 18:02:06,796
what other fields do we need in here so
20730
18:02:05,199 --> 18:02:10,479
what we could say is for instance that
20731
18:02:06,796 --> 18:02:14,000
you have a a user id and so you want to
20732
18:02:14,000 --> 18:02:17,595
and what we're gonna do in here we're
20733
18:02:16,080 --> 18:02:20,880
gonna bind this we're gonna say
20734
18:02:17,595 --> 18:02:23,199
literally that this oops where did it go
20735
18:02:20,879 --> 18:02:25,115
oh it's a little bit strange interfacing
20736
18:02:25,116 --> 18:02:31,520
um so user id integer and we're going to
20737
18:02:31,519 --> 18:02:36,159
and also what we're going to do is to
20738
18:02:34,160 --> 18:02:39,360
what we want to do is for this user id
20739
18:02:39,360 --> 18:02:44,796
a user tables id field and that's that's
20740
18:02:44,796 --> 18:02:49,756
foreign key so you have a primary key
20741
18:02:47,199 --> 18:02:51,755
which is the key that your table itself
20742
18:02:49,756 --> 18:02:54,080
manages as its own field and then you'll
20743
18:02:51,756 --> 18:02:56,796
have a foreign key as its name indicates
20744
18:02:54,080 --> 18:02:59,916
that it is it is a field inside your
20745
18:02:56,796 --> 18:03:01,756
table that is bound to another tables
20746
18:02:59,915 --> 18:03:03,839
something else column so in this case
20747
18:03:01,756 --> 18:03:06,160
our user id should be bound to the user
20748
18:03:03,839 --> 18:03:08,239
tables id column and you can create that
20749
18:03:06,160 --> 18:03:10,080
with db browser for sqlite inside
20750
18:03:12,400 --> 18:03:15,520
we add a constraint and we say we have a
20751
18:03:26,239 --> 18:03:30,239
and you can see now it says foreign keys
20752
18:03:28,239 --> 18:03:31,915
or id references it's not at the moment
20753
18:03:35,680 --> 18:03:40,879
field is hidden somewhere to the right
20754
18:03:41,519 --> 18:03:47,435
and how we could possibly create that
20755
18:03:45,040 --> 18:03:49,200
let's see i just remember from before
20756
18:03:47,436 --> 18:03:51,520
that this was a little bit strange to
20757
18:03:49,199 --> 18:03:53,915
get working from the beginning so
20758
18:03:51,519 --> 18:03:56,159
name oh maybe it's it's the name right
20759
18:03:56,160 --> 18:04:01,436
so let's say user id references
20760
18:03:58,879 --> 18:04:03,435
sqlite foreign key let's see how it's
20761
18:04:01,436 --> 18:04:04,720
created foreign key user id
20762
18:04:06,635 --> 18:04:11,116
should we say um in here if i say blob
20763
18:04:11,116 --> 18:04:15,200
foreign keys ready references
20764
18:04:15,199 --> 18:04:18,955
so that's not that's not really what i
20765
18:04:17,436 --> 18:04:20,955
wanted in there so i'm going to remove
20766
18:04:18,955 --> 18:04:24,879
this plot that i just created and let's
20767
18:04:20,955 --> 18:04:26,795
see if we can change the sequel we can't
20768
18:04:24,879 --> 18:04:29,360
are there no other fields available here
20769
18:04:30,720 --> 18:04:34,796
and i want to remove this just to see if
20770
18:04:32,480 --> 18:04:35,916
i've made any mistakes in there so
20771
18:04:35,915 --> 18:04:41,040
so here i can see we have a user id and
20772
18:04:38,319 --> 18:04:43,275
then there is a foreign key and i can
20773
18:04:41,040 --> 18:04:45,040
see here this is perhaps the right
20774
18:04:43,275 --> 18:04:46,635
actual way of doing i remember there was
20775
18:04:45,040 --> 18:04:49,040
something really strange about it and
20776
18:04:46,635 --> 18:04:53,116
now i remember that it is hidden under
20777
18:04:49,040 --> 18:04:54,796
this foreign key um column unfortunately
20778
18:04:53,116 --> 18:04:57,360
i believe it's a little bit of a strange
20779
18:04:54,796 --> 18:05:00,000
interface that's okay i'm just still
20780
18:04:57,360 --> 18:05:02,480
very very grateful that we have db
20781
18:05:00,000 --> 18:05:04,635
browser for sqlite as a free software
20782
18:05:02,480 --> 18:05:06,720
and perhaps even an open source software
20783
18:05:04,635 --> 18:05:08,080
i'm not sure about that and i'm very
20784
18:05:06,720 --> 18:05:09,520
grateful for every developer who's
20785
18:05:11,360 --> 18:05:15,116
that's understood but what we're going
20786
18:05:13,360 --> 18:05:17,360
to do here in here we want to bind this
20787
18:05:15,116 --> 18:05:19,596
user id to the id field of the user
20788
18:05:17,360 --> 18:05:21,840
table so just click here under foreign
20789
18:05:19,595 --> 18:05:24,879
key and double click actually i can see
20790
18:05:21,839 --> 18:05:27,359
then this magic thing appears here
20791
18:05:24,879 --> 18:05:31,115
so let's go ahead and say that we want
20792
18:05:27,360 --> 18:05:32,796
to bind this to the user table id field
20793
18:05:32,796 --> 18:05:38,000
i believe that should be it yeah and you
20794
18:05:35,519 --> 18:05:40,559
can see now the code generated here says
20795
18:05:38,000 --> 18:05:44,319
we have a foreign key called user id and
20796
18:05:40,559 --> 18:05:46,319
it references the user table id field
20797
18:05:46,319 --> 18:05:51,360
perfect um now we also need to do is to
20798
18:05:49,436 --> 18:05:54,160
create another field in here and that's
20799
18:05:54,160 --> 18:05:58,480
so what we're going to do for notes is
20800
18:05:56,720 --> 18:06:00,480
going to be very simple our notes are
20801
18:05:58,480 --> 18:06:01,916
not going to include any sort of
20802
18:06:01,915 --> 18:06:06,000
they're not going to include any sort of
20803
18:06:06,000 --> 18:06:10,400
images they're not going to include any
20804
18:06:10,955 --> 18:06:15,116
ordered list or unordered list they're
20805
18:06:12,955 --> 18:06:17,360
going to be simple texts okay and they
20806
18:06:15,116 --> 18:06:19,040
don't even have titles the title of a
20807
18:06:17,360 --> 18:06:20,559
note we're going to derive from the text
20808
18:06:21,839 --> 18:06:26,559
so for the text of the note let's just
20809
18:06:27,915 --> 18:06:33,115
i believe i believe that's all we need
20810
18:06:33,116 --> 18:06:37,840
user id text and yeah that's fine and
20811
18:06:36,160 --> 18:06:40,796
also to be honest with you if you want
20812
18:06:37,839 --> 18:06:43,679
to you could also create a other fields
20813
18:06:40,796 --> 18:06:45,360
in here you see in this uh in this
20814
18:06:43,680 --> 18:06:47,840
course what i what i want to do in the
20815
18:06:45,360 --> 18:06:50,635
beginning is to allow us to create a
20816
18:06:47,839 --> 18:06:53,115
local database that you can store all
20817
18:06:50,635 --> 18:06:54,400
the users notes in it but i want you to
20818
18:06:54,400 --> 18:06:57,596
later in the future get rid of this
20819
18:06:56,000 --> 18:07:00,635
local database and replace it with
20820
18:06:57,595 --> 18:07:02,720
firebase that's like the goal um however
20821
18:07:00,635 --> 18:07:04,559
some of you may actually decide to keep
20822
18:07:02,720 --> 18:07:07,436
this local database store the user's
20823
18:07:04,559 --> 18:07:08,955
information in this local database and
20824
18:07:07,436 --> 18:07:11,116
not the user's information the user's
20825
18:07:08,955 --> 18:07:14,080
notes in this database and then you may
20826
18:07:11,116 --> 18:07:15,436
want to decide to have some sort of a um
20827
18:07:14,080 --> 18:07:17,436
utility service that sits in the
20828
18:07:15,436 --> 18:07:20,080
background and syncs these notes with
20829
18:07:17,436 --> 18:07:21,436
firebase at appropriate time so
20830
18:07:20,080 --> 18:07:22,955
that's up to you if you want to do that
20831
18:07:21,436 --> 18:07:25,840
then you may want to actually create a
20832
18:07:22,955 --> 18:07:27,595
little fill in here that's called is
20833
18:07:25,839 --> 18:07:30,000
synced with server or something like
20834
18:07:30,000 --> 18:07:33,839
or it's synced with cloud i've
20835
18:07:32,239 --> 18:07:35,519
called it in my note so let's go ahead
20836
18:07:33,839 --> 18:07:36,719
and do that although we're not actually
20837
18:07:35,519 --> 18:07:38,795
going to use this field but i just want
20838
18:07:36,720 --> 18:07:40,319
to demonstrate to you that this field is
20839
18:07:44,080 --> 18:07:48,635
then in here let's say it is an integer
20840
18:07:48,635 --> 18:07:54,159
um and we're going to say the default is
20841
18:07:57,116 --> 18:08:01,680
true could be translated to any value
20842
18:07:59,275 --> 18:08:02,955
that is not 0 and 0 could be translated
20843
18:08:01,680 --> 18:08:03,915
to the value of false so putting the
20844
18:08:03,915 --> 18:08:08,479
zero in here meaning that it is not
20845
18:08:09,915 --> 18:08:14,635
so let's then go ahead and say that uh
20846
18:08:12,559 --> 18:08:18,479
this is integer and it's um we should
20847
18:08:14,635 --> 18:08:20,720
say it's not null and um and it doesn't
20848
18:08:18,480 --> 18:08:22,880
have to be unique so now you can see
20849
18:08:20,720 --> 18:08:24,955
that this is the result of the creation
20850
18:08:22,879 --> 18:08:27,595
of our tables this is id integer not
20851
18:08:24,955 --> 18:08:29,839
null and the id is also primary key in
20852
18:08:27,595 --> 18:08:31,595
auto increment then there is a user id
20853
18:08:29,839 --> 18:08:33,595
which is integer not null but it's also
20854
18:08:31,595 --> 18:08:35,040
a foreign key to the user table under
20855
18:08:35,040 --> 18:08:40,080
or the id field and then we have another
20856
18:08:37,519 --> 18:08:41,915
field here says text of type text and
20857
18:08:40,080 --> 18:08:44,480
then another field that's called isync
20858
18:08:41,915 --> 18:08:46,319
with cloud integer not null default zero
20859
18:08:48,319 --> 18:08:52,000
and i'm going to press okay and i need
20860
18:08:49,756 --> 18:08:53,520
to do the same thing on your side all
20861
18:09:04,080 --> 18:09:07,756
let's go ahead and move on to the next
20862
18:09:06,319 --> 18:09:09,519
point that we're going to talk about you
20863
18:09:07,756 --> 18:09:11,756
see as the captioning case we need to
20864
18:09:09,519 --> 18:09:14,559
create these programmatically otherwise
20865
18:09:14,559 --> 18:09:17,435
database that we just created called
20866
18:09:17,436 --> 18:09:21,200
manually into the documents folder of an
20867
18:09:19,519 --> 18:09:23,595
application i'm going to explain what
20868
18:09:23,595 --> 18:09:30,000
now we have a file called testingdb it
20869
18:09:27,040 --> 18:09:32,080
has the database for our application
20870
18:09:33,275 --> 18:09:36,879
we need to be able to create these
20871
18:09:35,040 --> 18:09:40,080
tables programmatically if they don't
20872
18:09:36,879 --> 18:09:42,559
exist inside our application you see
20873
18:09:40,080 --> 18:09:44,240
this testing db for me is sitting on my
20874
18:09:42,559 --> 18:09:46,559
desktop it has absolutely nothing to do
20875
18:09:44,239 --> 18:09:49,040
with our flutter application and you
20876
18:09:46,559 --> 18:09:51,199
could be smart and like drag this db
20877
18:09:49,040 --> 18:09:53,595
into your firebase application flutter
20878
18:09:51,199 --> 18:09:55,519
application and then kind of copy it to
20879
18:09:53,595 --> 18:09:58,399
the right place when the application is
20880
18:09:55,519 --> 18:09:59,595
is executed in the user's telephone or
20881
18:09:59,595 --> 18:10:03,680
and then try to read from that database
20882
18:10:01,680 --> 18:10:05,840
it is possible but what i'm going to do
20883
18:10:03,680 --> 18:10:08,000
in here is i'm going to show you
20884
18:10:05,839 --> 18:10:10,159
a better way of doing this in that we're
20885
18:10:08,000 --> 18:10:12,000
going to actually create these tables
20886
18:10:10,160 --> 18:10:13,840
programmatically in our flutter
20887
18:10:13,839 --> 18:10:17,755
you also see that process and how that
20888
18:10:15,756 --> 18:10:20,480
works how can you integrate with
20889
18:10:17,756 --> 18:10:22,000
sqlite inside your flutter application
20890
18:10:22,000 --> 18:10:25,519
all right so in order to do that as a
20891
18:10:24,160 --> 18:10:29,680
captioning case we need a few
20892
18:10:25,519 --> 18:10:32,079
dependencies uh we need sql sqflight
20893
18:10:32,080 --> 18:10:36,880
and um i'm gonna then explain to you why
20894
18:10:34,879 --> 18:10:39,360
we need these dependencies you see sql
20895
18:10:36,879 --> 18:10:40,719
sqflight is a package it's a third-party
20896
18:10:39,360 --> 18:10:42,796
package that we need to add to our
20897
18:10:40,720 --> 18:10:45,040
application in order for our flutter
20898
18:10:42,796 --> 18:10:46,319
application to be able to talk with sql
20899
18:10:46,319 --> 18:10:51,116
so that's that's that and that is for
20900
18:10:48,635 --> 18:10:54,955
storage actual storage and talking with
20901
18:10:51,116 --> 18:10:57,040
the database that package used for okay
20902
18:10:54,955 --> 18:10:58,955
now there is a dependency that we have
20903
18:10:57,040 --> 18:11:01,840
to drag into our application called path
20904
18:10:58,955 --> 18:11:05,595
and path is used for us to be able to
20905
18:11:01,839 --> 18:11:07,679
grab the applications documents folder
20906
18:11:05,595 --> 18:11:10,795
so that we can actually create a file
20907
18:11:07,680 --> 18:11:13,040
inside a documents folder and place our
20908
18:11:10,796 --> 18:11:15,840
data inside that file just like i'm
20909
18:11:13,040 --> 18:11:17,595
placing the data for nodes and user
20910
18:11:15,839 --> 18:11:18,955
inside this testing db file on my
20911
18:11:20,635 --> 18:11:25,839
uh provider and the path provider uh i
20912
18:11:23,756 --> 18:11:27,680
may have actually taught set paths but
20913
18:11:25,839 --> 18:11:30,159
it's actually called path provider path
20914
18:11:27,680 --> 18:11:32,239
provider dependency allows us to grab
20915
18:11:32,239 --> 18:11:35,756
documents folder and if you're not
20916
18:11:34,319 --> 18:11:37,360
familiar with mobile application
20917
18:11:35,756 --> 18:11:40,080
development you may not know this but
20918
18:11:37,360 --> 18:11:43,040
applications that sit on the uh on an
20919
18:11:40,080 --> 18:11:45,916
android phone or tablet and on ios
20920
18:11:45,915 --> 18:11:50,479
they have their own file structure so
20921
18:11:48,720 --> 18:11:51,680
every application in itself has a
20922
18:11:53,199 --> 18:11:57,915
whereas on your computer like if you're
20923
18:11:55,436 --> 18:12:01,275
sitting on a from a laptop or a desktop
20924
18:11:57,915 --> 18:12:03,360
you have a documents folder that other
20925
18:12:01,275 --> 18:12:05,915
applications that run on your operating
20926
18:12:03,360 --> 18:12:08,160
system could get access to so it's one
20927
18:12:05,915 --> 18:12:10,239
documents folder every application can
20928
18:12:08,160 --> 18:12:12,400
request access to and store information
20929
18:12:10,239 --> 18:12:15,115
in it and read from it but that's not
20930
18:12:12,400 --> 18:12:17,756
the same concept in mobile devices and
20931
18:12:15,116 --> 18:12:20,156
on tablets in that every application
20932
18:12:17,755 --> 18:12:23,279
runs inside something called sandbox the
20933
18:12:20,156 --> 18:12:25,516
sandbox is like a it's like a
20934
18:12:23,279 --> 18:12:27,755
cage inside where the application
20935
18:12:25,516 --> 18:12:30,639
resides and all the application data
20936
18:12:30,639 --> 18:12:34,475
every application can request access
20937
18:12:32,555 --> 18:12:37,919
from the operating system to read its
20938
18:12:34,475 --> 18:12:39,436
own documents folder okay and that is
20939
18:12:40,960 --> 18:12:45,600
package is gonna allow us to do
20940
18:12:43,600 --> 18:12:48,400
to find our applications documents
20941
18:12:45,600 --> 18:12:50,639
folder in which we're gonna store our
20942
18:12:51,360 --> 18:12:55,755
we also need as i mentioned a
20943
18:12:57,039 --> 18:13:01,599
we need this path just for a very single
20944
18:13:01,600 --> 18:13:06,720
let's say that we have uh use path
20945
18:13:04,156 --> 18:13:08,960
provider to get our documents folder now
20946
18:13:08,960 --> 18:13:12,639
create a file in this documents folder
20947
18:13:11,039 --> 18:13:15,115
and kind of like get the full path of
20948
18:13:12,639 --> 18:13:17,115
this file documents folder slash
20949
18:13:15,115 --> 18:13:18,720
this file and that's what we need the
20950
18:13:17,115 --> 18:13:20,639
path package because it has a great
20951
18:13:18,720 --> 18:13:23,516
function called join that allows us to
20952
18:13:20,639 --> 18:13:24,876
take the path or of a directory or
20953
18:13:24,876 --> 18:13:29,919
join that path with a file name and it
20954
18:13:29,919 --> 18:13:34,080
back so we can access that file okay
20955
18:13:34,080 --> 18:13:38,835
a lot of information i'm gonna take this
20956
18:13:38,835 --> 18:13:43,360
screen so you don't see it and i can see
20957
18:13:41,600 --> 18:13:44,876
here it's asking for to control this
20958
18:13:43,360 --> 18:13:46,080
computer's access now i'm going to deny
20959
18:13:46,080 --> 18:13:50,475
um all right so what we're going to do
20960
18:13:48,320 --> 18:13:51,600
i'm going to bring our code up if i can
20961
18:13:51,600 --> 18:13:55,756
and here's the code how we left it in
20962
18:13:55,755 --> 18:13:59,755
and i can see that it is running
20963
18:13:57,755 --> 18:14:01,195
excuse me in scrcpy i'm going to bring
20964
18:13:59,755 --> 18:14:03,599
it here i'm not actually sure if you
20965
18:14:01,195 --> 18:14:05,755
need a crcpy in this chapter so it may
20966
18:14:03,600 --> 18:14:07,516
be better for me to just to minimize scr
20967
18:14:07,516 --> 18:14:11,516
and i'm going to make this code a little
20968
18:14:09,115 --> 18:14:13,039
bit bigger here as well okay
20969
18:14:15,436 --> 18:14:20,156
is to first before we go ahead and
20970
18:14:18,000 --> 18:14:22,399
actually create our notes service is to
20971
18:14:20,156 --> 18:14:24,080
bring in those dependencies okay
20972
18:14:22,399 --> 18:14:25,279
let me change this screen layout a
20973
18:14:24,080 --> 18:14:27,835
little bit so you see better i'm going
20974
18:14:27,835 --> 18:14:33,835
so i need you to go to your uh
20975
18:14:31,360 --> 18:14:36,000
editor text editor or id if you're using
20976
18:14:33,835 --> 18:14:38,156
and we need to bring in those uh
20977
18:14:38,156 --> 18:14:44,320
so let's go and bring up uh your web
20978
18:14:41,115 --> 18:14:47,195
browser and say pop.dev and in public
20979
18:14:44,320 --> 18:14:49,516
dev search for sql flights okay and you
20980
18:14:47,195 --> 18:14:51,835
can see it's right there and the way to
20981
18:14:49,516 --> 18:14:53,195
install it is very simple you should be
20982
18:14:53,195 --> 18:14:59,279
uh flutter pop at sqflight so let's go
20983
18:14:59,279 --> 18:15:06,555
and let's give it a flight remember it's
20984
18:15:07,516 --> 18:15:12,400
okay that dependency has been added then
20985
18:15:09,600 --> 18:15:14,796
i'm going to say flutter pop add provide
20986
18:15:12,399 --> 18:15:18,399
a path provider and we can actually
20987
18:15:14,796 --> 18:15:20,320
search for it in popdev path provider
20988
18:15:20,320 --> 18:15:25,116
it's developed by the people who have
20989
18:15:22,796 --> 18:15:27,436
brought us flutter and so to begin with
20990
18:15:25,115 --> 18:15:30,000
at google so it's not really a third
20991
18:15:27,436 --> 18:15:31,360
party application or third party uh
20992
18:15:30,000 --> 18:15:33,436
package and we can actually have a look
20993
18:15:31,360 --> 18:15:35,680
at sql flight as well and see who's
20994
18:15:35,679 --> 18:15:40,155
oh it's another yeah it's another
20995
18:15:37,679 --> 18:15:43,359
publisher is not flutter themselves so
20996
18:15:40,156 --> 18:15:45,279
let's go back to path provider
20997
18:15:45,279 --> 18:15:50,959
installing as we can see is flutter pop
20998
18:15:47,436 --> 18:15:52,876
add path provider let me just copy that
20999
18:15:55,516 --> 18:16:00,400
and then we also need path so let's go
21000
18:15:58,475 --> 18:16:01,919
back in here and just type path i
21001
18:16:00,399 --> 18:16:05,195
believe this is my flutter team yeah
21002
18:16:01,919 --> 18:16:08,720
dark dev so let's just say flutter pop
21003
18:16:10,796 --> 18:16:16,080
alright that's going to do its work and
21004
18:16:18,080 --> 18:16:24,156
then you should be able to see those uh
21005
18:16:21,360 --> 18:16:26,876
dependencies sqflight path provider and
21006
18:16:26,876 --> 18:16:31,756
now that we've done that we can go and
21007
18:16:29,115 --> 18:16:34,399
do what we uh are supposed to do in here
21008
18:16:31,755 --> 18:16:35,835
which is create our notes service you
21009
18:16:35,835 --> 18:16:38,720
uh in the description i've provided here
21010
18:16:37,600 --> 18:16:40,876
in the caption i said that we're in
21011
18:16:38,720 --> 18:16:43,115
creating inside a folder called crud
21012
18:16:40,876 --> 18:16:45,919
and we already have lib services you can
21013
18:16:43,115 --> 18:16:48,959
see in here lib services and lib
21014
18:16:45,919 --> 18:16:51,279
services auth but we don't have crud so
21015
18:16:48,960 --> 18:16:54,960
i'm gonna go in here in lib and just say
21016
18:16:51,279 --> 18:16:55,360
new file and i'm gonna say services
21017
18:16:55,360 --> 18:16:58,796
absolutely it's saying that it already
21018
18:16:56,960 --> 18:17:01,196
exists so inside services i'm going to
21019
18:16:58,796 --> 18:17:03,116
say new file then i'm going to bring it
21020
18:17:01,195 --> 18:17:04,796
so you can see it as well oh where did
21021
18:17:08,320 --> 18:17:13,360
i think i need to change the screen
21022
18:17:10,320 --> 18:17:18,556
layout so unfortunately so you'll see it
21023
18:17:13,360 --> 18:17:21,600
better services again new file in here
21024
18:17:18,555 --> 18:17:25,279
a new file uh third time or fourth time
21025
18:17:21,600 --> 18:17:27,600
lucky crud and then nodes service
21026
18:17:29,919 --> 18:17:33,835
what we're going to do with this node
21027
18:17:36,244 --> 18:17:41,516
a hold of our database it is the primary
21028
18:17:39,360 --> 18:17:43,680
service that is gonna work with
21029
18:17:41,516 --> 18:17:45,116
our sqlite database it's gonna grab
21030
18:17:45,115 --> 18:17:51,115
create new users delete users it's gonna
21031
18:17:48,320 --> 18:17:53,360
find users it's gonna create notes
21032
18:17:51,115 --> 18:17:55,195
delete nodes update nodes everything
21033
18:17:53,360 --> 18:17:56,876
everything that we need from our user
21034
18:18:06,555 --> 18:18:10,796
what we need to do inside uh are
21035
18:18:12,080 --> 18:18:16,156
so what we need to do now is to actually
21036
18:18:14,156 --> 18:18:18,156
i think before we do that we need to
21037
18:18:18,156 --> 18:18:22,244
let's import our dependencies we need uh
21038
18:18:20,244 --> 18:18:24,960
three dependencies if you remember path
21039
18:18:22,244 --> 18:18:27,360
path provider and sqlite so
21040
18:18:27,360 --> 18:18:31,919
bring those in here so we don't have to
21041
18:18:31,919 --> 18:18:37,360
so imports are kind of like boring and i
21042
18:18:35,039 --> 18:18:38,795
i don't rather not type them so let's go
21043
18:18:37,360 --> 18:18:40,796
in here and you can have a look at what
21044
18:18:38,796 --> 18:18:42,475
i've imported here package sql flight
21045
18:18:42,475 --> 18:18:46,243
then we also have the path provider okay
21046
18:18:44,555 --> 18:18:48,319
so that we can get the documents folder
21047
18:18:46,244 --> 18:18:50,556
for this application and then we also
21048
18:18:48,320 --> 18:18:54,080
are importing package path path and then
21049
18:18:50,555 --> 18:18:56,555
i'm doing this show syntax in order to
21050
18:18:54,080 --> 18:18:58,080
bring in this particular function called
21051
18:18:59,195 --> 18:19:03,599
you could also skip that but the problem
21052
18:19:01,436 --> 18:19:05,360
is that then you get everything inside
21053
18:19:03,600 --> 18:19:07,756
path of dart and that's not what i want
21054
18:19:05,360 --> 18:19:09,115
so i just want us to get this particular
21055
18:19:09,115 --> 18:19:12,080
path.dart and you could also do the same
21056
18:19:10,876 --> 18:19:15,279
thing in here to be honest with you you
21057
18:19:12,080 --> 18:19:16,960
could just say show um and i think the
21058
18:19:15,279 --> 18:19:19,600
function is called get application
21059
18:19:16,960 --> 18:19:21,836
documents directory so let's do that why
21060
18:19:19,600 --> 18:19:24,080
not let's just get that particular
21061
18:19:21,835 --> 18:19:25,835
function from path provider as well okay
21062
18:19:24,080 --> 18:19:27,600
we don't need the entire path provider
21063
18:19:32,475 --> 18:19:36,319
what we need then is for us to be able
21064
18:19:38,796 --> 18:19:43,195
current database path as i mentioned are
21065
18:19:41,679 --> 18:19:45,515
every application that you develop with
21066
18:19:43,195 --> 18:19:48,080
flutter for mobile application mobile
21067
18:19:45,516 --> 18:19:50,244
devices such as android and ios and ipad
21068
18:19:48,080 --> 18:19:52,720
os they have their own documents
21069
18:19:50,244 --> 18:19:54,476
directory and we're going to create and
21070
18:19:52,720 --> 18:19:56,720
we're going to get the path of the
21071
18:19:54,475 --> 18:19:58,475
documents directory and then we're what
21072
18:19:56,720 --> 18:20:01,195
we're going to say is we're going to
21073
18:20:02,399 --> 18:20:07,679
with a name that we are going to specify
21074
18:20:10,156 --> 18:20:14,244
what we need to do then is to let's go
21075
18:20:12,320 --> 18:20:17,360
ahead first actually and take care of
21076
18:20:14,244 --> 18:20:20,000
some other important matters that uh
21077
18:20:17,360 --> 18:20:21,919
need to be dealt with before we actually
21078
18:20:20,000 --> 18:20:24,475
create the function functionality for
21079
18:20:21,919 --> 18:20:26,080
for our database uh implementation you
21080
18:20:24,475 --> 18:20:28,080
see note service is going to talk with
21081
18:20:26,080 --> 18:20:30,080
database but before you can do that it
21082
18:20:28,080 --> 18:20:32,639
needs to have some sort of dart
21083
18:20:30,080 --> 18:20:36,080
representation of those two two very
21084
18:20:32,639 --> 18:20:38,960
important tables that we created um user
21085
18:20:36,080 --> 18:20:40,475
and note so if you read that data from
21086
18:20:38,960 --> 18:20:43,116
the database how are we going to
21087
18:20:40,475 --> 18:20:47,279
represent it inside our dart application
21088
18:20:43,115 --> 18:20:48,875
and for that we need dart classes
21089
18:20:48,876 --> 18:20:53,756
what we need now is to as a caption in
21090
18:20:51,279 --> 18:20:56,399
the case we need database users create a
21091
18:20:53,755 --> 18:20:59,515
class called database user inside notes
21092
18:20:59,516 --> 18:21:03,919
all right that is going to be a bit of
21093
18:21:00,960 --> 18:21:06,156
code so i hope you're ready for it
21094
18:21:03,919 --> 18:21:07,679
and let's just go ahead i'm looking at
21095
18:21:07,679 --> 18:21:12,000
let's go ahead and create as the caption
21096
18:21:09,436 --> 18:21:13,835
indicates we create a class in here
21097
18:21:13,835 --> 18:21:20,000
a little bit bigger class and i'm just
21098
18:21:15,919 --> 18:21:22,720
going to say database user okay
21099
18:21:20,000 --> 18:21:24,475
now if you remember from db browser for
21100
18:21:22,720 --> 18:21:26,320
sqlite i'm going to bring it here every
21101
18:21:28,000 --> 18:21:31,279
oh we can browse it but i want to go
21102
18:21:31,279 --> 18:21:35,755
and modify the table save it and you
21103
18:21:33,919 --> 18:21:37,919
remember it had an id and an email id
21104
18:21:35,755 --> 18:21:39,195
was integer and email was text so that's
21105
18:21:37,919 --> 18:21:42,555
what we're going to define in here okay
21106
18:21:39,195 --> 18:21:44,475
so we're going to say final and id and
21107
18:21:46,320 --> 18:21:49,436
get help from visual studio to
21108
18:21:47,600 --> 18:21:51,040
completely complete this i'm not going
21109
18:21:49,436 --> 18:21:53,115
to explain these again and again because
21110
18:21:51,039 --> 18:21:55,679
we've explained this quite a lot in
21111
18:21:53,115 --> 18:21:58,475
previous chapters so by this point i
21112
18:21:55,679 --> 18:22:00,875
just assume that you know what these are
21113
18:21:58,475 --> 18:22:02,243
let's make this a constant initializer
21114
18:22:00,876 --> 18:22:03,040
and then let's go ahead and say these
21115
18:22:03,039 --> 18:22:07,360
parameters are required parameters so
21116
18:22:05,039 --> 18:22:09,755
they become also named parameters by
21117
18:22:09,755 --> 18:22:15,360
and that's that put a comma here so we
21118
18:22:12,555 --> 18:22:16,835
get dark formatter to do its magic
21119
18:22:19,436 --> 18:22:23,195
actually you shouldn't remember because
21120
18:22:21,039 --> 18:22:24,875
you don't know this maybe yet but when
21121
18:22:24,876 --> 18:22:30,796
our database we are going to read
21122
18:22:30,796 --> 18:22:36,720
for every row that we read from our for
21123
18:22:33,755 --> 18:22:38,399
from that table so every user inside
21124
18:22:38,399 --> 18:22:43,435
table called user is going to be
21125
18:22:40,320 --> 18:22:46,476
represented by this object a map of a
21126
18:22:43,436 --> 18:22:50,400
string and an optional object okay so
21127
18:22:46,475 --> 18:22:52,475
that's a row inside the user table
21128
18:22:53,600 --> 18:22:56,796
node service that we're going to create
21129
18:22:58,000 --> 18:23:02,399
users from the database and it should be
21130
18:22:59,919 --> 18:23:04,475
able to pass this to our database user
21131
18:23:02,399 --> 18:23:07,360
class and the database user class should
21132
18:23:04,475 --> 18:23:09,599
create an instance of itself
21133
18:23:07,360 --> 18:23:12,796
depending on the values inside this map
21134
18:23:09,600 --> 18:23:15,116
all right so let's go ahead and create
21135
18:23:12,796 --> 18:23:17,040
a constructor we call it database user
21136
18:23:17,039 --> 18:23:22,155
and then we say we get a map of a string
21137
18:23:20,080 --> 18:23:25,436
and an optional object in here and then
21138
18:23:22,156 --> 18:23:27,360
let's just call it map okay
21139
18:23:25,436 --> 18:23:29,115
so what we're going to do in here is
21140
18:23:27,360 --> 18:23:31,115
we're going to create the shorthand for
21141
18:23:29,115 --> 18:23:33,919
creating and constructing our object and
21142
18:23:31,115 --> 18:23:36,399
we'll say the id is equal to inside this
21143
18:23:33,919 --> 18:23:38,555
map there needs to be some sort of a
21144
18:23:36,399 --> 18:23:40,639
column called an id column so instead of
21145
18:23:38,555 --> 18:23:42,796
hard coding that in here like this let's
21146
18:23:40,639 --> 18:23:45,436
go and define a constant here and just
21147
18:23:42,796 --> 18:23:47,680
call it id column and let's just say
21148
18:23:45,436 --> 18:23:49,360
that this is equal to id and in here
21149
18:23:47,679 --> 18:23:52,155
we're just going to say id is equal to
21150
18:23:49,360 --> 18:23:54,080
ib column just like that all right
21151
18:23:52,156 --> 18:23:59,116
and then what we're going to say is we
21152
18:23:54,080 --> 18:24:00,000
also need the email an email is equal to
21153
18:24:00,000 --> 18:24:06,000
and remember we have the email i'm going
21154
18:24:11,360 --> 18:24:17,039
and let's go and have a look at this
21155
18:24:13,755 --> 18:24:18,555
email which is text right there okay
21156
18:24:18,555 --> 18:24:22,399
the table that column basically is
21157
18:24:20,320 --> 18:24:24,720
called email so let's go and go ahead
21158
18:24:22,399 --> 18:24:26,475
and create const i'm going to make this
21159
18:24:24,720 --> 18:24:28,156
a single single code as well because
21160
18:24:26,475 --> 18:24:30,639
that's like the preferred way of doing
21161
18:24:28,156 --> 18:24:32,720
it and let's call it email column and
21162
18:24:32,720 --> 18:24:36,156
full email and in here i'm just going to
21163
18:24:37,600 --> 18:24:42,080
and this should be as inked so
21164
18:24:42,080 --> 18:24:46,244
i mean it looks complicated but it
21165
18:24:43,679 --> 18:24:48,555
really isn't so and you can see it's a
21166
18:24:46,244 --> 18:24:51,279
constant so we could also actually tag
21167
18:24:48,555 --> 18:24:54,243
this as immutable and we need to import
21168
18:24:51,279 --> 18:24:55,919
foundation in order to be able
21169
18:24:57,115 --> 18:25:01,515
now that we have our database user we
21170
18:24:59,755 --> 18:25:03,279
need to also implement a few more
21171
18:25:03,279 --> 18:25:06,959
this class before we're actually done
21172
18:25:06,960 --> 18:25:11,360
so the three things that we need to do
21173
18:25:09,039 --> 18:25:13,679
for it is first to create like a string
21174
18:25:11,360 --> 18:25:15,835
descriptor for this class so that if
21175
18:25:13,679 --> 18:25:17,359
we're printing out this user to the
21176
18:25:18,555 --> 18:25:22,319
i mean before i say otherwise if we're
21177
18:25:20,156 --> 18:25:25,279
printing out an instance of the database
21178
18:25:22,320 --> 18:25:27,040
user to the debug console so we're
21179
18:25:25,279 --> 18:25:29,835
looking at the various users that are
21180
18:25:29,835 --> 18:25:34,243
if we do not implement two string on our
21181
18:25:32,244 --> 18:25:36,476
class it's literally just gonna say
21182
18:25:34,244 --> 18:25:39,040
instance of database user in the console
21183
18:25:36,475 --> 18:25:40,399
and that's not so useful so it's my it's
21184
18:25:40,399 --> 18:25:44,155
habit to if i'm planning to print out
21185
18:25:42,876 --> 18:25:46,960
these things to the console it's my
21186
18:25:44,156 --> 18:25:49,360
habit to go and implement two strings so
21187
18:25:46,960 --> 18:25:51,836
let's just in here say to string
21188
18:25:49,360 --> 18:25:53,360
and it gives us the overwrite and what
21189
18:25:51,835 --> 18:25:55,919
we're going to do in here is just we're
21190
18:26:00,639 --> 18:26:05,679
and email is equal to dollar email okay
21191
18:26:03,360 --> 18:26:07,195
so that's for your to string
21192
18:26:05,679 --> 18:26:10,719
then what we need to do is also
21193
18:26:07,195 --> 18:26:13,279
implement some sort of equality
21194
18:26:10,720 --> 18:26:15,115
behavior for our class you see we want
21195
18:26:13,279 --> 18:26:16,555
to be able to see if two different
21196
18:26:15,115 --> 18:26:18,720
peoples that we've retrieved from the
21197
18:26:16,555 --> 18:26:22,475
database are equal to each other or not
21198
18:26:18,720 --> 18:26:24,876
so if if i say if person x is equal to
21199
18:26:22,475 --> 18:26:27,279
person y then like read the person wise
21200
18:26:24,876 --> 18:26:29,836
notes such as something like that so
21201
18:26:27,279 --> 18:26:32,080
let's go and implement equality for our
21202
18:26:29,835 --> 18:26:33,835
class and the way to do that is you
21203
18:26:33,835 --> 18:26:39,515
a boolean operator and it's called bool
21204
18:26:39,516 --> 18:26:45,116
and in here you would have a covariant
21205
18:26:42,796 --> 18:26:48,244
which we haven't talked about yet and i
21206
18:26:45,115 --> 18:26:49,115
will talk talk to you right now about it
21207
18:26:49,115 --> 18:26:53,436
what covariance is is a keyword in dart
21208
18:26:51,755 --> 18:26:56,155
that not many people know about but it
21209
18:26:53,436 --> 18:26:58,080
allows you to change the behavior of
21210
18:26:56,156 --> 18:27:00,960
your input parameters so that they do
21211
18:27:00,960 --> 18:27:05,920
the signature of that parameter in the
21212
18:27:03,436 --> 18:27:07,680
super class so remember we're doing
21213
18:27:05,919 --> 18:27:09,679
overwrite here meaning that there this
21214
18:27:07,679 --> 18:27:12,555
functionality this operator is already
21215
18:27:09,679 --> 18:27:14,475
defined at the object level so let's go
21216
18:27:14,475 --> 18:27:18,796
just type object somewhere for instance
21217
18:27:18,796 --> 18:27:23,116
and then say object and then command
21218
18:27:20,720 --> 18:27:25,516
click on it just so you can go there and
21219
18:27:25,516 --> 18:27:29,516
equal equal and you'll see in here that
21220
18:27:27,436 --> 18:27:32,475
it says external operator equally and
21221
18:27:29,516 --> 18:27:35,436
the parameter should be of type object
21222
18:27:32,475 --> 18:27:37,679
now we don't want to do that we want our
21223
18:27:35,436 --> 18:27:40,555
classes to be compared to other classes
21224
18:27:37,679 --> 18:27:42,319
of the same type so if you don't
21225
18:27:40,555 --> 18:27:43,835
put covariant in here you'll get an
21226
18:27:43,835 --> 18:27:47,115
analyzer and you'll soon see that
21227
18:27:45,755 --> 18:27:48,000
actually we're going to remove that soon
21228
18:27:48,000 --> 18:27:51,516
in here we're saying that we're going to
21229
18:27:49,195 --> 18:27:53,360
compare our class with equal equal and
21230
18:27:51,516 --> 18:27:54,720
instance of our class with equal equal
21231
18:27:53,360 --> 18:27:57,835
and we're going to compare with another
21232
18:27:54,720 --> 18:27:59,600
user of the same class okay and then
21233
18:27:57,835 --> 18:28:01,679
here we're just going to say our id
21234
18:27:59,600 --> 18:28:04,156
should be equal to the other id that's
21235
18:28:04,156 --> 18:28:08,476
now let's go ahead then and remove this
21236
18:28:08,475 --> 18:28:12,399
and now you'll see you'll get an error
21237
18:28:10,156 --> 18:28:15,116
saying that oh wait a minute according
21238
18:28:12,399 --> 18:28:17,599
to object equal equals should compare
21239
18:28:15,115 --> 18:28:19,755
the current object with another object
21240
18:28:17,600 --> 18:28:22,156
but using covariant you're telling dart
21241
18:28:19,755 --> 18:28:24,000
that hey i'm not comparable with other
21242
18:28:22,156 --> 18:28:26,320
objects of any other class i'll only
21243
18:28:24,000 --> 18:28:28,475
comparable with database user instances
21244
18:28:26,320 --> 18:28:29,196
so make that happen all right
21245
18:28:29,195 --> 18:28:32,720
then after you implement equal you have
21246
18:28:31,115 --> 18:28:34,319
to also implement hashcode as is
21247
18:28:32,720 --> 18:28:36,639
suggested by the analyzer so i'm going
21248
18:28:36,639 --> 18:28:40,720
from visual studio code and i'm going to
21249
18:28:40,720 --> 18:28:46,475
and in the overwriting of hashcode i'm
21250
18:28:42,960 --> 18:28:49,196
just going to return my id's hashcode
21251
18:28:46,475 --> 18:28:51,436
okay so this basically the id is
21252
18:28:49,195 --> 18:28:53,919
becoming the primary key of this class
21253
18:28:51,436 --> 18:28:57,040
using which it will hash itself so it
21254
18:28:53,919 --> 18:28:59,115
can be placed inside maps or
21255
18:28:59,115 --> 18:29:04,875
if you're a ros developer or
21256
18:29:02,244 --> 18:29:05,680
a dictionary if you're a swift developer
21257
18:29:05,679 --> 18:29:13,515
uh that's hashing okay so it feels like
21258
18:29:08,876 --> 18:29:16,876
we're actually done now with this um
21259
18:29:13,516 --> 18:29:18,720
with the with our database user so
21260
18:29:16,876 --> 18:29:20,639
and that was quite a bit of code but we
21261
18:29:20,639 --> 18:29:23,516
all right now that we've done the
21262
18:29:21,835 --> 18:29:25,679
database user we need to do something
21263
18:29:23,516 --> 18:29:28,960
similar but this time we need to do it
21264
18:29:25,679 --> 18:29:30,319
for our nodes so we have a database user
21265
18:29:28,960 --> 18:29:32,876
now we have to create something called a
21266
18:29:34,720 --> 18:29:39,195
and i'm going to do that under the
21267
18:29:36,555 --> 18:29:41,279
database user just so that we can have
21268
18:29:39,195 --> 18:29:42,156
closer access to these constants all
21269
18:29:42,156 --> 18:29:45,680
so i suggest you do the same thing so
21270
18:29:43,835 --> 18:29:47,919
let's just say we create a class and we
21271
18:29:47,919 --> 18:29:52,000
and remember from our database schema
21272
18:29:49,835 --> 18:29:54,156
that a note so if i go in here and say
21273
18:29:52,000 --> 18:29:58,000
right clicks right click and modify
21274
18:29:54,156 --> 18:29:59,919
table then we had id user id text and a
21275
18:29:58,000 --> 18:30:02,080
field call is synced with cloud all
21276
18:29:59,919 --> 18:30:04,796
right so let's go ahead and do that id
21277
18:30:02,080 --> 18:30:07,516
is integer user ids integer text is text
21278
18:30:04,796 --> 18:30:08,475
or string as ins is synced with cloud
21279
18:30:08,475 --> 18:30:12,080
integer in here but we're gonna
21280
18:30:09,835 --> 18:30:14,319
represent it as a boolean all right
21281
18:30:12,080 --> 18:30:17,279
so keep those four fields in mind so
21282
18:30:14,320 --> 18:30:19,436
let's go ahead and say final id and
21283
18:30:19,436 --> 18:30:23,919
and we have a final int in our database
21284
18:30:22,156 --> 18:30:26,156
we call the user underscore id because
21285
18:30:23,919 --> 18:30:28,796
that's a convention in sqlite
21286
18:30:26,156 --> 18:30:30,960
or sql generally that you don't put you
21287
18:30:28,796 --> 18:30:32,720
like you don't write your fields with
21288
18:30:32,720 --> 18:30:36,639
id usually you don't type like this the
21289
18:30:34,720 --> 18:30:38,320
way we type with camel case in dart in
21290
18:30:36,639 --> 18:30:40,080
other languages we just say user
21291
18:30:38,320 --> 18:30:42,476
everything's under everything is
21292
18:30:40,080 --> 18:30:43,516
lowercase and different words are
21293
18:30:42,475 --> 18:30:45,360
separated from each other with
21294
18:30:43,516 --> 18:30:47,279
underscore but that's not the case in
21295
18:30:45,360 --> 18:30:49,360
dart and other languages instead we say
21296
18:30:49,360 --> 18:30:52,720
user id like this with panel case all
21297
18:30:52,720 --> 18:30:56,960
and we're also going to create let me
21298
18:30:54,876 --> 18:30:59,360
just move this a little bit there and
21299
18:30:56,960 --> 18:31:03,196
we're also going to create um
21300
18:31:04,244 --> 18:31:09,436
last we're going to say is synced with
21301
18:31:07,195 --> 18:31:10,875
cloud something like that all right and
21302
18:31:09,436 --> 18:31:13,279
again remember we're not going to use
21303
18:31:10,876 --> 18:31:14,555
this input cloud it's just for you to
21304
18:31:13,279 --> 18:31:16,399
understand how we create different
21305
18:31:16,399 --> 18:31:20,795
and yeah it's just it's just something
21306
18:31:18,399 --> 18:31:22,875
that you future you guard yourself
21307
18:31:20,796 --> 18:31:25,360
against future changes in your database
21308
18:31:22,876 --> 18:31:27,436
schema so by doing this you're allowing
21309
18:31:25,360 --> 18:31:29,680
yourself to play with this field so that
21310
18:31:27,436 --> 18:31:31,680
you know every note that is locally
21311
18:31:29,679 --> 18:31:33,599
created in the local database is not by
21312
18:31:31,679 --> 18:31:34,875
default sync with the cloud all right
21313
18:31:33,600 --> 18:31:36,720
i want to get help from visual studio
21314
18:31:34,876 --> 18:31:39,436
code to complete the constructor for
21315
18:31:36,720 --> 18:31:41,919
this and i'm going to go and do
21316
18:31:39,436 --> 18:31:44,156
all of these fields as required so i'm
21317
18:31:41,919 --> 18:31:46,399
going to say required and i'm going to
21318
18:31:44,156 --> 18:31:48,400
copy that paste it right there paste it
21319
18:31:46,399 --> 18:31:51,039
right there and there and then i'm going
21320
18:31:48,399 --> 18:31:54,155
to put a comma at the end and command s
21321
18:31:51,039 --> 18:31:56,719
on mac or control s in windows and linux
21322
18:31:54,156 --> 18:31:58,476
to save this and get dart formatter to
21323
18:31:58,475 --> 18:32:02,399
all right so that's the initializer
21324
18:32:00,639 --> 18:32:04,319
and we kind of also need to do the same
21325
18:32:02,399 --> 18:32:06,795
thing that we did here for our database
21326
18:32:04,320 --> 18:32:09,196
user and that we need to instantiate it
21327
18:32:06,796 --> 18:32:10,796
from a row so let me copy this code the
21328
18:32:10,796 --> 18:32:14,080
and i'm going to bring it into our
21329
18:32:12,000 --> 18:32:16,000
database note i'm going to paste it
21330
18:32:14,080 --> 18:32:18,639
right there and instead i'm going to say
21331
18:32:16,000 --> 18:32:21,835
this from row initializer creates a
21332
18:32:21,919 --> 18:32:26,639
in our database note we have an id
21333
18:32:24,399 --> 18:32:28,399
but we don't have email so in here we're
21334
18:32:28,399 --> 18:32:34,000
is map then we need a new column which
21335
18:32:31,436 --> 18:32:36,475
is called user id column okay so let me
21336
18:32:34,000 --> 18:32:38,555
just see my notes how i created it
21337
18:32:36,475 --> 18:32:40,399
yes i can see it's called just user id
21338
18:32:38,555 --> 18:32:41,755
call so go ahead and create a new
21339
18:32:43,919 --> 18:32:48,796
user id column which is if you remember
21340
18:32:46,475 --> 18:32:50,875
from our schema it was called user
21341
18:32:53,835 --> 18:32:58,475
and here we say user id is equal to map
21342
18:32:58,475 --> 18:33:01,835
as a string and it's complaining right
21343
18:33:00,244 --> 18:33:03,436
now because we have two more fields to
21344
18:33:01,835 --> 18:33:06,000
initialize but we haven't really read
21345
18:33:03,436 --> 18:33:07,600
their values from the map so text and is
21346
18:33:06,000 --> 18:33:09,679
synced with cloud so for text we're just
21347
18:33:07,600 --> 18:33:11,756
going to say text is equal to map
21348
18:33:11,755 --> 18:33:16,959
consonant in here we say text column
21349
18:33:15,115 --> 18:33:19,360
and that's equal to text so it's just
21350
18:33:16,960 --> 18:33:20,876
the name of the field or the column here
21351
18:33:20,876 --> 18:33:24,320
so let's go ahead and say that's text
21352
18:33:27,195 --> 18:33:32,796
and we say add string and i believe
21353
18:33:32,796 --> 18:33:36,400
and we'll be calling a string can be
21354
18:33:34,399 --> 18:33:38,243
initialized oh sorry about this the user
21355
18:33:36,399 --> 18:33:40,319
id can't be a string it should be added
21356
18:33:38,244 --> 18:33:42,400
in so let's just say it's an int and
21357
18:33:40,320 --> 18:33:43,836
last but not least is synced with cloud
21358
18:33:43,835 --> 18:33:50,720
async with cloud actually is read from
21359
18:33:47,516 --> 18:33:52,555
from our database as an integer remember
21360
18:33:50,720 --> 18:33:54,080
is synced with cloud as an integer so
21361
18:33:54,080 --> 18:33:57,680
we're going to first define a column for
21362
18:34:00,876 --> 18:34:04,796
and we're going to call it async with
21363
18:34:04,796 --> 18:34:08,639
i mean i'm saying uh we're going to call
21364
18:34:07,039 --> 18:34:10,555
it but actually we've already called it
21365
18:34:08,639 --> 18:34:13,115
we called it is synced with cloud so
21366
18:34:10,555 --> 18:34:15,039
just need to copy and paste that in here
21367
18:34:15,039 --> 18:34:20,795
okay and then we're going to say is
21368
18:34:17,835 --> 18:34:24,156
synced with cloud as equal to now
21369
18:34:20,796 --> 18:34:25,600
you see we don't have this uh
21370
18:34:24,156 --> 18:34:27,195
data we don't have this field as a
21371
18:34:25,600 --> 18:34:29,196
boolean in the database we have it as an
21372
18:34:27,195 --> 18:34:31,279
integer so we have to read it as an
21373
18:34:29,195 --> 18:34:33,835
integer so we're going to say in the map
21374
18:34:31,279 --> 18:34:37,919
there's a column called async with cloud
21375
18:34:33,835 --> 18:34:40,959
column and it's an integer okay
21376
18:34:37,919 --> 18:34:42,243
if that is equal to one then
21377
18:34:44,156 --> 18:34:49,116
is equal to one true otherwise false so
21378
18:34:47,516 --> 18:34:51,040
you see what happened here we read the
21379
18:34:51,039 --> 18:34:55,919
and oh if it's equal to one then this
21380
18:34:53,600 --> 18:34:58,796
guy is equal to true otherwise this guy
21381
18:34:58,796 --> 18:35:02,796
now that we've done the initialization
21382
18:35:02,796 --> 18:35:08,400
database notes from the from the row we
21383
18:35:08,399 --> 18:35:14,795
we need to create the tostring as well
21384
18:35:14,796 --> 18:35:19,516
so let's go and overwrite to string
21385
18:35:19,516 --> 18:35:22,639
and we're just going to say this is a
21386
18:35:26,796 --> 18:35:31,116
and its id is equal to dollar id is text
21387
18:35:31,115 --> 18:35:34,959
or just its user id is equal to dollar
21388
18:35:34,960 --> 18:35:39,196
which is a field that we have
21389
18:35:37,679 --> 18:35:41,835
and then we are not going to print its
21390
18:35:39,195 --> 18:35:44,156
entire scene is an entire text instead
21391
18:35:41,835 --> 18:35:46,475
we're going to say is synced with cloud
21392
18:35:46,475 --> 18:35:52,475
other is synced with cloud just like
21393
18:35:52,555 --> 18:35:57,679
all right so yeah i mean optionally you
21394
18:35:54,639 --> 18:35:59,600
you may also add text if you want to
21395
18:35:59,600 --> 18:36:03,040
the problem is that the text of a note
21396
18:36:01,195 --> 18:36:05,039
could be so long that it actually gets
21397
18:36:03,039 --> 18:36:07,919
in the way of you getting information of
21398
18:36:05,039 --> 18:36:10,079
your class instance such as its id user
21399
18:36:07,919 --> 18:36:12,000
id and a single class so maybe if you
21400
18:36:10,080 --> 18:36:14,796
want the text to be there just add it at
21401
18:36:12,000 --> 18:36:16,876
the end so it basically doesn't disrupt
21402
18:36:14,796 --> 18:36:19,756
the rest of the fields that you may
21403
18:36:16,876 --> 18:36:21,516
actually have interest in reading okay
21404
18:36:23,039 --> 18:36:27,279
from uh tostring right now but we
21405
18:36:25,195 --> 18:36:29,115
haven't done the equality so let's go
21406
18:36:27,279 --> 18:36:31,516
and overwrite the equality as well and
21407
18:36:29,115 --> 18:36:33,919
the hash node hash code sorry
21408
18:36:31,516 --> 18:36:36,400
i'm going to copy that code from our
21409
18:36:33,919 --> 18:36:39,279
database user and bring it into the
21410
18:36:36,399 --> 18:36:40,875
database node and i'm going to then
21411
18:36:39,279 --> 18:36:42,475
paste it right here so you can see it as
21412
18:36:42,475 --> 18:36:46,475
we're in the equality we're saying that
21413
18:36:43,919 --> 18:36:49,115
we're comparable with a database note as
21414
18:36:46,475 --> 18:36:50,720
long as our id is equal to the other id
21415
18:36:50,720 --> 18:36:54,720
for the hash code then we're going to
21416
18:36:52,244 --> 18:36:58,244
get our id's hash code all right just
21417
18:36:54,720 --> 18:37:01,115
like we did for the other class
21418
18:36:58,244 --> 18:37:03,600
wow that was a lot of work to do
21419
18:37:01,115 --> 18:37:06,875
okay now we've created the database note
21420
18:37:03,600 --> 18:37:08,639
as well as the caption indicates um
21421
18:37:06,876 --> 18:37:11,360
so what we need to do now is just to
21422
18:37:08,639 --> 18:37:14,720
make sure we have all our constants in
21423
18:37:11,360 --> 18:37:16,399
place before we carry on now remember
21424
18:37:14,720 --> 18:37:18,475
right after doing these classes we're
21425
18:37:18,475 --> 18:37:24,243
our um the actual note service that
21426
18:37:21,360 --> 18:37:26,156
talks with our database all right so
21427
18:37:24,244 --> 18:37:28,876
before we do that let's create all the
21428
18:37:26,156 --> 18:37:31,279
necessary constants such as
21429
18:37:28,876 --> 18:37:33,516
the file under which our database is
21430
18:37:31,279 --> 18:37:36,039
going to be saved so let's just call it
21431
18:37:33,516 --> 18:37:38,720
bb name and we're just going to call it
21432
18:37:36,039 --> 18:37:40,875
notes.db all right remember this is like
21433
18:37:38,720 --> 18:37:43,279
the file name okay now we're going to
21434
18:37:40,876 --> 18:37:46,244
create and you can see in here in our um
21435
18:37:43,279 --> 18:37:48,244
file here in as db browser for sqlite we
21436
18:37:46,244 --> 18:37:50,556
call this file testing.db and in our
21437
18:37:48,244 --> 18:37:52,000
case we're just going to call it nodesdb
21438
18:37:50,555 --> 18:37:55,360
and we're going to store it in documents
21439
18:37:52,000 --> 18:37:57,436
folder inside that application okay
21440
18:37:55,360 --> 18:37:59,360
and then we have two tables and notes
21441
18:37:57,436 --> 18:38:01,835
table and a user table so let's go ahead
21442
18:37:59,360 --> 18:38:02,960
and create them notes table is
21443
18:38:05,835 --> 18:38:10,959
user table means user and these are like
21444
18:38:08,876 --> 18:38:13,600
table names as we define them here node
21445
18:38:13,600 --> 18:38:17,836
so those are those and what else do we
21446
18:38:15,679 --> 18:38:19,359
need um i think i think that's pretty
21447
18:38:17,835 --> 18:38:21,436
much it to be honest with you i think
21448
18:38:19,360 --> 18:38:22,796
these are all the constants that are
21449
18:38:21,436 --> 18:38:26,080
needed in order for us to be able to
21450
18:38:26,080 --> 18:38:31,040
all right let's go ahead now and start
21451
18:38:28,796 --> 18:38:33,512
with our note server so i'm gonna clear
21452
18:38:31,039 --> 18:38:35,360
this go to the top of this file and then
21453
18:38:33,512 --> 18:38:38,800
i'm gonna make some empty space in here
21454
18:38:35,360 --> 18:38:40,240
and actually create our notes service so
21455
18:38:38,800 --> 18:38:43,192
let's go ahead and create a circuit
21456
18:38:40,240 --> 18:38:44,400
class here and call it node service
21457
18:38:43,191 --> 18:38:46,399
it's very exciting this is the beginning
21458
18:38:44,399 --> 18:38:48,551
of us creating a cross service that
21459
18:38:46,399 --> 18:38:50,319
works with our database which we're soon
21460
18:38:48,551 --> 18:38:52,239
going to create actually okay
21461
18:38:50,320 --> 18:38:55,512
as the cache indicates we need a
21462
18:38:52,240 --> 18:38:57,600
function an async function that opens
21463
18:38:55,512 --> 18:38:59,760
the database you see opening a database
21464
18:38:57,600 --> 18:39:02,400
is not a functionality that you can just
21465
18:38:59,759 --> 18:39:04,159
say open now it it will happen
21466
18:39:02,399 --> 18:39:07,191
asynchronously because we may need to
21467
18:39:04,160 --> 18:39:09,120
for instance grab the current um
21468
18:39:09,119 --> 18:39:14,399
do documents folder and then append or
21469
18:39:12,080 --> 18:39:16,320
join that documents folder with
21470
18:39:14,399 --> 18:39:17,360
our database name which we define here
21471
18:39:16,320 --> 18:39:18,552
as a console so it's a lot of
21472
18:39:17,360 --> 18:39:21,119
asynchronous stuff that we're going to
21473
18:39:18,551 --> 18:39:22,080
happen in there well not a lot but a few
21474
18:39:22,080 --> 18:39:25,512
and that is the reason this open
21475
18:39:23,919 --> 18:39:26,639
function is going to be asynchronous
21476
18:39:26,639 --> 18:39:31,119
so as i caption any case let's go ahead
21477
18:39:33,679 --> 18:39:40,079
and we call it async like that
21478
18:39:37,119 --> 18:39:41,440
now this open function is going to keep
21479
18:39:41,440 --> 18:39:45,191
i mean after it has opened the database
21480
18:39:45,191 --> 18:39:49,279
store it somewhere in our node service
21481
18:39:47,440 --> 18:39:50,400
so it's going to say hey i've opened the
21482
18:39:50,399 --> 18:39:53,831
here is the object so that other
21483
18:39:52,551 --> 18:39:55,360
functions in the future such as the
21484
18:39:53,831 --> 18:39:56,399
functions are going to let us
21485
18:39:56,399 --> 18:40:00,871
users from the database or you read
21486
18:39:58,960 --> 18:40:02,800
notes from the database those functions
21487
18:40:00,872 --> 18:40:05,192
then they're going to say ah oh here's
21488
18:40:02,800 --> 18:40:07,040
the database instance i know how to grab
21489
18:40:07,039 --> 18:40:11,759
what we're going to do is to say we have
21490
18:40:11,759 --> 18:40:16,639
as you can see it is brought by our
21491
18:40:17,831 --> 18:40:20,551
and we're just going to call it db all
21492
18:40:20,551 --> 18:40:26,159
to begin with is null and we're going to
21493
18:40:33,039 --> 18:40:39,279
let's go ahead then and start by doing a
21494
18:40:36,800 --> 18:40:41,192
test and see if this database is already
21495
18:40:39,279 --> 18:40:42,872
opened you see if we have an instance of
21496
18:40:41,191 --> 18:40:44,639
this database then we can kind of like
21497
18:40:42,872 --> 18:40:45,919
assume that this database file has
21498
18:40:44,639 --> 18:40:48,240
already been opened and we don't have to
21499
18:40:45,919 --> 18:40:50,319
open it anymore so let's just say if
21500
18:40:54,240 --> 18:40:59,832
uh a new exception and we're gonna just
21501
18:40:57,039 --> 18:41:01,599
call it a database already open
21502
18:40:59,831 --> 18:41:04,080
exception so let's go and define an
21503
18:41:07,039 --> 18:41:12,360
let me see if i can copy and paste that
21504
18:41:12,639 --> 18:41:15,512
but you see this is just an exception
21505
18:41:14,000 --> 18:41:16,960
that's a database already open exception
21506
18:41:15,512 --> 18:41:20,080
all right so in here we're just going to
21507
18:41:16,960 --> 18:41:21,600
say database already open exception all
21508
18:41:21,600 --> 18:41:25,512
simple if you call the open function
21509
18:41:23,440 --> 18:41:27,119
multiple times while the database is
21510
18:41:25,512 --> 18:41:28,400
already open you're going to get an
21511
18:41:27,119 --> 18:41:30,159
exception okay so that kind of makes
21512
18:41:30,160 --> 18:41:34,160
so let's go ahead and now get the
21513
18:41:34,160 --> 18:41:37,360
directory path and we have to do a try
21514
18:41:37,360 --> 18:41:42,399
because this can actually throw an
21515
18:41:39,440 --> 18:41:44,160
exception so let's say find final
21516
18:41:46,000 --> 18:41:50,960
and you need to say get documents get
21517
18:41:49,119 --> 18:41:53,360
application documents directory if you
21518
18:41:50,960 --> 18:41:54,960
have a look at the signature of this
21519
18:41:53,360 --> 18:41:57,191
method it says i return a future of
21520
18:41:54,960 --> 18:41:59,192
directory so let's go ahead and do that
21521
18:41:57,191 --> 18:42:00,871
so we need to await on it and that's the
21522
18:41:59,191 --> 18:42:02,319
reason our function is async and that's
21523
18:42:00,872 --> 18:42:04,000
the reason we're awaiting because this
21524
18:42:04,000 --> 18:42:08,320
path asynchronously now if you look at
21525
18:42:06,080 --> 18:42:10,639
the documentation for this you can see
21526
18:42:08,320 --> 18:42:12,480
that it can actually throw an exception
21527
18:42:10,639 --> 18:42:14,240
called missing platform directory
21528
18:42:12,479 --> 18:42:16,239
exception if the system is unable to
21529
18:42:16,240 --> 18:42:19,919
all right if for some reason this the
21530
18:42:18,160 --> 18:42:21,440
system isn't able to provide a document
21531
18:42:21,440 --> 18:42:25,191
um to us is going to throw this
21532
18:42:23,440 --> 18:42:27,279
exception and that is exactly why we
21533
18:42:25,191 --> 18:42:29,599
have our code inside a try statement
21534
18:42:27,279 --> 18:42:31,831
here so let's say if that exception is
21535
18:42:29,600 --> 18:42:34,639
thrown like this then we're going to
21536
18:42:31,831 --> 18:42:36,639
throw our own exception so let's define
21537
18:42:34,639 --> 18:42:39,679
an exception we call it unable to get
21538
18:42:40,720 --> 18:42:44,800
this so it's just a class unable to get
21539
18:42:44,800 --> 18:42:49,040
exception nothing special about that
21540
18:42:49,039 --> 18:42:53,831
and then we in here we say throw
21541
18:42:54,800 --> 18:42:59,279
the name missing platform oh i see you
21542
18:42:56,872 --> 18:43:00,872
see it's it's complaining now and i can
21543
18:42:59,279 --> 18:43:02,639
see that you couldn't see the codes i
21544
18:43:00,872 --> 18:43:04,479
apologize for that it's complaining and
21545
18:43:02,639 --> 18:43:06,479
saying that i can't find this missing
21546
18:43:04,479 --> 18:43:10,000
platform directory exception and that is
21547
18:43:06,479 --> 18:43:12,159
because this is specified in this um
21548
18:43:10,000 --> 18:43:14,160
path provider but for our path provider
21549
18:43:14,160 --> 18:43:18,000
get application documents directory so
21550
18:43:15,919 --> 18:43:19,599
all other symbols are hidden from us so
21551
18:43:18,000 --> 18:43:21,679
we could just remove that and just
21552
18:43:19,600 --> 18:43:25,512
import the entire path provider and that
21553
18:43:28,160 --> 18:43:34,000
now let's do this now let's say
21554
18:43:31,440 --> 18:43:35,600
i apologize let's get the the actual
21555
18:43:35,600 --> 18:43:41,120
database so to do that you will say and
21556
18:43:38,800 --> 18:43:42,960
what are we calling it db path is equal
21557
18:43:41,119 --> 18:43:45,831
to join remember we have this function
21558
18:43:42,960 --> 18:43:47,280
joined here that we imported from path
21559
18:43:47,279 --> 18:43:54,000
the docs path the path and our db name
21560
18:43:51,759 --> 18:43:55,511
remember the db name is a constant as a
21561
18:43:54,000 --> 18:43:57,119
string we define it down here we just
21562
18:43:57,119 --> 18:44:02,479
that is now going to be joined with the
21563
18:43:59,440 --> 18:44:04,240
actual path of our documents folder all
21564
18:44:05,679 --> 18:44:09,191
is we're going to say we now want to
21565
18:44:07,512 --> 18:44:11,919
open the database with a function called
21566
18:44:09,191 --> 18:44:13,279
open database which comes from
21567
18:44:13,279 --> 18:44:19,039
and the path is dbpath and remember this
21568
18:44:16,240 --> 18:44:22,480
open database i believe is the future of
21569
18:44:19,039 --> 18:44:24,239
our database you see so we await on it
21570
18:44:25,039 --> 18:44:29,831
then we assign that to our uh local
21571
18:44:27,831 --> 18:44:32,159
database instance that's it
21572
18:44:32,160 --> 18:44:36,240
opening the database so we've now opened
21573
18:44:37,279 --> 18:44:43,831
all we've been working on right now is
21574
18:44:39,512 --> 18:44:43,832
inside this db browser for sqlite
21575
18:44:45,191 --> 18:44:50,639
thing this program here is managing its
21576
18:44:47,679 --> 18:44:52,159
own database file this database file is
21577
18:44:50,639 --> 18:44:54,240
not going to exist in your flutter
21578
18:44:52,160 --> 18:44:56,160
application we've just played around i
21579
18:44:54,240 --> 18:44:58,400
just showed you how to create a sqlite
21580
18:44:56,160 --> 18:45:01,040
database how to create different tables
21581
18:44:58,399 --> 18:45:03,191
what fields are what primary key is so
21582
18:45:01,039 --> 18:45:05,191
you need to kind of like forget about
21583
18:45:03,191 --> 18:45:06,639
this this application and where it
21584
18:45:06,639 --> 18:45:10,479
you need to now focus on how is your
21585
18:45:09,039 --> 18:45:12,399
flutter application going to be able to
21586
18:45:10,479 --> 18:45:14,399
create those tables how is your flutter
21587
18:45:12,399 --> 18:45:16,551
application going to be re reading data
21588
18:45:14,399 --> 18:45:17,919
from the tables or deleting data from
21589
18:45:17,919 --> 18:45:22,399
if you think about it if you've
21590
18:45:19,679 --> 18:45:24,799
completely forgotten about the
21591
18:45:22,399 --> 18:45:26,720
db browser for sqlite then you could
21592
18:45:24,800 --> 18:45:28,479
just say at this point in time you see
21593
18:45:26,720 --> 18:45:31,600
open database also can create the
21594
18:45:28,479 --> 18:45:33,279
database for you if it doesn't exist
21595
18:45:31,600 --> 18:45:35,680
we can look at the documentation for it
21596
18:45:35,679 --> 18:45:38,551
opens the database at a given path by
21597
18:45:38,551 --> 18:45:43,191
uh on is the first let's see encrypt is
21598
18:45:41,360 --> 18:45:45,191
called if the database did not exist
21599
18:45:43,191 --> 18:45:46,959
prior to calling opendatabase okay so it
21600
18:45:45,191 --> 18:45:48,871
can create the database for you which is
21601
18:45:46,960 --> 18:45:50,400
what it's gonna do but those tables are
21602
18:45:48,872 --> 18:45:52,639
not gonna exist and we have to have a
21603
18:45:50,399 --> 18:45:55,279
way of creating those tables if they
21604
18:45:52,639 --> 18:45:57,279
don't exist upon us opening the database
21605
18:45:55,279 --> 18:46:01,039
okay and that's what we're gonna do here
21606
18:45:57,279 --> 18:46:04,959
so let's go ahead and actually grab the
21607
18:46:01,039 --> 18:46:08,319
code for creating the user table so i'm
21608
18:46:04,960 --> 18:46:11,192
just going to say const create
21609
18:46:08,320 --> 18:46:12,552
user table is equal to and this is now
21610
18:46:11,191 --> 18:46:14,239
i'm going to actually use the syntax
21611
18:46:12,551 --> 18:46:16,720
that we haven't used before and that's
21612
18:46:16,720 --> 18:46:20,551
and then triple quotation marks on the
21613
18:46:18,320 --> 18:46:23,120
next line and then a semicolon now what
21614
18:46:20,551 --> 18:46:25,360
this does is that it allows you to place
21615
18:46:23,119 --> 18:46:27,119
pretty much anything inside this string
21616
18:46:25,360 --> 18:46:29,119
without you having to escape that string
21617
18:46:27,119 --> 18:46:31,831
because triple quotation marks are very
21618
18:46:29,119 --> 18:46:33,440
unique so if you paste any program other
21619
18:46:31,831 --> 18:46:34,959
programming languages code in here
21620
18:46:33,440 --> 18:46:37,440
chances are that programming languages
21621
18:46:34,960 --> 18:46:40,480
code is not going to include three
21622
18:46:37,440 --> 18:46:42,160
three quotation marks so the purpose of
21623
18:46:40,479 --> 18:46:45,279
this is that now you can go ahead in
21624
18:46:42,160 --> 18:46:48,639
your sqlite uh db browser for sqlite and
21625
18:46:45,279 --> 18:46:51,279
grab those users um if i go here
21626
18:46:48,639 --> 18:46:52,872
database structure user modify table and
21627
18:46:51,279 --> 18:46:55,279
you can literally now grab this code
21628
18:46:52,872 --> 18:46:59,040
that was created by a db browser for
21629
18:46:55,279 --> 18:47:02,872
sqlite and paste it in here you see
21630
18:46:59,039 --> 18:47:04,871
so there we go now you have a beautiful
21631
18:47:02,872 --> 18:47:06,720
database creation code in here sorry
21632
18:47:04,872 --> 18:47:10,400
table creation code that says create
21633
18:47:06,720 --> 18:47:11,919
table user blah blah id integer not null
21634
18:47:10,399 --> 18:47:14,551
and however we need to take care of
21635
18:47:11,919 --> 18:47:17,831
something in here and we just say if not
21636
18:47:17,831 --> 18:47:22,080
and we have to put it before user as
21637
18:47:20,000 --> 18:47:23,512
well so that's the only thing we're
21638
18:47:22,080 --> 18:47:26,240
adding here we're basically saying
21639
18:47:23,512 --> 18:47:27,440
create a table call user if it doesn't
21640
18:47:27,440 --> 18:47:31,191
you see we don't want to get an error
21641
18:47:29,440 --> 18:47:32,800
because if you create a table that
21642
18:47:31,191 --> 18:47:34,159
already exists in the database then
21643
18:47:32,800 --> 18:47:35,512
skflight is going to throw an error
21644
18:47:34,160 --> 18:47:40,320
saying that this table already exists
21645
18:47:35,512 --> 18:47:42,160
okay so that's why we need if not exists
21646
18:47:40,320 --> 18:47:44,160
and then what we need to do is to tell
21647
18:47:42,160 --> 18:47:46,240
our database this database that we
21648
18:47:44,160 --> 18:47:47,832
created up here to execute that command
21649
18:47:46,240 --> 18:47:49,440
so we're just going to say execute and
21650
18:47:47,831 --> 18:47:50,720
you see it says give me a sequel to
21651
18:47:49,440 --> 18:47:52,720
execute and i'm going to give you a
21652
18:47:50,720 --> 18:47:54,800
future void and we say okay execute
21653
18:47:59,679 --> 18:48:04,959
some comment in here we just say create
21654
18:48:09,039 --> 18:48:13,279
after we've executed the create user
21655
18:48:10,872 --> 18:48:17,192
table we also have to then take care of
21656
18:48:13,279 --> 18:48:18,319
uh the creation of our note table
21657
18:48:17,191 --> 18:48:20,639
so i'm just going to do the same thing
21658
18:48:18,320 --> 18:48:22,000
that we did up here and just say create
21659
18:48:23,440 --> 18:48:28,479
equal to as single quotes triple
21660
18:48:25,919 --> 18:48:31,360
single quote semicolon let's go to db
21661
18:48:28,479 --> 18:48:34,239
browser for sqlite and grab this node
21662
18:48:31,360 --> 18:48:36,240
here and say modify table and grab the
21663
18:48:34,240 --> 18:48:38,080
code that was generated for you and just
21664
18:48:36,240 --> 18:48:40,000
paste it in here do some formatting so
21665
18:48:38,080 --> 18:48:42,400
it becomes a little bit more bearable to
21666
18:48:40,000 --> 18:48:43,919
read and have a look at and we do the
21667
18:48:42,399 --> 18:48:47,599
same thing that we did up there we say
21668
18:48:43,919 --> 18:48:48,551
if not exists like that all right
21669
18:48:48,551 --> 18:48:51,919
i think i think to be honest with you
21670
18:48:50,479 --> 18:48:53,599
we're good to go there i don't think we
21671
18:48:51,919 --> 18:48:55,279
need to do anything special in there we
21672
18:48:53,600 --> 18:48:57,680
also have to execute that command so i'm
21673
18:48:55,279 --> 18:49:00,959
just going to grab the code from there
21674
18:49:00,960 --> 18:49:04,872
and like that and i'm going to say
21675
18:49:02,399 --> 18:49:07,679
create note table so that's going to
21676
18:49:04,872 --> 18:49:09,192
do the creation of the note table as
21677
18:49:09,191 --> 18:49:12,720
well done that was it that was a big
21678
18:49:12,720 --> 18:49:15,831
i mean by the standards of what we've
21679
18:49:14,479 --> 18:49:17,512
done so far that was quite a big
21680
18:49:15,831 --> 18:49:19,279
function okay but generally this is not
21681
18:49:17,512 --> 18:49:21,191
considered such a big function i
21682
18:49:19,279 --> 18:49:24,959
remember now you have actually constants
21683
18:49:21,191 --> 18:49:27,831
in here you could you could i mean
21684
18:49:24,960 --> 18:49:30,552
if it's me deciding i would bring this
21685
18:49:27,831 --> 18:49:32,639
constant somewhere else not inside this
21686
18:49:30,551 --> 18:49:34,239
function we could literally go ahead i
21687
18:49:32,639 --> 18:49:36,080
mean i hadn't planned for this but let's
21688
18:49:34,240 --> 18:49:37,680
go ahead and grab this constant from
21689
18:49:36,080 --> 18:49:39,191
here and bring it to the end of this
21690
18:49:37,679 --> 18:49:40,719
file okay where we have all the other
21691
18:49:40,720 --> 18:49:43,759
and let's go and grab the other constant
21692
18:49:44,639 --> 18:49:49,831
and bring it down as well so we put it
21693
18:49:47,039 --> 18:49:50,639
at the end of our file right there
21694
18:49:50,639 --> 18:49:53,679
as i said i hadn't planned for this but
21695
18:49:52,080 --> 18:49:55,831
i just think it makes sense because now
21696
18:49:53,679 --> 18:49:57,439
our function is a lot cleaner to have a
21697
18:49:55,831 --> 18:49:58,551
look at here we have a comment for
21698
18:49:57,440 --> 18:50:00,639
create the user table let's create a
21699
18:49:58,551 --> 18:50:03,440
comment as well here we say
21700
18:50:03,440 --> 18:50:08,800
and remove those empty spaces and just
21701
18:50:08,800 --> 18:50:14,551
now we have the open function
21702
18:50:12,800 --> 18:50:17,512
let's go ahead and have a look at how we
21703
18:50:14,551 --> 18:50:19,599
can do closing of our database right
21704
18:50:24,000 --> 18:50:28,160
closing code so i'm going to fold the
21705
18:50:26,479 --> 18:50:30,551
open function in here so we don't see it
21706
18:50:28,160 --> 18:50:32,320
anymore and let's go ahead and create as
21707
18:50:30,551 --> 18:50:36,080
you can see in the caption we have to
21708
18:50:32,320 --> 18:50:39,040
say future void close um okay and it's
21709
18:50:39,360 --> 18:50:43,759
what we need to do then is we shouldn't
21710
18:50:41,600 --> 18:50:45,760
allow any person to close the database
21711
18:50:43,759 --> 18:50:47,919
if the database is not open so let's go
21712
18:50:45,759 --> 18:50:49,599
ahead and define an exception for that
21713
18:50:47,919 --> 18:50:52,720
and we're going to call the database is
21714
18:50:49,600 --> 18:50:54,480
not open okay so i'm going to copy that
21715
18:50:52,720 --> 18:50:56,479
exception so i don't have to type it
21716
18:50:54,479 --> 18:50:58,159
manually manually because by this point
21717
18:50:56,479 --> 18:51:00,399
you know how to create exceptions so
21718
18:50:58,160 --> 18:51:01,279
it's nothing extraordinary for you to
21719
18:51:01,279 --> 18:51:04,800
database is not open that's a new
21720
18:51:04,800 --> 18:51:07,120
so what we're going to do is we're going
21721
18:51:07,119 --> 18:51:13,279
we have our database final db is equal
21722
18:51:10,000 --> 18:51:15,831
to our local db up there and we say if
21723
18:51:15,831 --> 18:51:22,959
and then we throw database not open oops
21724
18:51:25,279 --> 18:51:30,319
else we're gonna ask skflight to close
21725
18:51:28,720 --> 18:51:33,119
that database for us and the way to do
21726
18:51:30,320 --> 18:51:35,120
that is just to say db.close and you can
21727
18:51:33,119 --> 18:51:37,119
see it's a future of void so that's why
21728
18:51:35,119 --> 18:51:38,959
we're waiting on it all right
21729
18:51:37,119 --> 18:51:40,639
and then at that point we have to also
21730
18:51:38,960 --> 18:51:42,800
reset this local database which is
21731
18:51:40,639 --> 18:51:45,512
called underscore data underscore db so
21732
18:51:45,512 --> 18:51:52,080
right so easy peasy close went very fast
21733
18:51:55,039 --> 18:51:58,959
now what we need you see as we're now as
21734
18:51:57,440 --> 18:52:00,160
we have to open and close now we're
21735
18:51:58,960 --> 18:52:02,160
going to start working with data in the
21736
18:52:06,240 --> 18:52:11,919
database so that it can for instance
21737
18:52:11,919 --> 18:52:15,279
like every function that tries to read
21738
18:52:13,759 --> 18:52:16,799
something from the database it has to
21739
18:52:15,279 --> 18:52:18,399
have some code in order to make sure
21740
18:52:16,800 --> 18:52:20,000
that the database is open otherwise it
21741
18:52:18,399 --> 18:52:21,919
has to throw an error so we're gonna
21742
18:52:20,000 --> 18:52:23,360
have like five six of these functions
21743
18:52:21,919 --> 18:52:25,360
and each of which is gonna check the
21744
18:52:23,360 --> 18:52:27,279
database and then do the same thing is
21745
18:52:25,360 --> 18:52:28,960
the database open yes if it's not open
21746
18:52:27,279 --> 18:52:30,800
throw this error we could put that
21747
18:52:28,960 --> 18:52:33,360
particular code inside on our function
21748
18:52:30,800 --> 18:52:36,551
that we are going to call getdatabase or
21749
18:52:33,360 --> 18:52:38,240
throw okay so let's go ahead in here and
21750
18:52:36,551 --> 18:52:39,440
just say this function returns a
21751
18:52:43,831 --> 18:52:47,279
prefix it without underscore saying that
21752
18:52:45,600 --> 18:52:50,480
this is a private function and then
21753
18:52:47,279 --> 18:52:51,919
we're going to say final db is db
21754
18:53:01,679 --> 18:53:06,079
we return the db okay so this is a
21755
18:53:04,080 --> 18:53:08,720
private function that our reading and
21756
18:53:06,080 --> 18:53:10,320
writing internal functions in this class
21757
18:53:08,720 --> 18:53:12,160
are going to use in order to get the
21758
18:53:10,320 --> 18:53:13,920
current database so that they avoid
21759
18:53:12,160 --> 18:53:16,160
doing the same if statement everywhere
21760
18:53:16,399 --> 18:53:21,360
all right now we're going to start with
21761
18:53:21,360 --> 18:53:24,240
to read and write from the database in
21762
18:53:23,119 --> 18:53:26,479
this case we're gonna start with a
21763
18:53:24,240 --> 18:53:29,440
function called delete user that allows
21764
18:53:26,479 --> 18:53:30,479
us to provide as you can see an email
21765
18:53:30,479 --> 18:53:34,239
and using that email address then we're
21766
18:53:32,320 --> 18:53:36,160
gonna delete that user from our database
21767
18:53:34,240 --> 18:53:38,872
so you you will learn how to manipulate
21768
18:53:36,160 --> 18:53:40,960
data from our or inside our database
21769
18:53:40,960 --> 18:53:44,400
so let's go ahead and do that function
21770
18:53:42,872 --> 18:53:46,479
signature as it's indicated here i'm
21771
18:53:44,399 --> 18:53:47,511
just going to say future void delete
21772
18:53:47,512 --> 18:53:54,479
and required uh string email
21773
18:53:51,360 --> 18:53:55,440
and make this function asynchronous okay
21774
18:53:55,440 --> 18:53:59,919
what we're gonna do is just to get our
21775
18:53:57,440 --> 18:54:01,440
database with this absolutely beautiful
21776
18:53:59,919 --> 18:54:02,800
get database or throw function that we
21777
18:54:01,440 --> 18:54:06,160
created here so i'm just going to say
21778
18:54:02,800 --> 18:54:08,160
final vb is get database or throw so
21779
18:54:06,160 --> 18:54:10,160
this in turn is going to throw an
21780
18:54:08,160 --> 18:54:11,760
exception called database it's not open
21781
18:54:10,160 --> 18:54:12,720
if the database is not open so we don't
21782
18:54:14,831 --> 18:54:19,919
okay so in order to delete something
21783
18:54:17,679 --> 18:54:22,639
from sql flight uh or in this case
21784
18:54:19,919 --> 18:54:25,831
sqlite that is managed by sqflight we
21785
18:54:25,831 --> 18:54:31,511
d b dot delete and as you can see it
21786
18:54:28,872 --> 18:54:33,040
returns a future of the number of rows
21787
18:54:31,512 --> 18:54:35,512
that were deleted and then it says okay
21788
18:54:33,039 --> 18:54:37,759
which table and then a where clause and
21789
18:54:35,512 --> 18:54:40,240
a list of objects to pass to your word
21790
18:54:37,759 --> 18:54:42,831
clause so we're going to say the delete
21791
18:54:49,279 --> 18:54:55,440
and the where arts are in this case are
21792
18:54:52,160 --> 18:54:56,960
gonna be email to lowercase okay so i'm
21793
18:54:56,960 --> 18:55:00,720
semicolon there and a call in here and
21794
18:54:59,039 --> 18:55:02,239
then we're going to wait on it and we're
21795
18:55:02,240 --> 18:55:07,440
and delete the account is a weight
21796
18:55:05,600 --> 18:55:09,040
so in this case i mean as you can see
21797
18:55:07,440 --> 18:55:10,400
here is what we're basically doing is
21798
18:55:09,039 --> 18:55:12,719
just we're doing formatting we're going
21799
18:55:10,399 --> 18:55:14,799
to say we're going to say delete
21800
18:55:12,720 --> 18:55:17,119
something from the user table as long as
21801
18:55:14,800 --> 18:55:19,600
that something's email is equal to
21802
18:55:17,119 --> 18:55:21,679
something and that something is again
21803
18:55:19,600 --> 18:55:23,360
that email so you're basically saying
21804
18:55:23,360 --> 18:55:27,119
as many objects as possible in the user
21805
18:55:25,191 --> 18:55:29,512
table as long as their email is equal to
21806
18:55:27,119 --> 18:55:32,000
this and remember we made email unique
21807
18:55:29,512 --> 18:55:34,400
so if if we've done our homework right
21808
18:55:32,000 --> 18:55:38,240
then deleted count is it should either
21809
18:55:34,399 --> 18:55:40,000
be zero meaning that no personal
21810
18:55:38,240 --> 18:55:43,192
account or no user with this email
21811
18:55:40,000 --> 18:55:45,600
exists in it into table or it should be
21812
18:55:43,191 --> 18:55:47,831
one meaning that yeah i could delete uh
21813
18:55:49,039 --> 18:55:53,360
we're actually gonna assert that we're
21814
18:55:55,600 --> 18:55:59,279
all right then we're gonna throw an
21815
18:55:57,440 --> 18:56:02,400
error could not delete the user so i'm
21816
18:55:59,279 --> 18:56:04,000
gonna grab that um exception i'm gonna
21817
18:56:04,000 --> 18:56:07,831
so we say if we couldn't delete that
21818
18:56:05,759 --> 18:56:11,279
user we're just gonna say throw could
21819
18:56:12,960 --> 18:56:17,760
so we couldn't delete that user
21820
18:56:22,399 --> 18:56:26,871
now that we have done the delete user
21821
18:56:24,720 --> 18:56:28,080
and and remember you may be asking okay
21822
18:56:26,872 --> 18:56:30,080
why are we throwing a user maybe that
21823
18:56:28,080 --> 18:56:32,000
user doesn't exist and it should just
21824
18:56:30,080 --> 18:56:33,831
work fine and of course i mean
21825
18:56:32,000 --> 18:56:35,679
it is going to work fine if you have
21826
18:56:33,831 --> 18:56:37,191
your try and catch statements when you
21827
18:56:37,191 --> 18:56:40,639
what we're saying is that the interface
21828
18:56:38,872 --> 18:56:42,800
of the node service is going to throw an
21829
18:56:40,639 --> 18:56:45,119
error through an exception if you call
21830
18:56:42,800 --> 18:56:47,440
the lead user with a non-existing email
21831
18:56:45,119 --> 18:56:49,512
and that's completely fine for a service
21832
18:56:47,440 --> 18:56:52,160
to do but where you're consuming the
21833
18:56:49,512 --> 18:56:53,919
service then you can manage and say oh
21834
18:56:52,160 --> 18:56:55,760
this delete function is going to throw
21835
18:56:53,919 --> 18:56:57,039
an exception by like for instance
21836
18:56:55,759 --> 18:56:58,799
looking at a documentation looking at
21837
18:56:57,039 --> 18:57:01,599
the code then i'm going to handle it
21838
18:56:58,800 --> 18:57:03,360
where i'm calling it as at the call site
21839
18:57:08,720 --> 18:57:12,800
then what we're going to do as the next
21840
18:57:10,080 --> 18:57:13,512
point is to create a user and you can
21841
18:57:13,512 --> 18:57:16,960
it's going to be a future of database
21842
18:57:15,512 --> 18:57:18,479
user so this is beautiful it's going to
21843
18:57:16,960 --> 18:57:20,160
actually create a user given an email
21844
18:57:18,479 --> 18:57:21,919
address and then it's going to return
21845
18:57:20,160 --> 18:57:23,919
that database user to us so let's go
21846
18:57:21,919 --> 18:57:25,039
ahead and do that let's just say
21847
18:57:27,191 --> 18:57:33,919
and we're going to say create user
21848
18:57:29,679 --> 18:57:35,679
and a required string field of email
21849
18:57:33,919 --> 18:57:37,119
and we're going to make it asynchronous
21850
18:57:37,119 --> 18:57:40,000
so in here what we're going to do is
21851
18:57:38,639 --> 18:57:42,960
just going to get the database we're
21852
18:57:40,000 --> 18:57:44,960
going to say final vb is equal to get db
21853
18:57:44,960 --> 18:57:49,192
and then we're going to say um
21854
18:57:49,191 --> 18:57:53,599
um like that because we're going to
21855
18:57:51,360 --> 18:57:54,399
actually issue a query to the database
21856
18:57:54,399 --> 18:57:58,399
so as you can see this is a helper to
21857
18:57:56,160 --> 18:57:59,760
query table and return items found all
21858
18:57:58,399 --> 18:58:03,439
optional clauses are unfiltered or
21859
18:57:59,759 --> 18:58:03,439
formatted as sql queries okay
21860
18:58:07,039 --> 18:58:10,551
in here what we're going to first do the
21861
18:58:08,800 --> 18:58:13,120
first thing we're going to encrypt user
21862
18:58:10,551 --> 18:58:15,831
now we're going to actually check if a
21863
18:58:13,119 --> 18:58:17,599
user with a given email already exists
21864
18:58:15,831 --> 18:58:19,279
okay and that's where why we're doing
21865
18:58:17,600 --> 18:58:20,720
query and we're not like inserting
21866
18:58:19,279 --> 18:58:24,160
something into the database to begin
21867
18:58:20,720 --> 18:58:26,551
with we're asking the data to say hey
21868
18:58:26,551 --> 18:58:31,679
we're looking for and we're acquiring
21869
18:58:28,872 --> 18:58:34,240
the database for a person or a user
21870
18:58:31,679 --> 18:58:36,639
whose email is this and that this thing
21871
18:58:34,240 --> 18:58:38,639
is actually going to return and let's
21872
18:58:36,639 --> 18:58:41,759
have a look at it it's going to return
21873
18:58:38,639 --> 18:58:44,800
a list of rows that were available in
21874
18:58:41,759 --> 18:58:47,191
the database okay and that list is going
21875
18:58:47,191 --> 18:58:51,919
no entities matched our query okay so
21876
18:58:49,759 --> 18:58:55,279
let's just call it final results is
21877
18:58:51,919 --> 18:58:57,440
we're querying the user table
21878
18:59:03,440 --> 18:59:08,800
we're looking for the email and where
21879
18:59:09,119 --> 18:59:15,599
email to lowercase semicolon at the end
21880
18:59:23,512 --> 18:59:27,919
making a query to the database and
21881
18:59:25,512 --> 18:59:30,400
checking whether a user with the same
21882
18:59:27,919 --> 18:59:32,000
email exists we're basically avoiding
21883
18:59:32,000 --> 18:59:36,399
for the uniqueness of that email later
21884
18:59:38,080 --> 18:59:43,512
so in this case you can see results if i
21885
18:59:41,039 --> 18:59:47,119
move my mouse over it and it says that
21886
18:59:43,512 --> 18:59:48,479
it is a list of rows and if this list is
21887
18:59:48,479 --> 18:59:52,959
it literally means that a user with that
21888
18:59:50,800 --> 18:59:54,551
co without email address already exists
21889
18:59:56,240 --> 19:00:00,720
results is not empty then we're going to
21890
19:00:03,360 --> 19:00:07,680
exception and we don't have that
21891
19:00:04,872 --> 19:00:10,160
exception yet so let's go ahead and
21892
19:00:07,679 --> 19:00:12,399
find that exception for me at least and
21893
19:00:12,399 --> 19:00:16,319
so define this exception use already
21894
19:00:16,320 --> 19:00:21,360
and let's go ahead and throw that
21895
19:00:18,000 --> 19:00:22,320
exception user already exists okay
21896
19:00:24,000 --> 19:00:27,512
statement so at that point we've
21897
19:00:25,512 --> 19:00:30,639
basically made sure that that user does
21898
19:00:27,512 --> 19:00:32,800
not exist in the database all right
21899
19:00:32,800 --> 19:00:37,192
is to go and insert that user now that
21900
19:00:35,600 --> 19:00:38,400
we've checked that he or she doesn't
21901
19:00:37,191 --> 19:00:40,551
exist in the database so we have to go
21902
19:00:38,399 --> 19:00:42,639
and insert that user so the way we do
21903
19:00:40,551 --> 19:00:45,191
that is by going and telling our
21904
19:00:42,639 --> 19:00:47,831
database we say db insert and you can
21905
19:00:45,191 --> 19:00:50,239
see it says in which table and then give
21906
19:00:50,240 --> 19:00:54,639
keys and values which is the column name
21907
19:00:52,639 --> 19:00:56,800
and the value for that column all right
21908
19:00:54,639 --> 19:00:58,800
so let's just say we insert into the
21909
19:00:58,800 --> 19:01:02,160
which is a constant we've defined from
21910
19:01:00,160 --> 19:01:03,440
before remember and then the map is
21911
19:01:03,440 --> 19:01:09,680
for the uh let's go back to our db
21912
19:01:05,831 --> 19:01:12,239
browser for sql for note sorry for user
21913
19:01:13,360 --> 19:01:18,160
we have id which is primary key not null
21914
19:01:16,551 --> 19:01:20,000
and auto increment so we don't have to
21915
19:01:18,160 --> 19:01:22,720
insert the id but we need to insert the
21916
19:01:20,000 --> 19:01:24,800
email so let's go ahead and say we have
21917
19:01:24,800 --> 19:01:30,960
is equal to b it's going to be equal to
21918
19:01:30,960 --> 19:01:34,872
so like that and insert if you can have
21919
19:01:32,800 --> 19:01:37,120
a look here it returns a feature of pins
21920
19:01:34,872 --> 19:01:38,960
and if you read the documentation
21921
19:01:37,119 --> 19:01:41,759
uh let's see if if it gives us some
21922
19:01:42,479 --> 19:01:46,319
zero could be returned for some specific
21923
19:01:44,000 --> 19:01:48,479
conflict algorithm algorithm algorithms
21924
19:01:46,320 --> 19:01:50,400
if not inserted so this is going to
21925
19:01:51,600 --> 19:01:55,279
so what it's going to do in this case is
21926
19:01:53,440 --> 19:01:57,040
actually going to give us a user id back
21927
19:01:55,279 --> 19:01:59,191
i wish there was some good documentation
21928
19:01:59,191 --> 19:02:03,440
oh here you can see it says insert
21929
19:02:03,440 --> 19:02:08,551
so this is very very good this is
21930
19:02:06,080 --> 19:02:10,551
actually really cool because remember we
21931
19:02:08,551 --> 19:02:12,399
said we return a database user and a
21932
19:02:10,551 --> 19:02:13,360
database user actually has an id in it
21933
19:02:13,360 --> 19:02:18,240
if this function here did not return the
21934
19:02:16,080 --> 19:02:20,080
id how else would we get the id then
21935
19:02:18,240 --> 19:02:21,832
we'd have to insert and then read that
21936
19:02:20,080 --> 19:02:24,240
same user in order to get the id but we
21937
19:02:21,831 --> 19:02:25,439
don't have to do that so in here then we
21938
19:02:25,440 --> 19:02:30,551
and we say user id is equal to await on
21939
19:02:30,551 --> 19:02:37,191
and then we just return a database user
21940
19:02:35,279 --> 19:02:39,831
up so you actually see the code then we
21941
19:02:37,191 --> 19:02:41,679
say user id and the email is email the
21942
19:02:44,479 --> 19:02:48,399
fantastic now we've taken care of the
21943
19:02:49,191 --> 19:02:52,551
function in our database so that's
21944
19:02:51,191 --> 19:02:54,799
create user i'm gonna follow so now we
21945
19:02:52,551 --> 19:02:56,319
have create user delete user and open
21946
19:02:54,800 --> 19:02:58,800
and close and a private function in
21947
19:02:56,320 --> 19:03:00,640
order to get the current database
21948
19:03:00,639 --> 19:03:05,119
as the caption indicates now we have to
21949
19:03:02,399 --> 19:03:08,079
take care of a function called get user
21950
19:03:05,119 --> 19:03:10,239
which it can retrieve a user given its
21951
19:03:12,399 --> 19:03:16,639
basically write that function signature
21952
19:03:14,551 --> 19:03:18,551
in here by pasting it from my note so i
21953
19:03:16,639 --> 19:03:19,919
don't have to type it manually but you
21954
19:03:18,551 --> 19:03:22,720
have it in the captions in case you need
21955
19:03:19,919 --> 19:03:23,831
to go go to it we just like we did in
21956
19:03:22,720 --> 19:03:25,360
the other functions we're going to get
21957
19:03:23,831 --> 19:03:26,799
the current database or throw an error
21958
19:03:25,360 --> 19:03:31,360
if the database isn't open so we're
21959
19:03:26,800 --> 19:03:32,720
going to say db is get database or throw
21960
19:03:31,360 --> 19:03:35,191
then what we're going to do is we're
21961
19:03:32,720 --> 19:03:36,800
going to query the database for that
21962
19:03:35,191 --> 19:03:38,551
email address and if you remember in the
21963
19:03:36,800 --> 19:03:40,080
create user we already did that so let's
21964
19:03:42,160 --> 19:03:46,480
and i'm going to fold create user and
21965
19:03:44,479 --> 19:03:49,679
let's go in here and paste that code we
21966
19:03:49,679 --> 19:03:53,511
so in this case we have to do the
21967
19:03:51,440 --> 19:03:56,000
opposite you see in create user we
21968
19:03:58,800 --> 19:04:02,080
results are actually empty because we
21969
19:04:00,639 --> 19:04:04,479
want to make sure before we create a new
21970
19:04:02,080 --> 19:04:06,720
user with that email that email doesn't
21971
19:04:04,479 --> 19:04:08,319
already exist but in this case we
21972
19:04:06,720 --> 19:04:09,759
actually have to do the opposite when
21973
19:04:08,320 --> 19:04:11,360
you want to get a user we want to make
21974
19:04:09,759 --> 19:04:15,360
sure that it does exist so we have to
21975
19:04:11,360 --> 19:04:17,279
say if results is empty meaning that we
21976
19:04:15,360 --> 19:04:20,240
couldn't find this user with the given
21977
19:04:17,279 --> 19:04:22,800
email address then we say a throw
21978
19:04:22,800 --> 19:04:26,400
actually we don't have that yet so we
21979
19:04:24,800 --> 19:04:28,639
need to define a new exception called
21980
19:04:26,399 --> 19:04:31,191
could not find user and i'm gonna bring
21981
19:04:31,191 --> 19:04:35,512
just like we have to delete user we also
21982
19:04:33,191 --> 19:04:36,799
have could not find user okay and then
21983
19:04:35,512 --> 19:04:40,320
here we have to throw that could not
21984
19:04:40,320 --> 19:04:43,440
if the results were empty then we throw
21985
19:04:42,080 --> 19:04:46,479
it up otherwise we have to then
21986
19:04:43,440 --> 19:04:49,832
construct a database a user so we say
21987
19:04:49,831 --> 19:04:54,639
from row and we say results
21988
19:04:54,639 --> 19:04:58,319
which is the first row that was read
21989
19:04:59,191 --> 19:05:03,831
user table also remember we set a limit
21990
19:05:05,759 --> 19:05:11,439
rows or one row which is the user with
21991
19:05:11,512 --> 19:05:15,119
all right perfect uh let's go ahead to
21992
19:05:13,919 --> 19:05:16,639
the next function that we have to
21993
19:05:16,639 --> 19:05:21,440
that is for us to be able to create new
21994
19:05:19,279 --> 19:05:23,440
nodes so if you want to be like me and
21995
19:05:21,440 --> 19:05:25,760
like clean up the code a little bit here
21996
19:05:23,440 --> 19:05:28,000
just fold everything so you only see the
21997
19:05:25,759 --> 19:05:30,159
function signatures now we can focus on
21998
19:05:30,160 --> 19:05:34,240
creates nodes i'm just going to find it
21999
19:05:34,240 --> 19:05:40,160
just to make sure i give you the exact
22000
19:05:37,440 --> 19:05:42,320
code necessary in order to create the
22001
19:05:42,320 --> 19:05:47,832
uh if i can find it um creates notes
22002
19:05:48,800 --> 19:05:53,120
as the caption indicates we have to have
22003
19:05:50,639 --> 19:05:55,759
a an asynchronous function called create
22004
19:05:53,119 --> 19:05:58,871
node it returns a database node and it
22005
19:05:55,759 --> 19:06:00,871
also says who is the owner of this node
22006
19:05:58,872 --> 19:06:02,960
and it's just going to create a new node
22007
19:06:00,872 --> 19:06:06,551
with an empty text and it's going to
22008
19:06:02,960 --> 19:06:09,120
associate that and nodes with the given
22009
19:06:06,551 --> 19:06:11,759
database user and for you see the
22010
19:06:09,119 --> 19:06:14,159
parameter is of type database user and a
22011
19:06:11,759 --> 19:06:16,000
way to get a user is either to create
22012
19:06:14,160 --> 19:06:18,080
one if it doesn't exist and you get the
22013
19:06:16,000 --> 19:06:20,000
database user or you get an existing
22014
19:06:20,000 --> 19:06:24,551
excuse me let's go ahead and say future
22015
19:06:24,551 --> 19:06:28,159
and we call this function as the nodes
22016
19:06:25,919 --> 19:06:32,240
indicate create node and we say it's a
22017
19:06:28,160 --> 19:06:33,512
required field of a database user
22018
19:06:32,240 --> 19:06:35,279
oops sorry it shouldn't return a
22019
19:06:33,512 --> 19:06:37,760
database user it should be database
22020
19:06:35,279 --> 19:06:41,440
nodes all right and the parameter is the
22021
19:06:37,759 --> 19:06:43,439
owner which is the database user
22022
19:06:43,440 --> 19:06:48,080
so just like we did in the other places
22023
19:06:45,279 --> 19:06:50,160
we're going to say final db is get
22024
19:06:50,160 --> 19:06:54,960
get the current database or throw
22025
19:06:53,512 --> 19:06:57,600
so what we need to do first is just to
22026
19:06:54,960 --> 19:06:59,920
make sure that the current user that we
22027
19:06:57,600 --> 19:07:01,680
are passing here already exists in the
22028
19:06:59,919 --> 19:07:04,080
database because remember database user
22029
19:07:01,679 --> 19:07:06,239
is just a class it can be created by
22030
19:07:04,080 --> 19:07:08,000
calling its constructor which is right
22031
19:07:10,639 --> 19:07:15,039
i could just create a new database user
22032
19:07:12,720 --> 19:07:17,119
instance as a database user and a random
22033
19:07:17,119 --> 19:07:21,599
but in here when we're trying to create
22034
19:07:19,119 --> 19:07:22,959
a node for that particular database user
22035
19:07:21,600 --> 19:07:24,800
we need to first make sure that that
22036
19:07:22,960 --> 19:07:26,720
database user's actually inside the
22037
19:07:24,800 --> 19:07:27,680
database okay and to do that we say
22038
19:07:31,119 --> 19:07:36,479
and we actually call our own get user
22039
19:07:34,720 --> 19:07:39,831
function in here we say get user with
22040
19:07:36,479 --> 19:07:41,191
the email of the um owner's email
22041
19:07:41,191 --> 19:07:46,871
so in here we're literally reusing the
22042
19:07:47,679 --> 19:07:51,759
what we're going to do is we're going to
22043
19:07:49,600 --> 19:07:54,552
check whether this database user is
22044
19:07:56,399 --> 19:08:00,639
what do i mean by that i mean that let's
22045
19:07:58,320 --> 19:08:02,160
say that i go and hack things up and i
22046
19:08:00,639 --> 19:08:04,240
say oh i create a new instance of
22047
19:08:02,160 --> 19:08:05,919
database user manually without inserting
22048
19:08:04,240 --> 19:08:08,320
into the database and here's the id some
22049
19:08:05,919 --> 19:08:10,240
sort of a random id and then here's the
22050
19:08:08,320 --> 19:08:11,360
email which i know exists in the
22051
19:08:11,360 --> 19:08:15,680
now what we need to do in our code is
22052
19:08:15,679 --> 19:08:20,319
id that you provided in your database
22053
19:08:18,160 --> 19:08:22,160
user here is actually an id of an
22054
19:08:20,320 --> 19:08:24,480
existing user in our database and to do
22055
19:08:22,160 --> 19:08:26,552
that we could literally use this little
22056
19:08:24,479 --> 19:08:28,551
beautiful function that we wrote earlier
22057
19:08:26,551 --> 19:08:30,239
which is the equality function of our
22058
19:08:28,551 --> 19:08:32,159
database user which actually checks our
22059
19:08:32,160 --> 19:08:37,512
database user's id so if we literally
22060
19:08:34,639 --> 19:08:40,399
say here in here we say if the db user
22061
19:08:37,512 --> 19:08:43,440
is not the owner which goes into our
22062
19:08:40,399 --> 19:08:45,679
equal equal operator and negates it it
22063
19:08:43,440 --> 19:08:47,600
says oh if it's not equal to that then
22064
19:08:53,679 --> 19:08:58,479
if we if we actually found the db user
22065
19:08:56,240 --> 19:08:59,832
with that email and the id was exact id
22066
19:08:58,479 --> 19:09:01,759
as the owner then we can actually be
22067
19:08:59,831 --> 19:09:03,919
sure that that user does exist in the
22068
19:09:01,759 --> 19:09:05,360
database with the correct email and the
22069
19:09:03,919 --> 19:09:08,160
correct id okay so let's just put
22070
19:09:05,360 --> 19:09:11,831
comments here in here and say make sure
22071
19:09:08,160 --> 19:09:12,872
owner exists in the database with the
22072
19:09:16,399 --> 19:09:20,479
all right after we've done that we also
22073
19:09:18,000 --> 19:09:21,759
have to take care of actually creating
22074
19:09:21,759 --> 19:09:28,639
the note so let's go ahead and create a
22075
19:09:24,831 --> 19:09:30,479
um text and here we say the text is uh
22076
19:09:28,639 --> 19:09:32,800
i'm sorry i noticed that you couldn't
22077
19:09:32,800 --> 19:09:37,440
i hope that you saw this code at least
22078
19:09:35,440 --> 19:09:39,279
that i wrote here but if you didn't i
22079
19:09:37,440 --> 19:09:41,600
apologize for that because just because
22080
19:09:39,279 --> 19:09:43,759
i'm using a software that i don't see
22081
19:09:41,600 --> 19:09:46,160
the software all the time on my main
22082
19:09:43,759 --> 19:09:47,759
monitor which is the monitor i'm coding
22083
19:09:46,160 --> 19:09:50,240
i have to look at a secondary monitor
22084
19:09:47,759 --> 19:09:51,831
which is down here so i'm doing my best
22085
19:09:50,240 --> 19:09:52,800
to look at that secondary monitor just
22086
19:09:51,831 --> 19:09:54,639
to make sure you're seeing all the
22087
19:09:52,800 --> 19:09:56,479
content but sometimes i could miss that
22088
19:09:57,831 --> 19:10:01,191
now you can see this code all right i'm
22089
19:09:59,512 --> 19:10:03,680
going to bring this code a little bit up
22090
19:10:01,191 --> 19:10:05,039
so let's go ahead and actually create
22091
19:10:03,679 --> 19:10:06,871
the notes so i'm going to put a comment
22092
19:10:05,039 --> 19:10:10,159
in here and say our work now is to
22093
19:10:06,872 --> 19:10:11,440
create notes create the notes
22094
19:10:10,160 --> 19:10:12,960
and what we're going to say we're going
22095
19:10:12,960 --> 19:10:16,800
db insert just like we did an insert
22096
19:10:15,191 --> 19:10:17,440
previously for create user we're going
22097
19:10:17,440 --> 19:10:21,512
do a db insert for the notes and it's in
22098
19:10:21,512 --> 19:10:24,800
and you see the values in here is going
22099
19:10:24,800 --> 19:10:29,760
and the map is if you look at the
22100
19:10:27,679 --> 19:10:31,439
insert function is literally a map of
22101
19:10:31,440 --> 19:10:35,360
let's have a look at our note table in
22102
19:10:33,039 --> 19:10:39,039
here and you can see notes right click
22103
19:10:35,360 --> 19:10:41,512
modify table it needs user id text and
22104
19:10:39,039 --> 19:10:44,551
is synced with cloud columns so let's go
22105
19:10:41,512 --> 19:10:46,160
ahead and say user id column user id
22106
19:10:48,639 --> 19:10:52,800
and we had what else do we have we have
22107
19:10:52,800 --> 19:10:56,479
and that is equal to this text that we
22108
19:10:54,800 --> 19:10:57,760
just created out there which is an empty
22109
19:10:57,759 --> 19:11:00,959
you don't have to do this you don't have
22110
19:10:59,279 --> 19:11:02,479
to do that part you could just literally
22111
19:11:03,440 --> 19:11:09,191
to me it's more readable if i define
22112
19:11:05,119 --> 19:11:12,479
these things beforehand like that okay
22113
19:11:09,191 --> 19:11:13,512
and then here we just say is synced
22114
19:11:13,512 --> 19:11:19,040
cloud column and its value is one in
22115
19:11:17,440 --> 19:11:21,600
this case so we're basically saying that
22116
19:11:21,600 --> 19:11:26,160
and i just noticed that i had missed a
22117
19:11:23,919 --> 19:11:28,240
column in there remember insert it
22118
19:11:26,160 --> 19:11:30,400
returns the id of the inserted object in
22119
19:11:28,240 --> 19:11:34,160
the database and it's a future so let's
22120
19:11:30,399 --> 19:11:36,871
then say final note id is equal to a
22121
19:11:34,160 --> 19:11:40,240
waiting on that function to insert the
22122
19:11:41,512 --> 19:11:44,960
all right now that that is done we're
22123
19:11:44,960 --> 19:11:49,600
actually return a new note instance and
22124
19:11:47,679 --> 19:11:50,959
return it a database note so what we're
22125
19:11:49,600 --> 19:11:51,832
going to do in here we're going to say
22126
19:11:51,831 --> 19:11:56,479
note is equal to database note
22127
19:11:56,479 --> 19:12:00,159
and for the id we're going to say note
22128
19:11:58,240 --> 19:12:02,552
id i'm going to bring it up so you see
22129
19:12:02,872 --> 19:12:07,760
and for the user id we're going to say
22130
19:12:04,800 --> 19:12:09,120
owner id text is text so this is another
22131
19:12:07,759 --> 19:12:11,439
reason to have it defined like a
22132
19:12:09,119 --> 19:12:12,871
constant like i did so that we can reuse
22133
19:12:12,872 --> 19:12:16,160
and is synced with cloud what should we
22134
19:12:14,639 --> 19:12:19,191
do there we should probably just say
22135
19:12:19,279 --> 19:12:23,440
creating a note you have to return it
22136
19:12:20,639 --> 19:12:24,800
then inside your um asynchronous
22137
19:12:23,440 --> 19:12:26,639
function all right i'm going to put a
22138
19:12:24,800 --> 19:12:29,279
comma here as well just to make sure
22139
19:12:29,279 --> 19:12:33,039
all right now we inserted notes into the
22140
19:12:31,360 --> 19:12:37,119
database and we also created a database
22141
19:12:33,039 --> 19:12:38,239
node to return that from our function
22142
19:12:38,240 --> 19:12:42,000
a lot of code a lot of code but i hope
22143
19:12:40,720 --> 19:12:44,639
you're sticking with me throughout this
22144
19:12:42,000 --> 19:12:46,080
chapter so now we have create note
22145
19:12:44,639 --> 19:12:47,759
as the caption indicates now we have to
22146
19:12:46,080 --> 19:12:49,512
work on a function that allows us to
22147
19:12:47,759 --> 19:12:52,000
delete a node because remember we're
22148
19:12:49,512 --> 19:12:54,080
going to allow the user to select a node
22149
19:12:52,000 --> 19:12:56,080
in the database later sorry select the
22150
19:12:54,080 --> 19:12:58,080
node on the user interface which that
22151
19:12:56,080 --> 19:12:59,831
user themselves have created and be able
22152
19:12:58,080 --> 19:13:01,759
to delete that notes all right so we
22153
19:12:59,831 --> 19:13:04,720
need a function that allows us to delete
22154
19:13:01,759 --> 19:13:05,511
a node using its id all right
22155
19:13:05,512 --> 19:13:10,639
let's go i'm just going to bring the
22156
19:13:08,479 --> 19:13:12,159
basics of this function or almost the
22157
19:13:10,639 --> 19:13:14,319
entirety of this function actually here
22158
19:13:12,160 --> 19:13:16,480
so we don't have to code that manually
22159
19:13:16,479 --> 19:13:19,512
and as you can see here the signature of
22160
19:13:18,479 --> 19:13:21,191
this function i'm going to explain it
22161
19:13:19,512 --> 19:13:23,279
all the signature up to this function is
22162
19:13:21,191 --> 19:13:24,639
called delete node as an asynchronous
22163
19:13:23,279 --> 19:13:27,600
function as the caption at the bottom of
22164
19:13:24,639 --> 19:13:29,831
the screen in case we do the get db
22165
19:13:27,600 --> 19:13:31,512
and then we're literally just calling
22166
19:13:29,831 --> 19:13:33,679
the delete function which is the exact
22167
19:13:31,512 --> 19:13:35,440
same thing which i believe we did
22168
19:13:33,679 --> 19:13:38,551
in delete user let's have a look at that
22169
19:13:35,440 --> 19:13:39,512
you see delete count db delete in the
22170
19:13:39,512 --> 19:13:44,720
and then your work clause and in this
22171
19:13:41,600 --> 19:13:47,279
case inside the delete note we're saying
22172
19:13:44,720 --> 19:13:50,000
from the note table delete an object
22173
19:13:47,279 --> 19:13:52,240
which has its column id equal to
22174
19:13:50,000 --> 19:13:54,720
something and then we're passing that
22175
19:13:54,720 --> 19:14:00,160
now if we couldn't delete anything if
22176
19:13:58,000 --> 19:14:01,360
that note didn't exist with the given id
22177
19:14:00,160 --> 19:14:03,600
and we're throwing an exception called
22178
19:14:01,360 --> 19:14:05,279
could not delete node and that's an
22179
19:14:03,600 --> 19:14:07,120
exception that we haven't defined yet
22180
19:14:05,279 --> 19:14:08,551
and we're gonna have to define that at
22181
19:14:07,119 --> 19:14:10,639
the bottom all the other exceptions that
22182
19:14:08,551 --> 19:14:12,800
we've defined so far so that's could not
22183
19:14:10,639 --> 19:14:14,319
delete node implements exception all
22184
19:14:14,320 --> 19:14:18,872
so i thought to i mean i usually don't
22185
19:14:16,399 --> 19:14:21,191
copy paste code even if it's my own code
22186
19:14:18,872 --> 19:14:23,192
but i thought this is such an easy code
22187
19:14:21,191 --> 19:14:25,279
we have literally done every part of
22188
19:14:23,191 --> 19:14:28,000
something similar before we've done the
22189
19:14:25,279 --> 19:14:30,319
get db we've done the deletes before
22190
19:14:28,000 --> 19:14:32,479
we've done this if statement before so
22191
19:14:30,320 --> 19:14:33,920
it's nothing new and i don't think you
22192
19:14:33,919 --> 19:14:37,440
me here spending time explaining the
22193
19:14:36,240 --> 19:14:38,872
same thing over and over again and
22194
19:14:37,440 --> 19:14:41,512
that's why i copy pasted this delete
22195
19:14:41,831 --> 19:14:47,191
all right then what we need also is the
22196
19:14:44,080 --> 19:14:48,872
ability for us to delete all nodes from
22197
19:14:47,191 --> 19:14:51,360
our database how do we do that as you
22198
19:14:48,872 --> 19:14:53,600
can see we need a function called future
22199
19:14:51,360 --> 19:14:55,759
means which is which indicates a number
22200
19:14:53,600 --> 19:14:57,512
of nodes that were deleted from the
22201
19:14:57,512 --> 19:15:02,240
all nodes and it's an async function
22202
19:15:02,240 --> 19:15:06,639
and uh what we need to do in here is
22203
19:15:04,800 --> 19:15:10,160
just it's very simple we're going to say
22204
19:15:06,639 --> 19:15:12,800
final db is equal to get or throw
22205
19:15:10,160 --> 19:15:14,800
and then we say db delete and then we
22206
19:15:17,831 --> 19:15:23,191
uh boom boom await on it all right
22207
19:15:23,191 --> 19:15:28,319
this if you issue the delete command on
22208
19:15:25,679 --> 19:15:30,479
on your database with a given table all
22209
19:15:28,320 --> 19:15:34,080
what it does is that it deletes every
22210
19:15:30,479 --> 19:15:35,831
row inside that uh table for you and it
22211
19:15:34,080 --> 19:15:37,440
will return the number of rows that were
22212
19:15:35,831 --> 19:15:38,871
affected so you can see it returns the
22213
19:15:37,440 --> 19:15:40,551
number of rows affected so that's
22214
19:15:38,872 --> 19:15:44,960
exactly what we want to return so just
22215
19:15:40,551 --> 19:15:46,872
return that value in this function right
22216
19:15:46,872 --> 19:15:50,639
we've done some big functions and some
22217
19:15:48,800 --> 19:15:52,400
small functions so it's so refreshing to
22218
19:15:50,639 --> 19:15:55,279
have some small functions as well
22219
19:15:55,279 --> 19:15:59,679
so what we need to do now is to create
22220
19:15:57,360 --> 19:16:02,240
the functionality for fetching a
22221
19:15:59,679 --> 19:16:04,319
specific node you see when we actually
22222
19:16:02,240 --> 19:16:05,919
get to the ui where we render all the
22223
19:16:04,320 --> 19:16:07,760
nodes that are inside the database to
22224
19:16:05,919 --> 19:16:09,679
our user in the main ui of our
22225
19:16:07,759 --> 19:16:11,679
application we're going to list all the
22226
19:16:09,679 --> 19:16:13,039
nodes and then if the user presses on
22227
19:16:11,679 --> 19:16:15,191
any specific node then we're going to
22228
19:16:13,039 --> 19:16:17,360
get the id of that node and then read
22229
19:16:15,191 --> 19:16:19,119
that node's information from the
22230
19:16:17,360 --> 19:16:21,191
database and that's why we need a
22231
19:16:19,119 --> 19:16:23,279
function that takes an id of a node and
22232
19:16:21,191 --> 19:16:25,512
actually grabs that node for us from the
22233
19:16:25,512 --> 19:16:30,080
so let's go ahead and program that so
22234
19:16:31,512 --> 19:16:35,360
function signature and we're not gonna
22235
19:16:33,759 --> 19:16:37,831
copy paste it this time let me copy
22236
19:16:35,360 --> 19:16:39,600
paste the function actually i mean so
22237
19:16:37,831 --> 19:16:43,039
let's go ahead and get the db so this is
22238
19:16:39,600 --> 19:16:44,552
easy for you now you know how to do that
22239
19:16:43,039 --> 19:16:46,399
and we're going to query the database so
22240
19:16:44,551 --> 19:16:48,159
we're just going to say final notes
22241
19:16:51,279 --> 19:16:56,399
maps that the sqlite database can read
22242
19:16:58,639 --> 19:17:01,919
and we're going to say in the notes
22243
19:17:00,160 --> 19:17:03,680
table i'm going to remove all these
22244
19:17:01,919 --> 19:17:06,872
overlays so you see the code better
22245
19:17:03,679 --> 19:17:09,831
notes table and we're going to just say
22246
19:17:06,872 --> 19:17:12,080
um remit one because we want to get one
22247
19:17:12,080 --> 19:17:17,040
and the word clause is going to be
22248
19:17:14,479 --> 19:17:19,279
um using its id you see we're gonna say
22249
19:17:17,039 --> 19:17:21,599
id equal to something and the where arts
22250
19:17:19,279 --> 19:17:24,399
are gonna be just the id itself like
22251
19:17:21,600 --> 19:17:26,552
that boom and a semicolon like that all
22252
19:17:31,919 --> 19:17:36,080
you can see it's a list if notes
22253
19:17:34,479 --> 19:17:38,399
is empty we're going to throw an
22254
19:17:36,080 --> 19:17:40,551
exception so we're going to say um could
22255
19:17:38,399 --> 19:17:43,279
not find notes do we have that
22256
19:17:40,551 --> 19:17:45,360
uh could not find user we have could not
22257
19:17:43,279 --> 19:17:46,872
find notes we don't have so let's go and
22258
19:17:48,800 --> 19:17:52,400
my own notes so we don't have to write
22259
19:17:52,399 --> 19:17:56,479
so define an exception called could not
22260
19:17:54,160 --> 19:17:59,040
find node implements exception all right
22261
19:17:56,479 --> 19:18:01,440
and then here we just throw it could not
22262
19:17:59,039 --> 19:18:02,799
find nodes so if you gave us an id we
22263
19:18:01,440 --> 19:18:04,639
couldn't find it in database we just
22264
19:18:04,639 --> 19:18:09,440
we need to actually create an instance
22265
19:18:06,800 --> 19:18:14,800
of our database node so we say return
22266
19:18:09,440 --> 19:18:17,600
database note from row and nodes first
22267
19:18:14,800 --> 19:18:21,680
okay so that's similar to how we did it
22268
19:18:17,600 --> 19:18:21,680
before for getting a user as well
22269
19:18:25,759 --> 19:18:31,191
a functionality that allows us to get
22270
19:18:28,800 --> 19:18:34,240
all nodes in the system you see we have
22271
19:18:31,191 --> 19:18:35,440
get node to delete all nodes delete node
22272
19:18:34,240 --> 19:18:37,440
create node but we don't have any
22273
19:18:35,440 --> 19:18:39,119
functionality that can get all the nodes
22274
19:18:37,440 --> 19:18:40,400
and that is the exact function we're
22275
19:18:39,119 --> 19:18:42,871
going to use the main interface of our
22276
19:18:40,399 --> 19:18:44,720
application to render all the nodes for
22277
19:18:46,872 --> 19:18:50,720
let me just make sure that i have that
22278
19:19:01,279 --> 19:19:06,160
we can find a functionality get all
22279
19:19:11,919 --> 19:19:15,919
and perhaps i don't actually have a
22280
19:19:13,759 --> 19:19:18,399
functionality right now i can see in my
22281
19:19:15,919 --> 19:19:20,872
notes that i don't actually have get all
22282
19:19:18,399 --> 19:19:23,679
notes but that is actually not a problem
22283
19:19:20,872 --> 19:19:25,832
at all in the get note here you see we
22284
19:19:23,679 --> 19:19:27,831
have that we have to define this gets
22285
19:19:25,831 --> 19:19:30,239
all notes so let's go ahead and do that
22286
19:19:27,831 --> 19:19:32,000
i'm going to copy the signature of this
22287
19:19:32,000 --> 19:19:34,800
and i'm going to bring it here and we're
22288
19:19:33,360 --> 19:19:35,759
going to say we're going to return a
22289
19:19:35,759 --> 19:19:39,831
of list of database notes and we're
22290
19:19:39,831 --> 19:19:46,551
all notes like this all right excuse me
22291
19:19:44,160 --> 19:19:47,832
and it shouldn't require any parameters
22292
19:19:46,551 --> 19:19:50,319
we're just going to ask the database to
22293
19:19:47,831 --> 19:19:52,239
return all the notes all right
22294
19:19:52,240 --> 19:19:55,279
and i'm going to copy the functionality
22295
19:20:00,720 --> 19:20:05,119
and in here we're not now going to limit
22296
19:20:02,872 --> 19:20:07,279
anything and we don't have anywhere
22297
19:20:05,119 --> 19:20:09,279
clause okay so just like that we're
22298
19:20:07,279 --> 19:20:12,160
going to say db query from the note
22299
19:20:09,279 --> 19:20:14,080
table and we get all the notes then if
22300
19:20:12,160 --> 19:20:15,440
notes is empty then we say could not
22301
19:20:18,000 --> 19:20:21,440
notes we can see it's a list we can
22302
19:20:21,440 --> 19:20:25,279
not have any special logic in here that
22303
19:20:23,279 --> 19:20:27,191
says could not find note or anything
22304
19:20:25,279 --> 19:20:29,440
and i'm gonna have a look at my notes in
22305
19:20:32,160 --> 19:20:35,440
what we need to do now now that we have
22306
19:20:33,600 --> 19:20:38,320
our notes we can map them so we say
22307
19:20:35,440 --> 19:20:40,800
notes map and you can name this
22308
19:20:38,320 --> 19:20:42,960
parameter and and in your mapping you
22309
19:20:40,800 --> 19:20:44,872
need to say okay i get a database note
22310
19:20:42,960 --> 19:20:46,480
which which you can see is of type let
22311
19:20:44,872 --> 19:20:48,720
me see if i can move my mouse over here
22312
19:20:46,479 --> 19:20:51,599
it's a map of string object this matches
22313
19:20:48,720 --> 19:20:55,440
perfectly into our database notes
22314
19:20:51,600 --> 19:20:56,320
but from row and then you say from this
22315
19:20:56,320 --> 19:21:00,720
let's actually call it note row or
22316
19:20:58,551 --> 19:21:02,399
something like that and we put it there
22317
19:21:03,679 --> 19:21:06,639
and now i think this is an eye treble to
22318
19:21:05,360 --> 19:21:09,039
be honest with you so you can see it's
22319
19:21:06,639 --> 19:21:10,639
an iterable of database notes okay so
22320
19:21:09,039 --> 19:21:12,319
what we could do is actually change our
22321
19:21:10,639 --> 19:21:14,800
future in here instead of saying list we
22322
19:21:14,800 --> 19:21:20,080
in order for the sake of uh cleanliness
22323
19:21:17,679 --> 19:21:22,639
i'm also gonna change our captioning
22324
19:21:20,080 --> 19:21:24,872
here and say iterable so you see the
22325
19:21:22,639 --> 19:21:26,551
correct information on your screen as
22326
19:21:27,600 --> 19:21:32,160
so that's our result so all we need to
22327
19:21:29,831 --> 19:21:33,439
do in here just to return it that's it
22328
19:21:36,479 --> 19:21:40,399
um and that's the functionality of get
22329
19:21:38,479 --> 19:21:43,191
all nodes so it's very simple nothing
22330
19:21:45,039 --> 19:21:49,679
now uh what we need to do is just to
22331
19:21:47,679 --> 19:21:51,119
wrap it up there's one last function
22332
19:21:49,679 --> 19:21:53,119
that we have to implement and remember
22333
19:21:51,119 --> 19:21:54,080
when we go to the main ui of the
22334
19:21:53,119 --> 19:21:56,319
application we're going to allow the
22335
19:21:54,080 --> 19:21:57,759
user to create nodes list all their
22336
19:21:56,320 --> 19:21:59,832
created nodes and also be able to click
22337
19:21:57,759 --> 19:22:01,759
on any specific node in order to update
22338
19:21:59,831 --> 19:22:04,551
the contents of that node so we need a
22339
19:22:01,759 --> 19:22:08,799
function called update note so let's go
22340
19:22:04,551 --> 19:22:11,119
and bring my notes in here update notes
22341
19:22:08,800 --> 19:22:13,600
so let's go ahead and create the
22342
19:22:11,119 --> 19:22:15,679
signature for that function and future
22343
19:22:18,399 --> 19:22:22,479
like that and we're going to have some
22344
19:22:20,000 --> 19:22:26,080
required parameters which we actually
22345
19:22:22,479 --> 19:22:27,512
grab an existing database note object
22346
19:22:27,512 --> 19:22:31,360
expect the user to also provide a new
22347
19:22:29,119 --> 19:22:33,039
text so let's just say required
22348
19:22:33,039 --> 19:22:40,719
notes and then we say it's the required
22349
19:22:43,679 --> 19:22:46,871
you're already familiar with this we're
22350
19:22:45,039 --> 19:22:48,719
gonna get the database we say get or
22351
19:22:50,160 --> 19:22:54,240
and we're just gonna issue an update to
22352
19:22:54,240 --> 19:22:59,440
database we haven't done updates before
22353
19:22:57,191 --> 19:23:00,799
for our sql like database so that's what
22354
19:22:59,440 --> 19:23:02,320
we're going to do now so let's just say
22355
19:23:02,320 --> 19:23:06,160
and you can see it says give us a table
22356
19:23:06,160 --> 19:23:10,832
your list of updates so let's go in here
22357
19:23:16,399 --> 19:23:20,799
and actually before doing that how do we
22358
19:23:18,240 --> 19:23:22,720
make sure that this table that note
22359
19:23:20,800 --> 19:23:26,800
already exists in the database because
22360
19:23:22,720 --> 19:23:27,831
like we saw earlier anybody can go and
22361
19:23:27,831 --> 19:23:30,799
or create an instance of a database node
22362
19:23:29,679 --> 19:23:32,319
it doesn't necessarily have to be in the
22363
19:23:30,800 --> 19:23:33,919
database but we kind of need to make
22364
19:23:32,320 --> 19:23:36,240
sure that it already is stored in the
22365
19:23:33,919 --> 19:23:38,800
database because before we can updates
22366
19:23:36,240 --> 19:23:40,552
to update its text so we already have a
22367
19:23:38,800 --> 19:23:42,551
functionality that does that remember
22368
19:23:40,551 --> 19:23:44,872
gets notes with an id so we could
22369
19:23:50,872 --> 19:23:54,400
and you see this actually throws an
22370
19:23:54,399 --> 19:23:58,079
if you go to this function it throws an
22371
19:23:56,320 --> 19:23:59,832
error called could not find note which
22372
19:23:58,080 --> 19:24:02,720
is exactly what we're after but we're
22373
19:23:59,831 --> 19:24:04,871
not actually after the the result of it
22374
19:24:02,720 --> 19:24:06,399
we don't want the actual note because
22375
19:24:04,872 --> 19:24:08,960
we're assuming that that is the same
22376
19:24:06,399 --> 19:24:12,079
object as this so we're just ignoring
22377
19:24:12,080 --> 19:24:14,479
in the update we're going to say the
22378
19:24:14,479 --> 19:24:17,512
and the values that we're going to
22379
19:24:15,600 --> 19:24:19,440
provide are two we're going to say the
22380
19:24:21,279 --> 19:24:25,679
and we're upon you updating the text of
22381
19:24:24,080 --> 19:24:28,080
a node we're also going to assume that
22382
19:24:25,679 --> 19:24:30,479
well all of a sudden this node is not
22383
19:24:28,080 --> 19:24:32,240
synced with the back end or with the
22384
19:24:32,240 --> 19:24:37,120
uh with the cloud database anymore okay
22385
19:24:39,512 --> 19:24:43,440
so let's go in here and say is synced
22386
19:24:41,759 --> 19:24:45,919
with cloud column then it's going to be
22387
19:24:43,440 --> 19:24:47,760
set to zero remember that was an integer
22388
19:24:47,759 --> 19:24:50,399
asynchronous function so you have the
22389
19:24:50,399 --> 19:24:54,319
and it also returns the number of feel a
22390
19:24:52,479 --> 19:24:55,919
number of rows that were updated so
22391
19:25:01,119 --> 19:25:06,871
updates count is equal to a weight on db
22392
19:25:06,872 --> 19:25:11,040
at the call side calling the updates
22393
19:25:08,872 --> 19:25:12,800
note function we're assuming that that
22394
19:25:12,800 --> 19:25:18,479
in the database okay so in this case the
22395
19:25:15,191 --> 19:25:22,080
updates count should it should be a
22396
19:25:18,479 --> 19:25:25,191
value other than zero okay so we say if
22397
19:25:22,080 --> 19:25:27,119
updates count is equal to zero
22398
19:25:25,191 --> 19:25:28,720
bring the code up so you can see it
22399
19:25:27,119 --> 19:25:30,831
and then we have to throw a new
22400
19:25:28,720 --> 19:25:33,191
exception called could not update
22401
19:25:35,279 --> 19:25:38,720
so it should look like this class could
22402
19:25:36,960 --> 19:25:40,552
not update node implements exception all
22403
19:25:38,720 --> 19:25:41,919
right so i need you to write this code
22404
19:25:44,000 --> 19:25:50,000
if updates count is zero then we're
22405
19:25:46,320 --> 19:25:51,120
gonna say throw could not update
22406
19:25:52,080 --> 19:25:56,720
now you can see what we promised is to
22407
19:25:53,831 --> 19:25:58,959
return a new database note so let's go
22408
19:25:58,960 --> 19:26:04,080
do we then i mean that's that's the
22409
19:26:00,872 --> 19:26:06,960
thing we've updated that uh and how do
22410
19:26:04,080 --> 19:26:09,759
we return an update a database note to
22411
19:26:06,960 --> 19:26:11,360
you well we could just do this
22412
19:26:11,360 --> 19:26:16,399
its uh notes with that note id because
22413
19:26:14,399 --> 19:26:19,360
we already have gets notes function
22414
19:26:20,872 --> 19:26:24,551
very well done if you could stick with
22415
19:26:23,039 --> 19:26:28,399
me throughout this chapter because we
22416
19:26:24,551 --> 19:26:30,551
did a lot of work so um i'm gonna fold
22417
19:26:28,399 --> 19:26:32,000
this fold this you can see we have a lot
22418
19:26:32,000 --> 19:26:36,080
quite a lot of work and i think so far
22419
19:26:34,479 --> 19:26:38,639
this has been the biggest chapter of
22420
19:26:36,080 --> 19:26:40,800
this uh of this course but we've also
22421
19:26:38,639 --> 19:26:42,479
had a lot to do a lot of information i
22422
19:26:42,479 --> 19:26:46,319
let's go ahead now and clean up our
22423
19:26:44,320 --> 19:26:48,080
exceptions as the caption indicates
22424
19:26:46,320 --> 19:26:51,440
let's put all our crowd exceptions in
22425
19:26:48,080 --> 19:26:54,400
one file inside lib services crowd crud
22426
19:26:51,440 --> 19:26:57,832
underscore quad exceptions okay
22427
19:26:58,479 --> 19:27:04,399
uh actually it should say crowd slash
22428
19:27:00,960 --> 19:27:08,400
crowd exceptions so um if i look at my
22429
19:27:04,399 --> 19:27:10,479
notes inside services crud i'm gonna
22430
19:27:08,399 --> 19:27:14,079
fix this caption and i apologize for
22431
19:27:10,479 --> 19:27:18,000
that i'm just gonna fix it on on the go
22432
19:27:14,080 --> 19:27:20,479
like this and i'm gonna bring it up
22433
19:27:18,000 --> 19:27:22,160
and actually it should say crowd slash
22434
19:27:20,479 --> 19:27:24,080
crud underscore exception so i think
22435
19:27:22,160 --> 19:27:25,360
there was more than one error in there
22436
19:27:27,759 --> 19:27:32,799
it should be lip services slash quad
22437
19:27:30,320 --> 19:27:34,080
exceptions all right so let's go and fix
22438
19:27:34,080 --> 19:27:37,831
inside services we have crowd already
22439
19:27:35,759 --> 19:27:39,360
and we have nodes service dart let's
22440
19:27:37,831 --> 19:27:42,720
create a new file in there and we just
22441
19:27:39,360 --> 19:27:44,720
call it crud exceptions dot art now i
22442
19:27:42,720 --> 19:27:46,800
need you to go into your node service
22443
19:27:44,720 --> 19:27:49,512
dart file and grab all those exceptions
22444
19:27:46,800 --> 19:27:52,000
that you define here and just cut them
22445
19:27:49,512 --> 19:27:54,479
with command x on macintosh or control x
22446
19:27:52,000 --> 19:27:57,119
in linux and windows and then bring it
22447
19:27:54,479 --> 19:27:59,919
into your quad exceptions alright and
22448
19:28:00,160 --> 19:28:04,919
and let me also have a look here
22449
19:28:06,551 --> 19:28:09,919
just to make sure my notes are clean as
22450
19:28:09,919 --> 19:28:14,399
uh so because i i noticed that the next
22451
19:28:12,240 --> 19:28:16,000
caption was also a little bit incorrect
22452
19:28:14,399 --> 19:28:18,000
now we need to go and use that crowd
22453
19:28:16,000 --> 19:28:19,679
exceptions in our note series because as
22454
19:28:18,000 --> 19:28:21,600
you can see it is marked as red right
22455
19:28:19,679 --> 19:28:24,079
now because there were so many
22456
19:28:21,600 --> 19:28:26,080
exceptions thrown that um this file
22457
19:28:24,080 --> 19:28:27,360
doesn't have access to anymore so i'm
22458
19:28:26,080 --> 19:28:29,119
gonna get help from visual studio code
22459
19:28:27,360 --> 19:28:30,551
here with command dot and say import
22460
19:28:30,551 --> 19:28:36,959
and all those errors are gonna go away
22461
19:28:34,320 --> 19:28:39,040
all right well done huge chapter a lot
22462
19:28:36,960 --> 19:28:41,440
of work done and congratulations for
22463
19:28:39,039 --> 19:28:44,079
sticking with me through this chapter
22464
19:28:41,440 --> 19:28:48,400
now as is the tradition we're gonna now
22465
19:28:44,080 --> 19:28:50,872
go ahead and commit our work and um also
22466
19:28:48,399 --> 19:28:52,079
tag it so i'm going to make the screen a
22467
19:28:52,080 --> 19:28:57,600
let's go to our terminal here
22468
19:28:54,872 --> 19:29:00,551
and i'm then going to say in here we're
22469
19:28:57,600 --> 19:29:02,960
going to tag and commit our work as step
22470
19:29:00,551 --> 19:29:05,039
11 so let's first get status
22471
19:29:05,039 --> 19:29:09,679
hit status again here are the things
22472
19:29:07,360 --> 19:29:12,551
we've done pop spec was changed because
22473
19:29:09,679 --> 19:29:14,479
we added three dependencies uh provide a
22474
19:29:14,479 --> 19:29:18,800
and and also i believe actually it was
22475
19:29:16,800 --> 19:29:19,680
called path and path provider right
22476
19:29:19,679 --> 19:29:24,159
path path provider and sqlite so that's
22477
19:29:22,551 --> 19:29:25,919
why these two files have been changed
22478
19:29:24,160 --> 19:29:28,240
node service is completely new and crowd
22479
19:29:30,720 --> 19:29:36,000
uh step 11 as the caption indicates um
22480
19:29:36,000 --> 19:29:40,399
which they commit first remember and
22481
19:29:45,831 --> 19:29:49,511
now congratulations again for going
22482
19:29:48,160 --> 19:29:51,512
through this chapter with me it was a
22483
19:29:49,512 --> 19:29:52,872
huge chapter i think the biggest so far
22484
19:29:51,512 --> 19:29:54,720
now we need to get ready for the next
22485
19:29:52,872 --> 19:29:56,800
chapter as a tradition for the other
22486
19:29:54,720 --> 19:29:58,240
chapters at the end we talk a little bit
22487
19:29:56,800 --> 19:30:00,240
about what we're going to do in the next
22488
19:29:58,240 --> 19:30:01,360
chapter just to get ready for it
22489
19:30:01,360 --> 19:30:06,399
we've done a lot of work on the data now
22490
19:30:03,679 --> 19:30:08,639
we need to fuse it together with our uh
22491
19:30:06,399 --> 19:30:10,239
with our ui and in order to do that we
22492
19:30:08,639 --> 19:30:12,399
need to talk about streams and stream
22493
19:30:12,399 --> 19:30:16,159
when you're in the main ui of your
22494
19:30:14,240 --> 19:30:18,552
application after you've logged in you
22495
19:30:16,160 --> 19:30:20,960
need to see a list of your notes
22496
19:30:18,551 --> 19:30:22,479
but what happens if you see the list of
22497
19:30:20,960 --> 19:30:24,000
your notes and then you press the plus
22498
19:30:22,479 --> 19:30:25,191
button to create a new note and this
22499
19:30:24,000 --> 19:30:27,191
plus button is a button that we're going
22500
19:30:25,191 --> 19:30:29,039
to create soon in the next chapters what
22501
19:30:27,191 --> 19:30:31,512
happens if you press the plus button
22502
19:30:29,039 --> 19:30:34,399
should you then send manually a signal
22503
19:30:31,512 --> 19:30:37,191
to your ui and say hey a new note was
22504
19:30:34,399 --> 19:30:40,399
created update the list that is a lot of
22505
19:30:37,191 --> 19:30:42,551
work and for that you can do things a
22506
19:30:40,399 --> 19:30:44,799
lot cleaner if you use streams and
22507
19:30:42,551 --> 19:30:46,551
stream controllers and that's what we're
22508
19:30:44,800 --> 19:30:47,512
going to talk about in the next chapter
22509
19:30:47,512 --> 19:30:51,919
you may want to have a short pause after
22510
19:30:49,600 --> 19:30:53,760
this chapter since it was so big so do
22511
19:30:51,919 --> 19:30:55,360
that please get your refreshments coffee
22512
19:30:53,759 --> 19:30:57,279
tea whatever you want and i'll see you
22513
19:30:57,279 --> 19:31:01,919
hello everyone and welcome to chapter 28
22514
19:30:59,600 --> 19:31:03,360
of the swata course in previous chapters
22515
19:31:01,919 --> 19:31:05,831
we've been talking quite a lot about
22516
19:31:03,360 --> 19:31:07,831
crud create read update delete and we
22517
19:31:05,831 --> 19:31:10,159
talked about how we can for instance
22518
19:31:07,831 --> 19:31:12,000
have raw functionality in our node
22519
19:31:10,160 --> 19:31:13,760
service so that we can read from the
22520
19:31:12,000 --> 19:31:17,119
database delete stuff from the database
22521
19:31:13,759 --> 19:31:19,279
create users etc etc now we haven't
22522
19:31:17,119 --> 19:31:21,599
really worked in the past two chapters
22523
19:31:19,279 --> 19:31:23,039
so much with our user interface and
22524
19:31:21,600 --> 19:31:24,480
that's completely okay because sometimes
22525
19:31:23,039 --> 19:31:25,759
as you're developing applications or
22526
19:31:24,479 --> 19:31:27,759
you're developing software you may have
22527
19:31:25,759 --> 19:31:29,511
to take detours in order to create the
22528
19:31:27,759 --> 19:31:30,639
functionality that is later gonna be
22529
19:31:30,639 --> 19:31:34,160
for your user interface and you'll do
22530
19:31:32,080 --> 19:31:35,831
the same thing if you're doing um
22531
19:31:34,160 --> 19:31:37,760
back-end development like uh web
22532
19:31:35,831 --> 19:31:39,191
development so i myself do web
22533
19:31:37,759 --> 19:31:40,959
development with django and sometimes i
22534
19:31:39,191 --> 19:31:43,279
have to go and create a lot of
22535
19:31:40,960 --> 19:31:45,512
functionality on the backend first
22536
19:31:43,279 --> 19:31:47,679
before i can actually go and mirror that
22537
19:31:45,512 --> 19:31:49,191
functionality on the ui which is for
22538
19:31:47,679 --> 19:31:51,119
instance the web browser where the user
22539
19:31:49,191 --> 19:31:52,000
is consuming the content so
22540
19:31:52,000 --> 19:31:55,119
if even if you're a designer for
22541
19:31:53,360 --> 19:31:58,080
instance you're working with figma you
22542
19:31:55,119 --> 19:31:59,759
can't always produce user-facing content
22543
19:31:58,080 --> 19:32:01,191
like prototypes you may have to
22544
19:31:59,759 --> 19:32:02,871
sometimes go and design for sure
22545
19:32:01,191 --> 19:32:04,551
components and then after you've done
22546
19:32:02,872 --> 19:32:06,800
your components and you'll be ready to
22547
19:32:04,551 --> 19:32:08,479
put those components into screens and
22548
19:32:06,800 --> 19:32:09,919
display that to your product owner or
22549
19:32:13,039 --> 19:32:18,399
so far we've been working a lot with
22550
19:32:15,360 --> 19:32:19,600
what the user doesn't see and we have to
22551
19:32:19,600 --> 19:32:23,440
up those last bits and pieces before we
22552
19:32:21,440 --> 19:32:27,191
can actually go to the ui and manipulate
22553
19:32:23,440 --> 19:32:29,360
that data which our notes service can
22554
19:32:27,191 --> 19:32:30,551
right now manipulate we're missing a few
22555
19:32:29,360 --> 19:32:32,320
functionalities which we're going to
22556
19:32:30,551 --> 19:32:33,599
develop in this chapter in the node
22557
19:32:34,399 --> 19:32:38,159
what we're going to work with in this
22558
19:32:35,919 --> 19:32:40,240
chapter especially is with streams and
22559
19:32:42,320 --> 19:32:45,680
that i'm going to talk about now so what
22560
19:32:44,320 --> 19:32:47,360
are streams and what are stream
22561
19:32:47,360 --> 19:32:51,119
if you are a developer already you've
22562
19:32:49,440 --> 19:32:52,720
done software development you may know
22563
19:32:52,720 --> 19:32:58,000
about reactive programming and reactive
22564
19:32:55,831 --> 19:32:59,511
programming is where you have
22565
19:32:58,000 --> 19:33:02,000
a bunch of data sitting somewhere for
22566
19:32:59,512 --> 19:33:03,832
instance and then you perform some
22567
19:33:02,000 --> 19:33:06,080
operations on that data and this data
22568
19:33:03,831 --> 19:33:07,759
gets updated and you will be notified of
22569
19:33:06,080 --> 19:33:10,479
these updates through some sort of a
22570
19:33:10,479 --> 19:33:13,759
and if you haven't done software
22571
19:33:12,320 --> 19:33:15,040
development before so reactive
22572
19:33:13,759 --> 19:33:16,000
programming and streams and stream
22573
19:33:16,000 --> 19:33:20,160
overwhelming but we're going to start
22574
19:33:18,160 --> 19:33:21,919
very slow so there's nothing to be
22575
19:33:20,160 --> 19:33:24,160
worried about i'm going to explain
22576
19:33:21,919 --> 19:33:25,831
everything as much as i can to make
22577
19:33:25,831 --> 19:33:28,799
but if you don't have development
22578
19:33:27,440 --> 19:33:30,800
background from before software
22579
19:33:28,800 --> 19:33:32,800
engineering background there's not so
22580
19:33:30,800 --> 19:33:34,320
much that i can explain about streams
22581
19:33:32,800 --> 19:33:36,320
and stream controllers for you to
22582
19:33:34,320 --> 19:33:39,360
completely understand how they work all
22583
19:33:36,320 --> 19:33:42,240
i can say is that imagine a stream is
22584
19:33:39,360 --> 19:33:44,479
just a point of time or a stream is
22585
19:33:42,240 --> 19:33:46,000
basically an entity that controls data
22586
19:33:44,479 --> 19:33:48,800
all right just say something that keeps
22587
19:33:46,000 --> 19:33:51,039
hold of data and then you perform things
22588
19:33:48,800 --> 19:33:53,512
on it so you say add this data or remove
22589
19:33:51,039 --> 19:33:55,279
this data add this data with this data
22590
19:33:55,279 --> 19:34:00,080
it keeps hold of its data and it has a
22591
19:33:58,080 --> 19:34:03,119
timeline so it starts at some point
22592
19:34:00,080 --> 19:34:04,872
manipulates its data and then it either
22593
19:34:03,119 --> 19:34:07,512
errors out at the end saying that oops i
22594
19:34:04,872 --> 19:34:09,760
can't do this and then it just dies or
22595
19:34:07,512 --> 19:34:11,191
it will just complete at some point and
22596
19:34:09,759 --> 19:34:12,319
also there is a third category of
22597
19:34:12,320 --> 19:34:15,920
where the data just keeps living on so
22598
19:34:20,240 --> 19:34:25,040
so just think of streams as pipes of
22599
19:34:22,960 --> 19:34:27,280
data types of information that you can
22600
19:34:25,039 --> 19:34:28,959
manipulate and you can also perform
22601
19:34:28,960 --> 19:34:33,680
so if that's what streams are then what
22602
19:34:30,872 --> 19:34:36,960
are streams stream controllers in dart a
22603
19:34:33,679 --> 19:34:40,639
stream controller is your interface
22604
19:34:40,639 --> 19:34:45,600
you have the stream which is sitting
22605
19:34:45,600 --> 19:34:49,832
you you don't basically usually go and
22606
19:34:47,600 --> 19:34:52,080
add stuff to a stream directly or read
22607
19:34:49,831 --> 19:34:54,000
stuff from the stream what you can do is
22608
19:34:52,080 --> 19:34:55,919
to have a stream controller where you're
22609
19:34:54,000 --> 19:34:58,320
manipulating the stream for instance our
22610
19:34:55,919 --> 19:35:00,160
node service and this stream controller
22611
19:34:58,320 --> 19:35:02,552
is able to for instance add stuff to the
22612
19:35:00,160 --> 19:35:04,000
stream or read stuff from the stream so
22613
19:35:02,551 --> 19:35:05,759
just imagine the stream controller is
22614
19:35:04,000 --> 19:35:08,399
kind of like the manager of that stream
22615
19:35:05,759 --> 19:35:10,159
so if all of this sounds a little bit um
22616
19:35:08,399 --> 19:35:12,319
high level and abstract i completely
22617
19:35:10,160 --> 19:35:13,680
understand that it usually is when
22618
19:35:12,320 --> 19:35:15,760
you're working with reactive programming
22619
19:35:13,679 --> 19:35:17,191
some people actually hate reactive
22620
19:35:17,191 --> 19:35:20,639
as one of my colleagues used to say it's
22621
19:35:20,639 --> 19:35:25,512
hate than to learn and my approach is
22622
19:35:22,960 --> 19:35:27,280
usually if i hate something is because
22623
19:35:25,512 --> 19:35:29,040
maybe i haven't really fully understood
22624
19:35:27,279 --> 19:35:31,279
it so there are very few things in my
22625
19:35:29,039 --> 19:35:34,551
life that i've actually learned which i
22626
19:35:34,551 --> 19:35:38,399
if you're a bit overwhelmed by streams
22627
19:35:36,639 --> 19:35:40,240
and stream controllers or reactive
22628
19:35:38,399 --> 19:35:41,599
programming don't be they're actually
22629
19:35:40,240 --> 19:35:44,080
really good if you know how to use them
22630
19:35:41,600 --> 19:35:46,160
so they're very easy to use as long as
22631
19:35:46,160 --> 19:35:50,720
how basically it's getting a handle of
22632
19:35:48,720 --> 19:35:51,600
the right way of using them so that's
22633
19:35:50,720 --> 19:35:52,960
what i'm going to show you in this
22634
19:35:55,512 --> 19:35:59,119
so let's go excuse me let's go to our
22635
19:35:57,831 --> 19:36:00,959
application i'm going to put the code
22636
19:35:59,119 --> 19:36:02,479
right here let's have a look at what
22637
19:36:00,960 --> 19:36:04,639
we've written so far i'm going to
22638
19:36:02,479 --> 19:36:06,239
increase the size of the screen and then
22639
19:36:04,639 --> 19:36:09,512
decrease the font size a little bit so
22640
19:36:11,831 --> 19:36:15,439
let's have a look at what we've done so
22641
19:36:13,919 --> 19:36:17,759
far you can see we have quite a lot of
22642
19:36:17,759 --> 19:36:21,279
we have for instance delete all nodes
22643
19:36:23,440 --> 19:36:27,760
we have update nodes so quite a lot of
22644
19:36:27,759 --> 19:36:31,679
but if you see all of these are directly
22645
19:36:30,000 --> 19:36:33,119
talking with our database with our
22646
19:36:31,679 --> 19:36:34,639
sqlite database none of these
22647
19:36:37,191 --> 19:36:39,440
we don't even have to talk about
22648
19:36:38,240 --> 19:36:41,600
functions but if you look at the node
22649
19:36:39,440 --> 19:36:44,000
service in it itself it doesn't contain
22650
19:36:41,600 --> 19:36:47,512
a list of nodes so it doesn't have the
22651
19:36:44,000 --> 19:36:48,720
ability to cache these nodes so it's as
22652
19:36:47,512 --> 19:36:50,240
soon as you give it a command the node
22653
19:36:48,720 --> 19:36:51,831
services i don't know what to do i'm
22654
19:36:50,240 --> 19:36:53,680
just going to go to the database and do
22655
19:36:53,679 --> 19:36:58,399
however this could i mean in not in our
22656
19:36:56,240 --> 19:37:00,240
application but in an application that
22657
19:36:58,399 --> 19:37:02,551
has millions and millions of rows of
22658
19:37:00,240 --> 19:37:04,720
data for instance this could not be such
22659
19:37:02,551 --> 19:37:06,080
a good idea that you always go to the
22660
19:37:06,080 --> 19:37:11,512
read the entire thing in order to for
22661
19:37:08,320 --> 19:37:13,280
instance delete one row or um basically
22662
19:37:11,512 --> 19:37:15,119
these operations should kind of be like
22663
19:37:13,279 --> 19:37:18,479
cached inside your application before
22664
19:37:15,119 --> 19:37:19,759
you go and hit the database hopefully
22665
19:37:18,479 --> 19:37:20,959
and what we're going to do as you can
22666
19:37:19,759 --> 19:37:22,959
see in the caption here we're going to
22667
19:37:20,960 --> 19:37:25,280
actually start caching a list of notes
22668
19:37:22,960 --> 19:37:26,872
that the node service has so the goal is
22669
19:37:25,279 --> 19:37:29,679
for the note servers to be able to
22670
19:37:26,872 --> 19:37:32,551
expose a list of notes that the ui can
22671
19:37:29,679 --> 19:37:34,479
then render on this on the user screen
22672
19:37:32,551 --> 19:37:36,639
so if the user goes and presses the plus
22673
19:37:34,479 --> 19:37:39,039
button then that plus button is then
22674
19:37:36,639 --> 19:37:40,720
gonna send a message here to our note
22675
19:37:39,039 --> 19:37:42,479
servers we're going to then go to this
22676
19:37:40,720 --> 19:37:44,320
function create node and this create
22677
19:37:42,479 --> 19:37:46,872
node function internally is then going
22678
19:37:44,320 --> 19:37:49,280
to manipulate that list of nodes inside
22679
19:37:46,872 --> 19:37:50,400
node service say hey here's a new node
22680
19:37:50,399 --> 19:37:55,039
and then our ui is going to listen to a
22681
19:37:53,191 --> 19:37:56,871
list of these notes available in note
22682
19:37:55,039 --> 19:37:57,831
service and if things change in that
22683
19:37:57,831 --> 19:38:01,119
then the ui is just going to
22684
19:37:59,279 --> 19:38:02,959
automatically update itself and this
22685
19:38:01,119 --> 19:38:04,479
interface between the ui and the node
22686
19:38:02,960 --> 19:38:06,160
servers is going to be done through a
22687
19:38:06,160 --> 19:38:09,279
i know it's a lot of a lot of
22688
19:38:07,440 --> 19:38:11,191
information but you'll get it you'll get
22689
19:38:09,279 --> 19:38:12,319
it as long as we go through this chapter
22690
19:38:12,320 --> 19:38:15,920
so what we need to do first is let's go
22691
19:38:14,320 --> 19:38:17,040
and as then as the caption at the bottom
22692
19:38:15,919 --> 19:38:20,319
of the screen indicates we're going to
22693
19:38:17,039 --> 19:38:22,079
go and expose a list of notes in our
22694
19:38:20,320 --> 19:38:24,720
note service okay so let's just let's go
22695
19:38:28,080 --> 19:38:32,320
and we're just gonna call it notes and
22696
19:38:29,679 --> 19:38:34,079
we're gonna start with an empty list all
22697
19:38:34,080 --> 19:38:36,960
so that's really good now we have let's
22698
19:38:35,512 --> 19:38:39,191
say this is our cache this is where
22699
19:38:36,960 --> 19:38:42,800
we're keeping all the notes that this
22700
19:38:39,191 --> 19:38:45,039
node service manipulates all right
22701
19:38:42,800 --> 19:38:46,800
so now let's go and talk a little bit
22702
19:38:49,279 --> 19:38:54,319
you see what we need to do as the as the
22703
19:38:54,320 --> 19:39:00,872
what we need is for the node service to
22704
19:38:57,039 --> 19:39:04,000
be able to control a stream of nodes so
22705
19:39:00,872 --> 19:39:05,040
when the list of this nodes changes we
22706
19:39:05,039 --> 19:39:09,831
tell our stream in the note servers that
22707
19:39:07,440 --> 19:39:11,919
hey some element got added hey some
22708
19:39:09,831 --> 19:39:13,119
element got deleted or some element got
22709
19:39:13,119 --> 19:39:17,831
then the ui can then reactively listen
22710
19:39:15,512 --> 19:39:21,360
for these changes in the in the nodes
22711
19:39:17,831 --> 19:39:24,080
service and we do that through the um
22712
19:39:24,080 --> 19:39:27,512
so let's go as the caption indicates i'm
22713
19:39:25,759 --> 19:39:29,439
going to write it and notes actually
22714
19:39:27,512 --> 19:39:32,320
maybe i should yeah i'm going to write
22715
19:39:29,440 --> 19:39:34,240
it notes stream controller and the way
22716
19:39:32,320 --> 19:39:35,680
to create a stream controller is that
22717
19:39:34,240 --> 19:39:38,080
you just say stream controller and then
22718
19:39:35,679 --> 19:39:39,759
you specify the type of data that your
22719
19:39:38,080 --> 19:39:42,551
stream contains which is a list of
22720
19:39:48,080 --> 19:39:52,000
like that and i believe stream
22721
19:39:52,000 --> 19:39:56,960
excuse me um isn't imported in our notes
22722
19:39:55,679 --> 19:39:59,119
service so i'm gonna get help from
22723
19:39:56,960 --> 19:40:01,120
visual studio code and you can see it's
22724
19:39:59,119 --> 19:40:05,919
it says that well stream controller is
22725
19:40:01,119 --> 19:40:08,399
available in the dart async package so
22726
19:40:05,919 --> 19:40:10,000
um and yeah async meaning asynchronous
22727
19:40:08,399 --> 19:40:11,439
so in order to be able to use stream
22728
19:40:10,000 --> 19:40:12,720
controller you have to import that so
22729
19:40:11,440 --> 19:40:14,551
i'm going to get help from visual studio
22730
19:40:14,551 --> 19:40:17,919
all right so let's see what we did in
22731
19:40:17,919 --> 19:40:21,919
what is this the syntax looks really
22732
19:40:19,759 --> 19:40:23,279
really scary but it really isn't all
22733
19:40:21,919 --> 19:40:25,759
you're saying is that i want to be able
22734
19:40:27,512 --> 19:40:32,080
of a list of database notes basically
22735
19:40:30,000 --> 19:40:33,512
you're saying that i have a pipe this
22736
19:40:33,512 --> 19:40:37,832
every event that is inside this pipe is
22737
19:40:36,080 --> 19:40:39,360
a list of database nodes so let's say
22738
19:40:37,831 --> 19:40:41,511
you start with an empty list so this
22739
19:40:39,360 --> 19:40:43,759
list is empty inside this pipe then you
22740
19:40:44,639 --> 19:40:49,360
then what it does it says oh what was i
22741
19:40:47,191 --> 19:40:52,239
before i was on empty list add that new
22742
19:40:49,360 --> 19:40:54,479
item so now i'm an item now i'm an array
22743
19:40:52,240 --> 19:40:56,872
or a list with one item and then it puts
22744
19:40:54,479 --> 19:40:58,872
that array inside the stream so the
22745
19:40:56,872 --> 19:41:01,120
stream's value is now at the beginning
22746
19:40:58,872 --> 19:41:03,360
was empty list then it's a list of one
22747
19:41:01,119 --> 19:41:06,239
item so this stream controller is
22748
19:41:03,360 --> 19:41:09,119
basically in in control of as its name
22749
19:41:06,240 --> 19:41:11,760
indicates it's in control of the changes
22750
19:41:11,759 --> 19:41:15,831
list it isn't hooked to that yet but
22751
19:41:14,240 --> 19:41:18,552
that's its purpose and that's the reason
22752
19:41:15,831 --> 19:41:21,279
it has the exact same data type in its
22753
19:41:21,279 --> 19:41:26,551
now the broadcast part in here and as
22754
19:41:24,800 --> 19:41:28,000
you can see the documentation actually
22755
19:41:26,551 --> 19:41:30,720
spot on it says the controller where
22756
19:41:28,000 --> 19:41:32,000
stream can be listened to more than once
22757
19:41:32,000 --> 19:41:35,279
if you've done dark development or
22758
19:41:33,919 --> 19:41:38,551
flutter development from before you may
22759
19:41:35,279 --> 19:41:40,399
know that if you then um and i'm now
22760
19:41:38,551 --> 19:41:42,159
assuming as i said that your dart or
22761
19:41:40,399 --> 19:41:43,511
flutter developer from before if you
22762
19:41:42,160 --> 19:41:45,192
have created a stream controller and
22763
19:41:43,512 --> 19:41:47,119
then you go and listen to the changes to
22764
19:41:45,191 --> 19:41:48,871
that stream that the stream controller
22765
19:41:47,119 --> 19:41:51,440
is controlling and then you do a hot
22766
19:41:48,872 --> 19:41:53,040
reload then you get an error from your
22767
19:41:51,440 --> 19:41:54,639
flower application saying that oh this
22768
19:41:53,039 --> 19:41:56,479
stream's already been listened to so you
22769
19:41:54,639 --> 19:41:58,551
cannot listen to it again and that's the
22770
19:41:56,479 --> 19:42:00,720
problem that normal stream controllers
22771
19:41:58,551 --> 19:42:02,872
can cause and that you as soon as you've
22772
19:42:00,720 --> 19:42:04,479
listened to them you should close your
22773
19:42:02,872 --> 19:42:06,872
listening channel to that stream before
22774
19:42:04,479 --> 19:42:09,039
you can listen to them again so that's
22775
19:42:06,872 --> 19:42:10,551
what broadcast fixes if you're not a
22776
19:42:09,039 --> 19:42:13,039
developer from before what this
22777
19:42:10,551 --> 19:42:15,440
broadcast basically is saying is that
22778
19:42:13,039 --> 19:42:17,599
it's okay for you to create new
22779
19:42:15,440 --> 19:42:19,760
listeners that listen to the changes to
22780
19:42:17,600 --> 19:42:21,760
this stream controller so here's a pipe
22781
19:42:19,759 --> 19:42:23,599
of information at this point you start
22782
19:42:21,759 --> 19:42:25,191
and listen and then it's completely okay
22783
19:42:23,600 --> 19:42:26,480
that if you want to listen to changes to
22784
19:42:25,191 --> 19:42:28,239
the stream controller later in the
22785
19:42:26,479 --> 19:42:30,080
future as well so you're not going to
22786
19:42:28,240 --> 19:42:32,400
get any errors by doing this broadcast
22787
19:42:50,240 --> 19:42:54,552
that can read all the available notes
22788
19:42:52,399 --> 19:42:57,599
from our database and then cache them
22789
19:42:54,551 --> 19:42:59,919
inside both the notes cache right here
22790
19:42:59,919 --> 19:43:05,119
so you see what our our goal in this
22791
19:43:05,119 --> 19:43:09,599
make sure that this is the source of
22792
19:43:09,600 --> 19:43:15,760
list contains all the nodes for
22793
19:43:13,191 --> 19:43:17,919
for instance the current user
22794
19:43:17,919 --> 19:43:22,551
is our interface to the outside world
22795
19:43:20,160 --> 19:43:24,872
the ui is going to be listening to
22796
19:43:22,551 --> 19:43:26,319
changes that occur in this stream
22797
19:43:26,320 --> 19:43:29,512
so whenever you see this this is not
22798
19:43:28,479 --> 19:43:30,959
something that's going to be read from
22799
19:43:30,960 --> 19:43:34,800
everything's going to be read from the
22800
19:43:32,160 --> 19:43:36,240
outside through this all right so keep
22801
19:43:34,800 --> 19:43:37,360
that in mind so let's go ahead as a
22802
19:43:36,240 --> 19:43:39,040
caption in the case and we're going to
22803
19:43:37,360 --> 19:43:41,119
create a function in here called cache
22804
19:43:39,039 --> 19:43:42,399
notes and its purpose is just to read
22805
19:43:41,119 --> 19:43:45,759
all the notes from the database and
22806
19:43:42,399 --> 19:43:47,759
place it both in here internally and in
22807
19:43:45,759 --> 19:43:51,360
our node stream controller which is
22808
19:43:47,759 --> 19:43:52,959
going to be read externally all right
22809
19:43:51,360 --> 19:43:54,960
so let's go and do that so i'm going to
22810
19:43:52,960 --> 19:43:57,600
say future void and we're going to call
22811
19:44:00,080 --> 19:44:04,000
then if you remember we already have an
22812
19:44:02,240 --> 19:44:06,872
async function called get all notes so
22813
19:44:04,000 --> 19:44:10,080
i'm just going to say um final uh all
22814
19:44:10,399 --> 19:44:14,871
it's all notes okay so that's gonna get
22815
19:44:14,872 --> 19:44:20,720
and we're gonna assign that to our uh
22816
19:44:23,039 --> 19:44:28,079
as you remember get all notes returns on
22817
19:44:25,039 --> 19:44:29,191
iterable of all our notes and now we
22818
19:44:28,080 --> 19:44:30,872
have a little bit of a problem here
22819
19:44:29,191 --> 19:44:32,551
because we're saying list of all notes
22820
19:44:30,872 --> 19:44:34,639
and in here we're also saying list of
22821
19:44:32,551 --> 19:44:38,800
notes so we have to convert that
22822
19:44:34,639 --> 19:44:40,800
terrible to a list of all notes okay
22823
19:44:38,800 --> 19:44:43,440
either we could do that or we could have
22824
19:44:40,800 --> 19:44:45,832
this just sit there as an eye treble
22825
19:44:43,440 --> 19:44:47,680
it's completely up to you i have no
22826
19:44:45,831 --> 19:44:48,479
issue with any and we could just go with
22827
19:44:48,479 --> 19:44:52,831
so let's go in here and then we're gonna
22828
19:44:52,831 --> 19:44:56,959
is the private notes is all notes to
22829
19:44:56,960 --> 19:45:01,440
and we also are going to update our
22830
19:44:58,960 --> 19:45:04,080
stream controller with that with the
22831
19:45:01,440 --> 19:45:07,360
value of underscore nodes okay so we're
22832
19:45:04,080 --> 19:45:09,831
going to say notes stream controller
22833
19:45:09,831 --> 19:45:14,080
and then we're going to add
22834
19:45:11,759 --> 19:45:16,000
notes to the stream and remember a
22835
19:45:16,000 --> 19:45:20,000
the evolution of a value through time
22836
19:45:20,000 --> 19:45:24,960
the first point of this evolution was an
22837
19:45:22,399 --> 19:45:25,919
empty list and then the next one is
22838
19:45:26,960 --> 19:45:30,872
notes that are all the notes are in the
22839
19:45:30,872 --> 19:45:35,279
that we telling anyone listening to the
22840
19:45:33,360 --> 19:45:37,919
stream controller that hey here's a new
22841
19:45:40,720 --> 19:45:44,800
now that we're doing this you can see
22842
19:45:42,720 --> 19:45:47,600
we're getting an error and dart is very
22843
19:45:44,800 --> 19:45:49,192
actually this analyzes so clever because
22844
19:45:47,600 --> 19:45:52,400
you see it's telling us that the cache
22845
19:45:49,191 --> 19:45:54,319
notes function is not being used now
22846
19:45:52,399 --> 19:45:56,000
you may be asking yourself well none of
22847
19:45:54,320 --> 19:45:57,440
these functions are being used update
22848
19:45:56,000 --> 19:45:59,039
note for instance is not being used so
22849
19:46:02,831 --> 19:46:07,831
nodes could not update nodes so yeah you
22850
19:46:05,600 --> 19:46:10,720
can see that update node function in
22851
19:46:07,831 --> 19:46:12,319
itself is not being used at all so
22852
19:46:12,320 --> 19:46:15,832
analyzer is complaining about this
22853
19:46:14,080 --> 19:46:18,479
function particularly and the reason is
22854
19:46:15,831 --> 19:46:20,479
because we have a little prefix
22855
19:46:22,479 --> 19:46:27,279
the analyzer that this function is
22856
19:46:24,080 --> 19:46:29,040
private and private to this class now
22857
19:46:27,279 --> 19:46:30,551
dart analyzer is looking at it and it's
22858
19:46:29,039 --> 19:46:32,479
like okay it's a private class but
22859
19:46:32,479 --> 19:46:35,831
the reason that other functions aren't
22860
19:46:35,831 --> 19:46:40,080
marked with this warning is that dart
22861
19:46:38,320 --> 19:46:41,920
understands that they are not prefixed
22862
19:46:41,919 --> 19:46:46,551
with a with an underscore meaning that
22863
19:46:44,399 --> 19:46:48,959
they're going to be used publicly
22864
19:46:46,551 --> 19:46:50,159
somewhere else so it's not going to yet
22865
19:46:48,960 --> 19:46:51,760
give us any warning saying that you
22866
19:46:50,160 --> 19:46:53,440
haven't used those functions as soon as
22867
19:46:51,759 --> 19:46:55,191
you remove that you see that the warning
22868
19:46:53,440 --> 19:46:56,800
also goes away but we're going to keep
22869
19:46:55,191 --> 19:46:58,319
down the score okay i just want to
22870
19:46:56,800 --> 19:47:01,279
explain to you why you're seeing this a
22871
19:47:01,279 --> 19:47:05,191
okay now that we've done cash notes what
22872
19:47:03,279 --> 19:47:06,800
we're going to do is just to go to our
22873
19:47:05,191 --> 19:47:08,399
as a caption case we're going to go to
22874
19:47:12,720 --> 19:47:18,800
and upon opening our database so uh let
22875
19:47:18,800 --> 19:47:24,000
upon opening our database we are going
22876
19:47:27,360 --> 19:47:32,479
let's let me just have a look at my
22877
19:47:30,000 --> 19:47:33,279
notes yeah we're gonna basically go to
22878
19:47:33,279 --> 19:47:36,872
the open function that we have here
22879
19:47:36,872 --> 19:47:39,440
i'm a bit surprised that i actually
22880
19:47:39,440 --> 19:47:44,400
written any notes about that yeah i can
22881
19:47:41,759 --> 19:47:45,679
see actually i have so that's good okay
22882
19:47:45,679 --> 19:47:49,191
right after executing this command for
22883
19:47:47,512 --> 19:47:51,040
creating the notes table after we've
22884
19:47:49,191 --> 19:47:53,039
created the user table and note table
22885
19:47:51,039 --> 19:47:54,959
and now that we know that we could open
22886
19:47:53,039 --> 19:47:57,919
the database we also have to cache all
22887
19:47:57,919 --> 19:48:01,360
local variable so let's just go and call
22888
19:47:59,831 --> 19:48:02,871
that function so we're just going to say
22889
19:48:05,191 --> 19:48:08,871
so this means that when you call this
22890
19:48:08,872 --> 19:48:12,080
if after we made sure all the tables
22891
19:48:12,080 --> 19:48:15,440
if they didn't exist then we're gonna
22892
19:48:13,512 --> 19:48:17,360
read all the notes and place them inside
22893
19:48:15,440 --> 19:48:19,600
this notes variable and also in this
22894
19:48:17,360 --> 19:48:21,440
stream controller okay so that's how we
22895
19:48:19,600 --> 19:48:23,279
did the cache notes and i hope that you
22896
19:48:23,279 --> 19:48:27,119
and it wasn't hidden by the caption at
22897
19:48:27,119 --> 19:48:32,000
all right so that part is done now um
22898
19:48:30,000 --> 19:48:34,240
now what we need to do in here is to go
22899
19:48:32,000 --> 19:48:36,160
to the next part of the code and as you
22900
19:48:34,240 --> 19:48:38,720
can see it says cache note in create
22901
19:48:36,160 --> 19:48:41,040
node in create node function add the new
22902
19:48:38,720 --> 19:48:42,800
node to underscore nodes and the node
22903
19:48:43,512 --> 19:48:47,279
i'm going to go to my nodes here creates
22904
19:48:47,279 --> 19:48:54,959
and ensure that when we create the nodes
22905
19:48:55,600 --> 19:48:58,639
right here in this function in the
22906
19:48:56,960 --> 19:49:00,000
create node you see at the moment what
22907
19:48:58,639 --> 19:49:01,759
we're doing is that we're just creating
22908
19:49:01,759 --> 19:49:07,191
that's good but i mean it's not good
22909
19:49:04,479 --> 19:49:10,319
enough because as i said we need the ui
22910
19:49:07,191 --> 19:49:12,159
to be able to reactively listen to all
22911
19:49:10,320 --> 19:49:14,552
the notes that are right now in the
22912
19:49:12,160 --> 19:49:16,480
database for that current user okay
22913
19:49:14,551 --> 19:49:18,872
so in here after we create the note
22914
19:49:16,479 --> 19:49:21,599
we're actually going to add it to our
22915
19:49:18,872 --> 19:49:23,512
array of nodes and then we're also going
22916
19:49:23,512 --> 19:49:28,479
our stream controller so i'm just going
22917
19:49:28,479 --> 19:49:33,679
and add this new node in there and also
22918
19:49:31,831 --> 19:49:35,511
remember the stream controller's
22919
19:49:33,679 --> 19:49:36,871
responsibilities just reflect the values
22920
19:49:35,512 --> 19:49:38,479
inside the underscore nodes to the
22921
19:49:36,872 --> 19:49:41,512
outside world so all we have to do is
22922
19:49:38,479 --> 19:49:43,831
just to say notes stream controller add
22923
19:49:41,512 --> 19:49:45,440
notes just like that because notes is
22924
19:49:43,831 --> 19:49:49,119
the source of truth as i mentioned
22925
19:49:51,039 --> 19:49:56,399
now we need to take care of the other
22926
19:49:52,872 --> 19:49:58,240
function called delete note let's
22927
19:50:03,119 --> 19:50:06,551
what we need to do is to have a look at
22928
19:50:04,639 --> 19:50:08,080
this uh functionality here and you can
22929
19:50:06,551 --> 19:50:11,279
see it says if we couldn't delete
22930
19:50:11,279 --> 19:50:15,759
exception but now we're gonna add an
22931
19:50:15,759 --> 19:50:20,000
by us being able to delete that note
22932
19:50:17,679 --> 19:50:22,239
meaning that you can see the note id we
22933
19:50:20,000 --> 19:50:23,600
have which is this id so what we need to
22934
19:50:22,240 --> 19:50:25,760
do as a caption in the case we need to
22935
19:50:23,600 --> 19:50:27,832
actually remove that note also from our
22936
19:50:25,759 --> 19:50:29,279
local cache so we're going to say notes
22937
19:50:29,279 --> 19:50:33,360
and this is the note and then i'm going
22938
19:50:36,160 --> 19:50:40,720
after doing that we could just say note
22939
19:50:40,720 --> 19:50:44,551
notes and you could be try you could try
22940
19:50:43,039 --> 19:50:46,239
to be clever in here and you for
22941
19:50:47,679 --> 19:50:51,599
who says that that note actually exists
22942
19:50:49,512 --> 19:50:52,960
in our cache we can't 100 be sure about
22943
19:50:51,600 --> 19:50:54,800
that but if you look at the signature of
22944
19:50:54,800 --> 19:51:00,400
um removes all objects oh maybe we don't
22945
19:50:58,399 --> 19:51:01,919
have the ability to actually know
22946
19:51:00,399 --> 19:51:04,799
if that node was deleted but what you
22947
19:51:01,919 --> 19:51:07,191
could do you could just say count before
22948
19:51:04,800 --> 19:51:09,192
is notes count and then you could in
22949
19:51:09,191 --> 19:51:12,959
and here you could just say if notes
22950
19:51:12,960 --> 19:51:18,240
is not count before then you can update
22951
19:51:15,831 --> 19:51:20,080
your stream i don't plan to do that but
22952
19:51:18,240 --> 19:51:22,480
you can you can try to do that if you
22953
19:51:20,080 --> 19:51:25,512
want to it's just a safeguard for you to
22954
19:51:22,479 --> 19:51:28,319
say i'm gonna update my out outside
22955
19:51:25,512 --> 19:51:30,400
facing stream only if i actually could
22956
19:51:28,320 --> 19:51:31,760
delete this note from my cache
22957
19:51:30,399 --> 19:51:33,119
if you think it's worth it i don't think
22958
19:51:35,440 --> 19:51:39,680
so we're going to leave it like this as
22959
19:51:39,679 --> 19:51:43,439
now you see we also have a functionality
22960
19:51:47,191 --> 19:51:54,799
all right so let's go in our delete
22961
19:51:52,000 --> 19:51:56,399
all nodes in here find that function and
22962
19:51:54,800 --> 19:51:58,400
you can see right now what it what it's
22963
19:51:56,399 --> 19:52:00,000
doing is just returning the number of
22964
19:52:00,000 --> 19:52:04,080
now what we're going to do we're going
22965
19:52:04,080 --> 19:52:07,040
what should we call it number of
22966
19:52:07,039 --> 19:52:10,799
is equal to this and we're gonna return
22967
19:52:08,720 --> 19:52:12,399
that number of deletions okay because i
22968
19:52:10,800 --> 19:52:13,279
mean i'm doing that simply because we
22969
19:52:13,279 --> 19:52:20,240
do some work in in the middle here okay
22970
19:52:17,831 --> 19:52:21,679
so then what we're gonna do is gonna say
22971
19:52:21,679 --> 19:52:27,119
is an empty list all right so we're
22972
19:52:24,320 --> 19:52:28,720
resetting the notes and then after doing
22973
19:52:27,119 --> 19:52:30,479
that we're also going to update our
22974
19:52:28,720 --> 19:52:32,551
stream controller so we're going to say
22975
19:52:30,479 --> 19:52:34,399
add the underscore nodes to stream
22976
19:52:32,551 --> 19:52:36,639
control and then return the number of
22977
19:52:34,399 --> 19:52:38,959
deletions so let's make sure that our
22978
19:52:36,639 --> 19:52:40,639
local cache is updated and also that the
22979
19:52:40,639 --> 19:52:44,479
interface of our class which is the
22980
19:52:44,479 --> 19:52:48,159
updated with the latest information
22981
19:52:48,720 --> 19:52:51,600
okay next thing that we need to do as
22982
19:52:50,639 --> 19:52:54,319
you can see in the cache that says
22983
19:52:51,600 --> 19:52:56,872
update caching get node remove old node
22984
19:52:54,320 --> 19:52:59,440
with same id and add the new one on and
22985
19:53:10,000 --> 19:53:13,679
let's have a look at our get note in
22986
19:53:13,679 --> 19:53:17,279
and at the moment as you can see in here
22987
19:53:17,279 --> 19:53:22,160
oops that's not get note um here is get
22988
19:53:24,160 --> 19:53:28,080
and as you can see here uh we're
22989
19:53:26,240 --> 19:53:29,919
basically what we're doing is that we're
22990
19:53:29,919 --> 19:53:34,240
upon you trying to read a note from the
22991
19:53:32,160 --> 19:53:36,552
database we're literally just making a
22992
19:53:34,240 --> 19:53:39,360
query to the database and then if we
22993
19:53:36,551 --> 19:53:42,080
could find that item we are returning it
22994
19:53:39,360 --> 19:53:46,000
by creating a database node from
22995
19:53:42,080 --> 19:53:48,320
from a row that you can see right here
22996
19:53:46,000 --> 19:53:51,360
uh but what we're gonna do is that if
22997
19:53:48,320 --> 19:53:53,440
you try to get a note in there is a
22998
19:53:51,360 --> 19:53:56,551
possibility that we already had that
22999
19:53:53,440 --> 19:53:58,320
note cached locally in our notes array
23000
19:53:58,320 --> 19:54:03,680
uh outdated meaning that the copy that
23001
19:54:00,639 --> 19:54:05,600
we had in our cache is not really
23002
19:54:03,679 --> 19:54:07,359
updated with the latest changes that
23003
19:54:05,600 --> 19:54:11,120
have been applied to the database so it
23004
19:54:07,360 --> 19:54:13,360
makes good sense right here to now upon
23005
19:54:11,119 --> 19:54:15,039
creating a new instance of database node
23006
19:54:13,360 --> 19:54:17,279
actually to update our local cache as
23007
19:54:15,039 --> 19:54:18,959
well okay so i'm just going to say final
23008
19:54:17,279 --> 19:54:21,119
note is equal to that and we're going to
23009
19:54:21,119 --> 19:54:25,440
bill right here so this code is the
23010
19:54:23,360 --> 19:54:27,039
exact same as it was before except we're
23011
19:54:25,440 --> 19:54:30,872
now assigning the return value of from
23012
19:54:27,039 --> 19:54:33,511
row to a new local variable here okay
23013
19:54:30,872 --> 19:54:34,320
so let's go to our notes and say remove
23014
19:54:34,320 --> 19:54:38,160
and i'm going to say in here note and
23015
19:54:36,320 --> 19:54:41,512
i'm going to say i'm going to say note
23016
19:54:42,960 --> 19:54:48,080
this thing here okay so we first remove
23017
19:54:45,919 --> 19:54:52,160
that node existing node from the notes
23018
19:54:52,320 --> 19:54:56,160
and we add the new nodes in there and
23019
19:54:54,551 --> 19:54:57,759
then what we're going to do is right
23020
19:54:56,160 --> 19:55:01,760
after that update the stream controller
23021
19:54:57,759 --> 19:55:05,119
which is our outside facing um interface
23022
19:55:01,759 --> 19:55:07,279
so note stream controller add notes okay
23023
19:55:05,119 --> 19:55:09,279
so you can see this pattern so we first
23024
19:55:07,279 --> 19:55:11,759
always update our local cache and then
23025
19:55:09,279 --> 19:55:14,551
we reflect those changes to the outside
23026
19:55:14,551 --> 19:55:19,279
all right great stuff so um
23027
19:55:17,512 --> 19:55:20,100
that's for note stream controller and
23028
19:55:21,600 --> 19:55:26,080
now there's another function which is
23029
19:55:26,080 --> 19:55:30,400
let's go to update node actually before
23030
19:55:28,872 --> 19:55:33,192
we have a look at anything else and you
23031
19:55:30,399 --> 19:55:35,119
can see in here when we update that
23032
19:55:33,191 --> 19:55:36,871
first we make sure that that node exists
23033
19:55:35,119 --> 19:55:40,479
so let's put actually a comment in here
23034
19:55:41,919 --> 19:55:46,160
update db i'm going to expand this code
23035
19:55:44,080 --> 19:55:47,680
so you see better that's the update db
23036
19:55:47,679 --> 19:55:52,319
and if we couldn't update anything then
23037
19:55:49,759 --> 19:55:55,039
we throw it could not update note and
23038
19:55:55,039 --> 19:55:59,039
upon doing an update node what we want
23039
19:55:57,279 --> 19:56:00,479
to do is i mean it is quite clever what
23040
19:55:59,039 --> 19:56:02,399
we've done so far because it means that
23041
19:56:00,479 --> 19:56:04,159
we've updated the database but what we
23042
19:56:02,399 --> 19:56:06,079
do then in order to return the new
23043
19:56:04,160 --> 19:56:07,832
refresh node is that actually we call
23044
19:56:07,831 --> 19:56:11,439
that is that's pretty good so
23045
19:56:10,080 --> 19:56:14,160
but what we also need to do is just to
23046
19:56:11,440 --> 19:56:15,119
make sure our local and cache is also
23047
19:56:16,000 --> 19:56:20,551
let's go in here and say final
23048
19:56:20,551 --> 19:56:23,119
and what we're going to do as the
23049
19:56:21,919 --> 19:56:25,919
caption at the bottom of the screen
23050
19:56:23,119 --> 19:56:28,551
indicates we're going to remove that
23051
19:56:25,919 --> 19:56:31,119
notes from our local cache and add the
23052
19:56:28,551 --> 19:56:33,679
updated note in there and then
23053
19:56:31,119 --> 19:56:35,512
send the add message to our stream
23054
19:56:33,679 --> 19:56:36,799
controller as well so let's just say
23055
19:56:38,639 --> 19:56:42,000
so we're going to remove the old object
23056
19:56:40,399 --> 19:56:42,871
from our cache and i'm just going to say
23057
19:56:42,872 --> 19:56:48,872
as long as the notes id is equal to the
23058
19:56:46,160 --> 19:56:52,400
updated notes id so that's going to
23059
19:56:48,872 --> 19:56:55,040
remove the existing existing node
23060
19:56:52,399 --> 19:56:56,399
and i'm going to say notes add and we
23061
19:57:01,119 --> 19:57:06,319
notes and local cache then you need to
23062
19:57:03,440 --> 19:57:07,919
also update your stream so the stream
23063
19:57:10,000 --> 19:57:15,440
and then we return the updated notes in
23064
19:57:13,360 --> 19:57:17,440
here so what happening here is just that
23065
19:57:15,440 --> 19:57:20,400
we updated something in the database we
23066
19:57:17,440 --> 19:57:23,119
got the new object from uh the database
23067
19:57:20,399 --> 19:57:26,399
we removed that uh node from a local
23068
19:57:23,119 --> 19:57:28,639
cache and then we added it in there okay
23069
19:57:26,399 --> 19:57:30,959
added it back that's the updated node
23070
19:57:30,960 --> 19:57:35,600
all right great stuff that's for update
23071
19:57:32,800 --> 19:57:38,000
notes and then what we need is as the
23072
19:57:35,600 --> 19:57:40,400
captioning case is get or create user in
23073
19:57:41,919 --> 19:57:45,759
this is a function that we're going to
23074
19:57:43,512 --> 19:57:48,000
actually use in the next chapter
23075
19:57:48,800 --> 19:57:52,400
how is this function useful this is the
23076
19:57:50,479 --> 19:57:53,360
first time we're actually seeing the the
23077
19:57:53,360 --> 19:57:57,360
signature for this function as the name
23078
19:57:54,960 --> 19:57:59,192
in the case it says get or create user
23079
19:57:59,191 --> 19:58:04,319
when you at the moment go into our user
23080
19:58:01,759 --> 19:58:05,439
interface let's go to the login view for
23081
19:58:06,960 --> 19:58:12,160
i'm gonna remove the explorer so you see
23082
19:58:09,039 --> 19:58:14,871
the code in its entirety and right here
23083
19:58:12,160 --> 19:58:16,480
when we do auth service firebase login
23084
19:58:14,872 --> 19:58:18,639
then we get the current user if the
23085
19:58:16,479 --> 19:58:21,360
email is verified is that we're going to
23086
19:58:18,639 --> 19:58:23,679
nodes routes now let's then go to our
23087
19:58:21,360 --> 19:58:25,279
notes view you can see right now notes
23088
19:58:23,679 --> 19:58:27,759
view the only thing it's doing is that
23089
19:58:25,279 --> 19:58:29,279
it's creating an app bar with a um sorry
23090
19:58:27,759 --> 19:58:32,239
it's creating a scaffold with an app bar
23091
19:58:29,279 --> 19:58:34,000
that we have our logout button in
23092
19:58:32,240 --> 19:58:37,360
and let's go actually let me bring up
23093
19:58:34,000 --> 19:58:40,720
scr cpy so i'm gonna use my email
23094
19:58:37,360 --> 19:58:42,800
address in the login screen so um
23095
19:58:40,720 --> 19:58:46,639
i actually may need to go and
23096
19:58:42,800 --> 19:58:50,400
connect this device to wi-fi so boom
23097
19:58:50,639 --> 19:58:56,160
that login with my user so i'm to get
23098
19:58:56,160 --> 19:59:00,720
i'm going to login in here use oops uh
23099
19:58:59,119 --> 19:59:01,599
we've sent you an email verification
23100
19:59:01,600 --> 19:59:07,800
maybe i should actually log in with the
23101
19:59:03,279 --> 19:59:07,800
user who has already been verified
23102
19:59:08,000 --> 19:59:12,639
so let's log in with this user you see
23103
19:59:09,831 --> 19:59:15,360
in the main ui of the application um of
23104
19:59:12,639 --> 19:59:17,039
our application we have this hello world
23105
19:59:17,039 --> 19:59:22,719
um you can see the body of the
23106
19:59:20,320 --> 19:59:24,552
the body of our notes view right now it
23107
19:59:22,720 --> 19:59:27,119
just says hello world so you could
23108
19:59:24,551 --> 19:59:28,959
pretty much say that the notes view has
23109
19:59:27,119 --> 19:59:31,039
literally no contact at the moment with
23110
19:59:31,039 --> 19:59:36,079
but we're gonna fix this soon by first
23111
19:59:34,000 --> 19:59:37,919
making sure that the note service allows
23112
19:59:37,919 --> 19:59:42,800
create a new user upon going to the
23113
19:59:40,551 --> 19:59:44,959
screen so when we come to the screen we
23114
19:59:42,800 --> 19:59:47,440
need to make sure that there is a user
23115
19:59:44,960 --> 19:59:48,480
associated with the current firebase
23116
19:59:50,639 --> 19:59:55,831
so that's what we need this little uh
23117
19:59:53,512 --> 19:59:59,119
good function called get or create user
23118
19:59:55,831 --> 20:00:02,080
which returns a database user in our
23119
19:59:59,119 --> 20:00:04,239
notes service so we're gonna use that in
23120
20:00:02,080 --> 20:00:05,512
the next chapter so remember that okay
23121
20:00:04,240 --> 20:00:08,000
but we need to create the function at
23122
20:00:08,000 --> 20:00:13,600
all right let's go then and create this
23123
20:00:09,679 --> 20:00:16,079
function as the name indicates so future
23124
20:00:13,600 --> 20:00:19,600
and database user and we're going to say
23125
20:00:16,080 --> 20:00:21,919
get or create user and it has a required
23126
20:00:19,600 --> 20:00:23,279
parameter i can see required stream
23127
20:00:23,279 --> 20:00:27,191
and it's an async function right
23128
20:00:27,191 --> 20:00:33,440
we need to basically have a look at this
23129
20:00:34,240 --> 20:00:39,600
the goal in here is to first we try to
23130
20:00:37,191 --> 20:00:41,039
get this user from the database if that
23131
20:00:39,600 --> 20:00:43,680
user doesn't exist then we're going to
23132
20:00:41,039 --> 20:00:45,919
create that user and then in both cases
23133
20:00:43,679 --> 20:00:48,871
we're going to return either the
23134
20:00:45,919 --> 20:00:49,599
fetched or the created user back to
23135
20:00:51,759 --> 20:00:56,239
so let's go in here and just say
23136
20:00:58,240 --> 20:01:02,800
get user okay and you see the email just
23137
20:01:01,279 --> 20:01:04,240
fits in there perfectly but if you
23138
20:01:02,800 --> 20:01:06,240
remember from the implementation of get
23139
20:01:04,240 --> 20:01:07,040
user let's go in there and expand this
23140
20:01:07,039 --> 20:01:10,799
the user couldn't be found then it
23141
20:01:08,551 --> 20:01:13,831
throws an error says could not find user
23142
20:01:10,800 --> 20:01:15,192
that's rq so that if that function
23143
20:01:13,831 --> 20:01:16,871
throws that error then we're going to
23144
20:01:15,191 --> 20:01:18,159
create that user so if that user doesn't
23145
20:01:16,872 --> 20:01:20,320
exist in the database it needs to be
23146
20:01:18,160 --> 20:01:22,080
created so let's put a try statement in
23147
20:01:20,320 --> 20:01:23,832
here and then we're going to say on
23148
20:01:25,679 --> 20:01:30,159
the user so in this case in the try
23149
20:01:28,000 --> 20:01:32,160
statement it means that we could get the
23150
20:01:30,160 --> 20:01:34,080
user okay so if we get to this return
23151
20:01:32,160 --> 20:01:35,680
statement it means that get user
23152
20:01:34,080 --> 20:01:37,600
function didn't throw any exceptions
23153
20:01:35,679 --> 20:01:39,039
such as could not find user in the case
23154
20:01:37,600 --> 20:01:40,639
that we could not find user we're going
23155
20:01:39,039 --> 20:01:42,959
to actually create a user so let's just
23156
20:01:46,080 --> 20:01:51,831
with that email and then we're gonna say
23157
20:01:48,551 --> 20:01:54,000
return created user and if you look at
23158
20:01:51,831 --> 20:01:58,159
the create user function as well right
23159
20:01:54,000 --> 20:02:00,800
here it also i believe does it throw yes
23160
20:01:58,160 --> 20:02:02,400
so if it couldn't create that user it if
23161
20:02:00,800 --> 20:02:04,800
it's the result was empty it just says
23162
20:02:02,399 --> 20:02:06,871
user oh no that's that's where we get
23163
20:02:06,872 --> 20:02:10,400
we need to have a look at this insert so
23164
20:02:08,872 --> 20:02:11,919
yeah that's the only thing it's doing so
23165
20:02:10,399 --> 20:02:13,511
it's not basically throwing any other
23166
20:02:13,512 --> 20:02:16,479
the only thing it does is if you're
23167
20:02:14,960 --> 20:02:18,000
creating a user that already exists i'm
23168
20:02:19,360 --> 20:02:22,800
we have where and we've ended up with a
23169
20:02:22,800 --> 20:02:27,760
that could also throw an exception which
23170
20:02:25,119 --> 20:02:30,319
we haven't handled all right so what you
23171
20:02:27,759 --> 20:02:32,871
could do is just to do a whole catch in
23172
20:02:30,320 --> 20:02:34,960
here and then don't do anything with it
23173
20:02:32,872 --> 20:02:37,360
i like this pattern quite a lot in my
23174
20:02:34,960 --> 20:02:38,552
code at least because if i don't do this
23175
20:02:37,360 --> 20:02:40,639
then i don't actually have the
23176
20:02:38,551 --> 20:02:42,399
possibility to debug my application
23177
20:02:40,639 --> 20:02:44,872
later so i can't put like a breakpoint
23178
20:02:42,399 --> 20:02:47,039
in here and see did any other exception
23179
20:02:44,872 --> 20:02:49,440
arise if you don't do that because then
23180
20:02:47,039 --> 20:02:50,871
the exception will be thrown to
23181
20:02:49,440 --> 20:02:52,479
the caller and the caller will have to
23182
20:02:50,872 --> 20:02:54,080
handle that but in this case we're not
23183
20:02:52,479 --> 20:02:56,159
really handling the exception we're just
23184
20:02:54,080 --> 20:02:58,479
catching it and then we're throwing it
23185
20:02:56,160 --> 20:03:00,320
back to the call side this only allows
23186
20:02:58,479 --> 20:03:01,679
you basically to put a breakpoint in
23187
20:03:00,320 --> 20:03:03,680
here if you want to debug your
23188
20:03:01,679 --> 20:03:06,639
application later okay so it's just a
23189
20:03:03,679 --> 20:03:08,959
it's just in quite a cheap way of making
23190
20:03:06,639 --> 20:03:12,240
your code easier to debug all right for
23191
20:03:08,960 --> 20:03:14,552
those of you who are interested in this
23192
20:03:12,240 --> 20:03:16,000
all right fantastic and we've covered a
23193
20:03:18,720 --> 20:03:23,191
but we've come far so congratulations um
23194
20:03:21,919 --> 20:03:24,479
let's have a look here it says let's get
23195
20:03:23,191 --> 20:03:26,399
ready for the next chapter and upon
23196
20:03:24,479 --> 20:03:28,720
logging in we need to call our get or
23197
20:03:26,399 --> 20:03:29,919
create user function and have the user
23198
20:03:29,919 --> 20:03:32,551
and this is what i mentioned to you
23199
20:03:31,039 --> 20:03:33,511
before inside our notes view at the
23200
20:03:33,512 --> 20:03:36,960
we don't have any functionality that
23201
20:03:36,960 --> 20:03:40,872
a new user or gets the current user
23202
20:03:39,512 --> 20:03:42,639
based on their email if they already
23203
20:03:42,639 --> 20:03:48,319
that is going to be like the actual uh
23204
20:03:45,440 --> 20:03:50,320
first bit of logic which we're gonna do
23205
20:03:48,320 --> 20:03:52,480
in the next chapter which integrates our
23206
20:03:50,320 --> 20:03:53,832
notes view with the note server so the
23207
20:03:53,831 --> 20:03:58,551
of our course right now is gonna shift
23208
20:03:55,831 --> 20:04:01,439
towards more and more to the notes view
23209
20:03:58,551 --> 20:04:04,080
until we have a list of notes and allow
23210
20:04:01,440 --> 20:04:06,080
the user to create notes update notes so
23211
20:04:04,080 --> 20:04:07,919
it's exciting times we've come far we've
23212
20:04:06,080 --> 20:04:09,759
done quite a lot of work up up to this
23213
20:04:07,919 --> 20:04:11,279
point um and there's still a lot left
23214
20:04:11,279 --> 20:04:14,959
hopefully you're getting the attack at
23215
20:04:17,440 --> 20:04:20,639
of the course better and better and you
23216
20:04:20,639 --> 20:04:23,759
why we are doing things the way we are
23217
20:04:27,279 --> 20:04:31,360
get some refreshments if you want to
23218
20:04:29,039 --> 20:04:32,871
again coffee tea and i'll see you in the
23219
20:04:32,872 --> 20:04:36,720
hello everyone and welcome to chapter 29
23220
20:04:34,872 --> 20:04:38,800
of this flutter course in the previous
23221
20:04:36,720 --> 20:04:40,872
chapter as you saw we worked with our
23222
20:04:38,800 --> 20:04:42,479
note servers and we talked about streams
23223
20:04:42,479 --> 20:04:47,831
we have put uh you know a lot of effort
23224
20:04:45,679 --> 20:04:49,359
in our note service in order to talk
23225
20:04:47,831 --> 20:04:50,871
with the database and kind of read from
23226
20:04:52,479 --> 20:04:56,239
in our notes uh member variable so if
23227
20:04:54,960 --> 20:04:57,832
you haven't watched the previous chapter
23228
20:04:56,240 --> 20:04:58,800
i highly suggest that you do that
23229
20:04:58,800 --> 20:05:01,360
moving forward with this course without
23230
20:05:01,360 --> 20:05:05,512
chronologically makes it quite difficult
23231
20:05:05,512 --> 20:05:08,639
i'm gonna build on top of the previous
23232
20:05:06,960 --> 20:05:10,639
chapter as we've done with the other
23233
20:05:08,639 --> 20:05:12,872
chapters as well and in this chapter
23234
20:05:10,639 --> 20:05:15,191
we're gonna basically start putting in
23235
20:05:12,872 --> 20:05:17,040
place uh all the structure necessary in
23236
20:05:17,039 --> 20:05:20,399
us to be able to display all the user
23237
20:05:23,440 --> 20:05:27,119
so as you can see we have almost
23238
20:05:24,800 --> 20:05:29,440
everything in place um there are a few
23239
20:05:27,119 --> 20:05:30,479
functions left to do and we also in this
23240
20:05:29,440 --> 20:05:33,119
video in this chapter we're going to
23241
20:05:30,479 --> 20:05:34,872
talk about future builder and also a
23242
20:05:34,872 --> 20:05:38,160
and i don't think we've talked about
23243
20:05:36,399 --> 20:05:40,239
stream builder before we talked about
23244
20:05:38,160 --> 20:05:41,680
future builder so that's going to be an
23245
20:05:41,679 --> 20:05:46,399
new thing to talk about in this chapter
23246
20:05:46,399 --> 20:05:50,159
i've just i've talked about this in the
23247
20:05:50,160 --> 20:05:54,400
in the outro to the previous chapter
23248
20:05:52,160 --> 20:05:57,120
that what we need to do in this
23249
20:05:54,399 --> 20:05:59,039
chapter right now in chapter 29 is to
23250
20:05:57,119 --> 20:06:01,191
allow the user to to go to the notes
23251
20:05:59,039 --> 20:06:02,719
view and upon going to the note c we're
23252
20:06:01,191 --> 20:06:05,440
all always going to make sure that that
23253
20:06:02,720 --> 20:06:07,512
user exists in our database now you see
23254
20:06:05,440 --> 20:06:10,240
we have firebase right here and then our
23255
20:06:07,512 --> 20:06:12,639
user has upon coming to the notes view
23256
20:06:10,240 --> 20:06:14,960
that user must have logged in with a
23257
20:06:12,639 --> 20:06:17,600
verified email address so that user
23258
20:06:14,960 --> 20:06:19,360
exists we know that that user exists in
23259
20:06:17,600 --> 20:06:22,080
firebase and has a verified email
23260
20:06:19,360 --> 20:06:24,479
address but that user might not exist in
23261
20:06:22,080 --> 20:06:26,960
our database remember we're gonna store
23262
20:06:24,479 --> 20:06:29,599
the user generated notes in our database
23263
20:06:26,960 --> 20:06:31,360
and hook them to the user who created
23264
20:06:31,360 --> 20:06:35,440
um so upon going to the notes view we
23265
20:06:33,512 --> 20:06:38,240
always need to make sure that that user
23266
20:06:38,240 --> 20:06:40,960
and the way to do that if you remember
23267
20:06:39,831 --> 20:06:42,639
let me just bring the code you don't
23268
20:06:40,960 --> 20:06:46,960
have to try to remember that so let's go
23269
20:06:42,639 --> 20:06:46,960
into our notes service you can see
23270
20:06:47,360 --> 20:06:51,600
we have a function called get all notes
23271
20:06:49,831 --> 20:06:52,959
and but we don't have any functionality
23272
20:06:51,600 --> 20:06:56,960
at the moment to for instance give us
23273
20:06:52,960 --> 20:06:58,400
the notes for a a specific user so
23274
20:06:56,960 --> 20:07:01,040
if we want to do that if you want to for
23275
20:06:58,399 --> 20:07:02,959
instance get grab all the notes for a
23276
20:07:01,039 --> 20:07:05,119
specific user then we're going to go
23277
20:07:02,960 --> 20:07:07,192
with a user's email address because if
23278
20:07:05,119 --> 20:07:09,360
you look at the way our application is
23279
20:07:09,360 --> 20:07:13,512
the current user you can see we're
23280
20:07:11,512 --> 20:07:16,000
working always with officer so we're not
23281
20:07:13,512 --> 20:07:18,800
going through um firebase directly and
23282
20:07:16,000 --> 20:07:21,440
our auth service also has an off user so
23283
20:07:18,800 --> 20:07:23,600
let's have a look at our auth and have a
23284
20:07:21,440 --> 20:07:25,360
look at auth user and you'll see that
23285
20:07:23,600 --> 20:07:28,080
our auth user only has one flag that
23286
20:07:28,080 --> 20:07:33,191
so how do we go and call this function
23287
20:07:31,191 --> 20:07:35,512
which is called get or create user on
23288
20:07:33,191 --> 20:07:37,360
our note service where we don't actually
23289
20:07:35,512 --> 20:07:38,320
have an email address for our current
23290
20:07:38,320 --> 20:07:43,440
and that's what we need to do we need to
23291
20:07:40,240 --> 20:07:44,872
go ahead and add an email field to our
23292
20:07:44,872 --> 20:07:49,120
and so as the caption indicates here we
23293
20:07:47,600 --> 20:07:50,552
need to add this field to our off user
23294
20:07:49,119 --> 20:07:53,191
okay so i'm going to change the screen
23295
20:07:50,551 --> 20:07:55,279
layout a little bit so you see better
23296
20:07:53,191 --> 20:07:56,799
and let's go ahead and add a new field
23297
20:07:55,279 --> 20:08:00,551
in there i'm going to have a look at my
23298
20:08:00,551 --> 20:08:04,239
so and add a new field in here and we
23299
20:08:06,479 --> 20:08:12,239
just like that and get help from your
23300
20:08:09,119 --> 20:08:15,831
editor in order to add the email field
23301
20:08:12,240 --> 20:08:17,360
add final field here so this is also
23302
20:08:15,831 --> 20:08:18,639
going to be a required parameter like
23303
20:08:17,360 --> 20:08:20,240
this and i'm just going to make it
23304
20:08:18,639 --> 20:08:23,759
required like this and it come at the
23305
20:08:20,240 --> 20:08:25,680
end to get the formatting done
23306
20:08:23,759 --> 20:08:27,599
and here where we actually creating our
23307
20:08:25,679 --> 20:08:30,239
instance of auth user what we're going
23308
20:08:27,600 --> 20:08:32,480
to do is to say we return an auth user
23309
20:08:30,240 --> 20:08:34,160
and the email is already actually in the
23310
20:08:32,479 --> 20:08:36,639
firebase user let's go to the firebase
23311
20:08:34,160 --> 20:08:40,240
user and look for email you see there is
23312
20:08:40,240 --> 20:08:45,279
and the thing is that this email getter
23313
20:08:42,800 --> 20:08:47,120
is optional string so what we need to do
23314
20:08:45,279 --> 20:08:50,000
is just to make it optional maybe in our
23315
20:08:47,119 --> 20:08:51,599
off user as well okay so in here then
23316
20:08:50,000 --> 20:08:53,279
where we create the off user we're just
23317
20:08:51,600 --> 20:08:55,680
going to say the email field is equal to
23318
20:08:53,279 --> 20:08:57,512
user email and put a comma at the end
23319
20:08:55,679 --> 20:08:59,511
here and a comma here as well to get the
23320
20:08:59,512 --> 20:09:04,160
so all we did in here would say that our
23321
20:09:01,512 --> 20:09:06,551
r auth user has an optional string as
23322
20:09:04,160 --> 20:09:09,120
its email and that email string is read
23323
20:09:06,551 --> 20:09:10,551
from the firebase user that's all
23324
20:09:14,080 --> 20:09:18,000
okay what we need to do then is to as
23325
20:09:16,399 --> 20:09:20,799
the caption indicates go to our notes
23326
20:09:18,000 --> 20:09:23,512
view and grab the let's go notes view
23327
20:09:20,800 --> 20:09:26,320
here and we need to then read the
23328
20:09:23,512 --> 20:09:28,080
current user's email address okay so
23329
20:09:26,320 --> 20:09:30,552
what we're gonna do is saying that our
23330
20:09:28,080 --> 20:09:32,320
auth user has an optional email but we
23331
20:09:30,551 --> 20:09:34,239
we as an application developer are sure
23332
20:09:32,320 --> 20:09:36,872
that because we're using email and
23333
20:09:34,240 --> 20:09:39,279
password registration we are sure that
23334
20:09:36,872 --> 20:09:41,360
any user who ends up in the notes view
23335
20:09:41,360 --> 20:09:45,360
that's an assumption we're going to make
23336
20:09:45,360 --> 20:09:48,479
user which was let's see if we can find
23337
20:09:48,479 --> 20:09:52,800
off user here although the off user says
23338
20:09:51,119 --> 20:09:54,639
that i optionally have an email but
23339
20:09:52,800 --> 20:09:56,240
we're always going to say no that email
23340
20:09:54,639 --> 20:09:59,039
should exist because we're only at the
23341
20:09:56,240 --> 20:10:01,040
moment using email password sign in
23342
20:10:01,039 --> 20:10:05,679
in order for this notes view to be able
23343
20:10:02,800 --> 20:10:06,872
to make a call to the notes service and
23344
20:10:06,872 --> 20:10:11,760
or sorry to create or get the current
23345
20:10:09,191 --> 20:10:13,759
user it needs an email so let's go ahead
23346
20:10:11,759 --> 20:10:15,039
and expose a functionality in our notes
23347
20:10:15,039 --> 20:10:19,759
as the caption indicates that grabs the
23348
20:10:17,039 --> 20:10:22,000
user's email so let's go in here and i'm
23349
20:10:19,759 --> 20:10:24,000
going to go to my notes view as well in
23350
20:10:25,279 --> 20:10:29,512
and what we're going to do in there is
23351
20:10:26,551 --> 20:10:30,872
just to expose the user email so let's
23352
20:10:38,639 --> 20:10:43,191
and i'm going to say off service
23353
20:10:43,191 --> 20:10:47,119
all right off service i don't think it's
23354
20:10:44,872 --> 20:10:49,832
imported so let's actually see is it
23355
20:10:50,800 --> 20:10:54,080
off service yeah it is imported okay
23356
20:10:57,831 --> 20:11:01,439
and this can't be equal so that's why
23357
20:10:59,759 --> 20:11:03,919
it's going a little bit crazy firebase
23358
20:11:01,440 --> 20:11:05,680
and then we're going to say current user
23359
20:11:03,919 --> 20:11:07,679
and you see this current user is now
23360
20:11:05,679 --> 20:11:09,119
optional but since we are the
23361
20:11:07,679 --> 20:11:11,119
application developer and we're sure
23362
20:11:09,119 --> 20:11:12,871
that if you end up in the notes view
23363
20:11:11,119 --> 20:11:14,319
then you should have a current user
23364
20:11:12,872 --> 20:11:16,000
that's what we've already made sure in
23365
20:11:14,320 --> 20:11:16,960
the previous steps okay so if you look
23366
20:11:16,960 --> 20:11:21,832
login screen for instance in our login
23367
20:11:19,191 --> 20:11:24,479
view so i open the login view here we're
23368
20:11:21,831 --> 20:11:26,319
saying if the current user exists and is
23369
20:11:24,479 --> 20:11:27,759
email verified is true then go to the
23370
20:11:27,759 --> 20:11:31,191
then we can be sure that inside the
23371
20:11:29,279 --> 20:11:32,080
notes view we already have a user okay
23372
20:11:32,080 --> 20:11:37,440
this current user in firebase currently
23373
20:11:34,479 --> 20:11:39,279
says optional but we're gonna unwrap it
23374
20:11:37,440 --> 20:11:44,279
force on rapid okay and then we're gonna
23375
20:11:39,279 --> 20:11:44,279
say email and force unwrap that too
23376
20:11:46,720 --> 20:11:51,440
that's what we've done so now we get the
23377
20:11:51,440 --> 20:11:56,800
now if you remember inside our um
23378
20:11:54,639 --> 20:11:58,319
inside our note service we have two
23379
20:11:56,800 --> 20:12:01,279
really important functions which at the
23380
20:11:58,320 --> 20:12:04,872
moment are at the bottom of this
23381
20:12:01,279 --> 20:12:07,039
class which are called open and close
23382
20:12:07,039 --> 20:12:12,639
and what we need to make sure is that
23383
20:12:08,872 --> 20:12:15,512
upon going to notes view that
23384
20:12:12,639 --> 20:12:18,399
our database is actually open so we
23385
20:12:15,512 --> 20:12:20,800
cannot continue to read stuff from
23386
20:12:18,399 --> 20:12:22,959
various parts of our database if the
23387
20:12:20,800 --> 20:12:24,551
database handle hasn't actually be
23388
20:12:24,551 --> 20:12:28,479
let's then go to our uh notes view
23389
20:12:28,479 --> 20:12:31,919
in here as you can see this is the
23390
20:12:30,080 --> 20:12:34,400
reason we made this and notes view a
23391
20:12:31,919 --> 20:12:37,191
stateful widget in that we need to now
23392
20:12:34,399 --> 20:12:39,831
hook into the two life cycle events of
23393
20:12:37,191 --> 20:12:42,000
our notes you and to open our database
23394
20:12:39,831 --> 20:12:43,759
upon the creation of this node 2 and
23395
20:12:42,000 --> 20:12:45,512
then close the database upon it being
23396
20:12:45,512 --> 20:12:49,040
as the caption indicates let's go and
23397
20:12:47,440 --> 20:12:51,279
overwrite the init state function in
23398
20:12:49,039 --> 20:12:52,719
here okay and what we're going to do in
23399
20:12:54,479 --> 20:12:59,440
basically have a notes service in our
23400
20:12:57,512 --> 20:13:03,040
init state and we also need to make sure
23401
20:13:03,360 --> 20:13:07,600
so let's have a look uh let me have a
23402
20:13:10,160 --> 20:13:14,000
we need to open the database in there so
23403
20:13:14,000 --> 20:13:17,600
grab a hold of our notes service so we
23404
20:13:15,919 --> 20:13:18,959
don't have a note service right now but
23405
20:13:17,600 --> 20:13:23,240
we're going to create that so let's just
23406
20:13:23,831 --> 20:13:30,000
so this is our uh notes view uh
23407
20:13:27,191 --> 20:13:32,319
undefined class notes service
23408
20:13:30,000 --> 20:13:34,080
haven't we imported note service and we
23409
20:13:32,320 --> 20:13:36,552
haven't so let's just do it on import
23410
20:13:34,080 --> 20:13:38,720
right now so this is our notes view
23411
20:13:36,551 --> 20:13:42,000
grabbing hold of an instance of node
23412
20:13:38,720 --> 20:13:44,399
server so that it can work with it okay
23413
20:13:44,399 --> 20:13:48,000
let's go ahead and do that then so we're
23414
20:13:48,831 --> 20:13:54,551
service is equal to an instance of nodes
23415
20:13:52,720 --> 20:13:57,759
service like this and then we're going
23416
20:13:57,759 --> 20:14:01,039
and right now this function is a future
23417
20:14:01,919 --> 20:14:06,551
you may not really be able to do an
23418
20:14:04,720 --> 20:14:08,800
async in your init stating here but
23419
20:14:06,551 --> 20:14:12,551
we're just for now we're just saying
23420
20:14:08,800 --> 20:14:14,800
open all right so open the database
23421
20:14:12,551 --> 20:14:16,000
and that's all we have to do and then we
23422
20:14:14,800 --> 20:14:18,872
have to take care of closing the
23423
20:14:16,000 --> 20:14:20,479
database so let's go ahead and say
23424
20:14:20,479 --> 20:14:24,479
upon this uh notes views disposal we're
23425
20:14:23,039 --> 20:14:27,039
also going to close the database because
23426
20:14:24,479 --> 20:14:28,000
we're good citizens of the dart lab so
23427
20:14:27,039 --> 20:14:30,639
we're not just going to leave the
23428
20:14:28,000 --> 20:14:34,000
database open so node service and we're
23429
20:14:30,639 --> 20:14:35,440
going to say close all right and
23430
20:14:34,000 --> 20:14:38,399
that's that's pretty much it that's all
23431
20:14:38,639 --> 20:14:45,440
okay great stuff let's save this and um
23432
20:14:42,160 --> 20:14:46,639
i'm also going to maybe bring a crcpy
23433
20:14:46,639 --> 20:14:51,831
and what i'm gonna do then is to do a
23434
20:14:55,919 --> 20:14:58,720
and then i'm gonna log in with that user
23435
20:14:58,720 --> 20:15:04,551
if i can spell pick solitude
23436
20:15:04,551 --> 20:15:09,119
foo barb has horrible password i've
23437
20:15:12,831 --> 20:15:19,279
barbaz it could be because this uh phone
23438
20:15:16,639 --> 20:15:21,831
doesn't have wi-fi right now so let's go
23439
20:15:19,279 --> 20:15:23,119
in here turn wi-fi on and then i'm gonna
23440
20:15:23,119 --> 20:15:26,551
android phones usually initial
23441
20:15:24,800 --> 20:15:28,240
initialize their wi-fi site quite fast
23442
20:15:26,551 --> 20:15:29,512
so now we should be able to say login
23443
20:15:28,240 --> 20:15:31,120
and we end up in the main ui of the
23444
20:15:29,512 --> 20:15:32,160
application so this open function has
23445
20:15:32,160 --> 20:15:37,192
and i can see that we haven't had any
23446
20:15:34,240 --> 20:15:38,080
exceptions thrown in the debug console
23447
20:15:42,639 --> 20:15:48,000
so let's have a look in here um
23448
20:15:45,759 --> 20:15:49,919
as you can see in the caption uh right
23449
20:15:48,000 --> 20:15:52,240
now we are what we're doing is that
23450
20:15:49,919 --> 20:15:53,759
we're like issuing different functional
23451
20:15:52,240 --> 20:15:55,919
functions in our for instance let's have
23452
20:15:53,759 --> 20:15:58,799
a look at delete user what it does is
23453
20:15:55,919 --> 20:16:00,479
that it says get database or throw um
23454
20:15:58,800 --> 20:16:02,080
and at the moment this get database or
23455
20:16:00,479 --> 20:16:05,679
throw only thing it does is just make
23456
20:16:02,080 --> 20:16:06,720
sure that this db is available in there
23457
20:16:05,679 --> 20:16:08,639
but it doesn't make sure that that
23458
20:16:06,720 --> 20:16:10,551
database is open as such it just makes
23459
20:16:08,639 --> 20:16:13,360
sure that there is a database
23460
20:16:10,551 --> 20:16:14,720
instance in the the internet in the node
23461
20:16:14,720 --> 20:16:18,720
so what we need to make sure now is that
23462
20:16:17,191 --> 20:16:20,871
every function that works with our
23463
20:16:18,720 --> 20:16:23,191
database first ensures that the database
23464
20:16:20,872 --> 20:16:25,360
not only is instance is there but that
23465
20:16:26,551 --> 20:16:31,119
all right because if you look at the
23466
20:16:28,960 --> 20:16:32,960
excuse me um here we have the open
23467
20:16:32,960 --> 20:16:36,240
sets the instance to that database all
23468
20:16:36,240 --> 20:16:40,639
so what we need to do is to create a
23469
20:16:38,399 --> 20:16:43,119
little function that says ensure
23470
20:16:40,639 --> 20:16:45,039
database and what is it called ensure db
23471
20:16:45,831 --> 20:16:50,831
i'm just going to go ahead and have a
23472
20:16:47,919 --> 20:16:55,679
look at my notes for ensure dbs
23473
20:16:50,831 --> 20:16:58,551
open and um let's have a look at
23474
20:16:55,679 --> 20:17:00,079
putting that maybe above open in here
23475
20:17:00,080 --> 20:17:04,080
if you're following along with me you
23476
20:17:01,919 --> 20:17:06,720
just go to top of the open function and
23477
20:17:04,080 --> 20:17:09,279
we're just gonna say future void
23478
20:17:09,279 --> 20:17:13,119
and that's an async function all right
23479
20:17:15,440 --> 20:17:20,400
what then we're going to do is just to
23480
20:17:21,679 --> 20:17:26,639
we're going to put a try block in here
23481
20:17:24,080 --> 20:17:28,551
and let's go we see that our open
23482
20:17:28,551 --> 20:17:31,919
throws an exception that says database
23483
20:17:30,479 --> 20:17:33,191
already open exception so what we need
23484
20:17:31,919 --> 20:17:35,512
to make sure is that we cache that
23485
20:17:35,512 --> 20:17:41,512
our uh notes view gets hot reloaded then
23486
20:17:39,679 --> 20:17:43,679
it shouldn't try to open the database
23487
20:17:41,512 --> 20:17:45,680
over and over again and if it does then
23488
20:17:43,679 --> 20:17:46,719
this open function is going to throw an
23489
20:17:48,479 --> 20:17:52,551
and our ensure dbs open function is
23490
20:17:51,119 --> 20:17:55,039
going to catch that and it's just going
23491
20:17:52,551 --> 20:17:56,080
to let it go all right so all it does is
23492
20:17:56,080 --> 20:17:59,759
we just ensure that we're not opening
23493
20:17:58,160 --> 20:18:01,512
the database over and over again because
23494
20:18:01,512 --> 20:18:06,000
so what we're going to do then is we're
23495
20:18:03,039 --> 20:18:07,679
going to say awaits open in here
23496
20:18:06,000 --> 20:18:09,600
and in here we say we're catching
23497
20:18:09,600 --> 20:18:14,000
already open exception and we're just
23498
20:18:11,919 --> 20:18:17,279
going to let it go in this case so
23499
20:18:17,279 --> 20:18:23,440
sorry on all right so now we have this
23500
20:18:20,320 --> 20:18:25,680
intro db function is open uh it's your
23501
20:18:25,679 --> 20:18:30,719
and we need to start using that um
23502
20:18:28,479 --> 20:18:33,039
so let me bring up the right caption so
23503
20:18:30,720 --> 20:18:34,551
we need to start using ensure dbs open
23504
20:18:33,039 --> 20:18:36,871
function in various functionalities in
23505
20:18:34,551 --> 20:18:38,720
our application so let's first go to
23506
20:18:39,679 --> 20:18:46,719
and uh we're just going to say await
23507
20:18:42,399 --> 20:18:49,360
ensure db is open that's the first place
23508
20:18:50,551 --> 20:18:53,831
we have a function called create user
23509
20:18:53,831 --> 20:18:57,360
and we're gonna wait on ensure db is
23510
20:18:59,919 --> 20:19:03,440
that was create user now let's go to
23511
20:19:03,440 --> 20:19:07,119
this function get user right here
23512
20:19:05,600 --> 20:19:09,279
if i can go to it for some reason i'm
23513
20:19:07,119 --> 20:19:13,360
not able to go to it here and let's say
23514
20:19:13,360 --> 20:19:18,320
uh that that that's that part let's go
23515
20:19:18,320 --> 20:19:22,160
function get all notes and do the same
23516
20:19:25,039 --> 20:19:29,039
oh also i can see i didn't actually call
23517
20:19:27,440 --> 20:19:31,119
the function so let's make sure that
23518
20:19:29,039 --> 20:19:33,599
i've done it in the other places i'm
23519
20:19:31,119 --> 20:19:35,279
just going to copy that code and ensure
23520
20:19:33,600 --> 20:19:36,800
bb is open let's just make sure that i'm
23521
20:19:35,279 --> 20:19:40,160
actually calling the function and like
23522
20:19:36,800 --> 20:19:42,551
i'm not like placing it just there
23523
20:19:42,551 --> 20:19:46,959
and so you have to do it in get all
23524
20:19:46,960 --> 20:19:50,552
and we're going to go to create node and
23525
20:19:48,399 --> 20:19:52,479
do the same thing so let's just go and
23526
20:19:52,479 --> 20:19:56,959
actually paste that code in there wait
23527
20:19:56,960 --> 20:20:01,040
and we're we need to do it in um
23528
20:19:59,279 --> 20:20:04,160
so we not we've done it in create node
23529
20:20:01,039 --> 20:20:05,119
and let's go ahead to delete node delete
23530
20:20:05,119 --> 20:20:08,551
and paste the function right there as
23531
20:20:13,039 --> 20:20:18,479
as well delete all nodes right there
23532
20:20:16,160 --> 20:20:20,480
do the same thing and also we do it in
23533
20:20:23,191 --> 20:20:28,959
and also we have what else do we have um
23534
20:20:30,399 --> 20:20:34,551
and we do it as the first call
23535
20:20:35,039 --> 20:20:38,479
but and then uh where else do we have to
23536
20:20:38,479 --> 20:20:43,119
let's see we've done it now delete user
23537
20:20:40,800 --> 20:20:46,400
yeah i think now we place the ensure dbs
23538
20:20:43,119 --> 20:20:46,399
open all those calls all right
23539
20:20:46,639 --> 20:20:53,512
okay that was a lot of information um so
23540
20:20:53,512 --> 20:20:58,720
make sure basically that we work on our
23541
20:20:57,279 --> 20:21:00,800
notes view as we promised in the
23542
20:21:02,080 --> 20:21:06,960
the reason that we created the ensure db
23543
20:21:04,399 --> 20:21:10,000
is open is that before any of these
23544
20:21:06,960 --> 20:21:11,832
functions are called that our code is
23545
20:21:10,000 --> 20:21:14,320
actually going to open the database for
23546
20:21:11,831 --> 20:21:16,399
us that means in our notes view we don't
23547
20:21:14,320 --> 20:21:18,872
actually have to do this anymore because
23548
20:21:16,399 --> 20:21:21,191
we know that by issuing any database
23549
20:21:18,872 --> 20:21:23,680
related commands to our nodes service
23550
20:21:21,191 --> 20:21:25,191
that that function in itself is going to
23551
20:21:23,679 --> 20:21:27,759
open the database for us it's just a
23552
20:21:25,191 --> 20:21:29,119
nice little feature in our node servers
23553
20:21:27,759 --> 20:21:32,639
to make sure that we don't have to make
23554
20:21:29,119 --> 20:21:35,119
an extra call to open the database
23555
20:21:35,119 --> 20:21:39,191
start using our node service okay so
23556
20:21:37,039 --> 20:21:41,039
it's just like a convenient a little
23557
20:21:41,039 --> 20:21:44,000
all right as the captioning case now i'm
23558
20:21:42,479 --> 20:21:47,759
going to talk about future builder and
23559
20:21:44,000 --> 20:21:49,600
async snapshot well um we've talked
23560
20:21:47,759 --> 20:21:52,399
actually previously a little bit about
23561
20:21:52,399 --> 20:21:57,360
but uh what a future builder is maybe
23562
20:21:55,279 --> 20:21:59,512
actually you should write it here future
23563
20:21:57,360 --> 20:22:00,960
builder and then go to the code so you
23564
20:21:59,512 --> 20:22:04,639
see it a little bit better you can see
23565
20:22:00,960 --> 20:22:07,760
it is a stateful widget so and what it
23566
20:22:04,639 --> 20:22:09,600
does is that it subscribes to a future
23567
20:22:07,759 --> 20:22:11,039
that will return its value in the future
23568
20:22:09,600 --> 20:22:12,720
if you're familiar with javascript then
23569
20:22:13,679 --> 20:22:18,959
and uh if you're familiar with rx swift
23570
20:22:17,039 --> 20:22:21,119
or any rx related then you'll know
23571
20:22:18,960 --> 20:22:22,552
probably as like a single or an
23572
20:22:21,119 --> 20:22:23,831
observable kind of actually not an
23573
20:22:22,551 --> 20:22:25,440
observable because that's a stream
23574
20:22:23,831 --> 20:22:28,551
builder a future builder is kind of like
23575
20:22:25,440 --> 20:22:30,000
a single builder meaning that a value
23576
20:22:28,551 --> 20:22:32,239
that starts someplace and then
23577
20:22:30,000 --> 20:22:34,320
calculates something returns its value
23578
20:22:32,240 --> 20:22:36,480
and then it finishes that's it
23579
20:22:34,320 --> 20:22:37,512
so a future builder allows you to submit
23580
20:22:37,512 --> 20:22:41,760
and it will allow you to submit a
23581
20:22:41,759 --> 20:22:45,759
it takes that chunk of code that
23582
20:22:43,831 --> 20:22:48,000
produces a value as a future it says
23583
20:22:45,759 --> 20:22:50,551
okay now it's mine i will take it
23584
20:22:48,000 --> 20:22:51,919
subscribe to it as the value of this
23585
20:22:50,551 --> 20:22:54,319
future changes i will give you the
23586
20:22:51,919 --> 20:22:56,872
ability to return various widgets that
23587
20:22:54,320 --> 20:22:58,320
need to be displayed on the screen so it
23588
20:22:58,320 --> 20:23:01,512
your future logic with your ui logic so
23589
20:23:03,512 --> 20:23:08,960
so what we need to do now is to make
23590
20:23:05,919 --> 20:23:11,191
sure that upon going to our build
23591
20:23:08,960 --> 20:23:14,720
function right there in the body you see
23592
20:23:11,191 --> 20:23:16,871
in the body of our notes view here
23593
20:23:18,160 --> 20:23:24,320
creating a user or getting the current
23594
20:23:22,000 --> 20:23:26,800
user from the database if it already
23595
20:23:24,320 --> 20:23:29,040
exists and we're creating that user if
23596
20:23:29,039 --> 20:23:33,919
if you remember we have this function
23597
20:23:30,639 --> 20:23:35,919
already it is called gets or creates
23598
20:23:33,919 --> 20:23:38,000
something something a get or a create
23599
20:23:35,919 --> 20:23:41,279
user and it's a future so we're going to
23600
20:23:38,000 --> 20:23:43,759
create a future builder in our uh notes
23601
20:23:41,279 --> 20:23:45,831
view that subscribes itself to the value
23602
20:23:43,759 --> 20:23:48,319
that is returned by this and then it
23603
20:23:45,831 --> 20:23:49,919
will tell us about various updates and
23604
20:23:48,320 --> 20:23:51,832
these various updates are going to be
23605
20:23:49,919 --> 20:23:54,720
provided to us as something called an
23606
20:23:51,831 --> 20:23:56,871
async snapshot an async snapshot is
23607
20:23:54,720 --> 20:23:58,639
basically as its name indicates is a
23608
20:23:56,872 --> 20:24:00,639
wrapper as a snapshot around an
23609
20:23:58,639 --> 20:24:02,639
asynchronous functionality which is in
23610
20:24:04,800 --> 20:24:09,440
so that's what we're going to do in our
23611
20:24:11,679 --> 20:24:16,000
caption we're going to now return a
23612
20:24:16,000 --> 20:24:21,279
and actually that should say notes view
23613
20:24:21,279 --> 20:24:24,000
view so i'm going to fix the caption as
23614
20:24:24,000 --> 20:24:29,440
i don't confuse anybody including myself
23615
20:24:30,479 --> 20:24:33,512
so now it's better i apologize for that
23616
20:24:33,512 --> 20:24:37,279
right now we have this hello world but
23617
20:24:35,279 --> 20:24:39,360
we're gonna change that so it returns a
23618
20:24:37,279 --> 20:24:41,440
notes view so i'm gonna say sorry a
23619
20:24:39,360 --> 20:24:43,600
future builder so let's say we now
23620
20:24:43,600 --> 20:24:46,552
and now it says okay there are two
23621
20:24:45,191 --> 20:24:47,919
parameters that we have to provide one
23622
20:24:46,551 --> 20:24:50,551
is the future the other one is actually
23623
20:24:47,919 --> 20:24:52,080
the builder function so the builder
23624
20:24:50,551 --> 20:24:52,872
sorry the future in itself is going to
23625
20:24:56,800 --> 20:25:02,000
get or create the user and the email if
23626
20:24:59,759 --> 20:25:04,479
you remember is the current user's email
23627
20:25:02,000 --> 20:25:06,639
address which we created a getter for
23628
20:25:04,479 --> 20:25:09,119
called user email so let's go put that
23629
20:25:06,639 --> 20:25:10,639
in there user email and then you can see
23630
20:25:09,119 --> 20:25:12,639
it's still complaining saying that the
23631
20:25:14,320 --> 20:25:17,280
so let's go and say then that we have a
23632
20:25:17,279 --> 20:25:21,512
and right there and i talked about async
23633
20:25:20,000 --> 20:25:23,679
snapshot because that's the parameter
23634
20:25:21,512 --> 20:25:27,832
that you get in here is this is async
23635
20:25:23,679 --> 20:25:30,959
snap snapshot of object right now
23636
20:25:27,831 --> 20:25:34,080
but we're gonna fix that so um
23637
20:25:34,080 --> 20:25:39,831
let's then talk about actually
23638
20:25:37,279 --> 20:25:40,800
this functionality right here
23639
20:25:40,800 --> 20:25:45,512
after we get the current user or creates
23640
20:25:43,119 --> 20:25:48,000
a new user if that user hasn't existed
23641
20:25:45,512 --> 20:25:50,400
in our database we also need to grab all
23642
20:25:56,000 --> 20:26:00,000
have like a stream of all the nodes for
23643
20:25:58,320 --> 20:26:01,920
the current user we're going to add that
23644
20:26:00,000 --> 20:26:03,831
soon but as you can see in the caching
23645
20:26:01,919 --> 20:26:05,679
is we can achieve this with our stream
23646
20:26:03,831 --> 20:26:08,080
controller which we've already placed
23647
20:26:05,679 --> 20:26:09,919
like the groundwork for in our node
23648
20:26:09,919 --> 20:26:13,919
so let's go and create a little
23649
20:26:11,440 --> 20:26:15,832
functionality in here in our notes
23650
20:26:17,759 --> 20:26:23,679
allows you to retrieve all the notes so
23651
20:26:20,479 --> 20:26:23,679
we're just going to say stream
23652
20:26:29,279 --> 20:26:34,720
and we it's a getter and we call it all
23653
20:26:31,919 --> 20:26:37,119
notes okay and what it does is is in
23654
20:26:34,720 --> 20:26:39,600
itself is gonna subscribe to this note
23655
20:26:37,119 --> 20:26:41,191
stream controller and retrieve all the
23656
20:26:39,600 --> 20:26:42,872
notes from that controller because
23657
20:26:41,191 --> 20:26:43,679
remember this note stream controller in
23658
20:26:43,679 --> 20:26:48,479
in itself contains this guy all right
23659
20:26:46,800 --> 20:26:50,320
so and that's what we're going to do
23660
20:26:48,479 --> 20:26:54,119
we're going to say it returns the node
23661
20:26:54,240 --> 20:26:58,639
actually another stream get all not so
23662
20:27:04,720 --> 20:27:09,680
so that's our getter for getting all the
23663
20:27:06,960 --> 20:27:12,552
notes um now what we need to do now that
23664
20:27:09,679 --> 20:27:15,599
we've created our uh so back into back
23665
20:27:12,551 --> 20:27:17,759
in note2.dart now that we have
23666
20:27:19,279 --> 20:27:26,160
what we need to make sure of is that if
23667
20:27:23,360 --> 20:27:28,240
the user could be created then we are
23668
20:27:26,160 --> 20:27:30,320
going to work with something called a
23669
20:27:28,240 --> 20:27:31,680
stream builder that retrieves all the
23670
20:27:30,320 --> 20:27:34,160
nodes from the node service and then
23671
20:27:31,679 --> 20:27:36,000
renders them on the screen okay
23672
20:27:34,160 --> 20:27:37,600
but we can't yet render them we don't
23673
20:27:36,000 --> 20:27:39,360
have any user generated content and we
23674
20:27:37,600 --> 20:27:41,120
also don't know yet how to render them
23675
20:27:39,360 --> 20:27:43,279
so first let's take care of something in
23676
20:27:41,119 --> 20:27:45,679
here this snapshot in here what we need
23677
20:27:45,679 --> 20:27:51,599
connection state is connection
23678
20:27:53,919 --> 20:27:57,440
if that's the case then we're gonna do
23679
20:27:55,679 --> 20:28:01,679
some logic in here so let's just say
23680
20:27:57,440 --> 20:28:03,360
return a text of hello for now okay
23681
20:28:01,679 --> 20:28:06,239
actually we need to maybe switch this so
23682
20:28:07,679 --> 20:28:12,871
snapshot dots connection state and i
23683
20:28:10,551 --> 20:28:14,479
really like to get uh visual studio code
23684
20:28:12,872 --> 20:28:16,080
to complete the rest for me so i don't
23685
20:28:14,479 --> 20:28:18,000
like to write all the cases so i'm just
23686
20:28:16,080 --> 20:28:19,831
gonna say command dot or on mac or
23687
20:28:18,000 --> 20:28:22,399
control dot on linux and windows i say
23688
20:28:19,831 --> 20:28:24,239
add missing case clauses and in the case
23689
20:28:22,399 --> 20:28:26,479
of done i'm just going to say return
23690
20:28:26,479 --> 20:28:30,551
if the creation or the retrieval of the
23691
20:28:28,720 --> 20:28:32,960
current user was completed then just
23692
20:28:32,960 --> 20:28:38,160
and in any other case for instance in
23693
20:28:41,119 --> 20:28:45,512
a circular progress indicator just like
23694
20:28:45,512 --> 20:28:49,600
okay then i'm gonna put the case of done
23695
20:28:52,399 --> 20:28:59,039
let's then do a hot restart and i can
23696
20:28:55,039 --> 20:29:00,639
see my um scrcpy kind of just crashed so
23697
20:28:59,039 --> 20:29:03,279
yeah stuff like that happens sometimes
23698
20:29:00,639 --> 20:29:08,000
and that's okay let me go ahead and go
23699
20:29:03,279 --> 20:29:08,000
back to this shell and say hcr cpy
23700
20:29:08,080 --> 20:29:11,600
the application is working fine it's
23701
20:29:09,831 --> 20:29:14,639
just that scr cpy crest so i'm just
23702
20:29:11,600 --> 20:29:15,440
gonna say your notes will appear here
23703
20:29:17,759 --> 20:29:20,959
actually my debug process has crashed as
23704
20:29:20,960 --> 20:29:24,800
i'm going to run the application now
23705
20:29:27,191 --> 20:29:30,959
gradle task goes fast because we've
23706
20:29:29,360 --> 20:29:32,320
already compiled the application from
23707
20:29:32,320 --> 20:29:37,192
so what we need to do you see we are now
23708
20:29:34,479 --> 20:29:38,872
taking care of making sure that the user
23709
20:29:37,191 --> 20:29:40,959
is created in the database if it didn't
23710
20:29:38,872 --> 20:29:42,960
exist or we're getting the user if that
23711
20:29:40,960 --> 20:29:46,000
user exists in the database but what we
23712
20:29:42,960 --> 20:29:48,240
also need to do is to start listening to
23713
20:29:46,000 --> 20:29:50,720
changes to this stream which is in our
23714
20:29:48,240 --> 20:29:54,000
note service called all nodes and
23715
20:29:50,720 --> 20:29:55,759
depending on the state of that stream
23716
20:29:54,000 --> 20:29:59,279
then we're going to build our user
23717
20:29:55,759 --> 20:30:00,959
interface all right so in this in here
23718
20:29:59,279 --> 20:30:03,279
we're actually not going to return like
23719
20:30:00,960 --> 20:30:05,360
a text of hey your notes will appear
23720
20:30:03,279 --> 20:30:08,319
here but we're actually going to use a
23721
20:30:05,360 --> 20:30:10,320
stream builder which is very similar to
23722
20:30:08,320 --> 20:30:14,160
a future builder but it actually listens
23723
20:30:15,279 --> 20:30:19,512
oops did i just kill the application
23724
20:30:19,512 --> 20:30:22,320
so there we go your notes will appear
23725
20:30:22,320 --> 20:30:26,872
that seems to be working fine so let's
23726
20:30:24,551 --> 20:30:29,191
go in here and then say that we want to
23727
20:30:31,191 --> 20:30:35,440
our stream builder i'm going to put this
23728
20:30:32,872 --> 20:30:37,192
back and before we do that i want to
23729
20:30:35,440 --> 20:30:38,800
explain this little thing that i've
23730
20:30:38,800 --> 20:30:43,919
what are the waiting and dawn flags in
23731
20:30:43,919 --> 20:30:47,279
both a stream builder and a future
23732
20:30:45,679 --> 20:30:49,439
builder work with something called an
23733
20:30:47,279 --> 20:30:52,319
async snapshot which is this guy you see
23734
20:30:49,440 --> 20:30:53,919
async snapshot and this async snapshot
23735
20:30:52,320 --> 20:30:55,280
can have various connection states so if
23736
20:30:53,919 --> 20:30:58,000
you go to connection state in there and
23737
20:30:55,279 --> 20:31:01,512
you can see we have none waiting active
23738
20:31:03,600 --> 20:31:07,120
when you when you have you see in the
23739
20:31:05,679 --> 20:31:08,799
case of an active says for example a
23740
20:31:07,119 --> 20:31:10,871
stream that has returned at least one
23741
20:31:10,872 --> 20:31:17,440
so that's for a that's for a stream
23742
20:31:14,080 --> 20:31:19,040
uh but if you're waiting for a future or
23743
20:31:17,440 --> 20:31:21,360
a stream then you're gonna get this
23744
20:31:19,039 --> 20:31:24,479
waiting flag and it done is gonna happen
23745
20:31:21,360 --> 20:31:26,639
for your um a future so a future that
23746
20:31:24,479 --> 20:31:28,639
has completed its task as i said it does
23747
20:31:26,639 --> 20:31:30,551
something and it completes but a stream
23748
20:31:28,639 --> 20:31:32,319
usually it just keeps living so you
23749
20:31:30,551 --> 20:31:34,399
can't like hook into or you shouldn't
23750
20:31:32,320 --> 20:31:36,480
hook into the done event for a stream
23751
20:31:34,399 --> 20:31:39,439
but you should actually hook into your
23752
20:31:39,440 --> 20:31:42,479
connection state so that's what we're
23753
20:31:40,872 --> 20:31:46,000
going to do so connections stay done for
23754
20:31:42,479 --> 20:31:46,872
a future and a connection state of um
23755
20:31:46,872 --> 20:31:51,279
waiting for the stream so in here let's
23756
20:31:55,919 --> 20:32:02,119
is going to be our note services all
23757
20:32:03,440 --> 20:32:08,080
so that's the stream itself and then we
23758
20:32:05,831 --> 20:32:11,191
need a builder and let's get visual
23759
20:32:08,080 --> 20:32:13,279
studio to complete that for us um
23760
20:32:11,191 --> 20:32:16,000
okay and in the builder what we're gonna
23761
20:32:19,119 --> 20:32:22,319
like this get visual studio code to
23762
20:32:36,960 --> 20:32:43,120
i'm going to remove the break from here
23763
20:32:40,551 --> 20:32:45,191
and in any other case so in the case of
23764
20:32:43,119 --> 20:32:47,440
default we're just going to say
23765
20:32:47,440 --> 20:32:52,400
on circular progress indicator just like
23766
20:32:52,399 --> 20:32:56,319
so now you see if i command s to hot
23767
20:32:54,320 --> 20:32:58,800
reload then it just says waiting for all
23768
20:32:56,320 --> 20:33:01,760
nodes to appear on the screen so
23769
20:32:58,800 --> 20:33:04,800
this is now like the skeleton of our
23770
20:33:01,759 --> 20:33:06,639
application's notes view so that it
23771
20:33:04,800 --> 20:33:08,551
takes care of two things it gets the
23772
20:33:06,639 --> 20:33:09,919
current user using his or her email
23773
20:33:08,551 --> 20:33:11,679
address if that user already exists in
23774
20:33:09,919 --> 20:33:14,639
the database or creates it so that's the
23775
20:33:14,639 --> 20:33:19,039
the widget returned by the future
23776
20:33:16,320 --> 20:33:20,960
builder in itself is a stream builder
23777
20:33:19,039 --> 20:33:23,439
so the stream builder then calculates
23778
20:33:20,960 --> 20:33:25,512
all the nodes and returns them from the
23779
20:33:23,440 --> 20:33:27,279
node service and then it has a
23780
20:33:25,512 --> 20:33:28,960
connection state and waiting which in
23781
20:33:27,279 --> 20:33:30,399
turn right now is saying waiting for all
23782
20:33:28,960 --> 20:33:31,360
nodes and we're going to change this
23783
20:33:34,872 --> 20:33:38,240
it doesn't just return a text it
23784
20:33:36,320 --> 20:33:40,800
actually returns a list of notes all
23785
20:33:40,800 --> 20:33:45,040
now let's talk about something else
23786
20:33:42,320 --> 20:33:46,872
before we wrap up this chapter and you
23787
20:33:45,039 --> 20:33:50,159
see at the moment what we're doing is
23788
20:33:46,872 --> 20:33:53,040
that we're saying our note service um is
23789
20:33:50,160 --> 20:33:55,279
a new service right here so every time
23790
20:33:53,039 --> 20:33:57,679
go into init states if i command s in
23791
20:33:55,279 --> 20:33:59,759
here or if you did a hot reload or hot
23792
20:33:57,679 --> 20:34:01,119
restarting here actually hot restart
23793
20:34:01,119 --> 20:34:04,399
i can see maybe that is the reason we're
23794
20:34:02,872 --> 20:34:06,080
crashing the entire application because
23795
20:34:04,399 --> 20:34:07,360
we're creating a new node service so
23796
20:34:06,080 --> 20:34:09,440
that could be the reason i can see hot
23797
20:34:07,360 --> 20:34:11,919
restart is a little bit flaky right now
23798
20:34:09,440 --> 20:34:14,080
so um so that is pretty much the reason
23799
20:34:11,919 --> 20:34:15,191
we're going to create a single now if
23800
20:34:14,080 --> 20:34:17,680
you're not familiar with what a
23801
20:34:15,191 --> 20:34:19,759
singleton is a singleton essentially is
23802
20:34:17,679 --> 20:34:21,439
a pattern used in software development
23803
20:34:21,440 --> 20:34:28,000
service for instance or a class instance
23804
20:34:24,872 --> 20:34:30,240
where that class instance is only one
23805
20:34:28,000 --> 20:34:32,000
inside the entire application right now
23806
20:34:30,240 --> 20:34:33,760
any place in our app we can go and
23807
20:34:32,000 --> 20:34:35,119
create a new instance of node service
23808
20:34:33,759 --> 20:34:38,000
but if you think about it the node
23809
20:34:35,119 --> 20:34:39,360
service should only exist as one copy in
23810
20:34:38,000 --> 20:34:41,360
the entire application it shouldn't be
23811
20:34:39,360 --> 20:34:43,360
like made new copies of this note
23812
20:34:41,360 --> 20:34:44,720
service over and over again so that's
23813
20:34:43,360 --> 20:34:48,160
what a singleton is and that's what
23814
20:34:44,720 --> 20:34:50,320
we're going to do with our note service
23815
20:34:48,160 --> 20:34:53,192
so i see i have a little bit of problem
23816
20:34:53,440 --> 20:34:56,400
captions and i'm going to bring the next
23817
20:34:56,399 --> 20:35:00,720
so let's go ahead first and uh
23818
20:34:59,279 --> 20:35:02,399
before i run the application maybe we
23819
20:35:00,720 --> 20:35:04,080
should fix this problem with our
23820
20:35:02,399 --> 20:35:06,079
singleton so let's go to our note
23821
20:35:06,080 --> 20:35:10,800
and we're going to create a single now
23822
20:35:08,320 --> 20:35:12,800
singleton pattern in various languages
23823
20:35:10,800 --> 20:35:15,040
i mean it differs from language language
23824
20:35:12,800 --> 20:35:16,872
and dart is not as clean to be honest
23825
20:35:15,039 --> 20:35:19,919
with you in my opinion as it should be
23826
20:35:16,872 --> 20:35:22,240
such as it is in languages such as swift
23827
20:35:19,919 --> 20:35:24,551
um but it is what it is and we need to
23828
20:35:22,240 --> 20:35:26,552
kind of live with it the way uh it works
23829
20:35:26,551 --> 20:35:30,000
so the way that we do it uh that we make
23830
20:35:30,000 --> 20:35:35,512
class note service a singleton is to go
23831
20:35:38,399 --> 20:35:42,399
constructor for our class so we're going
23832
20:35:47,279 --> 20:35:50,959
and this is just a function name it's
23833
20:35:48,639 --> 20:35:52,551
just a private initializer to this class
23834
20:35:52,551 --> 20:35:55,440
and what we're going to do then is we're
23835
20:35:58,831 --> 20:36:03,599
service so we're creating a shared
23836
20:36:01,360 --> 20:36:05,119
instance and we're going to say notes
23837
20:36:05,119 --> 20:36:08,799
got shared instance so this creates that
23838
20:36:06,800 --> 20:36:10,800
shared instance for us but no one from
23839
20:36:08,800 --> 20:36:12,800
the outside world is going to be able to
23840
20:36:10,800 --> 20:36:15,040
then make a call to these two because
23841
20:36:12,800 --> 20:36:16,800
they are well private so now we're going
23842
20:36:15,039 --> 20:36:18,959
to create a factory constructor we're
23843
20:36:18,960 --> 20:36:22,400
like that and that is going to return a
23844
20:36:21,119 --> 20:36:24,080
shared instance for us so it's just a
23845
20:36:22,399 --> 20:36:26,239
hack to be honest with you in my opinion
23846
20:36:24,080 --> 20:36:28,080
at least it's it's a hacky way of
23847
20:36:26,240 --> 20:36:31,512
creating a singleton but that's the way
23848
20:36:28,080 --> 20:36:31,512
it works in dart at least for now
23849
20:36:31,759 --> 20:36:35,679
all right now we've created our
23850
20:36:32,960 --> 20:36:37,120
singleton so what we can do then is i
23851
20:36:35,679 --> 20:36:38,719
mean we don't have to make any changes
23852
20:36:37,119 --> 20:36:40,720
to this guy to the init state because
23853
20:36:40,720 --> 20:36:45,680
it's constructing node service and we
23854
20:36:43,039 --> 20:36:47,599
have changed that so that anyone who
23855
20:36:45,679 --> 20:36:50,000
calls node service like this is actually
23856
20:36:47,600 --> 20:36:51,832
coming to the factory constructor which
23857
20:36:50,000 --> 20:36:53,512
then in turns returns this shared
23858
20:36:51,831 --> 20:36:55,831
instance which in turn calls this
23859
20:36:53,512 --> 20:36:58,160
private factory and it causes private
23860
20:36:55,831 --> 20:36:59,759
initializer or constructor so it's like
23861
20:36:59,759 --> 20:37:05,360
deep in order to create a singleton
23862
20:37:05,360 --> 20:37:10,479
i mean we could also try to run the
23863
20:37:07,679 --> 20:37:13,759
application while all this is going on
23864
20:37:10,479 --> 20:37:16,159
and i can bring up scr cpy again and if
23865
20:37:13,759 --> 20:37:16,959
it's doing any better bring it up here
23866
20:37:18,000 --> 20:37:22,399
we've done quite a lot of work we've
23867
20:37:19,919 --> 20:37:25,191
laid the groundwork for the next chapter
23868
20:37:22,399 --> 20:37:27,511
so now we have the ability to hook into
23869
20:37:25,191 --> 20:37:29,191
all the notes available in our database
23870
20:37:27,512 --> 20:37:31,279
which is being controlled by a stream
23871
20:37:29,191 --> 20:37:33,599
and a stream controller and we're then
23872
20:37:31,279 --> 20:37:37,440
being able then we're able to display
23873
20:37:33,600 --> 20:37:39,440
those notes on the screen use using this
23874
20:37:37,440 --> 20:37:41,832
stream builder which i'm trying to find
23875
20:37:39,440 --> 20:37:43,600
right now which is right here okay so
23876
20:37:41,831 --> 20:37:45,119
we've done quite a lot of work and well
23877
20:37:43,600 --> 20:37:48,080
done to you for sticking with me
23878
20:37:48,080 --> 20:37:51,831
as is the tradition we are doing in
23879
20:37:50,551 --> 20:37:54,399
every other chapter by the end of
23880
20:37:51,831 --> 20:37:55,831
chapter we commit our work and also tag
23881
20:37:54,399 --> 20:37:57,191
them so let's go ahead and do that i'm
23882
20:37:57,191 --> 20:38:00,720
screen layout a little bit get rid of
23883
20:37:58,720 --> 20:38:03,831
the cr cpy it has been a little bit
23884
20:38:00,720 --> 20:38:05,831
angry with us today this scr cpy
23885
20:38:03,831 --> 20:38:08,159
and here's the screen layout and i'm
23886
20:38:05,831 --> 20:38:11,191
going to increase the font size of it
23887
20:38:08,160 --> 20:38:13,680
and a new shell all right so in the
23888
20:38:11,191 --> 20:38:15,759
previous chapter we uh committed and
23889
20:38:15,759 --> 20:38:20,551
step 11 i believe so if you say git tag
23890
20:38:17,831 --> 20:38:23,279
you can see we have up to step 11. let's
23891
20:38:20,551 --> 20:38:25,360
go ahead and say git status first
23892
20:38:23,279 --> 20:38:26,240
yep some files that have been modified
23893
20:38:26,240 --> 20:38:32,080
add all the files and then we say
23894
20:38:29,512 --> 20:38:34,551
step 12 this time and we push our
23895
20:38:34,551 --> 20:38:38,800
and then we're going to tag our work as
23896
20:38:46,399 --> 20:38:50,551
again uh what we do in the end of every
23897
20:38:48,720 --> 20:38:52,160
chapter is we talked a little bit about
23898
20:38:50,551 --> 20:38:53,119
what we're gonna talk about in the next
23899
20:38:53,119 --> 20:38:56,799
and as the caption indicates we're gonna
23900
20:38:56,800 --> 20:38:59,832
we're done with the basics of the notes
23901
20:38:58,399 --> 20:39:02,079
but we have no data and that's what
23902
20:38:59,831 --> 20:39:04,479
we're gonna fix a remedy in the next
23903
20:39:02,080 --> 20:39:06,639
chapter so we're gonna talk about how we
23904
20:39:04,479 --> 20:39:08,872
allow the user to press a button for
23905
20:39:06,639 --> 20:39:11,119
instance in order to create a new note
23906
20:39:08,872 --> 20:39:14,240
and for that note then to appear in our
23907
20:39:11,119 --> 20:39:15,831
stream builder and display to the user
23908
20:39:15,831 --> 20:39:19,919
maybe you want to take a little break
23909
20:39:17,512 --> 20:39:21,919
some refreshments do that please and
23910
20:39:19,919 --> 20:39:24,080
i'll see you in the next chapter
23911
20:39:21,919 --> 20:39:26,160
hello everyone and welcome to chapter 30
23912
20:39:24,080 --> 20:39:27,919
of this flutter course in the previous
23913
20:39:26,160 --> 20:39:29,919
chapters we've been working quite a lot
23914
20:39:27,919 --> 20:39:31,679
with our database layer and we've also
23915
20:39:29,919 --> 20:39:33,831
been working with the ui in order to
23916
20:39:31,679 --> 20:39:36,399
kind of make sure that we can
23917
20:39:33,831 --> 20:39:38,399
have a list of notes um but as you've
23918
20:39:36,399 --> 20:39:39,919
seen in the previous chapters we don't
23919
20:39:41,831 --> 20:39:45,439
the ability for the user to create these
23920
20:39:43,600 --> 20:39:47,832
notes so starting from this chapter
23921
20:39:45,440 --> 20:39:49,600
we're going to start working on creating
23922
20:39:47,831 --> 20:39:51,191
some sort of user interface in which the
23923
20:39:51,191 --> 20:39:55,039
their notes and those notes will be
23924
20:39:52,872 --> 20:39:56,479
saved then with our quad servers that
23925
20:39:55,039 --> 20:39:59,039
we've created in one of the previous
23926
20:39:59,039 --> 20:40:03,279
before we carry on let's take care of
23927
20:40:01,119 --> 20:40:05,360
one thing at the moment our notes view
23928
20:40:03,279 --> 20:40:07,360
doesn't really have like the proper
23929
20:40:05,360 --> 20:40:10,080
title i'm going to bring the code here
23930
20:40:07,360 --> 20:40:12,720
on the screen so you see it as well
23931
20:40:10,080 --> 20:40:16,160
and i'm going to bring scrcpy you may
23932
20:40:12,720 --> 20:40:18,160
have your simulator or emulator um or an
23933
20:40:16,160 --> 20:40:19,512
actual device on the screen so that's
23934
20:40:19,512 --> 20:40:24,240
let's do some rearrangement here and i'm
23935
20:40:22,320 --> 20:40:27,360
also going to rearrange the screen here
23936
20:40:24,240 --> 20:40:30,160
so you see the code better at the moment
23937
20:40:27,360 --> 20:40:32,240
the ui and the title of our main ui is
23938
20:40:30,160 --> 20:40:34,400
just saying main ui so let's take care
23939
20:40:32,240 --> 20:40:36,320
of that and that's inside notes view
23940
20:40:36,320 --> 20:40:41,440
let's find where we're creating the app
23941
20:40:38,080 --> 20:40:43,040
bar and here we're saying main ui so as
23942
20:40:41,440 --> 20:40:44,800
the caption indicates we're gonna change
23943
20:40:44,800 --> 20:40:50,479
like this and command s hot reload and
23944
20:40:47,119 --> 20:40:54,720
then we can see your notes appear there
23945
20:40:55,759 --> 20:41:00,239
let's now have a look at how we're gonna
23946
20:40:57,679 --> 20:41:02,000
enable a user to create new notes in our
23947
20:41:03,440 --> 20:41:06,320
there are different ways of going about
23948
20:41:04,872 --> 20:41:08,720
doing that there are like some
23949
20:41:06,320 --> 20:41:10,320
applications that will display
23950
20:41:08,720 --> 20:41:12,800
something called a floating action
23951
20:41:10,320 --> 20:41:14,872
button a floating action button is a
23952
20:41:12,800 --> 20:41:17,360
button that appears usually to the
23953
20:41:14,872 --> 20:41:19,680
bottom right of the screen if you have
23954
20:41:17,360 --> 20:41:22,240
languages which are left to right or if
23955
20:41:19,679 --> 20:41:23,599
you have arabic lang like arabic persian
23956
20:41:22,240 --> 20:41:25,512
language like that that you write from
23957
20:41:23,600 --> 20:41:27,920
right to left then that floating action
23958
20:41:25,512 --> 20:41:29,919
button should appear on bottom left so
23959
20:41:27,919 --> 20:41:32,000
it's kind of like a button that appears
23960
20:41:32,000 --> 20:41:37,279
um and usually it's like out of uh out
23961
20:41:34,872 --> 20:41:38,240
of your um out of the way for your main
23962
20:41:38,240 --> 20:41:42,160
uh however it can get sometimes in the
23963
20:41:43,512 --> 20:41:47,440
for instance if you have a list of notes
23964
20:41:45,600 --> 20:41:50,552
and these notes can like their titles
23965
20:41:47,440 --> 20:41:52,160
can go to a few lines of text and then
23966
20:41:50,551 --> 20:41:53,279
you have a floating button that sits
23967
20:41:52,160 --> 20:41:55,360
like at the bottom of the screen it
23968
20:41:53,279 --> 20:41:57,119
could just block some again parts of
23969
20:41:57,119 --> 20:41:59,831
some people don't like floating action
23970
20:41:59,831 --> 20:42:03,360
and floating bar action buttons are
23971
20:42:03,360 --> 20:42:06,639
they usually appear in android
23972
20:42:04,800 --> 20:42:08,720
applications is i think it's it's coming
23973
20:42:06,639 --> 20:42:10,319
from material design from google i could
23974
20:42:08,720 --> 20:42:12,160
be wrong about this but usually you
23975
20:42:10,320 --> 20:42:13,832
don't see them in ios applications and
23976
20:42:12,160 --> 20:42:16,000
since we're developing our application
23977
20:42:13,831 --> 20:42:17,439
to be user friendly for both ios and
23978
20:42:16,000 --> 20:42:19,119
android users we're not going to use
23979
20:42:17,440 --> 20:42:21,279
floating action buttons for now but
23980
20:42:19,119 --> 20:42:22,551
there's just to be clear there's really
23981
20:42:21,279 --> 20:42:24,959
nothing wrong with floating action
23982
20:42:24,960 --> 20:42:30,080
so what we could do is either we could
23983
20:42:27,360 --> 20:42:32,399
go in our menu here where we have log
23984
20:42:30,080 --> 20:42:35,440
out and create a new item in here that
23985
20:42:32,399 --> 20:42:37,039
says for instance a plus or add
23986
20:42:35,440 --> 20:42:39,279
add a new note or something like that
23987
20:42:37,039 --> 20:42:41,759
i'm sorry i'll just add this also
23988
20:42:39,279 --> 20:42:43,759
to uh do not disturb so we could either
23989
20:42:41,759 --> 20:42:46,639
add an item in here that says add note
23990
20:42:43,759 --> 20:42:48,871
something like that or we could go to
23991
20:42:46,639 --> 20:42:49,831
this bar that we have up here our app
23992
20:42:49,831 --> 20:42:54,239
and add a new item just like we have
23993
20:42:54,240 --> 20:42:58,320
dots we could add a new item in there
23994
20:43:00,399 --> 20:43:04,479
then it comes to kind of like preference
23995
20:43:02,160 --> 20:43:06,000
and some sort of reasoning of why we
23996
20:43:06,000 --> 20:43:10,551
the plus button the way we're gonna add
23997
20:43:07,679 --> 20:43:13,191
it and my reasoning behind um
23998
20:43:10,551 --> 20:43:15,360
wanting to put the plus button
23999
20:43:15,360 --> 20:43:20,080
these vertical three dots is that
24000
20:43:17,600 --> 20:43:22,552
adding a new note is pretty much like
24001
20:43:20,080 --> 20:43:24,551
one of the main tasks users would want
24002
20:43:22,551 --> 20:43:27,512
to do in your application's main user
24003
20:43:24,551 --> 20:43:29,679
interface so they either go in here to
24004
20:43:27,512 --> 20:43:31,680
and delete their notes update their
24005
20:43:29,679 --> 20:43:33,119
notes or add a new note so there are
24006
20:43:31,679 --> 20:43:35,119
three things they're going to do
24007
20:43:33,119 --> 20:43:38,551
deleting notes is usually not that
24008
20:43:35,119 --> 20:43:40,551
common so updating notes and adding new
24009
20:43:38,551 --> 20:43:43,191
notes should be like the main actions
24010
20:43:40,551 --> 20:43:45,512
that your users perform in your main uh
24011
20:43:43,191 --> 20:43:47,279
application ui so it should be very
24012
20:43:45,512 --> 20:43:49,512
instantaneous it should just be very
24013
20:43:47,279 --> 20:43:51,600
easy for users to do that so if you put
24014
20:43:51,600 --> 20:43:56,872
beside this these three vertical dots
24015
20:43:54,000 --> 20:43:58,872
then it takes the user just one click to
24016
20:43:56,872 --> 20:44:01,360
go to the new screen in order to create
24017
20:43:58,872 --> 20:44:02,320
a new node however if you put like add
24018
20:44:02,320 --> 20:44:07,760
menu in here then they have to first do
24019
20:44:04,720 --> 20:44:09,831
one tab to go here and then another tab
24020
20:44:07,759 --> 20:44:11,919
in order to create to go to the next
24021
20:44:09,831 --> 20:44:13,039
screen and that's just like one tab
24022
20:44:13,039 --> 20:44:19,511
and that's where we're gonna add a plus
24023
20:44:15,039 --> 20:44:22,159
button beside these three vertical dots
24024
20:44:19,512 --> 20:44:23,760
so before we get started with that let's
24025
20:44:23,759 --> 20:44:27,759
do some preparation for that so we need
24026
20:44:25,679 --> 20:44:29,511
a widget and which is going to be our
24027
20:44:27,759 --> 20:44:32,080
new notes view and as you can see we're
24028
20:44:29,512 --> 20:44:35,600
going to create a new file for it inside
24029
20:44:32,080 --> 20:44:38,872
lib views notes which is a new folder i
24030
20:44:35,600 --> 20:44:40,552
believe which we haven't had from before
24031
20:44:38,872 --> 20:44:42,800
let's go in here we have views as you
24032
20:44:40,551 --> 20:44:44,872
can see and we don't have a folder
24033
20:44:44,872 --> 20:44:49,760
in views what we're going to create now
24034
20:44:47,039 --> 20:44:51,511
is this dart file new node view so i'm
24035
20:44:49,759 --> 20:44:53,039
just going to right click on it and say
24036
20:44:51,512 --> 20:44:55,119
here i'm going to say a folder called
24037
20:44:55,119 --> 20:45:00,479
and i'm going to say new notes view dot
24038
20:44:57,440 --> 20:45:01,832
dart okay so that's that file already
24039
20:45:00,479 --> 20:45:04,080
we're not going to do anything in that
24040
20:45:06,639 --> 20:45:11,831
notes folder under views it just makes
24041
20:45:09,679 --> 20:45:13,759
sense to move our notes view here as
24042
20:45:11,831 --> 20:45:16,551
well which is at the moment sitting
24043
20:45:13,759 --> 20:45:19,439
under views you can see the breadcrumb
24044
20:45:16,551 --> 20:45:21,440
here says lib views notes view it makes
24045
20:45:19,440 --> 20:45:24,639
sense now to move this notes view which
24046
20:45:21,440 --> 20:45:26,960
is the list of our notes into this notes
24047
20:45:24,639 --> 20:45:29,512
folder as well so i'm going to need you
24048
20:45:26,960 --> 20:45:32,832
to just drag that file and place it
24049
20:45:37,360 --> 20:45:40,479
excuse me so we've done that now
24050
20:45:40,479 --> 20:45:44,080
now what you may have noticed if i bring
24051
20:45:44,080 --> 20:45:47,040
list a little bit higher now that we've
24052
20:45:47,039 --> 20:45:50,079
also let's just make sure we haven't
24053
20:45:51,191 --> 20:45:55,512
notes view oh i see that's that's really
24054
20:45:53,039 --> 20:45:56,799
great because by dragging the notes view
24055
20:45:56,800 --> 20:46:02,080
the notes folder visual studio was
24056
20:45:58,720 --> 20:46:03,680
intelligent enough to refactor also all
24057
20:46:02,080 --> 20:46:06,479
the imports that we're referring to
24058
20:46:03,679 --> 20:46:07,831
notes view so your editor of choice like
24059
20:46:06,479 --> 20:46:10,720
if you're using sublime or if you're
24060
20:46:07,831 --> 20:46:12,080
using some vim for instance it may not
24061
20:46:10,720 --> 20:46:14,551
be able to automatically take care of
24062
20:46:12,080 --> 20:46:16,639
that so by you moving your notes view
24063
20:46:14,551 --> 20:46:19,512
inside the notes folder depending on how
24064
20:46:16,639 --> 20:46:21,279
you do it you may need to fix your
24065
20:46:21,279 --> 20:46:25,759
if you search for nodesview. let's have
24066
20:46:25,759 --> 20:46:30,720
i can see the only place it was imported
24067
20:46:27,679 --> 20:46:32,871
it was the main.dart file so you will
24068
20:46:30,720 --> 20:46:34,551
you might need to go and fix that import
24069
20:46:32,872 --> 20:46:38,320
in there okay so if you're getting an
24070
20:46:34,551 --> 20:46:39,440
error for your imports then you know why
24071
20:46:39,440 --> 20:46:43,512
that's that's moving our notes you
24072
20:46:42,000 --> 20:46:46,000
now if you've noticed if you go back to
24073
20:46:43,512 --> 20:46:47,919
the editor here you'll you probably have
24074
20:46:46,000 --> 20:46:49,679
noticed that we have some red files in
24075
20:46:53,679 --> 20:46:58,159
an email field to our auth user so if
24076
20:46:56,551 --> 20:47:00,720
you go in here you can see that we added
24077
20:46:58,160 --> 20:47:02,400
this email field in our auth user in one
24078
20:47:06,000 --> 20:47:10,320
nodes for a specific auth user from our
24079
20:47:10,320 --> 20:47:14,640
so after adding that now we've broken
24080
20:47:12,872 --> 20:47:17,832
our tests and we haven't really had the
24081
20:47:18,720 --> 20:47:23,512
let's have a look at how we can fix our
24082
20:47:20,800 --> 20:47:26,872
test if we if you dr uh scroll down a
24083
20:47:23,512 --> 20:47:29,119
little bit in our tests file you will
24084
20:47:26,872 --> 20:47:31,832
notice where we've broken the test and
24085
20:47:29,119 --> 20:47:35,119
this is here we're in two places where
24086
20:47:31,831 --> 20:47:37,119
we're creating an off user okay here
24087
20:47:35,119 --> 20:47:39,191
and the way we're working with this off
24088
20:47:37,119 --> 20:47:41,831
user in our test is not really something
24089
20:47:39,191 --> 20:47:44,000
that we're writing tests for later like
24090
20:47:41,831 --> 20:47:45,360
we're not actually creating an off user
24091
20:47:45,360 --> 20:47:50,639
doing a test against the off users email
24092
20:47:48,320 --> 20:47:52,800
so it's at the moment it's pretty much
24093
20:47:50,639 --> 20:47:55,279
just decoration in that we need to just
24094
20:47:52,800 --> 20:47:57,600
make sure that our tests compile and
24095
20:47:55,279 --> 20:47:59,759
that we don't have a compilation error
24096
20:47:57,600 --> 20:48:01,440
here so let's go and see if visual
24097
20:47:59,759 --> 20:48:03,119
studio code can help us with that so i'm
24098
20:48:01,440 --> 20:48:04,800
just going to do command dot on mac or
24099
20:48:03,119 --> 20:48:07,679
control dot on windows and linux and say
24100
20:48:04,800 --> 20:48:09,919
add required argument eval and for email
24101
20:48:07,679 --> 20:48:12,079
you could just say fooatbar.com so that
24102
20:48:09,919 --> 20:48:13,831
doesn't matter so much and a comma at
24103
20:48:12,080 --> 20:48:16,551
the end to get dark formatter to format
24104
20:48:16,551 --> 20:48:20,159
and then excuse me gonna get help from
24105
20:48:18,479 --> 20:48:22,159
visual studio code again and say add
24106
20:48:20,160 --> 20:48:24,552
record argument email and again we're
24107
20:48:29,360 --> 20:48:32,240
so as you can see in the caption also we
24108
20:48:31,119 --> 20:48:33,679
just need to make sure that we're
24109
20:48:32,240 --> 20:48:35,680
running our tests and making sure that
24110
20:48:33,679 --> 20:48:38,479
we haven't broken anything so let's go
24111
20:48:35,679 --> 20:48:40,479
to our tests in here and see if i
24112
20:48:38,479 --> 20:48:42,479
if i can bring this up a little bit
24113
20:48:40,479 --> 20:48:44,399
change the screen layout so you see what
24114
20:48:44,399 --> 20:48:48,799
increase the size of the screen and i'm
24115
20:48:46,639 --> 20:48:50,399
going to search for flutter test and
24116
20:48:48,800 --> 20:48:52,400
that's the line the command that you
24117
20:48:50,399 --> 20:48:55,039
also have to type as the caption at the
24118
20:48:52,399 --> 20:48:57,191
bottom of the screen indicates as well
24119
20:48:55,039 --> 20:48:59,439
and let's just run our tests and see
24120
20:48:57,191 --> 20:49:00,639
what we get for results if we've done
24121
20:48:59,440 --> 20:49:02,160
everything correctly we shouldn't have
24122
20:49:00,639 --> 20:49:04,319
any problems with our tests at the
24123
20:49:04,320 --> 20:49:08,640
but you may have like diverged from the
24124
20:49:06,320 --> 20:49:11,280
course uh for a good reason and written
24125
20:49:08,639 --> 20:49:13,759
more tests and you may then have to fix
24126
20:49:11,279 --> 20:49:15,440
those tests as well and i highly
24127
20:49:15,440 --> 20:49:19,832
watchers whoever's watching this course
24128
20:49:16,960 --> 20:49:21,832
to actually do as many tests as possible
24129
20:49:19,831 --> 20:49:23,919
experiment with widget test integration
24130
20:49:21,831 --> 20:49:26,399
tests and unit tests as much as you can
24131
20:49:27,440 --> 20:49:31,832
all right so that's that now let's go
24132
20:49:30,000 --> 20:49:33,759
ahead and change the screen layout we've
24133
20:49:31,831 --> 20:49:35,831
taken care of our tests now and you can
24134
20:49:35,831 --> 20:49:42,000
tests have passed and also we don't have
24135
20:49:38,872 --> 20:49:45,360
any more red flags inside our
24136
20:49:45,679 --> 20:49:48,799
all right so what we need to do now you
24137
20:49:48,800 --> 20:49:54,479
when we then add a plus button to our
24138
20:49:57,279 --> 20:50:00,479
i believe we created it here new note
24139
20:50:00,479 --> 20:50:05,831
we need to define a round for it we've
24140
20:50:07,440 --> 20:50:12,240
all our other routes so if we have a
24141
20:50:09,360 --> 20:50:13,119
look at our um let's see if we can find
24142
20:50:15,119 --> 20:50:18,799
we have verified email routes we have
24143
20:50:17,039 --> 20:50:19,831
nodes route register route and all of
24144
20:50:19,831 --> 20:50:23,360
so i'm just going to have a look at my
24145
20:50:21,512 --> 20:50:25,040
notes and make sure that we define our
24146
20:50:26,320 --> 20:50:30,320
so let's go and call this new route and
24147
20:50:30,320 --> 20:50:33,440
note route and we're just going to say
24148
20:50:38,551 --> 20:50:43,599
and remember this doesn't really mean
24149
20:50:45,279 --> 20:50:49,360
except for you to handle like your route
24150
20:50:49,360 --> 20:50:54,720
if you had like notes with a z it would
24151
20:50:53,039 --> 20:50:56,479
also work as long as you're using the
24152
20:50:56,479 --> 20:51:00,959
so don't think that this is like bound
24153
20:51:00,960 --> 20:51:04,639
file finding a mechanism in flutter it
24154
20:51:03,512 --> 20:51:06,479
has nothing to do with that it's just
24155
20:51:04,639 --> 20:51:09,039
for you to define your route name so you
24156
20:51:06,479 --> 20:51:10,959
could literally just say fu in here and
24157
20:51:09,039 --> 20:51:12,399
as long as you use this route name
24158
20:51:10,960 --> 20:51:14,160
everywhere everything's just gonna work
24159
20:51:15,512 --> 20:51:20,000
that's our new note route created inside
24160
20:51:22,551 --> 20:51:26,159
as the notes indicate as the caption on
24161
20:51:24,160 --> 20:51:28,320
the screen indicates we have to go to
24162
20:51:28,320 --> 20:51:32,960
and we need to then go and define that
24163
20:51:32,960 --> 20:51:37,360
okay so we have login route register
24164
20:51:35,360 --> 20:51:39,191
route notes route verify email route and
24165
20:51:37,360 --> 20:51:41,759
then we have to define this new route
24166
20:51:39,191 --> 20:51:43,919
which is called new node route okay
24167
20:51:41,759 --> 20:51:46,959
so let's just let's just say new node
24168
20:51:43,919 --> 20:51:48,240
route it takes a build context in here
24169
20:51:46,960 --> 20:51:49,760
we could just ignore that with an
24170
20:51:48,240 --> 20:51:51,512
underscore if you want to i'm not doing
24171
20:51:49,759 --> 20:51:54,000
that and then we're going to create a
24172
20:51:56,800 --> 20:52:02,551
sorry a new node view um but we don't
24173
20:51:59,440 --> 20:52:05,119
have that yet so let's go and define the
24174
20:52:05,119 --> 20:52:09,679
but for now i'm just going to say const
24175
20:52:07,119 --> 20:52:11,279
new node view like this and this is not
24176
20:52:11,279 --> 20:52:14,872
because we don't have that view set up
24177
20:52:12,960 --> 20:52:16,400
yet we've just created the file for it
24178
20:52:16,399 --> 20:52:21,191
so i'm going to close some files which
24179
20:52:18,320 --> 20:52:23,760
we don't need and let's go into our new
24180
20:52:24,320 --> 20:52:28,960
and as the caption indicates we're going
24181
20:52:25,831 --> 20:52:32,799
to create a stateful widget called new
24182
20:52:28,960 --> 20:52:35,120
note view so i'm going to use a flutter
24183
20:52:32,800 --> 20:52:37,600
sorry visual studio codes and stateful
24184
20:52:37,600 --> 20:52:41,440
and i'm going to call it new notes view
24185
20:52:41,440 --> 20:52:45,512
and we're going to get some errors and
24186
20:52:43,600 --> 20:52:47,760
you know already that's because we have
24187
20:52:45,512 --> 20:52:48,872
an imported material dot dart so i'm
24188
20:52:47,759 --> 20:52:50,159
going to get help from visual studio
24189
20:52:50,160 --> 20:52:53,440
on mac or control dot on linux and
24190
20:52:51,679 --> 20:52:54,719
windows and say import material
24191
20:52:53,440 --> 20:52:57,279
and all those errors are going to go
24192
20:52:57,279 --> 20:53:03,831
so now we have our new node view
24193
20:53:04,160 --> 20:53:09,360
so let's then inside this new note view
24194
20:53:06,720 --> 20:53:12,080
go creates a simple scaffold so
24195
20:53:09,360 --> 20:53:14,320
i'm going to say we have a scaffold
24196
20:53:12,080 --> 20:53:17,191
and inside our scaffold we have an app
24197
20:53:14,320 --> 20:53:19,360
bar and we're going to say avbar
24198
20:53:17,191 --> 20:53:22,319
and an app bar has a title and in here
24199
20:53:19,360 --> 20:53:23,600
we're just going to say cons text
24200
20:53:26,080 --> 20:53:31,119
and for the body of this scaffold we're
24201
20:53:31,119 --> 20:53:40,000
const of text that says write your new
24202
20:53:36,320 --> 20:53:42,240
note here something like this okay
24203
20:53:40,000 --> 20:53:43,759
so this is a very simple stateful widget
24204
20:53:42,240 --> 20:53:45,680
at the moment i mean it's not even
24205
20:53:43,759 --> 20:53:47,511
stateful it and what it's doing right
24206
20:53:45,679 --> 20:53:49,191
now is it could pretty much be achieved
24207
20:53:47,512 --> 20:53:50,720
with a stateless widget but in the in
24208
20:53:49,191 --> 20:53:52,959
the next chapters we're going to add
24209
20:53:50,720 --> 20:53:54,872
more and more logic to this view so it
24210
20:53:52,960 --> 20:53:57,440
needs to be a stateful widget for it to
24211
20:53:54,872 --> 20:54:01,040
be able to work in the future as well
24212
20:53:57,440 --> 20:54:04,080
and for what we have planned for it okay
24213
20:54:01,039 --> 20:54:06,479
excuse me so now that we have this ma
24214
20:54:04,080 --> 20:54:09,119
new note view let's go ahead in here
24215
20:54:06,479 --> 20:54:11,279
back to our main dart and get help from
24216
20:54:09,119 --> 20:54:13,599
visual studio code to import that file
24217
20:54:11,279 --> 20:54:16,639
for us so i'm just gonna say import and
24218
20:54:13,600 --> 20:54:18,720
you'll see it will be a new import
24219
20:54:16,639 --> 20:54:20,479
right here on line five for me maybe
24220
20:54:20,479 --> 20:54:24,551
so let's import a new node view and it
24221
20:54:22,720 --> 20:54:27,759
allows us to basically define a route
24222
20:54:24,551 --> 20:54:28,639
i'm just to say command s and just to be
24223
20:54:28,639 --> 20:54:33,039
since actually not to be sure we are we
24224
20:54:30,960 --> 20:54:36,080
are 100 certain that the changes in our
24225
20:54:38,960 --> 20:54:42,800
into consideration when we do a hot
24226
20:54:41,039 --> 20:54:45,039
reload we have to do hot restart for
24227
20:54:42,800 --> 20:54:48,000
these changes to take effect so let's do
24228
20:54:48,960 --> 20:54:53,680
okay and for some reason i can actually
24229
20:54:51,191 --> 20:54:56,319
see my scr cpy has now crashed again
24230
20:54:53,679 --> 20:54:57,599
it's a bit flaky that's okay i i'm not
24231
20:54:59,919 --> 20:55:03,512
an open source project to be honest with
24232
20:55:01,759 --> 20:55:06,000
you and i can see i actually have lost
24233
20:55:03,512 --> 20:55:07,600
my connection from flutter as well to
24234
20:55:07,600 --> 20:55:13,600
let me run that code now in scrcpy on my
24235
20:55:14,720 --> 20:55:18,960
also going to ensure that my android
24236
20:55:18,960 --> 20:55:24,480
as well so turn wi-fi on on my phone and
24237
20:55:22,240 --> 20:55:28,160
i'm going to go back here to the main
24238
20:55:24,479 --> 20:55:30,000
interface so while this is all compiling
24239
20:55:28,160 --> 20:55:31,512
let's go to the next step that we have
24240
20:55:30,000 --> 20:55:33,759
to take care of which is actually
24241
20:55:35,600 --> 20:55:43,360
so which is actually displaying
24242
20:55:38,960 --> 20:55:44,960
um this new note view all right
24243
20:55:43,360 --> 20:55:47,279
as a caption indicates we need to go to
24244
20:55:44,960 --> 20:55:50,720
the notes view and on press of the icon
24245
20:55:47,279 --> 20:55:52,240
button show the new notes view so
24246
20:55:50,720 --> 20:55:55,279
i'm going to go to my notes as well go
24247
20:56:04,479 --> 20:56:09,512
uh notes view so let's go ahead and
24248
20:56:07,600 --> 20:56:11,832
go there we'll have a look at how our
24249
20:56:09,512 --> 20:56:13,919
note2 is structured at the moment as you
24250
20:56:11,831 --> 20:56:16,479
can see right now we have an array of
24251
20:56:13,919 --> 20:56:18,959
actions which just for now it has a
24252
20:56:18,960 --> 20:56:23,040
excuse me and we need to add a new icon
24253
20:56:21,440 --> 20:56:24,960
button in there so let's go ahead and
24254
20:56:24,960 --> 20:56:30,160
an icon button has to have an icon and
24255
20:56:27,440 --> 20:56:32,080
an on press so let's say unpressed so
24256
20:56:30,160 --> 20:56:34,240
remember this is going to be our plus
24257
20:56:34,240 --> 20:56:39,440
so that's our on press and for the icon
24258
20:56:36,872 --> 20:56:41,680
we're just going to say const icon
24259
20:56:39,440 --> 20:56:43,279
and then we're going to say icons add
24260
20:56:41,679 --> 20:56:45,919
and as you can see i believe that your
24261
20:56:43,279 --> 20:56:47,360
studio code was able to show your icons
24262
20:56:45,919 --> 20:56:49,279
right in line as well so you can see
24263
20:56:47,360 --> 20:56:51,191
here that's how the button is going to
24264
20:56:49,279 --> 20:56:52,240
look like which is a plus button all
24265
20:56:52,240 --> 20:56:56,400
and a comma here to get that working so
24266
20:56:54,000 --> 20:56:58,872
if i do command s in here now we should
24267
20:56:56,399 --> 20:57:00,551
see a plus button after hot reload all
24268
20:56:58,872 --> 20:57:02,080
right so but that button isn't doing
24269
20:57:00,551 --> 20:57:04,080
anything because it's unpressed it's
24270
20:57:04,080 --> 20:57:07,680
so what we need to do is just to say uh
24271
20:57:07,679 --> 20:57:13,599
of our context or build context and
24272
20:57:10,639 --> 20:57:15,831
we're just going to push a route called
24273
20:57:16,800 --> 20:57:19,680
so that's all you have to add a comma
24274
20:57:18,240 --> 20:57:22,160
here just to get the code formatting
24275
20:57:22,160 --> 20:57:25,832
so let's let's actually test this and
24276
20:57:24,479 --> 20:57:28,080
see if it works so i'm going to press
24277
20:57:25,831 --> 20:57:30,239
the plus button in here and you can see
24278
20:57:28,080 --> 20:57:32,080
our new node route is being displayed on
24279
20:57:30,240 --> 20:57:33,440
the screen with the little text that we
24280
20:57:33,440 --> 20:57:37,440
that says write your new node here right
24281
20:57:35,919 --> 20:57:39,360
and pressing the back button will then
24282
20:57:37,440 --> 20:57:41,119
send us back to the main ui of the
24283
20:57:39,360 --> 20:57:43,512
application and you may have noticed
24284
20:57:41,119 --> 20:57:46,239
that in the notes view i didn't say push
24285
20:57:43,512 --> 20:57:48,080
name and remove until and that's because
24286
20:57:46,240 --> 20:57:50,480
when you press the plus button in order
24287
20:57:48,080 --> 20:57:52,320
to create a new note you want the user
24288
20:57:50,479 --> 20:57:53,831
to be able to get back to the main ui of
24289
20:57:52,320 --> 20:57:54,960
the application whenever they need to
24290
20:57:54,960 --> 20:58:00,639
is facility facilitating this back
24291
20:58:00,639 --> 20:58:04,800
all right that was great stuff and that
24292
20:58:02,399 --> 20:58:06,079
is pretty much all we had to do for this
24293
20:58:06,080 --> 20:58:10,400
so a short chapter is kind of refreshing
24294
20:58:08,080 --> 20:58:12,320
to be honest with you if you ask me so
24295
20:58:12,320 --> 20:58:18,160
as is tradition let's commit our work so
24296
20:58:16,080 --> 20:58:20,000
that we can get ready for the next
24297
20:58:18,160 --> 20:58:22,080
chapter i'm gonna change the screen
24298
20:58:22,080 --> 20:58:27,279
oops um let's go in here change the
24299
20:58:27,279 --> 20:58:32,240
and let me bring up the terminal and
24300
20:58:29,919 --> 20:58:34,160
increase the size of the screen so i see
24301
20:58:34,160 --> 20:58:38,960
so we're going to have a look at our git
24302
20:58:36,240 --> 20:58:41,600
status and i can see there's a whole new
24303
20:58:38,960 --> 20:58:43,120
folder in here called lib views notes
24304
20:58:43,119 --> 20:58:47,919
files under there which is our notes
24305
20:58:45,440 --> 20:58:50,000
view and new notes view so let's just
24306
20:58:50,000 --> 20:58:53,759
and have a look at our status here you
24307
20:58:53,759 --> 20:58:57,599
mentioned there i'm going to get rid of
24308
20:58:55,679 --> 20:58:59,039
this make it a little bit bigger so you
24309
20:58:59,039 --> 20:59:02,551
so what we need to do is just to commit
24310
20:59:01,039 --> 20:59:04,871
this first and we're going to say step
24311
20:59:04,872 --> 20:59:08,551
i believe so at least so let's have a
24312
20:59:06,399 --> 20:59:11,360
look at our logs yeah step 12 was the
24313
20:59:08,551 --> 20:59:14,319
last chapter so we're going to say
24314
20:59:14,320 --> 20:59:18,000
and i'm gonna push now our commits to
24315
20:59:18,000 --> 20:59:23,600
and then we're going to say good tag
24316
20:59:27,512 --> 20:59:32,000
so that's for our tagging as well so if
24317
20:59:30,000 --> 20:59:34,080
i say tag now we can see all the tags
24318
20:59:32,000 --> 20:59:35,039
that we've created so far 13 of them all
24319
20:59:35,039 --> 20:59:40,159
so that's pretty much what we had to do
24320
20:59:40,160 --> 20:59:44,080
now as again is a tradition for every
24321
20:59:42,551 --> 20:59:45,360
chapter of this flood of course i
24322
20:59:44,080 --> 20:59:46,872
usually talk about what we need to do in
24323
20:59:45,360 --> 20:59:49,039
the next chapter so we can get right get
24324
20:59:46,872 --> 20:59:51,040
ready for that chapter as well in the
24325
20:59:49,039 --> 20:59:52,319
next chapter now that we have our new
24326
20:59:52,320 --> 20:59:57,192
we are going to work with adding the
24327
20:59:54,080 --> 20:59:59,831
logic to new note view so that we can
24328
20:59:57,191 --> 21:00:02,239
actually insert new notes into our
24329
20:59:59,831 --> 21:00:03,511
database so that we can start
24330
21:00:03,512 --> 21:00:07,919
those notes so next chapter is going to
24331
21:00:05,679 --> 21:00:10,079
be a bit of a heavy chapter code wise
24332
21:00:10,080 --> 21:00:14,240
if you want to grab some refreshments be
24333
21:00:12,080 --> 21:00:16,639
my guest please go ahead and do that and
24334
21:00:14,240 --> 21:00:18,720
i'll see you in the next chapter hello
24335
21:00:16,639 --> 21:00:20,551
everyone and welcome to chapter 31 of
24336
21:00:18,720 --> 21:00:22,240
this flutter course in the previous
24337
21:00:20,551 --> 21:00:24,872
chapter we did some preparation work in
24338
21:00:22,240 --> 21:00:26,800
order to create our new note view
24339
21:00:24,872 --> 21:00:29,120
and we've tagged everything everything
24340
21:00:26,800 --> 21:00:31,192
is ready it's just that we created our
24341
21:00:29,119 --> 21:00:33,279
new note view as a stateful widget which
24342
21:00:31,191 --> 21:00:35,919
has pretty much no logic it had a simple
24343
21:00:33,279 --> 21:00:38,399
scaffold with an app bar and a simple
24344
21:00:35,919 --> 21:00:39,919
text displayed on the screen so
24345
21:00:41,600 --> 21:00:45,832
make sure that the user is not only able
24346
21:00:45,831 --> 21:00:50,799
or sorry the new note view but also he
24347
21:00:48,320 --> 21:00:53,600
or she is able to create an actual note
24348
21:00:58,399 --> 21:01:01,439
we have quite a lot of work to do these
24349
21:00:59,919 --> 21:01:02,720
chapters as i mentioned in the previous
24350
21:01:01,440 --> 21:01:04,872
chapter at the end of the previous
24351
21:01:02,720 --> 21:01:06,872
chapter this chapter is kind of quite
24352
21:01:06,872 --> 21:01:10,479
uh but i'm gonna make sure to take you
24353
21:01:08,960 --> 21:01:12,240
through all the code that we're gonna
24354
21:01:10,479 --> 21:01:13,831
write step by step so you don't miss
24355
21:01:13,831 --> 21:01:19,279
um before we get started we need to fix
24356
21:01:16,320 --> 21:01:21,680
something in our um notes view and that
24357
21:01:19,279 --> 21:01:24,399
is to ensure that we're listening to
24358
21:01:21,679 --> 21:01:28,159
both the active state of our all nodes
24359
21:01:24,399 --> 21:01:29,919
stream plus the waiting and be i mean
24360
21:01:28,160 --> 21:01:32,240
without us having to actually without me
24361
21:01:32,240 --> 21:01:36,000
in abstract terms let me bring up the
24362
21:01:34,000 --> 21:01:39,600
code and have a look at what we've done
24363
21:01:36,000 --> 21:01:40,720
um and how we can make it better
24364
21:01:40,720 --> 21:01:45,191
let me change the screen layout
24365
21:01:42,960 --> 21:01:47,680
so you see the code better let's go to
24366
21:01:45,191 --> 21:01:48,551
our notes view in here and you can see
24367
21:01:48,551 --> 21:01:53,512
in in the actual body of our notes we
24368
21:01:50,960 --> 21:01:55,832
have the future builder where we get or
24369
21:01:53,512 --> 21:01:57,760
create a user with an email address
24370
21:01:55,831 --> 21:02:00,000
and which you'll soon actually see why
24371
21:01:57,759 --> 21:02:01,831
we're doing this and also we have this
24372
21:02:00,000 --> 21:02:04,479
this part which says switch connection
24373
21:02:01,831 --> 21:02:06,720
state waiting and then in here says
24374
21:02:04,479 --> 21:02:09,119
waiting for all notes the plan for us is
24375
21:02:06,720 --> 21:02:11,360
to in the future soon actually in the
24376
21:02:09,119 --> 21:02:13,191
near future to display all the notes
24377
21:02:11,360 --> 21:02:15,600
that the user has created in this user
24378
21:02:13,191 --> 21:02:17,279
interface however right now we're only
24379
21:02:15,600 --> 21:02:18,480
listening for the connection state
24380
21:02:18,479 --> 21:02:21,831
and if you look at the document
24381
21:02:20,240 --> 21:02:23,360
documentation for waiting it says
24382
21:02:21,831 --> 21:02:25,511
connected to an asynchronous computation
24383
21:02:23,360 --> 21:02:27,680
i'm waiting interaction however if you
24384
21:02:25,512 --> 21:02:30,160
look at the active it says connected to
24385
21:02:27,679 --> 21:02:32,639
an active asynchronous computation that
24386
21:02:30,160 --> 21:02:34,240
ha and that stream has returned at least
24387
21:02:34,240 --> 21:02:38,639
now we have if you look at our stream is
24388
21:02:36,399 --> 21:02:40,720
a stream of all notes so this all notes
24389
21:02:38,639 --> 21:02:42,551
can either be empty in the beginning or
24390
21:02:40,720 --> 21:02:45,191
it could contain some notes let's go
24391
21:02:42,551 --> 21:02:46,800
with the stream being empty
24392
21:02:45,191 --> 21:02:48,639
when the stream is empty meaning that
24393
21:02:46,800 --> 21:02:50,080
the user hasn't created any notes yet
24394
21:02:48,639 --> 21:02:52,080
that have been populated in a note
24395
21:02:50,080 --> 21:02:54,639
service then the connection state of
24396
21:02:52,080 --> 21:02:57,831
that stream will be waiting because dart
24397
21:02:54,639 --> 21:03:00,399
is now waiting for that stream to return
24398
21:02:57,831 --> 21:03:01,919
the first value so that's great and
24399
21:03:00,399 --> 21:03:03,599
we're saying okay if that's the case
24400
21:03:01,919 --> 21:03:06,160
then return this but as soon as the
24401
21:03:03,600 --> 21:03:08,400
stream contains one value or as soon as
24402
21:03:06,160 --> 21:03:10,480
the stream actually returns one value
24403
21:03:08,399 --> 21:03:12,399
then its connection state is going to be
24404
21:03:10,479 --> 21:03:14,720
active and what we've done is just we
24405
21:03:12,399 --> 21:03:16,319
waited for waiting state but as soon as
24406
21:03:14,720 --> 21:03:18,240
it goes to active then we're showing a
24407
21:03:16,320 --> 21:03:21,120
circular progress indicator and that's
24408
21:03:18,240 --> 21:03:23,600
not the not not the right logic so
24409
21:03:21,119 --> 21:03:26,080
we need to fix that so let's go to our
24410
21:03:23,600 --> 21:03:27,600
notes view and right after this waiting
24411
21:03:35,279 --> 21:03:40,160
writing two cases right after each other
24412
21:03:37,440 --> 21:03:41,600
it's an implicit fall through as i like
24413
21:03:40,160 --> 21:03:43,512
to call it some language is called a
24414
21:03:41,600 --> 21:03:46,800
follow-through for instance swift
24415
21:03:43,512 --> 21:03:49,040
meaning that a case has no logic and is
24416
21:03:46,800 --> 21:03:50,639
literally falling through to the next
24417
21:03:49,039 --> 21:03:53,360
case so you don't have any break
24418
21:03:50,639 --> 21:03:55,191
statements here in here okay
24419
21:03:53,360 --> 21:03:57,191
so this is a follow through implicit
24420
21:03:57,191 --> 21:04:01,039
meaning that in both waiting and active
24421
21:03:59,039 --> 21:04:02,871
states then we're showing this text and
24422
21:04:01,039 --> 21:04:05,119
if you command s then you're not going
24423
21:04:02,872 --> 21:04:07,760
to see any difference in the running of
24424
21:04:05,119 --> 21:04:09,191
your application it's just that we fixed
24425
21:04:11,679 --> 21:04:17,191
all right now to the exciting parts and
24426
21:04:14,551 --> 21:04:18,800
i'm gonna bring new notes view to
24427
21:04:17,191 --> 21:04:20,479
here just gonna reorganize it you don't
24428
21:04:18,800 --> 21:04:22,639
have to do that but you need to now go
24429
21:04:22,639 --> 21:04:26,960
new node view dart file because this is
24430
21:04:24,800 --> 21:04:29,120
where we're gonna work on for pretty
24431
21:04:26,960 --> 21:04:30,160
much the majority of this chapter now
24432
21:04:30,160 --> 21:04:34,552
so what we're going to do in this new
24433
21:04:31,512 --> 21:04:36,872
note view upon coming to the screen we
24434
21:04:34,551 --> 21:04:39,191
are actually going to create a new note
24435
21:04:36,872 --> 21:04:42,080
for you okay and we're going to keep
24436
21:04:39,191 --> 21:04:43,599
hold of that new note and creating a new
24437
21:04:42,080 --> 21:04:45,831
node if you remember from our node
24438
21:04:45,831 --> 21:04:49,919
utilities we have crowd here and we have
24439
21:04:47,759 --> 21:04:51,360
node service and then we have a lot of
24440
21:04:49,919 --> 21:04:54,000
functions in here at least let's see if
24441
21:04:51,360 --> 21:04:56,800
we can find the create node view sorry
24442
21:04:54,000 --> 21:04:59,679
the create node function here you can
24443
21:04:56,800 --> 21:05:01,832
see it's a future so we cannot
24444
21:04:59,679 --> 21:05:05,439
immediately get get a result from this
24445
21:05:01,831 --> 21:05:09,191
create new node so the goal for our new
24446
21:05:05,440 --> 21:05:11,832
node view here is to use future builder
24447
21:05:09,191 --> 21:05:13,512
inside the body of this function
24448
21:05:11,831 --> 21:05:15,831
so inside the body of this function
24449
21:05:13,512 --> 21:05:18,160
we're going to say as soon as this
24450
21:05:15,831 --> 21:05:20,799
new node view state has been created
24451
21:05:18,160 --> 21:05:23,192
then it also needs to create a new node
24452
21:05:20,800 --> 21:05:25,919
in the database however remember with
24453
21:05:23,191 --> 21:05:28,080
flutter we have hot reload meaning that
24454
21:05:25,919 --> 21:05:30,800
as you're on that view and you're
24455
21:05:28,080 --> 21:05:32,400
editing your text and blah blah you may
24456
21:05:30,800 --> 21:05:33,832
change your code a little bit and then
24457
21:05:33,831 --> 21:05:38,720
pressing command s is just going to call
24458
21:05:35,600 --> 21:05:42,080
your build function again so if you then
24459
21:05:38,720 --> 21:05:44,399
inside your build functions um scaffold
24460
21:05:42,080 --> 21:05:46,960
body and you have a future builder which
24461
21:05:44,399 --> 21:05:48,639
in turn creates a new note that function
24462
21:05:46,960 --> 21:05:50,160
is gonna go gonna get called again
24463
21:05:48,639 --> 21:05:52,639
meaning that every time you do hot
24464
21:05:50,160 --> 21:05:54,872
reload while you're on that view a new
24465
21:05:54,872 --> 21:05:59,279
and for that we as the caption indicates
24466
21:05:57,440 --> 21:06:02,320
we need to keep hold of a variable
24467
21:05:59,279 --> 21:06:04,240
called notes so that we don't recreate
24468
21:06:02,320 --> 21:06:07,040
it every time the build function gets
24469
21:06:04,240 --> 21:06:08,160
called alright so let's go ahead and do
24470
21:06:12,800 --> 21:06:18,080
let's go and define and say database
24471
21:06:18,080 --> 21:06:21,512
and we're just going to say notes like
24472
21:06:21,512 --> 21:06:27,191
also we just make it optional because it
24473
21:06:27,919 --> 21:06:35,119
okay and what also what we also need is
24474
21:06:31,440 --> 21:06:36,639
to keep hold of our note service um and
24475
21:06:35,119 --> 21:06:38,479
as you saw in the previous chapters we
24476
21:06:36,639 --> 21:06:39,919
created node server as a singleton but
24477
21:06:38,479 --> 21:06:43,119
also you'd be really good if you didn't
24478
21:06:39,919 --> 21:06:44,959
have to call this a factory uh function
24479
21:06:43,119 --> 21:06:46,399
for the singleton over and over again
24480
21:06:44,960 --> 21:06:47,832
whenever we're working with node servers
24481
21:06:46,399 --> 21:06:50,720
so we're gonna also keep hold of our
24482
21:06:47,831 --> 21:06:51,759
node service as a late final variable
24483
21:06:51,759 --> 21:06:56,159
so let's just say late final and we're
24484
21:06:53,831 --> 21:07:00,000
going to say this is endnote service
24485
21:07:00,960 --> 21:07:06,000
um you haven't seen maybe the ui of the
24486
21:07:03,600 --> 21:07:08,320
application but while we're working on
24487
21:07:06,000 --> 21:07:10,320
variables to keep hold of we also need
24488
21:07:08,320 --> 21:07:13,192
to keep hold of a text editing
24489
21:07:10,320 --> 21:07:15,512
controller now the way the ui of this
24490
21:07:13,191 --> 21:07:17,039
view is going to work here is that
24491
21:07:15,512 --> 21:07:20,160
instead of this text in here we're going
24492
21:07:17,039 --> 21:07:22,551
to create a text field which will
24493
21:07:20,160 --> 21:07:24,400
vertically increase the size as the user
24494
21:07:24,399 --> 21:07:27,919
information or their notes in that field
24495
21:07:27,919 --> 21:07:32,240
what we're going to do is to keep track
24496
21:07:30,080 --> 21:07:34,080
of the text that the user enters and
24497
21:07:32,240 --> 21:07:36,720
when the user is entering new text we
24498
21:07:34,080 --> 21:07:39,279
will automatically sync that information
24499
21:07:36,720 --> 21:07:41,360
with our database and in the future when
24500
21:07:39,279 --> 21:07:44,160
we go to firebase we're going to sync
24501
21:07:41,360 --> 21:07:47,440
that information with firebase
24502
21:07:44,160 --> 21:07:50,720
so we need a text editing controller to
24503
21:07:47,440 --> 21:07:51,680
keep track of the text changes all right
24504
21:07:54,800 --> 21:07:59,120
caption in here and let's then go ahead
24505
21:07:57,119 --> 21:08:02,319
and do as the caption says let's say
24506
21:08:03,512 --> 21:08:08,160
controller these documentation sometimes
24507
21:08:08,160 --> 21:08:12,919
and we call it text controller okay
24508
21:08:16,320 --> 21:08:21,680
so what we need to do now um is to
24509
21:08:19,119 --> 21:08:23,039
facilitate our uh i mean we haven't
24510
21:08:21,679 --> 21:08:25,039
really initialized any of these but
24511
21:08:23,039 --> 21:08:27,439
we're going to take care of that soon so
24512
21:08:25,039 --> 21:08:28,959
where we haven't forgotten about that
24513
21:08:27,440 --> 21:08:30,479
but what we need now as i mentioned in
24514
21:08:28,960 --> 21:08:31,680
the beginning of this chapter when we
24515
21:08:30,479 --> 21:08:34,080
come to this screen we're going to
24516
21:08:31,679 --> 21:08:36,000
create a new note and we need to have a
24517
21:08:34,080 --> 21:08:37,440
function for it as the caption in the
24518
21:08:36,000 --> 21:08:38,960
case it's going to be called create new
24519
21:08:37,440 --> 21:08:41,600
note and it's an asynchronous function
24520
21:08:41,600 --> 21:08:46,400
so let's go ahead and say future
24521
21:08:46,399 --> 21:08:50,239
because it creates a node with our
24522
21:08:50,240 --> 21:08:54,800
and we're going to call it create new
24523
21:08:52,399 --> 21:08:55,831
node and it's an asynchronous function
24524
21:08:55,831 --> 21:08:59,919
in this function what we're going to do
24525
21:08:57,679 --> 21:09:02,079
first is just to see have we created
24526
21:08:59,919 --> 21:09:04,160
this note before inside this node
24527
21:09:02,080 --> 21:09:05,512
variable if we have created this node
24528
21:09:04,160 --> 21:09:08,000
before then we don't have to create it
24529
21:09:05,512 --> 21:09:09,440
again we just return but if we haven't
24530
21:09:08,000 --> 21:09:11,679
created it then we go to the node
24531
21:09:09,440 --> 21:09:13,919
service and say create the node
24532
21:09:11,679 --> 21:09:16,159
and then get that node back to us all
24533
21:09:16,160 --> 21:09:20,639
so let's go ahead and do that let's just
24534
21:09:26,720 --> 21:09:31,512
then in here we say if existing note
24535
21:09:36,551 --> 21:09:40,479
so that's the return statement that
24536
21:09:38,160 --> 21:09:42,639
means we already have a note and if we
24537
21:09:40,479 --> 21:09:44,959
don't then we're going to create a new
24538
21:09:42,639 --> 21:09:49,119
note but remember when we create a new
24539
21:09:44,960 --> 21:09:53,120
note our um creates new note function on
24540
21:09:49,119 --> 21:09:55,831
the notes service if you look here
24541
21:09:53,119 --> 21:09:57,831
create note it requires an owner so now
24542
21:09:55,831 --> 21:09:58,720
all of a sudden we have to have an owner
24543
21:09:58,720 --> 21:10:04,800
and again remember the notes view upon
24544
21:10:02,800 --> 21:10:08,080
going to the main ui of the application
24545
21:10:04,800 --> 21:10:10,000
the notes view creates a new user in the
24546
21:10:08,080 --> 21:10:11,759
database meaning that you've logged in
24547
21:10:10,000 --> 21:10:13,679
with firebase then you go to the notes
24548
21:10:11,759 --> 21:10:16,239
view notes you took care of creating
24549
21:10:13,679 --> 21:10:18,399
that user all we have to do here is just
24550
21:10:16,240 --> 21:10:21,600
to retrieve that user so we can actually
24551
21:10:18,399 --> 21:10:24,399
count with that user already existing
24552
21:10:24,399 --> 21:10:28,239
so let's just then say final current
24553
21:10:33,039 --> 21:10:36,871
firebase and then we're gonna say
24554
21:10:38,320 --> 21:10:44,400
explicitly um unwrap it meaning that
24555
21:10:41,191 --> 21:10:46,720
we're expecting a user to be there if
24556
21:10:44,399 --> 21:10:48,799
you've ended up somehow in this new note
24557
21:10:46,720 --> 21:10:50,639
view you may be thinking but why that's
24558
21:10:50,639 --> 21:10:54,800
it is unsafe it is it is going to crash
24559
21:10:52,960 --> 21:10:56,960
the application if the current user
24560
21:10:56,960 --> 21:11:01,920
you should never end up in this
24561
21:11:00,479 --> 21:11:04,872
new node view if you don't have a
24562
21:11:01,919 --> 21:11:06,872
current user so ending up on this screen
24563
21:11:04,872 --> 21:11:08,639
and not having a current user is worth
24564
21:11:06,872 --> 21:11:11,760
the crash because you want your
24565
21:11:08,639 --> 21:11:13,919
application to crash if you're if what
24566
21:11:11,759 --> 21:11:16,399
you expect from your applications user
24567
21:11:13,919 --> 21:11:18,551
interface and logic has not been met by
24568
21:11:16,399 --> 21:11:20,959
the previous screen so you're now
24569
21:11:18,551 --> 21:11:22,959
creating an expectation and crashing the
24570
21:11:20,960 --> 21:11:25,040
application at this point is actually a
24571
21:11:22,960 --> 21:11:26,800
good thing in my eyes because if the
24572
21:11:25,039 --> 21:11:28,399
current user doesn't exist you should
24573
21:11:26,800 --> 21:11:30,160
never end up in this view if you've
24574
21:11:28,399 --> 21:11:31,919
ended up in this view and you have no
24575
21:11:30,160 --> 21:11:33,919
current user something is seriously
24576
21:11:31,919 --> 21:11:36,240
wrong so it's completely safe i would
24577
21:11:33,919 --> 21:11:38,720
say to explicitly unwrap the current
24578
21:11:39,919 --> 21:11:44,479
extract the email from the current user
24579
21:11:42,399 --> 21:11:46,079
so we're going to say current user.email
24580
21:11:44,479 --> 21:11:47,599
and we're going to unwrap that as well
24581
21:11:46,080 --> 21:11:50,080
because remember email was an optional
24582
21:11:47,600 --> 21:11:51,760
field but again since we know that
24583
21:11:50,080 --> 21:11:53,919
our authentication right now is going to
24584
21:11:53,919 --> 21:11:58,160
because all our users register with an
24585
21:11:55,831 --> 21:11:59,831
email addresses and the password then we
24586
21:11:58,160 --> 21:12:02,800
can be sure that the email address
24587
21:12:02,800 --> 21:12:06,400
so let's go ahead and get that owner
24588
21:12:04,720 --> 21:12:10,639
from the database so we're going to say
24589
21:12:14,000 --> 21:12:19,360
so we're gonna say await notes service
24590
21:12:17,119 --> 21:12:21,191
and then we're gonna get the user
24591
21:12:21,191 --> 21:12:26,551
and then we're gonna just return our
24592
21:12:24,479 --> 21:12:29,599
note service create node so we're going
24593
21:12:26,551 --> 21:12:33,191
to create a new node in here okay
24594
21:12:29,600 --> 21:12:35,600
so let's say note service creates notes
24595
21:12:39,279 --> 21:12:42,479
a future of database note which is
24596
21:12:41,279 --> 21:12:44,959
pretty much what we need to return in
24597
21:12:42,479 --> 21:12:47,279
here so let's just return a wait on that
24598
21:12:48,320 --> 21:12:53,120
all right fantastic that was for the
24599
21:12:50,160 --> 21:12:55,440
creation of the new notes and in here
24600
21:12:53,119 --> 21:12:56,319
you can see that we're not setting this
24601
21:12:56,320 --> 21:13:00,640
new notes that we just created
24602
21:13:02,160 --> 21:13:04,960
we're going to actually take care of
24603
21:13:04,960 --> 21:13:09,832
later so you don't have to worry about
24604
21:13:10,479 --> 21:13:15,512
all right that's for the creation of our
24605
21:13:19,191 --> 21:13:23,831
when this view is disposed of meaning
24606
21:13:22,080 --> 21:13:26,639
that for instance the user presses the
24607
21:13:26,639 --> 21:13:33,191
we need to ensure that the current node
24608
21:13:29,919 --> 21:13:36,000
in the database gets deleted if
24609
21:13:33,191 --> 21:13:37,512
there is no text entered for for that
24610
21:13:37,512 --> 21:13:42,720
the reason for that is let's say that
24611
21:13:39,039 --> 21:13:44,639
the user is on the main interface uh of
24612
21:13:42,720 --> 21:13:46,479
the application right here the user then
24613
21:13:44,639 --> 21:13:48,240
presses the plus button and then says
24614
21:13:46,479 --> 21:13:50,239
hmm i actually didn't want to do that so
24615
21:13:50,240 --> 21:13:55,600
if we allow the user to do that and
24616
21:13:53,831 --> 21:13:58,319
press press the plus button we create a
24617
21:13:55,600 --> 21:14:00,240
new empty node and go back then the view
24618
21:13:58,320 --> 21:14:01,920
may just be full of empty nodes so it
24619
21:14:00,240 --> 21:14:04,720
will just be like empty cells that the
24620
21:14:01,919 --> 21:14:06,872
user is not even able to see because
24621
21:14:04,720 --> 21:14:08,399
later as we'll see in the next chapters
24622
21:14:06,872 --> 21:14:10,400
we're going to populate this list with
24623
21:14:08,399 --> 21:14:12,551
the actual contents of your notes
24624
21:14:10,399 --> 21:14:14,479
because our notes don't have titles so
24625
21:14:12,551 --> 21:14:16,872
the actual text we're going to display
24626
21:14:14,479 --> 21:14:18,800
is the note itself in here inside
24627
21:14:18,800 --> 21:14:23,360
so what we're going to do is saying that
24628
21:14:21,279 --> 21:14:25,191
if you go and create a new node and you
24629
21:14:23,360 --> 21:14:27,831
don't enter any text meaning that the
24630
21:14:25,191 --> 21:14:29,119
text is empty work upon you going out of
24631
21:14:29,119 --> 21:14:33,119
out of the new note screen we're going
24632
21:14:30,800 --> 21:14:36,240
to delete that note if it's empty okay
24633
21:14:36,320 --> 21:14:40,080
so let's go ahead and create and find
24634
21:14:47,600 --> 21:14:54,552
here and let's just say void delete note
24635
21:14:56,160 --> 21:15:01,279
we go in here now we have to have a look
24636
21:15:01,512 --> 21:15:08,000
and and let's just say we get we get the
24637
21:15:03,831 --> 21:15:10,639
note so we say in here final note
24638
21:15:08,000 --> 21:15:14,960
note that should be populated inside of
24639
21:15:10,639 --> 21:15:17,119
our state and then we say if the
24640
21:15:19,831 --> 21:15:26,720
it's empty and the node is not null
24641
21:15:23,440 --> 21:15:30,320
then we go to our node service here
24642
21:15:26,720 --> 21:15:32,960
and then we ask it to delete the nodes
24643
21:15:30,320 --> 21:15:36,400
right there okay and then we say use
24644
21:15:39,119 --> 21:15:43,279
yeah that should that should be good to
24645
21:15:40,639 --> 21:15:45,679
go so that's the deletion of the note
24646
21:15:43,279 --> 21:15:50,240
from the database if the text inside our
24647
21:15:45,679 --> 21:15:50,239
text editing controller is empty
24648
21:15:50,639 --> 21:15:55,679
all right so that was for deleting the
24649
21:15:53,512 --> 21:15:58,240
note if it's empty how about actually
24650
21:15:58,240 --> 21:16:03,279
if there actually is text in it
24651
21:16:00,551 --> 21:16:05,512
and what we're gonna do in our as you'll
24652
21:16:03,279 --> 21:16:07,831
see soon inside this view where the user
24653
21:16:05,512 --> 21:16:09,760
can edit their notes or add new text to
24654
21:16:07,831 --> 21:16:12,239
the notes we're not going to have any
24655
21:16:09,759 --> 21:16:13,679
type of save button in modern mobile
24656
21:16:12,240 --> 21:16:15,279
applications if you're not a software
24657
21:16:13,679 --> 21:16:16,639
development from before you may not
24658
21:16:15,279 --> 21:16:19,191
notice but if you're a designer you
24659
21:16:16,639 --> 21:16:21,119
probably already noticed that in most
24660
21:16:19,191 --> 21:16:23,679
note-taking applications on mobile
24661
21:16:21,119 --> 21:16:25,919
devices at least there is no save button
24662
21:16:23,679 --> 21:16:28,000
all your contents will automatically be
24663
21:16:25,919 --> 21:16:29,831
saved so that's actually a good design
24664
21:16:28,000 --> 21:16:31,759
decision usually in most places you
24665
21:16:29,831 --> 21:16:33,679
don't need a save button usually in
24666
21:16:31,759 --> 21:16:35,439
mobile applications sorry especially in
24667
21:16:35,440 --> 21:16:40,080
so we're not going to have a save button
24668
21:16:37,600 --> 21:16:41,192
so we in order to facilitate not having
24669
21:16:40,080 --> 21:16:42,872
a save button we have to have a
24670
21:16:41,191 --> 21:16:44,239
functionality that automatically saves
24671
21:16:44,240 --> 21:16:48,480
the current node for instance if the
24672
21:16:46,320 --> 21:16:50,480
user then goes out of this view so it
24673
21:16:48,479 --> 21:16:52,399
will automatically be saved okay
24674
21:16:50,479 --> 21:16:55,440
so let's go ahead and create a function
24675
21:16:52,399 --> 21:16:57,511
in here as the as the name indicates
24676
21:16:55,440 --> 21:16:58,479
and it's called save node if text not
24677
21:16:58,479 --> 21:17:02,720
and i'm gonna bring the uh function
24678
21:17:01,119 --> 21:17:05,440
signature from my node so i don't have
24679
21:17:02,720 --> 21:17:07,040
to type it manually so you will need to
24680
21:17:05,440 --> 21:17:08,720
unfortunately type this manually
24681
21:17:07,039 --> 21:17:10,399
unfortunately unfortunately i don't know
24682
21:17:08,720 --> 21:17:13,191
but you will need to type in manually
24683
21:17:13,191 --> 21:17:18,239
and what we're going to do in here is
24684
21:17:15,039 --> 21:17:20,871
very similar to our the code that we
24685
21:17:18,240 --> 21:17:24,000
wrote for delete node if text empty so
24686
21:17:20,872 --> 21:17:27,360
first we're going to get the node
24687
21:17:24,000 --> 21:17:30,000
is node and then we get the text
24688
21:17:34,479 --> 21:17:38,959
um if the note is not null if note is
24689
21:17:40,000 --> 21:17:44,960
um our text is not empty then we're
24690
21:17:52,720 --> 21:17:56,800
and that's exactly what we're doing here
24691
21:17:54,639 --> 21:17:59,919
so it's very simple we're just saying
24692
21:17:56,800 --> 21:18:03,360
that if there is text which is is not
24693
21:17:59,919 --> 21:18:06,080
empty and we have a note then just
24694
21:18:03,360 --> 21:18:08,720
update that note in the database so very
24695
21:18:08,720 --> 21:18:12,800
all right two very important functions
24696
21:18:10,551 --> 21:18:14,080
now we have to put these functions in
24697
21:18:12,800 --> 21:18:16,400
use as you can see we're getting a
24698
21:18:14,080 --> 21:18:18,000
warning in here from the analyzer saying
24699
21:18:16,399 --> 21:18:20,000
that these are two private functions
24700
21:18:18,000 --> 21:18:21,279
which are not referenced and that's for
24701
21:18:20,000 --> 21:18:23,831
a good reason because we're going to
24702
21:18:21,279 --> 21:18:26,319
reference them inside the disposal of
24703
21:18:26,320 --> 21:18:31,120
when this new note view basically is
24704
21:18:28,639 --> 21:18:32,720
being killed by the system for instance
24705
21:18:31,119 --> 21:18:34,159
when the user presses the back button
24706
21:18:34,160 --> 21:18:39,600
so let's go into the dispose function
24707
21:18:36,720 --> 21:18:42,320
and we have to take care of uh
24708
21:18:48,551 --> 21:18:51,679
a dispose function in here and that's
24709
21:18:50,160 --> 21:18:53,040
going to be overwritten by default sorry
24710
21:18:51,679 --> 21:18:55,359
i'll bring it up here and i'll write it
24711
21:18:53,039 --> 21:18:58,551
from the beginning so you see this pose
24712
21:18:55,360 --> 21:18:59,919
okay and it does overwriting for us and
24713
21:18:58,551 --> 21:19:02,872
what we're going to do is first going to
24714
21:18:59,919 --> 21:19:04,160
say delete the notes if text is empty
24715
21:19:02,872 --> 21:19:06,000
then what we're going to do is we're
24716
21:19:04,160 --> 21:19:07,600
going to say otherwise save the notes if
24717
21:19:07,600 --> 21:19:12,000
and then we're going to get rid of the
24718
21:19:09,191 --> 21:19:14,319
text controllers and call the dispose on
24719
21:19:12,000 --> 21:19:15,759
it so as a good citizen of the dart land
24720
21:19:14,320 --> 21:19:17,512
when you create a new text editing
24721
21:19:15,759 --> 21:19:18,871
controller which we're soon going to do
24722
21:19:17,512 --> 21:19:23,600
we also need to make sure that we
24723
21:19:18,872 --> 21:19:23,600
dispose of it upon this pose all right
24724
21:19:25,831 --> 21:19:29,919
so that was a lot of code and i'm gonna
24725
21:19:29,919 --> 21:19:32,551
i can see i haven't actually provided
24726
21:19:32,551 --> 21:19:40,080
captions for us taking care of the init
24727
21:19:42,800 --> 21:19:45,919
so i basically what i'm doing right now
24728
21:19:44,479 --> 21:19:48,551
because i just noticed that i haven't
24729
21:19:45,919 --> 21:19:51,119
provided a caption for the init function
24730
21:19:48,551 --> 21:19:54,720
well we're gonna do it right now um
24731
21:19:51,119 --> 21:19:56,551
because that's a very very important uh
24732
21:19:54,720 --> 21:19:58,800
basically function that we need to
24733
21:19:58,800 --> 21:20:03,512
so uh i apologize for that as well i'm
24734
21:20:01,191 --> 21:20:06,639
gonna bring it here and then show you
24735
21:20:03,512 --> 21:20:08,872
the caption so you see what i'm doing
24736
21:20:06,639 --> 21:20:11,191
so we have this pose but we don't have
24737
21:20:08,872 --> 21:20:13,040
init state yet and i'm going to put init
24738
21:20:13,039 --> 21:20:17,831
uh let's see or do we have any state
24739
21:20:22,639 --> 21:20:25,919
and i can see that the visual studio
24740
21:20:24,160 --> 21:20:28,000
code isn't really helping me with that
24741
21:20:25,919 --> 21:20:29,440
so i'm just going to say overwrite void
24742
21:20:32,000 --> 21:20:36,551
and then we have to call super in its
24743
21:20:34,080 --> 21:20:38,400
states okay so you may have to type that
24744
21:20:36,551 --> 21:20:40,720
by hand as well individual studio code
24745
21:20:38,399 --> 21:20:42,319
was being a little bit angry at me
24746
21:20:40,720 --> 21:20:44,000
maybe because i just forgot to write the
24747
21:20:44,000 --> 21:20:47,679
and then in here what we need to do is
24748
21:20:45,759 --> 21:20:49,511
just to ensure that we're creating both
24749
21:20:47,679 --> 21:20:52,079
an instance of node service and also our
24750
21:20:49,512 --> 21:20:55,360
text editing controller okay so i'm just
24751
21:20:55,360 --> 21:21:00,080
and that is equal to node service and
24752
21:20:58,240 --> 21:21:02,000
that's just a singleton so it's not
24753
21:21:00,080 --> 21:21:04,000
going to create really a new instance if
24754
21:21:02,000 --> 21:21:06,240
it already existed from before
24755
21:21:04,000 --> 21:21:08,960
and our text controller is going to be a
24756
21:21:08,960 --> 21:21:13,280
editing controller just like that
24757
21:21:13,279 --> 21:21:17,831
so i'm going to save this and then i'm
24758
21:21:14,800 --> 21:21:20,000
going to do a hot restart um and
24759
21:21:17,831 --> 21:21:21,439
scrcpy is a little bit angry these days
24760
21:21:20,000 --> 21:21:23,279
with me when i do hot restart and i
24761
21:21:23,279 --> 21:21:27,600
but i have learned to live with it so
24762
21:21:30,479 --> 21:21:35,279
application without debugging and
24763
21:21:32,479 --> 21:21:36,159
bringing it bring it right there
24764
21:21:36,160 --> 21:21:40,232
while that is doing its job we need to
24765
21:21:45,600 --> 21:21:50,552
when the user is entering text in the
24766
21:21:48,320 --> 21:21:52,320
main ui of the application so when he or
24767
21:21:50,551 --> 21:21:54,399
she is entering the text typing on a
24768
21:21:52,320 --> 21:21:57,280
keyboard we need to make sure that we're
24769
21:22:00,399 --> 21:22:05,279
we're not gonna leave the updating uh
24770
21:22:05,279 --> 21:22:08,959
when the user presses the back button so
24771
21:22:07,039 --> 21:22:10,831
we're constantly gonna do that as the
24772
21:22:14,872 --> 21:22:19,512
for that we need some listeners so as
24773
21:22:17,360 --> 21:22:20,872
the caption indicate as a caption at the
24774
21:22:19,512 --> 21:22:22,720
bottom of the screen in any case we need
24775
21:22:24,551 --> 21:22:28,399
all this text controller listener is
24776
21:22:26,320 --> 21:22:29,832
going to do is it's going to be a body
24777
21:22:28,399 --> 21:22:32,551
of function it's going to be a function
24778
21:22:29,831 --> 21:22:34,479
that takes the current node if it exists
24779
21:22:32,551 --> 21:22:37,039
then it's going to take the current text
24780
21:22:34,479 --> 21:22:40,959
editing controllers text and update that
24781
21:22:37,039 --> 21:22:42,799
notes in the database all right so
24782
21:22:40,960 --> 21:22:44,480
let's go and create that function so
24783
21:22:42,800 --> 21:22:47,360
void and we're going to say text
24784
21:22:49,440 --> 21:22:54,000
is not yet being called it's it's for us
24785
21:22:52,320 --> 21:22:56,480
then to hook to the text editing
24786
21:22:54,000 --> 21:22:58,639
controller as a listener so we are soon
24787
21:22:56,479 --> 21:23:00,399
gonna write another function that
24788
21:22:58,639 --> 21:23:02,232
says hey text editing controller
24789
21:23:00,399 --> 21:23:04,231
whenever your text changes call this
24790
21:23:02,232 --> 21:23:07,600
function all right so don't worry about
24791
21:23:04,232 --> 21:23:09,360
that it's not being called yet
24792
21:23:07,600 --> 21:23:12,000
so in here we're basically going to get
24793
21:23:09,360 --> 21:23:14,399
the note um i'm going to get rid of this
24794
21:23:12,000 --> 21:23:15,279
as well i'm going to say final
24795
21:23:15,279 --> 21:23:19,831
notes is this note and then we're going
24796
21:23:19,831 --> 21:23:23,119
meaning that we don't have the note then
24797
21:23:20,960 --> 21:23:25,512
we just return we can't work with null
24798
21:23:25,759 --> 21:23:31,511
and then we're going to say get the text
24799
21:23:28,160 --> 21:23:33,040
which is from our text controller
24800
21:23:31,512 --> 21:23:36,551
like that and then we're just going to
24801
21:23:33,039 --> 21:23:38,399
await on our note service updates notes
24802
21:23:36,551 --> 21:23:42,000
with that text and then comma at the end
24803
21:23:38,399 --> 21:23:43,831
to get the formatting working
24804
21:23:42,000 --> 21:23:45,440
so that's easy that's very simple
24805
21:23:45,440 --> 21:23:48,832
explanation perhaps it's just a simple
24806
21:23:52,232 --> 21:23:57,040
as i mentioned now that we have this
24807
21:23:54,160 --> 21:23:58,720
text controller listener we also need to
24808
21:23:57,039 --> 21:24:01,511
have a function that is called setup
24809
21:23:58,720 --> 21:24:04,232
text controller listener which first
24810
21:24:01,512 --> 21:24:06,160
removes this listener from our text
24811
21:24:04,232 --> 21:24:08,080
editing controller if it has already
24812
21:24:06,160 --> 21:24:10,960
been added and then it adds it again all
24813
21:24:08,080 --> 21:24:12,960
right so let's go ahead and i'm just
24814
21:24:10,960 --> 21:24:15,040
going to copy that function name so i
24815
21:24:15,039 --> 21:24:19,919
um and then in here we go to our text
24816
21:24:17,759 --> 21:24:23,599
editing controller which we call text
24817
21:24:19,919 --> 21:24:25,279
controller and we say remove listener
24818
21:24:23,600 --> 21:24:27,360
and that listener at the moment for us
24819
21:24:25,279 --> 21:24:28,479
is called text controller listener okay
24820
21:24:28,479 --> 21:24:31,512
and then after removing it we're going
24821
21:24:33,831 --> 21:24:39,360
i'm going to add listener and
24822
21:24:36,720 --> 21:24:41,119
just add that listener back in case this
24823
21:24:39,360 --> 21:24:43,360
function is called multiple times all
24824
21:24:43,759 --> 21:24:49,039
so now we're going gonna get to the
24825
21:24:46,479 --> 21:24:50,720
juicy part of this chapter which is
24826
21:24:49,039 --> 21:24:53,831
because you see we've already added a
24827
21:24:50,720 --> 21:24:56,960
lot of coding here but no one's really
24828
21:24:53,831 --> 21:24:58,479
taking advantage of these so or
24829
21:24:56,960 --> 21:25:00,552
actually we can't say that because the
24830
21:24:58,479 --> 21:25:02,319
idiots sorry the disposes for instance
24831
21:25:00,551 --> 21:25:03,759
taking advantage of save node if not
24832
21:25:02,320 --> 21:25:05,920
empty and it's taking advantage of
24833
21:25:03,759 --> 21:25:07,599
delete note if text is empty but we're
24834
21:25:05,919 --> 21:25:09,039
not taking advantage of this create new
24835
21:25:07,600 --> 21:25:11,600
node and we're not taking advantage of
24836
21:25:11,600 --> 21:25:16,480
listener so that's what we're going to
24837
21:25:19,440 --> 21:25:24,160
at the moment the body it just says
24838
21:25:20,960 --> 21:25:25,760
context write your new node in here but
24839
21:25:24,160 --> 21:25:29,760
what we're going to do is we're going to
24840
21:25:31,279 --> 21:25:34,479
what is this future builder actually
24841
21:25:32,800 --> 21:25:36,080
going to do remember when you press the
24842
21:25:34,479 --> 21:25:38,231
plus button on the main ui of the
24843
21:25:36,080 --> 21:25:39,919
application no one is creating a new
24844
21:25:38,232 --> 21:25:42,480
note for you you need to do that
24845
21:25:39,919 --> 21:25:45,191
yourself in this new note view as its
24846
21:25:42,479 --> 21:25:47,440
name indicates so let's go and replace
24847
21:25:45,191 --> 21:25:50,799
the body of this function of this
24848
21:25:47,440 --> 21:25:52,551
parameter with the future builder
24849
21:25:50,800 --> 21:25:53,360
remember the future builder has to have
24850
21:25:53,360 --> 21:25:58,160
variables one is the future itself and
24851
21:25:56,080 --> 21:25:59,919
the other one is going to be its builder
24852
21:25:59,919 --> 21:26:06,000
for the future we need to call the
24853
21:26:03,119 --> 21:26:08,720
create new node which returns a future
24854
21:26:08,720 --> 21:26:14,320
the database note and we've already
24855
21:26:14,320 --> 21:26:19,120
so that's the future that is going to be
24856
21:26:19,119 --> 21:26:23,679
then we're going to write the builder
24857
21:26:22,232 --> 21:26:25,040
and i'm going to get help from visual
24858
21:26:23,679 --> 21:26:26,551
studio code to complete this and
24859
21:26:25,039 --> 21:26:28,959
remember in your builder you have to
24860
21:26:29,679 --> 21:26:34,159
what we're gonna do is since this is a
24861
21:26:31,679 --> 21:26:36,551
future we need to look for its done
24862
21:26:34,160 --> 21:26:39,192
state it's not gonna be where we don't
24863
21:26:36,551 --> 21:26:41,119
have to look for active and waiting we
24864
21:26:41,119 --> 21:26:46,159
or else we're going to show a progress
24865
21:26:42,960 --> 21:26:49,760
indicator okay so let's just say switch
24866
21:26:46,160 --> 21:26:52,400
snapshot state connection state
24867
21:26:49,759 --> 21:26:55,191
and help from visual studio code to add
24868
21:26:52,399 --> 21:26:56,159
these missing case clauses for me so
24869
21:26:56,160 --> 21:27:00,800
non-waiting so none of these are
24870
21:27:02,080 --> 21:27:06,551
so we're going to leave it like that and
24871
21:27:06,551 --> 21:27:10,000
default so we're just going to say
24872
21:27:10,000 --> 21:27:15,279
return cons circular progress indicator
24873
21:27:15,279 --> 21:27:18,872
when this create new node is finished so
24874
21:27:17,679 --> 21:27:20,959
a new node has been created in the
24875
21:27:18,872 --> 21:27:22,800
database we come to done but we're not
24876
21:27:20,960 --> 21:27:24,720
returning anything and that's the reason
24877
21:27:22,800 --> 21:27:26,551
you're seeing this little error here but
24878
21:27:24,720 --> 21:27:28,551
if the connection state is not done for
24879
21:27:26,551 --> 21:27:30,319
instance if it's waiting for the create
24880
21:27:28,551 --> 21:27:32,159
node to happen then we're going to show
24881
21:27:30,320 --> 21:27:33,280
a little circular progress indicator to
24882
21:27:32,160 --> 21:27:35,440
the user and remember this is going to
24883
21:27:33,279 --> 21:27:37,831
happen so fast that you're not even
24884
21:27:35,440 --> 21:27:40,000
going to see this however i'm completely
24885
21:27:37,831 --> 21:27:41,599
aware that the circular progress
24886
21:27:40,000 --> 21:27:43,600
indicator may not be the previous
24887
21:27:41,600 --> 21:27:45,440
solution but what we're going to do here
24888
21:27:43,600 --> 21:27:47,920
is we're not going to spend so much time
24889
21:27:45,440 --> 21:27:49,832
on predefining this code since it's
24890
21:27:47,919 --> 21:27:51,440
gonna probably be displayed to the user
24891
21:27:49,831 --> 21:27:54,479
on a modern hardware on a modern
24892
21:27:51,440 --> 21:27:56,479
telephone just for a few milliseconds so
24893
21:27:54,479 --> 21:27:58,479
it's probably not worth predefining this
24894
21:27:56,479 --> 21:28:00,231
code so much right now at least okay as
24895
21:27:58,479 --> 21:28:02,399
we're going on in this course but if you
24896
21:28:00,232 --> 21:28:04,800
have unlimited amount of time and you
24897
21:28:02,399 --> 21:28:07,119
and you really are attention and you
24898
21:28:04,800 --> 21:28:09,192
have a lot of attention to details then
24899
21:28:07,119 --> 21:28:11,119
you may want to fix this up a little bit
24900
21:28:09,191 --> 21:28:14,399
and maybe put it in some sort of center
24901
21:28:11,119 --> 21:28:17,279
or maybe change the color etc etc
24902
21:28:14,399 --> 21:28:18,479
but we're not gonna do that right now
24903
21:28:19,512 --> 21:28:23,919
our future builder at the moment is just
24904
21:28:21,919 --> 21:28:26,000
creating a future builder and it's and
24905
21:28:23,919 --> 21:28:28,872
it's understood that it is a database
24906
21:28:28,872 --> 21:28:32,551
the don connection state and say
24907
21:28:32,551 --> 21:28:37,679
snapshot data and though it says object
24908
21:28:35,759 --> 21:28:39,679
well we already know that this snapshot
24909
21:28:39,679 --> 21:28:44,000
database node as it was the future
24910
21:28:41,759 --> 21:28:46,080
itself so we're just going to say final
24911
21:28:44,000 --> 21:28:48,399
actually no we're going to assign that
24912
21:28:46,080 --> 21:28:51,191
to our nodes variable remember we have
24913
21:28:51,191 --> 21:28:54,720
and pretty much all those functions are
24914
21:28:52,960 --> 21:28:56,639
relying on that node variable to be
24915
21:28:54,720 --> 21:28:58,080
there and that's what we're doing we're
24916
21:28:56,639 --> 21:28:59,831
creating a future builder that creates
24917
21:28:58,080 --> 21:29:01,600
the node and then we assign it to our
24918
21:29:01,600 --> 21:29:05,120
so we're gonna then say snapshot
24919
21:29:10,000 --> 21:29:14,479
get our nodes from our snapshot
24920
21:29:15,279 --> 21:29:18,872
right after doing this we're going to
24921
21:29:18,872 --> 21:29:24,000
text controller listener because this is
24922
21:29:21,512 --> 21:29:25,600
it's at this point that we want to start
24923
21:29:25,600 --> 21:29:31,832
user text changes on our main ui
24924
21:29:31,831 --> 21:29:36,551
and right at this point we've done what
24925
21:29:34,160 --> 21:29:38,872
we had to do except for actually return
24926
21:29:38,872 --> 21:29:42,479
field to the user using which he or he
24927
21:29:42,479 --> 21:29:46,959
edit the text on the ui so let's let's
24928
21:29:45,191 --> 21:29:48,231
go ahead and do that so remove the break
24929
21:29:46,960 --> 21:29:49,832
statement in here because we don't need
24930
21:29:48,232 --> 21:29:50,800
it anymore we're just going to say
24931
21:29:54,232 --> 21:29:58,639
we're going to assign our text
24932
21:29:56,639 --> 21:30:01,279
our the controller parameter we're going
24933
21:29:58,639 --> 21:30:04,960
to assign a value of our text controller
24934
21:30:01,279 --> 21:30:07,512
in here so that's how a text field can
24935
21:30:04,960 --> 21:30:09,192
send messages to an object called a text
24936
21:30:07,512 --> 21:30:10,400
editing controller and say hey my text
24937
21:30:10,399 --> 21:30:17,039
that is our proxy to a text field in
24938
21:30:13,831 --> 21:30:19,599
flutter okay so that's setting up that
24939
21:30:17,039 --> 21:30:22,159
and what we need to also do is to allow
24940
21:30:19,600 --> 21:30:23,760
the user to enter multiple lines of text
24941
21:30:22,160 --> 21:30:25,680
in this text field because remember text
24942
21:30:23,759 --> 21:30:27,599
fields usually in flutter are like one
24943
21:30:25,679 --> 21:30:29,119
line so for instance you're writing an
24944
21:30:27,600 --> 21:30:32,080
email address or you're writing your
24945
21:30:29,119 --> 21:30:34,479
password so they're not like multi-line
24946
21:30:32,080 --> 21:30:37,360
text fields by default unless you make
24947
21:30:34,479 --> 21:30:39,039
them multi-line so that's what we're
24948
21:30:37,360 --> 21:30:40,639
going to do now so we're going to say
24949
21:30:40,639 --> 21:30:45,679
you can see it's of type text input type
24950
21:30:45,679 --> 21:30:50,231
alt-line all right so that's going to
24951
21:30:47,759 --> 21:30:52,551
allow you to have a little enter key at
24952
21:30:50,232 --> 21:30:54,400
the bottom uh right hand side of your
24953
21:30:52,551 --> 21:30:55,759
keyboard if you're left to right on like
24954
21:30:54,399 --> 21:30:57,360
english language or if you're right to
24955
21:30:55,759 --> 21:30:58,639
left language like arabic then that
24956
21:30:57,360 --> 21:31:01,600
little enter key is going to be at the
24957
21:31:03,360 --> 21:31:08,232
keyboard as you'll soon see actually and
24958
21:31:05,759 --> 21:31:10,080
you'll get that key on your keyboard to
24959
21:31:10,960 --> 21:31:15,440
in flutter as it is also in swift when
24960
21:31:13,600 --> 21:31:17,512
you're doing ios development there is a
24961
21:31:17,512 --> 21:31:23,040
creating text fields that are multi-line
24962
21:31:23,039 --> 21:31:26,231
unfortunately it has leaked to flutter
24963
21:31:27,440 --> 21:31:33,440
you you don't have like a parameter in
24964
21:31:29,360 --> 21:31:34,960
text field that says multiline so
24965
21:31:33,440 --> 21:31:37,040
if you want to create a text field that
24966
21:31:34,960 --> 21:31:40,320
is multi-line and it kind of like
24967
21:31:37,039 --> 21:31:42,479
expands as you enter more text into it
24968
21:31:40,320 --> 21:31:45,832
then unfortunately you have to call and
24969
21:31:42,479 --> 21:31:47,759
you have to assign null to the max
24970
21:31:47,759 --> 21:31:50,551
there are some discussions on github
24971
21:31:49,119 --> 21:31:53,039
about why that's the case but there's a
24972
21:31:54,320 --> 21:31:59,832
and what we're then gonna do is if we if
24973
21:31:56,800 --> 21:32:02,400
we do like this and i press command s
24974
21:32:02,399 --> 21:32:06,871
and we press the plus button in here
24975
21:32:05,279 --> 21:32:10,160
okay you'll see there's a text field in
24976
21:32:06,872 --> 21:32:11,919
here that's great okay however it's not
24977
21:32:11,919 --> 21:32:15,759
what what am i supposed to do what is
24978
21:32:13,512 --> 21:32:18,000
this line here am i gonna tap somewhere
24979
21:32:15,759 --> 21:32:20,159
here it's not so obvious so what we're
24980
21:32:18,000 --> 21:32:22,800
gonna do is to add something called a
24981
21:32:20,160 --> 21:32:24,552
hint to this text field if you're a
24982
21:32:22,800 --> 21:32:26,479
designer or a developer from before you
24983
21:32:24,551 --> 21:32:28,080
probably already know what a hint is but
24984
21:32:26,479 --> 21:32:29,191
if you don't know what a hint is a hint
24985
21:32:29,191 --> 21:32:33,919
um as this name indicates a little text
24986
21:32:31,919 --> 21:32:36,959
that usually gets displayed to the user
24987
21:32:38,720 --> 21:32:44,551
to be entered in this uh field so
24988
21:32:42,399 --> 21:32:46,639
let's go and add the hint and that is
24989
21:32:44,551 --> 21:32:48,000
through a property on our text field
24990
21:32:52,080 --> 21:32:56,400
inside our input decoration we're going
24991
21:32:53,759 --> 21:32:57,919
to add a parameter called hint text and
24992
21:32:56,399 --> 21:32:59,679
here we're just going to say start
24993
21:33:03,831 --> 21:33:08,551
a comma here to prefi the code a little
24994
21:33:08,551 --> 21:33:14,080
but there we go now we have hints in
24995
21:33:10,551 --> 21:33:15,831
here and as i bring up as i tap on this
24996
21:33:14,080 --> 21:33:17,831
text field you can see i can start
24997
21:33:15,831 --> 21:33:19,279
typing in here and press this little
24998
21:33:17,831 --> 21:33:21,360
button that i was talking about for
24999
21:33:19,279 --> 21:33:22,959
multi-line and as i start typing more
25000
21:33:22,960 --> 21:33:27,280
the text field is gonna increase in size
25001
21:33:28,872 --> 21:33:33,440
that is that is really what we have to
25002
21:33:31,279 --> 21:33:34,639
do in this chapter i hope i didn't scare
25003
21:33:33,440 --> 21:33:35,919
you by saying in the beginning of this
25004
21:33:34,639 --> 21:33:38,720
chapter that this chapter is gonna be
25005
21:33:38,720 --> 21:33:41,680
i mean there were there was quite a lot
25006
21:33:40,080 --> 21:33:43,440
of code but hopefully you could stick
25007
21:33:41,679 --> 21:33:45,919
with me throughout the chapter and get
25008
21:33:45,919 --> 21:33:50,160
as is the tradition in all the other
25009
21:33:51,600 --> 21:33:56,232
lose we don't want to lose the work that
25010
21:33:54,320 --> 21:33:59,680
we're doing on our code so we need to
25011
21:33:56,232 --> 21:34:01,120
make sure that we commit and also we
25012
21:34:01,119 --> 21:34:06,231
okay so let me change the screen layout
25013
21:34:06,232 --> 21:34:11,279
and we've tagged the previous chapter as
25014
21:34:08,960 --> 21:34:13,040
step 13 so as the caption indicates here
25015
21:34:11,279 --> 21:34:15,512
we're going to tag and commit this code
25016
21:34:15,512 --> 21:34:20,720
i'm going to say git status
25017
21:34:18,639 --> 21:34:22,160
two files change and then i'm gonna add
25018
21:34:20,720 --> 21:34:24,639
them all to the staging environment and
25019
21:34:29,919 --> 21:34:37,119
and then i'm gonna tag our code as step
25020
21:34:32,080 --> 21:34:38,160
14 as well and then push our tags
25021
21:34:39,512 --> 21:34:44,720
that was that for tagging um now again
25022
21:34:42,320 --> 21:34:45,760
as is tradition for other chapters as
25023
21:34:44,720 --> 21:34:47,600
well at the end of every chapter we're
25024
21:34:45,759 --> 21:34:51,511
going to talk about what we are going to
25025
21:34:47,600 --> 21:34:54,800
discuss in the chapter that follows
25026
21:34:51,512 --> 21:34:56,320
so we are now actually creating notes it
25027
21:34:54,800 --> 21:34:57,919
may not be immediately visible to you
25028
21:34:56,320 --> 21:35:00,320
but if you if you for instance have
25029
21:34:57,919 --> 21:35:02,160
created some notes then this screen
25030
21:35:00,320 --> 21:35:04,232
should be able to render those notes
25031
21:35:02,160 --> 21:35:06,552
because the new note view is doing
25032
21:35:04,232 --> 21:35:08,720
everything necessary to not only create
25033
21:35:06,551 --> 21:35:10,159
the note and let's see where it is here
25034
21:35:10,160 --> 21:35:16,160
but it also is updating that note for us
25035
21:35:12,720 --> 21:35:18,080
so here you can see update note so those
25036
21:35:16,160 --> 21:35:19,832
notes are in the database it's just that
25037
21:35:18,080 --> 21:35:22,000
the main ui of the application which is
25038
21:35:19,831 --> 21:35:23,439
this node c the dark is not able to
25039
21:35:22,000 --> 21:35:25,919
render them all it's doing is just
25040
21:35:23,440 --> 21:35:28,400
saying waiting for all nodes so
25041
21:35:25,919 --> 21:35:30,232
it's not so exciting but just know that
25042
21:35:28,399 --> 21:35:32,159
you are getting there and we are getting
25043
21:35:30,232 --> 21:35:35,512
there it's just there are a few steps
25044
21:35:32,160 --> 21:35:37,919
left to handle that and uh that's
25045
21:35:35,512 --> 21:35:40,479
exactly what we're gonna do in the next
25046
21:35:37,919 --> 21:35:42,800
chapter so get some tea and coffee if
25047
21:35:40,479 --> 21:35:45,039
you want to and i'll see you there
25048
21:35:42,800 --> 21:35:47,279
hello and welcome to chapter 32 of the
25049
21:35:45,039 --> 21:35:49,039
slotzer course in the previous chapters
25050
21:35:47,279 --> 21:35:51,279
we've been talking quite a lot about our
25051
21:35:49,039 --> 21:35:53,039
node service and creating stream
25052
21:35:51,279 --> 21:35:55,119
controller in order to populate the
25053
21:35:53,039 --> 21:35:57,119
stream control with the nodes and we
25054
21:35:55,119 --> 21:35:59,512
also have a buffer locally called
25055
21:35:57,119 --> 21:36:01,119
underscore nodes in our node service and
25056
21:35:59,512 --> 21:36:04,232
so we're kind of like working with our
25057
21:36:01,119 --> 21:36:06,959
notes in a really good and organic way
25058
21:36:04,232 --> 21:36:09,040
and we also work with the new node view
25059
21:36:06,960 --> 21:36:10,800
dark file where we created a stateful
25060
21:36:09,039 --> 21:36:12,719
widget that had a text editing
25061
21:36:10,800 --> 21:36:14,479
controller and i also allowed the user
25062
21:36:14,479 --> 21:36:19,191
we manage even to save that text as a
25063
21:36:16,720 --> 21:36:22,160
new note into the database so we've done
25064
21:36:19,191 --> 21:36:23,599
quite a lot however what wasn't so much
25065
21:36:22,160 --> 21:36:26,080
fun was that it was a little bit of an
25066
21:36:23,600 --> 21:36:27,920
anti-climax in that we we are able to
25067
21:36:26,080 --> 21:36:29,191
create notes but we're not able to
25068
21:36:27,919 --> 21:36:31,440
actually display them so we're
25069
21:36:29,191 --> 21:36:33,919
populating the database with new notes
25070
21:36:31,440 --> 21:36:35,600
but no one is able to show them on the
25071
21:36:33,919 --> 21:36:38,551
screen and that's what we're going to
25072
21:36:38,551 --> 21:36:44,080
so let me bring the code that we've
25073
21:36:40,800 --> 21:36:46,000
written so far to the screen here
25074
21:36:46,000 --> 21:36:49,600
i'm going to clear this get status just
25075
21:36:48,232 --> 21:36:50,872
to make sure everything's working fine
25076
21:36:50,872 --> 21:36:55,360
the visual studio code i'm going to
25077
21:36:52,160 --> 21:36:57,120
bring scrcpy to the right hand side
25078
21:36:57,119 --> 21:37:01,512
we have to now talk about a little
25079
21:36:59,360 --> 21:37:03,680
problem that we have with our nodes
25080
21:37:01,512 --> 21:37:05,119
service you see if you look at the code
25081
21:37:03,679 --> 21:37:06,479
here i'm going to increase the size so
25082
21:37:10,479 --> 21:37:15,279
and we have this uh shared instance that
25083
21:37:13,119 --> 21:37:17,191
we've created here okay so whenever
25084
21:37:15,279 --> 21:37:18,800
somebody says note service parenthesis
25085
21:37:17,191 --> 21:37:20,479
then they're actually not creating any
25086
21:37:18,800 --> 21:37:22,232
instance they're not creating a new
25087
21:37:20,479 --> 21:37:24,551
instance of node service but they're
25088
21:37:22,232 --> 21:37:27,120
going through this factory initializer
25089
21:37:24,551 --> 21:37:30,231
which in turn calls this shared
25090
21:37:27,119 --> 21:37:33,759
static final which in turn calls this
25091
21:37:30,232 --> 21:37:35,760
internal or private constructor that
25092
21:37:33,759 --> 21:37:37,439
means we've created a singleton so
25093
21:37:35,759 --> 21:37:40,231
creating a new node service over and
25094
21:37:37,440 --> 21:37:41,440
over again is not gonna um create a new
25095
21:37:41,440 --> 21:37:45,119
he's just gonna get the same shared
25096
21:37:42,800 --> 21:37:45,919
instance and then whoever then starts
25097
21:37:45,919 --> 21:37:50,639
reading or you see all notes in here
25098
21:37:48,399 --> 21:37:52,399
properly all notes is delegating its
25099
21:37:50,639 --> 21:37:55,119
responsibility to the node stream
25100
21:37:52,399 --> 21:37:57,360
controller or stream however our node
25101
21:37:55,119 --> 21:37:59,831
stream controller is a broadcast stream
25102
21:37:57,360 --> 21:38:02,399
controller and what that means is that a
25103
21:38:02,399 --> 21:38:07,919
doesn't really hold on to its current
25104
21:38:05,440 --> 21:38:09,600
value for new listeners so let's say you
25105
21:38:07,919 --> 21:38:12,080
have a stream controller that is sitting
25106
21:38:09,600 --> 21:38:13,920
here and you start listening to events
25107
21:38:12,080 --> 21:38:16,320
uh to that stream controller from one
25108
21:38:13,919 --> 21:38:17,919
place and then an event comes into the
25109
21:38:16,320 --> 21:38:20,720
stream controller and stream controller
25110
21:38:17,919 --> 21:38:22,639
says oh um i have one listener right
25111
21:38:20,720 --> 21:38:24,872
here i'm gonna delegate this information
25112
21:38:24,872 --> 21:38:29,919
all looks fine however however after the
25113
21:38:27,919 --> 21:38:31,831
propagation of this event into the
25114
21:38:29,919 --> 21:38:34,232
stream controller the stream controller
25115
21:38:31,831 --> 21:38:36,159
is not going to hold on to this value
25116
21:38:34,232 --> 21:38:37,919
when a new listener comes in from
25117
21:38:37,919 --> 21:38:41,440
any new listener to your broadcast
25118
21:38:39,759 --> 21:38:43,599
stream controller is not going to be
25119
21:38:41,440 --> 21:38:45,279
informed of the current information
25120
21:38:43,600 --> 21:38:47,920
which is populated in that stream
25121
21:38:45,279 --> 21:38:49,919
controller so if you're familiar with
25122
21:38:47,919 --> 21:38:52,000
for instance uh reactive programming
25123
21:38:49,919 --> 21:38:54,080
with rx you may know this as a published
25124
21:38:52,000 --> 21:38:56,872
subject and the same is true if you're
25125
21:38:54,080 --> 21:38:58,639
for instance versus using rx java or rx
25126
21:38:58,639 --> 21:39:04,232
rx swift even if you're doing like um
25127
21:39:01,512 --> 21:39:05,680
combined programming with a swift ui you
25128
21:39:04,232 --> 21:39:07,360
will know these as like published
25129
21:39:07,360 --> 21:39:11,831
a stream controller that is broadcast is
25130
21:39:09,039 --> 21:39:14,719
not gonna hold on in to its current uh
25131
21:39:11,831 --> 21:39:16,959
value for new listeners we need to we
25132
21:39:14,720 --> 21:39:18,720
need to remedy that and the way to do
25133
21:39:18,720 --> 21:39:24,080
move the initialization of node stream
25134
21:39:24,080 --> 21:39:28,479
initializer right here as we'll soon see
25135
21:39:26,479 --> 21:39:29,831
so i'm going to do a little bit of a
25136
21:39:32,080 --> 21:39:35,919
all right so as the caption indicates
25137
21:39:34,320 --> 21:39:38,640
what we need to do and we need to make
25138
21:39:38,639 --> 21:39:42,551
which is let's see where it is it's
25139
21:39:40,479 --> 21:39:45,191
right here we need to make it a late
25140
21:39:42,551 --> 21:39:47,440
final so grab the data type from where
25141
21:39:45,191 --> 21:39:50,080
it is and just say late final put the
25142
21:39:47,440 --> 21:39:52,479
data type in here and then remove the
25143
21:39:50,080 --> 21:39:54,320
equal all right so now it is our
25144
21:39:52,479 --> 21:39:55,919
responsibility to ensure that this node
25145
21:39:54,320 --> 21:39:58,080
stream controller is actually
25146
21:39:55,919 --> 21:39:59,919
initialized upon constructor upon
25147
21:39:58,080 --> 21:40:02,000
constructing a new instance of our node
25148
21:40:02,000 --> 21:40:06,720
so let's go ahead and do that inside
25149
21:40:04,551 --> 21:40:08,720
shared instance which is right here so
25150
21:40:06,720 --> 21:40:11,759
what we need to do now is to say node
25151
21:40:08,720 --> 21:40:13,360
stream controller is a stream controller
25152
21:40:13,360 --> 21:40:17,191
database nodes and then we do the exact
25153
21:40:15,440 --> 21:40:19,512
same thing as we did before using
25154
21:40:17,191 --> 21:40:21,440
broadcast however what we're going to do
25155
21:40:21,440 --> 21:40:26,800
use a property inside the broadcast
25156
21:40:23,759 --> 21:40:28,551
stream listener called on listen so this
25157
21:40:28,551 --> 21:40:33,440
callback is going to get called whenever
25158
21:40:35,600 --> 21:40:41,600
note stream controllers stream so
25159
21:40:39,119 --> 21:40:44,551
upon this happening we need to ensure
25160
21:40:41,600 --> 21:40:46,960
that our node stream controllers stream
25161
21:40:44,551 --> 21:40:48,872
is populated with all the values that
25162
21:40:46,960 --> 21:40:52,872
we've currently read from the database
25163
21:40:48,872 --> 21:40:54,720
so let's go ahead and do that
25164
21:40:52,872 --> 21:40:55,680
so we're just going to go ahead and say
25165
21:40:57,759 --> 21:41:03,119
add notes just like that all right so
25166
21:41:00,399 --> 21:41:04,871
this ensures anyone who starts listening
25167
21:41:04,872 --> 21:41:08,639
to this property all notes which in turn
25168
21:41:06,872 --> 21:41:10,479
uses the no stream controller if it's a
25169
21:41:08,639 --> 21:41:13,600
new subscriber then it's gonna the
25170
21:41:10,479 --> 21:41:15,440
unlisted um callback is gonna get called
25171
21:41:13,600 --> 21:41:17,920
and then we're gonna populate our stream
25172
21:41:15,440 --> 21:41:19,919
controllers a stream with those notes
25173
21:41:17,919 --> 21:41:22,080
that we've already read from the
25174
21:41:22,960 --> 21:41:27,120
let's now move to the next note before
25175
21:41:25,119 --> 21:41:29,512
we can actually get on with the rest of
25176
21:41:27,119 --> 21:41:31,119
this chapter as the caption indicates as
25177
21:41:29,512 --> 21:41:32,720
we shouldn't close the db upon hot
25178
21:41:31,119 --> 21:41:34,871
reload after opening db we shouldn't
25179
21:41:32,720 --> 21:41:36,232
close it otherwise upon every reload it
25180
21:41:36,232 --> 21:41:41,919
so the problem that i'm referring to is
25181
21:41:38,960 --> 21:41:44,800
in inside our notes view and it is right
25182
21:41:41,919 --> 21:41:46,479
here inside our dispose so upon doing
25183
21:41:44,800 --> 21:41:48,720
hot reload what we're doing is that
25184
21:41:46,479 --> 21:41:50,479
we're saying node service close which in
25185
21:41:48,720 --> 21:41:53,680
turn is going to actually close the
25186
21:41:50,479 --> 21:41:56,800
database but remember node service is
25187
21:41:53,679 --> 21:41:59,599
and is was and is supposed to be a
25188
21:41:56,800 --> 21:42:02,232
singleton where upon creation and upon
25189
21:41:59,600 --> 21:42:03,760
doing an open one time it should keep
25190
21:42:03,759 --> 21:42:08,639
we shouldn't play with closing of the
25191
21:42:06,080 --> 21:42:10,551
database inside any of our widgets
25192
21:42:08,639 --> 21:42:13,279
because that is going to interfere with
25193
21:42:10,551 --> 21:42:16,399
the internals and how the node service
25194
21:42:13,279 --> 21:42:18,160
is actually supposed to work so what
25195
21:42:16,399 --> 21:42:19,831
we're going to do as you can see since
25196
21:42:18,160 --> 21:42:21,760
this pose function in here the
25197
21:42:19,831 --> 21:42:23,191
overwriting overwriting of the dispose
25198
21:42:21,759 --> 21:42:25,039
function the only thing it was actually
25199
21:42:23,191 --> 21:42:27,119
doing was to close the node services
25200
21:42:25,039 --> 21:42:28,639
database we're just going to remove this
25201
21:42:27,119 --> 21:42:32,231
function for now because we have nothing
25202
21:42:28,639 --> 21:42:35,191
else to dispose of at the moment in our
25203
21:42:38,551 --> 21:42:43,440
so what we need to do is actually get to
25204
21:42:40,960 --> 21:42:45,832
the meat of this section which i'm so
25205
21:42:43,440 --> 21:42:48,720
excited about for this chapter
25206
21:42:45,831 --> 21:42:50,871
and that is to start working with
25207
21:42:50,872 --> 21:42:57,680
and what we need to do is to make sure
25208
21:42:53,512 --> 21:43:00,872
that we have a list that we can
25209
21:42:57,679 --> 21:43:03,599
we can grab the data that comes from our
25210
21:43:00,872 --> 21:43:05,680
stream here stream builder you can see
25211
21:43:03,600 --> 21:43:08,720
it reads all the notes and right now
25212
21:43:05,679 --> 21:43:10,319
we're just saying waiting for all nodes
25213
21:43:08,720 --> 21:43:12,320
so we're going to change that and
25214
21:43:10,320 --> 21:43:15,360
instead we're actually going to start
25215
21:43:12,320 --> 21:43:18,232
using something called a list view now
25216
21:43:15,360 --> 21:43:19,759
list view in flutter is an amazing
25217
21:43:18,232 --> 21:43:21,680
widget which i can actually show you
25218
21:43:19,759 --> 21:43:24,479
here so if you just type list view and
25219
21:43:24,479 --> 21:43:28,159
control click on linux and windows you
25220
21:43:26,160 --> 21:43:29,440
can see it's a box scroll view extends
25221
21:43:28,160 --> 21:43:31,832
box scroll view which in turn is a
25222
21:43:29,440 --> 21:43:33,279
scroll view which in turn is a stateless
25223
21:43:33,279 --> 21:43:38,080
a list view has uh some function some
25224
21:43:36,000 --> 21:43:40,639
really great functionality uh that it
25225
21:43:38,080 --> 21:43:43,119
exposes using is builder we can see here
25226
21:43:40,639 --> 21:43:45,039
it has a builder function and i believe
25227
21:43:45,039 --> 21:43:50,799
or it's actually constructor great okay
25228
21:43:47,512 --> 21:43:53,279
so it has a builder and inside your
25229
21:43:50,800 --> 21:43:55,832
builder you will be able to pass two
25230
21:43:53,279 --> 21:43:57,191
important parameters to this list view
25231
21:43:57,191 --> 21:44:01,279
we return a list view instead of that
25232
21:43:59,279 --> 21:44:02,872
little text that we had which right now
25233
21:44:02,872 --> 21:44:07,512
in here we're gonna say we have two
25234
21:44:05,039 --> 21:44:10,639
parameters first we are gonna tell it
25235
21:44:07,512 --> 21:44:12,872
how many items it has to render on the
25236
21:44:10,639 --> 21:44:14,960
screen so we're going to say item count
25237
21:44:14,960 --> 21:44:20,872
and for the item count we need to
25238
21:44:17,360 --> 21:44:22,960
actually listen for this snapshots data
25239
21:44:20,872 --> 21:44:25,832
so remember the stream builder at the
25240
21:44:22,960 --> 21:44:27,680
moment is listening for all notes
25241
21:44:25,831 --> 21:44:29,279
and so that means the data that comes
25242
21:44:34,080 --> 21:44:39,040
is going to be the all the notes that
25243
21:44:36,232 --> 21:44:40,960
we've read from the database so what we
25244
21:44:39,039 --> 21:44:44,479
need to do now is just to ensure that
25245
21:44:44,479 --> 21:44:49,440
i'm gonna actually remove this
25246
21:44:49,440 --> 21:44:54,720
snapshot has data so that's a property
25247
21:44:52,160 --> 21:44:56,639
on your snapshot that exposes whether
25248
21:44:54,720 --> 21:44:58,872
the snapshot has actually pro can
25249
21:44:56,639 --> 21:45:01,360
actually provide you with some data and
25250
21:44:58,872 --> 21:45:03,600
i'm going to put an else in here and
25251
21:45:01,360 --> 21:45:07,039
upon else we're also going to say return
25252
21:45:03,600 --> 21:45:08,720
con circular progress indicator okay
25253
21:45:08,720 --> 21:45:13,831
snapshot has any data then let's grab
25254
21:45:11,759 --> 21:45:17,599
that data so i'm just going to say final
25255
21:45:13,831 --> 21:45:21,679
all notes is snapshot that's data
25256
21:45:23,440 --> 21:45:26,960
and what we could do we could just say
25257
21:45:28,872 --> 21:45:33,600
got all the notes something like that
25258
21:45:31,440 --> 21:45:35,191
and we could actually print these notes
25259
21:45:33,600 --> 21:45:37,512
to the screen if you want to it's we
25260
21:45:44,872 --> 21:45:50,000
logs and change the screen layout
25261
21:45:48,232 --> 21:45:52,872
so you see it better and i'm just gonna
25262
21:45:52,872 --> 21:45:56,639
alright and i can see at the moment it's
25263
21:45:54,639 --> 21:46:00,399
just saying your notes so meaning that
25264
21:45:56,639 --> 21:46:01,831
we don't actually have any notes so if i
25265
21:46:01,831 --> 21:46:07,039
you can see all of a sudden we got a new
25266
21:46:04,399 --> 21:46:08,871
note populated into the database just
25267
21:46:07,039 --> 21:46:10,479
because i went here and i said i'm
25268
21:46:13,759 --> 21:46:19,831
see as i'm changing this our snapshot is
25269
21:46:18,232 --> 21:46:21,832
actually getting updated with new
25270
21:46:19,831 --> 21:46:24,080
information and it's constantly printing
25271
21:46:21,831 --> 21:46:26,399
and it's the note id is the same and you
25272
21:46:24,080 --> 21:46:29,680
can see his text is actually changing
25273
21:46:26,399 --> 21:46:31,831
and if i go out then you can see well
25274
21:46:29,679 --> 21:46:33,599
it's just at the moment says got all the
25275
21:46:31,831 --> 21:46:36,000
notes meaning that you have some notes
25276
21:46:33,600 --> 21:46:38,080
so if you're seeing a circular progress
25277
21:46:36,000 --> 21:46:39,512
indicator instead of like a text at the
25278
21:46:38,080 --> 21:46:41,512
moment that we're saying all the notes
25279
21:46:39,512 --> 21:46:43,279
it's probably because you were like me
25280
21:46:41,512 --> 21:46:46,000
and you didn't have any notes in the
25281
21:46:46,000 --> 21:46:51,440
okay now we have all the notes so how do
25282
21:46:49,119 --> 21:46:53,119
we then render these so what we need to
25283
21:46:51,440 --> 21:46:55,360
do in here we're going to say return
25284
21:46:53,119 --> 21:46:57,360
list view i'm going to change the screen
25285
21:46:59,279 --> 21:47:04,000
and you remember i mentioned before we
25286
21:47:01,831 --> 21:47:07,679
need to populate this listview with two
25287
21:47:04,000 --> 21:47:09,919
important parameters one is the item
25288
21:47:07,679 --> 21:47:13,191
count and at the moment the item count
25289
21:47:13,191 --> 21:47:17,119
and then we have our item builder get
25290
21:47:15,360 --> 21:47:19,119
some help from your editor to complete
25291
21:47:19,119 --> 21:47:23,360
build context as the first parameter of
25292
21:47:21,440 --> 21:47:25,680
type context and then you get an index
25293
21:47:25,679 --> 21:47:31,279
now inside your item builder your job is
25294
21:47:32,232 --> 21:47:35,600
signature of item builder it says it's a
25295
21:47:35,600 --> 21:47:39,680
that takes two parameters it build
25296
21:47:36,960 --> 21:47:42,400
context and an integer for the index and
25297
21:47:39,679 --> 21:47:44,319
it has to return a widget you see here
25298
21:47:42,399 --> 21:47:46,479
so you could return anything in here you
25299
21:47:44,320 --> 21:47:47,600
could just say return text item
25300
21:47:49,191 --> 21:47:53,679
it's not gonna look so pretty though
25301
21:47:51,600 --> 21:47:56,800
and actually i can see maybe did we lose
25302
21:47:56,800 --> 21:47:59,832
it is possible that there is something
25303
21:47:58,479 --> 21:48:02,479
wrong with our note 2 that it's like
25304
21:47:59,831 --> 21:48:04,159
deleting the notes it could be so i'm
25305
21:48:04,160 --> 21:48:10,720
hot reload here and my scr cpy may
25306
21:48:07,831 --> 21:48:12,399
actually die no but uh it's it worked
25307
21:48:10,720 --> 21:48:13,919
without a problem so we have an item so
25308
21:48:12,399 --> 21:48:15,360
if that's if that's what you're also
25309
21:48:13,919 --> 21:48:18,000
seeing maybe you could do a hot reload
25310
21:48:15,360 --> 21:48:20,551
because we've changed our nodes service
25311
21:48:18,000 --> 21:48:23,119
so it could be the problem that our uh
25312
21:48:20,551 --> 21:48:25,191
we just needed to do a hot reload for
25313
21:48:23,119 --> 21:48:27,679
this unlisten to actually get called all
25314
21:48:25,191 --> 21:48:29,440
right so that's what we're seeing at the
25315
21:48:27,679 --> 21:48:31,439
moment so i can see item in here and i'm
25316
21:48:29,440 --> 21:48:33,440
gonna press the plus button so and i'm
25317
21:48:31,440 --> 21:48:35,360
gonna say hello world in here
25318
21:48:33,440 --> 21:48:37,760
and i'm gonna go out and all of a sudden
25319
21:48:35,360 --> 21:48:39,680
you see two items appearing in here okay
25320
21:48:37,759 --> 21:48:42,551
but this is not so pretty because
25321
21:48:39,679 --> 21:48:45,919
displaying text on the screen
25322
21:48:42,551 --> 21:48:48,720
is not so nice and you won't have uh
25323
21:48:45,919 --> 21:48:50,959
you won't be able to easily add
25324
21:48:48,720 --> 21:48:52,160
interactions to these items because what
25325
21:48:52,160 --> 21:48:57,120
ideally is for these items to appear on
25326
21:48:54,720 --> 21:48:59,600
the list and then they have like their
25327
21:48:57,119 --> 21:49:01,440
own sizing so they have a good height so
25328
21:48:59,600 --> 21:49:03,192
that they are separated a little bit
25329
21:49:01,440 --> 21:49:05,832
from each other and as you'll see in the
25330
21:49:03,191 --> 21:49:08,080
next chapter we're going to work with um
25331
21:49:05,831 --> 21:49:09,759
deleting these items so we want the
25332
21:49:08,080 --> 21:49:12,479
ability for the user to see some sort of
25333
21:49:09,759 --> 21:49:14,871
an icon next to each item using which he
25334
21:49:12,479 --> 21:49:17,759
or she can click on that icon and delete
25335
21:49:14,872 --> 21:49:20,000
the item so text in itself is not going
25336
21:49:17,759 --> 21:49:23,119
to be able to provide us with all that
25337
21:49:20,000 --> 21:49:24,872
functionality that we need so
25338
21:49:23,119 --> 21:49:27,191
what we need is a little bit more
25339
21:49:24,872 --> 21:49:29,360
sophisticated widget and it is called
25340
21:49:27,191 --> 21:49:32,231
list tile so let's do that let's just
25341
21:49:32,232 --> 21:49:38,960
okay and our list tile is gonna have a
25342
21:49:35,679 --> 21:49:40,231
um a title so that's the only thing at
25343
21:49:38,960 --> 21:49:42,400
the moment we're gonna provide it with
25344
21:49:40,232 --> 21:49:44,232
and you can see it's a widget
25345
21:49:42,399 --> 21:49:45,759
and for the widget of this list and for
25346
21:49:44,232 --> 21:49:47,832
the title of this list style we're going
25347
21:49:47,831 --> 21:49:52,000
right there okay and i'm going to put
25348
21:49:52,000 --> 21:49:55,512
so for the text what we're going to say
25349
21:49:57,440 --> 21:50:03,040
we want to grab the text that is entered
25350
21:50:00,639 --> 21:50:06,160
in that note so you see we have all the
25351
21:50:03,039 --> 21:50:08,159
notes but we don't have the current note
25352
21:50:06,160 --> 21:50:09,919
so the current note that we're actually
25353
21:50:08,160 --> 21:50:11,919
reading its index is going to be
25354
21:50:09,919 --> 21:50:16,319
provided to us using this item builders
25355
21:50:11,919 --> 21:50:19,599
index so let's go and say final um notes
25356
21:50:16,320 --> 21:50:22,552
is all nodes at that index so that's the
25357
21:50:19,600 --> 21:50:24,552
current node that we're returning a list
25358
21:50:24,551 --> 21:50:30,479
its text is gonna be the note text as
25359
21:50:30,551 --> 21:50:34,720
uh i can see i've written tile here but
25360
21:50:34,720 --> 21:50:39,191
and in here we have to have a semicolon
25361
21:50:36,960 --> 21:50:42,080
all right so if i do command s in here
25362
21:50:39,191 --> 21:50:45,360
you can see now we have very
25363
21:50:42,080 --> 21:50:46,720
i mean a lot nicer and prettier versions
25364
21:50:45,360 --> 21:50:48,551
of those texts and you can see that
25365
21:50:46,720 --> 21:50:50,479
they're right here it says hello and
25366
21:50:48,551 --> 21:50:51,919
hello world and those are the texts that
25367
21:50:50,479 --> 21:50:56,639
we entered you can actually test that
25368
21:50:51,919 --> 21:50:57,919
and say my new my new notes is entered
25369
21:50:57,919 --> 21:51:01,831
and by pressing the back button you'll
25370
21:50:59,600 --> 21:51:04,480
see that your note is appearing on the
25371
21:51:04,479 --> 21:51:10,720
but what we want to do here is if you
25372
21:51:10,720 --> 21:51:15,759
in your notes so if i go and say here
25373
21:51:15,759 --> 21:51:23,599
long text that i've entered and i don't
25374
21:51:19,512 --> 21:51:26,720
want it all to be displayed in one tile
25375
21:51:23,600 --> 21:51:28,720
and then nodes view so we have now a
25376
21:51:28,720 --> 21:51:34,232
but this is in it in itself is going to
25377
21:51:31,831 --> 21:51:36,399
break a little bit our layout you see
25378
21:51:34,232 --> 21:51:38,480
in our notes list we don't want to
25379
21:51:36,399 --> 21:51:39,599
render the entire note we somehow want
25380
21:51:39,600 --> 21:51:43,760
the amount of information that we're
25381
21:51:40,872 --> 21:51:44,960
displaying to a size that is reasonable
25382
21:51:44,960 --> 21:51:50,320
since our notes don't have titles we
25383
21:51:47,512 --> 21:51:53,760
could infer the content of the note by
25384
21:51:50,320 --> 21:51:55,440
simply rendering just one line of text
25385
21:51:53,759 --> 21:51:57,439
and the user should be able to then say
25386
21:51:55,440 --> 21:51:59,680
oh that's what i've written kind of in
25387
21:51:57,440 --> 21:52:01,680
my notes and as you'll see in the latest
25388
21:51:59,679 --> 21:52:04,231
later chapters we are going to allow the
25389
21:52:01,679 --> 21:52:06,079
user to also click on or tap on these
25390
21:52:04,232 --> 21:52:08,080
existing notes in order to go and see
25391
21:52:06,080 --> 21:52:09,360
more information about them so
25392
21:52:08,080 --> 21:52:11,279
it's not the end of the world if you
25393
21:52:09,360 --> 21:52:13,600
don't display like the entire note to
25394
21:52:11,279 --> 21:52:15,119
the user and as you'll see when users
25395
21:52:13,600 --> 21:52:17,440
start to enter more and more information
25396
21:52:15,119 --> 21:52:19,191
in their notes it's actually not desired
25397
21:52:19,191 --> 21:52:23,360
render the entire note because imagine a
25398
21:52:21,679 --> 21:52:25,679
note is two pages long or you're gonna
25399
21:52:23,360 --> 21:52:29,119
have like two very small notes and then
25400
21:52:25,679 --> 21:52:31,599
two pages of long of one note it's it's
25401
21:52:29,119 --> 21:52:34,639
not feasible so actually it is feasible
25402
21:52:31,600 --> 21:52:36,960
but it's not a good user interface
25403
21:52:34,639 --> 21:52:39,119
so i'm going to put a comma here
25404
21:52:36,960 --> 21:52:42,000
and i'm just going to use a property in
25405
21:52:39,119 --> 21:52:44,799
our text called max lines and i'm just
25406
21:52:47,919 --> 21:52:51,919
then what we're going to do is to make
25407
21:52:49,679 --> 21:52:54,231
sure that the user kind of understands
25408
21:52:51,919 --> 21:52:56,479
that there is more information in here
25409
21:52:54,232 --> 21:52:59,512
than what we are rendering so we want to
25410
21:52:56,479 --> 21:53:01,191
put like ellipses at the end of the text
25411
21:53:01,191 --> 21:53:06,159
space to render themselves fully so
25412
21:53:06,160 --> 21:53:09,832
and as you can see the information is
25413
21:53:07,759 --> 21:53:12,871
whether the text should break at soft
25414
21:53:09,831 --> 21:53:15,919
line breaks so make sure that it's true
25415
21:53:12,872 --> 21:53:17,680
and then we're going to say overflow
25416
21:53:15,919 --> 21:53:19,039
and we're going to say text overflow
25417
21:53:22,160 --> 21:53:25,919
it says here's a very long text blah
25418
21:53:23,831 --> 21:53:27,759
blah blah and then dot dot so this is a
25419
21:53:25,919 --> 21:53:30,000
good indication then to all users to
25420
21:53:27,759 --> 21:53:32,399
know that well there's more information
25421
21:53:30,000 --> 21:53:34,080
to be rendered but there's not enough
25422
21:53:32,399 --> 21:53:37,360
space for that information to be
25423
21:53:34,080 --> 21:53:37,360
rendered on the screen right now
25424
21:53:37,679 --> 21:53:42,159
all right so i think i mean we've looked
25425
21:53:40,160 --> 21:53:44,080
at how that all works we've actually
25426
21:53:42,160 --> 21:53:45,680
demoed it so we don't have to do a
25427
21:53:44,080 --> 21:53:47,831
separate demo for this we've been
25428
21:53:45,679 --> 21:53:49,919
looking at it as we've been developing
25429
21:53:47,831 --> 21:53:51,759
and the application and that's one of
25430
21:53:52,551 --> 21:53:57,119
we don't have to do anything about this
25431
21:53:58,551 --> 21:54:02,479
you will probably be surprised that this
25432
21:54:00,551 --> 21:54:04,479
is all we have to do right now for the
25433
21:54:02,479 --> 21:54:05,919
notes view there's not much more to work
25434
21:54:06,960 --> 21:54:10,639
we were able to at the moment create new
25435
21:54:09,119 --> 21:54:13,599
notes and we're able to display those
25436
21:54:10,639 --> 21:54:15,831
notes and one at a time inside this list
25437
21:54:13,600 --> 21:54:18,639
view builder so you'll learn how to use
25438
21:54:15,831 --> 21:54:21,279
the list view builder as well
25439
21:54:18,639 --> 21:54:23,600
and what we can do as is a tradition
25440
21:54:21,279 --> 21:54:25,119
we're gonna go and commit and tag our
25441
21:54:25,119 --> 21:54:27,679
i'm gonna do some reshuffling on the
25442
21:54:27,679 --> 21:54:30,399
so you see what i'm doing a little bit
25443
21:54:32,160 --> 21:54:37,832
my built-in terminal here and we're
25444
21:54:34,800 --> 21:54:39,680
gonna have a look at the status
25445
21:54:37,831 --> 21:54:41,360
can see there are two files changed so
25446
21:54:42,800 --> 21:54:48,232
and let's commit this as step 15 and
25447
21:54:45,831 --> 21:54:50,159
before committing it you can see your
25448
21:54:48,232 --> 21:54:51,600
git lock from before the last commit was
25449
21:54:51,600 --> 21:54:57,440
so and you can also look at all the tags
25450
21:54:57,440 --> 21:55:02,872
so let's go ahead and say git commit
25451
21:55:02,872 --> 21:55:06,639
now i'm going to push that commit to
25452
21:55:04,720 --> 21:55:09,191
github or if you're using bitbucket or
25453
21:55:06,639 --> 21:55:11,759
any other provider that's fine too
25454
21:55:09,191 --> 21:55:13,759
and i'm going to tag this as step
25455
21:55:13,759 --> 21:55:17,279
and then we're going to push our tags
25456
21:55:17,512 --> 21:55:22,872
great that part is now done so we've
25457
21:55:20,320 --> 21:55:24,480
done what we promised to do in this
25458
21:55:24,479 --> 21:55:28,319
the next thing that we have to talk
25459
21:55:26,551 --> 21:55:30,720
about as a tradition in all the other
25460
21:55:28,320 --> 21:55:31,600
chapters is at the end of every chapter
25461
21:55:30,720 --> 21:55:34,720
we'll talk about what we're going to
25462
21:55:31,600 --> 21:55:37,440
talk about in the next chapter and you
25463
21:55:34,720 --> 21:55:40,399
can see that we are able to create notes
25464
21:55:37,440 --> 21:55:42,232
uh we're not able yet to update notes
25465
21:55:40,399 --> 21:55:44,231
we're going to get there soon but we
25466
21:55:42,232 --> 21:55:46,400
also need to allow the user to delete
25467
21:55:46,399 --> 21:55:49,919
that's exactly actually what we're gonna
25468
21:55:48,320 --> 21:55:51,440
take care of in the next chapter and the
25469
21:55:49,919 --> 21:55:53,360
next chapter is not gonna be a huge
25470
21:55:51,440 --> 21:55:55,191
chapter either just like this one so
25471
21:55:53,360 --> 21:55:57,831
it's gonna go very smooth but we're
25472
21:55:55,191 --> 21:56:00,399
gonna do some quite heavy refactoring on
25473
21:55:57,831 --> 21:56:02,720
our project as you'll soon see so
25474
21:56:00,399 --> 21:56:05,039
grab some refreshments if you want and
25475
21:56:02,720 --> 21:56:07,279
i'll see you in the next chapter
25476
21:56:05,039 --> 21:56:08,871
hello everyone and welcome to chapter 33
25477
21:56:08,872 --> 21:56:13,600
in the previous chapters we've been
25478
21:56:10,399 --> 21:56:16,159
talking about how to create new notes
25479
21:56:13,600 --> 21:56:17,279
and how also to display those notes on
25480
21:56:17,279 --> 21:56:21,679
um and now it would make sense for any
25481
21:56:19,919 --> 21:56:23,831
user of our application to be able to
25482
21:56:21,679 --> 21:56:24,799
delete the notes that they've created
25483
21:56:24,800 --> 21:56:28,479
and we are not right now giving that
25484
21:56:27,119 --> 21:56:31,039
functionality to the user and that's
25485
21:56:28,479 --> 21:56:32,000
exactly what we're gonna work on in this
25486
21:56:32,000 --> 21:56:35,679
and just a heads up we're gonna work
25487
21:56:33,512 --> 21:56:37,440
quite a bit with refactoring so things
25488
21:56:35,679 --> 21:56:39,359
are gonna get a little bit uncomfortable
25489
21:56:37,440 --> 21:56:41,360
where the code isn't gonna compile but
25490
21:56:41,360 --> 21:56:46,479
and right after breaking it so we're
25491
21:56:43,831 --> 21:56:48,159
going to work a little bit about on our
25492
21:56:48,160 --> 21:56:52,552
you see we have a few dialogues at the
25493
21:56:50,080 --> 21:56:54,479
moment that appear on the screen and for
25494
21:56:56,551 --> 21:57:00,551
or to the user where we for instance say
25495
21:56:58,479 --> 21:57:02,720
oh you couldn't log in or oh your
25496
21:57:00,551 --> 21:57:05,599
password was incorrect or we couldn't
25497
21:57:02,720 --> 21:57:07,440
register this user because it's a a weak
25498
21:57:07,440 --> 21:57:11,512
so that's like our error dialogues and
25499
21:57:09,360 --> 21:57:13,279
we also have a dialogue that we display
25500
21:57:11,512 --> 21:57:15,040
to the user when he or she's trying to
25501
21:57:13,279 --> 21:57:17,600
log out of the application so we have
25502
21:57:17,600 --> 21:57:22,080
and in this chapter what we're going to
25503
21:57:19,512 --> 21:57:24,000
do is we're going to consolidate how we
25504
21:57:22,080 --> 21:57:27,040
also display our dialogues to the user
25505
21:57:27,039 --> 21:57:30,799
functionality because you see the delete
25506
21:57:29,191 --> 21:57:32,159
part as well the way we're going to do
25507
21:57:30,800 --> 21:57:33,600
it is we're going to let me actually
25508
21:57:36,160 --> 21:57:39,440
how we're going to do it is that we're
25509
21:57:37,440 --> 21:57:40,872
going to put a little delete icon next
25510
21:57:39,440 --> 21:57:42,400
to every item on the list and we're
25511
21:57:40,872 --> 21:57:45,192
going to allow the user to tap on those
25512
21:57:42,399 --> 21:57:47,039
icons in order to display a dialogue
25513
21:57:45,191 --> 21:57:49,279
now this is going to be the third
25514
21:57:47,039 --> 21:57:51,360
dialogue and um a colleague of mine that
25515
21:57:49,279 --> 21:57:54,160
i work with which i really admire his
25516
21:57:51,360 --> 21:57:56,080
way of working he mentions that he makes
25517
21:57:56,080 --> 21:58:01,440
he gets to the third time of doing the
25518
21:57:58,720 --> 21:58:04,479
same thing again so now we've written
25519
21:58:01,440 --> 21:58:06,551
two dialogues to this point and we also
25520
21:58:04,479 --> 21:58:08,000
now need a third dialogue and that's the
25521
21:58:06,551 --> 21:58:10,399
point that maybe we should actually
25522
21:58:08,000 --> 21:58:11,831
consolidate all our dialogue displaying
25523
21:58:11,831 --> 21:58:16,639
function and then from other functions
25524
21:58:13,831 --> 21:58:18,799
we're just gonna reuse that okay
25525
21:58:16,639 --> 21:58:21,191
so that's what we're gonna do in this
25526
21:58:21,191 --> 21:58:24,959
so let's have a look at the code a
25527
21:58:33,679 --> 21:58:37,439
so these this is our application the way
25528
21:58:35,360 --> 21:58:40,551
we've listed left it at the moment
25529
21:58:37,440 --> 21:58:43,191
so like that visual studio code and we
25530
21:58:40,551 --> 21:58:45,759
have a cr cpy there as well okay
25531
21:58:43,191 --> 21:58:46,871
so let's then have a look at our as a
25532
21:58:45,759 --> 21:58:47,831
caption in case we're going to have a
25533
21:58:47,831 --> 21:58:53,919
our error dialog so let's go ahead in
25534
21:58:54,399 --> 21:58:58,799
let's see what we have constant services
25535
21:58:56,160 --> 21:59:00,639
crowd utilities we have and we have a
25536
21:58:58,800 --> 21:59:03,040
function here called show error dialog
25537
21:59:00,639 --> 21:59:05,679
which in turn says show dialog and then
25538
21:59:05,679 --> 21:59:10,871
then if you have a look at how this is
25539
21:59:08,551 --> 21:59:14,479
constructed the only thing it's doing is
25540
21:59:10,872 --> 21:59:17,680
saying like hey i have um hey i have a
25541
21:59:14,479 --> 21:59:19,279
title then i have just one action with a
25542
21:59:19,279 --> 21:59:24,319
and also and that action doesn't return
25543
21:59:24,320 --> 21:59:30,160
we i have some text to display all right
25544
21:59:26,639 --> 21:59:32,479
great now let's go to our notes view if
25545
21:59:30,160 --> 21:59:34,400
you look at our notes view at the end of
25546
21:59:35,919 --> 21:59:40,479
what does this do it's the same thing it
25547
21:59:37,919 --> 21:59:43,191
has show dialog it has an alert dialog
25548
21:59:40,479 --> 21:59:45,919
inside it it has a title and some text
25549
21:59:43,191 --> 21:59:48,000
but it has two actions and these actions
25550
21:59:45,919 --> 21:59:49,360
they do different things so one action
25551
21:59:49,360 --> 21:59:53,360
if it sends a value of false the other
25552
21:59:51,279 --> 21:59:54,872
one sends the value of true so
25553
21:59:53,360 --> 21:59:56,479
every dialogue that appears to the
25554
21:59:54,872 --> 21:59:57,512
screen so let's say this one for
25555
21:59:57,512 --> 22:00:00,639
our logout dialog that's the one we're
25556
22:00:00,639 --> 22:00:05,440
the cancel button sends a false value
25557
22:00:03,039 --> 22:00:07,119
and the log out button sends a true
25558
22:00:07,119 --> 22:00:11,279
the dialogs are all very similar they
25559
22:00:08,960 --> 22:00:14,552
have a title they have some contents and
25560
22:00:11,279 --> 22:00:16,080
they have some actions that the user can
25561
22:00:14,551 --> 22:00:18,399
take on those dialogues and these
25562
22:00:16,080 --> 22:00:20,720
actions then have their own values and
25563
22:00:18,399 --> 22:00:22,231
that's what we're going to do in our
25564
22:00:20,720 --> 22:00:24,479
application right now is that we're
25565
22:00:22,232 --> 22:00:26,552
going to consolidate all these into one
25566
22:00:24,479 --> 22:00:29,119
generic function that is going to kind
25567
22:00:26,551 --> 22:00:31,512
of allow us to customize it to our needs
25568
22:00:32,800 --> 22:00:37,120
let's have a look at how we can achieve
25569
22:00:35,039 --> 22:00:39,119
this so as the caption indicates here
25570
22:00:37,119 --> 22:00:40,639
we're first going to cut things from the
25571
22:00:39,119 --> 22:00:42,871
source and that's like the strategy that
25572
22:00:40,639 --> 22:00:44,872
i use a lot in software development so
25573
22:00:42,872 --> 22:00:47,440
if i'm gonna disrupt things and i'm
25574
22:00:44,872 --> 22:00:49,440
gonna like change the way things work
25575
22:00:47,440 --> 22:00:50,960
i'm not gonna be scared and i'm really
25576
22:00:50,960 --> 22:00:56,000
making things break and i in my opinion
25577
22:00:54,399 --> 22:00:57,191
you may think differently but in my
25578
22:00:56,000 --> 22:00:59,831
opinion it's really good to cut things
25579
22:00:57,191 --> 22:01:01,679
from the source break the code and then
25580
22:00:59,831 --> 22:01:03,831
start fixing things one at a time
25581
22:01:01,679 --> 22:01:05,599
instead of trying to make sure nothing
25582
22:01:03,831 --> 22:01:07,191
breaks while you're refactoring the code
25583
22:01:05,600 --> 22:01:08,400
so that's what we're going to do here as
25584
22:01:07,191 --> 22:01:10,399
the caption indicates we're going to go
25585
22:01:10,399 --> 22:01:14,479
let's see if you can find it i like to
25586
22:01:12,080 --> 22:01:16,400
use command p in visual studio code i'm
25587
22:01:14,479 --> 22:01:17,279
going to say the show error dialog in
25588
22:01:17,279 --> 22:01:21,279
and what we're going to do is just we're
25589
22:01:18,960 --> 22:01:22,960
going to remove all this code that is
25590
22:01:25,831 --> 22:01:30,159
and what we're also going to do is um as
25591
22:01:28,232 --> 22:01:32,000
the cache indicates remove the show log
25592
22:01:30,160 --> 22:01:34,639
out the dialog from notes view since
25593
22:01:32,000 --> 22:01:36,639
we're going to have a generic one so go
25594
22:01:38,000 --> 22:01:41,831
remove this show log out dialog all
25595
22:01:41,831 --> 22:01:46,159
we're gonna get errors that's okay and
25596
22:01:44,639 --> 22:01:48,479
you know this code that we removed also
25597
22:01:46,160 --> 22:01:49,760
here show error dialog is used quite a
25598
22:01:49,759 --> 22:01:52,959
by removing it if i like search for show
25599
22:01:51,759 --> 22:01:55,759
air dollar you can see we're actually
25600
22:01:52,960 --> 22:01:57,440
using in seven places so all of those
25601
22:01:55,759 --> 22:01:59,831
places are now gonna have an error
25602
22:01:57,440 --> 22:02:03,360
that's okay fine we're gonna fix that
25603
22:01:59,831 --> 22:02:03,360
soon so don't worry about that
25604
22:02:03,919 --> 22:02:08,959
all right so what we need to do in here
25605
22:02:06,320 --> 22:02:11,512
is before we fix all of that we're gonna
25606
22:02:11,512 --> 22:02:16,080
creating our notes list view all right
25607
22:02:16,080 --> 22:02:20,800
at the moment if you look at our notes
25608
22:02:20,800 --> 22:02:25,760
this beauty in here which is doing quite
25609
22:02:23,512 --> 22:02:27,832
a lot of work as you can see it's it has
25610
22:02:25,759 --> 22:02:29,679
a future builder inside the body of the
25611
22:02:27,831 --> 22:02:32,080
notes view and it has a stream builder
25612
22:02:29,679 --> 22:02:33,919
and a lot of code in here it would be
25613
22:02:32,080 --> 22:02:36,232
really great if you could separate this
25614
22:02:33,919 --> 22:02:38,639
code into its own place and we could
25615
22:02:36,232 --> 22:02:40,320
call this widget like a notes list view
25616
22:02:38,639 --> 22:02:43,759
and that's exactly what we're going to
25617
22:02:40,320 --> 22:02:46,480
do in this chapter so let's go ahead
25618
22:02:49,831 --> 22:02:55,439
views inside notes let's create a new
25619
22:02:51,831 --> 22:02:55,439
file and we're going to call it notes
25620
22:02:59,831 --> 22:03:03,599
and in in notes list view what we're
25621
22:03:02,080 --> 22:03:05,440
going to do is going to say the notes
25622
22:03:03,600 --> 22:03:08,552
list view is a stateless widget so we
25623
22:03:05,440 --> 22:03:10,232
create a stl which is a stateless widget
25624
22:03:08,551 --> 22:03:11,119
and we're going to call it notes list
25625
22:03:11,119 --> 22:03:14,080
as we've seen it before we need to
25626
22:03:12,720 --> 22:03:15,440
import material so i'm going to do that
25627
22:03:14,080 --> 22:03:17,512
right now so all those errors are going
25628
22:03:18,479 --> 22:03:22,000
what we need to do is we need to
25629
22:03:22,000 --> 22:03:28,320
a a list of notes to this notes list
25630
22:03:25,512 --> 22:03:30,400
view so that it can render them because
25631
22:03:28,320 --> 22:03:33,360
you see all the logic for retrieving the
25632
22:03:30,399 --> 22:03:35,831
notes can stay still in the notes view
25633
22:03:33,360 --> 22:03:37,759
but all notes list view is interested in
25634
22:03:37,759 --> 22:03:42,639
to display so let's go and expose that
25635
22:03:40,551 --> 22:03:44,479
as a parameter in our notes list view so
25636
22:03:47,191 --> 22:03:51,512
and you can see database node is not
25637
22:03:49,039 --> 22:03:53,191
imported right now but visual studio
25638
22:03:51,512 --> 22:03:55,040
code is going to be smart enough to
25639
22:03:58,800 --> 22:04:02,639
if your editor like if you're using vim
25640
22:04:00,872 --> 22:04:04,232
or something on linux or even mac and
25641
22:04:02,639 --> 22:04:06,800
windows if you're using that you may
25642
22:04:04,232 --> 22:04:09,760
have to import these things manually so
25643
22:04:06,800 --> 22:04:11,192
um but the import statements i believe i
25644
22:04:09,759 --> 22:04:12,720
mean if you've gotten to this point in
25645
22:04:13,512 --> 22:04:17,832
like savvy enough and you should know
25646
22:04:15,759 --> 22:04:20,000
all these things enough in order to be
25647
22:04:17,831 --> 22:04:21,679
able to solve that yourself so
25648
22:04:20,000 --> 22:04:23,512
um so i'm not going to repeat all that
25649
22:04:21,679 --> 22:04:26,399
information again just make sure that
25650
22:04:23,512 --> 22:04:28,551
your database note is in context in at
25651
22:04:28,551 --> 22:04:32,872
so that's going to be our notes
25652
22:04:30,232 --> 22:04:34,800
and also this notes view as i mentioned
25653
22:04:32,872 --> 22:04:35,919
in the previous chapter but maybe it's
25654
22:04:34,800 --> 22:04:37,512
actually worth mentioning in this
25655
22:04:35,919 --> 22:04:39,039
chapter because it's very relevant what
25656
22:04:39,039 --> 22:04:45,191
beside every note to the right hand side
25657
22:04:41,759 --> 22:04:47,919
as the trailing tile widget we're going
25658
22:04:45,191 --> 22:04:50,720
to display a little like a trashcan icon
25659
22:04:47,919 --> 22:04:52,831
that the user can tap on in order to
25660
22:04:54,399 --> 22:04:57,511
and what we're going to do then is to
25661
22:05:02,639 --> 22:05:08,399
call a little function to show a delete
25662
22:05:06,080 --> 22:05:09,919
dialog to the user so upon you pressing
25663
22:05:08,399 --> 22:05:11,679
the delete button we're going to display
25664
22:05:09,919 --> 22:05:13,279
a dialogue and the delete dialog is
25665
22:05:11,679 --> 22:05:14,871
going to be very similar to log out like
25666
22:05:14,872 --> 22:05:17,680
deleting this note are you sure
25667
22:05:17,679 --> 22:05:22,479
that dialog is going to have two buttons
25668
22:05:20,000 --> 22:05:24,000
yes or no or something like that
25669
22:05:22,479 --> 22:05:25,759
and upon pressing no we're just going to
25670
22:05:24,000 --> 22:05:27,191
dismiss the dialogue upon pressing yes
25671
22:05:25,759 --> 22:05:30,080
then we're going to delete that note
25672
22:05:27,191 --> 22:05:32,720
from the database all right
25673
22:05:30,080 --> 22:05:35,279
so what we need is you can see the notes
25674
22:05:32,720 --> 22:05:38,320
list view at the moment isn't like it
25675
22:05:35,279 --> 22:05:40,551
shouldn't have any connection with the
25676
22:05:38,320 --> 22:05:42,480
notes service it should be the notes
25677
22:05:40,551 --> 22:05:44,872
view that has that connection so this is
25678
22:05:44,872 --> 22:05:49,279
like do your components in flutter in
25679
22:05:47,191 --> 22:05:52,080
that you shouldn't leak your services
25680
22:05:49,279 --> 22:05:54,551
everywhere so if the notes list view
25681
22:05:52,080 --> 22:05:57,759
could somehow delegate the deletion task
25682
22:05:54,551 --> 22:05:59,831
to the notes view that would be ideal so
25683
22:05:57,759 --> 22:06:02,319
the notes list view could display the
25684
22:05:59,831 --> 22:06:04,479
dialogue it could just say hey
25685
22:06:02,320 --> 22:06:06,552
are you sure and if the user then says
25686
22:06:04,479 --> 22:06:09,191
yes the notes list view could then
25687
22:06:06,551 --> 22:06:11,360
delegate this information back to its
25688
22:06:09,191 --> 22:06:14,319
parent and say hey do something with
25689
22:06:14,399 --> 22:06:19,919
so let's then go and create a little
25690
22:06:16,639 --> 22:06:21,831
callback definition using typedef
25691
22:06:21,831 --> 22:06:27,831
and we're going to call it delete note
25692
22:06:24,232 --> 22:06:30,960
callback okay and this is a void
25693
22:06:27,831 --> 22:06:35,831
function that takes a database note
25694
22:06:38,320 --> 22:06:44,320
we're saying we're defining a function
25695
22:06:42,080 --> 22:06:46,232
that we're then going to use in our
25696
22:06:44,320 --> 22:06:48,800
nodes list view which we call we which
25697
22:06:48,800 --> 22:06:52,160
that will be called when the user
25698
22:06:52,160 --> 22:06:55,919
this hypothetical dialogue that we're
25699
22:06:53,831 --> 22:06:57,679
assuming gonna display that user okay so
25700
22:06:55,919 --> 22:07:00,959
let's go in here and define that let's
25701
22:06:57,679 --> 22:07:04,231
just say um delete node callback and
25702
22:07:00,960 --> 22:07:06,639
we're just going to say on delete nodes
25703
22:07:04,232 --> 22:07:08,400
so this is our callback and you're now
25704
22:07:06,639 --> 22:07:09,679
getting some errors from a flutter
25705
22:07:08,399 --> 22:07:11,759
saying that these parameters aren't
25706
22:07:09,679 --> 22:07:13,919
defined so i'm going to use visual
25707
22:07:11,759 --> 22:07:16,000
studio code and to say define these
25708
22:07:16,000 --> 22:07:20,720
i'm also going to make them require
25709
22:07:23,039 --> 22:07:28,319
so that's great we have still some
25710
22:07:28,320 --> 22:07:34,080
but we're going to continue building
25711
22:07:30,080 --> 22:07:34,080
until we can fix all these errors okay
25712
22:07:34,160 --> 22:07:40,080
all right that's fantastic so that's the
25713
22:07:37,039 --> 22:07:43,191
first part that we have to work on so
25714
22:07:40,080 --> 22:07:45,360
let's then go ahead and um take our
25715
22:07:43,191 --> 22:07:47,440
notes view the way it is right here and
25716
22:07:45,360 --> 22:07:50,000
you see we already have a list view
25717
22:07:47,440 --> 22:07:51,119
builder i'm just gonna go and grab this
25718
22:07:52,960 --> 22:07:58,000
and i'm i'm actually gonna cut that and
25719
22:07:55,512 --> 22:08:01,040
bring it into nodes list view inside the
25720
22:07:58,000 --> 22:08:02,800
build function alright so inside instead
25721
22:08:01,039 --> 22:08:05,191
of returning a container i'm just gonna
25722
22:08:02,800 --> 22:08:07,760
return that code that i've just pasted
25723
22:08:07,759 --> 22:08:11,599
it looks absolutely horrible at the
25724
22:08:09,360 --> 22:08:12,720
moment it's because i mean we have so
25725
22:08:12,720 --> 22:08:16,551
but i actually like that kind of stuff
25726
22:08:14,639 --> 22:08:18,160
to be honest with you some developers
25727
22:08:16,551 --> 22:08:19,360
get nervous when they have lots of
25728
22:08:18,160 --> 22:08:21,832
errors in their code and they just want
25729
22:08:19,360 --> 22:08:24,080
to patch them up as soon as they can
25730
22:08:21,831 --> 22:08:27,191
but we're gonna work just one step at a
25731
22:08:24,080 --> 22:08:29,360
time as we say in sweden we say
25732
22:08:27,191 --> 22:08:31,119
it means one step at a time
25733
22:08:29,360 --> 22:08:32,320
we're going to fix these errors and at
25734
22:08:31,119 --> 22:08:35,440
the end of this chapter everything's
25735
22:08:35,440 --> 22:08:38,960
so let's go in here you can see the
25736
22:08:36,960 --> 22:08:41,120
first error that we have is all notes
25737
22:08:38,960 --> 22:08:42,720
and what all notes is giving us an error
25738
22:08:41,119 --> 22:08:44,479
for is that it doesn't exist in this
25739
22:08:42,720 --> 22:08:46,872
context and that's because we have
25740
22:08:44,479 --> 22:08:48,720
something called notes all right so
25741
22:08:50,399 --> 22:08:53,831
and in here we don't have all notes
25742
22:08:51,831 --> 22:08:54,799
either so we're just going to say notes
25743
22:08:56,872 --> 22:09:00,720
is going to be extracted from notes at
25744
22:09:00,720 --> 22:09:05,360
and the exciting part now is that
25745
22:09:02,960 --> 22:09:07,120
we don't just use the title property of
25746
22:09:05,360 --> 22:09:09,440
our list tile anymore we're going to
25747
22:09:07,119 --> 22:09:12,639
start using something called trailing
25748
22:09:09,440 --> 22:09:14,232
and trailing is a as a property of list
25749
22:09:12,639 --> 22:09:15,600
tile that as its name indicates it's
25750
22:09:15,600 --> 22:09:20,160
specify a widget that needs to be
25751
22:09:17,119 --> 22:09:21,831
displayed at the end or the trail of
25752
22:09:21,831 --> 22:09:25,679
and this is where we're going to use an
25753
22:09:25,679 --> 22:09:31,439
to display our little trash can okay so
25754
22:09:31,600 --> 22:09:35,920
and in this icon button what we're going
25755
22:09:33,360 --> 22:09:37,831
to do then is we're going to define the
25756
22:09:37,831 --> 22:09:43,439
which looks like this and it's icon then
25757
22:09:40,639 --> 22:09:45,119
it's going to be icon of icons delete i
25758
22:09:45,119 --> 22:09:48,319
let's have a look at how delete looks
25759
22:09:46,960 --> 22:09:50,000
like and you can see it's a little trash
25760
22:09:50,000 --> 22:09:55,279
fantastic and make this cons to make the
25761
22:09:52,800 --> 22:09:57,279
analyzer happy as well all right
25762
22:09:55,279 --> 22:09:59,191
so what do we do i'm pressed so what we
25763
22:09:57,279 --> 22:10:00,551
need to do on press is as i mentioned
25764
22:09:59,191 --> 22:10:03,599
before we need to take care of the
25765
22:10:00,551 --> 22:10:05,831
displaying of a dialogue that says
25766
22:10:03,600 --> 22:10:08,320
let's just call the show delete dialogue
25767
22:10:05,831 --> 22:10:10,231
okay so this show delete dialogue we're
25768
22:10:08,320 --> 22:10:12,640
going to call it and we expect it to
25769
22:10:12,639 --> 22:10:17,600
remember we haven't implemented the show
25770
22:10:17,600 --> 22:10:23,040
we can put some constraints on the
25771
22:10:20,160 --> 22:10:25,360
interface of this function yet but it
25772
22:10:23,039 --> 22:10:28,159
doesn't yet exist so let's just say that
25773
22:10:25,360 --> 22:10:30,320
this function show delete dialog takes a
25774
22:10:28,160 --> 22:10:32,800
build context and it returns true or
25775
22:10:30,320 --> 22:10:35,192
false to us so if the user says yes i
25776
22:10:32,800 --> 22:10:36,479
want to delete some item then it it
25777
22:10:36,479 --> 22:10:41,279
if it's if the user says no then this
25778
22:10:38,639 --> 22:10:44,399
dialog should return false to us okay
25779
22:10:41,279 --> 22:10:46,399
so let's go ahead and say final should
25780
22:10:48,720 --> 22:10:53,119
and when you're using a weight you need
25781
22:10:50,551 --> 22:10:54,720
to make your own press function async
25782
22:10:53,119 --> 22:10:56,720
then we're going to say await show
25783
22:10:54,720 --> 22:10:59,680
delete dialog we don't have that
25784
22:10:56,720 --> 22:11:01,600
function remember but that's okay
25785
22:11:03,279 --> 22:11:07,119
okay if this is boolean then we say if
25786
22:11:07,119 --> 22:11:12,000
then what we're going to do is we say
25787
22:11:09,512 --> 22:11:14,960
and we call our on deletes notes with
25788
22:11:16,872 --> 22:11:21,440
just the implementation of this widget
25789
22:11:22,960 --> 22:11:27,120
but don't worry about these errors we're
25790
22:11:27,119 --> 22:11:30,720
and just save this file as well
25791
22:11:30,800 --> 22:11:35,120
now we need to move to the next item and
25792
22:11:33,191 --> 22:11:37,119
that's our own generic dialogue you can
25793
22:11:39,512 --> 22:11:45,440
which is so important because pretty
25794
22:11:42,320 --> 22:11:47,040
much this show generic dialogue and the
25795
22:11:45,440 --> 22:11:49,119
variations that we're going to create on
25796
22:11:47,039 --> 22:11:51,039
it is going to fix all these errors that
25797
22:11:49,119 --> 22:11:52,720
we have in our application right now so
25798
22:11:51,039 --> 22:11:54,551
i'm actually happy to start working on
25799
22:11:54,551 --> 22:11:58,551
so as the caption indicates we're going
25800
22:11:56,639 --> 22:12:02,319
to create a file in lib utilities
25801
22:11:58,551 --> 22:12:04,800
dialogues generic dialogue dart so we
25802
22:12:02,320 --> 22:12:07,920
have what folders do we have in here we
25803
22:12:04,800 --> 22:12:09,600
have lib consonants enums services
25804
22:12:09,600 --> 22:12:14,552
but inside utilities we don't have at
25805
22:12:14,551 --> 22:12:19,512
dialogues folder and remember that we
25806
22:12:17,119 --> 22:12:22,080
removed all the contents of this show
25807
22:12:19,512 --> 22:12:24,479
error dialog let's just delete the file
25808
22:12:22,080 --> 22:12:26,960
now we don't need that so i'm just gonna
25809
22:12:24,479 --> 22:12:29,360
delete it and move it to trash
25810
22:12:26,960 --> 22:12:31,280
so now inside utilities we have nothing
25811
22:12:29,360 --> 22:12:33,600
so let's go create this new file as the
25812
22:12:31,279 --> 22:12:36,000
caption indicates we're gonna say it's
25813
22:12:33,600 --> 22:12:38,872
gonna be inside a folder called dialogs
25814
22:12:36,000 --> 22:12:41,872
and we're going to call it generic
25815
22:12:42,800 --> 22:12:47,279
all right i'm going to get rid of the
25816
22:12:44,399 --> 22:12:51,831
sidebar and we now need to start
25817
22:12:47,279 --> 22:12:51,831
implementing our generic dialogue
25818
22:12:53,119 --> 22:12:58,799
show generic dialogue is going to be a
25819
22:12:55,440 --> 22:12:59,919
little bit complicated and um
25820
22:12:58,800 --> 22:13:01,279
and i'm saying it a little bit
25821
22:12:59,919 --> 22:13:02,720
complicated simply because it's going to
25822
22:13:07,191 --> 22:13:13,119
decided to make it generic is as the
25823
22:13:13,119 --> 22:13:17,191
generic dialogue i mean the file also
25824
22:13:15,440 --> 22:13:18,551
says generic dialect so you need to kind
25825
22:13:17,191 --> 22:13:20,551
of know already what you're getting
25826
22:13:20,551 --> 22:13:25,039
the reason it has to be generic is that
25827
22:13:22,479 --> 22:13:27,279
it needs to be able to produce
25828
22:13:25,039 --> 22:13:29,360
different sorts of values let's go to
25829
22:13:27,279 --> 22:13:31,600
our notes list view and you see here
25830
22:13:29,360 --> 22:13:33,440
we're going to say show delete dialog a
25831
22:13:31,600 --> 22:13:35,040
function we haven't implemented yet and
25832
22:13:33,440 --> 22:13:37,440
show delete dialogue all of a sudden
25833
22:13:35,039 --> 22:13:39,599
it's going to return true or false okay
25834
22:13:37,440 --> 22:13:42,320
that's one thing how about in the case
25835
22:13:39,600 --> 22:13:44,552
of login view so let's go to login view
25836
22:13:42,320 --> 22:13:46,720
how about this case show air dot log
25837
22:13:44,551 --> 22:13:48,639
remember show error dialog is a is also
25838
22:13:46,720 --> 22:13:51,119
a function we're soon gonna develop
25839
22:13:48,639 --> 22:13:52,399
which we have before we we killed it we
25840
22:13:51,119 --> 22:13:54,159
have to develop a new function called
25841
22:13:52,399 --> 22:13:56,479
show air dialog which in turn is gonna
25842
22:13:54,160 --> 22:13:59,192
use our generic dialog but in this case
25843
22:13:56,479 --> 22:14:00,872
it's not gonna return true or false so
25844
22:13:59,191 --> 22:14:03,360
we need to make sure our generic
25845
22:14:00,872 --> 22:14:06,720
dialogue as its name indicates is a
25846
22:14:03,360 --> 22:14:09,279
generic function that can based on what
25847
22:14:06,720 --> 22:14:11,119
you provide to it is able to return
25848
22:14:11,119 --> 22:14:16,159
and what i mean by what you provide to
25849
22:14:16,160 --> 22:14:20,552
every option or every button that is
25850
22:14:18,479 --> 22:14:22,479
displayed in our generic dialog is gonna
25851
22:14:22,479 --> 22:14:27,599
we're gonna assume that all the buttons
25852
22:14:24,720 --> 22:14:28,720
that you display in any given dialog is
25853
22:14:28,720 --> 22:14:34,320
values of the exact same type so a
25854
22:14:31,679 --> 22:14:35,679
dialogue that shows a yes or no button
25855
22:14:35,679 --> 22:14:40,159
two buttons each of which contains a
25856
22:14:37,919 --> 22:14:42,551
boolean value one true the other one
25857
22:14:40,160 --> 22:14:44,480
false or maybe you want to display 10
25858
22:14:42,551 --> 22:14:46,720
buttons and two of them have the value
25859
22:14:44,479 --> 22:14:49,039
of true and the other one had the others
25860
22:14:46,720 --> 22:14:50,479
8 have the value of false but what i
25861
22:14:49,039 --> 22:14:52,159
mean is that the buttons inside your
25862
22:14:50,479 --> 22:14:54,872
generic dialogue are going to have the
25863
22:14:54,872 --> 22:14:58,639
so we're going to call that data type t
25864
22:14:58,639 --> 22:15:02,960
let's go ahead and define this um show
25865
22:15:01,512 --> 22:15:05,279
generic dialogue so we're going to say
25866
22:15:02,960 --> 22:15:06,400
that this dialogue actually returns
25867
22:15:09,360 --> 22:15:13,279
and um what we're going to say we're
25868
22:15:18,232 --> 22:15:21,279
it's a function signature it kind of
25869
22:15:21,279 --> 22:15:26,160
all right so what does it actually mean
25870
22:15:23,831 --> 22:15:27,679
t optional and that's because remember
25871
22:15:26,160 --> 22:15:29,279
on android for instance when you display
25872
22:15:27,679 --> 22:15:31,599
a dialog to the user the user can
25873
22:15:29,279 --> 22:15:33,191
actually press the hardware down button
25874
22:15:31,600 --> 22:15:34,960
in order to dismiss a dialog without
25875
22:15:33,191 --> 22:15:35,759
actually responding to it and ios is
25876
22:15:35,759 --> 22:15:40,080
not so much like that in is when you
25877
22:15:37,512 --> 22:15:42,720
display a dialogue it's a modal that the
25878
22:15:40,080 --> 22:15:45,191
user has to reply to unless you create
25879
22:15:42,720 --> 22:15:46,960
your own dialogue or if you're
25880
22:15:45,191 --> 22:15:49,039
doing maybe something hacky on the side
25881
22:15:46,960 --> 22:15:50,800
to say that oh if the user taps outside
25882
22:15:49,039 --> 22:15:52,719
the dialogue then it should disappear
25883
22:15:50,800 --> 22:15:54,720
otherwise dialogues in ios are modal and
25884
22:15:52,720 --> 22:15:56,080
have to be responded to however in
25885
22:15:54,720 --> 22:15:57,360
android it's possible that a user
25886
22:15:56,080 --> 22:15:59,119
dismisses a dialogue without actually
25887
22:15:57,360 --> 22:16:00,399
responding to it and in this case the
25888
22:15:59,119 --> 22:16:02,639
show generic dialogue should actually
25889
22:16:00,399 --> 22:16:03,919
return nil or null depending what
25890
22:16:02,639 --> 22:16:05,919
language you're talking about if you're
25891
22:16:03,919 --> 22:16:07,679
a python developer you'd say none
25892
22:16:08,872 --> 22:16:13,279
define this saying we have a generic
25893
22:16:11,119 --> 22:16:15,919
dialog that returns some sort of a
25894
22:16:15,919 --> 22:16:19,440
and the first parameter that we need is
25895
22:16:17,831 --> 22:16:21,831
a build context so let's just say build
25896
22:16:23,440 --> 22:16:28,400
and we need a title and content so we're
25897
22:16:28,399 --> 22:16:32,000
also before we do that let's also have a
25898
22:16:30,551 --> 22:16:33,360
look at this thing that says build
25899
22:16:32,000 --> 22:16:34,960
context isn't defined and that's because
25900
22:16:33,360 --> 22:16:36,551
we have an important material so let's
25901
22:16:36,551 --> 22:16:41,360
and we have to have curly brackets in
25902
22:16:38,320 --> 22:16:43,512
these places because required actually
25903
22:16:44,479 --> 22:16:47,512
the next parameter that we have to
25904
22:16:45,831 --> 22:16:50,080
implement is the title and then the
25905
22:16:47,512 --> 22:16:51,191
content so both are going to be text or
25906
22:16:51,191 --> 22:16:54,080
so that's the title and now i'm going to
25907
22:16:52,551 --> 22:16:56,231
copy paste that i'm going to say content
25908
22:16:58,000 --> 22:17:02,551
it's exciting part now what we need is
25909
22:17:02,551 --> 22:17:05,831
some sort of way for the user to be able
25910
22:17:09,360 --> 22:17:14,960
a list of buttons to display the to the
25911
22:17:12,320 --> 22:17:17,040
to the user now every button if we say
25912
22:17:14,960 --> 22:17:18,160
every button by default should have for
25913
22:17:18,160 --> 22:17:22,400
we should we're representing every
25914
22:17:19,759 --> 22:17:25,039
button as a text button that every text
25915
22:17:22,399 --> 22:17:27,279
button needs a string to display all
25916
22:17:25,039 --> 22:17:29,511
right and then it will have an unpressed
25917
22:17:27,279 --> 22:17:32,000
so what we're telling what we're saying
25918
22:17:29,512 --> 22:17:34,160
is that okay we should be able to render
25919
22:17:32,000 --> 22:17:35,831
multiple buttons and every button should
25920
22:17:35,831 --> 22:17:40,231
and also we set from before every button
25921
22:17:38,232 --> 22:17:43,600
should also have some sort of a value
25922
22:17:40,232 --> 22:17:45,919
all right which is t optional so we need
25923
22:17:43,600 --> 22:17:47,680
a way for the user to specify a list of
25924
22:17:45,919 --> 22:17:50,000
buttons each of which has a title of
25925
22:17:47,679 --> 22:17:51,511
type string and also every one of those
25926
22:17:50,000 --> 22:17:55,440
buttons should optionally have a value
25927
22:17:51,512 --> 22:17:58,551
so that's best described with a map of
25928
22:17:55,440 --> 22:17:59,360
string as titles and a value of t like
25929
22:18:00,800 --> 22:18:05,279
so we're going to type def that we're
25930
22:18:02,551 --> 22:18:07,919
going to say we have a definition of a
25931
22:18:05,279 --> 22:18:09,279
and we have basically a type to finish
25932
22:18:07,919 --> 22:18:12,679
and we're going to call the dialog
25933
22:18:12,960 --> 22:18:15,832
and we're going to say it has it's a
25934
22:18:15,831 --> 22:18:20,639
okay and we're going to say that is
25935
22:18:24,800 --> 22:18:30,639
let's also see the map all right
25936
22:18:28,551 --> 22:18:32,159
key expected to find all right and
25937
22:18:30,639 --> 22:18:35,191
that's probably because i've misspelled
25938
22:18:32,160 --> 22:18:37,040
that am all right so now we have an
25939
22:18:35,191 --> 22:18:39,279
option builder so we're gonna then use
25940
22:18:37,039 --> 22:18:41,191
that option builder in our function so
25941
22:18:39,279 --> 22:18:42,720
you're you'll see soon how we're going
25942
22:18:42,720 --> 22:18:46,320
so i'm going to say that we have a
25943
22:18:44,232 --> 22:18:49,512
dialog option builder and let's just
25944
22:18:50,000 --> 22:18:54,080
okay so we have all those bits and
25945
22:18:52,080 --> 22:18:56,232
pieces in place now what we need to do
25946
22:18:54,080 --> 22:18:59,191
is inside this function actually use the
25947
22:18:56,232 --> 22:19:02,800
build context to display a dialogue to
25948
22:18:59,191 --> 22:19:04,799
the user so before we do that let's
25949
22:19:02,800 --> 22:19:06,160
grab all the options that the caller
25950
22:19:04,800 --> 22:19:07,512
wants us to display so we're going to
25951
22:19:09,679 --> 22:19:15,191
we call that function and now you'll see
25952
22:19:15,279 --> 22:19:18,720
it smart enough to understand that yeah
25953
22:19:16,800 --> 22:19:21,760
it's a map of string dynamic okay it
25954
22:19:18,720 --> 22:19:23,831
doesn't understand yet what it is
25955
22:19:21,759 --> 22:19:26,959
so let's go ahead and say in here in
25956
22:19:23,831 --> 22:19:28,551
this function we return a show dialog
25957
22:19:30,551 --> 22:19:36,000
and in here we have two parameters that
25958
22:19:32,479 --> 22:19:37,919
we have to pass one is the context
25959
22:19:36,000 --> 22:19:40,000
the other one is the actual builder
25960
22:19:40,000 --> 22:19:43,759
some help from your favorite editor to
25961
22:19:42,479 --> 22:19:45,039
complete the builder function which is
25962
22:19:43,759 --> 22:19:47,919
very simple it just takes to build
25963
22:19:45,039 --> 22:19:51,831
context all right and in your builder we
25964
22:19:47,919 --> 22:19:51,831
are going to return an alert dialogue
25965
22:19:52,720 --> 22:19:56,320
this you should already know from before
25966
22:19:54,232 --> 22:19:58,160
we've worked with alert dialogues and
25967
22:19:56,320 --> 22:20:00,400
show dialogue from before so this is
25968
22:20:00,399 --> 22:20:05,759
so for the title we're going to say we
25969
22:20:05,759 --> 22:20:12,479
which contains the title string
25970
22:20:09,360 --> 22:20:14,160
for the content we're going to say also
25971
22:20:18,800 --> 22:20:23,512
and then we're gonna go into our actions
25972
22:20:21,600 --> 22:20:26,000
and this is this is the exciting part
25973
22:20:23,512 --> 22:20:28,000
for me because for the actions what we
25974
22:20:26,000 --> 22:20:31,279
need to do you see our actions are
25975
22:20:28,000 --> 22:20:32,399
defined in here every key inside this
25976
22:20:34,232 --> 22:20:38,000
which is defined by string of the
25977
22:20:38,000 --> 22:20:41,919
of our dialogue so we need to start
25978
22:20:40,551 --> 22:20:42,959
mapping them so we're going to say
25979
22:20:45,600 --> 22:20:49,512
keys and then we map them all right and
25980
22:20:54,000 --> 22:20:57,191
and we're not going to use a shorthand
25981
22:20:56,000 --> 22:20:59,039
signature in here and we're just going
25982
22:20:57,191 --> 22:21:02,159
to do it like this all right
25983
22:20:59,039 --> 22:21:03,119
so now in here in the option title we're
25984
22:21:03,119 --> 22:21:09,119
actually gonna return a text button so
25985
22:21:06,160 --> 22:21:10,960
let's let's get the value first of this
25986
22:21:20,639 --> 22:21:23,279
right and now it's saying that yeah
25987
22:21:21,831 --> 22:21:26,399
you're not using it that's fine we're
25988
22:21:23,279 --> 22:21:26,399
gonna we're gonna fix that soon
25989
22:21:27,759 --> 22:21:31,279
and this huge error that we're seeing
25990
22:21:29,279 --> 22:21:33,360
here is because you see actions it
25991
22:21:31,279 --> 22:21:35,440
requires an iterable i believe no it's
25992
22:21:33,360 --> 22:21:37,440
actually a list of widget but
25993
22:21:35,440 --> 22:21:39,919
when you do a map on your keys it's
25994
22:21:37,440 --> 22:21:41,512
going to return an iterable so to fix
25995
22:21:39,919 --> 22:21:45,039
that we're just going to go at the end
25996
22:21:41,512 --> 22:21:47,279
here and say this is to list all right
25997
22:21:45,039 --> 22:21:49,191
all right so let's now fix the rest of
25998
22:21:47,279 --> 22:21:50,959
the problems i understand i mean this is
25999
22:21:49,191 --> 22:21:52,159
quite a lot of errors and you may be a
26000
22:21:50,960 --> 22:21:53,440
little bit overwhelmed by this but
26001
22:21:52,160 --> 22:21:56,000
that's okay we're gonna fix them one at
26002
22:21:53,440 --> 22:21:59,600
a time so a semi column at the end so to
26003
22:21:56,000 --> 22:22:02,160
get rid of that huge er at the end
26004
22:21:59,600 --> 22:22:03,832
and then what we're going to do in here
26005
22:22:02,160 --> 22:22:05,512
where we get the value we're going to
26006
22:22:03,831 --> 22:22:07,759
create a text button so let's just say
26007
22:22:10,399 --> 22:22:16,231
and what the text button needs as we've
26008
22:22:12,720 --> 22:22:20,479
seen before is two parameters unpressed
26009
22:22:16,232 --> 22:22:21,600
and it also needs the i believe it's
26010
22:22:21,600 --> 22:22:27,832
and we're going to say the child is
26011
22:22:33,119 --> 22:22:37,039
you may be a little bit confused by all
26012
22:22:34,720 --> 22:22:39,191
of this that's okay what we're doing is
26013
22:22:37,039 --> 22:22:41,191
very simple we have like a list of
26014
22:22:39,191 --> 22:22:43,360
titles to display for every button so
26015
22:22:41,191 --> 22:22:45,679
every button has one title and that
26016
22:22:43,360 --> 22:22:47,831
title is inside this map of string and
26017
22:22:45,679 --> 22:22:49,599
the reason it's inside a map of string
26018
22:22:49,600 --> 22:22:52,480
is simply because we don't want to have
26019
22:22:51,039 --> 22:22:54,399
we don't want to manage two separate
26020
22:22:52,479 --> 22:22:55,831
lists a list of titles and a list of
26021
22:22:54,399 --> 22:22:57,759
values and then we're going to match the
26022
22:22:55,831 --> 22:22:59,599
titles with the values and map is
26023
22:22:57,759 --> 22:23:01,831
already doing that for us furthermore
26024
22:22:59,600 --> 22:23:04,552
what a map of string with a t does is
26025
22:23:01,831 --> 22:23:06,551
ensures that every string or every key
26026
22:23:04,551 --> 22:23:08,399
in this case of type string is unique so
26027
22:23:06,551 --> 22:23:10,639
you can't have two buttons with the same
26028
22:23:10,639 --> 22:23:14,720
the map is perfect for this case all
26029
22:23:12,720 --> 22:23:16,479
right and what we're doing in here for
26030
22:23:14,720 --> 22:23:18,320
the actions of our alert dialog we're
26031
22:23:18,320 --> 22:23:24,160
every key inside our map is an option
26032
22:23:21,600 --> 22:23:25,920
title is a title of a button all right
26033
22:23:24,160 --> 22:23:28,639
so we're mapping that what are we
26034
22:23:25,919 --> 22:23:30,160
mapping it to every one of those titles
26035
22:23:28,639 --> 22:23:31,679
of type string is going to be mapped to
26036
22:23:31,679 --> 22:23:37,759
whose child is a text of the actual
26037
22:23:34,639 --> 22:23:39,600
title which is inside this key all right
26038
22:23:37,759 --> 22:23:41,759
i understand it could be confusing but
26039
22:23:39,600 --> 22:23:43,040
please just pause the video have a look
26040
22:23:41,759 --> 22:23:44,799
at the code and i'm sure you'll
26041
22:23:43,039 --> 22:23:46,399
understand it better after we actually
26042
22:23:46,399 --> 22:23:50,639
the values then are going to be
26043
22:23:50,639 --> 22:23:53,600
and what we're going to do is we're
26044
22:23:56,232 --> 22:24:00,160
and in here if you look at value it's
26045
22:23:58,720 --> 22:24:02,720
going to be dynamic and what we need to
26046
22:24:00,160 --> 22:24:05,192
do is just to make sure that say if
26047
22:24:05,191 --> 22:24:08,159
and we're going to say navigator
26048
22:24:09,759 --> 22:24:13,599
it was written already then i'm going to
26049
22:24:13,600 --> 22:24:19,040
otherwise we're just going to pop
26050
22:24:19,039 --> 22:24:25,039
just pop all right so this that is now
26051
22:24:22,080 --> 22:24:27,831
you see why we're defining the value as
26052
22:24:25,039 --> 22:24:28,959
in as an optional because you see some
26053
22:24:28,960 --> 22:24:34,232
some buttons on our dialogs may not
26054
22:24:31,440 --> 22:24:36,160
actually have any values just like we
26055
22:24:36,160 --> 22:24:40,000
login view if we go back in here this
26056
22:24:38,720 --> 22:24:42,080
login view is going to have an error
26057
22:24:40,000 --> 22:24:44,551
dialog and this error dialog is going to
26058
22:24:42,080 --> 22:24:45,919
use our generic dialog but this air
26059
22:24:44,551 --> 22:24:48,000
dialog is just going to have an ok
26060
22:24:45,919 --> 22:24:50,639
button it has no value the okay is just
26061
22:24:48,000 --> 22:24:53,039
an ok just dismiss the dialog and that's
26062
22:24:50,639 --> 22:24:55,279
exactly what this is going to do so as
26063
22:24:53,039 --> 22:24:57,191
you'll soon see the way we'll implement
26064
22:24:55,279 --> 22:24:59,679
our new show error dialog is going to
26065
22:24:57,191 --> 22:25:01,831
use our generic dialog however it's
26066
22:24:59,679 --> 22:25:04,551
going to place a little um option in
26067
22:25:01,831 --> 22:25:07,360
there that says ok and that ok has a
26068
22:25:07,360 --> 22:25:11,440
perfect a lot of talking a lot of logic
26069
22:25:09,440 --> 22:25:13,832
but that's fine we sometimes need to do
26070
22:25:15,759 --> 22:25:20,159
we've now written our generic dialogue
26071
22:25:18,479 --> 22:25:22,800
what we need to do is we need to start
26072
22:25:20,160 --> 22:25:24,320
using it and that is inside our error
26073
22:25:22,800 --> 22:25:25,279
dialogue that we're going to implement
26074
22:25:25,279 --> 22:25:30,000
let's go ahead and create an error
26075
22:25:30,000 --> 22:25:33,279
so i'm going to bring up my notes
26076
22:25:33,279 --> 22:25:37,039
let's as the caption indicates inside
26077
22:25:37,039 --> 22:25:40,000
let's see where it is inside dialogues
26078
22:25:38,639 --> 22:25:43,279
we're going to create a new file called
26079
22:25:44,960 --> 22:25:49,040
now inside error dialog what we need to
26080
22:25:47,039 --> 22:25:50,159
do is we need to use our generic dialog
26081
22:25:50,160 --> 22:25:53,760
we need to have an import in here which
26082
22:25:52,232 --> 22:25:55,680
we're going to get visual studio code to
26083
22:25:55,679 --> 22:26:01,191
remember error dialog is going to just
26084
22:25:57,360 --> 22:26:03,440
show an ok button it has no value so
26085
22:26:01,191 --> 22:26:05,679
it the short error dialog is going to
26086
22:26:03,440 --> 22:26:07,832
have the signature exactly as it had
26087
22:26:05,679 --> 22:26:10,319
before which is a future void so let's
26088
22:26:10,320 --> 22:26:13,920
and we're going to call it show error
26089
22:26:13,919 --> 22:26:18,232
and the only thing i mean the two things
26090
22:26:16,080 --> 22:26:20,400
that the shower dialog needs is a build
26091
22:26:18,232 --> 22:26:22,400
context and a text so we're saying build
26092
22:26:22,399 --> 22:26:26,079
and we're also going to say a string of
26093
22:26:26,080 --> 22:26:31,191
okay and let's import material to get
26094
22:26:31,191 --> 22:26:36,551
so that's that and then in here we're
26095
22:26:34,080 --> 22:26:37,831
actually going to return an instance of
26096
22:26:40,160 --> 22:26:46,320
and i believe it now should be imported
26097
22:26:44,232 --> 22:26:49,279
is it not imported automatically in here
26098
22:26:46,320 --> 22:26:51,280
it's not yet but somehow it's finding it
26099
22:26:49,279 --> 22:26:53,759
and i can see we have a show generic
26100
22:26:53,759 --> 22:26:57,759
in here so this is not the one that
26101
22:26:55,679 --> 22:27:00,159
we're actually gonna use so we're gonna
26102
22:27:01,512 --> 22:27:07,360
and then we're gonna say our air
26103
22:27:04,720 --> 22:27:08,320
dialogue avoid so let's import our own
26104
22:27:14,160 --> 22:27:18,960
so was it a show general dialogue i'm
26105
22:27:16,639 --> 22:27:20,479
actually curious general dialogue that's
26106
22:27:18,960 --> 22:27:22,400
interesting so there's a function called
26107
22:27:22,399 --> 22:27:25,919
but that's not what we've created we've
26108
22:27:24,080 --> 22:27:27,759
called show generic dialects so be
26109
22:27:25,919 --> 22:27:29,831
careful a little bit with that because i
26110
22:27:27,759 --> 22:27:31,599
actually tripped on that right now so
26111
22:27:29,831 --> 22:27:32,639
let's go back to our error dialog and
26112
22:27:33,919 --> 22:27:37,191
dialog and it's going to also import
26113
22:27:35,512 --> 22:27:39,360
that form you know so that's that's the
26114
22:27:39,360 --> 22:27:44,551
so put a comma at the end to get
26115
22:27:41,831 --> 22:27:47,039
formatting also working fine
26116
22:27:44,551 --> 22:27:49,759
and now add a comma in here to get the
26117
22:27:47,039 --> 22:27:50,639
formatting finding there as well
26118
22:27:50,639 --> 22:27:54,000
the title we're going to hard code that
26119
22:27:56,639 --> 22:28:01,440
and the content is just going to be the
26120
22:27:58,320 --> 22:28:02,960
text and our options builder now is
26121
22:28:01,440 --> 22:28:05,440
going to be i remember an options
26122
22:28:02,960 --> 22:28:08,480
builder if you go back in here
26123
22:28:05,440 --> 22:28:10,960
to our generic dialog is a function all
26124
22:28:08,479 --> 22:28:13,191
right that returns that so let's go and
26125
22:28:10,960 --> 22:28:15,600
define an inline function in here and we
26126
22:28:15,600 --> 22:28:19,600
to remove this and we say it's a
26127
22:28:17,191 --> 22:28:22,080
function that returns a map
26128
22:28:19,600 --> 22:28:24,400
and the key in here is just going to be
26129
22:28:24,399 --> 22:28:28,159
all right see how see how generic that
26130
22:28:26,551 --> 22:28:29,759
is now so we're actually defining saying
26131
22:28:28,160 --> 22:28:31,192
that this is a show air dial again it
26132
22:28:29,759 --> 22:28:33,039
just doesn't return anything it's just a
26133
22:28:33,039 --> 22:28:36,479
and to make it cleaner you could
26134
22:28:34,551 --> 22:28:38,639
actually specify here that this is a
26135
22:28:38,639 --> 22:28:43,191
all right that's that part so now we've
26136
22:28:40,399 --> 22:28:45,511
worked on our error dialogue um and now
26137
22:28:43,191 --> 22:28:47,599
what we need to do in order to make our
26138
22:28:45,512 --> 22:28:48,872
code a little bit less scary with so
26139
22:28:47,600 --> 22:28:50,160
many errors at the moment that we have
26140
22:28:48,872 --> 22:28:52,000
let's go and clean up some of these
26141
22:28:50,160 --> 22:28:54,639
errors and let's go ahead and use this
26142
22:28:52,000 --> 22:28:56,720
show error dialogue everywhere okay so
26143
22:28:54,639 --> 22:28:59,360
let's go to our views and have a look at
26144
22:28:59,360 --> 22:29:04,000
you can see now we have show air dialog
26145
22:29:04,000 --> 22:29:08,872
implementation of uh show air dialog so
26146
22:29:07,191 --> 22:29:11,512
let's get help from visual studio code
26147
22:29:11,512 --> 22:29:16,400
and all of a sudden you see all the
26148
22:29:13,119 --> 22:29:18,720
errors in the login view and disappeared
26149
22:29:16,399 --> 22:29:21,360
you can see we're in loginview.
26150
22:29:21,360 --> 22:29:25,600
and we have an error in here from our
26151
22:29:24,000 --> 22:29:29,600
previous import which was show air
26152
22:29:25,600 --> 22:29:30,800
dialog dart so let's remove that as well
26153
22:29:30,800 --> 22:29:35,512
your login view should now look quite
26154
22:29:32,872 --> 22:29:37,919
clean i'm going to close that and let's
26155
22:29:35,512 --> 22:29:39,680
then i'm going to save all of these
26156
22:29:37,919 --> 22:29:41,919
things that we have in here because we
26157
22:29:39,679 --> 22:29:44,959
have so many windows so many tabs open
26158
22:29:41,919 --> 22:29:47,279
that it's kind of scary so let's then go
26159
22:29:47,279 --> 22:29:51,919
and clean up this import so let's remove
26160
22:29:49,679 --> 22:29:52,871
the old import from utilities show error
26161
22:29:54,479 --> 22:29:57,919
to these errors that we're getting here
26162
22:29:56,232 --> 22:30:00,400
for show air dialing and get visual
26163
22:29:57,919 --> 22:30:03,512
studio code or your favorite editor or
26164
22:30:00,399 --> 22:30:05,360
id to auto import our new function
26165
22:30:03,512 --> 22:30:07,512
called short error dialogue which
26166
22:30:07,512 --> 22:30:12,400
this utilities dialogues error dialog
26167
22:30:19,831 --> 22:30:25,439
which at the moment uh let's see
26168
22:30:23,360 --> 22:30:27,440
yeah we've broken notes view simply
26169
22:30:25,440 --> 22:30:29,040
because we're not returning anything in
26170
22:30:29,039 --> 22:30:33,511
migrated or moved all the code to the
26171
22:30:33,512 --> 22:30:39,040
so what we need to do now is to go and
26172
22:30:41,191 --> 22:30:44,720
show delete dialogue okay so that's not
26173
22:30:43,039 --> 22:30:46,479
the one that we we need we need to work
26174
22:30:46,479 --> 22:30:50,720
log out functionality which is here show
26175
22:30:50,720 --> 22:30:56,080
so we need to create a new logout dialog
26176
22:30:53,512 --> 22:30:57,680
as well and this this log out dialog is
26177
22:30:56,080 --> 22:31:01,040
going to be very similar to how we
26178
22:30:57,679 --> 22:31:02,399
created our um error dialog so it's
26179
22:31:03,360 --> 22:31:08,399
so let's i'm actually gonna i don't know
26180
22:31:06,232 --> 22:31:10,000
if it's worth copying this code i
26181
22:31:08,399 --> 22:31:12,079
usually don't like copying even if it's
26182
22:31:10,000 --> 22:31:13,360
my own code sometimes i do but in this
26183
22:31:12,080 --> 22:31:15,759
case i think it's actually better that
26184
22:31:15,759 --> 22:31:19,360
so let's go ahead as the caption
26185
22:31:17,512 --> 22:31:21,760
indicates inside dialogues folder create
26186
22:31:19,360 --> 22:31:25,360
a new file called log out dialog
26187
22:31:21,759 --> 22:31:28,479
so in here i'm going to say new file log
26188
22:31:28,479 --> 22:31:33,759
and in the log out dialog so i'm going
26189
22:31:31,600 --> 22:31:36,639
to go to my notes as well and log out
26190
22:31:33,759 --> 22:31:38,959
that one all right so let's go and say
26191
22:31:36,639 --> 22:31:41,440
and then we need a function called show
26192
22:31:38,960 --> 22:31:43,512
logout dialog all right as we have it
26193
22:31:41,440 --> 22:31:46,080
here okay so i'm going to just copy that
26194
22:31:43,512 --> 22:31:47,919
name so we're going to say it's a future
26195
22:31:50,720 --> 22:31:53,831
and the only thing it needs is a build
26196
22:31:54,960 --> 22:31:57,920
we're going to get an error for build
26197
22:31:56,320 --> 22:32:00,552
content simply because we don't have it
26198
22:32:00,551 --> 22:32:04,159
and you see now the only error that
26199
22:32:02,800 --> 22:32:05,832
we're getting is saying that the body
26200
22:32:05,831 --> 22:32:08,959
which means yeah it's not returning any
26201
22:32:07,831 --> 22:32:11,119
value at the moment and we're going to
26202
22:32:11,119 --> 22:32:16,080
so what we need in here we're actually
26203
22:32:12,960 --> 22:32:18,232
going to return our show generic dialog
26204
22:32:18,232 --> 22:32:22,160
a comma at the end and a semicolon just
26205
22:32:22,160 --> 22:32:25,832
the context is there and we're in this
26206
22:32:24,639 --> 22:32:27,440
case we're actually going to say that
26207
22:32:25,831 --> 22:32:29,511
show generic dialogue is going to return
26208
22:32:29,512 --> 22:32:34,000
so the context is there the title we
26209
22:32:32,080 --> 22:32:35,919
need to specify kind of we're just going
26210
22:32:34,000 --> 22:32:38,639
to say log out and for the content we're
26211
22:32:35,919 --> 22:32:40,720
going to say are you sure you want to
26212
22:32:40,720 --> 22:32:43,759
the optional remember it's a function
26213
22:32:42,320 --> 22:32:46,400
we're going to make an anonymous
26214
22:32:43,759 --> 22:32:48,319
function in here and returns a map
26215
22:32:46,399 --> 22:32:50,231
and for the option of cancel we're going
26216
22:32:48,320 --> 22:32:52,640
to say false and for the option of
26217
22:32:50,232 --> 22:32:54,400
logout we're going to say true all right
26218
22:32:52,639 --> 22:32:56,479
we're getting a huge error in here
26219
22:32:54,399 --> 22:32:59,191
saying that there is a future of boolean
26220
22:32:56,479 --> 22:33:00,872
you're returning a boolean optional
26221
22:32:59,191 --> 22:33:04,000
for a function that is supposed to
26222
22:33:00,872 --> 22:33:06,232
return a future of bull again remember
26223
22:33:04,000 --> 22:33:07,831
on some platforms you're able to dismiss
26224
22:33:06,232 --> 22:33:10,320
your dialogues without actually
26225
22:33:07,831 --> 22:33:12,639
responding to any of the options
26226
22:33:10,320 --> 22:33:14,640
presented in the dialogue in those
26227
22:33:12,639 --> 22:33:16,800
platforms you actually need to guard
26228
22:33:14,639 --> 22:33:19,512
yourself against that case by returning
26229
22:33:16,800 --> 22:33:20,800
a default value so let's go in here and
26230
22:33:20,800 --> 22:33:24,551
so if we get this value which as you can
26231
22:33:22,720 --> 22:33:27,279
see is an optional bool then we say
26232
22:33:24,551 --> 22:33:29,512
either return that or just return false
26233
22:33:27,279 --> 22:33:31,039
and that's it we can put a comma at the
26234
22:33:29,512 --> 22:33:33,600
end as well just to get the formatting
26235
22:33:34,399 --> 22:33:38,720
perfect um now what we need to do is now
26236
22:33:37,039 --> 22:33:40,399
that we've written our show logout
26237
22:33:38,720 --> 22:33:42,479
dialog we have to put it to use so let's
26238
22:33:43,279 --> 22:33:48,080
get help from your favorite editor to
26239
22:33:45,360 --> 22:33:51,831
import your new logout dialog in here so
26240
22:33:54,080 --> 22:33:57,440
we've actually worked on that so what i
26241
22:33:58,399 --> 22:34:01,191
edit my caption a little bit and i'm
26242
22:33:59,831 --> 22:34:02,871
sorry about and i'm sorry about this
26243
22:34:01,191 --> 22:34:05,440
because this caption wasn't completely
26244
22:34:13,440 --> 22:34:17,919
that's fine now let's now now that we've
26245
22:34:15,679 --> 22:34:20,719
worked on the notes list view let's go
26246
22:34:17,919 --> 22:34:23,279
and bring notes list view inside notes
26247
22:34:20,720 --> 22:34:25,191
view all right so you can see here we
26248
22:34:25,191 --> 22:34:30,551
and but we also have our notes list view
26249
22:34:27,831 --> 22:34:32,479
which we have to import in here
26250
22:34:30,551 --> 22:34:35,512
i'm going to go to my notes and just to
26251
22:34:32,479 --> 22:34:37,599
make sure i have everything in place
26252
22:34:35,512 --> 22:34:39,832
all right so in this case that we have
26253
22:34:37,600 --> 22:34:42,160
all notes let's go ahead and say we
26254
22:34:39,831 --> 22:34:43,919
return an instance of our notes list
26255
22:34:42,160 --> 22:34:44,872
view and this is gonna auto import it
26256
22:34:44,872 --> 22:34:51,040
so like that and for the notes i'm going
26257
22:34:48,639 --> 22:34:52,160
to say here are all the notes and
26258
22:34:52,160 --> 22:34:55,919
the user wanting to delete a note i'm
26259
22:34:54,479 --> 22:34:59,119
just going to get visual studio code to
26260
22:34:55,919 --> 22:35:02,479
complete that for me you can see here
26261
22:34:59,119 --> 22:35:04,399
and we get the note that the user wants
26262
22:35:04,399 --> 22:35:08,720
then in here we're going to make this
26263
22:35:05,759 --> 22:35:11,279
function asynchronous and just a wait on
26264
22:35:16,800 --> 22:35:20,551
all right i'm going to save now if you
26265
22:35:20,551 --> 22:35:25,831
code in here you can see we have one
26266
22:35:22,479 --> 22:35:28,720
error here in our notes list view and
26267
22:35:25,831 --> 22:35:31,919
let's go ahead and fix that and we can
26268
22:35:28,720 --> 22:35:34,720
say it says show delete dialog
26269
22:35:31,919 --> 22:35:37,119
and we haven't yet actually written the
26270
22:35:37,119 --> 22:35:41,512
what we need to do is need to go and fix
26271
22:35:39,191 --> 22:35:44,399
that actually so it creates a delete
26272
22:35:53,831 --> 22:36:00,000
so let's go and right click on it and
26273
22:35:56,160 --> 22:36:00,000
create a new file called delete dialog
26274
22:36:00,872 --> 22:36:05,512
and delete dialog is going to be very
26275
22:36:02,551 --> 22:36:07,512
very similar to the log out dialog so
26276
22:36:05,512 --> 22:36:09,512
let's just go ahead kind of maybe we
26277
22:36:07,512 --> 22:36:11,600
could use the log out dialog so copy the
26278
22:36:11,600 --> 22:36:15,600
and bring it into your new file called
26279
22:36:13,679 --> 22:36:17,039
delete dialog and just paste it in there
26280
22:36:15,600 --> 22:36:18,400
and we're going to call this function
26281
22:36:21,679 --> 22:36:24,871
and it's going to create a generic
26282
22:36:23,279 --> 22:36:27,360
dialogue in here and in here we're going
26283
22:36:27,360 --> 22:36:30,960
and we're just going to say are you sure
26284
22:36:32,399 --> 22:36:36,000
the option builder is going to be cancel
26285
22:36:36,000 --> 22:36:39,831
we're going to have an option that just
26286
22:36:39,831 --> 22:36:43,360
so now you see how easy it is now that
26287
22:36:41,759 --> 22:36:46,231
we have a generic dialog just we're
26288
22:36:46,232 --> 22:36:50,872
so then let's go back to our notes list
26289
22:36:48,800 --> 22:36:52,232
view and fix this function fix the
26290
22:36:50,872 --> 22:36:53,760
calling of this function and get help
26291
22:36:52,232 --> 22:36:55,680
from visual studio code to import our
26292
22:36:53,759 --> 22:36:56,799
delete dialogue and that error also goes
26293
22:36:56,800 --> 22:37:02,400
so now i save my project and all of a
26294
22:36:59,600 --> 22:37:05,192
sudden you see we have delete icons
26295
22:37:06,479 --> 22:37:10,159
we should now be ready to actually put
26296
22:37:08,080 --> 22:37:13,040
this into test so i'm going to tap on
26297
22:37:10,160 --> 22:37:14,400
the hello world item here and now you
26298
22:37:13,039 --> 22:37:16,551
see it says are you sure you want to
26299
22:37:14,399 --> 22:37:18,799
delete delete this item pressing cancel
26300
22:37:16,551 --> 22:37:21,512
doesn't do anything but if i press on it
26301
22:37:18,800 --> 22:37:24,232
and say yes then the hello world note is
26302
22:37:21,512 --> 22:37:26,720
deleted and our notes view is getting
26303
22:37:24,232 --> 22:37:29,512
notified of that information from its
26304
22:37:26,720 --> 22:37:31,119
stream builder because remember
26305
22:37:31,119 --> 22:37:34,479
as we have it here let's go to our
26306
22:37:37,360 --> 22:37:42,080
upon deleting a node let's have a look
26307
22:37:39,512 --> 22:37:44,080
at the leaks node function here you see
26308
22:37:42,080 --> 22:37:46,800
what it does is that if it could delete
26309
22:37:44,080 --> 22:37:49,191
a node it actually removes it from its
26310
22:37:46,800 --> 22:37:51,760
array of nodes and it notifies the
26311
22:37:51,759 --> 22:37:56,080
actually no that's the delete node
26312
22:37:53,919 --> 22:37:58,639
oh yeah basically it removes the node
26313
22:37:56,080 --> 22:38:00,960
and then puts the entire array of nodes
26314
22:37:58,639 --> 22:38:03,759
in the node stream controller okay so
26315
22:38:00,960 --> 22:38:06,232
that's how the notes view is getting
26316
22:38:03,759 --> 22:38:07,599
notified of a deletion of an item we can
26317
22:38:06,232 --> 22:38:09,919
delete another one if you want and
26318
22:38:09,919 --> 22:38:14,232
so well done great job for sticking with
26319
22:38:12,720 --> 22:38:16,160
me throughout this chapter this was
26320
22:38:14,232 --> 22:38:18,552
probably one of like the most
26321
22:38:16,160 --> 22:38:20,800
challenging chapters in that we
26322
22:38:18,551 --> 22:38:23,759
had a lot of errors from the beginning
26323
22:38:23,759 --> 22:38:27,439
one of my goals for for this course is
26324
22:38:25,831 --> 22:38:29,279
not for you just to learn how to write
26325
22:38:27,440 --> 22:38:32,551
flutter application but actually get in
26326
22:38:29,279 --> 22:38:34,160
the mindset of a software developer so
26327
22:38:32,551 --> 22:38:36,479
and every software developer they have
26328
22:38:34,160 --> 22:38:37,760
their own preferences i included and one
26329
22:38:36,479 --> 22:38:39,440
of my preferences when i'm doing
26330
22:38:37,759 --> 22:38:40,479
refactoring is like to cut things from
26331
22:38:39,440 --> 22:38:41,919
the source as i mentioned in the
26332
22:38:40,479 --> 22:38:44,000
beginning of this chapter so that's why
26333
22:38:41,919 --> 22:38:45,919
we got so many errors in the beginning
26334
22:38:44,000 --> 22:38:47,360
but you stuck with me and we fixed all
26335
22:38:45,919 --> 22:38:50,232
those errors and now we came out of this
26336
22:38:47,360 --> 22:38:53,440
chapter actually quite victorious
26337
22:38:50,232 --> 22:38:56,160
so now we have the delete functionality
26338
22:38:53,440 --> 22:38:58,000
what we need to do now is just to go and
26339
22:38:56,160 --> 22:39:00,320
we because we've done a lot of work what
26340
22:38:58,000 --> 22:39:02,320
we need to make sure now is to
26341
22:39:00,320 --> 22:39:05,192
commit and tag our work so that we don't
26342
22:39:02,320 --> 22:39:06,160
lose this work so um i'm gonna do some
26343
22:39:06,160 --> 22:39:11,440
reorganization on the windows here so
26344
22:39:08,551 --> 22:39:13,831
you see things a little bit better
26345
22:39:11,440 --> 22:39:16,551
i'm going to increase the size okay
26346
22:39:16,551 --> 22:39:20,551
if we look at the previous tags we've
26347
22:39:18,232 --> 22:39:23,040
come to tag 15 from the previous chapter
26348
22:39:20,551 --> 22:39:25,599
and now we need to do a tag 16 okay so
26349
22:39:23,039 --> 22:39:27,511
let's go and look at the status
26350
22:39:25,600 --> 22:39:29,512
we have quite a lot of things that we've
26351
22:39:27,512 --> 22:39:32,160
modified we've deleted the show error
26352
22:39:29,512 --> 22:39:34,080
dialogue from before we've also
26353
22:39:32,160 --> 22:39:37,040
excuse me we've also added a whole new
26354
22:39:34,080 --> 22:39:38,320
folder here on under lib utilities
26355
22:39:38,320 --> 22:39:42,640
so let's do get at all and let's look at
26356
22:39:44,639 --> 22:39:47,119
and what we're going to do is we're
26357
22:39:50,399 --> 22:39:56,799
okay and push your changes into your
26358
22:39:56,800 --> 22:40:03,440
we're also going to tag as step 16 so
26359
22:40:00,160 --> 22:40:05,279
and we're gonna push our tags
26360
22:40:03,440 --> 22:40:07,360
if you look at your tags right now you
26361
22:40:05,279 --> 22:40:09,679
have one two three four five six seven
26362
22:40:07,360 --> 22:40:13,119
blah blah blah so we have all our tags
26363
22:40:09,679 --> 22:40:14,799
up and including step 16. all right
26364
22:40:13,119 --> 22:40:16,319
so that was for committing and also
26365
22:40:16,320 --> 22:40:19,832
as it's tradition we're going to talk
26366
22:40:17,759 --> 22:40:22,159
about what we what we need to discuss in
26367
22:40:22,160 --> 22:40:25,680
you can see we have the ability to
26368
22:40:24,000 --> 22:40:27,512
create new notes and we also have the
26369
22:40:25,679 --> 22:40:28,871
ability to delete notes and also
26370
22:40:27,512 --> 22:40:31,440
something that we didn't test is this
26371
22:40:28,872 --> 22:40:33,440
thing that when we create a new note and
26372
22:40:31,440 --> 22:40:34,720
if we back out of it you see that that
26373
22:40:33,440 --> 22:40:37,279
note actually is deleted from the
26374
22:40:34,720 --> 22:40:38,872
database so that's also working so we
26375
22:40:37,279 --> 22:40:40,160
have the ability to delete notes and the
26376
22:40:38,872 --> 22:40:42,000
ability to create notes but we don't
26377
22:40:40,160 --> 22:40:43,919
have the ability to update notes and
26378
22:40:42,000 --> 22:40:46,160
that's exactly what we're going to talk
26379
22:40:43,919 --> 22:40:47,512
about in the next chapter so i'll see
26380
22:40:47,512 --> 22:40:51,832
hello everyone and welcome to chapter 34
26381
22:40:49,759 --> 22:40:53,679
of the slaughter course in the previous
26382
22:40:51,831 --> 22:40:55,599
chapters we've been talking quite a bit
26383
22:40:55,600 --> 22:40:59,192
and notes and how we can delete them so
26384
22:40:57,360 --> 22:41:00,639
we've been working quite a bit with some
26385
22:40:59,191 --> 22:41:03,119
generic dialogues that we've also
26386
22:41:00,639 --> 22:41:05,191
developed in order to be able to handle
26387
22:41:03,119 --> 22:41:06,959
error dialogues and also the log out
26388
22:41:05,191 --> 22:41:08,639
dialogue for instance and also the
26389
22:41:08,639 --> 22:41:12,319
there's been quite a lot of work done on
26390
22:41:10,399 --> 22:41:15,511
that side but we haven't really talked
26391
22:41:12,320 --> 22:41:17,512
at all about how the user can tap on or
26392
22:41:15,512 --> 22:41:18,960
click on their existing notes in order
26393
22:41:18,960 --> 22:41:23,192
update that for instance and update
26394
22:41:21,279 --> 22:41:25,759
that's a particular node so that's what
26395
22:41:23,191 --> 22:41:27,440
we're gonna take care of in um
26396
22:41:28,320 --> 22:41:32,640
if we now start looking at the code that
26397
22:41:30,479 --> 22:41:34,159
we've written you you will see that
26398
22:41:34,160 --> 22:41:39,192
the view that actually creates a note um
26399
22:41:40,399 --> 22:41:44,799
we're not going to go and create a whole
26400
22:41:42,000 --> 22:41:47,512
new view that looks exactly the same as
26401
22:41:44,800 --> 22:41:49,600
this new note view just so that we can
26402
22:41:47,512 --> 22:41:51,919
update existing notes so the goal of
26403
22:41:49,600 --> 22:41:55,040
this chapter is to reuse this view so
26404
22:41:51,919 --> 22:41:55,831
that we can just use the exact same view
26405
22:41:55,831 --> 22:41:59,439
when we when the user taps on a note in
26406
22:41:57,759 --> 22:42:02,000
the note list we're going to pass the
26407
22:42:02,000 --> 22:42:05,679
existing view all right so that's what
26408
22:42:03,512 --> 22:42:07,360
we're gonna take care of in this chapter
26409
22:42:05,679 --> 22:42:09,039
let me do a little bit of a shuffling
26410
22:42:09,039 --> 22:42:12,319
you'll see the screen better i'm gonna
26411
22:42:10,720 --> 22:42:14,000
bring up visual studio code as usual
26412
22:42:16,872 --> 22:42:22,551
is taking care of this android screen
26413
22:42:20,000 --> 22:42:23,759
and we can then have a look at the first
26414
22:42:22,551 --> 22:42:25,919
task that we have to do as you can see
26415
22:42:23,759 --> 22:42:29,039
in the cache it says we have to rename
26416
22:42:25,919 --> 22:42:31,599
the new node to your dart to create
26417
22:42:29,039 --> 22:42:33,759
update node view alright so let's take
26418
22:42:31,600 --> 22:42:35,040
care of that i'm going to close all the
26419
22:42:35,039 --> 22:42:39,119
and let's go and say command p visual
26420
22:42:37,119 --> 22:42:42,080
studio code or maybe an android studio
26421
22:42:39,119 --> 22:42:44,231
is another command that you have to
26422
22:42:42,080 --> 22:42:45,919
execute in order in order to bring up
26423
22:42:44,232 --> 22:42:48,000
the list of files i don't really know
26424
22:42:45,919 --> 22:42:49,512
the command in android studio but if
26425
22:42:48,000 --> 22:42:52,160
you're not comfortable with any of those
26426
22:42:49,512 --> 22:42:54,551
you can just go to this new note view
26427
22:42:52,160 --> 22:42:55,279
right here and we are going to rename it
26428
22:42:55,279 --> 22:42:59,360
let's just do that now so i'm just going
26429
22:42:57,600 --> 22:43:02,000
to call as a cache in the case create
26430
22:43:02,000 --> 22:43:09,191
create updates notes view like that
26431
22:43:06,479 --> 22:43:11,191
if the updating i mean if if your editor
26432
22:43:09,191 --> 22:43:14,319
is intelligent enough and it has some
26433
22:43:11,191 --> 22:43:15,360
like um refactoring features built in
26434
22:43:15,360 --> 22:43:18,000
you don't have to do anything special
26435
22:43:18,000 --> 22:43:22,960
for this command to work but um you can
26436
22:43:21,039 --> 22:43:25,279
see in here for instance now we've
26437
22:43:22,960 --> 22:43:27,760
changed this file name to create updates
26438
22:43:25,279 --> 22:43:30,232
nodes view but we haven't really changed
26439
22:43:27,759 --> 22:43:32,479
for instance the class name so if i go
26440
22:43:30,232 --> 22:43:34,639
here this thing is still called new node
26441
22:43:34,639 --> 22:43:39,919
so let's go in there and perhaps change
26442
22:43:37,039 --> 22:43:43,679
that as well let me go to my notes
26443
22:43:39,919 --> 22:43:45,512
uh let's see create update note view
26444
22:43:43,679 --> 22:43:47,831
and we're going to go actually and
26445
22:43:45,512 --> 22:43:50,000
rename this new note view as well so
26446
22:43:47,831 --> 22:43:51,039
let's go ahead and do some refactoring
26447
22:43:50,000 --> 22:43:54,080
in here so i'm just going to say
26448
22:43:51,039 --> 22:43:57,759
refactor and let's see do we have any
26449
22:43:54,080 --> 22:44:00,551
refactoring features here um
26450
22:43:57,759 --> 22:44:02,639
we have rename symbol so maybe let's use
26451
22:44:00,551 --> 22:44:06,360
that and i'm going to call it create
26452
22:44:08,160 --> 22:44:11,919
let's see if it's successfully going to
26453
22:44:09,831 --> 22:44:13,599
be able to rename this for me so i can
26454
22:44:11,919 --> 22:44:15,831
see it renamed the class for me and it
26455
22:44:13,600 --> 22:44:18,480
also renamed the state class which is
26456
22:44:15,831 --> 22:44:21,279
exactly what i needed so if i now save
26457
22:44:18,479 --> 22:44:22,551
this we should have some problems
26458
22:44:22,551 --> 22:44:26,080
but i can see visual studio code was
26459
22:44:23,919 --> 22:44:27,279
intelligent enough actually to rename
26460
22:44:27,279 --> 22:44:31,039
dart reference to this route as well
26461
22:44:33,600 --> 22:44:36,552
or what we call it actually before it
26462
22:44:38,800 --> 22:44:43,680
that note view was a new note view was
26463
22:44:41,279 --> 22:44:45,679
actually being used inside our routes in
26464
22:44:43,679 --> 22:44:48,079
the main function of our of our
26465
22:44:45,679 --> 22:44:50,719
application inside main.dart now that
26466
22:44:48,080 --> 22:44:52,800
we've renamed that to create update note
26467
22:44:50,720 --> 22:44:54,639
view both the class name the stateful
26468
22:44:54,639 --> 22:45:00,160
then that new name should be used in
26469
22:44:57,512 --> 22:45:01,360
main.dart so if you're using vim or any
26470
22:45:01,360 --> 22:45:04,872
code editor like if you're using sublime
26471
22:45:03,191 --> 22:45:07,919
supply may not have this refactoring
26472
22:45:04,872 --> 22:45:10,160
feature that can actually go and rename
26473
22:45:07,919 --> 22:45:11,831
where you've used that symbol so you may
26474
22:45:10,160 --> 22:45:13,120
need to do that by hand so you may
26475
22:45:11,831 --> 22:45:14,959
actually get some errors in your
26476
22:45:14,960 --> 22:45:18,080
but if you get those errors don't worry
26477
22:45:16,960 --> 22:45:19,832
about it at least you know what the
26478
22:45:18,080 --> 22:45:22,232
problem is okay so you can go and fix it
26479
22:45:23,039 --> 22:45:27,191
all right so we've done that and now
26480
22:45:25,759 --> 22:45:29,119
what we need to do is i'm actually going
26481
22:45:27,191 --> 22:45:30,159
to press command s here and command s in
26482
22:45:29,119 --> 22:45:32,551
here just to make sure everything's
26483
22:45:30,160 --> 22:45:35,360
saved and as the caption indicates
26484
22:45:32,551 --> 22:45:36,800
remember we also have our routes inside
26485
22:45:36,800 --> 22:45:41,440
so you can see our route is still called
26486
22:45:41,440 --> 22:45:45,919
so i'm gonna rename this now and i
26487
22:45:44,080 --> 22:45:48,160
suggest that you do the same thing too
26488
22:45:45,919 --> 22:45:50,160
let's just say rename and let's rename
26489
22:45:48,160 --> 22:45:54,080
that to as the caching indicates create
26490
22:45:50,160 --> 22:45:57,760
or update node route okay so create or
26491
22:45:54,080 --> 22:45:59,600
update snow throughout just like that
26492
22:45:57,759 --> 22:46:01,759
and as you can see again visual studio
26493
22:45:59,600 --> 22:46:03,760
code helped us quite a lot now it went
26494
22:46:05,831 --> 22:46:09,511
and something also happened in the notes
26495
22:46:08,000 --> 22:46:10,479
view as well i can see and that's
26496
22:46:12,800 --> 22:46:19,040
press the plus button in here to create
26497
22:46:15,679 --> 22:46:20,719
a new node that was also using the uh
26498
22:46:21,679 --> 22:46:26,639
new node route but now it's updated to
26499
22:46:24,320 --> 22:46:28,640
create or update node routes so all i'm
26500
22:46:26,639 --> 22:46:31,119
trying to say in here you need to rename
26501
22:46:28,639 --> 22:46:33,512
that route so that it becomes create or
26502
22:46:31,119 --> 22:46:35,360
update new node route and depending on
26503
22:46:33,512 --> 22:46:36,800
your editor it may be smart enough to
26504
22:46:35,360 --> 22:46:38,160
have some refactoring features if it's
26505
22:46:36,800 --> 22:46:40,479
like visual studio code then you're good
26506
22:46:38,160 --> 22:46:42,232
to go just rename it but if it's not you
26507
22:46:40,479 --> 22:46:44,800
may have to do that by hand so just go
26508
22:46:44,800 --> 22:46:50,232
refactor in your code where you're using
26509
22:46:46,720 --> 22:46:50,232
that route to use the new name okay
26510
22:46:52,160 --> 22:46:55,192
let's have a look at this dilemma now
26511
22:46:58,320 --> 22:47:05,120
when we create a new note we just say
26512
22:47:01,360 --> 22:47:09,039
navigator of context push name all right
26513
22:47:05,119 --> 22:47:11,919
now the goal here is when we create this
26514
22:47:09,039 --> 22:47:13,511
nodes list view we're going to allow the
26515
22:47:11,919 --> 22:47:15,279
users you see at the moment we have on
26516
22:47:13,512 --> 22:47:17,919
delete node but we're also going to have
26517
22:47:15,279 --> 22:47:19,831
a parameter called untap we're going to
26518
22:47:19,831 --> 22:47:23,919
but the dilemma here is that when you
26519
22:47:23,919 --> 22:47:28,399
we need to also go to this view into
26520
22:47:26,080 --> 22:47:31,279
this route that we have create or update
26521
22:47:28,399 --> 22:47:34,159
node route but we have to pass an
26522
22:47:31,279 --> 22:47:35,831
argument to that route an argument just
26523
22:47:34,160 --> 22:47:37,512
as it is for a parameter of a function
26524
22:47:35,831 --> 22:47:40,479
or an argument to a function is like
26525
22:47:40,479 --> 22:47:45,191
route and you say hey i'm initializing
26526
22:47:42,872 --> 22:47:48,720
this route but i'm passing some data to
26527
22:47:45,191 --> 22:47:51,191
it so then that route can then in turn
26528
22:47:48,720 --> 22:47:52,960
reactively sorry that ralph can then
26529
22:47:51,191 --> 22:47:55,039
react to that and go and read that
26530
22:47:52,960 --> 22:47:57,280
argument and say oh was i pass an
26531
22:47:55,039 --> 22:47:58,871
argument yes then i'm going to do this
26532
22:47:57,279 --> 22:48:01,039
was i not pass an argument then i'm
26533
22:47:58,872 --> 22:48:03,680
going to do something else in this case
26534
22:48:01,039 --> 22:48:05,511
if you pass a note to our create or
26535
22:48:03,679 --> 22:48:07,599
update note route then it's going to say
26536
22:48:05,512 --> 22:48:09,760
oh i have an existing node i'm just
26537
22:48:07,600 --> 22:48:11,760
going to populate myself and my contents
26538
22:48:09,759 --> 22:48:13,919
with that note and i'm not going to
26539
22:48:13,919 --> 22:48:17,191
at the moment our create update note
26540
22:48:17,191 --> 22:48:20,959
we have this function set up in here
26541
22:48:18,960 --> 22:48:24,232
that says create a new node we're gonna
26542
22:48:20,960 --> 22:48:26,080
fix that soon okay but remember that
26543
22:48:24,232 --> 22:48:28,639
at the moment when you go into that view
26544
22:48:26,080 --> 22:48:30,320
by default it's creating a new node and
26545
22:48:28,639 --> 22:48:31,919
we're gonna change that so that we're
26546
22:48:30,320 --> 22:48:34,800
saying we're going to rename that and
26547
22:48:31,919 --> 22:48:37,039
saying like create or get note or
26548
22:48:34,800 --> 22:48:38,479
something like that soon you'll see um
26549
22:48:37,039 --> 22:48:39,599
but in that function then we're going to
26550
22:48:39,600 --> 22:48:44,080
where we passed an argument where we
26551
22:48:41,600 --> 22:48:46,232
pass an existing note if yes we don't
26552
22:48:44,080 --> 22:48:48,232
have to create a new node if no we have
26553
22:48:48,232 --> 22:48:53,440
so the way arguments work then is if you
26554
22:48:51,679 --> 22:48:55,511
have a look at our notes view where
26555
22:48:53,440 --> 22:48:58,551
we're using push name there is a
26556
22:48:55,512 --> 22:49:00,800
parameter in here called arguments and
26557
22:48:58,551 --> 22:49:02,800
as you can see at the moment it is just
26558
22:49:00,800 --> 22:49:05,040
an optional object meaning that well it
26559
22:49:05,039 --> 22:49:09,279
we're not we're not leveraging that at
26560
22:49:06,720 --> 22:49:12,080
the moment but we are going to soon so
26561
22:49:09,279 --> 22:49:13,279
at the call side where you're creating a
26562
22:49:12,080 --> 22:49:15,119
where you're creating a route and
26563
22:49:15,119 --> 22:49:19,831
navigation stack you can pass your
26564
22:49:17,279 --> 22:49:20,720
argument using that arguments parameter
26565
22:49:20,720 --> 22:49:25,759
and at the receiving side in this case
26566
22:49:23,119 --> 22:49:27,679
are let's see create or update node view
26567
22:49:29,512 --> 22:49:34,000
you can read then your argument
26568
22:49:32,232 --> 22:49:36,232
let's see let's go to some place that
26569
22:49:34,000 --> 22:49:38,960
does make sense let's say in here
26570
22:49:36,232 --> 22:49:40,552
okay you can read that argument calling
26571
22:49:38,960 --> 22:49:41,920
now you don't have to type as i'm typing
26572
22:49:40,551 --> 22:49:46,399
i'm just demonstrating something to you
26573
22:49:41,919 --> 22:49:48,232
okay and we can use model uh route
26574
22:49:48,232 --> 22:49:54,832
is context and then you can say settings
26575
22:49:51,759 --> 22:49:58,551
dot arguments then that's where you
26576
22:49:54,831 --> 22:50:01,511
basically get access to your arguments
26577
22:49:58,551 --> 22:50:03,919
through your modal route so now you know
26578
22:50:01,512 --> 22:50:06,551
how to pass arguments and you know also
26579
22:50:03,919 --> 22:50:08,080
how to receive them all right
26580
22:50:08,080 --> 22:50:12,320
let's go to the next point um
26581
22:50:12,320 --> 22:50:19,120
we may need to somewhere also in the
26582
22:50:14,720 --> 22:50:20,800
future receive an argument inside our
26583
22:50:20,800 --> 22:50:25,360
and that argument can be any type that
26584
22:50:23,440 --> 22:50:27,440
you specify for instance you can pass an
26585
22:50:25,360 --> 22:50:29,600
integer from one screen to the other or
26586
22:50:27,440 --> 22:50:31,279
you can pass a string or you can pass an
26587
22:50:29,600 --> 22:50:33,512
array or in our case you can pass a
26588
22:50:33,512 --> 22:50:37,680
as you could see in in this code let's
26589
22:50:39,119 --> 22:50:44,000
what's this optional yes settings
26590
22:50:44,000 --> 22:50:48,160
you see at the moment this guy is an
26591
22:50:46,160 --> 22:50:49,600
object so it doesn't really know what it
26592
22:50:49,600 --> 22:50:52,639
but it'd be really good if you could
26593
22:50:52,639 --> 22:50:58,960
somehow that allows us just to say for
26594
22:50:58,960 --> 22:51:03,040
of type t something like that so we
26595
22:51:04,960 --> 22:51:10,872
we want to extract an argument of any
26596
22:51:08,320 --> 22:51:12,160
type from it if that argument exists
26597
22:51:12,160 --> 22:51:16,720
and then we're going to use it in our
26598
22:51:13,679 --> 22:51:18,799
code in here and to and we get our build
26599
22:51:16,720 --> 22:51:20,551
context and then grab our notes out of
26600
22:51:18,800 --> 22:51:23,440
it so it's what we're going to do is
26601
22:51:20,551 --> 22:51:26,000
like create a generic way of extracting
26602
22:51:23,440 --> 22:51:27,440
arguments from our build context and
26603
22:51:26,000 --> 22:51:29,440
that's exactly what we're going to do
26604
22:51:30,479 --> 22:51:34,080
to do that we're going to create an
26605
22:51:32,232 --> 22:51:35,919
extension on build context and that
26606
22:51:34,080 --> 22:51:39,040
extension is going to be called guest
26607
22:51:35,919 --> 22:51:41,679
argument and as i've indicated in the um
26608
22:51:39,039 --> 22:51:43,191
as i've indicated here in the
26609
22:51:41,679 --> 22:51:45,039
caption at the bottom of the screen you
26610
22:51:43,191 --> 22:51:46,159
can see that we are going to create a
26611
22:51:46,160 --> 22:51:52,552
under lib utilities generics and a file
26612
22:51:50,160 --> 22:51:54,800
call gets arguments so you can see we
26613
22:51:52,551 --> 22:51:57,119
have utilities at the moment here
26614
22:51:54,800 --> 22:51:59,360
and that utilities follow me just fold
26615
22:51:57,119 --> 22:52:01,119
everything in here so it's not so
26616
22:51:59,360 --> 22:52:02,399
scary to look at you can see utilities
26617
22:52:02,399 --> 22:52:06,319
a folder called dialogues under it but
26618
22:52:04,720 --> 22:52:08,160
what we want to create is a folder
26619
22:52:06,320 --> 22:52:11,040
called generics and then a file under
26620
22:52:08,160 --> 22:52:11,919
that called get arguments okay
26621
22:52:11,919 --> 22:52:17,679
uh let's go ahead and do that right now
26622
22:52:17,679 --> 22:52:21,759
utilities where where to go utilities
26623
22:52:20,320 --> 22:52:23,360
dialogues okay so i'm just gonna right
26624
22:52:21,759 --> 22:52:25,919
right click on utilities and say new
26625
22:52:23,360 --> 22:52:27,831
file and i'm gonna say generics
26626
22:52:32,479 --> 22:52:38,231
now in here what we need is um
26627
22:52:36,320 --> 22:52:41,440
to just start writing our extensions so
26628
22:52:38,232 --> 22:52:42,232
i'm just going to say extension
26629
22:52:42,232 --> 22:52:47,600
get argument on build context okay
26630
22:52:47,600 --> 22:52:52,400
if i typed build context visual studio
26631
22:52:50,080 --> 22:52:54,000
code was smart enough to import material
26632
22:52:52,399 --> 22:52:55,599
if you're using sublime or any other
26633
22:52:54,000 --> 22:52:57,191
text editor it may not be intelligent
26634
22:52:55,600 --> 22:52:59,279
enough to do that for you may not have
26635
22:52:57,191 --> 22:53:00,720
like the extension to work with dart and
26636
22:53:00,720 --> 22:53:05,512
kind of so you may have to import
26637
22:53:02,800 --> 22:53:07,680
material yourself but remember we also
26638
22:53:07,679 --> 22:53:13,439
build context and modal route from
26639
22:53:10,080 --> 22:53:15,360
entire material uh packaging here so it
26640
22:53:13,440 --> 22:53:16,720
would be it would make a lot more sense
26641
22:53:23,440 --> 22:53:29,600
right so we're not going to use more
26642
22:53:32,639 --> 22:53:36,551
all right so let's go ahead and create
26643
22:53:36,551 --> 22:53:42,319
that we are going to optionally return a
26644
22:53:39,119 --> 22:53:44,399
value of type t that means any type that
26645
22:53:42,320 --> 22:53:46,800
you ask us to and we're going to call
26646
22:53:49,512 --> 22:53:54,160
and get argument itself takes t all
26647
22:53:51,919 --> 22:53:56,639
right so in here what we're going to say
26648
22:53:54,160 --> 22:53:58,400
is going to say modal route is model
26649
22:54:03,831 --> 22:54:08,399
we are creating an extension on build
26650
22:54:05,759 --> 22:54:11,191
context and this identifier in here
26651
22:54:08,399 --> 22:54:13,119
refers to the current build context on
26652
22:54:11,191 --> 22:54:15,191
which the get argument function is
26653
22:54:13,119 --> 22:54:16,319
actually invoked so if you're not
26654
22:54:16,320 --> 22:54:21,680
extensions i've talked about them before
26655
22:54:18,800 --> 22:54:23,600
and so it i think it was part of also
26656
22:54:21,679 --> 22:54:25,191
the dart introduction in the beginning
26657
22:54:23,600 --> 22:54:26,872
absolute beginning of this course so you
26658
22:54:25,191 --> 22:54:29,039
may want to go back to that in order to
26659
22:54:26,872 --> 22:54:32,160
understand how extensions actually work
26660
22:54:29,039 --> 22:54:33,759
okay so remember model route in here if
26661
22:54:33,759 --> 22:54:38,159
it can be an optional in here you see so
26662
22:54:36,000 --> 22:54:40,800
what we need to do is to guard ourselves
26663
22:54:38,160 --> 22:54:42,320
against that so we just say if modal
26664
22:54:44,000 --> 22:54:47,600
and otherwise we're just going to return
26665
22:54:45,759 --> 22:54:50,319
null we're saying that if we can't get
26666
22:54:47,600 --> 22:54:52,800
the model route then we can't extract
26667
22:54:50,320 --> 22:54:53,512
any argument from it okay so let's get
26668
22:54:53,512 --> 22:54:57,191
let's get all the arguments from our
26669
22:54:55,191 --> 22:54:59,679
model route now so we're gonna say args
26670
22:54:59,679 --> 22:55:06,319
dot arguments okay and then remember
26671
22:55:02,872 --> 22:55:08,720
args is also now an object as it was
26672
22:55:06,320 --> 22:55:11,760
on the call site the call site may skip
26673
22:55:08,720 --> 22:55:13,040
over passing an argument to us and we in
26674
22:55:11,759 --> 22:55:14,959
that case we're not going to get any
26675
22:55:13,039 --> 22:55:16,959
arguments which means args is going to
26676
22:55:16,960 --> 22:55:22,400
so let's just guard ourselves against
26677
22:55:19,360 --> 22:55:23,831
that so we say if args is not null and
26678
22:55:23,831 --> 22:55:29,831
is of this given type then we're going
26679
22:55:33,039 --> 22:55:37,919
so what we're saying in here is that if
26680
22:55:35,119 --> 22:55:40,319
we could grab any arguments from um our
26681
22:55:37,919 --> 22:55:42,551
modal route settings arguments and if
26682
22:55:40,320 --> 22:55:45,280
that argument is of the type that you
26683
22:55:42,551 --> 22:55:46,872
are asking this function to extract then
26684
22:55:45,279 --> 22:55:48,639
we're going to give it back to otherwise
26685
22:55:46,872 --> 22:55:50,960
we're just going to fall through to line
26686
22:55:48,639 --> 22:55:52,872
number 12 in here and just return and
26687
22:55:52,872 --> 22:55:56,872
now i'm going to save this file
26688
22:55:59,440 --> 22:56:05,760
now what we need is let me bring up the
26689
22:56:01,831 --> 22:56:05,759
caption so you see what we have to do
26690
22:56:08,872 --> 22:56:13,512
view which we call create actually it's
26691
22:56:11,759 --> 22:56:15,039
easy now now that we have a lot of files
26692
22:56:13,512 --> 22:56:17,119
in our project it's actually easier to
26693
22:56:15,039 --> 22:56:18,871
navigate if we just do command p in
26694
22:56:17,119 --> 22:56:20,319
visual studio code for instance to jump
26695
22:56:20,320 --> 22:56:25,600
files so in that file it is now called
26696
22:56:23,512 --> 22:56:27,191
create update node view so let's go
26697
22:56:27,191 --> 22:56:32,479
and as the caption indicates our creates
26698
22:56:30,320 --> 22:56:34,080
note in here let's have a look and see
26699
22:56:36,479 --> 22:56:40,959
so what we need to do is we just need to
26700
22:56:42,639 --> 22:56:46,399
ask them captions to get create or get
26701
22:56:46,399 --> 22:56:51,831
i'm gonna do that i'm gonna say create
26702
22:56:51,831 --> 22:56:56,231
and again we just do the code smart
26703
22:56:53,831 --> 22:56:57,919
enough to rename where i'm actually
26704
22:56:56,232 --> 22:57:00,080
using that function as well you can see
26705
22:57:00,080 --> 22:57:04,320
so you may otherwise if you're not using
26706
22:57:02,551 --> 22:57:05,919
visual code or if you're not using the
26707
22:57:04,320 --> 22:57:08,720
refactoring features of your favorite
26708
22:57:05,919 --> 22:57:10,639
editor you may have to rename that
26709
22:57:10,639 --> 22:57:14,399
so i don't think i have to mention this
26710
22:57:12,800 --> 22:57:16,160
again i think i've now mentioned it
26711
22:57:14,399 --> 22:57:17,511
three times so just so you know if
26712
22:57:16,160 --> 22:57:19,680
you're renaming something just make sure
26713
22:57:17,512 --> 22:57:21,919
that all the call sites are also updated
26714
22:57:23,440 --> 22:57:29,600
all right so now that we've done that we
26715
22:57:25,831 --> 22:57:32,080
actually need to grab the existing nodes
26716
22:57:35,679 --> 22:57:39,759
so let's do that you can see it says in
26717
22:57:37,831 --> 22:57:42,871
create or get existing no gets note
26718
22:57:42,872 --> 22:57:48,720
so let's then in here say if we if our
26719
22:57:46,551 --> 22:57:50,800
widgets like the widget that actually
26720
22:57:50,800 --> 22:57:54,400
has passed us an argument of type
26721
22:57:52,720 --> 22:57:56,080
database note then we're going to get
26722
22:57:54,399 --> 22:57:57,759
that okay so let's just call it widget
26723
22:57:58,872 --> 22:58:02,551
we need now a build context because
26724
22:58:00,551 --> 22:58:04,639
remember our extension was created on
26725
22:58:02,551 --> 22:58:06,720
build context however this function at
26726
22:58:04,639 --> 22:58:08,960
the moment has no build context so let's
26727
22:58:06,720 --> 22:58:10,160
go ahead and pass a build context in
26728
22:58:11,191 --> 22:58:15,831
so let's then go into the call site and
26729
22:58:13,759 --> 22:58:17,831
pass the build context in here call
26730
22:58:15,831 --> 22:58:21,039
context which is passed to us in the
26731
22:58:21,039 --> 22:58:25,360
so trusting that you've done that
26732
22:58:23,119 --> 22:58:26,479
we're now going to go and say context
26733
22:58:26,479 --> 22:58:31,831
and you see now we need our get argument
26734
22:58:28,960 --> 22:58:33,192
function in here but as i type nothing
26735
22:58:31,831 --> 22:58:35,191
appears here and that's because we don't
26736
22:58:35,191 --> 22:58:38,639
i can see if i just type get the
26737
22:58:36,639 --> 22:58:40,800
argument and ask visual studio code to
26738
22:58:38,639 --> 22:58:43,479
see if it can solve that problem for me
26739
22:58:40,800 --> 22:58:45,760
it's saying that oh there is again
26740
22:58:43,479 --> 22:58:47,440
arguments.dart file which has a function
26741
22:58:45,759 --> 22:58:49,279
do you want me to import it so i'm just
26742
22:58:49,279 --> 22:58:52,639
otherwise if you're not doing this you
26743
22:58:52,639 --> 22:58:57,119
arguments.dart file by hand all right so
26744
22:58:55,600 --> 22:58:59,192
now i'm just saying get arguments and
26745
22:58:57,119 --> 22:59:02,551
remember get arguments function in
26746
22:58:59,191 --> 22:59:05,039
itself has no parameters so how do you
26747
22:59:02,551 --> 22:59:07,279
call this function okay how do you tell
26748
22:59:07,279 --> 22:59:11,512
of like database node well that's very
26749
22:59:11,512 --> 22:59:16,320
less than sign and and grade it inside
26750
22:59:13,679 --> 22:59:18,000
like that and then you type the type of
26751
22:59:16,320 --> 22:59:19,760
object that you want to extract so if we
26752
22:59:21,679 --> 22:59:27,191
and now that we did that remember get
26753
22:59:24,720 --> 22:59:29,119
arguments returns an optional object of
26754
22:59:27,191 --> 22:59:31,679
that type and in this case our database
26755
22:59:29,119 --> 22:59:33,759
node is then an optional database node
26756
22:59:31,679 --> 22:59:35,039
all right meaning that you either have a
26757
22:59:35,039 --> 22:59:38,959
so that the user has tapped on an
26758
22:59:36,639 --> 22:59:40,551
existing node and came here or you don't
26759
22:59:38,960 --> 22:59:43,360
meaning that a user tapped on the plus
26760
22:59:43,360 --> 22:59:48,639
so then we say if the widget node
26761
22:59:46,320 --> 22:59:50,320
is not null meaning that we are updating
26762
22:59:48,639 --> 22:59:52,232
an existing node so that the user has
26763
22:59:50,320 --> 22:59:53,440
tapped on an existing node and ended up
26764
22:59:53,440 --> 22:59:57,279
then what we're going to do we're going
26765
22:59:59,279 --> 23:00:02,872
i think we set it up somewhere around
26766
23:00:02,872 --> 23:00:05,760
so we're going to say our node is the
26767
23:00:07,360 --> 23:00:12,551
and in this case what we also need to do
26768
23:00:09,119 --> 23:00:15,119
we need to make sure that the text field
26769
23:00:16,000 --> 23:00:19,600
i can show you here so if you go here
26770
23:00:19,600 --> 23:00:24,639
pre-populated with that existing notes
26771
23:00:22,080 --> 23:00:26,720
text and the way we can do that i mean
26772
23:00:24,639 --> 23:00:29,360
we don't have direct access to our text
26773
23:00:26,720 --> 23:00:31,680
field but what we do have is this text
26774
23:00:29,360 --> 23:00:34,320
controller which we set up in here text
26775
23:00:31,679 --> 23:00:36,319
controller okay so let's go and set that
26776
23:00:34,320 --> 23:00:40,320
text controller's text so i'm just gonna
26777
23:00:36,320 --> 23:00:42,000
say text controller the text is equal to
26778
23:00:44,720 --> 23:00:50,551
and then we're just going to return the
26779
23:00:55,191 --> 23:00:59,599
what we're doing in here we're saying
26780
23:00:57,039 --> 23:01:01,279
existing note notes so the logic
26781
23:00:59,600 --> 23:01:03,512
is going to stay the same the rest so if
26782
23:01:01,279 --> 23:01:05,600
we could extract the node from the
26783
23:01:03,512 --> 23:01:08,232
passing widget or the color widget then
26784
23:01:05,600 --> 23:01:09,920
we set that as our node set the text and
26785
23:01:08,232 --> 23:01:12,160
then just return the widget note
26786
23:01:09,919 --> 23:01:14,872
otherwise we continue exactly as we did
26787
23:01:14,872 --> 23:01:18,232
so let's see in here what we're also
26788
23:01:16,551 --> 23:01:21,679
doing existing note we're just returning
26789
23:01:18,232 --> 23:01:24,400
in but i can also see that upon doing a
26790
23:01:21,679 --> 23:01:26,719
creates note in here we're not setting
26791
23:01:24,399 --> 23:01:29,919
that note so what we need to do in here
26792
23:01:26,720 --> 23:01:31,040
let's just say final new note
26793
23:01:31,039 --> 23:01:35,439
and and then we store that note we say
26794
23:01:37,512 --> 23:01:43,360
and then we just say return you know so
26795
23:01:39,759 --> 23:01:45,119
in here we're also saving our notes okay
26796
23:01:43,360 --> 23:01:48,960
so that's really good so we actually
26797
23:01:45,119 --> 23:01:48,959
working with an existing notes all right
26798
23:01:50,800 --> 23:01:55,040
so i'm actually not sure how this has
26799
23:01:53,191 --> 23:01:57,599
worked before this may have been a bug
26800
23:01:55,039 --> 23:01:59,511
in the previous um sections in that we
26801
23:01:57,600 --> 23:02:01,440
didn't actually store the node in this
26802
23:02:02,479 --> 23:02:06,399
maybe we had that bug from before i
26803
23:02:04,551 --> 23:02:09,039
can't be completely sure about that so
26804
23:02:06,399 --> 23:02:10,639
i'm just gonna press back in here but if
26805
23:02:09,039 --> 23:02:12,799
you had that bug as well if you were
26806
23:02:10,639 --> 23:02:14,232
like returning just on a weight of node
26807
23:02:12,800 --> 23:02:17,192
service create node and you weren't
26808
23:02:14,232 --> 23:02:18,480
saving that i'm not sure how these
26809
23:02:18,479 --> 23:02:22,399
these functions were actually working
26810
23:02:22,399 --> 23:02:26,639
oh i can see that we were setting it in
26811
23:02:24,160 --> 23:02:29,120
here so we may not have to do that
26812
23:02:26,639 --> 23:02:30,872
anymore so let's then go ahead and i
26813
23:02:29,119 --> 23:02:34,720
mean this was quite smart but it wasn't
26814
23:02:30,872 --> 23:02:37,120
that good idea that the widget's build
26815
23:02:37,119 --> 23:02:42,639
a core part of this widget so let's
26816
23:02:42,639 --> 23:02:46,319
how it was working so that's the reason
26817
23:02:44,639 --> 23:02:49,039
it was working but it shouldn't work
26818
23:02:49,831 --> 23:02:53,919
okay let's move to the next section now
26819
23:02:56,960 --> 23:03:00,480
this part in here if i press the delete
26820
23:03:00,479 --> 23:03:04,231
do you remember this we developed this
26821
23:03:02,320 --> 23:03:06,552
in one of the previous chapters of this
26822
23:03:04,232 --> 23:03:08,720
course we made sure that we have a
26823
23:03:06,551 --> 23:03:10,551
callback and that callback was defined
26824
23:03:10,551 --> 23:03:15,512
notes list view i'm actually going to do
26825
23:03:15,512 --> 23:03:19,119
do you remember this callback it's
26826
23:03:19,119 --> 23:03:23,919
it was just a function that returned
26827
23:03:21,440 --> 23:03:25,919
nothing and accepted the notes and this
26828
23:03:23,919 --> 23:03:27,360
way we could tell the notes view that
26829
23:03:27,360 --> 23:03:31,680
the user wants to delete a note do it
26830
23:03:31,679 --> 23:03:35,039
and that was being called upon the user
26831
23:03:33,360 --> 23:03:36,399
pressing the yes button remember it's
26832
23:03:36,399 --> 23:03:39,599
view that is actually showing the delete
26833
23:03:42,080 --> 23:03:45,360
but if you look at this delete node
26834
23:03:45,360 --> 23:03:49,831
what is it actually a call backup is a
26835
23:03:47,440 --> 23:03:52,000
callback of a note all right so it has
26836
23:03:49,831 --> 23:03:53,919
nothing really to do with delete it's
26837
23:03:52,000 --> 23:03:55,279
just called delete node callback all
26838
23:04:00,080 --> 23:04:04,551
somehow when the any of these notes is
26839
23:04:02,320 --> 23:04:07,512
tapped can we utilize the exact same
26840
23:04:04,551 --> 23:04:11,039
function to tell the notes list view
26841
23:04:07,512 --> 23:04:13,119
sorry to tell the notes view that hey
26842
23:04:11,039 --> 23:04:15,039
you the user tapped on a note well of
26843
23:04:13,119 --> 23:04:16,479
course we could do that because
26844
23:04:15,039 --> 23:04:18,871
it has no return value and it just
26845
23:04:16,479 --> 23:04:20,551
accepts a note so we have a little
26846
23:04:18,872 --> 23:04:22,160
problem with the naming of this right
26847
23:04:20,551 --> 23:04:23,679
now it's just called delete note call
26848
23:04:22,160 --> 23:04:25,040
back but it shouldn't be all right so
26849
23:04:23,679 --> 23:04:27,119
we're going to utilize that both for
26850
23:04:29,279 --> 23:04:33,679
let me bring up the caption let's rename
26851
23:04:31,191 --> 23:04:35,360
that delete node callback to just node
26852
23:04:33,679 --> 23:04:38,079
callback so i'm going to right click on
26853
23:04:35,360 --> 23:04:40,479
it i'm just going to say rename
26854
23:04:38,080 --> 23:04:42,800
rename symbol and let's just call it
26855
23:04:40,479 --> 23:04:44,720
node callback okay and now you can see
26856
23:04:42,800 --> 23:04:46,232
it's actually renamed it here for me as
26857
23:04:46,232 --> 23:04:50,480
and everything should be working the way
26858
23:04:48,551 --> 23:04:51,919
it was before so we don't have to do
26859
23:04:50,479 --> 23:04:54,872
anything special it's just called node
26860
23:04:58,080 --> 23:05:02,160
let's move on to the next section now
26861
23:04:59,831 --> 23:05:04,639
which is very related so what we need to
26862
23:05:02,160 --> 23:05:09,360
do now is you see at the moment the
26863
23:05:04,639 --> 23:05:11,759
nodes list view it's not handling at all
26864
23:05:09,360 --> 23:05:13,360
the user tapping on any of these list
26865
23:05:11,759 --> 23:05:15,679
tiles and we're going to fix that so i'm
26866
23:05:13,360 --> 23:05:17,191
just going to go to my notes
26867
23:05:15,679 --> 23:05:20,759
and make sure that i have all the
26868
23:05:21,191 --> 23:05:26,319
so what we need now is just to make sure
26869
23:05:26,320 --> 23:05:31,600
on those uh on the on tap all right
26870
23:05:29,759 --> 23:05:34,799
so sorry that the user can tap on these
26871
23:05:31,600 --> 23:05:37,120
list tiles and then um we're then going
26872
23:05:34,800 --> 23:05:39,919
to call a function just like the node
26873
23:05:39,919 --> 23:05:43,759
widget that hey the user tapped on one
26874
23:05:41,759 --> 23:05:45,599
of these just do whatever you want so
26875
23:05:43,759 --> 23:05:48,479
let's go ahead and add a field here and
26876
23:05:45,600 --> 23:05:51,040
say on tap sorry note callback
26877
23:05:48,479 --> 23:05:53,191
and we'll just call it ontap
26878
23:05:51,039 --> 23:05:54,479
the constructor is not happy now saying
26879
23:05:53,191 --> 23:05:55,831
that yeah you have a final field that
26880
23:05:54,479 --> 23:05:58,479
you haven't initialized so let's just
26881
23:05:55,831 --> 23:06:00,159
add that here right after undelete and
26882
23:05:58,479 --> 23:06:03,119
i'm just going to make this required
26883
23:06:00,160 --> 23:06:04,480
parameter and a comma at the end just to
26884
23:06:03,119 --> 23:06:06,399
make sure that you get the formatting
26885
23:06:06,399 --> 23:06:10,720
we're not using on tap right now and if
26886
23:06:08,639 --> 23:06:12,160
you've noticed we've also broken the
26887
23:06:10,720 --> 23:06:14,080
notes here that's okay we'll get there
26888
23:06:12,160 --> 23:06:15,760
we'll fix that soon the reason we've
26889
23:06:14,080 --> 23:06:17,600
broken note2 is because we're not
26890
23:06:15,759 --> 23:06:20,639
passing on tap since it's a required
26891
23:06:17,600 --> 23:06:23,040
parameter okay we're gonna fix this
26892
23:06:20,639 --> 23:06:25,360
luckily in order to handle tabs on a
26893
23:06:23,039 --> 23:06:26,871
list tile we don't have to work with
26894
23:06:25,360 --> 23:06:29,360
gesture recognition or anything like
26895
23:06:26,872 --> 23:06:31,832
that but what we could do is just to say
26896
23:06:29,360 --> 23:06:33,831
untapped you see it's already there so
26897
23:06:31,831 --> 23:06:36,080
there is a function that has no
26898
23:06:36,080 --> 23:06:40,320
and what we need to do in here just to
26899
23:06:38,160 --> 23:06:42,400
call our own ontap in here and you can
26900
23:06:40,320 --> 23:06:45,440
see we have to pass a database node and
26901
23:06:42,399 --> 23:06:46,551
luckily we already have i believe a note
26902
23:06:46,551 --> 23:06:51,679
okay so we're just gonna say untap and
26903
23:06:52,960 --> 23:06:59,192
okay um so we're doing that now
26904
23:06:56,720 --> 23:07:00,320
now what we need to do is to go back to
26905
23:07:00,320 --> 23:07:04,720
notes view and handle that case you see
26906
23:07:03,191 --> 23:07:06,959
so i'm going to go back to our note 2
26907
23:07:04,720 --> 23:07:09,759
and and scroll to the part where we're
26908
23:07:06,960 --> 23:07:11,600
getting an error and we have on delete
26909
23:07:11,600 --> 23:07:16,400
but we don't have the on tap so
26910
23:07:14,639 --> 23:07:18,160
i'm going to go to my notes as well all
26911
23:07:18,160 --> 23:07:21,832
now in here right after on delete note
26912
23:07:21,831 --> 23:07:25,679
add this untapped functionality in here
26913
23:07:24,000 --> 23:07:27,279
and you can see visuals helping me and
26914
23:07:25,679 --> 23:07:30,719
saying oh this function actually accepts
26915
23:07:27,279 --> 23:07:33,191
a node so if i move my mouse over it it
26916
23:07:30,720 --> 23:07:34,720
already tells me it's a database node
26917
23:07:33,191 --> 23:07:37,119
and remember that's just what the nodes
26918
23:07:34,720 --> 23:07:39,512
list view is giving us all right
26919
23:07:37,119 --> 23:07:41,831
and then here let's make this function
26920
23:07:39,512 --> 23:07:44,160
an asynchronous function the reason for
26921
23:07:41,831 --> 23:07:45,360
that is because we're going to actually
26922
23:07:46,479 --> 23:07:49,191
let me actually see if we have to make
26923
23:07:47,919 --> 23:07:50,639
it asynchronous i don't think it needs
26924
23:07:49,191 --> 23:07:52,799
to be async first let's just not make it
26925
23:07:50,639 --> 23:07:54,080
asynchronous i had it as asynchronous in
26926
23:07:52,800 --> 23:07:55,192
my notes and i thought that we have to
26927
23:07:55,191 --> 23:07:58,080
maybe there is a reason behind it i
26928
23:07:56,399 --> 23:07:59,919
don't know yet but uh let's just go
26929
23:07:58,080 --> 23:08:01,440
ahead and not add asynchronous at the
26930
23:08:01,440 --> 23:08:05,360
so what we need to do in this case is
26931
23:08:03,440 --> 23:08:07,440
also do something very similar to what
26932
23:08:05,360 --> 23:08:10,320
we're doing in here navigator of blah
26933
23:08:07,440 --> 23:08:12,720
blah push no not that one sorry this one
26934
23:08:10,320 --> 23:08:15,360
navigator of context push name create or
26935
23:08:12,720 --> 23:08:18,080
update note route so it may actually
26936
23:08:15,360 --> 23:08:19,919
make sense to copy that code and let's
26937
23:08:19,919 --> 23:08:24,232
in on tab and paste that i'm going to
26938
23:08:21,831 --> 23:08:25,191
put a comma here so it breaks it down
26939
23:08:25,191 --> 23:08:28,799
and in here what we're going to do is
26940
23:08:26,872 --> 23:08:30,639
just to say arguments and we're going to
26941
23:08:32,232 --> 23:08:36,639
we're just saying that here's a note and
26942
23:08:34,551 --> 23:08:38,639
go to that screen and pass that argument
26943
23:08:42,551 --> 23:08:46,231
this function gets called create or get
26944
23:08:47,759 --> 23:08:51,679
tries to grab that argument of type
26945
23:08:49,512 --> 23:08:53,512
database node from our context using our
26946
23:08:53,512 --> 23:08:57,191
generic function which then goes to the
26947
23:08:55,279 --> 23:08:59,512
modal route of that context and then
26948
23:08:57,191 --> 23:09:01,360
grabs that argument so it's like three
26949
23:08:59,512 --> 23:09:03,119
layers of extraction but that's that's
26950
23:09:01,360 --> 23:09:04,872
quite fine now at least you have a
26951
23:09:03,119 --> 23:09:07,919
generic function to grab your arguments
26952
23:09:04,872 --> 23:09:10,000
okay so i'm going to press command s
26953
23:09:07,919 --> 23:09:11,599
it might be good to do a hot reload
26954
23:09:11,600 --> 23:09:15,832
just because we've done quite a bit of
26955
23:09:14,160 --> 23:09:18,720
changing so i'm going to delete these
26956
23:09:15,831 --> 23:09:22,720
two nodes like that and then i'm gonna
26957
23:09:18,720 --> 23:09:24,872
press the plus button let's just in here
26958
23:09:26,639 --> 23:09:30,399
i'm gonna go back and then i'm gonna
26959
23:09:28,551 --> 23:09:31,599
press press and i'm just gonna say my
26960
23:09:33,831 --> 23:09:37,919
now i have my note number one and two in
26961
23:09:35,600 --> 23:09:39,832
here then i'm now gonna test that to see
26962
23:09:37,919 --> 23:09:41,759
that we can actually go and edit an
26963
23:09:39,831 --> 23:09:43,511
existing note all right so i'm gonna go
26964
23:09:41,759 --> 23:09:45,679
to my note number one and tap on it and
26965
23:09:43,512 --> 23:09:48,960
now i can see i actually went to
26966
23:09:45,679 --> 23:09:50,799
our notes and it says it still says new
26967
23:09:50,800 --> 23:09:53,680
and maybe that's okay we could just
26968
23:09:52,479 --> 23:09:56,399
leave it like that we could update the
26969
23:09:53,679 --> 23:09:57,919
text maybe later that's that's fine
26970
23:09:56,399 --> 23:09:59,511
but at least i can see the text so i'm
26971
23:09:57,919 --> 23:10:02,551
now going to change actually this my new
26972
23:09:59,512 --> 23:10:04,872
note sorry my note 1 to my note 3 and go
26973
23:10:02,551 --> 23:10:06,872
back and i can see now i have my note 2
26974
23:10:04,872 --> 23:10:09,192
and 3. so this is a really good sign
26975
23:10:06,872 --> 23:10:10,872
because that means that updating an
26976
23:10:09,191 --> 23:10:13,440
existing note is actually working and
26977
23:10:10,872 --> 23:10:14,960
we're not creating a new note because
26978
23:10:13,440 --> 23:10:16,551
otherwise that note would have appeared
26979
23:10:14,960 --> 23:10:18,720
in this list so i'm going to go to this
26980
23:10:16,551 --> 23:10:21,039
new note 3 and then change it to
26981
23:10:18,720 --> 23:10:23,512
one as well so now you see it gets
26982
23:10:23,512 --> 23:10:28,080
perfect we got updating working and it
26983
23:10:26,720 --> 23:10:29,919
was quite a breeze to be honest with you
26984
23:10:32,080 --> 23:10:36,320
what we need now is to make sure we
26985
23:10:33,831 --> 23:10:38,399
don't lose our code so let's go as we
26986
23:10:36,320 --> 23:10:41,440
usually do at the end of every chapter
26987
23:10:38,399 --> 23:10:43,679
and we're gonna go commit and tag our
26988
23:10:41,440 --> 23:10:46,639
code okay i'm gonna change the screen
26989
23:10:46,639 --> 23:10:52,399
increase the size of the screen so you
26990
23:10:49,759 --> 23:10:54,720
see what i'm doing a little bit better
26991
23:10:52,399 --> 23:10:56,799
let's go to our terminal and if you look
26992
23:10:58,800 --> 23:11:04,872
um i think it's was it command k yeah
26993
23:11:03,191 --> 23:11:07,279
let's look at our git log and you see
26994
23:11:04,872 --> 23:11:10,160
the last uh commit that we did was step
26995
23:11:07,279 --> 23:11:12,959
16 and also your tags the last tag was
26996
23:11:10,160 --> 23:11:13,832
also step 16 okay let's go and commit
26997
23:11:14,800 --> 23:11:17,919
maybe before that let's have a look at
26998
23:11:17,919 --> 23:11:21,759
and a bit has changed modified modified
26999
23:11:21,759 --> 23:11:25,511
it thinks that this file was deleted
27000
23:11:30,000 --> 23:11:34,232
that's unfortunate that it marked it as
27001
23:11:31,831 --> 23:11:36,720
deleted that's okay though but a little
27002
23:11:34,232 --> 23:11:38,232
bit unfortunate there there are ways of
27003
23:11:36,720 --> 23:11:40,720
doing that so that git actually
27004
23:11:38,232 --> 23:11:42,639
understands that you rename the file but
27005
23:11:40,720 --> 23:11:44,479
i can see that visual studio code wasn't
27006
23:11:42,639 --> 23:11:46,800
able to actually mark that as rename and
27007
23:11:44,479 --> 23:11:48,399
it also it just marked it basically was
27008
23:11:48,399 --> 23:11:52,159
but that's okay we can live with that so
27009
23:11:49,831 --> 23:11:55,191
let's just say git add all and let's
27010
23:11:57,759 --> 23:12:01,511
and then we just say git push so we push
27011
23:11:59,831 --> 23:12:03,191
all our changes and let's do a git
27012
23:12:01,512 --> 23:12:05,360
status to make sure we didn't leave any
27013
23:12:03,191 --> 23:12:07,119
files behind and we haven't
27014
23:12:05,360 --> 23:12:10,639
so in here we're then going to say get
27015
23:12:07,119 --> 23:12:12,871
tag step 17 as well and push our tags
27016
23:12:19,279 --> 23:12:24,479
existing notes and that's fantastic so
27017
23:12:22,551 --> 23:12:26,959
as is tradition for every chapter in
27018
23:12:24,479 --> 23:12:29,279
this course we always talk about what we
27019
23:12:26,960 --> 23:12:30,639
when we need to work on in the coming
27020
23:12:31,919 --> 23:12:35,039
we have a little bit of a problem in our
27021
23:12:33,440 --> 23:12:37,440
source code at the moment and that is
27022
23:12:35,039 --> 23:12:39,360
inside our node service so i'm going to
27023
23:12:37,440 --> 23:12:41,600
get rid of this bottom bar here and go
27024
23:12:41,600 --> 23:12:45,192
and you can see in our node service
27025
23:12:42,960 --> 23:12:47,600
we're exposing a functionality here
27026
23:12:45,191 --> 23:12:49,440
called gets all nodes actually i don't
27027
23:12:47,600 --> 23:12:51,040
think we're using this get all notes
27028
23:12:54,639 --> 23:12:58,000
let's see where that is here all notes
27029
23:12:56,551 --> 23:13:00,399
stream and that is just reading the
27030
23:12:58,000 --> 23:13:01,279
notes stream controllers stream
27031
23:13:03,039 --> 23:13:06,319
that is coming from here you can see
27032
23:13:09,279 --> 23:13:17,831
being populated inside let's see
27033
23:13:13,759 --> 23:13:17,831
get all nodes remove we have here
27034
23:13:17,919 --> 23:13:23,360
so you see we are at the moment reading
27035
23:13:20,720 --> 23:13:26,080
all notes and we're just exposing them
27036
23:13:23,360 --> 23:13:28,960
to the outside world but wait a minute
27037
23:13:26,080 --> 23:13:30,551
our application has the concept of users
27038
23:13:30,551 --> 23:13:35,599
so if we if we now log out of the
27039
23:13:33,360 --> 23:13:37,600
application and log back in with another
27040
23:13:37,600 --> 23:13:43,440
that new user is going to see my notes
27041
23:13:40,399 --> 23:13:45,439
because there is nowhere inside this
27042
23:13:43,440 --> 23:13:48,479
node service that we have a concept of a
27043
23:13:45,440 --> 23:13:50,160
user like we're not actually filtering
27044
23:13:48,479 --> 23:13:52,800
these things out and exposing only
27045
23:13:50,160 --> 23:13:55,040
relevant data to the user okay so
27046
23:13:52,800 --> 23:13:56,720
we need to fix that it's very serious uh
27047
23:13:55,039 --> 23:13:58,551
it's not a bug it's actually something
27048
23:13:56,720 --> 23:13:59,919
that i've intentionally left until this
27049
23:13:58,551 --> 23:14:01,512
point because yeah we didn't have to
27050
23:13:59,919 --> 23:14:03,759
handle that it was just more fun to work
27051
23:14:01,512 --> 23:14:05,440
with the ui of the application but we
27052
23:14:03,759 --> 23:14:06,551
have to be very conscious about these
27053
23:14:05,440 --> 23:14:08,720
little things that we haven't
27054
23:14:06,551 --> 23:14:10,399
implemented and that's exactly what
27055
23:14:08,720 --> 23:14:11,600
we're gonna do and fix in the next
27056
23:14:12,872 --> 23:14:16,872
hello everyone and welcome to chapter 35
27057
23:14:16,872 --> 23:14:20,720
in the previous chapter as you saw we
27058
23:14:18,639 --> 23:14:23,831
started talking about how we can update
27059
23:14:20,720 --> 23:14:26,639
an existing node in the node list and we
27060
23:14:23,831 --> 23:14:29,360
refactored our new node view as it was
27061
23:14:26,639 --> 23:14:31,679
called before to become i believe create
27062
23:14:29,360 --> 23:14:32,960
update node view and this node view is
27063
23:14:32,960 --> 23:14:38,080
do two things either create a new node
27064
23:14:35,191 --> 23:14:40,319
or update an existing one so we didn't
27065
23:14:38,080 --> 23:14:42,720
create a whole new view just to be able
27066
23:14:40,320 --> 23:14:44,000
to update an existing node so that went
27067
23:14:47,039 --> 23:14:50,959
at the end of the previous chapter we
27068
23:14:49,191 --> 23:14:53,512
have a little bit of a problem with our
27069
23:14:50,960 --> 23:14:56,552
node service in that right now
27070
23:14:53,512 --> 23:14:58,720
node service doesn't really take into
27071
23:14:56,551 --> 23:15:02,319
consideration which users logged into
27072
23:14:58,720 --> 23:15:04,399
the application and hence it cannot
27073
23:15:02,320 --> 23:15:06,320
return relevant nodes for that
27074
23:15:04,399 --> 23:15:07,831
particular user so what the node service
27075
23:15:06,320 --> 23:15:09,360
at the moment is doing is just fetching
27076
23:15:07,831 --> 23:15:11,759
all the nodes from the database and
27077
23:15:09,360 --> 23:15:13,680
returning it to the current user this is
27078
23:15:11,759 --> 23:15:15,919
going to cause an issue in that when we
27079
23:15:13,679 --> 23:15:17,599
log in with one user we're going to see
27080
23:15:15,919 --> 23:15:19,191
all the nodes in the system and when we
27081
23:15:17,600 --> 23:15:21,512
log out with a user and log in with a
27082
23:15:19,191 --> 23:15:23,279
completely new user we're again going to
27083
23:15:21,512 --> 23:15:24,960
see all the notes that are stored in the
27084
23:15:23,279 --> 23:15:26,872
note server so we have to fix that in
27085
23:15:26,872 --> 23:15:32,080
before we get started with that we have
27086
23:15:29,600 --> 23:15:33,360
a little bit of a problem with our
27087
23:15:33,360 --> 23:15:36,399
and this is a bug that's been inside the
27088
23:15:34,800 --> 23:15:38,551
application for a while since we
27089
23:15:36,399 --> 23:15:40,479
basically created our cloud service and
27090
23:15:38,551 --> 23:15:42,872
we have to fix that so let's have a look
27091
23:15:40,479 --> 23:15:43,919
at what this bug actually is before i
27092
23:15:43,919 --> 23:15:47,191
before we go on so i'm going to put
27093
23:15:47,191 --> 23:15:51,119
and i'm going to put visual studio code
27094
23:15:51,119 --> 23:15:55,039
all right so i hope you can see the
27095
23:15:52,872 --> 23:15:56,872
screen so here right now we have um
27096
23:15:55,039 --> 23:15:58,159
maybe i don't have to hope for it i
27097
23:15:56,872 --> 23:16:00,639
could just bring the screen to be a
27098
23:15:58,160 --> 23:16:03,440
little bit bigger so if you look in scr
27099
23:16:00,639 --> 23:16:05,831
cpy right now we have two my note number
27100
23:16:03,440 --> 23:16:08,160
two and that is exactly the box so let's
27101
23:16:05,831 --> 23:16:10,319
go in here and to the first one and i'm
27102
23:16:08,160 --> 23:16:11,512
just gonna say my note number one
27103
23:16:11,512 --> 23:16:15,919
and go out and everything looks fine
27104
23:16:14,399 --> 23:16:18,319
right now it's just because we are
27105
23:16:15,919 --> 23:16:20,551
updating our local cache as well so
27106
23:16:18,320 --> 23:16:24,320
things are looking good however if you
27107
23:16:20,551 --> 23:16:27,119
do a hot restart of the application
27108
23:16:24,320 --> 23:16:29,192
and my scr cpy just died so that's okay
27109
23:16:27,119 --> 23:16:31,759
i can live with that it's a free
27110
23:16:29,191 --> 23:16:34,639
software so as your cpy and and i can
27111
23:16:31,759 --> 23:16:37,191
see now i've lost actually my debug
27112
23:16:37,191 --> 23:16:42,639
so i'm gonna restart the application
27113
23:16:40,160 --> 23:16:45,192
but what is going to happen now is as
27114
23:16:42,639 --> 23:16:47,119
you'll soon see is we have a little bit
27115
23:16:45,191 --> 23:16:49,599
of a problem with our updates note
27116
23:16:47,119 --> 23:16:51,440
functionality so you can see now that i
27117
23:16:49,600 --> 23:16:54,000
now that i restarted the application all
27118
23:16:51,440 --> 23:16:56,160
of a sudden both notes were changed to
27119
23:16:54,000 --> 23:16:57,440
my notes number one and that's not
27120
23:16:56,160 --> 23:16:59,832
that's not correct that's because
27121
23:16:57,440 --> 23:17:02,400
there's a bug inside the application so
27122
23:16:59,831 --> 23:17:04,720
how it's manifest manifesting itself is
27123
23:17:04,720 --> 23:17:09,440
locally it looks fine but if you do a
27124
23:17:06,720 --> 23:17:12,232
hot restart excuse me then it's gonna be
27125
23:17:09,440 --> 23:17:13,760
tripping like it is tripping right now
27126
23:17:12,232 --> 23:17:15,760
and the bug is right here i don't know
27127
23:17:17,360 --> 23:17:20,160
i don't know if you can notice that but
27128
23:17:20,160 --> 23:17:25,760
the update function however we are not
27129
23:17:23,360 --> 23:17:28,000
actually telling and this is also by the
27130
23:17:25,759 --> 23:17:30,639
way this is inside node services dart
27131
23:17:28,000 --> 23:17:32,160
inside the update node function
27132
23:17:30,639 --> 23:17:34,479
in here you can see we're issuing a
27133
23:17:32,160 --> 23:17:37,512
query to sqlite and we're saying update
27134
23:17:34,479 --> 23:17:39,679
the nodes table and set the text to this
27135
23:17:37,512 --> 23:17:41,600
text all right and that's exactly what
27136
23:17:39,679 --> 23:17:44,231
sqlite is doing it's going through all
27137
23:17:41,600 --> 23:17:45,760
the rows inside the note table and
27138
23:17:44,232 --> 23:17:46,960
updating their text column with the
27139
23:17:46,960 --> 23:17:51,600
so what we missed in there is a where
27140
23:17:49,039 --> 23:17:52,871
argument so we're not telling sqlite
27141
23:17:52,872 --> 23:17:57,680
which row to update so it's updating all
27142
23:17:57,679 --> 23:18:02,231
so we need to fix that as a matter of
27143
23:18:00,000 --> 23:18:03,831
urgency so let's go in here and say we
27144
23:18:03,831 --> 23:18:07,119
let's see this is our update
27145
23:18:07,512 --> 23:18:12,232
and right after the creation of this
27146
23:18:12,320 --> 23:18:17,440
dictionary we're going to say a were
27147
23:18:15,191 --> 23:18:19,279
and we're going to say the id field of
27148
23:18:17,440 --> 23:18:21,279
that column that we want to update or
27149
23:18:19,279 --> 23:18:22,551
sorry the id field of the row or note
27150
23:18:21,279 --> 23:18:26,160
that we want to update is going to be
27151
23:18:22,551 --> 23:18:29,360
equal to something and where args
27152
23:18:26,160 --> 23:18:31,440
are going to be equal to our nodes id
27153
23:18:29,360 --> 23:18:33,759
so i need you to also write this code
27154
23:18:31,440 --> 23:18:35,680
the way i've written it here so now if
27155
23:18:33,759 --> 23:18:37,919
you say my note number one and i go in
27156
23:18:35,679 --> 23:18:39,759
here and i say minor number two then
27157
23:18:37,919 --> 23:18:41,360
it's going to do the right thing so if
27158
23:18:39,759 --> 23:18:42,959
you do a hot restart then you can see
27159
23:18:41,360 --> 23:18:45,039
that the notes are actually populated
27160
23:18:45,039 --> 23:18:48,479
i'm not going to do a hot restart just
27161
23:18:46,399 --> 23:18:50,479
because i know scr cpy may crash again
27162
23:18:48,479 --> 23:18:51,599
and i have to restart the whole process
27163
23:18:51,600 --> 23:18:53,600
i don't want to waste your time with
27164
23:18:53,600 --> 23:18:59,512
and that's why i'm not gonna do a hot
27165
23:18:55,360 --> 23:19:02,080
restart but this should work okay
27166
23:19:03,919 --> 23:19:09,039
now back to what we were working on um
27167
23:19:06,960 --> 23:19:10,872
or back to what the main goal of this
27168
23:19:10,872 --> 23:19:15,279
let's have a look at how we can fix the
27169
23:19:12,800 --> 23:19:17,600
problem with our user server with our
27170
23:19:17,600 --> 23:19:22,400
not being able to return relevant nodes
27171
23:19:20,000 --> 23:19:24,232
except it's returning all the nodes so i
27172
23:19:22,399 --> 23:19:26,079
believe it's inside node service right
27173
23:19:24,232 --> 23:19:28,800
here oh we were there already sorry
27174
23:19:26,080 --> 23:19:30,800
about that so we have our node service
27175
23:19:32,800 --> 23:19:39,120
here notes this is happening inside uh
27176
23:19:36,639 --> 23:19:40,800
cache all cache notes which is you can
27177
23:19:39,119 --> 23:19:42,639
see it's reading all the notes from the
27178
23:19:40,800 --> 23:19:44,551
database using get all notes putting it
27179
23:19:42,639 --> 23:19:46,960
inside putting it sorry you couldn't see
27180
23:19:44,551 --> 23:19:48,720
that cache notes is reading all the
27181
23:19:46,960 --> 23:19:51,512
notes and then putting them inside the
27182
23:19:48,720 --> 23:19:55,119
local local variable and also populating
27183
23:19:51,512 --> 23:19:57,279
the stream controller with that okay
27184
23:19:55,119 --> 23:20:00,399
but what we need to do is need is that
27185
23:19:57,279 --> 23:20:03,512
we need to make sure that the current
27186
23:20:00,399 --> 23:20:05,119
user is saved somewhere inside this note
27187
23:20:03,512 --> 23:20:07,119
service so that note service knows that
27188
23:20:05,119 --> 23:20:10,399
okay here's the current user whenever i
27189
23:20:07,119 --> 23:20:12,319
return all my notes to the call site
27190
23:20:10,399 --> 23:20:13,360
using this all nodes functionality in
27191
23:20:13,360 --> 23:20:19,191
i need to actually filter out the notes
27192
23:20:16,639 --> 23:20:21,360
inside that list to make sure only
27193
23:20:19,191 --> 23:20:24,319
relevant notes that were created by that
27194
23:20:21,360 --> 23:20:27,279
current user are returned from this
27195
23:20:28,960 --> 23:20:33,760
what we need then is to kind of keep
27196
23:20:31,119 --> 23:20:35,512
hold of some sort of a current user in
27197
23:20:35,512 --> 23:20:40,872
in our service inside this uh node
27198
23:20:38,551 --> 23:20:42,551
service so let's go ahead and do that
27199
23:20:42,551 --> 23:20:48,231
our um database user in here
27200
23:20:46,160 --> 23:20:49,512
and we say this is optional and it's
27201
23:20:49,512 --> 23:20:54,960
however we always want to make sure that
27202
23:20:52,000 --> 23:20:55,831
that user is set before you actually
27203
23:20:55,831 --> 23:21:00,000
a list of notes okay so this is the
27204
23:20:58,080 --> 23:21:01,600
expectation of this note server so the
27205
23:21:00,000 --> 23:21:03,831
note server says that if you want to be
27206
23:21:03,831 --> 23:21:07,599
the way you're doing it as clean as
27207
23:21:05,512 --> 23:21:10,551
you're doing it you also make sure that
27208
23:21:07,600 --> 23:21:13,512
you've set this current user okay
27209
23:21:10,551 --> 23:21:15,279
so if that if that expectation is not
27210
23:21:13,512 --> 23:21:17,119
met we're going to throw an exception
27211
23:21:15,279 --> 23:21:19,759
and we're going to call that exception
27212
23:21:17,119 --> 23:21:21,679
user should be set before reading all
27213
23:21:19,759 --> 23:21:24,479
nodes as the caption indicates we're
27214
23:21:21,679 --> 23:21:27,119
going to go to our crowd exceptions
27215
23:21:24,479 --> 23:21:29,119
which we have from before so let's find
27216
23:21:27,119 --> 23:21:31,279
that crowd exceptions in the given
27217
23:21:29,119 --> 23:21:32,720
folder is sorry yes in the given path
27218
23:21:31,279 --> 23:21:34,551
that i've mentioned in the bottom of the
27219
23:21:32,720 --> 23:21:35,831
screen lib services cross crowd
27220
23:21:35,831 --> 23:21:39,191
and we're going to define a new
27221
23:21:37,279 --> 23:21:41,512
exception called user should be set
27222
23:21:42,551 --> 23:21:46,959
all right so please go ahead and define
27223
23:21:45,119 --> 23:21:48,799
that as one of the exceptions in your
27224
23:21:46,960 --> 23:21:50,800
application as well under crowd
27225
23:21:53,679 --> 23:21:58,079
what we need now is a way for us to be
27226
23:21:58,080 --> 23:22:01,600
all the given nodes based on the current
27227
23:22:03,119 --> 23:22:08,000
let's have a look at our all nodes at
27228
23:22:08,000 --> 23:22:13,512
what we need is to ensure that this all
27229
23:22:13,512 --> 23:22:19,440
uh the given nodes inside this stream
27230
23:22:19,440 --> 23:22:22,479
using some sort of filter functionality
27231
23:22:22,479 --> 23:22:27,191
what we have you can see a stream here
27232
23:22:31,191 --> 23:22:35,360
what it does is that as you can see it
27233
23:22:35,360 --> 23:22:41,680
to grab the current content of that
27234
23:22:38,960 --> 23:22:44,080
stream and then you can pass a test on
27235
23:22:41,679 --> 23:22:46,719
that so you can say if this object is
27236
23:22:44,080 --> 23:22:48,160
equal to this then do that and return
27237
23:22:46,720 --> 23:22:49,759
this value otherwise return something
27238
23:22:48,160 --> 23:22:51,832
else so it's kind of like a filtering
27239
23:22:49,759 --> 23:22:55,279
mechanism on a string on a stream's
27240
23:22:51,831 --> 23:22:58,639
value however our stream includes a list
27241
23:22:59,831 --> 23:23:06,399
excuse me in here you can see
27242
23:23:02,800 --> 23:23:07,440
we return a stream of a list of database
27243
23:23:07,440 --> 23:23:11,279
so what we want is a where clause that's
27244
23:23:13,440 --> 23:23:19,119
filter out and change the contents of
27245
23:23:16,399 --> 23:23:21,360
this stream based on the current user
27246
23:23:19,119 --> 23:23:23,679
and we need to then filter the list
27247
23:23:21,360 --> 23:23:25,360
based on the current user's id and only
27248
23:23:23,679 --> 23:23:27,359
return the database notes that are
27249
23:23:27,360 --> 23:23:31,440
this is a bit of a special case
27250
23:23:29,512 --> 23:23:32,960
so for that we need to create our own
27251
23:23:34,320 --> 23:23:39,440
manual like filter function on our
27252
23:23:39,919 --> 23:23:46,000
on our stream okay so let's go ahead and
27253
23:23:42,720 --> 23:23:47,919
do that so what we need to do in here
27254
23:23:46,000 --> 23:23:50,639
and is to create a new file as you can
27255
23:23:47,919 --> 23:23:52,720
see under lib extensions list filter so
27256
23:23:50,639 --> 23:23:56,232
i'm going to go ahead and do that let's
27257
23:23:52,720 --> 23:23:58,639
see if we already have some extensions
27258
23:23:56,232 --> 23:24:00,960
so i can see under lib right now we have
27259
23:23:58,639 --> 23:24:04,080
constants enum services utilities views
27260
23:24:00,960 --> 23:24:06,400
but we don't have any extensions so the
27261
23:24:04,080 --> 23:24:08,320
best way then to do that to create that
27262
23:24:06,399 --> 23:24:10,639
filter the dart file is just right click
27263
23:24:10,639 --> 23:24:15,080
and then i'm going to say extensions
27264
23:24:18,000 --> 23:24:23,039
so then what we're going to do in here
27265
23:24:19,679 --> 23:24:25,599
is to create an extension on our
27266
23:24:25,600 --> 23:24:31,440
so let's go ahead and just say extension
27267
23:24:35,360 --> 23:24:41,279
the reason i'm doing it like this is
27268
23:24:37,679 --> 23:24:43,831
that so we can grab hold of the contents
27269
23:24:41,279 --> 23:24:45,279
of that stream inside our extension okay
27270
23:24:45,279 --> 23:24:51,191
like if you did something like this
27271
23:24:48,399 --> 23:24:53,919
that would still work but in here what
27272
23:24:51,191 --> 23:24:56,720
we're saying is that we're extending any
27273
23:24:56,720 --> 23:25:02,399
and in our filter function then we can
27274
23:24:59,440 --> 23:25:03,760
access that t as you'll soon see okay so
27275
23:25:08,872 --> 23:25:11,680
and we're going to call our function
27276
23:25:11,679 --> 23:25:16,319
and in our filter function we want to
27277
23:25:14,399 --> 23:25:19,039
grab another function that does a
27278
23:25:16,320 --> 23:25:20,872
testing of the items so let's then say
27279
23:25:22,831 --> 23:25:29,679
function that grabs an item of that type
27280
23:25:27,191 --> 23:25:32,399
so you can see now we're basically
27281
23:25:29,679 --> 23:25:33,511
broken down the requirements of our
27282
23:25:33,512 --> 23:25:37,760
that is what's supposed to be two levels
27283
23:25:35,279 --> 23:25:40,800
deep is now one level leap because our
27284
23:25:40,800 --> 23:25:45,512
which is our database node to this where
27285
23:25:45,512 --> 23:25:48,720
so this doesn't exist at the moment but
27286
23:25:48,720 --> 23:25:51,440
so in here what we're going to say then
27287
23:25:51,440 --> 23:25:56,080
what we are going to do is we need to
27288
23:25:57,600 --> 23:26:02,960
and that will you can see it gives us
27289
23:25:59,440 --> 23:26:06,720
the values so in here we get the items
27290
23:26:02,960 --> 23:26:09,192
and in here then we say items where
27291
23:26:06,720 --> 23:26:13,191
we pass that word clause in here
27292
23:26:15,600 --> 23:26:19,832
and i can see in here actually we have a
27293
23:26:17,600 --> 23:26:22,320
filter of t but our stream needs to have
27294
23:26:19,831 --> 23:26:23,759
a list of t so then that's gonna fix the
27295
23:26:22,320 --> 23:26:25,440
problem for us so in this case we're
27296
23:26:23,759 --> 23:26:27,119
actually drilling down two levels deep
27297
23:26:27,119 --> 23:26:31,279
so this is the function that we just
27298
23:26:29,039 --> 23:26:34,000
created so it allows us to filter a
27299
23:26:31,279 --> 23:26:35,919
stream of lists of something and then
27300
23:26:34,000 --> 23:26:38,232
our where clause is going to get that
27301
23:26:35,919 --> 23:26:40,959
something and should that something pass
27302
23:26:38,232 --> 23:26:42,800
the test then it will be included in the
27303
23:26:42,800 --> 23:26:46,400
look i know this is complicated stuff
27304
23:26:44,872 --> 23:26:48,960
but please pause the video think a
27305
23:26:46,399 --> 23:26:51,119
little bit about it we have a stream
27306
23:26:51,119 --> 23:26:57,679
now we want to stream of the list of the
27307
23:26:54,000 --> 23:27:00,160
same thing as long as those things
27308
23:26:57,679 --> 23:27:01,039
any individual thing passes a specific
27309
23:27:01,039 --> 23:27:04,551
which is specified using this work loss
27310
23:27:04,551 --> 23:27:09,191
this is difficult i know it may be some
27311
23:27:07,191 --> 23:27:10,551
it may be like so difficult for some
27312
23:27:09,191 --> 23:27:12,639
users that you'll be like i don't get
27313
23:27:10,551 --> 23:27:14,720
any of this i don't understand but
27314
23:27:12,639 --> 23:27:17,512
you will just need to practice you need
27315
23:27:14,720 --> 23:27:20,000
to just grab a hold of this code go go
27316
23:27:17,512 --> 23:27:22,000
ahead and implement this on some other
27317
23:27:20,000 --> 23:27:24,399
functionalities like a list of list of
27318
23:27:22,000 --> 23:27:26,399
things and see okay if i have a list of
27319
23:27:24,399 --> 23:27:29,439
lists of things how do i filter out that
27320
23:27:26,399 --> 23:27:30,799
thing inside and it will finally click
27321
23:27:30,800 --> 23:27:36,160
i know it's it's a bit complicated so
27322
23:27:38,160 --> 23:27:41,832
is to set the current user in the node
27323
23:27:41,831 --> 23:27:46,871
as you can see right now we have get or
27324
23:27:44,551 --> 23:27:47,831
create user functionality in our node
27325
23:27:47,831 --> 23:27:53,360
so let's go back to our node service and
27326
23:27:50,479 --> 23:27:55,679
find that function get or create user
27327
23:27:53,360 --> 23:27:57,919
and at the moment it just takes an email
27328
23:27:55,679 --> 23:28:00,551
as the caption indicates we need a
27329
23:27:57,919 --> 23:28:03,360
parameter inside this function that also
27330
23:28:00,551 --> 23:28:05,279
says set as current user so when you get
27331
23:28:05,279 --> 23:28:09,440
which we're at the moment doing i
27332
23:28:06,800 --> 23:28:11,512
believe in our notes view so let's go in
27333
23:28:14,479 --> 23:28:20,399
uh you see get or create a user so this
27334
23:28:17,831 --> 23:28:22,639
is like the bare bone this is the actual
27335
23:28:20,399 --> 23:28:24,551
very important part of our application
27336
23:28:22,639 --> 23:28:26,319
where a user either is retrieved from
27337
23:28:24,551 --> 23:28:28,872
the database the way he or she was or
27338
23:28:26,320 --> 23:28:31,040
it's created and it just makes sense to
27339
23:28:28,872 --> 23:28:33,919
make that user the current user at this
27340
23:28:31,039 --> 23:28:35,919
point okay so let's go in our node
27341
23:28:35,919 --> 23:28:42,872
and let's change that functionality so
27342
23:28:39,360 --> 23:28:42,872
i'm going to bring up my notes as well
27343
23:28:43,039 --> 23:28:48,231
and let's add a parameter called set as
27344
23:28:45,831 --> 23:28:49,679
current user right here going to put a
27345
23:28:49,679 --> 23:28:54,551
and let's just say um that this
27346
23:28:52,000 --> 23:28:57,191
parameter is a boolean set as current
27347
23:28:54,551 --> 23:29:00,000
user and we're going to set it to true
27348
23:28:57,191 --> 23:29:02,720
by default all right so i need to do the
27349
23:29:02,960 --> 23:29:06,400
so after doing that when we retrieve the
27350
23:29:05,119 --> 23:29:08,551
user we're going to look at this
27351
23:29:06,399 --> 23:29:10,639
parameter we're going to say if set as
27352
23:29:10,639 --> 23:29:15,360
as current user then we're going to set
27353
23:29:12,639 --> 23:29:17,831
our own user to this user that we just
27354
23:29:17,831 --> 23:29:21,191
and also don't forget when you create
27355
23:29:21,191 --> 23:29:26,231
and you also have to set the current
27356
23:29:23,919 --> 23:29:27,512
user if that boolean flag is true so
27357
23:29:27,512 --> 23:29:33,760
set as current user here as well then
27358
23:29:29,512 --> 23:29:36,800
we're going to say user is created user
27359
23:29:33,759 --> 23:29:39,279
so what we did here is we just said
27360
23:29:36,800 --> 23:29:41,512
if we could retrieve that user from the
27361
23:29:39,279 --> 23:29:44,000
database we and this boolean parameter
27362
23:29:41,512 --> 23:29:45,279
is true then we set our own user to this
27363
23:29:45,279 --> 23:29:49,679
otherwise if we had to create that user
27364
23:29:47,919 --> 23:29:52,000
and this parameter is true then we do
27365
23:29:49,679 --> 23:29:53,599
the same thing we set this current user
27366
23:29:52,000 --> 23:29:55,039
to the created user and if you're
27367
23:29:53,600 --> 23:29:56,800
getting some errors in here saying that
27368
23:29:55,039 --> 23:29:58,231
this underscore user cannot be found
27369
23:29:56,800 --> 23:29:59,040
it's probably because you missed adding
27370
23:29:59,039 --> 23:30:02,231
a database user to your node service
27371
23:30:01,039 --> 23:30:03,919
which is something i mentioned just
27372
23:30:02,232 --> 23:30:06,000
before we moved on to creating that
27373
23:30:03,919 --> 23:30:08,959
filter function okay or sorry before we
27374
23:30:09,360 --> 23:30:13,360
all right that part is now done as well
27375
23:30:13,360 --> 23:30:16,960
now what we need to do is to do the
27376
23:30:16,960 --> 23:30:22,080
filtering and and that is something that
27377
23:30:19,679 --> 23:30:24,479
we need to do is uh you can see as a
27378
23:30:22,080 --> 23:30:27,119
cache index change all nodes stream to
27379
23:30:27,119 --> 23:30:30,959
and that's something we need to do in
27380
23:30:35,039 --> 23:30:41,599
what we're going to say is i'm actually
27381
23:30:37,440 --> 23:30:43,512
i think i'm going to change them
27382
23:30:41,600 --> 23:30:44,720
yeah just let's leave it like this so
27383
23:30:43,512 --> 23:30:46,320
i'm just going to say no stream
27384
23:30:47,759 --> 23:30:51,599
stream and right here we can use our
27385
23:30:50,080 --> 23:30:53,119
filter function you see now visual
27386
23:30:51,600 --> 23:30:55,040
studio code is like confused like oh
27387
23:30:53,119 --> 23:30:56,799
there is no filter function on a stream
27388
23:30:55,039 --> 23:30:58,159
but remember we actually added that
27389
23:30:56,800 --> 23:31:00,160
ourselves so i'm going to get help from
27390
23:30:58,160 --> 23:31:01,832
visual studio code and say command dot
27391
23:31:00,160 --> 23:31:03,832
on mac or control dot on linux and
27392
23:31:01,831 --> 23:31:05,831
windows and visual studio code and then
27393
23:31:03,831 --> 23:31:08,159
it's gonna understand oh there is a
27394
23:31:05,831 --> 23:31:09,759
filter function that you've defined on
27395
23:31:08,160 --> 23:31:11,279
stream do you want me to import that and
27396
23:31:12,831 --> 23:31:18,871
filter remember filter then gets a note
27397
23:31:16,479 --> 23:31:20,551
right and if i move my mouse over it now
27398
23:31:18,872 --> 23:31:23,279
you can see that says oh you have a
27399
23:31:20,551 --> 23:31:25,191
database note however our stream
27400
23:31:23,279 --> 23:31:27,360
actually contains a list of database
27401
23:31:25,191 --> 23:31:29,919
nodes and all of a sudden our filter
27402
23:31:27,360 --> 23:31:31,512
gets one note at a time so this is the
27403
23:31:29,919 --> 23:31:34,000
beauty of creating your own extensions
27404
23:31:31,512 --> 23:31:37,440
so that you can drill down inside
27405
23:31:34,000 --> 23:31:40,320
existing objects and grab what you need
27406
23:31:37,440 --> 23:31:42,872
inside your application all right
27407
23:31:40,320 --> 23:31:44,400
so in here what we need is to create a
27408
23:31:42,872 --> 23:31:46,400
function then you remember this function
27409
23:31:44,399 --> 23:31:47,759
has to return a boolean we haven't
27410
23:31:46,399 --> 23:31:49,360
returned anything from here yet that's
27411
23:31:49,360 --> 23:31:53,360
so at the end of this function we need
27412
23:31:51,512 --> 23:31:57,512
to return a volume so let's just say
27413
23:31:53,360 --> 23:31:59,512
final current user is this user
27414
23:31:59,512 --> 23:32:04,000
is not null which is like the condition
27415
23:32:01,759 --> 23:32:05,511
that we actually expect then we're going
27416
23:32:05,512 --> 23:32:09,040
otherwise we need to throw our exception
27417
23:32:09,039 --> 23:32:14,159
should be said before okay so this is
27418
23:32:12,080 --> 23:32:16,551
our expectation from the caller if
27419
23:32:14,160 --> 23:32:19,192
you're reading all notes from this
27420
23:32:16,551 --> 23:32:21,440
interface you need to make sure that the
27421
23:32:19,191 --> 23:32:25,039
current user was set when you call this
27422
23:32:21,440 --> 23:32:27,119
function so this needs to be true okay
27423
23:32:25,039 --> 23:32:28,551
sorry this yeah you may not have seen
27424
23:32:28,551 --> 23:32:32,720
you could also argue that oh wait a
27425
23:32:30,551 --> 23:32:34,872
minute if this is like the expectation
27426
23:32:32,720 --> 23:32:36,720
of this interface that the current user
27427
23:32:34,872 --> 23:32:37,832
should always be said before you read
27428
23:32:39,831 --> 23:32:44,000
why don't you make that the default why
27429
23:32:41,600 --> 23:32:45,920
don't you just do that and remove this
27430
23:32:44,000 --> 23:32:46,960
function and always set the user as a
27431
23:32:49,119 --> 23:32:53,919
the current user has to be sent only
27432
23:32:51,512 --> 23:32:56,479
when you're working with all nodes now
27433
23:32:53,919 --> 23:32:58,872
this node service should be able to work
27434
23:32:56,479 --> 23:33:00,639
like to update existing nodes or remove
27435
23:33:00,639 --> 23:33:05,440
it in those functionalities should still
27436
23:33:03,039 --> 23:33:07,831
work if the current user is not set
27437
23:33:05,440 --> 23:33:10,400
right because those functionalities are
27438
23:33:07,831 --> 23:33:12,551
pure cross functions that say update a
27439
23:33:10,399 --> 23:33:16,000
node with this id get a user with this
27440
23:33:12,551 --> 23:33:18,959
id delete a node with this id etc etc
27441
23:33:16,000 --> 23:33:21,919
they are not dependent on a current user
27442
23:33:18,960 --> 23:33:24,160
however all nodes is dependent on the
27443
23:33:21,919 --> 23:33:25,599
current user and it just makes sense to
27444
23:33:24,160 --> 23:33:27,192
have this functionality in here that
27445
23:33:25,600 --> 23:33:30,080
says set as current user that is
27446
23:33:27,191 --> 23:33:32,551
defaulted to true so if you're using all
27447
23:33:30,080 --> 23:33:34,551
nodes then it throws an exception if the
27448
23:33:32,551 --> 23:33:36,319
current user is not set okay so that's
27449
23:33:34,551 --> 23:33:38,872
my reasoning for having this as a
27450
23:33:36,320 --> 23:33:39,832
parameter and not making it the default
27451
23:33:42,080 --> 23:33:47,831
all right so if current user was not
27452
23:33:44,960 --> 23:33:50,720
null that's like the happy path so then
27453
23:33:50,720 --> 23:33:57,440
it's not as long as its um user id
27454
23:33:58,872 --> 23:34:04,080
current user id so we say note
27455
23:34:01,679 --> 23:34:05,279
a user id should be equal to current
27456
23:34:05,279 --> 23:34:09,759
dot id okay and remember we're not
27457
23:34:07,919 --> 23:34:12,319
returning a note we're returning a
27458
23:34:09,759 --> 23:34:14,080
boolean remember our filter function it
27459
23:34:12,320 --> 23:34:16,080
has a where statement that has to return
27460
23:34:14,080 --> 23:34:17,680
a boolean so we're not returning any
27461
23:34:16,080 --> 23:34:20,160
nodes in here we're just checking is
27462
23:34:17,679 --> 23:34:22,639
this node's use ready the same as that
27463
23:34:23,512 --> 23:34:29,360
that should now be good to go so what we
27464
23:34:25,831 --> 23:34:31,831
could do i know this may actually
27465
23:34:29,360 --> 23:34:34,160
and break things now because i have some
27466
23:34:31,831 --> 23:34:35,831
problems with scr cpy but you have to
27467
23:34:34,160 --> 23:34:37,919
excuse me for that it's it's nothing
27468
23:34:35,831 --> 23:34:40,639
that i have control over but since we've
27469
23:34:37,919 --> 23:34:43,039
changed quite a lot of code uh i'm gonna
27470
23:34:40,639 --> 23:34:45,279
now close all these screens at these
27471
23:34:43,039 --> 23:34:47,119
tabs and i'm going to do a hot reload
27472
23:34:45,279 --> 23:34:49,191
but this most probably is going to crash
27473
23:34:49,191 --> 23:34:54,000
oh it didn't great thank god for that
27474
23:34:51,759 --> 23:34:56,000
so we have our notes now how do we put
27475
23:34:56,000 --> 23:34:59,919
what we need to do is to log out and log
27476
23:34:58,000 --> 23:35:01,440
in so i'm going to go to console
27477
23:35:01,440 --> 23:35:06,000
and let's go to our application which is
27478
23:35:06,000 --> 23:35:11,831
we have two authenticated users
27479
23:35:09,191 --> 23:35:13,512
these two emails at the moment so right
27480
23:35:11,831 --> 23:35:15,119
now i'm logged in with one of them i
27481
23:35:13,512 --> 23:35:17,440
don't really know which one so i'm going
27482
23:35:17,440 --> 23:35:23,119
so i'm then going to log in with
27483
23:35:19,119 --> 23:35:24,551
pixeltab gmail.com foobarbas
27484
23:35:24,551 --> 23:35:29,919
and i can see those email those um
27485
23:35:27,831 --> 23:35:31,759
notes were under pixel tab so then i'm
27486
23:35:29,919 --> 23:35:34,639
going to log out again and i'm going to
27487
23:35:35,679 --> 23:35:39,919
toolbarbad and i'm going to then press
27488
23:35:37,679 --> 23:35:42,551
the login button and i haven't yet
27489
23:35:39,919 --> 23:35:44,639
verified my email so i will have to do
27490
23:35:42,551 --> 23:35:47,599
that so let me just see if i can take
27491
23:35:47,600 --> 23:35:53,440
i'm going to then bring my email
27492
23:35:53,440 --> 23:35:58,872
and see if i can find this um
27493
23:35:56,960 --> 23:36:01,120
verification email and i can't so i'm
27494
23:35:58,872 --> 23:36:02,400
just gonna send send email verification
27495
23:36:01,119 --> 23:36:04,799
and it's gonna send a new email
27496
23:36:04,800 --> 23:36:10,320
all right i got the email verification
27497
23:36:10,320 --> 23:36:14,232
so i'm just gonna click on that and i
27498
23:36:12,160 --> 23:36:16,080
can see now it says your email has been
27499
23:36:17,119 --> 23:36:22,319
let me go to restart then and now that
27500
23:36:20,000 --> 23:36:25,512
i've verified my email i'm going to try
27501
23:36:28,232 --> 23:36:32,552
oops this is register i want to go to
27502
23:36:36,639 --> 23:36:41,512
and now i can see for my user i'm not
27503
23:36:39,279 --> 23:36:42,959
seeing any notes but just to make sure
27504
23:36:41,512 --> 23:36:45,119
i'm just going to create a new user and
27505
23:36:42,960 --> 23:36:47,192
say this no sorry create a new node i'm
27506
23:36:45,119 --> 23:36:49,360
going to say this node was created
27507
23:36:49,360 --> 23:36:53,039
or just put my email in here like this
27508
23:36:53,039 --> 23:36:57,191
i'm going to go back and i can see that
27509
23:36:57,191 --> 23:37:02,959
then what i'm going to do is just to
27510
23:37:02,960 --> 23:37:08,000
and log in with the other user
27511
23:37:05,512 --> 23:37:09,680
just to make sure that that
27512
23:37:08,000 --> 23:37:13,191
oh that was created by the other user is
27513
23:37:09,679 --> 23:37:13,191
not displayed to this user okay
27514
23:37:13,512 --> 23:37:19,919
and now we can log in and i can only see
27515
23:37:16,639 --> 23:37:21,919
notes that were for this user so
27516
23:37:19,919 --> 23:37:24,479
congratulations that was a lot of work
27517
23:37:21,919 --> 23:37:26,399
that we did and that we did and uh the
27518
23:37:24,479 --> 23:37:28,319
application seems to be working the way
27519
23:37:30,720 --> 23:37:35,040
what we need to do now is just ensure
27520
23:37:32,320 --> 23:37:38,232
that we we won't lose our code as is a
27521
23:37:35,039 --> 23:37:40,959
tradition and so we need to commit our
27522
23:37:38,232 --> 23:37:42,872
code and also tag our code okay
27523
23:37:42,872 --> 23:37:46,551
shuffling around here on the screens and
27524
23:37:44,720 --> 23:37:48,800
i'm gonna increase the size of visual
27525
23:37:46,551 --> 23:37:51,440
studio code so you see it better
27526
23:37:48,800 --> 23:37:53,760
let's do git status and see what the
27527
23:37:51,440 --> 23:37:55,832
status is we've modified two files and
27528
23:37:53,759 --> 23:37:58,000
we've also added a whole new folder so
27529
23:37:55,831 --> 23:38:00,000
i'm just gonna say git add all
27530
23:37:58,000 --> 23:38:02,232
and if you look at our logs the previous
27531
23:38:02,232 --> 23:38:06,480
now we have to commit our work and tag
27532
23:38:04,232 --> 23:38:08,232
it as step 18 and if you look at our are
27533
23:38:06,479 --> 23:38:09,919
your tags as well you should have step
27534
23:38:09,919 --> 23:38:14,720
let's say git commit and i'm going to
27535
23:38:14,720 --> 23:38:18,960
here i'm gonna push these changes to
27536
23:38:16,551 --> 23:38:20,639
remotes which in my case is github you
27537
23:38:18,960 --> 23:38:22,160
may be using bitbucket or some other
27538
23:38:22,160 --> 23:38:29,400
and less than tag as step 18 as well
27539
23:38:29,600 --> 23:38:34,160
alright so that part is done now we have
27540
23:38:32,232 --> 23:38:36,320
tagged and committed or code so if you
27541
23:38:34,160 --> 23:38:40,232
say git status you should have nothing
27542
23:38:36,320 --> 23:38:40,232
handling here to be committed all right
27543
23:38:42,399 --> 23:38:46,231
again as tradition is we always talk
27544
23:38:44,551 --> 23:38:47,512
about what we need to mention in the
27545
23:38:46,232 --> 23:38:48,720
next chapter what we're going to go
27546
23:38:47,512 --> 23:38:50,400
through in the next chapter at the end
27547
23:38:50,399 --> 23:38:54,000
up until this point we've been using our
27548
23:38:54,000 --> 23:38:57,119
that's been working really good
27549
23:38:55,360 --> 23:38:58,399
everything's been saved on the on the
27550
23:38:58,399 --> 23:39:02,639
however if you really think about it
27551
23:39:01,039 --> 23:39:04,479
you've now learned how to work with
27552
23:39:02,639 --> 23:39:05,831
crowd and that was my that was like one
27553
23:39:04,479 --> 23:39:07,679
of my intentions at the beginning of
27554
23:39:05,831 --> 23:39:10,000
this course i wanted to teach you about
27555
23:39:07,679 --> 23:39:12,399
crud because it's one of the absolute
27556
23:39:10,000 --> 23:39:13,600
most important things that any back-end
27557
23:39:13,600 --> 23:39:17,192
front-end developer such as flutter
27558
23:39:17,191 --> 23:39:21,440
so i hope that you've learned that now
27559
23:39:19,279 --> 23:39:23,919
however we have a big problem here and
27560
23:39:21,440 --> 23:39:26,080
that is all our notes are saved locally
27561
23:39:26,080 --> 23:39:31,040
should anything go wrong for instance if
27562
23:39:28,800 --> 23:39:33,120
if the users something happens to the
27563
23:39:31,039 --> 23:39:34,319
user's telephone all that data is going
27564
23:39:34,320 --> 23:39:38,400
so the user's notes may disappear and
27565
23:39:38,399 --> 23:39:42,000
what's so wrong about that well if
27566
23:39:42,000 --> 23:39:46,720
i use my notes like my the default notes
27567
23:39:44,960 --> 23:39:50,000
application in macintosh and also on
27568
23:39:46,720 --> 23:39:52,399
linux quite a lot so i store very very
27569
23:39:50,000 --> 23:39:54,872
important information sometimes in my
27570
23:39:52,399 --> 23:39:56,720
notes and you'd be surprised that the
27571
23:39:54,872 --> 23:39:59,120
outline for this course i actually
27572
23:39:56,720 --> 23:40:00,639
managed it all i managed all of that
27573
23:39:59,119 --> 23:40:02,871
inside the notes application on my
27574
23:40:00,639 --> 23:40:05,119
macintosh so i wrote the entire outline
27575
23:40:02,872 --> 23:40:06,400
took many many hours and i would have
27576
23:40:06,399 --> 23:40:10,871
if those notes disappeared for some
27577
23:40:08,399 --> 23:40:12,551
reason or if my kids got a hold of my
27578
23:40:10,872 --> 23:40:13,832
telephone and just removed the notes and
27579
23:40:12,551 --> 23:40:15,679
there was no reason and then there was
27580
23:40:13,831 --> 23:40:17,279
no way for me to grab those notes back
27581
23:40:17,279 --> 23:40:21,831
what we need to do now is just ensure
27582
23:40:19,360 --> 23:40:23,039
that we can store these nodes in some
27583
23:40:23,039 --> 23:40:26,399
back end so that it's sitting in the
27584
23:40:24,872 --> 23:40:28,800
cloud so we don't have to manage them
27585
23:40:26,399 --> 23:40:30,799
locally and that's what we're going to
27586
23:40:28,800 --> 23:40:32,320
use firebase for and we're going to
27587
23:40:30,800 --> 23:40:34,551
start talking more and more about
27588
23:40:34,551 --> 23:40:38,959
the beginning of next chapter so i hope
27589
23:40:36,720 --> 23:40:40,872
you enjoyed this chapter and grab your
27590
23:40:38,960 --> 23:40:42,872
refreshments coffee or tea or whatever
27591
23:40:40,872 --> 23:40:44,720
you want some chocolates and i'll see
27592
23:40:44,720 --> 23:40:49,040
hello and welcome to chapter 36 of this
27593
23:40:46,960 --> 23:40:50,872
flutter course in previous chapters
27594
23:40:49,039 --> 23:40:52,399
we've been working with our quad service
27595
23:40:50,872 --> 23:40:54,800
quite a lot and also we've been working
27596
23:40:54,800 --> 23:41:00,320
so far we've stored the user generated
27597
23:40:57,191 --> 23:41:03,039
notes inside the crotch store which
27598
23:41:00,320 --> 23:41:03,920
we're backing with a sqlite database and
27599
23:41:03,919 --> 23:41:09,119
also made that cloud service kind of um
27600
23:41:06,872 --> 23:41:10,160
aware of the currently logged in user so
27601
23:41:10,160 --> 23:41:14,720
a user logs in he or she can only see
27602
23:41:12,320 --> 23:41:17,512
their own notes and when that user logs
27603
23:41:14,720 --> 23:41:19,040
out and another user logs and then
27604
23:41:17,512 --> 23:41:22,479
the previously created notes in the
27605
23:41:19,039 --> 23:41:25,439
database aren't exposed to the new user
27606
23:41:22,479 --> 23:41:27,512
so we've taken care of all those but we
27607
23:41:25,440 --> 23:41:29,191
still have our notes only stored in a
27608
23:41:29,191 --> 23:41:33,039
and from this chapter on we're going to
27609
23:41:30,960 --> 23:41:35,280
be working with actually moving away
27610
23:41:33,039 --> 23:41:36,399
from storing the user data in a local
27611
23:41:36,399 --> 23:41:41,039
and instead going towards storing that
27612
23:41:42,320 --> 23:41:46,080
when i was designing this course i was
27613
23:41:43,831 --> 23:41:48,000
thinking about how i can introduce more
27614
23:41:46,080 --> 23:41:49,279
and more concepts to to become a better
27615
23:41:48,000 --> 23:41:51,679
software developer and a flutter
27616
23:41:49,279 --> 23:41:54,000
developer and one of those absolutely
27617
23:41:51,679 --> 23:41:57,279
crucial things was crud create read
27618
23:41:54,000 --> 23:42:00,160
update and delete and um though firebase
27619
23:41:57,279 --> 23:42:02,800
is a good way of doing that but firebase
27620
23:42:00,160 --> 23:42:05,192
removes quite a lot of the logic that
27621
23:42:02,800 --> 23:42:07,360
you otherwise need to understand
27622
23:42:05,191 --> 23:42:09,919
to become a better developer so firebase
27623
23:42:07,360 --> 23:42:11,919
has abstracted away the concept of crowd
27624
23:42:09,919 --> 23:42:13,279
quite a lot and that you work with data
27625
23:42:11,919 --> 23:42:14,872
in the cloud and you don't really know
27626
23:42:13,279 --> 23:42:17,039
how that is being populated and where
27627
23:42:17,039 --> 23:42:20,319
when i started designing the course i
27628
23:42:18,399 --> 23:42:22,959
thought maybe okay we could have a look
27629
23:42:20,320 --> 23:42:24,552
at storing data locally first to get a
27630
23:42:24,551 --> 23:42:29,440
and then after that we now we understand
27631
23:42:27,279 --> 23:42:30,800
how crop works and how those operations
27632
23:42:29,440 --> 23:42:32,960
are performed at a low level on a
27633
23:42:30,800 --> 23:42:35,279
database level then we can move away
27634
23:42:32,960 --> 23:42:37,440
from it and go to a more abstract layer
27635
23:42:35,279 --> 23:42:39,831
so this was a choice that i met early on
27636
23:42:37,440 --> 23:42:42,320
when designing this course and it is
27637
23:42:39,831 --> 23:42:44,159
definitely not like wasted time you now
27638
23:42:42,320 --> 23:42:46,400
know how to work with sql light in your
27639
23:42:44,160 --> 23:42:49,040
applications and you will probably be
27640
23:42:46,399 --> 23:42:52,000
using sqlite more and more as you go on
27641
23:42:49,039 --> 23:42:53,679
in your flutter development um
27642
23:42:53,679 --> 23:42:56,871
i am i hope that you understand that we
27643
23:42:56,872 --> 23:43:01,600
we still have good use of uh sqlite and
27644
23:42:59,512 --> 23:43:03,760
we've understood that but now it's time
27645
23:43:01,600 --> 23:43:08,320
that we move away from our local storage
27646
23:43:03,759 --> 23:43:10,080
and move to using um firebase instead
27647
23:43:08,320 --> 23:43:11,600
so i want to bring up the caption for
27648
23:43:10,080 --> 23:43:13,919
the next section of this chapter and
27649
23:43:11,600 --> 23:43:16,639
that's uh that we're going to talk about
27650
23:43:13,919 --> 23:43:19,440
cloud firestore so if i bring up my
27651
23:43:16,639 --> 23:43:21,039
notes and go to that url that i provided
27652
23:43:23,512 --> 23:43:27,760
and you can see here in in here it says
27653
23:43:25,512 --> 23:43:31,040
firestore is a flexible scalable a nosql
27654
23:43:27,759 --> 23:43:32,159
cloud database to store and sync data
27655
23:43:32,160 --> 23:43:35,832
the way the way it works i mean you can
27656
23:43:34,551 --> 23:43:38,231
go actually to this link that i've
27657
23:43:35,831 --> 23:43:39,831
provided for you here and it tells you
27658
23:43:38,232 --> 23:43:41,832
about how you can actually add cloud
27659
23:43:39,831 --> 23:43:43,439
firestore to your application but i
27660
23:43:41,831 --> 23:43:45,039
believe we've already done that so if i
27661
23:43:45,039 --> 23:43:49,360
application also to the screen
27662
23:43:47,440 --> 23:43:51,191
increase the size and we go to our pop
27663
23:43:51,191 --> 23:43:53,759
and we'll look at our dependencies we're
27664
23:43:52,551 --> 23:43:57,279
at the moment using firebase core
27665
23:43:53,759 --> 23:43:59,439
firebase auth and um in here also tells
27666
23:43:57,279 --> 23:44:01,119
you you have to use cloud firestore so
27667
23:43:59,440 --> 23:44:02,960
let's go in here and we can see we've
27668
23:44:01,119 --> 23:44:04,871
already dragged in cloud firestore from
27669
23:44:02,960 --> 23:44:06,480
one of the absolute absolute earliest
27670
23:44:08,399 --> 23:44:12,079
added this dependency to our application
27671
23:44:10,232 --> 23:44:14,639
so you don't have to do this but if you
27672
23:44:12,080 --> 23:44:17,440
don't have cloud firestore added to your
27673
23:44:14,639 --> 23:44:19,360
application you may need to do that now
27674
23:44:17,440 --> 23:44:21,191
by following the instructions in this
27675
23:44:19,360 --> 23:44:22,960
link and if you've if you don't have it
27676
23:44:21,191 --> 23:44:25,679
it's probably because you've missed one
27677
23:44:22,960 --> 23:44:27,192
of the early chapters in this um
27678
23:44:29,831 --> 23:44:34,000
we're going to be using the cloud
27679
23:44:31,119 --> 23:44:35,759
firestore in order to store user
27680
23:44:34,000 --> 23:44:36,800
generated data and in this case our
27681
23:44:37,831 --> 23:44:42,959
you may be familiar with sql and nosql
27682
23:44:44,720 --> 23:44:50,160
i can explain cloud fire stories is that
27683
23:44:50,160 --> 23:44:55,832
two concepts that you need to understand
27684
23:44:52,800 --> 23:44:58,320
um which are called um collections and
27685
23:44:55,831 --> 23:45:01,511
the other ones are documents so
27686
23:44:58,320 --> 23:45:04,960
whereas in traditional sql storage you
27687
23:45:01,512 --> 23:45:06,639
will have hard dependencies and every uh
27688
23:45:04,960 --> 23:45:08,320
table for instance when we design our
27689
23:45:06,639 --> 23:45:10,960
sqlite database we actually have to
27690
23:45:08,320 --> 23:45:13,120
design our tables with specific
27691
23:45:13,119 --> 23:45:16,399
so we have different fields we have
27692
23:45:14,720 --> 23:45:20,000
foreign keys etc so that's like a
27693
23:45:16,399 --> 23:45:21,919
typical sql relation relational database
27694
23:45:20,000 --> 23:45:24,800
but when you go to node sql for instance
27695
23:45:21,919 --> 23:45:26,319
firestore then things are more document
27696
23:45:24,800 --> 23:45:27,600
based so for those of you who are doing
27697
23:45:26,320 --> 23:45:29,600
backend development you already know
27698
23:45:30,720 --> 23:45:35,119
if you're using sequel light then things
27699
23:45:32,479 --> 23:45:36,159
aren't document based as you would think
27700
23:45:36,160 --> 23:45:41,512
but when we go to firestore then you
27701
23:45:38,080 --> 23:45:44,232
will have like a lot more looser data
27702
23:45:41,512 --> 23:45:46,800
definition for your tables and for your
27703
23:45:44,232 --> 23:45:48,800
documents basically so one document
27704
23:45:46,800 --> 23:45:50,479
inside the same collection can contain
27705
23:45:48,800 --> 23:45:52,551
two fields and the next document can
27706
23:45:54,479 --> 23:45:59,759
the way it is created with firestar
27707
23:45:57,191 --> 23:46:00,871
so for the entirety of this course from
27708
23:45:59,759 --> 23:46:03,360
this point on we're going to be
27709
23:46:00,872 --> 23:46:06,080
dependent on firestore in order to use
27710
23:46:03,360 --> 23:46:08,872
it to store user generated content which
27711
23:46:08,872 --> 23:46:14,000
so let's now talk a little bit about
27712
23:46:11,191 --> 23:46:16,871
production versus test mode um firebase
27713
23:46:14,000 --> 23:46:18,960
as use firestore as you'll soon see it
27714
23:46:19,919 --> 23:46:26,160
of allowing you as a developer to
27715
23:46:23,440 --> 23:46:27,919
interact with your database so
27716
23:46:26,160 --> 23:46:30,080
and there is a thing called a test mode
27717
23:46:27,919 --> 23:46:32,551
and another caller production mode and
27718
23:46:30,080 --> 23:46:34,080
in test mode and what it means is that
27719
23:46:32,551 --> 23:46:36,319
as you're developing your application
27720
23:46:34,080 --> 23:46:38,960
which we are for instance at the moment
27721
23:46:36,320 --> 23:46:40,640
then you may need to for instance open
27722
23:46:40,639 --> 23:46:44,872
um so that you can actually interact
27723
23:46:43,039 --> 23:46:46,959
with it with your from your application
27724
23:46:44,872 --> 23:46:48,800
without even authenticating a user for
27725
23:46:46,960 --> 23:46:50,232
instance so even if a user is not
27726
23:46:48,800 --> 23:46:53,192
authenticated you can actually issue
27727
23:46:50,232 --> 23:46:55,279
some commands toward firestore in order
27728
23:46:57,600 --> 23:47:01,040
so that's that's as you're developing
27729
23:46:59,679 --> 23:47:02,719
your application while you're still
27730
23:47:01,039 --> 23:47:04,799
working with your authentication but
27731
23:47:02,720 --> 23:47:06,720
remember we've already nailed down the
27732
23:47:04,800 --> 23:47:08,720
authentication so you cannot actually
27733
23:47:08,720 --> 23:47:12,800
or the notes list view which is embedded
27734
23:47:10,872 --> 23:47:13,680
inside notes view if you forgot about
27735
23:47:13,679 --> 23:47:18,319
you cannot end up in there if you
27736
23:47:15,600 --> 23:47:20,800
haven't authenticated and if you haven't
27737
23:47:18,320 --> 23:47:22,720
verified your email address so we know
27738
23:47:20,800 --> 23:47:25,192
that in our case we don't actually
27739
23:47:22,720 --> 23:47:27,831
really need to use the test mode of our
27740
23:47:25,191 --> 23:47:29,679
database with firestore we're kind of
27741
23:47:27,831 --> 23:47:32,871
gonna immediately switch to production
27742
23:47:29,679 --> 23:47:35,831
mode and what production mode is is for
27743
23:47:32,872 --> 23:47:37,192
instance when you develop your firestore
27744
23:47:35,831 --> 23:47:38,399
database as you'll soon see in this
27745
23:47:39,191 --> 23:47:43,119
you will be able to add some more rules
27746
23:47:44,399 --> 23:47:48,871
unauthenticated access to the database
27747
23:47:46,399 --> 23:47:50,799
is going to be denied and this is the
27748
23:47:48,872 --> 23:47:52,960
kind of like model that we're going to
27749
23:47:50,800 --> 23:47:55,120
be using in the rest of the this course
27750
23:47:52,960 --> 23:47:57,280
and also almost at the end of this
27751
23:47:55,119 --> 23:47:58,639
course we're also going to add some more
27752
23:48:00,479 --> 23:48:05,599
sorry firestore database so that we make
27753
23:48:02,479 --> 23:48:07,512
it even more explicit who has access to
27754
23:48:07,512 --> 23:48:10,872
just know that there is a test mode and
27755
23:48:09,119 --> 23:48:13,039
a production mode test mode is a bit
27756
23:48:13,039 --> 23:48:16,639
in terms of security but production mode
27757
23:48:16,639 --> 23:48:21,119
in that case that it it just tries to
27758
23:48:18,720 --> 23:48:21,831
make sure that on authenticated access
27759
23:48:21,831 --> 23:48:25,439
uh for instance a document so the user
27760
23:48:24,000 --> 23:48:28,000
doesn't have access to are going to be
27761
23:48:29,119 --> 23:48:32,720
all right we've i've just noticed that i
27762
23:48:32,720 --> 23:48:37,119
mentioned a few things about rules and
27763
23:48:35,119 --> 23:48:38,639
you may be wondering about what these
27764
23:48:37,119 --> 23:48:40,080
rules actually are and what they
27765
23:48:40,080 --> 23:48:44,479
so i've prepared the link here so i'm
27766
23:48:42,872 --> 23:48:46,080
gonna see if i can actually open it on
27767
23:48:44,479 --> 23:48:47,440
my computer as well so i can bring it to
27768
23:48:49,512 --> 23:48:53,760
so these are the rules that i was
27769
23:48:53,759 --> 23:48:58,000
if you're for instance a back-end
27770
23:48:55,191 --> 23:48:59,919
developer like i am you will also be
27771
23:48:58,000 --> 23:49:01,279
very familiar with deploying your
27772
23:48:59,919 --> 23:49:03,679
application so if you're for instance
27773
23:49:01,279 --> 23:49:06,872
django developer or node.js with express
27774
23:49:03,679 --> 23:49:08,959
or whatever or flask developer then you
27775
23:49:08,960 --> 23:49:12,872
deploying your application to
27776
23:49:17,279 --> 23:49:23,600
responsible for specifying how users can
27777
23:49:21,119 --> 23:49:26,639
interact with your backend and what
27778
23:49:23,600 --> 23:49:29,279
rules are applied on what cases
27779
23:49:26,639 --> 23:49:31,600
uh firebase since it is not like this
27780
23:49:29,279 --> 23:49:33,440
traditional backend that you have to
27781
23:49:31,600 --> 23:49:36,160
deploy yourself since it is a product
27782
23:49:33,440 --> 23:49:37,760
that's already there and it's deployed
27783
23:49:36,160 --> 23:49:40,552
it needs your help in order to
27784
23:49:37,759 --> 23:49:42,551
understand its security rules so as you
27785
23:49:40,551 --> 23:49:44,959
can see this is a typical firebase
27786
23:49:42,551 --> 23:49:46,231
firestore configuration of a back-end
27787
23:49:44,960 --> 23:49:48,639
and you can see in here it says the
27788
23:49:46,232 --> 23:49:51,600
service is the firestore service and
27789
23:49:48,639 --> 23:49:52,800
match these documents at these paths and
27790
23:49:52,800 --> 23:49:57,760
only allow read and write if the user is
27791
23:49:56,000 --> 23:49:59,191
authenticated so if you're a django
27792
23:49:57,759 --> 23:50:01,119
developer you already know about like
27793
23:49:59,191 --> 23:50:04,871
requests you also get that you're in
27794
23:50:01,119 --> 23:50:06,551
django so a request user will contain
27795
23:50:04,872 --> 23:50:08,960
the currently logged in an authenticated
27796
23:50:06,551 --> 23:50:10,399
user there so that this is very similar
27797
23:50:10,399 --> 23:50:13,119
and i'm sorry if i'm talking a little
27798
23:50:11,759 --> 23:50:14,319
bit about back-end development that's
27799
23:50:13,119 --> 23:50:15,831
just because i'm trying to like make
27800
23:50:14,320 --> 23:50:17,440
this connection for those of you who are
27801
23:50:15,831 --> 23:50:19,360
back-end developers and trying to learn
27802
23:50:19,360 --> 23:50:22,960
if you're not a back-end developer just
27803
23:50:22,960 --> 23:50:27,512
these security rules are there to help
27804
23:50:28,800 --> 23:50:33,832
they're there to help you secure your
27805
23:50:33,831 --> 23:50:37,191
the way we've actually generated our
27806
23:50:35,512 --> 23:50:38,960
application let's go to the source code
27807
23:50:37,191 --> 23:50:41,759
and have a look at it a little bit
27808
23:50:38,960 --> 23:50:44,400
and when we set up our uh firebase with
27809
23:50:41,759 --> 23:50:46,399
the firebase cli and firestore cli there
27810
23:50:44,399 --> 23:50:48,319
were some files that were generated for
27811
23:50:46,399 --> 23:50:50,479
us automatically and they were inside
27812
23:50:50,479 --> 23:50:54,551
i'm going to open that for us here
27813
23:50:52,872 --> 23:50:56,080
and you can see some information in here
27814
23:50:54,551 --> 23:50:58,872
as you can see for android application
27815
23:50:56,080 --> 23:51:02,800
there is an api key app id messaging
27816
23:50:58,872 --> 23:51:05,192
sender id project id and storage bucket
27817
23:51:02,800 --> 23:51:06,872
if anybody gets hold of this information
27818
23:51:05,191 --> 23:51:09,360
as you now are going to get hold of this
27819
23:51:06,872 --> 23:51:11,279
information by watching this course
27820
23:51:09,360 --> 23:51:13,512
you will actually be able to replicate
27821
23:51:11,279 --> 23:51:16,959
this firebase options. in your own
27822
23:51:13,512 --> 23:51:20,080
application with my api key app id and
27823
23:51:16,960 --> 23:51:22,320
sender id and interact with the database
27824
23:51:20,080 --> 23:51:24,160
that i'm in control of even though you
27825
23:51:22,320 --> 23:51:25,440
personally don't have access to that
27826
23:51:25,440 --> 23:51:29,360
because that database is stored under my
27827
23:51:32,639 --> 23:51:37,039
using this api key and app id you can
27828
23:51:34,479 --> 23:51:39,191
interact with the database and it is
27829
23:51:37,039 --> 23:51:39,919
only the security information it's only
27830
23:51:39,919 --> 23:51:45,119
um authentication information or the
27831
23:51:42,639 --> 23:51:46,399
authentication rules that i specify in
27832
23:51:46,399 --> 23:51:50,639
config that will then decide who has
27833
23:51:50,639 --> 23:51:55,191
so don't worry also about this i'm going
27834
23:51:52,720 --> 23:51:57,759
to delete this firebase project actually
27835
23:51:55,191 --> 23:51:59,279
by the time this course is released so
27836
23:51:57,759 --> 23:52:01,279
i'm completely happy with this
27837
23:51:59,279 --> 23:52:04,551
information being public and shown to
27838
23:52:01,279 --> 23:52:05,360
you just so you see what i actually mean
27839
23:52:05,360 --> 23:52:10,399
just know that with various roles that
27840
23:52:07,279 --> 23:52:13,119
we can define on our firebase firestore
27841
23:52:10,399 --> 23:52:15,439
project we can specify who has access to
27842
23:52:13,119 --> 23:52:17,759
what and based on what rules for
27843
23:52:15,440 --> 23:52:20,551
instance if the user is authenticated or
27844
23:52:17,759 --> 23:52:23,511
if that user id is actually present in
27845
23:52:20,551 --> 23:52:26,231
that document's id field for instance so
27846
23:52:29,360 --> 23:52:34,160
now what we're gonna do is actually
27847
23:52:34,160 --> 23:52:39,040
firestore database for our project so
27848
23:52:36,960 --> 23:52:41,360
uh what i'm gonna do in here is i'm
27849
23:52:39,039 --> 23:52:43,919
going to bring up safari and i'm gonna
27850
23:52:41,360 --> 23:52:45,919
go to console firebase.com so i suggest
27851
23:52:45,919 --> 23:52:49,119
change the screen layout a little bit
27852
23:52:52,720 --> 23:52:57,512
and then i'm gonna go to our minus
27853
23:52:55,191 --> 23:52:59,512
flower project so i suggest that you do
27854
23:52:57,512 --> 23:53:00,551
the same thing for your application all
27855
23:53:00,551 --> 23:53:04,080
so when we end up here then on the left
27856
23:53:02,800 --> 23:53:05,680
hand side you'll see something called
27857
23:53:04,080 --> 23:53:07,440
firestore database and i want you to
27858
23:53:05,679 --> 23:53:09,511
click there and just ensure that you've
27859
23:53:07,440 --> 23:53:11,191
selected the correct application in here
27860
23:53:09,512 --> 23:53:13,119
as well you may have quite a few just
27861
23:53:13,119 --> 23:53:19,039
then what we'll need to do in here and
27862
23:53:14,800 --> 23:53:20,872
it's just to say create database okay
27863
23:53:19,039 --> 23:53:22,831
and as you can see this is now the
27864
23:53:20,872 --> 23:53:26,000
screen that may look a little bit
27865
23:53:22,831 --> 23:53:28,319
scary but it's completely fine
27866
23:53:26,000 --> 23:53:30,080
and you can see there are two different
27867
23:53:28,320 --> 23:53:31,920
modes specified here as we talked about
27868
23:53:30,080 --> 23:53:33,831
production mode and then the other one
27869
23:53:33,831 --> 23:53:40,720
in production mode the rules by
27870
23:53:36,160 --> 23:53:43,832
excuse me the rules by default are quite
27871
23:53:40,720 --> 23:53:46,080
um bad as you can see in here it says
27872
23:53:43,831 --> 23:53:48,551
any document inside the database is
27873
23:53:46,080 --> 23:53:49,831
unaccessible so or inaccessible
27874
23:53:49,831 --> 23:53:55,679
it says don't allow read or write
27875
23:53:52,960 --> 23:53:58,000
because the condition is just false
27876
23:53:55,679 --> 23:53:59,919
so and you can see it says all third
27877
23:53:58,000 --> 23:54:02,639
party reads and rights will be denied
27878
23:54:03,600 --> 23:54:06,552
this is not how we are going to set up
27879
23:54:06,551 --> 23:54:10,800
firestore database we as i mentioned
27880
23:54:09,119 --> 23:54:13,831
before we are going to tighten this up
27881
23:54:10,800 --> 23:54:16,639
quite a lot in in the future but not
27882
23:54:13,831 --> 23:54:18,231
just right now so i need you go into
27883
23:54:16,639 --> 23:54:21,119
start in test mode and you'll get this
27884
23:54:21,119 --> 23:54:25,599
message saying in um the default
27885
23:54:23,679 --> 23:54:27,759
security rules for test mode allows
27886
23:54:25,600 --> 23:54:29,832
anyone with your database reference to
27887
23:54:27,759 --> 23:54:32,399
view and remember database reference i
27888
23:54:29,831 --> 23:54:34,551
mentioned that that's inside this
27889
23:54:32,399 --> 23:54:36,079
firebase options so that's the reference
27890
23:54:34,551 --> 23:54:38,551
that we're talking about okay so it may
27891
23:54:36,080 --> 23:54:40,400
sound a little bit abstract but it's
27892
23:54:38,551 --> 23:54:41,919
really not that difficult to understand
27893
23:54:41,919 --> 23:54:45,119
and it says edit and delete all your
27894
23:54:45,119 --> 23:54:50,399
all the data in your database for the
27895
23:54:50,399 --> 23:54:54,000
and you can see the rule that has been
27896
23:54:51,831 --> 23:54:56,000
set up in here says allow read write if
27897
23:54:54,000 --> 23:54:58,479
request time is less than blah blah blah
27898
23:54:56,000 --> 23:55:00,399
so it's opening up your database
27899
23:54:58,479 --> 23:55:02,800
basically for 30 days it's actually
27900
23:55:00,399 --> 23:55:04,399
quite intelligent pretty nice okay so i
27901
23:55:02,800 --> 23:55:07,440
need you to do that and remember we're
27902
23:55:04,399 --> 23:55:09,191
gonna tighten this up soon okay
27903
23:55:07,440 --> 23:55:11,760
and then you can see in here it says
27904
23:55:09,191 --> 23:55:13,919
allow basically set up a location for
27905
23:55:11,759 --> 23:55:17,360
where your data is going to be stored
27906
23:55:13,919 --> 23:55:19,119
now there may be some sort of like um
27907
23:55:19,119 --> 23:55:23,679
between like the legal portions of your
27908
23:55:21,679 --> 23:55:25,759
business and also where you want to
27909
23:55:23,679 --> 23:55:29,279
store your data and where you actually
27910
23:55:25,759 --> 23:55:30,551
feel comfortable doing that but and gdpr
27911
23:55:29,279 --> 23:55:33,119
definitely makes this even more
27912
23:55:30,551 --> 23:55:34,080
complicated if you're living in europe
27913
23:55:34,080 --> 23:55:38,639
i mean even if you're living abroad gdpr
27914
23:55:36,720 --> 23:55:40,639
makes things complicated some websites
27915
23:55:38,639 --> 23:55:43,039
that are hosted in the us are still not
27916
23:55:40,639 --> 23:55:45,360
accessible by users in the eu
27917
23:55:43,039 --> 23:55:47,439
and this makes things a little bit
27918
23:55:45,360 --> 23:55:48,232
complicated i'm i'm basically
27919
23:55:48,232 --> 23:55:52,872
sweden right now so i i prefer to use
27920
23:55:53,831 --> 23:55:59,599
has something to do with europe and uh
27921
23:55:56,960 --> 23:56:01,600
i can see europe west while sweden is
27922
23:55:59,600 --> 23:56:04,000
kind of like in the middle so i'm just
27923
23:56:01,600 --> 23:56:06,800
going to use europe west right now but
27924
23:56:04,000 --> 23:56:08,399
again this isn't so so significant right
27925
23:56:08,399 --> 23:56:12,159
some speed implications for application
27926
23:56:10,320 --> 23:56:14,000
depending on where the server actually
27927
23:56:12,160 --> 23:56:16,000
is so it's really good that firebase is
27928
23:56:14,000 --> 23:56:18,479
giving you the option to choose the
27929
23:56:16,000 --> 23:56:21,191
location of your firestore database
27930
23:56:18,479 --> 23:56:24,000
so you may want to read more about this
27931
23:56:21,191 --> 23:56:25,679
and you can press learn more in order to
27932
23:56:24,000 --> 23:56:27,919
read more about this but i'm just going
27933
23:56:25,679 --> 23:56:30,231
to pick europe west just because i
27934
23:56:27,919 --> 23:56:33,191
believe it it could make more sense for
27935
23:56:30,232 --> 23:56:34,080
me since i am located in sweden
27936
23:56:34,080 --> 23:56:38,960
choose a location that makes sense for
27937
23:56:35,440 --> 23:56:42,639
you and then press the enable button
27938
23:56:38,960 --> 23:56:45,360
wow that is a an absolutely horrific
27939
23:56:45,360 --> 23:56:49,512
what that is i mean it's not even
27940
23:56:46,960 --> 23:56:51,680
centered so that's okay firebase
27941
23:56:49,512 --> 23:56:53,680
remember we're using firebase as a free
27942
23:56:51,679 --> 23:56:55,191
service so i just want to make sure that
27943
23:56:53,679 --> 23:56:56,871
everybody understands i'm very very
27944
23:56:55,191 --> 23:56:59,360
thankful for having firebase because
27945
23:56:56,872 --> 23:57:00,872
it's made life a lot easier for me
27946
23:56:59,360 --> 23:57:02,720
even though i can create my own backends
27947
23:57:00,872 --> 23:57:04,320
but i sometimes still prefer to use
27948
23:57:07,600 --> 23:57:12,800
it's so easy to use so uh thank you so
27949
23:57:10,320 --> 23:57:15,280
much any anybody who's working
27950
23:57:12,800 --> 23:57:16,639
on firebase and providing us with free
27951
23:57:19,600 --> 23:57:25,120
so let's have a look in here um about in
27952
23:57:22,720 --> 23:57:26,232
our rules so let me increase the size of
27953
23:57:28,960 --> 23:57:33,440
increase it like this so you see it
27954
23:57:35,440 --> 23:57:38,160
close the section to the left a little
27955
23:57:38,160 --> 23:57:41,440
i probably could actually have done that
27956
23:57:39,919 --> 23:57:43,831
so i'm going to go back in here and
27957
23:57:41,440 --> 23:57:46,720
press this button to close that section
27958
23:57:43,831 --> 23:57:48,319
all right so what we need to do now is
27959
23:57:46,720 --> 23:57:50,800
to as the caption indicates we're going
27960
23:57:50,800 --> 23:57:57,279
the security rules in our database
27961
23:57:57,440 --> 23:58:03,680
we allow read and write if the user is
27962
23:58:03,679 --> 23:58:09,039
um so we make sure you as you can see it
27963
23:58:05,919 --> 23:58:11,191
says request off is not null so let's go
27964
23:58:09,039 --> 23:58:14,399
ahead and change that so i'm gonna
27965
23:58:11,191 --> 23:58:17,039
remove everything after request
27966
23:58:14,399 --> 23:58:19,439
dot like this and you can see it gives
27967
23:58:17,039 --> 23:58:20,551
you access to off path resource time
27968
23:58:20,551 --> 23:58:24,399
so i'm just going to say off is not null
27969
23:58:24,399 --> 23:58:28,871
so you can actually bring it to the same
27970
23:58:28,872 --> 23:58:32,872
so after you've done that you can say
27971
23:58:30,399 --> 23:58:35,679
allow read write if request auth is not
27972
23:58:32,872 --> 23:58:38,320
all and that literally just means that
27973
23:58:35,679 --> 23:58:40,319
people who are authenticated with our
27974
23:58:40,320 --> 23:58:45,280
and they have a valid firebase user when
27975
23:58:43,360 --> 23:58:47,440
they interact with the database are
27976
23:58:47,440 --> 23:58:51,040
read from and write to the database
27977
23:58:51,039 --> 23:58:56,231
this is database wide at the moment it
27978
23:58:53,831 --> 23:58:57,759
says any document and we still haven't
27979
23:58:56,232 --> 23:58:59,512
talked about documents so much but i'll
27980
23:58:57,759 --> 23:59:02,399
tell you soon about that but any just
27981
23:58:59,512 --> 23:59:05,040
imagine anything in your database can be
27982
23:59:02,399 --> 23:59:07,191
read from and written to if the user is
27983
23:59:05,039 --> 23:59:08,159
logged in and that's not so secure
27984
23:59:08,160 --> 23:59:12,639
that literally means that i as user one
27985
23:59:10,639 --> 23:59:15,191
and you as user two have access to each
27986
23:59:12,639 --> 23:59:17,831
other's documents okay even if the
27987
23:59:15,191 --> 23:59:19,440
application itself is like segregating
27988
23:59:17,831 --> 23:59:21,759
these two documents saying that oh
27989
23:59:19,440 --> 23:59:24,551
you're user one i'm gonna just give you
27990
23:59:21,759 --> 23:59:26,159
user ones documents but internally as a
27991
23:59:26,160 --> 23:59:30,720
given our current security um
27992
23:59:30,720 --> 23:59:34,639
you will have access to my documents
27993
23:59:32,872 --> 23:59:36,872
even if the application's limiting your
27994
23:59:34,639 --> 23:59:37,679
access just remember that okay
27995
23:59:37,679 --> 23:59:43,679
after you've done that i need you to
27996
23:59:40,080 --> 23:59:44,960
please press the publish button
27997
23:59:43,679 --> 23:59:46,551
so as you can see it says publish
27998
23:59:44,960 --> 23:59:48,000
changes can take up to a minute to take
27999
23:59:46,551 --> 23:59:49,360
effect and that's all right because
28000
23:59:48,000 --> 23:59:53,119
we're going to actually take more than a
28001
23:59:49,360 --> 23:59:56,551
minute before we jump into using these
28002
23:59:53,119 --> 23:59:58,231
new rules in our application so
28003
23:59:58,232 --> 24:00:02,720
let's talk about collections here
28004
24:00:02,720 --> 24:00:08,800
and i've prepared a doc and a link there
28005
24:00:05,600 --> 24:00:10,872
so let me see if i can find that
28006
24:00:10,872 --> 24:00:14,720
so as you can see in here there is a
28007
24:00:12,872 --> 24:00:16,000
good documentation that will talk a
28008
24:00:14,720 --> 24:00:18,479
little bit about collections and
28009
24:00:16,000 --> 24:00:20,720
documents and you could go through this
28010
24:00:18,479 --> 24:00:22,720
um but i'm not gonna do that right now
28011
24:00:20,720 --> 24:00:24,080
but just so you know here's the link at
28012
24:00:22,720 --> 24:00:25,831
the bottom of the screen if you want to
28013
24:00:25,831 --> 24:00:30,000
i'm going to talk about collections
28014
24:00:28,080 --> 24:00:31,600
personally so you will understand it in
28015
24:00:31,600 --> 24:00:36,832
at this point what we need is just to go
28016
24:00:36,831 --> 24:00:42,080
okay and what you'll see is a screen
28017
24:00:39,919 --> 24:00:44,080
that kind of looks like this so it has
28018
24:00:42,080 --> 24:00:47,119
your project name in here and then there
28019
24:00:44,080 --> 24:00:48,960
is a button called start collection okay
28020
24:00:47,119 --> 24:00:52,080
just imagine collection as its name
28021
24:00:48,960 --> 24:00:54,080
indicates is a group of related objects
28022
24:00:52,080 --> 24:00:56,639
objects could be you could interpret
28023
24:00:54,080 --> 24:00:57,759
them as tables as you traditionally have
28024
24:00:57,759 --> 24:01:02,399
relational databases such as sqlite um
28025
24:01:02,399 --> 24:01:06,959
a collection just imagine for instance
28026
24:01:04,479 --> 24:01:10,080
if we say what does our application do
28027
24:01:06,960 --> 24:01:13,192
our application stores nodes for
28028
24:01:10,080 --> 24:01:15,512
all its users so user a has nodes user b
28029
24:01:13,191 --> 24:01:17,599
has nodes but user c may not have nodes
28030
24:01:15,512 --> 24:01:18,720
so the only thing our application is
28031
24:01:18,720 --> 24:01:25,360
in database right now is notes so that
28032
24:01:22,320 --> 24:01:27,832
could be its own collection okay so we
28033
24:01:25,360 --> 24:01:29,919
just create a collection called notes
28034
24:01:27,831 --> 24:01:32,159
and in that collection we're gonna store
28035
24:01:32,160 --> 24:01:35,440
every user is going to have their own
28036
24:01:35,440 --> 24:01:38,551
that's how we are going to do it in this
28037
24:01:38,551 --> 24:01:41,831
however you as a developer may just
28038
24:01:41,831 --> 24:01:45,360
i'm going to do it differently what i'm
28039
24:01:43,759 --> 24:01:48,159
going to do is i'm going to create a new
28040
24:01:45,360 --> 24:01:50,000
collection of notes for every user so
28041
24:01:48,160 --> 24:01:51,680
user a is going to have a collection
28042
24:01:51,679 --> 24:01:56,079
user b is going to have user b notes
28043
24:01:56,080 --> 24:02:01,680
assign create a collection with every
28044
24:01:58,800 --> 24:02:04,232
user id so you remember we get a user
28045
24:02:01,679 --> 24:02:06,231
identifier from firebase you may decide
28046
24:02:04,232 --> 24:02:08,800
to you create a collection for every
28047
24:02:06,232 --> 24:02:10,800
user based on their user id okay that's
28048
24:02:08,800 --> 24:02:12,320
fine but if you're following along with
28049
24:02:10,800 --> 24:02:13,919
this course i strongly suggest actually
28050
24:02:12,320 --> 24:02:16,640
do it the way i'm doing especially if
28051
24:02:13,919 --> 24:02:18,720
you if you if it's the first time you're
28052
24:02:16,639 --> 24:02:20,639
doing this if it's if you've done this
28053
24:02:18,720 --> 24:02:21,680
before you may just be comfortable with
28054
24:02:21,679 --> 24:02:25,439
another type of collection then be my
28055
24:02:23,679 --> 24:02:27,919
guest please go ahead but it might then
28056
24:02:25,440 --> 24:02:30,720
be difficult for you later on to follow
28057
24:02:37,919 --> 24:02:44,000
tap the start collection button in here
28058
24:02:40,639 --> 24:02:45,759
um as you can see in here it says okay
28059
24:02:44,000 --> 24:02:48,160
this collection is being created in the
28060
24:02:45,759 --> 24:02:50,000
root path and just give me an id and
28061
24:02:48,160 --> 24:02:52,080
here's a collection set of documents
28062
24:02:52,080 --> 24:02:54,960
and in here it's storing a collection of
28063
24:02:54,960 --> 24:02:58,552
but remember we don't have to actually
28064
24:02:56,399 --> 24:03:00,479
store users in our database firebase is
28065
24:02:58,551 --> 24:03:02,231
already taking care of this i actually
28066
24:03:00,479 --> 24:03:04,319
believe this is a bad example that they
28067
24:03:02,232 --> 24:03:06,000
provided to ask people to say example
28068
24:03:04,320 --> 24:03:08,960
collection of users because this kind of
28069
24:03:06,000 --> 24:03:11,191
gives id idea to developers oh now i
28070
24:03:08,960 --> 24:03:14,080
have to store my users here but those
28071
24:03:11,191 --> 24:03:16,000
users are already stored at the firebase
28072
24:03:16,000 --> 24:03:20,399
so let's go and go ahead in here and
28073
24:03:18,160 --> 24:03:23,760
just say we're storing nodes okay and
28074
24:03:23,759 --> 24:03:27,439
and you can see in here now we're
28075
24:03:25,512 --> 24:03:28,720
getting something called a document
28076
24:03:28,720 --> 24:03:32,232
notes and then it says a document id a
28077
24:03:30,551 --> 24:03:33,919
collection must contain at least one
28078
24:03:32,232 --> 24:03:36,800
document cloud firestore's unit of
28079
24:03:33,919 --> 24:03:39,440
storage documents store your data as
28080
24:03:36,800 --> 24:03:42,639
fields auto generate a document or the
28081
24:03:39,440 --> 24:03:44,479
id or customize one if needed okay
28082
24:03:44,479 --> 24:03:47,831
that that brings us to what documents
28083
24:03:52,551 --> 24:03:57,831
if you're if you know about uh
28084
24:03:55,512 --> 24:03:59,832
sql from before if you followed along
28085
24:03:57,831 --> 24:04:02,551
with what being and what we've been
28086
24:03:59,831 --> 24:04:04,479
creating like when we looked at db
28087
24:04:04,479 --> 24:04:08,080
then we had these tables like user and
28088
24:04:10,000 --> 24:04:15,919
these are like the schemas of a document
28089
24:04:13,440 --> 24:04:17,440
so as you can see here and here says
28090
24:04:17,440 --> 24:04:21,600
is created this way it has an id it has
28091
24:04:19,360 --> 24:04:23,680
a user id it has a text is synced with
28092
24:04:21,600 --> 24:04:25,600
cloud remember all those fields and it
28093
24:04:25,600 --> 24:04:31,192
in far in the firestore world those are
28094
24:04:28,320 --> 24:04:34,160
documents so that entire notes
28095
24:04:31,191 --> 24:04:36,080
schema is one document and every field
28096
24:04:34,160 --> 24:04:37,440
in it then it can have a data type so
28097
24:04:36,080 --> 24:04:38,639
those fields you may know them as
28098
24:04:40,320 --> 24:04:44,960
when we created our own tables okay so
28099
24:04:42,479 --> 24:04:47,119
if we go back into db browser
28100
24:04:44,960 --> 24:04:48,552
you may not have this db browser for sql
28101
24:04:47,119 --> 24:04:50,551
light open and that's completely fine
28102
24:04:48,551 --> 24:04:52,872
we're not gonna actually work with it
28103
24:04:50,551 --> 24:04:55,360
right now you may have you may even have
28104
24:04:52,872 --> 24:04:57,192
like is toss that database in the trash
28105
24:04:55,360 --> 24:04:58,800
and that's completely fine i just want
28106
24:04:58,800 --> 24:05:04,232
that when we created this node table or
28107
24:05:01,759 --> 24:05:06,959
the node documents then we had different
28108
24:05:04,232 --> 24:05:09,279
fields remember id user id text and
28109
24:05:06,960 --> 24:05:11,512
those were the exact same things in here
28110
24:05:11,512 --> 24:05:16,232
so if i if i go ahead and create a new
28111
24:05:16,232 --> 24:05:22,160
and have a look at for instance my
28112
24:05:19,440 --> 24:05:25,360
other uh firebase projects i can see i
28113
24:05:22,160 --> 24:05:28,232
have a notes app and you can here see
28114
24:05:25,360 --> 24:05:30,160
that um the way i had designed this uh
28115
24:05:28,232 --> 24:05:32,232
in the beginning of this course is i had
28116
24:05:30,160 --> 24:05:34,552
a collection and then every collection
28117
24:05:32,232 --> 24:05:37,120
had documents in it that had text and
28118
24:05:34,551 --> 24:05:38,800
then user id okay so that's what we're
28119
24:05:37,119 --> 24:05:40,639
gonna do in here we're just gonna say a
28120
24:05:40,639 --> 24:05:45,039
and it's typed string and it has no
28121
24:05:42,800 --> 24:05:46,800
value okay and then we're gonna add a
28122
24:05:45,039 --> 24:05:48,479
new field in here and just call it use
28123
24:05:48,479 --> 24:05:53,919
okay and then in here it has no value
28124
24:05:51,119 --> 24:05:56,799
either and then a document id that we're
28125
24:05:53,919 --> 24:06:00,800
just gonna auto generate okay so we just
28126
24:05:56,800 --> 24:06:03,120
pretty much just created a new note okay
28127
24:06:00,800 --> 24:06:05,040
with a random document id and it has a
28128
24:06:03,119 --> 24:06:07,279
field of text and another field called
28129
24:06:07,279 --> 24:06:11,831
great then i need you to press the save
28130
24:06:09,360 --> 24:06:13,919
button and now you'll see here we have
28131
24:06:11,831 --> 24:06:16,080
our notes collection and inside there we
28132
24:06:13,919 --> 24:06:18,639
have a document that has these two
28133
24:06:18,639 --> 24:06:23,679
so what you could do also is to delete
28134
24:06:20,960 --> 24:06:25,600
either a collection or delete a a
28135
24:06:23,679 --> 24:06:28,000
document so i'm just going to say delete
28136
24:06:25,600 --> 24:06:30,552
document and start delete and as you can
28137
24:06:28,000 --> 24:06:32,639
see now we have an empty collection
28138
24:06:32,639 --> 24:06:36,800
i still find this a little bit peculiar
28139
24:06:34,720 --> 24:06:38,080
that when we create a collection
28140
24:06:38,080 --> 24:06:42,400
forces us to create a document inside it
28141
24:06:40,639 --> 24:06:44,872
like if i go and say start collection
28142
24:06:42,399 --> 24:06:47,759
and then press the next button in here i
28143
24:06:44,872 --> 24:06:49,279
can't actually save my empty collection
28144
24:06:49,279 --> 24:06:53,279
let's see here a collection must contain
28145
24:06:54,551 --> 24:06:57,599
i'm not sure if that's actually true
28146
24:06:56,232 --> 24:07:00,160
because you can see now we have a
28147
24:06:57,600 --> 24:07:01,920
collection with no document so
28148
24:07:00,160 --> 24:07:03,120
i'm not sure why that was created why
28149
24:07:03,119 --> 24:07:06,959
rule was set when you create a new
28150
24:07:05,039 --> 24:07:08,551
collection but just know that it's not
28151
24:07:06,960 --> 24:07:12,080
completely true so you can have a
28152
24:07:08,551 --> 24:07:12,080
collection with no documents all right
28153
24:07:12,960 --> 24:07:18,800
so now let's talk a little about
28154
24:07:15,919 --> 24:07:22,551
streams of data if you remember from our
28155
24:07:18,800 --> 24:07:25,279
application in if we go to our
28156
24:07:28,551 --> 24:07:33,599
you remember that we have this stream of
28157
24:07:31,119 --> 24:07:37,279
database nodes as a stream of list of
28158
24:07:33,600 --> 24:07:39,120
database nodes and we call it all nodes
28159
24:07:37,279 --> 24:07:41,360
in our application up to this point
28160
24:07:39,119 --> 24:07:43,679
we've had to manage these streams
28161
24:07:41,360 --> 24:07:46,232
manually in that we have to like go
28162
24:07:43,679 --> 24:07:48,231
create a stream controller do this whole
28163
24:07:48,232 --> 24:07:52,080
unlisten populate the stream controller
28164
24:07:52,080 --> 24:07:57,512
you'd be really really happy perhaps to
28165
24:07:54,160 --> 24:07:59,832
hear that when we go to firebase and
28166
24:07:57,512 --> 24:08:02,232
firestore we don't have to do any of
28167
24:08:02,232 --> 24:08:07,360
already has all of this built in in that
28168
24:08:05,360 --> 24:08:10,160
when you for instance read all the
28169
24:08:07,360 --> 24:08:13,680
documents inside this notes collection
28170
24:08:10,160 --> 24:08:14,480
that will actually be a stream of those
28171
24:08:18,000 --> 24:08:22,479
stream controller and no more streams
28172
24:08:20,320 --> 24:08:24,552
that you have to manage manually okay
28173
24:08:22,479 --> 24:08:28,319
those will be exposed to your
28174
24:08:24,551 --> 24:08:28,319
application using firestore
28175
24:08:30,232 --> 24:08:34,480
so as you saw and when i created this
28176
24:08:32,320 --> 24:08:35,920
collection to begin with i created it
28177
24:08:35,919 --> 24:08:41,440
a note document that had a text and it
28178
24:08:41,440 --> 24:08:45,279
our goal in this chapter and going
28179
24:08:43,279 --> 24:08:47,919
forward is to make sure that every node
28180
24:08:45,279 --> 24:08:50,872
has a text and it is actually linked to
28181
24:08:47,919 --> 24:08:52,160
a firebase user using that user's user
28182
24:08:55,360 --> 24:09:00,960
application to our auth service so let's
28183
24:08:58,000 --> 24:09:02,960
go to off and then auth service in here
28184
24:09:00,960 --> 24:09:05,192
and remember we're using firebase auth
28185
24:09:02,960 --> 24:09:06,872
provider so let's go in there and you
28186
24:09:06,872 --> 24:09:11,279
when we say create user with email and
28187
24:09:08,960 --> 24:09:13,192
password for instance then this function
28188
24:09:11,279 --> 24:09:15,512
returned something called user
28189
24:09:13,191 --> 24:09:17,191
credential to us and user credential
28190
24:09:15,512 --> 24:09:19,040
actually has quite a few properties you
28191
24:09:17,191 --> 24:09:22,319
can see it has a credential and it has a
28192
24:09:19,039 --> 24:09:23,831
user inside it of type user so if you go
28193
24:09:22,320 --> 24:09:25,760
into that user you can see it has
28194
24:09:23,831 --> 24:09:28,231
different properties like display name
28195
24:09:25,759 --> 24:09:31,119
email email verified metadata phone
28196
24:09:28,232 --> 24:09:33,832
number etc but this user also has
28197
24:09:31,119 --> 24:09:38,000
something called a user's unique id
28198
24:09:33,831 --> 24:09:41,191
which we actually need in order to store
28199
24:09:38,000 --> 24:09:42,639
notes into our collect notes collection
28200
24:09:42,639 --> 24:09:46,319
and this is what i mean every document
28201
24:09:44,639 --> 24:09:47,759
that we create is for instance going to
28202
24:09:47,759 --> 24:09:51,679
random id or something which we haven't
28203
24:09:49,360 --> 24:09:53,919
decided yet and one of the fields let me
28204
24:09:51,679 --> 24:09:56,000
actually see if i can resize uh this
28205
24:09:53,919 --> 24:09:57,360
safari window so you see it better so
28206
24:09:56,000 --> 24:09:59,119
it's going to have a text and the text
28207
24:09:57,360 --> 24:10:00,639
is going to be generated by the user but
28208
24:09:59,119 --> 24:10:03,440
it's going to also have a field called
28209
24:10:00,639 --> 24:10:06,160
user id okay so in this user id field we
28210
24:10:03,440 --> 24:10:07,040
actually need to store that user's
28211
24:10:07,039 --> 24:10:10,799
firebase generated id in there okay
28212
24:10:12,720 --> 24:10:18,080
what we are doing with that user do you
28213
24:10:14,639 --> 24:10:20,720
remember we're not actually um exposing
28214
24:10:18,080 --> 24:10:22,551
the firebase user to our application and
28215
24:10:20,720 --> 24:10:24,160
that's a great level of abstraction
28216
24:10:22,551 --> 24:10:26,551
however we have a little bit of a
28217
24:10:24,160 --> 24:10:29,832
problem in that right now our user has
28218
24:10:26,551 --> 24:10:32,639
email and is email verified it doesn't
28219
24:10:29,831 --> 24:10:34,551
actually have a unique id so our
28220
24:10:32,639 --> 24:10:37,119
application is not going to be able to
28221
24:10:39,679 --> 24:10:44,799
it's not going to be able to associate a
28222
24:10:41,119 --> 24:10:46,871
new note with a user id okay
28223
24:10:44,800 --> 24:10:48,720
so we need to fix that so i'm just going
28224
24:10:46,872 --> 24:10:51,600
to go to my notes a little bit in here
28225
24:10:51,600 --> 24:10:56,160
update our auth user as you can see in
28226
24:10:56,160 --> 24:10:59,440
auth user.dart file as i've opened in
28227
24:10:59,440 --> 24:11:04,639
and what we need is to add a new field
28228
24:11:01,759 --> 24:11:06,000
which is a required field and we need to
28229
24:11:10,872 --> 24:11:14,872
so let's go ahead and do that now so i'm
28230
24:11:13,039 --> 24:11:16,719
just going to go ahead and say final
28231
24:11:16,720 --> 24:11:23,040
and id so this field is not optional
28232
24:11:20,000 --> 24:11:25,679
here you see every user that comes into
28233
24:11:23,039 --> 24:11:27,831
our application should have an id and
28234
24:11:25,679 --> 24:11:30,479
that's like the expectation that we have
28235
24:11:27,831 --> 24:11:32,231
on our off users okay so i need you to
28236
24:11:30,479 --> 24:11:34,479
go ahead and add that please here of
28237
24:11:34,479 --> 24:11:40,000
let's then go in here and i'm going to
28238
24:11:40,000 --> 24:11:43,919
the required fields i can see visual
28239
24:11:42,232 --> 24:11:46,232
studio code wasn't able to actually meet
28240
24:11:46,232 --> 24:11:49,760
i'm going to help visual studio code and
28241
24:11:47,759 --> 24:11:51,279
do that i'm just going to say required
28242
24:11:49,759 --> 24:11:53,511
this id and i need you to do the same
28243
24:11:53,512 --> 24:11:59,119
so now we have a problem in here in that
28244
24:11:55,831 --> 24:12:02,720
our auth user in here doesn't have an
28245
24:11:59,119 --> 24:12:04,799
id where we created from firebase user
28246
24:12:02,720 --> 24:12:08,479
let's go and remedy that let's just say
28247
24:12:04,800 --> 24:12:11,440
the id in here is the user uid remember
28248
24:12:08,479 --> 24:12:13,119
this uh parameter that i uh talked to
28249
24:12:13,119 --> 24:12:18,319
so that is now created and let me
28250
24:12:15,279 --> 24:12:19,831
actually go to scrcpy i can see that
28251
24:12:18,320 --> 24:12:21,360
visual studio code has a little bit of
28252
24:12:19,831 --> 24:12:23,039
problem hot reloading right now so
28253
24:12:21,360 --> 24:12:25,279
that's because probably the application
28254
24:12:23,039 --> 24:12:26,551
wasn't in the foreground so that's fixed
28255
24:12:26,551 --> 24:12:31,279
talking about scr cpy it's perhaps a
28256
24:12:28,479 --> 24:12:32,479
good idea for me to bring in crcpy here
28257
24:12:31,279 --> 24:12:36,232
just to make sure that we're not
28258
24:12:32,479 --> 24:12:37,919
bringing and breaking anything okay
28259
24:12:37,919 --> 24:12:41,191
so that's one change that we have to
28260
24:12:39,191 --> 24:12:42,959
make to our auto user the other change
28261
24:12:41,191 --> 24:12:45,360
that we have to make is to make sure
28262
24:12:42,960 --> 24:12:46,480
that the email parameter of our user is
28263
24:12:46,479 --> 24:12:49,599
you see the way we are creating at the
28264
24:12:50,720 --> 24:12:56,320
our application is that we've created
28265
24:12:53,039 --> 24:12:58,079
the login process of a use email and
28266
24:12:56,320 --> 24:13:00,080
password authentication so we don't have
28267
24:12:58,080 --> 24:13:01,919
like facebook authentication or google
28268
24:13:00,080 --> 24:13:03,040
authentication we only have username and
28269
24:13:05,279 --> 24:13:10,000
given that condition we can be sure that
28270
24:13:08,232 --> 24:13:11,832
every authenticated user in our
28271
24:13:10,000 --> 24:13:13,279
application actually has an email
28272
24:13:14,872 --> 24:13:20,160
let's go ahead and just say that email
28273
24:13:17,759 --> 24:13:22,000
is not an optional field anymore and in
28274
24:13:20,160 --> 24:13:24,800
here we're going to explicitly unwrap
28275
24:13:22,000 --> 24:13:28,960
that email all right so that's another
28276
24:13:24,800 --> 24:13:32,639
change that we made to our application
28277
24:13:28,960 --> 24:13:34,480
so now that we've done that you can see
28278
24:13:32,639 --> 24:13:36,720
flutter is not so happy with those
28279
24:13:34,479 --> 24:13:39,279
changes saying that well yeah you broke
28280
24:13:36,720 --> 24:13:41,119
something and it's our tests that have
28281
24:13:41,119 --> 24:13:45,759
so as you can see uh we need to make
28282
24:13:43,360 --> 24:13:47,440
sure that id is actually included in our
28283
24:13:47,440 --> 24:13:52,720
and since we're not actually creating a
28284
24:13:50,000 --> 24:13:55,119
specific test for that user id
28285
24:13:52,720 --> 24:13:57,919
we can just add a random id in here
28286
24:13:55,119 --> 24:14:00,000
let's just say my id okay and i'm going
28287
24:14:00,000 --> 24:14:05,512
bring it down here as well so we have an
28288
24:14:02,320 --> 24:14:08,800
id field in both cases of auth user
28289
24:14:10,872 --> 24:14:14,400
we have another problem as you can see
28290
24:14:12,479 --> 24:14:15,512
in the captions in our create update
28291
24:14:15,512 --> 24:14:20,960
we are unwrapping the user's email and
28292
24:14:17,600 --> 24:14:23,600
that's what this little orange views um
28293
24:14:25,191 --> 24:14:29,919
well yeah it's not an error but it's a
28294
24:14:27,360 --> 24:14:31,360
warning so let's go to this create
28295
24:14:33,600 --> 24:14:38,160
field in here as you can see we're in
28296
24:14:35,679 --> 24:14:40,079
inside the get a create or get existing
28297
24:14:40,080 --> 24:14:44,080
and we are unwrapping this email but
28298
24:14:42,399 --> 24:14:46,399
right now the warning is saying what is
28299
24:14:46,399 --> 24:14:50,479
asterisk will have no effect because the
28300
24:14:48,232 --> 24:14:52,960
receiver can't be not try removing the
28301
24:14:50,479 --> 24:14:54,800
asterisk operator and i need you to do
28302
24:14:54,800 --> 24:14:58,551
we have another problem also we have
28303
24:14:56,399 --> 24:14:59,759
another warning inside the notes of you
28304
24:14:58,551 --> 24:15:01,360
and i believe we're doing something
28305
24:14:59,759 --> 24:15:04,110
similar in the notes view so let's see
28306
24:15:08,720 --> 24:15:12,872
i actually don't oh here we have the
28307
24:15:10,800 --> 24:15:15,832
user email in here as well so i'm just
28308
24:15:12,872 --> 24:15:17,192
going to remove the asterisk after that
28309
24:15:15,831 --> 24:15:20,191
so i need you to do the same thing
28310
24:15:21,600 --> 24:15:26,232
now we're gonna get to the juicy parts
28311
24:15:23,360 --> 24:15:28,479
of the uh cloud storage integration so
28312
24:15:26,232 --> 24:15:31,440
i'm clean i'm basically removing all the
28313
24:15:28,479 --> 24:15:32,872
file all the dart um tabs from here i'm
28314
24:15:31,440 --> 24:15:34,800
actually not deleting the files i'm
28315
24:15:32,872 --> 24:15:36,080
removing like that tab so it's a clean
28316
24:15:40,479 --> 24:15:44,959
all our cloud storage exceptions you see
28317
24:15:43,191 --> 24:15:48,479
if you remember from when we worked with
28318
24:15:44,960 --> 24:15:51,192
our quad service which is a node service
28319
24:15:48,479 --> 24:15:53,599
then we also had a file under the croth
28320
24:15:51,191 --> 24:15:55,360
folder called crowd exceptions and in
28321
24:15:53,600 --> 24:15:57,279
here we define all the different things
28322
24:15:55,360 --> 24:16:00,080
that could go wrong when the user is
28323
24:15:57,279 --> 24:16:03,039
working with our node service now that
28324
24:16:00,080 --> 24:16:05,680
we're moving away from crud we need to
28325
24:16:03,039 --> 24:16:06,719
have our new exceptions defined
28326
24:16:09,191 --> 24:16:11,679
as you can see in the cache just like we
28327
24:16:10,399 --> 24:16:13,511
had the crowd exceptions we're also
28328
24:16:11,679 --> 24:16:15,119
going to have some exceptions thrown by
28329
24:16:15,119 --> 24:16:19,440
firestore service which we haven't
28330
24:16:17,360 --> 24:16:22,960
developed yet but we need to define
28331
24:16:19,440 --> 24:16:24,160
those exceptions at least okay
28332
24:16:24,160 --> 24:16:28,160
what we need now is to go and create
28333
24:16:26,000 --> 24:16:31,039
that file so i need you to please create
28334
24:16:31,039 --> 24:16:36,159
cloud and then create that file as cloud
28335
24:16:36,160 --> 24:16:39,919
i'm going to do that as well so let's
28336
24:16:38,080 --> 24:16:41,600
see i'm going to fold all the folders in
28337
24:16:41,600 --> 24:16:46,400
so we have lib services and then cloud
28338
24:16:44,639 --> 24:16:48,800
you can see we don't have cloud at the
28339
24:16:46,399 --> 24:16:51,119
moment so we do have services and we
28340
24:16:48,800 --> 24:16:53,919
have off in there and crowd so i'm gonna
28341
24:16:51,119 --> 24:16:55,599
right click on services and say new file
28342
24:16:53,919 --> 24:16:56,551
and then in here i'm just gonna say
28343
24:16:56,551 --> 24:17:02,479
and then slash cloud storage
28344
24:17:05,512 --> 24:17:10,160
after the creation of that file
28345
24:17:08,551 --> 24:17:13,039
i'm going to remove the project explorer
28346
24:17:10,160 --> 24:17:14,400
there as well what we need then is to
28347
24:17:14,399 --> 24:17:19,119
a super class for all our cl cloud
28348
24:17:19,119 --> 24:17:22,799
if you remember from the crowd
28349
24:17:20,551 --> 24:17:24,551
exceptions that we created in here
28350
24:17:22,800 --> 24:17:26,872
all those exceptions were actually of
28351
24:17:24,551 --> 24:17:28,479
type exception and that's one way of
28352
24:17:36,479 --> 24:17:40,872
handle them quite smoothly or better
28353
24:17:41,759 --> 24:17:46,720
at the call site and so that basically
28354
24:17:44,639 --> 24:17:48,479
is going to use inheritance and then you
28355
24:17:46,720 --> 24:17:50,800
and we are going to create a new
28356
24:17:50,800 --> 24:17:55,680
here called cloud storage exception and
28357
24:17:53,759 --> 24:17:57,919
all our cloud exceptions are going to be
28358
24:17:55,679 --> 24:18:00,159
of that type so makes grouping and
28359
24:17:57,919 --> 24:18:03,191
catching these exceptions in the future
28360
24:18:05,919 --> 24:18:11,191
create our first exception it is called
28361
24:18:09,512 --> 24:18:12,320
i can see it's called cloud storage
28362
24:18:12,320 --> 24:18:17,280
so let's go ahead and say clouds and
28363
24:18:14,080 --> 24:18:21,040
class cloud storage exception
28364
24:18:23,039 --> 24:18:27,360
and we're also going to create a
28365
24:18:24,639 --> 24:18:29,679
constant constructor for it so it makes
28366
24:18:27,360 --> 24:18:32,232
creating instance of this a lot easier
28367
24:18:32,232 --> 24:18:37,440
basically say that this is um an
28368
24:18:35,191 --> 24:18:39,360
immutable class meaning that this class
28369
24:18:37,440 --> 24:18:41,919
and all its subclasses need to be
28370
24:18:39,360 --> 24:18:43,831
immutable you could do that all right
28371
24:18:41,919 --> 24:18:45,360
that's fine as well but usually
28372
24:18:43,831 --> 24:18:47,511
exceptions aren't marked with this it's
28373
24:18:45,360 --> 24:18:49,831
usually data classes that are marked
28374
24:18:47,512 --> 24:18:52,160
with immutable so i'm not gonna do that
28375
24:18:57,512 --> 24:19:01,512
now so that's the parent exception we
28376
24:18:59,360 --> 24:19:03,440
should try not to throw that exception
28377
24:19:01,512 --> 24:19:06,232
as it is we have to throw subclass
28378
24:19:03,440 --> 24:19:07,680
subclasses of that exception okay
28379
24:19:07,679 --> 24:19:11,191
the first exception that we're going to
28380
24:19:09,279 --> 24:19:13,360
define is could not create node
28381
24:19:11,191 --> 24:19:16,159
exception i believe it's called yes and
28382
24:19:13,360 --> 24:19:20,639
we're going to throw this in our
28383
24:19:16,160 --> 24:19:23,360
to be written a class soon uh upon you
28384
24:19:20,639 --> 24:19:25,279
trying to create a new note if firebase
28385
24:19:23,360 --> 24:19:26,960
firestore is not able to actually create
28386
24:19:25,279 --> 24:19:28,160
that note then we're gonna throw this
28387
24:19:28,160 --> 24:19:34,400
so i'm gonna then define that exception
28388
24:19:31,119 --> 24:19:38,231
and you will need to type this then um i
28389
24:19:34,399 --> 24:19:38,231
just brought it from my notes
28390
24:19:38,800 --> 24:19:44,160
now also in this screen where we have
28391
24:19:41,600 --> 24:19:46,160
all the notes displayed for a given user
28392
24:19:44,160 --> 24:19:47,919
we may also not be able to retrieve all
28393
24:19:46,160 --> 24:19:49,832
the notes for that user for instance if
28394
24:19:47,919 --> 24:19:51,831
there is a network connection issue or
28395
24:19:49,831 --> 24:19:52,720
whatever whatever other issues that may
28396
24:19:52,720 --> 24:19:55,600
so we need to have an exception for that
28397
24:19:54,232 --> 24:19:58,400
as well and that exception is called
28398
24:19:55,600 --> 24:20:01,680
could not get all nodes exception okay
28399
24:20:01,679 --> 24:20:07,439
and it's written just like could not get
28400
24:20:03,512 --> 24:20:07,440
all notes exceptions exception
28401
24:20:07,759 --> 24:20:12,479
the next exception that we have to
28402
24:20:09,119 --> 24:20:15,039
define is called a could not update
28403
24:20:12,479 --> 24:20:17,360
nodes so we have create node exception
28404
24:20:15,039 --> 24:20:21,511
get node exception and now we're on the
28405
24:20:23,119 --> 24:20:31,039
create part is a c in crud gets is
28406
24:20:27,191 --> 24:20:32,799
r and now we're looking at you okay
28407
24:20:32,800 --> 24:20:38,160
could not update node exception so
28408
24:20:47,279 --> 24:20:54,551
and create a c in crud okay and so we
28409
24:20:51,679 --> 24:20:55,359
have c r u and then we have to define
28410
24:20:59,039 --> 24:21:02,719
and that's exactly what we're going to
28411
24:21:00,399 --> 24:21:05,679
do now so let's go define could not
28412
24:21:02,720 --> 24:21:07,360
delete node exception all right so
28413
24:21:07,360 --> 24:21:13,831
be in crop okay so now we have
28414
24:21:10,960 --> 24:21:16,552
um three four uh exceptions defined and
28415
24:21:13,831 --> 24:21:21,279
all of those exceptions are uh
28416
24:21:16,551 --> 24:21:21,279
inheriting from cloud storage exception
28417
24:21:25,360 --> 24:21:27,919
now that we've talked about the
28418
24:21:26,399 --> 24:21:30,551
exceptions we also have to talk about
28419
24:21:27,919 --> 24:21:32,959
the actual cloud storage service you see
28420
24:21:30,551 --> 24:21:34,639
we have our quad service at the moment
28421
24:21:32,960 --> 24:21:36,400
which we've been working quite a lot
28422
24:21:34,639 --> 24:21:38,960
with and we're very proud of it actually
28423
24:21:36,399 --> 24:21:42,039
it's a lot of code in my implementation
28424
24:21:38,960 --> 24:21:45,600
at least in here we have about
28425
24:21:45,600 --> 24:21:49,760
i mean it's not all code there there's
28426
24:21:49,759 --> 24:21:53,679
i think there are some annotations like
28427
24:21:51,679 --> 24:21:55,511
immutable etc but there's quite a lot of
28428
24:21:53,679 --> 24:21:56,959
code okay and there's a print statement
28429
24:21:55,512 --> 24:21:58,160
in here which i actually have to remove
28430
24:21:59,512 --> 24:22:03,440
there's quite a lot of code and this is
28431
24:22:01,440 --> 24:22:05,919
working with sql lite but we also need a
28432
24:22:03,440 --> 24:22:07,119
service that works with firebase
28433
24:22:07,119 --> 24:22:12,319
so we need to create that service soon
28434
24:22:10,720 --> 24:22:14,399
so just know that we are going to have
28435
24:22:12,320 --> 24:22:15,920
crud in here which is going to talk with
28436
24:22:15,919 --> 24:22:19,512
but we're moving actually away from it
28437
24:22:23,360 --> 24:22:27,600
so let's go in here and have a look at
28438
24:22:27,600 --> 24:22:31,512
and if you look at our node servicing
28439
24:22:34,000 --> 24:22:38,872
constants in here we have routes and at
28440
24:22:36,639 --> 24:22:42,319
the end of node service we have some
28441
24:22:38,872 --> 24:22:44,479
constants defined right in this class
28442
24:22:44,479 --> 24:22:48,720
and some people may like this but i
28443
24:22:46,720 --> 24:22:51,360
personally prefer to have my constants
28444
24:22:48,720 --> 24:22:52,960
defined in separate files even though
28445
24:22:52,960 --> 24:22:57,920
very related only to this file but just
28446
24:22:56,320 --> 24:23:00,400
making them putting them in separate
28447
24:22:57,919 --> 24:23:01,759
places just makes it easier to look at
28448
24:23:00,399 --> 24:23:04,159
because these constants at the moment
28449
24:23:01,759 --> 24:23:05,759
like hidden at the bottom very bottom of
28450
24:23:05,759 --> 24:23:09,599
so let's go ahead and define our
28451
24:23:07,831 --> 24:23:11,439
constants so let's have a look at the
28452
24:23:09,600 --> 24:23:14,480
path it's going to be in services cloud
28453
24:23:11,440 --> 24:23:17,191
and then cloud storage constants
28454
24:23:14,479 --> 24:23:18,959
on the services now we have cloud
28455
24:23:17,191 --> 24:23:22,551
and under cloud we have cloud storage
28456
24:23:18,960 --> 24:23:24,872
exceptions i think exceptions yep now we
28457
24:23:22,551 --> 24:23:28,159
have to define cloud storage constants
28458
24:23:32,551 --> 24:23:35,119
i'm going to go to my notes
28459
24:23:37,831 --> 24:23:42,319
now if you remember from our note series
28460
24:23:39,679 --> 24:23:44,399
we define like the tables and
28461
24:23:44,399 --> 24:23:50,319
and we defined the tables the columns
28462
24:23:47,759 --> 24:23:52,479
and and even the format of creating new
28463
24:23:50,320 --> 24:23:54,872
tables we don't really need these all we
28464
24:23:52,479 --> 24:23:56,831
need are these two fields as you
28465
24:23:56,831 --> 24:24:03,119
text and also we need a field for user
28466
24:24:03,191 --> 24:24:08,479
so let's define these let's just say
28467
24:24:06,000 --> 24:24:11,191
owner user id so let's go in here and
28468
24:24:11,191 --> 24:24:18,399
increase the size owner user
28469
24:24:15,279 --> 24:24:23,191
id is just user id like this and then
28470
24:24:18,399 --> 24:24:25,439
we're gonna say const text field name
28471
24:24:23,191 --> 24:24:28,080
excuse me so i need you to define these
28472
24:24:25,440 --> 24:24:29,919
two fields as well for your application
28473
24:24:29,919 --> 24:24:34,479
so let's go back to the original font
28474
24:24:36,000 --> 24:24:39,360
now that we've defined that if you
28475
24:24:37,360 --> 24:24:41,360
remember from our note service we had
28476
24:24:39,360 --> 24:24:43,759
these beautiful classes in here a call
28477
24:24:41,360 --> 24:24:45,440
called a database node and a database
28478
24:24:45,440 --> 24:24:48,639
given that we're moving away from
28479
24:24:48,639 --> 24:24:53,440
things and notes inside the sqlite
28480
24:24:51,039 --> 24:24:54,959
database and we're moving to towards a
28481
24:24:56,232 --> 24:24:59,832
we actually don't need a database user
28482
24:24:59,831 --> 24:25:04,639
but we do need some sort of a class that
28483
24:25:02,000 --> 24:25:07,279
represents these documents that we're
28484
24:25:04,639 --> 24:25:09,039
going to create in here okay and
28485
24:25:07,279 --> 24:25:11,512
what we are going to call that is called
28486
24:25:11,512 --> 24:25:15,600
so let's go ahead you see here is called
28487
24:25:13,831 --> 24:25:18,000
a database node so then you kind of know
28488
24:25:15,600 --> 24:25:19,832
that it is a local database maybe you
28489
24:25:18,000 --> 24:25:21,512
could rename this local database node if
28490
24:25:19,831 --> 24:25:23,119
you want to but i'm not going to do that
28491
24:25:21,512 --> 24:25:25,119
simply because we're moving away from
28492
24:25:23,119 --> 24:25:27,039
this so what's the point of refactoring
28493
24:25:27,039 --> 24:25:31,360
i'm going to close node service so then
28494
24:25:28,960 --> 24:25:34,480
let's go ahead and create a new file
28495
24:25:31,360 --> 24:25:36,800
called cloud note dart under services
28496
24:25:41,600 --> 24:25:47,279
in here now what we need to do is
28497
24:25:43,440 --> 24:25:47,279
actually implement cloud nodes
28498
24:25:50,639 --> 24:25:55,039
what a cloud node actually is going to
28499
24:25:53,039 --> 24:25:57,119
contain there are three properties that
28500
24:25:55,039 --> 24:25:59,919
the cloud node has to contain
28501
24:25:59,919 --> 24:26:04,639
actual identifier of that node and i
28502
24:26:02,872 --> 24:26:08,080
apologize i actually have to put myself
28503
24:26:10,639 --> 24:26:14,232
there are three things a cloud node has
28504
24:26:14,232 --> 24:26:19,512
one is the actual like primary key of
28505
24:26:17,119 --> 24:26:22,000
that note in our database every document
28506
24:26:19,512 --> 24:26:24,800
that is generated by firebase
28507
24:26:22,000 --> 24:26:26,399
is going to have a unique id if you're
28508
24:26:24,800 --> 24:26:27,832
coming from like backend development
28509
24:26:26,399 --> 24:26:29,919
then you're already familiar with this
28510
24:26:27,831 --> 24:26:32,159
for instance django has this idea of a
28511
24:26:29,919 --> 24:26:34,000
pk which is primary key you can also
28512
24:26:32,160 --> 24:26:35,680
read it as id so everything that's
28513
24:26:34,000 --> 24:26:37,919
stored in the database has some sort of
28514
24:26:37,919 --> 24:26:41,679
firestore is no different so every
28515
24:26:40,080 --> 24:26:43,831
document that is created inside a
28516
24:26:41,679 --> 24:26:45,439
firestore database is also going to have
28517
24:26:45,440 --> 24:26:50,320
so that's the first property that our
28518
24:26:47,512 --> 24:26:52,960
cloud node is going to contain
28519
24:26:50,320 --> 24:26:55,120
the other two are very familiar because
28520
24:26:52,960 --> 24:26:57,512
you saw here in the documents we're
28521
24:26:55,119 --> 24:26:59,679
gonna have a text field and the other
28522
24:26:57,512 --> 24:27:01,279
one is like the owner user id so there
28523
24:26:59,679 --> 24:27:03,279
are three fields that we have to add to
28524
24:27:01,279 --> 24:27:05,759
our class so let's go ahead and do that
28525
24:27:08,800 --> 24:27:13,600
so class sorry i have a microphone right
28526
24:27:11,831 --> 24:27:16,000
in front of my face like it's blocking
28527
24:27:13,600 --> 24:27:17,600
my keyboard so that's sometimes that's
28528
24:27:16,000 --> 24:27:20,000
why i have to like look like this just
28529
24:27:23,039 --> 24:27:26,959
and inside our cloud node let's define
28530
24:27:25,191 --> 24:27:29,759
these three properties so let's just say
28531
24:27:31,831 --> 24:27:36,551
and i'm going to copy the string here as
28532
24:27:34,320 --> 24:27:39,680
well and say owner user id and then
28533
24:27:36,551 --> 24:27:41,512
we're going to say text okay
28534
24:27:39,679 --> 24:27:43,359
help from visual studio code to
28535
24:27:43,360 --> 24:27:48,479
and um in here then i'm going to say
28536
24:27:45,679 --> 24:27:50,000
this is a constant constructor okay as i
28537
24:27:48,479 --> 24:27:51,679
said you could actually go and define
28538
24:27:50,000 --> 24:27:53,039
this as immutable which i actually
28539
24:27:51,679 --> 24:27:54,719
prefer in this case to be honest with
28540
24:27:53,039 --> 24:27:56,159
you i hadn't i hadn't planned to make
28541
24:27:54,720 --> 24:27:58,080
this immutable but i think actually
28542
24:27:56,160 --> 24:28:01,832
makes sense if it's a cloud node then
28543
24:27:58,080 --> 24:28:01,831
let's just say it's immutable okay
28544
24:28:02,160 --> 24:28:07,440
so that's that's the first part and i
28545
24:28:05,360 --> 24:28:09,279
also know that we need to make these
28546
24:28:07,440 --> 24:28:11,512
required parameters so let's go ahead
28547
24:28:09,279 --> 24:28:13,919
and do that let's just say required
28548
24:28:11,512 --> 24:28:16,400
before all of these parameters okay so
28549
24:28:13,919 --> 24:28:17,599
that they're actually required named
28550
24:28:17,600 --> 24:28:21,760
that are not optional basically
28551
24:28:21,759 --> 24:28:27,759
if you look at how our database nodes
28552
24:28:25,440 --> 24:28:31,119
let's see if we can find database node
28553
24:28:32,320 --> 24:28:36,640
so let's have a look at database node do
28554
24:28:34,232 --> 24:28:38,720
you remember that we had these fields
28555
24:28:36,639 --> 24:28:41,679
but we're pretty much never calling this
28556
24:28:38,720 --> 24:28:43,831
database nodes a constructor we're
28557
24:28:41,679 --> 24:28:44,959
always using this thing database node
28558
24:28:44,960 --> 24:28:49,192
and this is basically the object you
28559
24:28:47,039 --> 24:28:51,919
just see this map is the object that
28560
24:28:49,191 --> 24:28:53,599
we're reading from our sqlite database
28561
24:28:51,919 --> 24:28:56,160
and crew and then we're internally
28562
24:28:53,600 --> 24:28:59,279
creating instances of our database node
28563
24:29:00,000 --> 24:29:05,119
this kind of map is what you will also
28564
24:29:07,360 --> 24:29:11,279
however it's going to be wrapped inside
28565
24:29:09,191 --> 24:29:14,720
something called a query document
28566
24:29:11,279 --> 24:29:17,360
snapshot so it's just a wrapper
28567
24:29:17,360 --> 24:29:22,000
let's go ahead in here and and what
28568
24:29:19,512 --> 24:29:25,040
we're going to say is if you just type
28569
24:29:25,039 --> 24:29:30,639
visual studio code is going to import
28570
24:29:27,440 --> 24:29:33,040
this automatically for you okay so
28571
24:29:30,639 --> 24:29:34,551
then it should be imported in here so
28572
24:29:37,600 --> 24:29:41,920
cloud storage constants so let's go and
28573
24:29:40,160 --> 24:29:46,000
import those as well so let's just say
28574
24:29:41,919 --> 24:29:47,279
package and my nodes and we have uh what
28575
24:29:47,279 --> 24:29:51,831
where is this stored inside services
28576
24:29:56,232 --> 24:30:01,512
you need cloud firestore dart and then
28577
24:30:01,512 --> 24:30:05,919
let's go ahead and create kind of like a
28578
24:30:04,000 --> 24:30:09,119
constructor that we are going to call
28579
24:30:05,919 --> 24:30:11,679
from snapshot and this constructor is
28580
24:30:09,119 --> 24:30:14,551
going to allow firestore to give us a
28581
24:30:11,679 --> 24:30:15,919
snapshot of it and cloud nodes and then
28582
24:30:14,551 --> 24:30:17,831
we're going to create an instance of our
28583
24:30:15,919 --> 24:30:21,599
cloud node from that okay so let's just
28584
24:30:23,679 --> 24:30:29,599
and parameter is going to be query
28585
24:30:26,399 --> 24:30:32,000
document snapshot that has that map that
28586
24:30:32,000 --> 24:30:36,479
like this and we're going to call it
28587
24:30:37,831 --> 24:30:41,439
now you can see that we're getting some
28588
24:30:41,440 --> 24:30:44,639
from dart saying all final variables
28589
24:30:43,440 --> 24:30:46,080
need to be initialized and a function
28590
24:30:44,639 --> 24:30:50,080
body must be provided okay we're going
28591
24:30:46,080 --> 24:30:52,080
to fix it soon so this is this is the um
28592
24:30:50,080 --> 24:30:54,872
signature of your function then in here
28593
24:30:52,080 --> 24:30:56,960
your job now is to make sure that all
28594
24:30:54,872 --> 24:30:59,360
your fields are initialized so let's
28595
24:30:56,960 --> 24:31:01,040
let's just say if i can type again
28596
24:31:01,039 --> 24:31:06,871
it comes from our snapshot id
28597
24:31:04,800 --> 24:31:08,551
that's a property that is stored on this
28598
24:31:06,872 --> 24:31:10,400
at the snapshot level so you can get
28599
24:31:10,399 --> 24:31:14,479
and what we're going to say is that we
28600
24:31:12,320 --> 24:31:17,120
have an owner user id that we also have
28601
24:31:14,479 --> 24:31:18,551
to fill in so that comes from the
28602
24:31:22,872 --> 24:31:26,551
and in there then we have to say the
28603
24:31:26,551 --> 24:31:32,159
user id field name let's see owner user
28604
24:31:32,399 --> 24:31:36,551
under user id let's call this field name
28605
24:31:35,039 --> 24:31:38,479
so sorry about that let's go back to the
28606
24:31:36,551 --> 24:31:40,872
cloud storage constants and fix this to
28607
24:31:38,479 --> 24:31:43,191
say owner user id field name actually
28608
24:31:43,360 --> 24:31:47,680
so we missed that but that's okay it's
28609
24:31:47,679 --> 24:31:50,719
then we're gonna say owner user id field
28610
24:31:52,831 --> 24:31:58,479
id and we're going to get the text which
28611
24:32:05,119 --> 24:32:09,512
okay so what we have is a beautiful
28612
24:32:07,600 --> 24:32:12,080
cloud node immutable class with a
28613
24:32:09,512 --> 24:32:15,360
constant constructor and also we get
28614
24:32:12,080 --> 24:32:17,919
this snapshot um query document snapshot
28615
24:32:15,360 --> 24:32:20,320
from firestore soon and we can create
28616
24:32:17,919 --> 24:32:23,639
instances of our cloud nodes as you'll
28617
24:32:23,831 --> 24:32:29,919
all right now what we need um
28618
24:32:27,039 --> 24:32:32,231
is to create our new cloud firestore
28619
24:32:32,232 --> 24:32:39,040
so this is like the beginning of moving
28620
24:32:35,360 --> 24:32:41,919
away from cloud storage into firestore
28621
24:32:39,039 --> 24:32:43,511
so this is actually very exciting and a
28622
24:32:43,512 --> 24:32:47,440
a little bit intimidating maybe at first
28623
24:32:45,600 --> 24:32:49,512
because well we kind of have to like
28624
24:32:49,512 --> 24:32:54,232
but given that firestore provides you
28625
24:32:52,160 --> 24:32:56,160
with pretty much all the tools that you
28626
24:32:54,232 --> 24:32:57,600
need as you'll soon see the
28627
24:32:56,160 --> 24:33:00,160
implementations of the functions that
28628
24:32:57,600 --> 24:33:02,800
we're gonna that we're gonna do are so
28629
24:33:00,160 --> 24:33:04,720
minimal because the base is there fire
28630
24:33:02,800 --> 24:33:06,639
stores already provided the base we just
28631
24:33:04,720 --> 24:33:09,360
have to hook into it and grab the data
28632
24:33:09,360 --> 24:33:12,639
so let's close all these tabs that we
28633
24:33:12,639 --> 24:33:18,160
excuse me and let's go to this um
28634
24:33:16,232 --> 24:33:20,800
services cloud and create our new
28635
24:33:18,160 --> 24:33:23,919
firebase cloud storage dart file
28636
24:33:28,160 --> 24:33:32,720
i'm actually going to do that as well so
28637
24:33:37,679 --> 24:33:43,359
so let's go ahead and say we have a new
28638
24:33:39,679 --> 24:33:45,191
class called firebase cloud storage
28639
24:33:45,191 --> 24:33:49,512
at the moment it doesn't do really
28640
24:33:46,479 --> 24:33:51,360
anything but what we need to do uh is to
28641
24:33:54,000 --> 24:33:58,960
i'm gonna bring the caption for that and
28642
24:33:56,399 --> 24:34:00,479
if you remember we've already made our
28643
24:34:03,119 --> 24:34:06,479
a singleton so let's go back to our node
28644
24:34:06,479 --> 24:34:10,479
command p on macintosh and visual studio
28645
24:34:10,479 --> 24:34:15,119
windows and linux to bring up this
28646
24:34:12,720 --> 24:34:17,680
search files by name field and i'm just
28647
24:34:17,679 --> 24:34:20,719
if you remember inside note service i
28648
24:34:20,720 --> 24:34:25,831
at the top we had this pattern
28649
24:34:23,440 --> 24:34:26,960
for creating a singleton do you remember
28650
24:34:28,551 --> 24:34:34,319
so we kind of need or sorry this part we
28651
24:34:34,320 --> 24:34:39,040
not kind of actually pretty much exactly
28652
24:34:36,399 --> 24:34:40,551
the same thing except for this part
28653
24:34:39,039 --> 24:34:43,679
because this talks with a stream
28654
24:34:40,551 --> 24:34:45,919
controller so i find this pattern of
28655
24:34:43,679 --> 24:34:48,079
creating singletons in dart still quite
28656
24:34:45,919 --> 24:34:49,919
hacky i think i've mentioned this before
28657
24:34:48,080 --> 24:34:51,680
when we created the node service
28658
24:34:49,919 --> 24:34:53,919
but it's something that we have to do so
28659
24:34:51,679 --> 24:34:56,799
make sure our firebase cloud storage is
28660
24:34:53,919 --> 24:34:58,800
actually a singleton okay so i'm gonna
28661
24:34:56,800 --> 24:35:00,551
bring that code from my notes because i
28662
24:34:58,800 --> 24:35:02,800
don't think it's actually worth writing
28663
24:35:00,551 --> 24:35:03,831
this and it's not worth your time or my
28664
24:35:03,831 --> 24:35:08,319
but this is what you need to create so
28665
24:35:06,479 --> 24:35:10,720
what is happening in here is that we
28666
24:35:10,720 --> 24:35:13,759
then we're going to create a factory
28667
24:35:12,551 --> 24:35:16,080
constructor which is the default
28668
24:35:13,759 --> 24:35:18,159
constructor of our of our class firebase
28669
24:35:18,160 --> 24:35:23,360
and that is going to talk with a static
28670
24:35:20,872 --> 24:35:24,400
final field which in turn calls this
28671
24:35:26,399 --> 24:35:33,511
in um in other languages like swift and
28672
24:35:29,512 --> 24:35:35,512
rust it's it's a lot easier to create a
28673
24:35:33,512 --> 24:35:36,551
singleton but this is a pattern you have
28674
24:35:36,551 --> 24:35:40,959
first create a private constructor then
28675
24:35:38,720 --> 24:35:43,512
create a factory constructor that talks
28676
24:35:40,960 --> 24:35:47,280
with a static final which in turn talks
28677
24:35:43,512 --> 24:35:47,279
with the private constructor okay
28678
24:35:48,399 --> 24:35:54,079
okay after you've taken care of that
28679
24:35:51,360 --> 24:35:56,080
what we need to do is to grab all our
28680
24:35:58,320 --> 24:36:03,760
so let's just go ahead after this
28681
24:36:00,639 --> 24:36:05,759
factory constructor we're gonna expose a
28682
24:36:03,759 --> 24:36:07,191
field as the note as the caption at the
28683
24:36:05,759 --> 24:36:08,231
bottom of the screen in the case call
28684
24:36:08,232 --> 24:36:13,440
so i'm just going to say notes equal to
28685
24:36:11,279 --> 24:36:15,679
we're just going to say firebase and
28686
24:36:13,440 --> 24:36:17,760
firestore and it's going to auto import
28687
24:36:15,679 --> 24:36:19,511
it for me so this is not a strange thing
28688
24:36:19,512 --> 24:36:22,720
and then i'm just going to say our own
28689
24:36:22,720 --> 24:36:27,440
excuse me a collection called notes
28690
24:36:29,039 --> 24:36:35,360
so this is how you actually talk with a
28691
24:36:33,191 --> 24:36:37,440
firestore so you can see that the
28692
24:36:35,360 --> 24:36:39,191
signature of this collection is actually
28693
24:36:37,440 --> 24:36:40,872
returning use something called a
28694
24:36:40,872 --> 24:36:45,440
and you will soon see how we can extract
28695
24:36:43,119 --> 24:36:46,399
our actual notes from this collection
28696
24:36:48,399 --> 24:36:51,919
this isn't gonna work if you haven't
28697
24:36:50,160 --> 24:36:53,192
actually created your notes collection
28698
24:36:51,919 --> 24:36:55,679
so if you haven't done that if you
28699
24:36:53,191 --> 24:36:57,919
forgot to do that please go ahead
28700
24:36:55,679 --> 24:37:00,159
excuse me to go ahead and do that right
28701
24:37:00,160 --> 24:37:05,040
so the first thing we need to do is to
28702
24:37:02,479 --> 24:37:06,399
create a function for creating new nodes
28703
24:37:08,399 --> 24:37:14,959
so let's go ahead um into our project
28704
24:37:12,232 --> 24:37:17,040
and create a function as the
28705
24:37:14,960 --> 24:37:19,760
caption indicates i'm going to say void
28706
24:37:19,759 --> 24:37:25,191
and then we're going to say we need a
28707
24:37:25,191 --> 24:37:30,479
so required string owner user id i
28708
24:37:28,960 --> 24:37:33,280
believe we call it and then it's an
28709
24:37:33,279 --> 24:37:39,831
and then in here since you have
28710
24:37:35,759 --> 24:37:41,831
like a stream or a read write stream uh
28711
24:37:39,831 --> 24:37:43,279
of all your notes and that's what this
28712
24:37:43,279 --> 24:37:47,279
collection reference means it's it's not
28713
24:37:45,512 --> 24:37:48,720
only a stream that you can read from but
28714
24:37:47,279 --> 24:37:50,639
also it's a stream you can write to
28715
24:37:48,720 --> 24:37:51,919
that's why that's why it's not called a
28716
24:37:51,919 --> 24:37:55,831
because the stream is like you try to
28717
24:37:55,831 --> 24:37:59,191
and in here what we're gonna do is going
28718
24:37:59,191 --> 24:38:03,512
and you can see it literally says give
28719
24:38:00,960 --> 24:38:04,960
me a map or a dictionary or however you
28720
24:38:04,960 --> 24:38:09,040
an object that has keys and values
28721
24:38:07,600 --> 24:38:11,192
what do you want me to store in a
28722
24:38:09,039 --> 24:38:13,831
database and that's what nosql kind of
28723
24:38:11,191 --> 24:38:16,639
means in here is document based it's it
28724
24:38:13,831 --> 24:38:18,799
has no real structure of what you're
28725
24:38:16,639 --> 24:38:21,360
adding everything that you add in here
28726
24:38:18,800 --> 24:38:23,680
is going to be packaged into a document
28727
24:38:21,360 --> 24:38:25,191
that is going to be stored in here with
28728
24:38:23,679 --> 24:38:27,119
the fields and the values that you
28729
24:38:27,119 --> 24:38:31,831
so let's go ahead and say we provide you
28730
24:38:31,831 --> 24:38:37,191
with a document in here and the first
28731
24:38:34,000 --> 24:38:38,872
field is owner user id field name and
28732
24:38:37,191 --> 24:38:40,799
that's gonna auto import it from our
28733
24:38:38,872 --> 24:38:42,639
constants from before remember
28734
24:38:40,800 --> 24:38:44,720
and in here the value of this is going
28735
24:38:49,279 --> 24:38:55,360
name is just going to be an empty note
28736
24:38:52,399 --> 24:38:57,119
for now okay and remember this is an
28737
24:38:55,360 --> 24:38:59,119
async asynchronous function which
28738
24:38:57,119 --> 24:39:00,639
returns a future of a document reference
28739
24:38:59,119 --> 24:39:02,551
just like we have our collection
28740
24:39:00,639 --> 24:39:04,551
reference in here but we actually don't
28741
24:39:02,551 --> 24:39:06,479
want its results right now at least so
28742
24:39:04,551 --> 24:39:08,080
we're just gonna wait on it so don't
28743
24:39:06,479 --> 24:39:10,231
forget that weight because without doing
28744
24:39:08,080 --> 24:39:13,040
the weight this function is not actually
28745
24:39:16,320 --> 24:39:22,160
what we need to do now then is to go to
28746
24:39:24,000 --> 24:39:27,440
getting notes by user id so the
28747
24:39:26,232 --> 24:39:30,552
signature is going to be it's going to
28748
24:39:36,399 --> 24:39:41,191
every node we store in our database uh
28749
24:39:39,279 --> 24:39:42,959
is gonna have these two fields an owner
28750
24:39:41,191 --> 24:39:45,599
and a text field so now what we want is
28751
24:39:42,960 --> 24:39:46,872
to grab all the nodes for a specific
28752
24:39:46,872 --> 24:39:50,479
so let's go ahead and do that so it's
28753
24:39:50,479 --> 24:39:56,479
um get notes and it's quite a meaty
28754
24:39:53,512 --> 24:40:00,720
function actually i can see in here
28755
24:39:56,479 --> 24:40:04,399
so let's go ahead and do that right now
28756
24:40:00,720 --> 24:40:05,919
let's say future of iterable um of cloud
28757
24:40:04,399 --> 24:40:07,599
nodes and i think we have to import
28758
24:40:05,919 --> 24:40:09,039
cloud node as well so pressing this
28759
24:40:07,600 --> 24:40:10,232
button imports this for me if you're
28760
24:40:09,039 --> 24:40:11,831
getting some errors it's probably
28761
24:40:10,232 --> 24:40:14,400
because your editor hasn't been able to
28762
24:40:14,399 --> 24:40:19,039
and then we're going to say get notes
28763
24:40:16,000 --> 24:40:21,831
and a required parameter in here
28764
24:40:19,039 --> 24:40:25,831
under user id okay and it's an
28765
24:40:21,831 --> 24:40:25,831
asynchronous function so like that
28766
24:40:26,160 --> 24:40:31,440
so what we're going to do then is to um
28767
24:40:34,160 --> 24:40:38,080
on our notes in here you see we can
28768
24:40:35,919 --> 24:40:41,440
actually retrieve notes from our notes
28769
24:40:38,080 --> 24:40:43,680
collection in here by saying notes where
28770
24:40:41,440 --> 24:40:45,360
so we're gonna do a search inside the
28771
24:40:45,360 --> 24:40:50,479
collection reference and that and you do
28772
24:40:47,831 --> 24:40:52,959
that using the where clause okay
28773
24:40:50,479 --> 24:40:54,720
and these things could actually increa
28774
24:40:52,960 --> 24:40:56,480
like create an exception i believe the
28775
24:40:54,720 --> 24:40:59,512
word clause could actually throw an
28776
24:40:56,479 --> 24:41:01,191
exception whether it was this one
28777
24:40:59,512 --> 24:41:03,040
it's not documenting here but i do
28778
24:41:01,191 --> 24:41:04,231
believe that it could actually create an
28779
24:41:04,232 --> 24:41:08,232
so let's go ahead and catch this so
28780
24:41:06,479 --> 24:41:11,191
let's just say try we're gonna try and
28781
24:41:08,232 --> 24:41:13,279
then should anything happen in here
28782
24:41:14,960 --> 24:41:20,160
not get all nodes exception and this is
28783
24:41:17,831 --> 24:41:22,720
going to auto import that from our
28784
24:41:20,160 --> 24:41:24,320
previous code so i i shouldn't explain
28785
24:41:22,720 --> 24:41:27,600
this over and over again you know
28786
24:41:27,600 --> 24:41:31,360
so now that we have that we have a try
28787
24:41:29,679 --> 24:41:35,831
and catch statement in there so let's
28788
24:41:31,360 --> 24:41:38,720
just say we await on the notes
28789
24:41:35,831 --> 24:41:40,479
and we say uh where clause and the word
28790
24:41:43,119 --> 24:41:47,679
what is the field that you want to do
28791
24:41:45,360 --> 24:41:50,551
your work search on and we want to
28792
24:41:47,679 --> 24:41:52,799
search for all notes that are for this
28793
24:41:50,551 --> 24:41:56,000
owner user id so let's just say owner
28794
24:41:56,000 --> 24:42:00,551
should be equal to you see that's the
28795
24:41:57,831 --> 24:42:03,279
parameter is equal to owner user id like
28796
24:42:03,360 --> 24:42:07,680
waiting on it you see sorry after doing
28797
24:42:05,279 --> 24:42:09,360
a word this gives you a query but then
28798
24:42:07,679 --> 24:42:11,511
you need to actually execute this query
28799
24:42:09,360 --> 24:42:13,440
and you do that using its get function
28800
24:42:14,639 --> 24:42:19,440
let me see gets if i move my mouse over
28801
24:42:17,191 --> 24:42:21,440
you see it returns a future of a query
28802
24:42:19,440 --> 24:42:22,639
snapshot with all the objects that
28803
24:42:21,440 --> 24:42:25,119
firestore could retrieve from the
28804
24:42:31,039 --> 24:42:35,679
that's that's how we work with future so
28805
24:42:33,360 --> 24:42:38,872
event clause of the future allows you to
28806
24:42:35,679 --> 24:42:40,871
return it what it does is it returns the
28807
24:42:38,872 --> 24:42:42,551
value of that future to you and it
28808
24:42:40,872 --> 24:42:44,960
allows you to return either a
28809
24:42:42,551 --> 24:42:46,639
synchronous value inside the then
28810
24:42:44,960 --> 24:42:48,320
function or you could actually return
28811
24:42:48,320 --> 24:42:52,720
those who are familiar with node.js or
28812
24:42:52,720 --> 24:42:57,919
or even swift they're familiar with how
28813
24:42:55,191 --> 24:43:00,399
promises and how futures work so this is
28814
24:42:57,919 --> 24:43:02,639
your chance of actually returning a
28815
24:43:02,639 --> 24:43:07,759
future that is returned to you okay
28816
24:43:06,320 --> 24:43:09,760
so we're going to call this basically
28817
24:43:07,759 --> 24:43:11,191
value at the moment and if i move my
28818
24:43:09,759 --> 24:43:14,000
mouse over this you can see it says a
28819
24:43:17,279 --> 24:43:21,831
so in here what we're going to do is say
28820
24:43:19,679 --> 24:43:24,399
docs which is all the documents that
28821
24:43:24,399 --> 24:43:27,919
and we're going to map all those and you
28822
24:43:29,679 --> 24:43:34,159
if i move my mouse over it so it creates
28823
24:43:31,759 --> 24:43:36,080
document snapshot whereas this one was a
28824
24:43:34,160 --> 24:43:39,040
query snapshot this one is a query
28825
24:43:36,080 --> 24:43:41,191
document snapshot of those fields okay
28826
24:43:39,039 --> 24:43:44,079
so let's go in here and what we're going
28827
24:43:44,080 --> 24:43:49,680
inside this return a cloud node
28828
24:43:47,191 --> 24:43:51,759
and we have these three fields okay we
28829
24:43:49,679 --> 24:43:53,439
have the document id owner user id and
28830
24:43:53,440 --> 24:43:59,360
so it's our chance basically to create
28831
24:43:55,919 --> 24:44:00,959
an instance of our cloud node right now
28832
24:44:00,960 --> 24:44:04,800
columns here so we get the formatting a
28833
24:44:04,800 --> 24:44:08,400
and what we need to do is to get the
28834
24:44:06,232 --> 24:44:10,720
document id and the way to do that is
28835
24:44:08,399 --> 24:44:12,639
this dock has an id in here you can see
28836
24:44:19,039 --> 24:44:23,279
and let's just say owner user id field
28837
24:44:26,320 --> 24:44:32,552
and in here we're gonna say then a doc
28838
24:44:35,440 --> 24:44:40,872
as a string now remember this looks very
28839
24:44:38,639 --> 24:44:43,279
familiar where have we done this before
28840
24:44:40,872 --> 24:44:44,479
yeah we've done this in cloud notes from
28841
24:44:44,479 --> 24:44:48,639
and don't worry we're actually gonna use
28842
24:44:46,872 --> 24:44:50,000
that function as soon we're gonna remove
28843
24:44:48,639 --> 24:44:51,512
this return statement the way it's
28844
24:44:50,000 --> 24:44:53,440
written but let's just write it like
28845
24:44:51,512 --> 24:44:55,919
this right now okay so it's easier to
28846
24:44:59,512 --> 24:45:05,360
i think i think that should be it
28847
24:45:11,512 --> 24:45:15,512
yeah i believe i believe this is going
28848
24:45:13,279 --> 24:45:18,160
to cover it for us right now so not much
28849
24:45:15,512 --> 24:45:19,279
more to explain about this to be honest
28850
24:45:19,279 --> 24:45:23,360
we could also put a comma here
28851
24:45:23,360 --> 24:45:27,440
make the code a little bit more readable
28852
24:45:28,720 --> 24:45:32,720
and what we don't have to be honest with
28853
24:45:30,720 --> 24:45:34,399
you here is this return statement in
28854
24:45:36,479 --> 24:45:40,231
like this so yeah it's an arrow function
28855
24:45:38,720 --> 24:45:42,800
so we don't have to have a special
28856
24:45:40,232 --> 24:45:45,440
return statement but if you don't like
28857
24:45:42,800 --> 24:45:47,192
this kind of an arrow function you can
28858
24:45:45,440 --> 24:45:49,512
grab your code that you've written up to
28859
24:45:50,800 --> 24:45:56,320
curly brackets in here and instead use
28860
24:45:58,720 --> 24:46:03,759
it kind of depends on what you prefer um
28861
24:46:02,232 --> 24:46:05,832
i don't have a preference and i could
28862
24:46:03,759 --> 24:46:07,191
use an error function the way it is so
28863
24:46:05,831 --> 24:46:09,039
i'm just going to leave it like this
28864
24:46:09,039 --> 24:46:12,871
and remember we're at the moment
28865
24:46:10,720 --> 24:46:15,440
awaiting on this but we're not returning
28866
24:46:12,872 --> 24:46:18,320
it so let's just return so this is all
28867
24:46:15,440 --> 24:46:20,872
basically just a fancy way of us
28868
24:46:18,320 --> 24:46:23,192
excuse me communicating with firebase
28869
24:46:20,872 --> 24:46:25,360
firestore and reading documents and
28870
24:46:23,191 --> 24:46:27,360
there's so much to explain that i can't
28871
24:46:25,360 --> 24:46:28,872
go through all of these but i really
28872
24:46:27,360 --> 24:46:30,160
suggest that you play with these
28873
24:46:28,872 --> 24:46:32,960
functions yourself read the
28874
24:46:30,160 --> 24:46:35,279
documentations and see why is it that
28875
24:46:35,279 --> 24:46:39,191
so uh for that you need to read all the
28876
24:46:39,191 --> 24:46:43,831
that come with these functions so you
28877
24:46:46,551 --> 24:46:54,231
so that's getting notes by user id
28878
24:46:59,831 --> 24:47:06,399
us to be able to provide our notes list
28879
24:47:02,800 --> 24:47:08,551
in here with a stream of notes for that
28880
24:47:08,551 --> 24:47:13,919
um as you as you know now in our note
28881
24:47:11,119 --> 24:47:16,551
service the way we have it is we are
28882
24:47:13,919 --> 24:47:18,319
exposing this stream of list of database
28883
24:47:16,551 --> 24:47:19,831
node and that's what we kind of also
28884
24:47:18,320 --> 24:47:21,600
need to do with our firebase cloud
28885
24:47:19,831 --> 24:47:23,191
storage like have a function that our
28886
24:47:23,191 --> 24:47:26,871
excuse me can't subscribe to and read
28887
24:47:25,119 --> 24:47:28,479
all the available nodes for that given
28888
24:47:26,872 --> 24:47:31,192
user so let's go ahead and do that let's
28889
24:47:28,479 --> 24:47:33,679
just call it a stream iterable
28890
24:47:31,191 --> 24:47:35,279
and i have that function signature so i
28891
24:47:33,679 --> 24:47:38,159
don't think i should actually write it
28892
24:47:35,279 --> 24:47:40,872
manually but you may need to write it so
28893
24:47:38,160 --> 24:47:42,800
so that's a function signature okay
28894
24:47:40,872 --> 24:47:44,479
and in here what we're going to say is
28895
24:47:42,800 --> 24:47:47,040
that we're going to go to our notes
28896
24:47:44,479 --> 24:47:49,599
collection in here and get all the
28897
24:47:49,600 --> 24:47:54,480
let's see we have our notes and then we
28898
24:47:54,479 --> 24:47:59,831
and we're gonna map that and
28899
24:47:59,831 --> 24:48:03,439
gonna get our documents inside that
28900
24:48:07,119 --> 24:48:13,512
like that and let's just call it doc
28901
24:48:11,039 --> 24:48:15,831
and in here we're gonna create a cloud
28902
24:48:26,232 --> 24:48:30,639
and then we're going to say the notes
28903
24:48:28,479 --> 24:48:31,919
owner user id i'm gonna actually write
28904
24:48:30,639 --> 24:48:33,191
this and then i'm gonna tell you what
28905
24:48:31,919 --> 24:48:34,800
i'm basically doing because there's
28906
24:48:33,191 --> 24:48:37,119
quite a lot of code in here and like
28907
24:48:34,800 --> 24:48:39,120
pausing to describe every little bit of
28908
24:48:37,119 --> 24:48:41,512
this code could actually make it look
28909
24:48:39,119 --> 24:48:43,512
more complicated than it is so
28910
24:48:41,512 --> 24:48:44,320
and i'm just gonna then say owner user
28911
24:48:47,232 --> 24:48:52,872
semicolon there wait a minute
28912
24:48:50,399 --> 24:48:54,959
this ends there and then a semicolon
28913
24:48:52,872 --> 24:48:57,440
there yeah so let's see what is
28914
24:48:54,960 --> 24:48:59,760
happening in here so this looks actually
28915
24:48:57,440 --> 24:49:02,720
quite intimidating to look at but it's a
28916
24:49:02,720 --> 24:49:08,160
what we're doing in here is if you want
28917
24:49:04,960 --> 24:49:09,760
to grab a stream of data as it is
28918
24:49:08,160 --> 24:49:11,512
evolving you want to be able to
28919
24:49:09,759 --> 24:49:12,871
subscribe to all the changes happening
28920
24:49:11,512 --> 24:49:14,479
to it then you need to use something
28921
24:49:12,872 --> 24:49:17,512
called the snapshots as you can see this
28922
24:49:14,479 --> 24:49:20,399
is a stream of query snapshot whereas
28923
24:49:17,512 --> 24:49:21,279
where is a query itself okay and then
28924
24:49:21,279 --> 24:49:26,800
is a future so it just the get one
28925
24:49:24,639 --> 24:49:29,279
literally takes a snapshot at that point
28926
24:49:26,800 --> 24:49:31,440
in time and returns it to you but if you
28927
24:49:31,440 --> 24:49:35,760
like if you want to be updated about all
28928
24:49:33,440 --> 24:49:38,720
the changes live as they're happening to
28929
24:49:35,759 --> 24:49:40,551
your data in the notes collection then
28930
24:49:38,720 --> 24:49:42,399
you need to subscribe to the snapshots
28931
24:49:40,551 --> 24:49:44,479
that's what we're doing okay so that's
28932
24:49:42,399 --> 24:49:45,831
that first part with snapshots so we're
28933
24:49:44,479 --> 24:49:47,512
literally saying that we want to see all
28934
24:49:45,831 --> 24:49:49,119
the changes as they're happening live
28935
24:49:49,119 --> 24:49:52,720
then it says okay i will give you all
28936
24:49:51,279 --> 24:49:54,800
the changes that are happening live and
28937
24:49:52,720 --> 24:49:57,119
that comes inside the query snapshot
28938
24:49:54,800 --> 24:49:59,279
remember query snapshot from here
28939
24:50:02,551 --> 24:50:07,191
after this point is it's literally what
28940
24:50:04,639 --> 24:50:09,759
we did in the get notes it's saying that
28941
24:50:07,191 --> 24:50:11,599
okay here is a query snapshot and then
28942
24:50:09,759 --> 24:50:13,360
we're saying okay there are documents in
28943
24:50:11,600 --> 24:50:15,360
there and that's exactly what we're
28944
24:50:13,360 --> 24:50:17,512
doing in here there's documents in the
28945
24:50:15,360 --> 24:50:20,479
query snapshot and then we're mapping
28946
24:50:17,512 --> 24:50:22,639
every document to a cloud note all right
28947
24:50:20,479 --> 24:50:24,000
and then we're putting and where clause
28948
24:50:24,000 --> 24:50:29,191
that says we're only interested in notes
28949
24:50:26,399 --> 24:50:31,679
whose u owner user id is the owner user
28950
24:50:29,191 --> 24:50:34,551
id provided in here so without this word
28951
24:50:31,679 --> 24:50:36,479
clause we're literally exposing all the
28952
24:50:36,479 --> 24:50:40,639
to the current user for all users in the
28953
24:50:38,800 --> 24:50:43,360
system so that word clause is very
28954
24:50:43,600 --> 24:50:47,600
so and this work clause as you can as
28955
24:50:45,600 --> 24:50:51,279
you can see it is actually inside
28956
24:50:47,600 --> 24:50:53,512
flutter bin lip core iterable so that's
28957
24:50:51,279 --> 24:50:57,119
nothing that is it's not a function that
28958
24:50:53,512 --> 24:50:57,119
firestore has provided for us okay
28959
24:50:59,360 --> 24:51:02,639
that was a lot of information
28960
24:51:03,831 --> 24:51:08,000
okay let's go ahead and talk about
28961
24:51:05,919 --> 24:51:10,551
updating you notes sorry updating
28962
24:51:08,000 --> 24:51:12,720
existing notes so as we talked about it
28963
24:51:10,551 --> 24:51:14,479
before if you have a note and you tap on
28964
24:51:12,720 --> 24:51:16,080
it the way it works in our application
28965
24:51:14,479 --> 24:51:19,279
right now is i can tap on this node and
28966
24:51:16,080 --> 24:51:22,000
go and change its text like 22 and come
28967
24:51:19,279 --> 24:51:23,919
back out and now it's changed to 22 okay
28968
24:51:22,000 --> 24:51:25,360
so we need to also expose this
28969
24:51:27,191 --> 24:51:32,720
in inside our firebase cloud storage um
28970
24:51:30,551 --> 24:51:34,319
as well so the function is going to be
28971
24:51:32,720 --> 24:51:36,639
update node and it's going to take two
28972
24:51:34,320 --> 24:51:38,000
parameters document id and a text so
28973
24:51:38,000 --> 24:51:41,279
it's going to be a future of void and
28974
24:51:39,512 --> 24:51:42,639
we're going to call it update node
28975
24:51:41,279 --> 24:51:44,720
two parameters in here which are
28976
24:51:42,639 --> 24:51:45,759
required i'm going to say required
28977
24:51:52,720 --> 24:51:56,639
and let's make this an async function
28978
24:51:56,872 --> 24:52:00,232
all right then what we're going to do is
28979
24:51:58,551 --> 24:52:03,279
we're going to put a try and catch in
28980
24:52:00,232 --> 24:52:05,360
here in case we can't update the
28981
24:52:03,279 --> 24:52:08,080
notes and then here we're just going to
28982
24:52:05,360 --> 24:52:10,479
say throw could not update note
28983
24:52:08,080 --> 24:52:12,800
exception okay and you may actually
28984
24:52:10,479 --> 24:52:14,399
ignore this e if you want to as well so
28985
24:52:14,399 --> 24:52:18,551
or you could just yeah i think actually
28986
24:52:16,551 --> 24:52:20,551
we can't do an empty cache catch so you
28987
24:52:18,551 --> 24:52:23,191
may do like this if you prefer but i
28988
24:52:23,191 --> 24:52:26,231
all right and i can see that the
28989
24:52:24,872 --> 24:52:29,279
formatting is a little bit messed up in
28990
24:52:31,679 --> 24:52:36,231
and inside the try statement in here now
28991
24:52:36,232 --> 24:52:42,160
go to our collections again in here and
28992
24:52:39,039 --> 24:52:44,399
let's just say we get a doc you can see
28993
24:52:42,160 --> 24:52:46,080
it says okay what is the path of that
28994
24:52:46,080 --> 24:52:49,360
and we're going to say the document id
28995
24:52:49,360 --> 24:52:55,360
and then let's then go ahead and say
28996
24:52:55,360 --> 24:52:59,039
and it says okay what is the actual
28997
24:52:57,119 --> 24:53:00,720
update and inside the update what we're
28998
24:53:05,360 --> 24:53:09,039
so this may look a little bit crypt now
28999
24:53:07,600 --> 24:53:11,192
also we have to wait on it may look a
29000
24:53:09,039 --> 24:53:12,799
little bit cryptic in the what is doc
29001
24:53:12,800 --> 24:53:16,800
remember inside this function in here it
29002
24:53:14,551 --> 24:53:18,551
says give me the path you see this
29003
24:53:18,551 --> 24:53:23,440
and what we said is that inside the
29004
24:53:20,872 --> 24:53:26,960
notes collection every document is going
29005
24:53:23,440 --> 24:53:28,639
to have an identifier so we actually are
29006
24:53:26,960 --> 24:53:30,800
going to go with the document id which
29007
24:53:28,639 --> 24:53:32,479
we instantiated in here do you remember
29008
24:53:30,800 --> 24:53:36,160
doc id is going to go into our cloud
29009
24:53:32,479 --> 24:53:39,279
node document id so that's the path is
29010
24:53:36,160 --> 24:53:42,000
notes slash that document id so that's
29011
24:53:39,279 --> 24:53:44,232
how far firebase firestore it called and
29012
24:53:42,000 --> 24:53:47,191
basically keeps hold of its paths it's
29013
24:53:44,232 --> 24:53:48,552
the the path is in this case if i create
29014
24:53:47,191 --> 24:53:50,000
a collection you see it says oh the
29015
24:53:48,551 --> 24:53:52,551
collection is being created in the root
29016
24:53:50,000 --> 24:53:54,720
folder and it has a collection id which
29017
24:53:52,551 --> 24:53:56,479
in our case is called notes and we refer
29018
24:53:54,720 --> 24:53:58,872
to it here so we've already constructed
29019
24:53:56,479 --> 24:54:00,479
the notes path and every document inside
29020
24:53:58,872 --> 24:54:03,760
it has its own id so it's going to be
29021
24:54:00,479 --> 24:54:07,679
slash notes slash document id all right
29022
24:54:03,759 --> 24:54:07,679
so i hope and i'd explain it for you
29023
24:54:08,872 --> 24:54:13,600
let's now talk about deleting notes um
29024
24:54:13,600 --> 24:54:17,440
deleting notes actually very easy as
29025
24:54:15,679 --> 24:54:19,119
well so we don't have to do so much with
29026
24:54:19,119 --> 24:54:23,279
it's very similar to updating nodes and
29027
24:54:21,600 --> 24:54:26,160
we're just going to go ahead and use
29028
24:54:23,279 --> 24:54:28,232
document id for deleting notes so
29029
24:54:26,160 --> 24:54:30,400
as the caption indicates create a new
29030
24:54:28,232 --> 24:54:32,160
feature of void in here and we're going
29031
24:54:30,399 --> 24:54:34,231
to say delete node and we're going to go
29032
24:54:32,160 --> 24:54:36,400
ahead and use a required string
29033
24:54:39,279 --> 24:54:44,000
it sync and let's just do a try cache in
29034
24:54:41,512 --> 24:54:45,600
here in case we can't delete the
29035
24:54:44,000 --> 24:54:46,479
document and then we're going to say
29036
24:54:50,479 --> 24:54:54,872
notes exception i believe it's called
29037
24:55:04,872 --> 24:55:08,000
and then we're just going to say delete
29038
24:55:06,479 --> 24:55:10,959
i remember i believe this is actually
29039
24:55:08,000 --> 24:55:12,720
future void so let's just wait on it all
29040
24:55:12,720 --> 24:55:16,872
that's really all you have to do for
29041
24:55:14,160 --> 24:55:18,639
delete so there's no magic in that it's
29042
24:55:16,872 --> 24:55:20,960
very similar to update note except that
29043
24:55:18,639 --> 24:55:23,759
it's not taking care of any like fields
29044
24:55:24,639 --> 24:55:30,399
wow huge huge chapter we've talked a lot
29045
24:55:27,831 --> 24:55:33,191
about now uh about firestore and
29046
24:55:33,191 --> 24:55:37,279
thank you so much for for sticking with
29047
24:55:35,360 --> 24:55:38,960
me throughout this chapter and but if
29048
24:55:37,279 --> 24:55:41,759
you remember i mean if you look at what
29049
24:55:38,960 --> 24:55:43,600
we've done is not so much code it's 68
29050
24:55:41,759 --> 24:55:45,279
lines of code for me it may be less for
29051
24:55:45,279 --> 24:55:49,191
done all these extra commas in here so
29052
24:55:49,191 --> 24:55:54,080
but there's a lot of new concepts so
29053
24:55:54,080 --> 24:55:58,639
i took the liberty of maybe even over
29054
24:55:58,639 --> 24:56:00,800
but i think in the beginning it's very
29055
24:55:59,759 --> 24:56:02,159
important just to understand how
29056
24:56:04,080 --> 24:56:08,479
so great job we've done what we promised
29057
24:56:06,720 --> 24:56:10,399
to do in this chapter we have actually
29058
24:56:08,479 --> 24:56:11,831
tested to make sure that this is this is
29059
24:56:10,399 --> 24:56:14,159
working we're gonna do this in the next
29060
24:56:11,831 --> 24:56:15,919
chapter but as it's tradition we're
29061
24:56:14,160 --> 24:56:18,320
gonna make sure that our work is
29062
24:56:18,320 --> 24:56:23,040
github repository or bitbucket wherever
29063
24:56:20,960 --> 24:56:25,040
you're using your uh or wherever you're
29064
24:56:23,039 --> 24:56:27,439
hosting your git project so let's go
29065
24:56:27,440 --> 24:56:32,320
i want to change the screen um
29066
24:56:30,320 --> 24:56:34,640
layout a little bit i'm going to get rid
29067
24:56:35,831 --> 24:56:40,080
and i'm going to close the screen
29068
24:56:40,080 --> 24:56:46,400
bigger in this uh view and then i'm
29069
24:56:46,399 --> 24:56:50,639
excuse me let's have a look at our
29070
24:56:48,080 --> 24:56:53,360
status there's quite a bit modified in
29071
24:56:50,639 --> 24:56:55,191
here and also we've added a whole new
29072
24:56:53,360 --> 24:56:56,232
folder so i'm just going to say git add
29073
24:56:56,232 --> 24:56:59,919
and let's have a look at our log the
29074
24:56:57,679 --> 24:57:02,000
previous commit was step 18 and let's
29075
24:56:59,919 --> 24:57:04,720
have a look at our tags i can see step
29076
24:57:04,720 --> 24:57:09,360
let's commit now let's say let's say
29077
24:57:14,720 --> 24:57:18,232
and we've committed and let's push those
29078
24:57:18,232 --> 24:57:23,279
let's also tag and say step 19 in here
29079
24:57:23,279 --> 24:57:27,759
and let's push our tags as well
29080
24:57:30,720 --> 24:57:33,680
as again is tradition at the end of
29081
24:57:32,320 --> 24:57:35,680
every chapter we'll talk about what we
29082
24:57:33,679 --> 24:57:37,759
have to discuss in the next chapter
29083
24:57:35,679 --> 24:57:39,359
and as you can see it says uh we need to
29084
24:57:37,759 --> 24:57:40,871
start using our new service instead of
29085
24:57:39,360 --> 24:57:41,759
sqlite database so that's a little bit
29086
24:57:41,759 --> 24:57:48,399
um like a turning point in our whole uh
29087
24:57:46,080 --> 24:57:51,279
course in that we're gonna like toss our
29088
24:57:48,399 --> 24:57:54,159
local storage and go away from that and
29089
24:57:51,279 --> 24:57:55,759
start using our firebase cloud storage
29090
24:57:55,759 --> 24:57:59,831
uh it's it's i think the next chapter is
29091
24:57:58,080 --> 24:58:00,960
actually one of the most exciting
29092
24:58:00,960 --> 24:58:04,720
excuse me in this whole course so
29093
24:58:04,960 --> 24:58:08,639
grab some refreshments if you want to
29094
24:58:08,639 --> 24:58:12,639
hello everyone and welcome to chapter 37
29095
24:58:10,720 --> 24:58:14,872
of this flutter course as you've seen in
29096
24:58:12,639 --> 24:58:17,279
previous chapters we've started to move
29097
24:58:14,872 --> 24:58:19,760
away from our local database storage and
29098
24:58:17,279 --> 24:58:21,759
that was on sqlite and we started going
29099
24:58:19,759 --> 24:58:24,799
more and more towards using firestore
29100
24:58:21,759 --> 24:58:27,511
databases that are hosted by firebase so
29101
24:58:24,800 --> 24:58:29,512
that was a very exciting point in our um
29102
24:58:27,512 --> 24:58:32,000
in this course basically and for me as
29103
24:58:29,512 --> 24:58:33,512
well as the as your instructor to go
29104
24:58:33,512 --> 24:58:39,191
a cloud storage rather than using local
29105
24:58:36,320 --> 24:58:40,552
uh storage and you see we used crud and
29106
24:58:39,191 --> 24:58:41,919
as i mentioned in the previous chapter i
29107
24:58:41,919 --> 24:58:44,639
introduce you to crowd because it's such
29108
24:58:43,440 --> 24:58:46,720
an important part of software
29109
24:58:44,639 --> 24:58:49,679
development that you will sooner or
29110
24:58:46,720 --> 24:58:52,551
later need to use crowd storage locally
29111
24:58:49,679 --> 24:58:53,359
on your computer on your applications so
29112
24:58:55,440 --> 24:58:59,119
on purpose so we first talked about
29113
24:58:57,039 --> 24:59:00,319
local storage and then we move away from
29114
24:59:00,320 --> 24:59:06,080
and simply because uh even firebase in
29115
24:59:03,191 --> 24:59:08,399
itself is some sort of a crud storage
29116
24:59:06,080 --> 24:59:10,960
not some sort of it is crud but it is
29117
24:59:08,399 --> 24:59:12,399
stored on the cloud and concepts of crop
29118
24:59:10,960 --> 24:59:14,400
would have been a lot bit more difficult
29119
24:59:12,399 --> 24:59:16,959
for me to explain to you had me not
29120
24:59:14,399 --> 24:59:18,399
first implemented implemented them
29121
24:59:19,512 --> 24:59:25,600
in the previous chapter we prepared our
29122
24:59:23,119 --> 24:59:27,440
service which we i will bring the code
29123
24:59:25,600 --> 24:59:29,512
here so we can have a look we we
29124
24:59:29,512 --> 24:59:34,160
it's inside our services cloud we call
29125
24:59:36,160 --> 24:59:41,192
we also talked about how we can
29126
24:59:38,479 --> 24:59:42,399
basically start integrating in
29127
24:59:41,191 --> 24:59:43,831
this firebase cloud search in our
29128
24:59:42,399 --> 24:59:44,871
application and this is the chapter that
29129
24:59:46,000 --> 24:59:52,232
make those plans concrete okay
29130
24:59:52,232 --> 24:59:56,160
from the beginning chronologically in
29131
24:59:54,080 --> 24:59:57,919
this course you'll know that what i like
29132
24:59:56,160 --> 24:59:59,360
to do when i try to refactor things is
29133
24:59:57,919 --> 25:00:01,119
to cut things from the source and by
29134
24:59:59,360 --> 25:00:03,919
that i mean now we want to get rid of
29135
25:00:01,119 --> 25:00:06,319
our local crud storage and what i like
29136
25:00:03,919 --> 25:00:08,319
to do as a strategy is to go to
29137
25:00:06,320 --> 25:00:10,320
uh the application and like either
29138
25:00:08,320 --> 25:00:11,832
comment out that entire piece of code
29139
25:00:10,320 --> 25:00:13,600
which has to do with our note service
29140
25:00:14,639 --> 25:00:18,872
either we cut it out completely or we
29141
25:00:18,872 --> 25:00:23,760
so let's go ahead and deal with that now
29142
25:00:21,360 --> 25:00:26,000
so i'm gonna change the screen layout a
29143
25:00:23,759 --> 25:00:28,551
little bit here and i'm then gonna go
29144
25:00:26,000 --> 25:00:30,960
into our notes service so please go to
29145
25:00:28,551 --> 25:00:35,512
the note service and select the entire
29146
25:00:30,960 --> 25:00:37,440
code in here and comment it out
29147
25:00:35,512 --> 25:00:39,440
so that's for note service and then
29148
25:00:37,440 --> 25:00:40,800
we're also going to go to our i'm going
29149
25:00:39,440 --> 25:00:42,800
to save this file and then we're going
29150
25:00:40,800 --> 25:00:46,080
to go to crowd exceptions select the
29151
25:00:42,800 --> 25:00:47,680
entire content and comment it out please
29152
25:00:47,679 --> 25:00:53,119
um another thing that we need to take
29153
25:00:49,360 --> 25:00:56,720
care of is um inside our new firebase
29154
25:00:53,119 --> 25:00:58,639
cloud storage inside uh get's notes what
29155
25:00:56,720 --> 25:01:00,800
we forgot to do is where i actually
29156
25:00:58,639 --> 25:01:02,639
didn't forget to do i intentionally left
29157
25:01:00,800 --> 25:01:05,919
it like this so that we could get the
29158
25:01:02,639 --> 25:01:08,800
basic idea is as you can see here we we
29159
25:01:05,919 --> 25:01:10,232
are inside this uh get notes function as
29160
25:01:08,800 --> 25:01:12,232
the caption indicates at the bottom of
29161
25:01:10,232 --> 25:01:14,400
the screen we are returning an instance
29162
25:01:12,232 --> 25:01:16,639
of our cloud node use using its
29163
25:01:14,399 --> 25:01:18,720
constructor its default constructor
29164
25:01:16,639 --> 25:01:20,960
however if you remember from this cloud
29165
25:01:20,960 --> 25:01:26,400
a convenient constructor that can create
29166
25:01:23,279 --> 25:01:28,479
an instance of our cloud node using a
29167
25:01:26,399 --> 25:01:30,231
document snapshot and that's exactly
29168
25:01:28,479 --> 25:01:32,319
what we're getting in here you see query
29169
25:01:30,232 --> 25:01:34,400
document snapshot but we're not using
29170
25:01:32,320 --> 25:01:36,480
that convenient constructor and that's
29171
25:01:34,399 --> 25:01:38,159
exactly what we're going to fix
29172
25:01:40,080 --> 25:01:46,639
let's go in here where we have the dock
29173
25:01:43,679 --> 25:01:49,119
and i'm going to change this code to go
29174
25:01:46,639 --> 25:01:51,512
from a normal function to an error
29175
25:01:49,119 --> 25:01:54,959
function and then in here i'm gonna say
29176
25:01:51,512 --> 25:01:58,551
we return a cloud node from snapshot of
29177
25:01:54,960 --> 25:02:01,192
that dock okay just like that
29178
25:01:58,551 --> 25:02:03,039
i press s to save this file command
29179
25:02:01,191 --> 25:02:05,191
sorry and you can also remove that comma
29180
25:02:03,039 --> 25:02:06,719
at the end so you either leave it like
29181
25:02:05,191 --> 25:02:08,399
this with a comma at the end so it
29182
25:02:06,720 --> 25:02:10,232
becomes multi-line or you remove the
29183
25:02:08,399 --> 25:02:14,551
comma like i do in here and it just
29184
25:02:19,600 --> 25:02:26,160
now what we need to do um is to
29185
25:02:26,160 --> 25:02:29,279
firebase cloud storage and you can see
29186
25:02:29,279 --> 25:02:33,119
inside the functionality uh sorry inside
29187
25:02:31,440 --> 25:02:35,680
the create new node at the moment we're
29188
25:02:33,119 --> 25:02:37,831
saying void so we're not returning the
29189
25:02:35,679 --> 25:02:40,159
node that we're actually creating and we
29190
25:02:40,160 --> 25:02:44,320
we need to actually create the new new
29191
25:02:42,080 --> 25:02:46,160
node and return it so let's go in here
29192
25:02:44,320 --> 25:02:47,920
and i'm just going to say final
29193
25:02:46,160 --> 25:02:49,440
make the code a little bit bigger
29194
25:02:49,440 --> 25:02:54,160
document is equal to a weight
29195
25:02:54,160 --> 25:02:59,279
and if you look at your document now
29196
25:02:56,960 --> 25:03:00,552
you can see it is a document actually
29197
25:02:59,279 --> 25:03:02,319
you may not be able to see it now you
29198
25:03:00,551 --> 25:03:05,039
can see it probably it is a document
29199
25:03:02,320 --> 25:03:06,872
reference okay so it's a reference as
29200
25:03:05,039 --> 25:03:09,511
its name indicates is not the snapshot
29201
25:03:06,872 --> 25:03:12,872
in order to get the snapshot we need to
29202
25:03:09,512 --> 25:03:16,232
just issue the get function on it
29203
25:03:12,872 --> 25:03:18,000
so let's just say final fetched note is
29204
25:03:20,872 --> 25:03:25,192
and you'll see now fetch note is the
29205
25:03:23,191 --> 25:03:28,159
actual snapshot that will contain the
29206
25:03:25,191 --> 25:03:30,231
data of that document all right
29207
25:03:28,160 --> 25:03:32,080
so in here we will just return a cloud
29208
25:03:35,191 --> 25:03:39,440
let's see cloud node with these
29209
25:03:39,440 --> 25:03:43,040
the document id is going to be the
29210
25:03:44,232 --> 25:03:48,872
the owner user user id is provided to
29211
25:03:46,720 --> 25:03:51,191
our function already and the text is
29212
25:03:48,872 --> 25:03:54,479
just going to be empty like this and
29213
25:03:51,191 --> 25:03:57,191
also make sure that uh in here we don't
29214
25:03:54,479 --> 25:03:59,119
return void except we return a future of
29215
25:04:00,160 --> 25:04:05,639
save your file after that and this
29216
25:04:10,080 --> 25:04:15,040
we need to make sure just i'm just gonna
29217
25:04:11,919 --> 25:04:16,800
close uh all these tabs and as the
29218
25:04:15,039 --> 25:04:19,679
caption indicates we're gonna go to our
29219
25:04:16,800 --> 25:04:20,872
create update notes view and fix that up
29220
25:04:20,872 --> 25:04:26,000
talk with our new service which is the
29221
25:04:23,831 --> 25:04:27,831
cloud firebase storage i think we call
29222
25:04:26,000 --> 25:04:28,960
it firebase cloud storage sorry about
29223
25:04:28,960 --> 25:04:32,872
so i'm going to press command p in
29224
25:04:31,039 --> 25:04:36,399
visual studio code on mac or control p
29225
25:04:32,872 --> 25:04:38,720
and linux and windows and then just say
29226
25:04:42,551 --> 25:04:46,872
and here as the caption indicates we
29227
25:04:44,320 --> 25:04:49,040
need to import three things our
29228
25:04:49,039 --> 25:04:53,039
the cloud storage exceptions dark file
29229
25:04:51,191 --> 25:04:55,440
and the firebase cloud storage dart
29230
25:04:53,039 --> 25:04:56,719
files so those are at the moment inside
29231
25:04:56,720 --> 25:05:01,040
let's see they're inside services cloud
29232
25:05:01,039 --> 25:05:05,039
so i'm going to go in here i'm just
29233
25:05:02,320 --> 25:05:07,760
going to say import package my nodes and
29234
25:05:09,440 --> 25:05:12,800
so we have first cloud node so let's
29235
25:05:12,800 --> 25:05:17,512
i'm going to copy this path and then use
29236
25:05:14,720 --> 25:05:19,040
it again to import cloud storage
29237
25:05:19,039 --> 25:05:25,119
like that and then we also need cloud
29238
25:05:22,160 --> 25:05:26,800
what's it called firebase cloud storage
29239
25:05:26,800 --> 25:05:30,551
you will need to also do these three
29240
25:05:28,639 --> 25:05:32,872
imports if you haven't called your
29241
25:05:30,551 --> 25:05:33,759
application my notes then this package
29242
25:05:32,872 --> 25:05:36,320
is going to be different it's going to
29243
25:05:33,759 --> 25:05:40,720
be packaged the name of your application
29244
25:05:36,320 --> 25:05:40,720
and then services etc etc okay
29245
25:05:44,551 --> 25:05:48,800
the next thing that we have to do as you
29246
25:05:48,800 --> 25:05:53,440
we need to make sure that our create
29247
25:05:51,119 --> 25:05:55,599
update node views state which is right
29248
25:05:53,440 --> 25:05:57,760
here which at the moment contains our
29249
25:05:55,600 --> 25:06:00,000
node service as its node service it has
29250
25:05:57,759 --> 25:06:01,919
to move towards using the firebase cloud
29251
25:06:01,919 --> 25:06:04,872
so i'm going to go to my notes as well
29252
25:06:03,440 --> 25:06:06,720
in here just to make sure i'm giving you
29253
25:06:04,872 --> 25:06:09,279
all the information that you need so
29254
25:06:06,720 --> 25:06:12,479
let's change our node service in here
29255
25:06:09,279 --> 25:06:15,039
and call it now firebase cloud storage
29256
25:06:15,039 --> 25:06:20,871
and in your init function then you need
29257
25:06:17,360 --> 25:06:23,440
to also make sure that we get the
29258
25:06:20,872 --> 25:06:25,680
singleton instance of our firebase cloud
29259
25:06:23,440 --> 25:06:26,960
storage in the init state function all
29260
25:06:26,960 --> 25:06:31,360
also remember this note now is not a
29261
25:06:29,360 --> 25:06:33,680
database note anymore but it's actually
29262
25:06:31,360 --> 25:06:36,080
a cloud node so let's call that cloud
29263
25:06:36,080 --> 25:06:40,160
and and now we can see we have an unused
29264
25:06:38,399 --> 25:06:42,319
import in here so i'm just going to
29265
25:06:40,160 --> 25:06:45,120
remove that since we don't need that
29266
25:06:45,119 --> 25:06:48,231
then the next thing we need to do is as
29267
25:06:46,960 --> 25:06:50,552
a caption in the case we have to go to
29268
25:06:48,232 --> 25:06:52,320
create or get existing node and we have
29269
25:06:50,551 --> 25:06:55,759
to make sure that it works with the
29270
25:06:52,320 --> 25:06:56,960
cloud storage so let's go in here
29271
25:06:58,551 --> 25:07:02,639
we're not going to return a database
29272
25:07:00,232 --> 25:07:04,872
node anymore and we're going to say it
29273
25:07:04,872 --> 25:07:09,600
and here we expect a parameter of type
29274
25:07:07,279 --> 25:07:12,959
cloud nodes optionally that can be
29275
25:07:12,960 --> 25:07:15,440
and here we're not going to be working
29276
25:07:15,440 --> 25:07:18,960
you see here we were working with
29277
25:07:17,119 --> 25:07:20,799
database users before because our
29278
25:07:18,960 --> 25:07:22,800
application was actually creating new
29279
25:07:20,800 --> 25:07:25,440
users in the local database and
29280
25:07:22,800 --> 25:07:27,919
associating notes with those users
29281
25:07:25,440 --> 25:07:30,551
thankfully that now that we're going to
29282
25:07:27,919 --> 25:07:32,720
now that we're using firestore um
29283
25:07:30,551 --> 25:07:34,720
database we don't have to play with
29284
25:07:32,720 --> 25:07:37,512
users anymore because remember users are
29285
25:07:38,232 --> 25:07:42,720
what we can do is just remove that owner
29286
25:07:42,720 --> 25:07:47,440
and now we await on our node service and
29287
25:07:45,191 --> 25:07:49,919
we just say create new node and then we
29288
25:07:47,440 --> 25:07:52,479
need an owner user id and remember this
29289
25:07:49,919 --> 25:07:55,512
owner user id is going to be the actual
29290
25:07:52,479 --> 25:07:58,639
current user's user id so let's just say
29291
25:07:55,512 --> 25:08:00,800
final user id is current user
29292
25:08:00,800 --> 25:08:07,192
and then in here we just say user id
29293
25:08:04,720 --> 25:08:08,800
okay and we're storing that note in here
29294
25:08:07,191 --> 25:08:10,720
as we were doing before so we didn't
29295
25:08:08,800 --> 25:08:13,512
change that code at all and then we're
29296
25:08:10,720 --> 25:08:16,160
seeing new notes also need to be
29297
25:08:17,191 --> 25:08:21,360
so now we need to fix the creation of
29298
25:08:20,000 --> 25:08:22,551
our new node and that's something that
29299
25:08:21,360 --> 25:08:24,639
we've already done so that there
29300
25:08:22,551 --> 25:08:26,159
shouldn't be a separate point really in
29301
25:08:24,639 --> 25:08:29,191
the caption so we've already done that
29302
25:08:26,160 --> 25:08:31,440
nothing to take care of right now
29303
25:08:29,191 --> 25:08:34,159
we also need to take care of now our
29304
25:08:31,440 --> 25:08:35,680
deleting a notes you remember when we go
29305
25:08:35,679 --> 25:08:40,079
node creation view if the node's text
29306
25:08:38,000 --> 25:08:43,512
was empty we actually delete that node
29307
25:08:40,080 --> 25:08:46,232
from the database okay right now and now
29308
25:08:43,512 --> 25:08:48,320
we need to go towards our node service
29309
25:08:46,232 --> 25:08:50,552
and also delete it by using the new
29310
25:08:48,320 --> 25:08:51,832
function which is called delete node
29311
25:08:50,551 --> 25:08:54,551
and let's see what it takes as a
29312
25:08:51,831 --> 25:09:00,159
parameter it takes a document id
29313
25:08:54,551 --> 25:09:02,959
and that's our node's document id okay
29314
25:09:00,160 --> 25:09:04,872
so that's for delete note and
29315
25:09:02,960 --> 25:09:06,872
now we have another function very useful
29316
25:09:04,872 --> 25:09:09,760
function that saves the notes and when
29317
25:09:06,872 --> 25:09:11,040
we go out of the screen if the if that
29318
25:09:11,039 --> 25:09:16,319
if the text for that note is not empty
29319
25:09:13,831 --> 25:09:17,759
very similar to delete node but it kind
29320
25:09:16,320 --> 25:09:19,440
of does the opposite make sure that the
29321
25:09:17,759 --> 25:09:21,439
node is present and also that the text
29322
25:09:19,440 --> 25:09:22,639
to the text editing controller is set if
29323
25:09:22,639 --> 25:09:27,919
not empty meaning that the text is set
29324
25:09:25,191 --> 25:09:30,231
then we update the current node so let's
29325
25:09:27,919 --> 25:09:32,800
then await on it and in here we just say
29326
25:09:35,440 --> 25:09:39,512
the document id is going to be our notes
29327
25:09:39,512 --> 25:09:44,320
and the text in here let's see
29328
25:09:42,399 --> 25:09:46,799
oh we have to just put a comma in there
29329
25:09:46,800 --> 25:09:53,192
so that's updating the save node if text
29330
25:09:55,759 --> 25:09:59,919
now we need to go to our note list view
29331
25:09:58,551 --> 25:10:01,279
and i'm going to do the same thing in my
29332
25:10:07,440 --> 25:10:11,760
do we have any errors in here yes i can
29333
25:10:09,600 --> 25:10:13,360
see i'm getting an error for update note
29334
25:10:11,759 --> 25:10:14,959
and i don't really know what the problem
29335
25:10:14,960 --> 25:10:18,872
document id is required okay and i can
29336
25:10:17,440 --> 25:10:21,512
see that this is something also we need
29337
25:10:18,872 --> 25:10:24,479
to update so let's go to your text
29338
25:10:21,512 --> 25:10:25,512
controller listener function as well and
29339
25:10:25,512 --> 25:10:28,960
the note there as well you can see it's
29340
25:10:28,960 --> 25:10:35,512
now we now have to say update note
29341
25:10:31,919 --> 25:10:37,599
and we have a note document id and then
29342
25:10:35,512 --> 25:10:39,600
we've got text so please ensure that
29343
25:10:37,600 --> 25:10:42,000
you're you've taken care of the text
29344
25:10:39,600 --> 25:10:44,232
controller listeners functionality as
29345
25:10:46,872 --> 25:10:51,192
and i'm just making sure that that's
29346
25:10:48,960 --> 25:10:53,832
exactly what we've done in my notes as
29347
25:10:54,080 --> 25:10:57,831
so that that was one step back um now
29348
25:10:56,399 --> 25:11:00,159
let's go and do what the caption at the
29349
25:10:57,831 --> 25:11:02,000
bottom screen says let's go to our notes
29350
25:11:02,000 --> 25:11:06,232
notes list view and as you can see at
29351
25:11:03,759 --> 25:11:08,799
the moment we're working with a list of
29352
25:11:06,232 --> 25:11:10,400
database notes and we don't want to do
29353
25:11:08,800 --> 25:11:12,720
this anymore we actually want to work
29354
25:11:10,399 --> 25:11:15,360
with iterables because that's like the
29355
25:11:12,720 --> 25:11:16,551
default way that firebase actually works
29356
25:11:15,360 --> 25:11:18,320
it works with eye troubles it doesn't
29357
25:11:18,320 --> 25:11:22,320
and iterables are actually better
29358
25:11:19,679 --> 25:11:25,119
because they're like lazy lists so let's
29359
25:11:22,320 --> 25:11:27,512
change this to an iterable of a cloud
29360
25:11:25,119 --> 25:11:31,119
node like this and also we change our
29361
25:11:27,512 --> 25:11:33,600
node callback to be a cloud node
29362
25:11:31,119 --> 25:11:35,039
if i can spell and also we have to also
29363
25:11:33,600 --> 25:11:36,800
import this so i'm just going to import
29364
25:11:35,039 --> 25:11:38,959
cloud node so that error is going to go
29365
25:11:36,800 --> 25:11:40,872
away i'm going to remove this uh import
29366
25:11:40,872 --> 25:11:45,120
now when you're using eye troubles you
29367
25:11:42,551 --> 25:11:49,119
can't do a subscript like we're doing in
29368
25:11:45,119 --> 25:11:51,279
here you have to say object element at
29369
25:11:49,119 --> 25:11:52,799
and then you have your index and that's
29370
25:11:51,279 --> 25:11:54,800
pretty much what we're doing in here so
29371
25:11:52,800 --> 25:11:57,760
now if you've made this change in your
29372
25:11:54,800 --> 25:11:59,680
node callback you made this change from
29373
25:11:57,759 --> 25:12:01,759
list to iterable and you change this
29374
25:11:59,679 --> 25:12:04,000
from database node to cloud node and
29375
25:12:01,759 --> 25:12:05,919
also change this function from a
29376
25:12:04,000 --> 25:12:08,440
subscript to element add then you
29377
25:12:05,919 --> 25:12:12,399
shouldn't have any errors in your notes
29378
25:12:13,119 --> 25:12:18,080
now we're going to go to a little bit
29379
25:12:15,360 --> 25:12:20,000
juicier changes that we have to make to
29380
25:12:18,080 --> 25:12:22,080
ensure that our application works as
29381
25:12:27,600 --> 25:12:33,760
notes view like here and you'll see now
29382
25:12:33,759 --> 25:12:38,551
actually i can see my notes here uh
29383
25:12:36,479 --> 25:12:39,831
we have to do a few updates in here
29384
25:12:38,551 --> 25:12:41,440
because we're not going to work with
29385
25:12:39,831 --> 25:12:42,551
node service anymore since it doesn't
29386
25:12:42,551 --> 25:12:46,231
but one bigger change that we have to
29387
25:12:46,232 --> 25:12:50,160
is as you can see in the cash offset
29388
25:12:50,160 --> 25:12:54,639
why is that here is the future builder
29389
25:12:54,639 --> 25:12:59,440
you can see the future builders actual
29390
25:12:56,800 --> 25:13:01,680
future is to get or create a user but do
29391
25:13:01,679 --> 25:13:05,759
and the answer is obviously no because
29392
25:13:04,080 --> 25:13:07,680
previously we were using this feature
29393
25:13:05,759 --> 25:13:09,679
builder to create a user in our database
29394
25:13:07,679 --> 25:13:11,119
so that we can associate notes with that
29395
25:13:11,119 --> 25:13:16,231
however since now we're going towards
29396
25:13:16,232 --> 25:13:21,512
cloud storage the users like users in
29397
25:13:19,191 --> 25:13:24,000
your application are managed by firebase
29398
25:13:21,512 --> 25:13:26,479
itself so you don't have to
29399
25:13:24,000 --> 25:13:28,232
create them in that sense when a user
29400
25:13:26,479 --> 25:13:29,831
has logged in and landed on the main
29401
25:13:28,232 --> 25:13:32,320
interface of your application that
29402
25:13:29,831 --> 25:13:34,551
firebase user already exists so you
29403
25:13:32,320 --> 25:13:36,320
don't have to do anything so we need to
29404
25:13:34,551 --> 25:13:39,440
remove this future builder so i'm just
29405
25:13:36,320 --> 25:13:40,872
going to press command dot on it and
29406
25:13:39,440 --> 25:13:43,040
sometimes visual studio code can
29407
25:13:40,872 --> 25:13:45,279
actually help with that to remove it but
29408
25:13:43,039 --> 25:13:46,799
it's not helping at the moment
29409
25:13:45,279 --> 25:13:49,119
so what i'm going to do in this case as
29410
25:13:46,800 --> 25:13:50,872
you can see i want to just grab this
29411
25:13:50,872 --> 25:13:55,360
just grab the stream builder without the
29412
25:13:55,360 --> 25:13:59,512
and find the end of that stream builder
29413
25:13:57,919 --> 25:14:01,360
visual studio code is helping me very
29414
25:13:59,512 --> 25:14:03,512
nicely with this line in here and saying
29415
25:14:01,360 --> 25:14:05,191
this is the end of stream builder so i'm
29416
25:14:05,191 --> 25:14:09,919
gonna do that and cut it okay so now
29417
25:14:08,232 --> 25:14:12,080
what you should be ending up with is
29418
25:14:09,919 --> 25:14:14,080
your future builder like that looks like
29419
25:14:12,080 --> 25:14:17,119
this and then i'm gonna basically kill
29420
25:14:14,080 --> 25:14:20,160
that future builder like this okay so
29421
25:14:17,119 --> 25:14:22,159
then paste your stream builder
29422
25:14:20,160 --> 25:14:24,552
in the place that your future builder
29423
25:14:27,279 --> 25:14:31,512
of your scaffold should just be the
29424
25:14:29,440 --> 25:14:36,440
stream builder okay so basically we just
29425
25:14:31,512 --> 25:14:36,440
got rid of the future builder all right
29426
25:14:36,872 --> 25:14:41,600
so that was that what we need to do then
29427
25:14:38,872 --> 25:14:44,232
is to make sure also in here that we're
29428
25:14:41,600 --> 25:14:47,192
not using that that we're not exposing a
29429
25:14:44,232 --> 25:14:49,832
user email you see from now on when we
29430
25:14:47,191 --> 25:14:52,319
create and notes read notes et cetera
29431
25:14:49,831 --> 25:14:54,720
we're going to use a user id the user's
29432
25:14:52,320 --> 25:14:58,400
identifier so we're not going to work
29433
25:14:54,720 --> 25:14:59,759
with our um with the email so
29434
25:14:58,399 --> 25:15:01,679
i'm also going to go to my note sorry
29435
25:15:01,679 --> 25:15:05,679
as the caption at the bottom of the
29436
25:15:03,512 --> 25:15:08,639
screen indicates let's go and change
29437
25:15:08,639 --> 25:15:12,551
and we're just gonna go off service
29438
25:15:10,479 --> 25:15:15,360
firebase current user and then we're
29439
25:15:12,551 --> 25:15:18,319
gonna get the id okay so that's our user
29440
25:15:18,320 --> 25:15:23,280
and the rest now is kind of history we
29441
25:15:26,232 --> 25:15:30,400
new node service so let's remove this
29442
25:15:30,399 --> 25:15:35,599
and now let's say this note service it
29443
25:15:33,360 --> 25:15:37,911
is a firebase cloud storage so we're
29444
25:15:35,600 --> 25:15:40,160
going to say firebase cloud storage
29445
25:15:37,911 --> 25:15:42,319
and in here we just add that and
29446
25:15:40,160 --> 25:15:44,080
initialize that we say firebase cloud
29447
25:15:44,080 --> 25:15:48,800
if you remember correctly um it is now a
29448
25:15:47,279 --> 25:15:50,800
singleton so we're not creating new
29449
25:15:48,800 --> 25:15:54,080
instances basically by doing this
29450
25:15:50,800 --> 25:15:54,080
although it looks like we're doing that
29451
25:15:54,232 --> 25:15:58,639
so inside our stream builder now what
29452
25:15:56,800 --> 25:16:00,479
we're gonna do is not gonna say all
29453
25:15:58,639 --> 25:16:01,279
notes anymore like that we're going to
29454
25:16:02,800 --> 25:16:06,639
but we're going to pass the owner user
29455
25:16:04,551 --> 25:16:10,800
id and that owner user id remember we're
29456
25:16:06,639 --> 25:16:14,399
storing it as a getter call user id
29457
25:16:10,800 --> 25:16:16,320
and for all our notes in here remember
29458
25:16:14,399 --> 25:16:18,639
this all notes is going to give us an
29459
25:16:16,320 --> 25:16:20,080
eye trouble if i move my mouse over
29460
25:16:18,639 --> 25:16:22,479
there you can see it's an eye trouble of
29461
25:16:20,080 --> 25:16:24,000
cloud node so it's not a list anymore so
29462
25:16:30,872 --> 25:16:34,232
i can i can see it's complaining that
29463
25:16:32,720 --> 25:16:36,960
cloud node can't be found so i'm going
29464
25:16:34,232 --> 25:16:39,512
to import cloud node like that
29465
25:16:36,960 --> 25:16:41,512
upon deleting in here we also need to
29466
25:16:39,512 --> 25:16:43,440
make sure that we call the new one that
29467
25:16:41,512 --> 25:16:44,512
says delete node and in this case we
29468
25:16:50,399 --> 25:16:55,360
so that is that seems to be working fine
29469
25:16:52,800 --> 25:16:57,832
but what we got here is a subtype of
29470
25:16:55,360 --> 25:17:00,399
type firebase cloud storage node service
29471
25:17:00,399 --> 25:17:04,479
where are we getting that error let's
29472
25:17:04,479 --> 25:17:08,479
in here node 2 and that's okay and
29473
25:17:07,191 --> 25:17:10,231
that's because we probably don't have to
29474
25:17:08,479 --> 25:17:12,159
do a hot restart and doing a hot restart
29475
25:17:10,232 --> 25:17:14,720
could kill my scr cpy and i can see that
29476
25:17:12,160 --> 25:17:17,832
it did that but that's fine too i'm
29477
25:17:22,160 --> 25:17:26,320
do this and i'm gonna run the
29478
25:17:23,679 --> 25:17:28,079
application now from scratch and this is
29479
25:17:26,320 --> 25:17:29,680
simply because i mean this is a state
29480
25:17:28,080 --> 25:17:32,551
management in your application because
29481
25:17:29,679 --> 25:17:35,599
we had a node service from before and we
29482
25:17:32,551 --> 25:17:37,360
do a hot hot reload but hot reload all
29483
25:17:37,360 --> 25:17:40,960
this node service that used to be node
29484
25:17:39,039 --> 25:17:42,479
service is not node service anymore it's
29485
25:17:40,960 --> 25:17:44,552
a firebase cloud storage so what should
29486
25:17:45,759 --> 25:17:49,119
state residue that is kind of like
29487
25:17:47,679 --> 25:17:50,639
staying in your application and you
29488
25:17:49,119 --> 25:17:53,440
can't clean it until you do a hot
29489
25:17:50,639 --> 25:17:55,600
restart and when i did a hot restart i
29490
25:17:55,600 --> 25:17:59,512
so i can't i can't do anything about
29491
25:17:58,000 --> 25:18:01,039
that problem but let's just run the
29492
25:17:59,512 --> 25:18:04,639
application from scratch and just make
29493
25:18:01,039 --> 25:18:06,959
sure everything is working as expected
29494
25:18:04,639 --> 25:18:09,512
all right now i can see that i've logged
29495
25:18:06,960 --> 25:18:11,832
into the application and i have no notes
29496
25:18:11,831 --> 25:18:15,599
let me bring up the caption for the next
29497
25:18:15,600 --> 25:18:19,279
topic to talk about so what we need now
29498
25:18:17,600 --> 25:18:20,960
you can see notes have disappeared and
29499
25:18:19,279 --> 25:18:23,512
this is a good sign because that kind of
29500
25:18:20,960 --> 25:18:26,480
means that we have moved away from our
29501
25:18:23,512 --> 25:18:27,832
crotch storage and now we're not reading
29502
25:18:26,479 --> 25:18:29,759
those notes that were in the crotch
29503
25:18:29,759 --> 25:18:33,679
so let's go and create some notes so i
29504
25:18:32,320 --> 25:18:35,912
want to press the plus button in here
29505
25:18:33,679 --> 25:18:38,000
and i'm just going to say note
29506
25:18:35,911 --> 25:18:39,911
number one so if i press the back button
29507
25:18:38,000 --> 25:18:42,000
in here i can see that node number one
29508
25:18:39,911 --> 25:18:43,599
is appearing here and let's go create
29509
25:18:42,000 --> 25:18:45,279
another one and let's say note number
29510
25:18:45,279 --> 25:18:50,399
great note number one and number two if
29511
25:18:47,679 --> 25:18:52,551
i press this number two and then change
29512
25:18:50,399 --> 25:18:55,119
it to note number three you can see that
29513
25:18:52,551 --> 25:18:56,319
those changes are immediately taking
29514
25:18:56,320 --> 25:19:01,512
so let me log out from this user and
29515
25:18:58,960 --> 25:19:05,360
let's log in with i don't know really
29516
25:19:01,512 --> 25:19:07,279
which user i was logged in with before
29517
25:19:05,360 --> 25:19:09,039
i'll log in with this user i can see
29518
25:19:07,279 --> 25:19:09,831
that user has no notes i'm just going to
29519
25:19:18,232 --> 25:19:23,600
and go out so now if i log out from this
29520
25:19:20,551 --> 25:19:26,872
one.user in here and if i say i want to
29521
25:19:28,399 --> 25:19:31,831
i can see my note one and three are
29522
25:19:30,399 --> 25:19:33,279
displayed here so i can just say note
29523
25:19:33,279 --> 25:19:38,800
and if i log out from this user
29524
25:19:36,720 --> 25:19:41,040
and log in again with vanbot i should be
29525
25:19:44,639 --> 25:19:49,279
great so that seems to be working now
29526
25:19:47,512 --> 25:19:51,600
what we could do i mean if you're just
29527
25:19:49,279 --> 25:19:53,600
like me and you're curious how this data
29528
25:19:51,600 --> 25:19:55,760
is actually stored in firebase we could
29529
25:19:53,600 --> 25:19:58,400
do that so let me open up a window in
29530
25:19:58,399 --> 25:20:06,871
and let's go ahead into our project on
29531
25:20:02,232 --> 25:20:06,872
firebase console and let's go in
29532
25:20:10,232 --> 25:20:14,400
and let's have a look in here as you can
29533
25:20:12,320 --> 25:20:16,800
see there are four documents two
29534
25:20:14,399 --> 25:20:19,599
documents per person per user and you
29535
25:20:16,800 --> 25:20:21,600
can see these two have the same user id
29536
25:20:19,600 --> 25:20:24,720
and that's the that's the van load user
29537
25:20:21,600 --> 25:20:27,279
you can see it it starts with a and c
29538
25:20:24,720 --> 25:20:30,399
and the other two nodes they have
29539
25:20:27,279 --> 25:20:33,119
another user id which is for pixelity av
29540
25:20:30,399 --> 25:20:35,360
remember this a and c user what we can
29541
25:20:33,119 --> 25:20:37,759
do now is actually go in here to the
29542
25:20:35,360 --> 25:20:39,440
authentication section and have a look
29543
25:20:37,759 --> 25:20:41,511
at this vendor user and you can see the
29544
25:20:41,512 --> 25:20:46,400
and the other user actually has erd so
29545
25:20:44,551 --> 25:20:48,159
if we go back to firestore and look at
29546
25:20:48,160 --> 25:20:53,040
notes created by pixelity you can see
29547
25:20:50,639 --> 25:20:55,512
that their user id is erd you can see
29548
25:20:55,512 --> 25:20:59,760
so very well done congratulations in two
29549
25:20:58,160 --> 25:21:03,120
chapters we've been able to go away from
29550
25:20:59,759 --> 25:21:06,479
local uh crud storage to firebase huge
29551
25:21:06,720 --> 25:21:10,720
what we need to do now is i was we as we
29552
25:21:08,960 --> 25:21:13,680
usually do in other chapters is we're
29553
25:21:10,720 --> 25:21:15,512
gonna commit our work and also tag it so
29554
25:21:13,679 --> 25:21:18,000
i'm gonna do some reshuffling on the
29555
25:21:18,000 --> 25:21:23,080
and grab visual studio code here
29556
25:21:23,759 --> 25:21:27,439
make the size a little bit bigger kind
29557
25:21:25,279 --> 25:21:29,512
of ginormous but that's okay
29558
25:21:27,440 --> 25:21:33,600
and let's have a look at our log and we
29559
25:21:29,512 --> 25:21:35,360
can see the last step was step 19.
29560
25:21:33,600 --> 25:21:38,639
let's do a git status and there were a
29561
25:21:35,360 --> 25:21:40,551
lot of files modified nothing new
29562
25:21:38,639 --> 25:21:42,319
so i'm just going to say git add all git
29563
25:21:47,039 --> 25:21:50,959
let's have a look at our logs we have
29564
25:21:48,551 --> 25:21:54,080
step 19 and step 20 now and if you look
29565
25:21:50,960 --> 25:21:56,639
at our tags we have up to step 19
29566
25:21:54,080 --> 25:21:59,512
up to and including step 19. so let's
29567
25:22:04,800 --> 25:22:08,160
as is tradition again at the end of
29568
25:22:06,399 --> 25:22:11,119
every chapter i talk about what we have
29569
25:22:08,160 --> 25:22:13,040
to discuss in the chapter that follows
29570
25:22:13,039 --> 25:22:17,911
we've talked quite a lot about now uh
29571
25:22:16,232 --> 25:22:20,160
allowing the user to store their own
29572
25:22:17,911 --> 25:22:22,000
notes in the application but
29573
25:22:20,160 --> 25:22:24,639
it would be a lot more fun if he allowed
29574
25:22:22,000 --> 25:22:26,800
the user to also share those notes with
29575
25:22:24,639 --> 25:22:28,960
somebody that they know about
29576
25:22:26,800 --> 25:22:31,120
somebody that they know like a friend or
29577
25:22:28,960 --> 25:22:33,600
a family member so that's what we're
29578
25:22:31,119 --> 25:22:35,831
gonna talk about in the next chapter
29579
25:22:33,600 --> 25:22:37,912
sharing notes so i'll see you there
29580
25:22:35,831 --> 25:22:40,080
hello and welcome to chapter 38 of this
29581
25:22:37,911 --> 25:22:42,160
flutter course in previous chapters
29582
25:22:40,080 --> 25:22:44,720
we've been talking quite a bit about how
29583
25:22:44,720 --> 25:22:49,360
firestore database and how we can read
29584
25:22:46,639 --> 25:22:51,440
those notes back and update them
29585
25:22:49,360 --> 25:22:53,039
it'd be really fun also to be able to
29586
25:22:51,440 --> 25:22:54,400
share our notes and that's exactly what
29587
25:22:53,039 --> 25:22:55,599
we're going to take care of in this
29588
25:22:55,600 --> 25:23:00,480
in order to do that we need to use a
29589
25:22:57,759 --> 25:23:03,119
plugin called share plus and share plus
29590
25:23:03,119 --> 25:23:07,831
mentioned now so it is not a package
29591
25:23:05,360 --> 25:23:11,039
where a package extends the existing
29592
25:23:07,831 --> 25:23:13,831
capabilities of flutter into new heights
29593
25:23:11,039 --> 25:23:15,039
a plugin takes a completely new route
29594
25:23:18,000 --> 25:23:23,039
well beyond beyond what flutter
29595
25:23:19,911 --> 25:23:25,679
internally can deliver and a packet a
29596
25:23:23,039 --> 25:23:27,439
plug-in will need to be developed by
29597
25:23:25,679 --> 25:23:28,399
excuse me a developer or a set of
29598
25:23:28,399 --> 25:23:31,360
and it needs to be written specifically
29599
25:23:31,360 --> 25:23:34,960
various platforms that that plugin wants
29600
25:23:33,279 --> 25:23:36,639
to support for instance ios android so a
29601
25:23:34,960 --> 25:23:39,832
developer has to go and write some code
29602
25:23:36,639 --> 25:23:41,600
for ios for android web etc etc in order
29603
25:23:39,831 --> 25:23:42,959
for that plugin to work on those
29604
25:23:42,960 --> 25:23:47,192
now here we're going to use the share
29605
25:23:44,639 --> 25:23:51,039
plus plugin and the share plus plugin is
29606
25:23:47,191 --> 25:23:52,479
developed by the flutter community so
29607
25:23:51,039 --> 25:23:54,399
what we're going to have a look at here
29608
25:23:56,551 --> 25:23:59,831
so i'm gonna do that right now
29609
25:24:00,639 --> 25:24:07,119
excuse me for my throat and in pub dev
29610
25:24:03,512 --> 25:24:08,479
we're gonna search for uh share plus
29611
25:24:07,119 --> 25:24:09,911
after you've done that you'll see that
29612
25:24:08,479 --> 25:24:11,639
you'll end up here and it is by a
29613
25:24:11,639 --> 25:24:14,639
fluttercommunity.dev so you can tap on
29614
25:24:13,512 --> 25:24:17,760
that and you can get some more
29615
25:24:14,639 --> 25:24:19,512
information about the developer here
29616
25:24:17,759 --> 25:24:22,399
and you can see that it supports android
29617
25:24:19,512 --> 25:24:24,800
ios linux mac os web and windows so what
29618
25:24:24,800 --> 25:24:29,760
um so it's a free package that you can
29619
25:24:27,600 --> 25:24:32,232
use in your application and you can see
29620
25:24:29,759 --> 25:24:34,319
that all you need to do is just to let's
29621
25:24:34,320 --> 25:24:39,192
and you see you have to say flutter pop
29622
25:24:39,191 --> 25:24:42,639
and that's exactly what we're gonna do
29623
25:24:40,720 --> 25:24:44,960
now in our application so i'm gonna
29624
25:24:49,039 --> 25:24:53,911
in our terminal and i'm gonna rearrange
29625
25:24:55,119 --> 25:24:59,039
actually perhaps i could do the same
29626
25:24:56,720 --> 25:25:01,440
thing that we've done before so
29627
25:24:59,039 --> 25:25:03,759
let me increase the size of this
29628
25:25:01,440 --> 25:25:05,512
terminal so you see it better
29629
25:25:03,759 --> 25:25:07,191
so let's just do the same thing that was
29630
25:25:05,512 --> 25:25:11,360
mentioned in the documentation so
29631
25:25:07,191 --> 25:25:14,720
flutter pub ad share plus so flutter
29632
25:25:14,960 --> 25:25:18,720
and this share plus since it's it's a
29633
25:25:18,720 --> 25:25:21,440
plugin that you're adding to your
29634
25:25:19,911 --> 25:25:23,119
application it's very important that you
29635
25:25:21,440 --> 25:25:25,279
basically rebuild your application
29636
25:25:23,119 --> 25:25:27,911
because otherwise it won't be available
29637
25:25:25,279 --> 25:25:30,800
all right so what you could do is to do
29638
25:25:27,911 --> 25:25:33,599
a clean and then rebuilds this is
29639
25:25:30,800 --> 25:25:36,400
cleaning is especially important
29640
25:25:33,600 --> 25:25:39,360
for ios because sometimes when you add a
29641
25:25:39,360 --> 25:25:43,831
flutter uses cocoa pods in order to
29642
25:25:43,831 --> 25:25:49,039
dependencies then your build may not
29643
25:25:47,191 --> 25:25:50,799
actually be able to pick up on that new
29644
25:25:49,039 --> 25:25:53,279
dependency so it is important to do a
29645
25:25:50,800 --> 25:25:56,160
clean but for android it's usually not a
29646
25:25:56,160 --> 25:26:00,480
excuse me i'm just gonna uh rebuild the
29647
25:25:58,551 --> 25:26:02,959
application and see if everything is
29648
25:26:00,479 --> 25:26:04,639
working as expected so i'm gonna stop
29649
25:26:04,639 --> 25:26:09,679
and i'm just gonna make sure that
29650
25:26:06,960 --> 25:26:11,912
flutter select device is using my
29651
25:26:09,679 --> 25:26:15,039
android telephone and then i'm gonna go
29652
25:26:17,759 --> 25:26:22,000
and it's it says we have some errors so
29653
25:26:19,911 --> 25:26:24,232
let's see if we can fix those errors in
29654
25:26:24,399 --> 25:26:28,159
okay share plus plugin as you can as i
29655
25:26:26,320 --> 25:26:30,720
can see we already have the problem now
29656
25:26:28,160 --> 25:26:33,192
in our application so maybe that's why
29657
25:26:30,720 --> 25:26:34,399
you have to do a clean so let's go ahead
29658
25:26:33,191 --> 25:26:35,440
i'm going to go to terminal and i'm
29659
25:26:40,000 --> 25:26:42,800
that's going to clean the xcode
29660
25:26:41,360 --> 25:26:44,232
workspace and hopefully it's going to
29661
25:26:42,800 --> 25:26:48,160
clean the android as well so i'm just
29662
25:26:44,232 --> 25:26:48,160
going to say flutter clean android
29663
25:26:49,512 --> 25:26:52,000
do you mean any of these did i not write
29664
25:26:55,440 --> 25:27:01,911
oh it's doing the same thing okay
29665
25:27:06,399 --> 25:27:11,119
so that's gonna rebuild all our
29666
25:27:11,279 --> 25:27:16,720
so there we go now that those errors
29667
25:27:13,191 --> 25:27:19,279
have disappeared okay so you may have to
29668
25:27:16,720 --> 25:27:21,831
have flutter clean and i was trying to
29669
25:27:19,279 --> 25:27:24,551
get away without using that but i was
29670
25:27:24,551 --> 25:27:27,679
so in main dart i'm just going to say
29671
25:27:26,232 --> 25:27:29,680
run without debugging and that's just
29672
25:27:27,679 --> 25:27:31,279
going to take its time and go to
29673
25:27:31,279 --> 25:27:35,119
and i'm just going to bring scr cpy to
29674
25:27:33,279 --> 25:27:37,039
the screen as well soon i'll just make
29675
25:27:35,119 --> 25:27:37,911
sure that i have wi-fi access on this
29676
25:27:37,911 --> 25:27:42,232
because i play quite a lot with wi-fi
29677
25:27:40,160 --> 25:27:44,080
and hotspots on this android phone so it
29678
25:27:42,232 --> 25:27:46,800
could be that sometimes i don't actually
29679
25:27:47,759 --> 25:27:54,080
okay so that seems to be running and
29680
25:27:50,479 --> 25:27:55,360
here is uh that android phone and i can
29681
25:27:54,080 --> 25:27:58,400
see that the flutter application is
29682
25:27:55,360 --> 25:28:01,039
trying to run great able to run this and
29683
25:28:01,039 --> 25:28:05,679
so we've done that we've done the clean
29684
25:28:02,872 --> 25:28:06,960
and rebuild so that's great
29685
25:28:06,960 --> 25:28:12,480
the first thing that we're going to take
29686
25:28:08,479 --> 25:28:15,512
care of is to disallow sharing mt notes
29687
25:28:12,479 --> 25:28:17,831
you see if if you're on a note screen
29688
25:28:15,512 --> 25:28:19,360
and you haven't even for instance
29689
25:28:17,831 --> 25:28:20,720
written anything in your note you
29690
25:28:19,360 --> 25:28:22,320
shouldn't be able to share that note
29691
25:28:20,720 --> 25:28:25,119
with anybody because well it's just
29692
25:28:22,320 --> 25:28:26,320
empty text in there so let's go ahead
29693
25:28:25,119 --> 25:28:29,911
and we need to take care of that
29694
25:28:26,320 --> 25:28:31,912
scenario by having a dialogue
29695
25:28:29,911 --> 25:28:34,479
and we're going to create this dialogue
29696
25:28:34,479 --> 25:28:37,911
excuse me again i've been talking quite
29697
25:28:36,000 --> 25:28:40,720
a lot today and that's why my throat is
29698
25:28:40,720 --> 25:28:44,232
so let's go to lib utilities under
29699
25:28:42,960 --> 25:28:46,960
dialogues we're going to create this
29700
25:28:44,232 --> 25:28:49,120
cannot share empty node dialog okay
29701
25:28:46,960 --> 25:28:52,552
uh let me change the screen layout a
29702
25:28:52,720 --> 25:28:57,191
views we have there and we have
29703
25:28:57,191 --> 25:29:00,159
so let's see what we have constant
29704
25:29:00,160 --> 25:29:05,192
utilities and views but we don't have so
29705
25:29:03,831 --> 25:29:06,871
yeah we have utilities and we have
29706
25:29:05,191 --> 25:29:09,360
dialogue so we have to create a new one
29707
25:29:06,872 --> 25:29:10,800
let's just say new file and i'm going to
29708
25:29:10,800 --> 25:29:16,960
share empty node dialog the dart
29709
25:29:15,191 --> 25:29:19,512
and you will remember from before that
29710
25:29:19,512 --> 25:29:23,440
generic dialogue so what i'm going to do
29711
25:29:26,080 --> 25:29:29,600
so the function signature is going to
29712
25:29:28,000 --> 25:29:31,679
look like this as i'm showing you at the
29713
25:29:29,600 --> 25:29:33,832
bottom of the screen so let's say show
29714
25:29:33,831 --> 25:29:37,679
notes dialogue it's quite a long name
29715
25:29:35,600 --> 25:29:40,320
and then it return it requires a build
29716
25:29:37,679 --> 25:29:42,479
context so build context context like
29717
25:29:42,479 --> 25:29:47,440
okay then what we're going to do in this
29718
25:29:47,440 --> 25:29:50,800
our generic dialog and this is something
29719
25:29:49,360 --> 25:29:53,279
that i'm actually quite proud of that we
29720
25:29:50,800 --> 25:29:55,040
could create and we are using it so many
29721
25:29:53,279 --> 25:29:57,039
times now it's unbelievable so we
29722
25:29:55,039 --> 25:29:59,511
literally have one dialog implementation
29723
25:29:57,039 --> 25:30:01,511
in the entire application and we're just
29724
25:29:59,512 --> 25:30:03,279
reusing it and it's truly generic and
29725
25:30:03,279 --> 25:30:07,679
so let's in here let's say that we
29726
25:30:10,960 --> 25:30:14,480
and it's going to also import that for
29727
25:30:12,479 --> 25:30:16,000
me it's inside utilities dialog generic
29728
25:30:14,479 --> 25:30:17,440
dialog so you may have to import that
29729
25:30:17,440 --> 25:30:22,872
editor doesn't allow you to auto import
29730
25:30:20,232 --> 25:30:25,279
so the context is already there for the
29731
25:30:22,872 --> 25:30:27,120
title we're just going to say sharing
29732
25:30:25,279 --> 25:30:29,119
for the content i'm going to say you
29733
25:30:31,831 --> 25:30:35,759
and it's options builder remember it's a
29734
25:30:33,831 --> 25:30:37,360
function that should return
29735
25:30:37,360 --> 25:30:42,232
a map and in the map we're just gonna
29736
25:30:39,679 --> 25:30:44,319
say it has one button that has literally
29737
25:30:44,320 --> 25:30:49,600
so this is going to make it a
29738
25:30:47,191 --> 25:30:53,512
a dialogue that returns a void or a
29739
25:30:49,600 --> 25:30:53,512
future of void when we call it here
29740
25:30:53,679 --> 25:30:58,799
okay so that file is now created
29741
25:30:57,191 --> 25:31:00,231
now what we're going to do is to go and
29742
25:30:58,800 --> 25:31:02,400
add that button as you can see it says
29743
25:31:00,232 --> 25:31:04,960
in create update note view add an icon
29744
25:31:02,399 --> 25:31:06,871
button to actions of app bar so i'm
29745
25:31:04,960 --> 25:31:08,960
going to go to my notes as well and
29746
25:31:08,960 --> 25:31:13,040
and let's go ahead and just add that
29747
25:31:14,960 --> 25:31:18,320
i can see that we're using a share icon
29748
25:31:16,800 --> 25:31:20,960
so i'm going to decrease the size of
29749
25:31:18,320 --> 25:31:22,160
this of the font is is very big at the
29750
25:31:22,160 --> 25:31:26,960
one more step i i think you can still
29751
25:31:24,720 --> 25:31:29,119
see the way it is i mean i can see in
29752
25:31:26,960 --> 25:31:30,720
the video output video it should be
29753
25:31:29,119 --> 25:31:31,911
visible still even though i've decreased
29754
25:31:31,911 --> 25:31:36,959
so let me go here bring scr cpy i'm
29755
25:31:39,191 --> 25:31:43,911
let's go to create update note view and
29756
25:31:41,600 --> 25:31:45,912
we already have this button at the at
29757
25:31:45,911 --> 25:31:48,399
let's see do we have any buttons at the
29758
25:31:50,720 --> 25:31:55,440
in our app bar so let's go and create
29759
25:31:53,360 --> 25:31:57,360
something called actions in here and you
29760
25:31:55,440 --> 25:31:59,760
can see it's a list of widgets and in
29761
25:31:57,360 --> 25:32:01,360
here we're just going to say icon button
29762
25:31:59,759 --> 25:32:03,831
unpressed we're just going to leave it
29763
25:32:01,360 --> 25:32:06,960
empty and for its icon we're just going
29764
25:32:06,960 --> 25:32:11,280
and we're going to use icons share
29765
25:32:12,320 --> 25:32:15,912
remove this parenthesis from there
29766
25:32:15,911 --> 25:32:21,440
like that okay so now now that we have
29767
25:32:18,479 --> 25:32:23,911
this icon icon button there if i press
29768
25:32:21,440 --> 25:32:25,760
on any of these existing notes then we
29769
25:32:23,911 --> 25:32:27,911
should be able to see a little share
29770
25:32:25,759 --> 25:32:29,831
button up here at the moment it doesn't
29771
25:32:27,911 --> 25:32:32,000
do anything because it's on press is
29772
25:32:29,831 --> 25:32:34,551
empty but we're going to program that
29773
25:32:34,551 --> 25:32:39,039
so let's grab the current text of our
29774
25:32:37,279 --> 25:32:42,160
current node so let's just say that this
29775
25:32:39,039 --> 25:32:44,551
is equal to our text controller's text
29776
25:32:42,160 --> 25:32:45,832
and we're going to say if note
29777
25:32:49,679 --> 25:32:54,551
um actually let's just check for null
29778
25:32:57,360 --> 25:33:03,191
or this text is empty then we're gonna
29779
25:33:00,551 --> 25:33:05,119
display our new dialogue that we just
29780
25:33:03,191 --> 25:33:07,911
implemented so let's just say we await
29781
25:33:07,911 --> 25:33:12,479
what's that function called the show
29782
25:33:12,872 --> 25:33:17,760
we did it inside the cannot share empty
29783
25:33:15,679 --> 25:33:19,911
notes so i'm just going to copy its name
29784
25:33:21,039 --> 25:33:25,599
now i'm going to use visual studio code
29785
25:33:22,551 --> 25:33:28,231
to do the auto importing for me
29786
25:33:25,600 --> 25:33:29,760
so it needs a build context and in here
29787
25:33:28,232 --> 25:33:31,279
i'm just going to pass the context and
29788
25:33:29,759 --> 25:33:33,191
you can see it's complaining that i'm
29789
25:33:31,279 --> 25:33:34,872
using a weight inside an unpressed
29790
25:33:33,191 --> 25:33:37,191
function that isn't async so i'm just
29791
25:33:34,872 --> 25:33:38,872
gonna make this function async okay
29792
25:33:37,191 --> 25:33:40,551
otherwise what we're gonna do is we're
29793
25:33:40,551 --> 25:33:45,759
and share it is coming from share plus
29794
25:33:43,279 --> 25:33:47,440
and it can be auto imported okay so i'm
29795
25:33:45,759 --> 25:33:49,911
gonna just also import that and in here
29796
25:33:47,440 --> 25:33:52,551
i'm just gonna say share that text it's
29797
25:33:49,911 --> 25:33:55,039
really just as simple as that
29798
25:33:52,551 --> 25:33:57,039
so let's go in here and i'm gonna create
29799
25:33:57,039 --> 25:34:00,719
you can see it has no text i'm going to
29800
25:33:58,551 --> 25:34:03,039
press the share button and now we see
29801
25:34:00,720 --> 25:34:04,320
now we're seeing our beautiful little
29802
25:34:03,039 --> 25:34:07,279
dialogue that says you cannot share an
29803
25:34:04,320 --> 25:34:09,040
empty note fantastic and if i go out
29804
25:34:09,039 --> 25:34:13,119
but then if i go to a note that does
29805
25:34:11,440 --> 25:34:14,960
have text for instance van dot's second
29806
25:34:13,119 --> 25:34:16,639
note or vandal's first note in in here
29807
25:34:14,960 --> 25:34:18,872
i'm going to go to van.firstnode and
29808
25:34:16,639 --> 25:34:21,039
then if i press the share button then
29809
25:34:18,872 --> 25:34:24,872
i'm going to be presented with
29810
25:34:21,039 --> 25:34:26,959
in this case android's default share
29811
25:34:24,872 --> 25:34:28,551
sheet or how you want to call it and on
29812
25:34:26,960 --> 25:34:31,832
ios you're going to be presented with
29813
25:34:28,551 --> 25:34:33,512
the default ios sharing activity so
29814
25:34:31,831 --> 25:34:35,279
this is pretty much it so we didn't have
29815
25:34:33,512 --> 25:34:37,600
to do much more than this it's literally
29816
25:34:35,279 --> 25:34:39,191
the call is share.share so you can see
29817
25:34:37,600 --> 25:34:42,160
it's so simple when you drag in a
29818
25:34:39,191 --> 25:34:44,479
plug-in especially a plug-in that is
29819
25:34:42,160 --> 25:34:46,480
from a verified developer especially
29820
25:34:44,479 --> 25:34:50,000
from flutter community or flutter team
29821
25:34:50,000 --> 25:34:54,080
all right perfect so that was for
29822
25:34:51,759 --> 25:34:56,231
sharing there's not much more to sharing
29823
25:34:54,080 --> 25:34:58,400
than that and we don't have to drag on
29824
25:34:58,399 --> 25:35:03,599
so let's go ahead as this tradition
29825
25:35:00,000 --> 25:35:06,399
we're gonna go and uh commit our work so
29826
25:35:03,600 --> 25:35:09,440
i'm gonna do some shuffling around here
29827
25:35:06,399 --> 25:35:11,360
gonna get rid of scrcpy increase the
29828
25:35:12,399 --> 25:35:17,119
and the font so you see better
29829
25:35:19,039 --> 25:35:24,719
and i'm gonna have a look at our git's
29830
25:35:21,679 --> 25:35:27,679
log the previous chapter we committed at
29831
25:35:24,720 --> 25:35:30,720
step 20 and we also tagged as a step 20.
29832
25:35:27,679 --> 25:35:33,911
let's just do step 21 in this case
29833
25:35:30,720 --> 25:35:36,160
so get status we have quite a lot of new
29834
25:35:33,911 --> 25:35:39,279
stuff so if i say get status in here you
29835
25:35:36,160 --> 25:35:41,600
can see a new file in here as well
29836
25:35:46,960 --> 25:35:51,600
and i'm gonna go and tag it and say step
29837
25:35:51,600 --> 25:35:56,552
and then we push our tags as well okay
29838
25:35:54,720 --> 25:35:58,160
perfect so that's it so if you say git
29839
25:35:56,551 --> 25:36:00,800
status right now we shouldn't have any
29840
25:36:03,512 --> 25:36:07,440
what we're going to do in the next
29841
25:36:05,191 --> 25:36:10,720
chapter is very very exciting we're
29842
25:36:07,440 --> 25:36:12,551
going to delve into a block and
29843
25:36:12,551 --> 25:36:16,800
flutter developer from before you'll
29844
25:36:14,160 --> 25:36:18,080
know what block is maybe or maybe you've
29845
25:36:16,800 --> 25:36:19,680
heard of it and you want to learn about
29846
25:36:18,080 --> 25:36:21,680
it so that next chapter is perfect for
29847
25:36:19,679 --> 25:36:23,359
you if you're not a flutter developer
29848
25:36:21,679 --> 25:36:27,191
from before you may not know what block
29849
25:36:23,360 --> 25:36:29,191
is and i'll explain it more however
29850
25:36:27,191 --> 25:36:30,551
i'll just at the end of the chapter i'm
29851
25:36:29,191 --> 25:36:32,159
not going to go into the details of the
29852
25:36:30,551 --> 25:36:35,679
next chapter but what we have to talk
29853
25:36:32,160 --> 25:36:38,232
about is how at the moment our ui which
29854
25:36:35,679 --> 25:36:41,119
is our different views are actually
29855
25:36:38,232 --> 25:36:43,120
working directly with our services so we
29856
25:36:41,119 --> 25:36:45,440
have some services that for instance can
29857
25:36:45,440 --> 25:36:49,760
in the firestore database and we also
29858
25:36:47,759 --> 25:36:52,000
have some services that are like
29859
25:36:49,759 --> 25:36:53,599
for our authentication the uis upon
29860
25:36:52,000 --> 25:36:55,831
pressing the login button we're going to
29861
25:36:53,600 --> 25:36:57,600
the off service and the off service is
29862
25:36:55,831 --> 25:36:58,639
coming back with results directly to our
29863
25:36:58,639 --> 25:37:02,232
this is working it's fine however
29864
25:37:00,720 --> 25:37:03,512
there's better way of doing this and
29865
25:37:03,512 --> 25:37:09,600
separating the logic of our ui
29866
25:37:06,720 --> 25:37:12,639
from our business logic ensuring that
29867
25:37:09,600 --> 25:37:15,192
our ui is doing what is best what it
29868
25:37:12,639 --> 25:37:17,679
knows best and that's drawing things on
29869
25:37:15,191 --> 25:37:19,119
the screen but when it comes to handling
29870
25:37:19,119 --> 25:37:23,039
making api calls and etc the ui
29871
25:37:21,279 --> 25:37:26,160
shouldn't really know much about that
29872
25:37:23,039 --> 25:37:27,911
the ui should just convey its purpose to
29873
25:37:26,160 --> 25:37:29,279
some sort of a layer that we're going to
29874
25:37:27,911 --> 25:37:31,360
create in our application with the block
29875
25:37:29,279 --> 25:37:33,360
library and that that layer will decide
29876
25:37:31,360 --> 25:37:35,360
okay upon this button being pressed i
29877
25:37:33,360 --> 25:37:36,479
actually have to do this business logic
29878
25:37:36,479 --> 25:37:40,159
i'm very excited actually about the next
29879
25:37:40,160 --> 25:37:43,832
grab some refreshments if you want to
29880
25:37:41,911 --> 25:37:46,479
and i'll see you there hello and welcome
29881
25:37:43,831 --> 25:37:48,231
to chapter 39 of this flutter course
29882
25:37:46,479 --> 25:37:49,440
uh in the previous chapter at the end of
29883
25:37:48,232 --> 25:37:51,360
the previous chapter we talked about
29884
25:37:49,440 --> 25:37:52,479
that in this chapter we're going to talk
29885
25:37:55,360 --> 25:37:59,831
this is quite a hot topic for flutter
29886
25:37:59,831 --> 25:38:04,479
a flutter developer and you've just been
29887
25:38:04,479 --> 25:38:07,679
in your application you may have already
29888
25:38:07,679 --> 25:38:13,039
block library and qubits before if
29889
25:38:10,960 --> 25:38:14,160
you're not a flutter developer from
29890
25:38:13,039 --> 25:38:15,911
before which i actually think the
29891
25:38:14,160 --> 25:38:17,120
majority of you taking this course
29892
25:38:15,911 --> 25:38:18,551
probably have not been fluttered
29893
25:38:17,119 --> 25:38:20,720
involvers from before so you may have
29894
25:38:18,551 --> 25:38:23,279
may have not heard about block
29895
25:38:20,720 --> 25:38:25,191
uh before so i'm just going to
29896
25:38:23,279 --> 25:38:27,911
start this chapter by explaining what
29897
25:38:25,191 --> 25:38:29,360
the block library is and why do we need
29898
25:38:29,360 --> 25:38:33,600
you see the way that we've created our
29899
25:38:31,119 --> 25:38:37,039
application at the moment is that we
29900
25:38:33,600 --> 25:38:38,720
have direct calls from our ui code into
29901
25:38:37,039 --> 25:38:40,399
our different services in order to
29902
25:38:41,119 --> 25:38:49,279
the ui is very well aware of the
29903
25:38:44,872 --> 25:38:50,000
business logic so for instance the
29904
25:38:50,000 --> 25:38:53,831
create or get existing nodes function
29905
25:38:52,399 --> 25:38:56,720
that we have when we actually go and
29906
25:38:53,831 --> 25:38:59,039
create a new node that is already a word
29907
25:38:56,720 --> 25:39:01,440
of the fact that well if you end up in
29908
25:38:59,039 --> 25:39:03,831
here i expect a user to be present
29909
25:39:01,440 --> 25:39:05,279
inside the application so a user should
29910
25:39:06,479 --> 25:39:11,911
an example of a ui component being aware
29911
25:39:09,360 --> 25:39:13,911
of the logic the business logic of our
29912
25:39:11,911 --> 25:39:15,679
application so they're very they should
29913
25:39:13,911 --> 25:39:16,800
be very separate from each other
29914
25:39:19,191 --> 25:39:24,959
so what is block block is a um is a
29915
25:39:23,440 --> 25:39:26,872
library that we're going to drag into
29916
25:39:24,960 --> 25:39:29,280
our application soon as you'll also see
29917
25:39:26,872 --> 25:39:32,000
is a third-party library call i believe
29918
25:39:29,279 --> 25:39:33,911
it is created by a company called
29919
25:39:35,831 --> 25:39:39,599
and there are various flutter developers
29920
25:39:38,320 --> 25:39:42,480
and software engineers that are
29921
25:39:39,600 --> 25:39:45,192
constantly working in order to
29922
25:39:42,479 --> 25:39:46,800
improve the quality of the block library
29923
25:39:45,191 --> 25:39:48,871
which is a dependency that will bring
29924
25:39:46,800 --> 25:39:50,800
into our application and using the block
29925
25:39:48,872 --> 25:39:53,279
library i mean internally is using
29926
25:39:50,800 --> 25:39:55,360
streams and streams stream controllers
29927
25:39:53,279 --> 25:39:57,759
and futures the stuff that's already
29928
25:39:55,360 --> 25:39:59,680
built into flutter but it's like going
29929
25:39:57,759 --> 25:40:01,679
to a next level to make things more
29930
25:39:59,679 --> 25:40:04,159
abstract so that our application isn't
29931
25:40:01,679 --> 25:40:07,359
directly dependent on its business logic
29932
25:40:04,160 --> 25:40:09,512
with the ui inter intermixed
29933
25:40:09,831 --> 25:40:14,479
the reason we need the block library is
29934
25:40:11,600 --> 25:40:16,720
just to ensure that our ui is only
29935
25:40:14,479 --> 25:40:19,831
taking care of the presentation
29936
25:40:16,720 --> 25:40:22,320
of the ui and it's leaving the rest of
29937
25:40:19,831 --> 25:40:23,439
the stuff to a business business logic
29938
25:40:27,360 --> 25:40:34,080
so that's why we need block and we're
29939
25:40:30,551 --> 25:40:35,360
gonna use it soon in our application
29940
25:40:35,360 --> 25:40:40,872
so if that is blocked then what is
29941
25:40:37,911 --> 25:40:44,232
flutter block you see block in its in
29942
25:40:40,872 --> 25:40:46,232
its internals is a very simple library
29943
25:40:44,232 --> 25:40:48,800
that works with streams and stream
29944
25:40:46,232 --> 25:40:50,639
controllers so it allows you to for
29945
25:40:48,800 --> 25:40:52,160
instance pass data from here to there
29946
25:40:50,639 --> 25:40:53,759
and have listeners that listen to
29947
25:40:52,160 --> 25:40:55,911
changes that are happening in a stream
29948
25:40:53,759 --> 25:40:58,399
so it's only working with like very low
29949
25:40:58,399 --> 25:41:03,119
however when you come to your ui layer
29950
25:41:01,360 --> 25:41:04,800
as you remember i mentioned that block
29951
25:41:03,119 --> 25:41:06,479
allows you then to separate your
29952
25:41:08,720 --> 25:41:11,759
it's taking care of the business logic
29953
25:41:10,232 --> 25:41:13,760
using streams and stream controllers and
29954
25:41:11,759 --> 25:41:16,479
futures but when it comes to the ui part
29955
25:41:13,759 --> 25:41:18,000
in order to glue this business logic
29956
25:41:18,000 --> 25:41:21,911
it needs to be able to work with flutter
29957
25:41:21,911 --> 25:41:26,160
the part that works with streams and
29958
25:41:23,360 --> 25:41:28,720
stream controllers using dart okay and
29959
25:41:26,160 --> 25:41:30,800
dart asynchronous components but the
29960
25:41:28,720 --> 25:41:32,720
part that it wants to glue that with
29961
25:41:30,800 --> 25:41:34,232
your ui needs to come to the flutter
29962
25:41:34,232 --> 25:41:39,360
and that is that library in itself is
29963
25:41:36,720 --> 25:41:41,279
called flutter block so fl block is
29964
25:41:39,360 --> 25:41:43,512
divided into two separate libraries one
29965
25:41:41,279 --> 25:41:45,911
is block which takes care of the
29966
25:41:43,512 --> 25:41:48,551
business logic etc and the other one is
29967
25:41:45,911 --> 25:41:50,399
called flutter block all right
29968
25:41:48,551 --> 25:41:52,399
but don't worry about it i'll go through
29969
25:41:50,399 --> 25:41:55,831
these with you one step at a time so
29970
25:42:01,191 --> 25:42:04,080
what we're going to do in this chapter
29971
25:42:04,080 --> 25:42:08,160
it literally has nothing to do with our
29972
25:42:06,000 --> 25:42:10,000
application we've been working with the
29973
25:42:08,160 --> 25:42:11,360
notes app and in this chapter we're
29974
25:42:10,000 --> 25:42:12,960
actually going to break our application
29975
25:42:11,360 --> 25:42:14,232
a little bit by just like literally
29976
25:42:14,232 --> 25:42:18,232
the home page of our application with a
29977
25:42:16,080 --> 25:42:20,232
completely new application is nothing
29978
25:42:18,232 --> 25:42:22,720
scary i i promise you the changes we're
29979
25:42:20,232 --> 25:42:26,400
going to make is is probably only going
29980
25:42:22,720 --> 25:42:27,911
to be limited to the main.dark file
29981
25:42:27,911 --> 25:42:32,551
what we're going to do is to create a
29982
25:42:30,232 --> 25:42:34,872
counter application if you if you've
29983
25:42:32,551 --> 25:42:36,720
worked with flutter before and you've
29984
25:42:34,872 --> 25:42:37,512
started thinking about maybe moving over
29985
25:42:37,512 --> 25:42:42,000
block you may have actually gone to the
29986
25:42:40,160 --> 25:42:43,512
block library's documentation page and
29987
25:42:42,000 --> 25:42:44,960
you've seen a counter application in
29988
25:42:43,512 --> 25:42:46,872
there where you have a plus and a minus
29989
25:42:44,960 --> 25:42:48,480
button and you can increase and decrease
29990
25:42:46,872 --> 25:42:50,080
the value that's shown on the screen so
29991
25:42:48,479 --> 25:42:51,831
that's like the basic counter
29992
25:42:51,831 --> 25:42:55,679
but in this example i'm going to show
29993
25:42:53,512 --> 25:42:58,160
you we're going to take that example to
29994
25:42:55,679 --> 25:42:59,511
the next level and use the block library
29995
25:42:58,160 --> 25:43:02,000
and i'm going to introduce all the
29996
25:42:59,512 --> 25:43:04,232
basics of the block library to you in
29997
25:43:02,000 --> 25:43:06,000
this chapter but we're gonna take it to
29998
25:43:04,232 --> 25:43:08,960
the next level and allow the user to
29999
25:43:06,000 --> 25:43:11,600
enter some value on the screen and that
30000
25:43:08,960 --> 25:43:14,639
value will then be able to be
30001
25:43:11,600 --> 25:43:16,639
added or subtracted from the current
30002
25:43:14,639 --> 25:43:18,872
value that the application stores so
30003
25:43:16,639 --> 25:43:20,872
it's kind of like a counter application
30004
25:43:18,872 --> 25:43:22,232
where the user can actually enter the
30005
25:43:20,872 --> 25:43:23,911
value that needs to be added to the
30006
25:43:22,232 --> 25:43:25,680
previous account or it needs to be
30007
25:43:23,911 --> 25:43:28,000
subtracted from the previous account so
30008
25:43:25,679 --> 25:43:29,911
that's the difference between our
30009
25:43:28,000 --> 25:43:31,679
simple counter application and what
30010
25:43:29,911 --> 25:43:34,000
block libraries counter application in
30011
25:43:38,479 --> 25:43:43,360
let me bring up this caption in here and
30012
25:43:41,440 --> 25:43:47,360
we're going to talk a little bit about
30013
25:43:43,360 --> 25:43:50,320
various components of a block
30014
25:43:47,360 --> 25:43:52,551
and i'm fully aware that pretty much
30015
25:43:50,320 --> 25:43:55,512
everything i'm saying in this chapter up
30016
25:43:52,551 --> 25:43:56,399
to where we get to the example is
30017
25:43:56,399 --> 25:44:01,279
very much abstract in that it is
30018
25:43:58,960 --> 25:44:03,192
literally just theory i'm like teaching
30019
25:44:03,191 --> 25:44:08,720
i personally am horrible at theory like
30020
25:44:06,320 --> 25:44:11,600
i didn't excel at school when it came to
30021
25:44:08,720 --> 25:44:15,119
theory so i'm very aware that a lot of
30022
25:44:11,600 --> 25:44:16,872
you may also have the same um situation
30023
25:44:15,119 --> 25:44:18,639
or maybe in the same boat that i am that
30024
25:44:16,872 --> 25:44:20,080
are not good with theory and that's okay
30025
25:44:18,639 --> 25:44:21,440
i'll just explain these fast and then
30026
25:44:20,080 --> 25:44:23,360
we'll go to the implementation so you
30027
25:44:21,440 --> 25:44:25,440
can put that to practice so for those of
30028
25:44:23,360 --> 25:44:26,872
you who are interested in the theory of
30029
25:44:25,440 --> 25:44:29,512
it i'm going to explain different parts
30030
25:44:26,872 --> 25:44:30,400
of the block library to you now
30031
25:44:32,160 --> 25:44:36,480
component of the block library is a
30032
25:44:36,479 --> 25:44:43,599
now block really it is a container just
30033
25:44:40,720 --> 25:44:46,551
imagine a class a class that you add
30034
25:44:43,600 --> 25:44:50,000
events to it and every event that you
30035
25:44:46,551 --> 25:44:53,512
add to it can produce a state so the way
30036
25:44:50,000 --> 25:44:57,039
block works is that it it is a class
30037
25:44:53,512 --> 25:45:00,080
that begins with a state so its output
30038
25:44:57,039 --> 25:45:02,551
is always a state for instance a state
30039
25:45:00,080 --> 25:45:03,360
can be logged in a state could be logged
30040
25:45:04,960 --> 25:45:10,160
error screen so just imagine different
30041
25:45:10,160 --> 25:45:16,480
so that's the input sorry the output the
30042
25:45:13,039 --> 25:45:19,279
input to it are your events so
30043
25:45:16,479 --> 25:45:20,551
in your block that will develop
30044
25:45:20,551 --> 25:45:25,119
inputs that you for instance say log in
30045
25:45:22,960 --> 25:45:27,040
with this username and password
30046
25:45:25,119 --> 25:45:29,512
register with this username or this
30047
25:45:27,039 --> 25:45:31,679
email and password register oh i forgot
30048
25:45:29,512 --> 25:45:33,832
my password and here's my email so these
30049
25:45:33,831 --> 25:45:38,871
produce and give to your block and then
30050
25:45:36,872 --> 25:45:40,639
in turn your block then looks at its own
30051
25:45:38,872 --> 25:45:42,960
internals and say oh what was this state
30052
25:45:40,639 --> 25:45:45,759
before what is the current event then i
30053
25:45:42,960 --> 25:45:50,720
will produce a new state okay so that's
30054
25:45:45,759 --> 25:45:50,720
the internal of the block class
30055
25:45:51,039 --> 25:45:55,360
now when you have a block class when
30056
25:45:55,360 --> 25:45:59,759
subclass from that block class then you
30057
25:45:57,759 --> 25:46:02,159
will actually need to create an instance
30058
25:45:59,759 --> 25:46:04,551
of that block class and you will do that
30059
25:46:02,160 --> 25:46:06,800
using something called a block provider
30060
25:46:04,551 --> 25:46:09,512
so that's as its name indicates it is a
30061
25:46:09,512 --> 25:46:15,680
it creates a block instance for you and
30062
25:46:12,720 --> 25:46:17,191
then it will allow you to do something
30063
25:46:28,872 --> 25:46:37,192
a window in here and i'm just gonna
30064
25:46:37,191 --> 25:46:41,440
you cannot see my screen right now but i
30065
25:46:39,759 --> 25:46:43,599
promise you i will show you soon so
30066
25:46:44,872 --> 25:46:48,551
page for the block library so i'll
30067
25:46:46,872 --> 25:46:50,960
increase the font size so you can see it
30068
25:46:51,119 --> 25:46:56,080
so let's go ahead and you can see it's
30069
25:46:53,360 --> 25:46:57,600
sponsored by very good ventures and
30070
25:46:57,600 --> 25:47:03,680
medo i'm not sure i i may have butchered
30071
25:47:00,639 --> 25:47:05,512
this name right now i apologize for that
30072
25:47:07,119 --> 25:47:12,799
parts of block then you'll see let's see
30073
25:47:09,911 --> 25:47:14,720
if i can find block provider for you
30074
25:47:14,720 --> 25:47:18,551
it could be inside the documentation so
30075
25:47:16,551 --> 25:47:20,159
i'm going to go to get started and then
30076
25:47:18,551 --> 25:47:23,440
i'm going to have a look at block
30077
25:47:20,160 --> 25:47:25,192
package block and let's see provider if
30078
25:47:23,440 --> 25:47:27,119
you can find the provider in here
30079
25:47:29,039 --> 25:47:33,279
uh architecture naming convention
30080
25:47:33,279 --> 25:47:37,831
is there is something uh inside i have a
30081
25:47:36,479 --> 25:47:40,000
little bit of a problem right now
30082
25:47:40,000 --> 25:47:45,360
provider so let's search for it block
30083
25:47:52,160 --> 25:47:54,639
documentation right now to be honest
30084
25:47:53,679 --> 25:47:56,551
with you we don't want to look for a
30085
25:47:54,639 --> 25:47:58,551
blog provider right here but
30086
25:47:56,551 --> 25:48:00,319
as you can see it says it is a flutter
30087
25:47:58,551 --> 25:48:02,720
widget which provides a block to its
30088
25:48:00,320 --> 25:48:05,440
children so this is how you would work
30089
25:48:02,720 --> 25:48:08,000
with a block provider so it creates the
30090
25:48:05,440 --> 25:48:11,119
block instance for you and then it will
30091
25:48:08,000 --> 25:48:13,119
allow you to return a child all right so
30092
25:48:11,119 --> 25:48:15,512
kind of like a builder but not really
30093
25:48:15,679 --> 25:48:20,359
so that's block provider and as i
30094
25:48:17,831 --> 25:48:22,319
mentioned you can always go to the block
30095
25:48:22,320 --> 25:48:28,960
website in order to get more information
30096
25:48:24,551 --> 25:48:28,959
about block and read its documentation
30097
25:48:29,512 --> 25:48:33,512
so the next component you need to know
30098
25:48:36,872 --> 25:48:41,760
what is a block listener as its name
30099
25:48:38,720 --> 25:48:43,911
indicates a block listener simply allows
30100
25:48:43,911 --> 25:48:48,160
a um i'll actually see if we have a
30101
25:48:46,000 --> 25:48:50,080
block listener i can see that we have a
30102
25:48:48,160 --> 25:48:51,120
blog listener in this application that
30103
25:48:50,080 --> 25:48:52,960
we're going to develop so you're going
30104
25:48:51,119 --> 25:48:54,799
to learn about it soon but a block
30105
25:48:52,960 --> 25:48:57,040
listener as its name indicates it listen
30106
25:48:54,800 --> 25:48:58,872
to changes to the states of a block
30107
25:48:57,039 --> 25:49:01,191
that's it so you can do some side
30108
25:48:58,872 --> 25:49:03,120
effects so displaying a new screen for
30109
25:49:01,191 --> 25:49:05,039
instance or displaying an error message
30110
25:49:03,119 --> 25:49:09,080
those are all side effects okay so you
30111
25:49:05,039 --> 25:49:09,079
can do that with block listener
30112
25:49:09,119 --> 25:49:14,231
now let's have a look at what a block
30113
25:49:11,360 --> 25:49:17,440
builder is uses your block state changes
30114
25:49:14,232 --> 25:49:21,120
to provide you with a widget so
30115
25:49:17,440 --> 25:49:23,279
as we have a block provider um sorry
30116
25:49:21,119 --> 25:49:26,080
we talked about block provider before it
30117
25:49:23,279 --> 25:49:27,191
gives you uh the chance basically to
30118
25:49:28,000 --> 25:49:34,960
a child now inside this child you can
30119
25:49:31,759 --> 25:49:36,720
then provide a create a block builder
30120
25:49:34,960 --> 25:49:39,280
that listens for changes inside your
30121
25:49:36,720 --> 25:49:42,232
block then it allows you to build new
30122
25:49:39,279 --> 25:49:44,399
widgets based on those changes so
30123
25:49:42,232 --> 25:49:46,480
it's very much like a future builder or
30124
25:49:44,399 --> 25:49:48,079
like a stream builder i would say and
30125
25:49:46,479 --> 25:49:50,479
we've already used stream builder so you
30126
25:49:48,080 --> 25:49:52,720
should know how they work but again this
30127
25:49:52,720 --> 25:49:58,080
i'm gonna talk more about these as we
30128
25:49:54,479 --> 25:49:59,119
actually build our application okay
30129
25:49:59,119 --> 25:50:04,231
after all this we also have a block
30130
25:50:01,759 --> 25:50:06,231
consumer and what a block consumer is
30131
25:50:04,232 --> 25:50:07,911
that it combine as i've actually written
30132
25:50:06,232 --> 25:50:10,080
here it combines block listener and
30133
25:50:07,911 --> 25:50:12,000
block builder so a block consumer
30134
25:50:10,080 --> 25:50:15,119
listens to changes that happen inside a
30135
25:50:12,000 --> 25:50:16,960
block and then it will allow you to do
30136
25:50:15,119 --> 25:50:18,720
both a side effect and it will also
30137
25:50:16,960 --> 25:50:20,480
allow you to create a widget to display
30138
25:50:18,720 --> 25:50:21,600
to the user based on those changes all
30139
25:50:21,600 --> 25:50:26,480
and again i don't want to go too much
30140
25:50:23,039 --> 25:50:29,039
into details in uh for a theory because
30141
25:50:26,479 --> 25:50:30,872
depending on how you learn new things
30142
25:50:29,039 --> 25:50:33,439
theory may not be your strongest point
30143
25:50:30,872 --> 25:50:36,800
just like it is not for me so it could
30144
25:50:38,000 --> 25:50:43,440
so let's go ahead and start adding our
30145
25:50:41,360 --> 25:50:45,119
dependencies in our project so i'm going
30146
25:50:45,119 --> 25:50:48,639
notes application to the screen
30147
25:50:49,119 --> 25:50:54,871
resize it a little bit so we have place
30148
25:50:54,872 --> 25:50:59,600
and we have scr cpy right here as i can
30149
25:50:57,679 --> 25:51:00,479
see and this is our application
30150
25:51:00,479 --> 25:51:04,639
and the application is running currently
30151
25:51:04,639 --> 25:51:08,720
then what we're going to do is going to
30152
25:51:05,831 --> 25:51:10,720
go ahead and say flutter pop add block
30153
25:51:08,720 --> 25:51:11,831
and then flutter pop add flutter block
30154
25:51:11,831 --> 25:51:17,759
let's go ahead and increase the size in
30155
25:51:14,080 --> 25:51:21,759
here then i'm going to go to terminal
30156
25:51:21,831 --> 25:51:25,039
so that's going to do its work
30157
25:51:26,000 --> 25:51:30,080
and it added one dependency i'm just
30158
25:51:27,831 --> 25:51:32,399
going to say flutter hub at flutter
30159
25:51:35,831 --> 25:51:40,720
and this is a package so it's not really
30160
25:51:38,639 --> 25:51:43,440
a plugin and i don't believe it's a
30161
25:51:40,720 --> 25:51:45,680
plugin i think it's a package so it
30162
25:51:43,440 --> 25:51:47,680
could be sufficient for us just to stop
30163
25:51:45,679 --> 25:51:48,871
our application in here and just say
30164
25:51:50,551 --> 25:51:56,319
that cleans the application that we're
30165
25:52:05,279 --> 25:52:10,080
then we're gonna go to our main dart
30166
25:52:07,039 --> 25:52:11,911
file and just say run run without
30167
25:52:10,080 --> 25:52:13,911
debugging and that's gonna just do the
30168
25:52:11,911 --> 25:52:16,232
greater build if you're running on
30169
25:52:13,911 --> 25:52:21,191
android or it's gonna use xcode build in
30170
25:52:16,232 --> 25:52:21,192
order to build your ios application so
30171
25:52:22,320 --> 25:52:25,600
and i'm just gonna let that do its thing
30172
25:52:28,160 --> 25:52:32,160
okay now the build is done and i can see
30173
25:52:30,551 --> 25:52:34,639
the application running on the screen
30174
25:52:34,639 --> 25:52:38,551
what we need to do as the next step is
30175
25:52:36,639 --> 25:52:40,872
to do something dramatic and that is to
30176
25:52:38,551 --> 25:52:42,800
comment out our home page because we're
30177
25:52:40,872 --> 25:52:45,279
gonna replace our home page with another
30178
25:52:42,800 --> 25:52:47,192
home page which is gonna use block so it
30179
25:52:45,279 --> 25:52:48,872
may sound scary but it's not that scary
30180
25:52:48,872 --> 25:52:53,279
so let's go into your main dart in here
30181
25:52:51,440 --> 25:52:55,832
select home page as it stands right
30182
25:52:53,279 --> 25:52:58,399
there and just comment it out
30183
25:52:55,831 --> 25:53:01,119
and we're going to create a new stateful
30184
25:52:58,399 --> 25:53:05,599
widget again and we call it home page so
30185
25:53:01,119 --> 25:53:08,000
stf and home page the reason this is a
30186
25:53:05,600 --> 25:53:10,639
stateful widget is because we need a
30187
25:53:08,000 --> 25:53:12,399
text editing controller as i mentioned
30188
25:53:10,639 --> 25:53:14,319
how we're going to do this example right
30189
25:53:12,399 --> 25:53:16,720
now to learn block is to create an
30190
25:53:14,320 --> 25:53:19,120
application that gives you a text field
30191
25:53:16,720 --> 25:53:21,759
that you can enter a number into we
30192
25:53:21,759 --> 25:53:26,871
in our block so the block holds on to a
30193
25:53:24,399 --> 25:53:29,191
number and then when you and then we
30194
25:53:26,872 --> 25:53:33,192
will create two events one an increment
30195
25:53:29,191 --> 25:53:34,871
event and a decrement event and
30196
25:53:34,872 --> 25:53:38,872
give the increment event to our block
30197
25:53:36,960 --> 25:53:40,639
then we want to grab the current value
30198
25:53:38,872 --> 25:53:42,639
inside the text field so if we start
30199
25:53:40,639 --> 25:53:45,119
with zero and then i type five in this
30200
25:53:42,639 --> 25:53:47,440
text field and i press increment button
30201
25:53:47,440 --> 25:53:53,600
added to the current state which is 0.
30202
25:53:51,512 --> 25:53:56,400
so the result will be 5. the next time i
30203
25:53:53,600 --> 25:53:58,872
will type 10 then press decrement so
30204
25:53:56,399 --> 25:54:02,319
decrement will be 10 and then it will be
30205
25:53:58,872 --> 25:54:03,760
5 minus 10 so we end up with minus -5
30206
25:54:02,320 --> 25:54:04,552
so that's the ui that we're going to
30207
25:54:04,551 --> 25:54:08,639
and for that we need this home page and
30208
25:54:06,960 --> 25:54:10,639
the reason it's stateful is because we
30209
25:54:08,639 --> 25:54:14,319
need to grab that text from our text
30210
25:54:15,512 --> 25:54:19,600
that's our new home page and if i now
30211
25:54:17,679 --> 25:54:21,911
press command s in here our screen is
30212
25:54:19,600 --> 25:54:23,760
going to be black because well this this
30213
25:54:23,759 --> 25:54:27,759
information no scaffold nothing all
30214
25:54:28,232 --> 25:54:32,872
so and now let's talk about this
30215
25:54:30,639 --> 25:54:35,911
absolute beauty that we're going to call
30216
25:54:35,911 --> 25:54:42,000
as i mentioned every block has two very
30217
25:54:38,320 --> 25:54:44,960
important properties one is its state
30218
25:54:42,000 --> 25:54:47,279
and the other one is an event an event
30219
25:54:44,960 --> 25:54:49,192
goes in the block and state is something
30220
25:54:47,279 --> 25:54:51,831
that comes out the block and so the
30221
25:54:49,191 --> 25:54:54,080
state as its name indicates describes
30222
25:54:56,160 --> 25:55:00,232
if you think about it what we expect
30223
25:55:00,232 --> 25:55:05,440
a simple integer okay so we could either
30224
25:55:02,800 --> 25:55:07,680
say our block's output is integer or we
30225
25:55:05,440 --> 25:55:09,279
could define a state that wraps around
30226
25:55:07,679 --> 25:55:12,319
that integer so that's exactly what
30227
25:55:12,320 --> 25:55:16,160
so let's go ahead and say we have an
30228
25:55:20,320 --> 25:55:24,872
and then here we have a final integer
30229
25:55:22,639 --> 25:55:28,232
called value and then we're gonna create
30230
25:55:24,872 --> 25:55:30,960
an initializer here like that
30231
25:55:30,960 --> 25:55:35,912
you could also mark this as immutable if
30232
25:55:33,360 --> 25:55:37,759
you want to all right so let's do that
30233
25:55:35,911 --> 25:55:39,279
and let me also change the screen layout
30234
25:55:37,759 --> 25:55:42,959
a little bit here so you see the code
30235
25:55:39,279 --> 25:55:45,191
better so that's like the basic state of
30236
25:55:42,960 --> 25:55:48,000
our block okay we're not actually gonna
30237
25:55:45,191 --> 25:55:50,871
use the state as it is we're gonna
30238
25:55:48,000 --> 25:55:54,000
create two sub states for this as you
30239
25:55:55,440 --> 25:55:59,512
since we're going to create a text field
30240
25:55:57,279 --> 25:56:02,232
in the middle kind of like this screen
30241
25:55:59,512 --> 25:56:03,832
and the user is able then to enter
30242
25:56:02,232 --> 25:56:05,760
pretty much any text in this text field
30243
25:56:03,831 --> 25:56:07,831
let's just assume so just normal text
30244
25:56:05,759 --> 25:56:09,911
not even integer so the user just say
30245
25:56:07,831 --> 25:56:11,511
hello world and then presses the plus
30246
25:56:09,911 --> 25:56:15,191
button what should we do in that case
30247
25:56:11,512 --> 25:56:17,600
plus button plot plus thing like adding
30248
25:56:15,191 --> 25:56:20,479
hello world to the previous value of
30249
25:56:17,600 --> 25:56:22,480
five means nothing so we're gonna divide
30250
25:56:20,479 --> 25:56:24,231
our state into a valid state and an
30251
25:56:22,479 --> 25:56:26,959
invalid state and then present this to
30252
25:56:24,232 --> 25:56:30,080
the user in two different ways so let's
30253
25:56:26,960 --> 25:56:32,160
go ahead and create a class called
30254
25:56:30,080 --> 25:56:34,160
as i've mentioned there counter stayed
30255
25:56:34,160 --> 25:56:39,192
so i'm going to actually grab that code
30256
25:56:36,960 --> 25:56:40,720
so we don't have to type it ourselves as
30257
25:56:40,720 --> 25:56:45,119
here we have a counter state valid
30258
25:56:42,639 --> 25:56:47,679
extends our counter state which is this
30259
25:56:45,119 --> 25:56:50,639
one and we have a constant constructor
30260
25:56:47,679 --> 25:56:52,319
that says okay give me a value a valid
30261
25:56:50,639 --> 25:56:55,119
value and then i'm going to call my
30262
25:56:55,119 --> 25:57:02,551
all right so that's a valid state
30263
25:56:58,800 --> 25:57:05,760
now let's then create a an invalid state
30264
25:57:05,759 --> 25:57:08,639
i'm going to bring the correct caption
30265
25:57:10,639 --> 25:57:17,831
let's say counter state invalid number
30266
25:57:17,831 --> 25:57:23,439
in this case we want this state to
30267
25:57:20,232 --> 25:57:25,911
actually include some sort of um
30268
25:57:23,440 --> 25:57:27,440
the value that actually made our state
30269
25:57:25,911 --> 25:57:29,119
invalid so i'm just going to say that
30270
25:57:27,440 --> 25:57:31,680
value is a string and we're going to
30271
25:57:29,119 --> 25:57:33,831
call it invalid value here okay
30272
25:57:31,679 --> 25:57:37,679
and i'm going to say const and let's
30273
25:57:33,831 --> 25:57:40,479
just bring a create an initializer here
30274
25:57:37,679 --> 25:57:42,551
a few required parameters in here and
30275
25:57:42,551 --> 25:57:46,551
like this so in this case we're going to
30276
25:57:44,399 --> 25:57:48,959
create two required parameters one is
30277
25:57:46,551 --> 25:57:50,959
the invalid value that caused the error
30278
25:57:48,960 --> 25:57:53,280
or cause the state of our block to be
30279
25:57:50,960 --> 25:57:56,160
invalid and the other one is going to be
30280
25:57:53,279 --> 25:57:58,399
a required of the required parameter of
30281
25:57:58,399 --> 25:58:02,551
because we may actually need the
30282
25:58:02,551 --> 25:58:06,399
or something or maybe like the ui needs
30283
25:58:04,551 --> 25:58:08,479
to display that to the user so if this
30284
25:58:06,399 --> 25:58:11,279
is the output of our block the state
30285
25:58:08,479 --> 25:58:14,399
remember is the output maybe then the ui
30286
25:58:11,279 --> 25:58:16,800
actually upon me trying to plus hello
30287
25:58:14,399 --> 25:58:18,639
world with five he may want to use this
30288
25:58:16,800 --> 25:58:20,960
previous value to populate that text
30289
25:58:18,639 --> 25:58:22,080
field or populate the ui again and say
30290
25:58:23,039 --> 25:58:27,119
this value that you entered is invalid
30291
25:58:25,279 --> 25:58:28,800
but the previous value was this so i'm
30292
25:58:27,119 --> 25:58:30,231
just going to show that okay so that's
30293
25:58:28,800 --> 25:58:31,440
why we need previous value and here
30294
25:58:30,232 --> 25:58:33,680
we're getting an error because we're not
30295
25:58:33,679 --> 25:58:38,079
let's call super with the previous value
30296
25:58:40,080 --> 25:58:44,800
okay that's our counter state invalid
30297
25:58:44,800 --> 25:58:51,680
our two states that uh come from counter
30298
25:58:48,160 --> 25:58:52,800
states immutable abstract class
30299
25:58:52,800 --> 25:58:56,720
let's go ahead then and create our
30300
25:58:56,720 --> 25:59:00,551
and remember counter event is very
30301
25:58:58,720 --> 25:59:03,040
similar to state so first we actually
30302
25:59:03,039 --> 25:59:06,959
and let's go ahead and define that event
30303
25:59:06,960 --> 25:59:09,832
and you can see it's an abstract class
30304
25:59:08,639 --> 25:59:11,831
called counter event and it just
30305
25:59:09,831 --> 25:59:13,911
contains a value so it just says the
30306
25:59:11,831 --> 25:59:15,911
string that comes from the ui can just
30307
25:59:13,911 --> 25:59:16,639
go directly into the counter oven that's
30308
25:59:16,639 --> 25:59:20,479
and let's make this actually immutable
30309
25:59:22,551 --> 25:59:28,000
and what we're gonna do is to create an
30310
25:59:28,000 --> 25:59:32,320
so let's go and say class increment
30311
25:59:39,440 --> 25:59:43,680
and in here we're just going to say
30312
25:59:43,679 --> 25:59:48,719
constructor for it and we just grab a
30313
25:59:46,160 --> 25:59:51,911
value in here so a string value and it
30314
25:59:48,720 --> 25:59:53,831
should just go to the super that's it
30315
25:59:51,911 --> 25:59:56,800
and what we need to do is just to grab
30316
25:59:53,831 --> 25:59:58,479
this event as well and create a
30317
26:00:00,232 --> 26:00:07,040
let's call this decrement here
30318
26:00:03,831 --> 26:00:09,119
like so and again remember the event is
30319
26:00:07,039 --> 26:00:11,911
something that we need to trigger and
30320
26:00:09,119 --> 26:00:14,080
send to the block from the ui all right
30321
26:00:11,911 --> 26:00:16,000
so we're gonna pack these increment
30322
26:00:14,080 --> 26:00:17,759
event and decrement event with with the
30323
26:00:16,000 --> 26:00:20,000
string that the user has entered in the
30324
26:00:17,759 --> 26:00:22,871
ui and then send it to the block as
30325
26:00:23,360 --> 26:00:28,232
so let's go ahead now and do the main
30326
26:00:25,759 --> 26:00:30,080
part of this application which is our
30327
26:00:28,232 --> 26:00:33,440
block and the way to do that is to
30328
26:00:30,080 --> 26:00:36,000
create a class if i can spell class
30329
26:00:36,000 --> 26:00:40,160
block and you'll see it'll now auto
30330
26:00:38,320 --> 26:00:42,160
import it for me because we hadn't
30331
26:00:42,160 --> 26:00:46,320
and now let's see if block is imported
30332
26:00:44,399 --> 26:00:48,319
somewhere here and that's the package
30333
26:00:46,320 --> 26:00:49,600
block block if your editor doesn't allow
30334
26:00:48,320 --> 26:00:51,440
you to auto import you will have to do
30335
26:00:53,279 --> 26:00:58,232
so the way to create a block is first
30336
26:00:55,360 --> 26:01:00,800
you define the state of that block like
30337
26:00:58,232 --> 26:01:03,360
what type of state does it have sorry
30338
26:01:00,800 --> 26:01:06,400
events first we start with the counter
30339
26:01:03,360 --> 26:01:08,232
event and then the counter state okay so
30340
26:01:06,399 --> 26:01:09,679
if you look at the definition of block
30341
26:01:08,232 --> 26:01:12,080
class itself you can see the two
30342
26:01:09,679 --> 26:01:14,319
parameters are or the two generic types
30343
26:01:14,320 --> 26:01:17,832
so that's here we're saying our events
30344
26:01:15,911 --> 26:01:21,360
are of type counter event and our states
30345
26:01:21,512 --> 26:01:26,080
so that's that then let's go ahead and
30346
26:01:27,759 --> 26:01:34,000
and what it does is it has to call super
30347
26:01:30,720 --> 26:01:36,399
you see and our super actually needs the
30348
26:01:36,399 --> 26:01:41,679
every block has to have an initial state
30349
26:01:39,279 --> 26:01:43,600
and that's when you pass your super okay
30350
26:01:41,679 --> 26:01:45,831
so what we're gonna do is we're going to
30351
26:01:43,600 --> 26:01:50,080
say we start with the value a valid
30352
26:01:45,831 --> 26:01:50,080
value of 0. so we say const
30353
26:01:51,360 --> 26:01:56,479
state valid and we start with 0 just
30354
26:02:01,039 --> 26:02:06,399
let's see what happened there
30355
26:02:07,360 --> 26:02:13,512
okay so that's the initializer in there
30356
26:02:10,960 --> 26:02:15,832
now what we need to do is actually grab
30357
26:02:13,512 --> 26:02:17,512
these events as they come remember the
30358
26:02:17,512 --> 26:02:21,680
uh basically pass us these events so the
30359
26:02:19,911 --> 26:02:23,512
ui is gonna say here's an increment
30360
26:02:21,679 --> 26:02:25,191
event with this value here's the
30361
26:02:23,512 --> 26:02:27,512
decrement event with this value so we
30362
26:02:25,191 --> 26:02:30,080
need to catch those how do we do that
30363
26:02:27,512 --> 26:02:32,400
there is a function called on on the
30364
26:02:30,080 --> 26:02:35,279
block itself that you can use so we're
30365
26:02:32,399 --> 26:02:36,959
going to say on increment value
30366
26:02:36,960 --> 26:02:41,760
and then it gives you two parameters so
30367
26:02:39,512 --> 26:02:44,800
if you look at the function signature of
30368
26:02:41,759 --> 26:02:48,399
on it actually gives you you see it
30369
26:02:44,800 --> 26:02:50,639
gives you the event and an emit so let's
30370
26:02:51,679 --> 26:02:56,871
and in here we create a new function and
30371
26:02:53,831 --> 26:03:00,080
put semicolon at the end so that's how
30372
26:02:56,872 --> 26:03:02,551
we're gonna handle the increment value
30373
26:03:00,080 --> 26:03:04,479
same we're gonna do for decrement so
30374
26:03:02,551 --> 26:03:07,440
let's just copy that and paste it in
30375
26:03:07,440 --> 26:03:14,000
all right so what are we doing here now
30376
26:03:11,440 --> 26:03:15,832
remember the event that comes in now is
30377
26:03:14,000 --> 26:03:18,080
an increment event because we literally
30378
26:03:18,080 --> 26:03:23,040
we're we're then going to get that
30379
26:03:19,831 --> 26:03:25,759
integer from our events so remember our
30380
26:03:25,759 --> 26:03:30,551
is of type counter event and then it has
30381
26:03:28,639 --> 26:03:34,639
a value of type string so we're gonna
30382
26:03:30,551 --> 26:03:37,679
try to parse that as an integer okay
30383
26:03:34,639 --> 26:03:39,679
so we're going to say final integer is
30384
26:03:39,679 --> 26:03:46,551
and we're going to say event dot value
30385
26:03:43,119 --> 26:03:48,399
like that so and try parse is a function
30386
26:03:48,399 --> 26:03:52,639
will try as its name indicates it's
30387
26:03:50,080 --> 26:03:54,551
gonna try to parse a given string and
30388
26:03:52,639 --> 26:03:58,160
try to make it an integer and if it
30389
26:03:54,551 --> 26:03:59,599
can't then that integer is gonna be null
30390
26:04:06,800 --> 26:04:12,080
and then we put an else in here
30391
26:04:09,191 --> 26:04:14,799
and in the case of an else actually so
30392
26:04:12,080 --> 26:04:16,551
it means that hey you gave us something
30393
26:04:14,800 --> 26:04:18,232
that we couldn't parse as an integer
30394
26:04:16,551 --> 26:04:20,720
what do we do with it all right then
30395
26:04:18,232 --> 26:04:23,440
we're going to use our emit
30396
26:04:20,720 --> 26:04:26,000
emit is a function on its own you see
30397
26:04:23,440 --> 26:04:29,440
it's an emitter that allows you then to
30398
26:04:26,000 --> 26:04:30,639
pass a state out your block so i
30399
26:04:29,440 --> 26:04:32,720
actually scared myself with my own
30400
26:04:32,720 --> 26:04:38,160
have you got your you got your um this
30401
26:04:35,440 --> 26:04:40,872
event in now you want to create a state
30402
26:04:38,160 --> 26:04:43,600
and pass it out that's how you do it
30403
26:04:40,872 --> 26:04:45,680
with emit all right so we're gonna then
30404
26:04:47,759 --> 26:04:52,319
if actually let's do integer null if we
30405
26:04:52,320 --> 26:04:55,680
we're going to handle the error here
30406
26:04:53,600 --> 26:04:57,600
sorry about that so if we got not what
30407
26:04:55,679 --> 26:04:58,399
we're going to do is we're going to emit
30408
26:05:07,600 --> 26:05:13,680
so the invalid value was this value that
30409
26:05:11,119 --> 26:05:14,399
was passed to us in here you see event
30410
26:05:14,399 --> 26:05:19,439
so let's just say that's the event.value
30411
26:05:17,512 --> 26:05:21,911
and the next parameter is the previous
30412
26:05:19,440 --> 26:05:24,400
value and the previous value is always
30413
26:05:24,399 --> 26:05:28,479
so let me actually do some cleanup in
30414
26:05:26,232 --> 26:05:30,320
here so you see the code better
30415
26:05:28,479 --> 26:05:32,479
a comma here so let's see what happened
30416
26:05:30,320 --> 26:05:35,360
in here you see we're emitting so we're
30417
26:05:32,479 --> 26:05:38,959
sending a state outside our block
30418
26:05:35,360 --> 26:05:41,360
so we're saying given an increment event
30419
26:05:38,960 --> 26:05:43,832
where the integer where the value
30420
26:05:41,360 --> 26:05:46,960
couldn't be parsed as an integer we're
30421
26:05:43,831 --> 26:05:49,679
emitting a new state saying that hey
30422
26:05:46,960 --> 26:05:50,960
your value which was in this event is
30423
26:05:52,872 --> 26:05:58,639
and the previous value that we had is
30424
26:05:55,191 --> 26:06:02,551
stored inside our state so your block in
30425
26:05:58,639 --> 26:06:05,360
all your on functions you have access to
30426
26:06:02,551 --> 26:06:08,000
your current state before emitting a new
30427
26:06:05,360 --> 26:06:10,800
one all right so that's the previous
30428
26:06:10,800 --> 26:06:15,760
and if we could actually grab an integer
30429
26:06:13,600 --> 26:06:17,912
we're going to emit a new value a new
30430
26:06:15,759 --> 26:06:20,399
state and we're going to say counter
30431
26:06:21,279 --> 26:06:25,911
and we're going to say we take the
30432
26:06:22,960 --> 26:06:28,000
current value in our state plus it this
30433
26:06:37,512 --> 26:06:40,479
decrement i'm going to remove this comma
30434
26:06:39,279 --> 26:06:42,399
by the way it was annoying me a little
30435
26:06:40,479 --> 26:06:44,080
bit and decrement it's very similar to
30436
26:06:42,399 --> 26:06:47,039
increments so i'm just going to copy
30437
26:06:44,080 --> 26:06:48,872
this code and remove this decrement one
30438
26:06:47,039 --> 26:06:50,319
and paste the increment one one more
30439
26:06:48,872 --> 26:06:52,232
time and then this time i'm just going
30440
26:06:50,320 --> 26:06:53,832
to change it to decrements like this all
30441
26:06:53,831 --> 26:06:57,599
and for the big decrement the only thing
30442
26:06:56,080 --> 26:07:00,551
you have to do is just to change this
30443
26:07:04,320 --> 26:07:11,280
wow a lot of work a lot of work so
30444
26:07:13,039 --> 26:07:17,679
now we've basically gotten the block
30445
26:07:15,360 --> 26:07:18,479
down so the block should be working as
30446
26:07:22,232 --> 26:07:26,639
so let's now go into this homepage that
30447
26:07:24,080 --> 26:07:29,600
we created in here and create our text
30448
26:07:30,320 --> 26:07:35,832
so for that i'm just going to say
30449
26:07:35,911 --> 26:07:40,720
text editing controller and we're
30450
26:07:38,320 --> 26:07:44,160
calling it controller as i can see here
30451
26:07:40,720 --> 26:07:46,872
let's go into init state and override
30452
26:07:44,160 --> 26:07:48,639
also the dispose function okay
30453
26:07:46,872 --> 26:07:50,639
i'm gonna bring the code so you can see
30454
26:07:52,320 --> 26:07:56,480
in in its state we're gonna instantiate
30455
26:07:54,479 --> 26:07:58,000
our controller so this is nothing new
30456
26:07:56,479 --> 26:07:59,119
you've already done this before many
30457
26:07:59,119 --> 26:08:03,831
and in here we're gonna dispose of that
30458
26:08:05,191 --> 26:08:10,720
uh fantastic all right that part is done
30459
26:08:08,000 --> 26:08:13,759
so what we need to do now inside our
30460
26:08:10,720 --> 26:08:16,551
build function we're gonna basically
30461
26:08:16,551 --> 26:08:20,080
our main ui so i'm gonna bring the
30462
26:08:18,551 --> 26:08:23,911
caption for that as you can see we have
30463
26:08:20,080 --> 26:08:26,551
to use block provider and block consumer
30464
26:08:23,911 --> 26:08:29,360
so in the build function right now we
30465
26:08:26,551 --> 26:08:31,759
only have a container so let's instead
30466
26:08:29,360 --> 26:08:33,759
of doing a container say okay we want to
30467
26:08:31,759 --> 26:08:36,080
create a block and we also want to just
30468
26:08:33,759 --> 26:08:37,911
like make sure everything after this
30469
26:08:36,080 --> 26:08:39,600
return statement has access to that
30470
26:08:37,911 --> 26:08:40,959
block so we need the block provider so
30471
26:08:40,960 --> 26:08:45,832
provider and block provider is in a
30472
26:08:43,759 --> 26:08:47,599
flutter block package as you can see
30473
26:08:45,831 --> 26:08:49,911
here and we haven't imported that yet so
30474
26:08:52,399 --> 26:08:56,959
parameter we get a context as you'll see
30475
26:08:55,279 --> 26:08:58,800
i can get visual studio code to complete
30476
26:08:56,960 --> 26:09:00,552
this for me it says i will give you
30477
26:08:58,800 --> 26:09:02,639
context and you'll give me a block back
30478
26:09:00,551 --> 26:09:06,231
so i'll say okay i'll take the context
30479
26:09:02,639 --> 26:09:07,119
and i'll create a counter block here
30480
26:09:07,119 --> 26:09:10,871
so that's the first parameter then we're
30481
26:09:09,440 --> 26:09:12,960
getting an error here just because we
30482
26:09:10,872 --> 26:09:16,960
haven't provided a child here so if i
30483
26:09:18,639 --> 26:09:22,872
and press command s then we see hello
30484
26:09:20,639 --> 26:09:25,600
world right there okay so in here our
30485
26:09:22,872 --> 26:09:27,120
task then is to create a scaffold so
30486
26:09:25,600 --> 26:09:29,600
let's create our scaffold just we
30487
26:09:32,080 --> 26:09:35,440
let's create an app bar in here and say
30488
26:09:38,551 --> 26:09:42,080
can't see anything because the
30489
26:09:39,679 --> 26:09:45,911
documentation is all over the place cons
30490
26:09:42,080 --> 26:09:45,911
text and i'm going to say testing
30491
26:09:47,512 --> 26:09:52,160
all right so now we have a blog provider
30492
26:09:50,320 --> 26:09:54,232
that created an instance of our counter
30493
26:09:52,160 --> 26:09:55,832
block and then we have a scaffold with a
30494
26:09:54,232 --> 26:09:57,760
beautiful app bar displayed on the
30495
26:09:57,759 --> 26:10:02,479
so as the caption at the bottom screen
30496
26:10:02,479 --> 26:10:06,551
uh our child the child of our block
30497
26:10:04,639 --> 26:10:09,512
provider is a scaffold but inside the
30498
26:10:06,551 --> 26:10:11,440
scaffold itself we have body
30499
26:10:09,512 --> 26:10:15,279
and for the body then we're going to
30500
26:10:11,440 --> 26:10:18,232
create a block consumer so remember a
30501
26:10:19,679 --> 26:10:24,159
the combination of a block listener and
30502
26:10:24,160 --> 26:10:29,680
we need a block consumer here is and the
30503
26:10:26,551 --> 26:10:31,679
reason for that is upon every
30504
26:10:29,679 --> 26:10:33,511
pressing of the plus or the minus
30505
26:10:31,679 --> 26:10:36,159
buttons that we're going to develop soon
30506
26:10:33,512 --> 26:10:37,911
we want to clear the text inside of our
30507
26:10:40,479 --> 26:10:44,479
by us saying that okay whenever there's
30508
26:10:42,639 --> 26:10:46,160
a new state coming out of our block we
30509
26:10:44,479 --> 26:10:48,399
want to clear something so this is a
30510
26:10:46,160 --> 26:10:50,400
signal when you want to do a side effect
30511
26:10:48,399 --> 26:10:52,551
that has nothing really to do with like
30512
26:10:52,551 --> 26:10:56,872
then that is your listener so
30513
26:10:55,360 --> 26:10:59,191
so we're saying that we need a block
30514
26:10:56,872 --> 26:11:01,360
listener but also we want to for
30515
26:11:01,360 --> 26:11:05,680
have a builder so we want to build our
30516
26:11:03,191 --> 26:11:06,551
ui based on the current state of the
30517
26:11:06,551 --> 26:11:10,720
well that is block builder so if you
30518
26:11:08,800 --> 26:11:13,120
need a block listener anywhere in your
30519
26:11:10,720 --> 26:11:15,680
application and a block builder you need
30520
26:11:13,119 --> 26:11:17,360
to instead use block consumer if you're
30521
26:11:15,679 --> 26:11:19,911
if you need them at the same level okay
30522
26:11:17,360 --> 26:11:22,399
so block consumer combines block
30523
26:11:19,911 --> 26:11:26,479
listener and block builder so that's why
30524
26:11:22,399 --> 26:11:26,479
we're using block consumer in this
30525
26:11:27,831 --> 26:11:31,279
block consumer it's going to say okay
30526
26:11:29,512 --> 26:11:32,639
what block am i operating on so i'm just
30527
26:11:31,279 --> 26:11:35,039
going to say you're operating on counter
30528
26:11:32,639 --> 26:11:37,191
block and then it says what state am i
30529
26:11:35,039 --> 26:11:39,911
operating on and we're going to say
30530
26:11:39,911 --> 26:11:43,831
let's see if they're available counter
30531
26:11:44,639 --> 26:11:48,960
and you can i mean i'm not making this
30532
26:11:46,872 --> 26:11:50,400
up this stuff is present in the
30533
26:11:48,960 --> 26:11:52,080
documentation if you go to block
30534
26:11:52,080 --> 26:11:57,040
let's see in here what it says it says
30535
26:11:53,759 --> 26:11:59,279
uh extend state state streamable so
30536
26:11:59,279 --> 26:12:04,319
the b here b for me means the block and
30537
26:12:01,911 --> 26:12:05,440
s is the state so it's not so clear
30538
26:12:04,320 --> 26:12:06,480
because it's working with a lot of
30539
26:12:05,440 --> 26:12:08,872
generics but you can read the
30540
26:12:06,479 --> 26:12:11,440
documentation about that okay
30541
26:12:08,872 --> 26:12:14,320
so let's go in here and in here let's
30542
26:12:14,320 --> 26:12:18,400
and it's complaining that some named
30543
26:12:16,720 --> 26:12:20,551
parameters aren't present as you can see
30544
26:12:18,399 --> 26:12:22,871
named parameter listener is required so
30545
26:12:20,551 --> 26:12:24,399
let's go ahead and say listener
30546
26:12:22,872 --> 26:12:27,832
and i'm going to get visual studio code
30547
26:12:24,399 --> 26:12:30,959
to help me clean this up and upon any
30548
26:12:27,831 --> 26:12:33,599
new events or sorry upon any new states
30549
26:12:30,960 --> 26:12:35,280
produced by our blog i want to clear our
30550
26:12:33,600 --> 26:12:37,360
text editing controller so let's just
30551
26:12:38,639 --> 26:12:41,360
what do we call it do we call it
30552
26:12:41,360 --> 26:12:45,512
yeah so we're going to say controller
30553
26:12:43,600 --> 26:12:47,440
clear so we're going to clear the text
30554
26:12:45,512 --> 26:12:49,512
that is displayed inside the text field
30555
26:12:49,512 --> 26:12:52,800
then we need the builder function so in
30556
26:12:54,551 --> 26:12:59,679
it will give you the current state and
30557
26:12:56,639 --> 26:13:01,911
you need to return a widget back okay
30558
26:12:59,679 --> 26:13:04,319
so what we're going to do in this
30559
26:13:01,911 --> 26:13:06,479
in this is first we're going to grab
30560
26:13:06,479 --> 26:13:11,831
to see if there's an invalid value so
30561
26:13:09,279 --> 26:13:14,800
let's just say final invalid value
30562
26:13:11,831 --> 26:13:16,639
is and we're going to say if this state
30563
26:13:19,360 --> 26:13:22,960
with a question mark so we're using
30564
26:13:20,720 --> 26:13:25,600
turner here and we're going to say get
30565
26:13:22,960 --> 26:13:28,720
the states uh let me bring the code up
30566
26:13:33,191 --> 26:13:38,871
if i then in here say invalid value as
30567
26:13:35,911 --> 26:13:40,800
you can see it's now a string okay
30568
26:13:38,872 --> 26:13:43,360
and the reason behind this to be honest
30569
26:13:47,039 --> 26:13:52,479
the a little error message to the user
30570
26:13:49,759 --> 26:13:54,639
should there be an invalid value so if i
30571
26:13:52,479 --> 26:13:56,080
have if i have entered some information
30572
26:13:54,639 --> 26:13:58,872
in the text field instead of a number
30573
26:13:56,080 --> 26:14:00,639
i've entered hello world and then
30574
26:13:58,872 --> 26:14:03,040
our block produces a counter state
30575
26:14:00,639 --> 26:14:05,279
invalid number we're going to display an
30576
26:14:03,039 --> 26:14:07,360
error to user and this error is gonna
30577
26:14:05,279 --> 26:14:09,600
disappear the next time actually the
30578
26:14:07,360 --> 26:14:11,440
user enters a valid number in the text
30579
26:14:09,600 --> 26:14:12,872
field okay so we're gonna use a new
30580
26:14:11,440 --> 26:14:16,000
widget that we haven't used before
30581
26:14:12,872 --> 26:14:18,479
called visibility and this visibility is
30582
26:14:16,000 --> 26:14:21,440
gonna be based on whether there is an
30583
26:14:21,440 --> 26:14:24,720
you'll soon see actually how we're gonna
30584
26:14:24,720 --> 26:14:31,040
let's go and as our builder's main like
30585
26:14:31,039 --> 26:14:35,279
okay and column has to have children all
30586
26:14:35,279 --> 26:14:39,360
what we're going to do is to first
30587
26:14:37,039 --> 26:14:41,831
display a text field sorry a text in
30588
26:14:41,831 --> 26:14:46,871
and we're going to say current value is
30589
26:14:46,872 --> 26:14:51,120
all right so that's going to be the
30590
26:14:51,119 --> 26:14:58,479
state and if i do command s you can see
30591
26:14:53,831 --> 26:14:58,479
that it says current value is 0.
30592
26:14:59,512 --> 26:15:04,479
so that's the current value then what
30593
26:15:01,279 --> 26:15:06,080
we're going to do is to go ahead and
30594
26:15:06,080 --> 26:15:12,232
visibility widget which in case the
30595
26:15:09,759 --> 26:15:14,319
current state is counter state invalid
30596
26:15:12,232 --> 26:15:16,400
number is going to display an error
30597
26:15:14,320 --> 26:15:18,232
message to the user so let's say we're
30598
26:15:16,399 --> 26:15:19,911
going to control the visibility of that
30599
26:15:18,232 --> 26:15:21,600
error message using the visibility
30600
26:15:24,000 --> 26:15:29,279
and it's childband is going to be
30601
26:15:29,279 --> 26:15:33,831
invalid inputs and then we're going to
30602
26:15:31,360 --> 26:15:36,232
add the invalid value in here as you can
30603
26:15:33,831 --> 26:15:38,399
see as we've constructed that up there
30604
26:15:38,399 --> 26:15:42,479
and the visibility flag you see we have
30605
26:15:40,399 --> 26:15:44,871
to return a boolean okay so how do we
30606
26:15:50,160 --> 26:15:55,680
with visibility and that is if you can
30607
26:15:53,440 --> 26:15:57,911
grab hold of your state and say okay
30608
26:15:55,679 --> 26:16:02,231
this state is actually counter state
30609
26:15:57,911 --> 26:16:02,232
invalid number so let's just say state
30610
26:16:02,399 --> 26:16:07,439
is counter state invalid number just
30611
26:16:04,960 --> 26:16:09,832
like that okay so that's how we grab
30612
26:16:09,831 --> 26:16:13,511
and you can see at the moment it's not
30613
26:16:11,440 --> 26:16:15,191
displayed all right even if we even if
30614
26:16:19,279 --> 26:16:22,959
and then save it and you'll see now it
30615
26:16:21,360 --> 26:16:24,551
says invalid input so it's just
30616
26:16:22,960 --> 26:16:26,639
displayed right there okay but if you
30617
26:16:24,551 --> 26:16:28,319
say state is then it's going to
30618
26:16:26,639 --> 26:16:31,440
disappear because the current state is
30619
26:16:32,800 --> 26:16:37,192
okay that was for visibility now let's
30620
26:16:37,191 --> 26:16:40,551
so where the user can actually enter
30621
26:16:38,800 --> 26:16:41,911
some information in the ui so let's just
30622
26:16:41,911 --> 26:16:44,720
as the first parameter we're going to
30623
26:16:48,320 --> 26:16:51,360
and what we're going to do is we're
30624
26:16:49,759 --> 26:16:53,831
going to give it a hint text so let's
30625
26:16:51,360 --> 26:16:56,000
say decoration is a const inputs
30626
26:16:56,000 --> 26:16:59,831
like that i'm going to put the code a
30627
26:16:57,512 --> 26:17:01,760
little bit higher on the screen
30628
26:16:59,831 --> 26:17:02,551
so for the hint text i'm just going to
30629
26:17:04,960 --> 26:17:10,000
like this okay and also let's just
30630
26:17:14,551 --> 26:17:18,159
all right but also remember if you
30631
26:17:18,160 --> 26:17:21,512
the controller has not been initialized
30632
26:17:20,232 --> 26:17:23,192
really i thought we initialized the
30633
26:17:23,191 --> 26:17:26,799
yeah maybe you have to do a hot restart
30634
26:17:26,960 --> 26:17:31,440
there we go so now we have enter a
30635
26:17:31,679 --> 26:17:36,871
great stuff now all right this is what i
30636
26:17:33,911 --> 26:17:38,399
was going to say even though we have a
30637
26:17:36,872 --> 26:17:39,832
text field here and we actually said
30638
26:17:38,399 --> 26:17:42,000
that the keyboard should be numerical
30639
26:17:39,831 --> 26:17:43,511
but i can still paste non-numerical
30640
26:17:42,000 --> 26:17:46,320
numbers in here so if i like use the
30641
26:17:43,512 --> 26:17:48,639
paste functionality in android or is so
30642
26:17:46,320 --> 26:17:50,640
that's the reason we have that invalid
30643
26:17:48,639 --> 26:17:52,872
state in case someone else someone
30644
26:17:50,639 --> 26:17:54,872
actually enters another value except for
30645
26:17:52,872 --> 26:17:56,720
a number and there are also input
30646
26:17:54,872 --> 26:17:58,720
formatters in flutter that you can use
30647
26:17:58,720 --> 26:18:03,831
avoid users entering non-valid values in
30648
26:18:02,160 --> 26:18:05,192
your text fields but that's a whole
30649
26:18:03,831 --> 26:18:08,479
other subject that we're not going to
30650
26:18:08,551 --> 26:18:11,759
then what we're going to do is we're
30651
26:18:09,831 --> 26:18:14,551
going to have two text buttons for
30652
26:18:11,759 --> 26:18:17,439
increment and decrement so let's after
30653
26:18:14,551 --> 26:18:19,759
this text field create a row so
30654
26:18:17,440 --> 26:18:21,191
a row is like the opposite of a column
30655
26:18:19,759 --> 26:18:23,039
whereas a column displays those
30656
26:18:21,191 --> 26:18:24,551
components vertically one after one
30657
26:18:23,039 --> 26:18:26,399
after each other a row creates its
30658
26:18:24,551 --> 26:18:28,080
components horizontally from left to
30659
26:18:26,399 --> 26:18:29,279
right and left speaking languages and
30660
26:18:30,320 --> 26:18:33,360
speaking right side speaking language i
30661
26:18:33,360 --> 26:18:40,320
i think actually row changes it's uh
30662
26:18:36,872 --> 26:18:42,232
it should at least change is uh
30663
26:18:40,320 --> 26:18:43,832
how it arranges components based on the
30664
26:18:42,232 --> 26:18:45,512
language but i'm not quite sure about
30665
26:18:45,512 --> 26:18:53,279
so let's say row it has children
30666
26:18:49,440 --> 26:18:56,320
and it's two text buttons okay
30667
26:18:53,279 --> 26:18:57,679
that have unpressed at the moment empty
30668
26:18:57,679 --> 26:19:04,159
it's a child it just says cons text just
30669
26:19:01,679 --> 26:19:06,719
minus like this okay so that's first
30670
26:19:06,720 --> 26:19:11,831
and then for the next one i'm just gonna
30671
26:19:09,039 --> 26:19:14,159
copy this text button and i'm gonna
30672
26:19:11,831 --> 26:19:17,039
paste it right here and in here i'm just
30673
26:19:17,279 --> 26:19:22,551
all right so in here when the minus
30674
26:19:20,080 --> 26:19:25,831
button is tapped i want to convey this
30675
26:19:22,551 --> 26:19:29,119
information to our block so i want to
30676
26:19:25,831 --> 26:19:32,399
say grab the controllers text and make
30677
26:19:29,119 --> 26:19:33,911
sure that you send this increment
30678
26:19:33,911 --> 26:19:39,191
increment event to the block so we kind
30679
26:19:36,479 --> 26:19:41,831
of need to grab hold of our block
30680
26:19:39,191 --> 26:19:44,959
how do we do that the way to do that is
30681
26:19:41,831 --> 26:19:47,279
using a convenient function that
30682
26:19:47,279 --> 26:19:51,440
very good ventures have created on
30683
26:19:51,440 --> 26:19:57,832
and in here you can actually say i want
30684
26:19:53,679 --> 26:20:00,399
to read my counter block like this okay
30685
26:19:57,831 --> 26:20:02,551
so this gives you access to your block
30686
26:20:00,399 --> 26:20:04,159
that has been created by the block
30687
26:20:04,160 --> 26:20:08,720
so let's go ahead and in here let's say
30688
26:20:06,639 --> 26:20:11,600
after we read that we want to add a new
30689
26:20:08,720 --> 26:20:14,479
event to it like this and we want to add
30690
26:20:11,600 --> 26:20:15,192
an increment event that has the value of
30691
26:20:18,800 --> 26:20:23,040
this is how you send events to your
30692
26:20:20,639 --> 26:20:24,479
block and the same thing since we're
30693
26:20:23,039 --> 26:20:28,231
actually sorry about that this should be
30694
26:20:24,479 --> 26:20:30,639
decrement so let's just say decrement
30695
26:20:28,232 --> 26:20:33,040
like that and we copy the same code and
30696
26:20:30,639 --> 26:20:35,039
we bring it to our increment function as
30697
26:20:33,039 --> 26:20:36,231
unpressed button here and instead of
30698
26:20:35,039 --> 26:20:39,119
decrement then we're going to say
30699
26:20:41,360 --> 26:20:45,911
perfect okay so let's see now let's test
30700
26:20:44,232 --> 26:20:48,720
this application so at the moment we
30701
26:20:45,911 --> 26:20:50,319
have current value zero now if i press
30702
26:20:48,720 --> 26:20:51,759
the plus button as you can see it says
30703
26:20:54,720 --> 26:20:58,800
and press the plus button you can see
30704
26:20:56,399 --> 26:21:01,039
the value of 2 is entered there if i say
30705
26:21:01,039 --> 26:21:06,000
i press minus and it says oh invalid
30706
26:21:03,679 --> 26:21:07,911
input hello world is invalid and as you
30707
26:21:06,000 --> 26:21:10,232
can see it clears this text and that's
30708
26:21:07,911 --> 26:21:12,000
because of this listener here
30709
26:21:10,232 --> 26:21:14,000
uh this listener because a block
30710
26:21:12,000 --> 26:21:15,279
consumer is also block listener remember
30711
26:21:14,000 --> 26:21:17,039
so it's a combination of a block
30712
26:21:18,551 --> 26:21:24,959
so that's the clear working and the part
30713
26:21:21,759 --> 26:21:27,360
that is handling this invalid input is
30714
26:21:24,960 --> 26:21:30,000
this thing so visibility if the current
30715
26:21:27,360 --> 26:21:31,680
state is an invalid number then this is
30716
26:21:30,000 --> 26:21:33,440
becoming visible but if the current
30717
26:21:31,679 --> 26:21:35,911
state is not an invalid number so let's
30718
26:21:35,911 --> 26:21:39,911
it's going to be three six then the
30719
26:21:37,759 --> 26:21:41,360
current state is actually not an invalid
30720
26:21:44,160 --> 26:21:49,040
valid it should be counter state valid
30721
26:21:46,800 --> 26:21:51,360
so then the visibility is hiding that
30722
26:21:51,360 --> 26:21:56,080
so that is pretty much it i mean um
30723
26:21:54,399 --> 26:21:57,759
huge congratulations if you could stick
30724
26:21:56,080 --> 26:21:59,360
with me throughout this chapter it was
30725
26:21:57,759 --> 26:22:02,159
very heavy i understand it was a very
30726
26:21:59,360 --> 26:22:04,551
heavy and very like technical chapter
30727
26:22:02,160 --> 26:22:07,192
talking a lot about business logic but
30728
26:22:04,551 --> 26:22:08,800
believe me if you didn't understand like
30729
26:22:07,191 --> 26:22:10,799
most of the things i talked about you
30730
26:22:10,800 --> 26:22:15,279
i'm no genius nobody who knows how to
30731
26:22:13,279 --> 26:22:18,080
work with block or stuff like this is a
30732
26:22:15,279 --> 26:22:19,512
genius everybody has practice put it
30733
26:22:18,080 --> 26:22:21,512
into practice done their own
30734
26:22:19,512 --> 26:22:23,040
applications done this test just go and
30735
26:22:21,512 --> 26:22:25,191
create this counter application that i
30736
26:22:23,039 --> 26:22:27,759
just created try not to look at
30737
26:22:25,191 --> 26:22:29,759
the code that i've written or rewritten
30738
26:22:29,759 --> 26:22:34,399
remember the stuff from your memory and
30739
26:22:31,911 --> 26:22:36,399
after exercise and practice and practice
30740
26:22:34,399 --> 26:22:38,399
and practice and you will get it and you
30741
26:22:36,399 --> 26:22:40,399
will get the idea of what a state is
30742
26:22:38,399 --> 26:22:42,799
you'll get the idea of what events are
30743
26:22:40,399 --> 26:22:44,871
what block is and read documentations
30744
26:22:42,800 --> 26:22:47,192
and you'll get this eventually i promise
30745
26:22:47,279 --> 26:22:52,000
as is tradition we're gonna now uh since
30746
26:22:49,831 --> 26:22:54,231
we're done with what we prom promised in
30747
26:22:52,000 --> 26:22:55,831
this chapter we're gonna go and commit
30748
26:22:55,831 --> 26:23:00,799
so let me change the screen layout a
30749
26:23:00,800 --> 26:23:06,232
terminal and increase the size get rid
30750
26:23:06,232 --> 26:23:10,320
and let's have a look at our log
30751
26:23:10,320 --> 26:23:14,800
chapter we committed step 21 so let's
30752
26:23:14,800 --> 26:23:18,479
and there were just a few things changed
30753
26:23:16,479 --> 26:23:21,679
so let's add everything and just say git
30754
26:23:24,551 --> 26:23:28,551
and then i'm just going to say git
30755
26:23:28,551 --> 26:23:32,551
a tag to see our last tag and i can see
30756
26:23:32,551 --> 26:23:40,080
so let's tag this as step 22
30757
26:23:40,080 --> 26:23:46,551
there we go so now step 22 is also
30758
26:23:48,399 --> 26:23:51,831
what is to come this is also a tradition
30759
26:23:50,720 --> 26:23:52,872
we have at the end of every chapter
30760
26:23:51,831 --> 26:23:54,319
we'll talk about what we're what we need
30761
26:23:52,872 --> 26:23:55,680
to discuss in the next chapter and what
30762
26:23:54,320 --> 26:23:58,160
we need to discuss in the next chapter
30763
26:23:55,679 --> 26:24:00,079
is and we will convert our auth process
30764
26:24:00,080 --> 26:24:04,232
we've now talked we've act we actually
30765
26:24:04,232 --> 26:24:07,680
logic inside our application and that
30766
26:24:06,000 --> 26:24:09,191
was our auth service i don't know if you
30767
26:24:09,191 --> 26:24:12,959
but we need to convert this auth service
30768
26:24:12,960 --> 26:24:17,760
and uh so in that way we're actually
30769
26:24:15,360 --> 26:24:20,000
putting our knowledge about block into
30770
26:24:17,759 --> 26:24:21,439
use and combining it with what we've
30771
26:24:21,440 --> 26:24:27,119
application better and our logic not so
30772
26:24:24,000 --> 26:24:28,872
spread around everywhere in the ui so
30773
26:24:27,119 --> 26:24:30,551
if you want grab some refreshments tea
30774
26:24:28,872 --> 26:24:32,320
or coffee and i'll see you in the next
30775
26:24:30,551 --> 26:24:34,479
chapter hello everyone and welcome to
30776
26:24:32,320 --> 26:24:36,320
chapter 40 of this letter course in
30777
26:24:34,479 --> 26:24:38,159
previous chapters we've been talking
30778
26:24:38,160 --> 26:24:45,600
our aus process and also storing um
30779
26:24:41,831 --> 26:24:48,080
users notes into a firestore database
30780
26:24:45,600 --> 26:24:51,760
and in the previous chapter we also
30781
26:24:48,080 --> 26:24:55,360
talked about block so um i'm very aware
30782
26:24:51,759 --> 26:24:57,831
that block could be an intimidating um
30783
26:24:55,360 --> 26:25:00,080
topic for some developers and that
30784
26:24:57,831 --> 26:25:02,799
getting started with block could just
30785
26:25:00,080 --> 26:25:03,680
be conceived as like an extra step that
30786
26:25:05,512 --> 26:25:08,872
however i can assure you when you get
30787
26:25:07,360 --> 26:25:10,080
more into professional software
30788
26:25:10,080 --> 26:25:14,639
and which is which may not be your goal
30789
26:25:12,551 --> 26:25:16,399
i completely am aware of that but when
30790
26:25:14,639 --> 26:25:17,911
you get more and more to professional
30791
26:25:16,399 --> 26:25:20,079
software development you'll understand
30792
26:25:20,080 --> 26:25:25,360
various layers of your product and that
30793
26:25:23,119 --> 26:25:27,119
the um the presentation layer where
30794
26:25:25,360 --> 26:25:29,279
you're taking care of for instance
30795
26:25:27,119 --> 26:25:31,911
displaying stuff on the on the screen to
30796
26:25:29,279 --> 26:25:35,440
the user shouldn't really have to talk
30797
26:25:31,911 --> 26:25:37,119
with your authentication directly um or
30798
26:25:35,440 --> 26:25:38,872
for instance your authentication layer
30799
26:25:37,119 --> 26:25:42,159
doesn't necessarily have to depend at
30800
26:25:38,872 --> 26:25:44,320
all on other parts of the application so
30801
26:25:44,320 --> 26:25:49,600
in a very clean and concise way to
30802
26:25:46,800 --> 26:25:51,832
separate the various uh layers of your
30803
26:25:49,600 --> 26:25:54,400
application into their own concern
30804
26:25:51,831 --> 26:25:56,080
layers so and the services are going to
30805
26:25:54,399 --> 26:25:57,911
be only concerned with services and then
30806
26:25:56,080 --> 26:26:01,191
your ui is going to be only concerned
30807
26:25:57,911 --> 26:26:03,679
with ui and so on so and so forth so
30808
26:26:01,191 --> 26:26:05,191
um it could be beneficial if you could
30809
26:26:03,679 --> 26:26:07,679
actually before starting with this
30810
26:26:05,191 --> 26:26:09,911
chapter to go to the previous chapter
30811
26:26:07,679 --> 26:26:12,399
and maybe watch it again or maybe even
30812
26:26:09,911 --> 26:26:15,599
practice yourself with block
30813
26:26:12,399 --> 26:26:18,231
um i understand i know for sure that the
30814
26:26:15,600 --> 26:26:20,400
block libraries website as we looked at
30815
26:26:18,232 --> 26:26:22,960
in the previous chapter they have quite
30816
26:26:20,399 --> 26:26:24,159
a lot of examples and i highly suggest
30817
26:26:22,960 --> 26:26:26,320
that you go through some of those
30818
26:26:24,160 --> 26:26:28,480
examples at least and develop and
30819
26:26:26,320 --> 26:26:31,040
implement those examples also yourself
30820
26:26:28,479 --> 26:26:33,279
to get a bet to get a better hang of
30821
26:26:31,039 --> 26:26:35,759
what a block actually means and how
30822
26:26:35,759 --> 26:26:40,080
if you've taken care of that and you
30823
26:26:37,759 --> 26:26:42,639
understand like the basics of block
30824
26:26:40,080 --> 26:26:44,800
then we're we're we should be good to go
30825
26:26:44,800 --> 26:26:48,720
so let me bring up the caption for what
30826
26:26:47,360 --> 26:26:51,279
we're actually going to do in this
30827
26:26:48,720 --> 26:26:52,872
chapter you see the way we have our
30828
26:26:51,279 --> 26:26:54,080
application at the moment is that we
30829
26:26:54,080 --> 26:26:57,759
authentication service and our
30830
26:26:56,080 --> 26:26:59,680
authentication service let me just bring
30831
26:26:59,679 --> 26:27:02,639
and let's have a quick look at it so if
30832
26:27:02,639 --> 26:27:05,679
auth service you'll see that we have
30833
26:27:05,679 --> 26:27:08,551
function functions in here we have
30834
26:27:08,551 --> 26:27:13,679
and we have uh we are exposing the
30835
26:27:11,039 --> 26:27:16,399
current user we have login logouts and
30836
26:27:13,679 --> 26:27:19,911
email verification and initialize
30837
26:27:16,399 --> 26:27:22,399
now this is all good however we are it's
30838
26:27:19,911 --> 26:27:24,800
very raw the way it is in that the ui is
30839
26:27:24,800 --> 26:27:28,960
our auth service which in case which in
30840
26:27:28,960 --> 26:27:34,480
a provider which is our for instance um
30841
26:27:32,639 --> 26:27:36,232
firebase provider author provider so if
30842
26:27:34,479 --> 26:27:38,399
you go in here you'll see firebase auth
30843
26:27:36,232 --> 26:27:40,000
provider and that is talking directly
30844
26:27:40,000 --> 26:27:44,160
in a way you could say that the ui is
30845
26:27:42,232 --> 26:27:45,760
talking pretty much directly with
30846
26:27:44,160 --> 26:27:47,512
firebase it's just going through some
30847
26:27:45,759 --> 26:27:50,399
functions to get to firebase but that's
30848
26:27:47,512 --> 26:27:52,080
what pretty much it's doing so
30849
26:27:50,399 --> 26:27:53,279
what we want to do in this chapter is to
30850
26:27:53,279 --> 26:27:58,399
make sure that our authentication is
30851
26:27:55,600 --> 26:28:00,000
behind a layer of block meaning that all
30852
26:27:58,399 --> 26:28:03,439
the logic that has anything to do with
30853
26:28:00,000 --> 26:28:06,399
authentication is hidden behind a layer
30854
26:28:03,440 --> 26:28:08,000
which we're going to call off block
30855
26:28:06,399 --> 26:28:09,759
so that's going to be our off block so
30856
26:28:08,000 --> 26:28:12,479
it's like the and as you remember from
30857
26:28:09,759 --> 26:28:15,439
the previous chapter every block has two
30858
26:28:15,440 --> 26:28:21,440
what comes inside the block so what's
30859
26:28:17,911 --> 26:28:24,639
entered and what is the output
30860
26:28:21,440 --> 26:28:27,040
the input to your block are your events
30861
26:28:24,639 --> 26:28:28,800
so you pass for instance your ui upon
30862
26:28:28,800 --> 26:28:34,639
you pass an event a packaged event that
30863
26:28:31,600 --> 26:28:36,800
we call our auth event you're gonna pack
30864
26:28:34,639 --> 26:28:39,440
package that up with any parameters that
30865
26:28:36,800 --> 26:28:42,232
that particular event is required it is
30866
26:28:39,440 --> 26:28:44,400
required from you you take that event
30867
26:28:42,232 --> 26:28:46,232
and you give it to your auth lock then
30868
26:28:44,399 --> 26:28:48,639
your off block is then gonna have some
30869
26:28:46,232 --> 26:28:51,360
time to process you remember
30870
26:28:48,639 --> 26:28:54,319
we have these on function functions on
30871
26:28:51,360 --> 26:28:56,551
your uh off on your blocks when we
30872
26:28:54,320 --> 26:28:59,680
talked about the counter block we had on
30873
26:28:56,551 --> 26:29:01,831
increment event on the command event etc
30874
26:28:59,679 --> 26:29:03,759
so these are the events that come in so
30875
26:29:01,831 --> 26:29:06,231
we're going to package those events up
30876
26:29:03,759 --> 26:29:08,231
from our ui and pass them to our off
30877
26:29:06,232 --> 26:29:10,160
block then our off block is going to
30878
26:29:08,232 --> 26:29:12,552
have some time for itself to process
30879
26:29:10,160 --> 26:29:14,232
those events and based on those events
30880
26:29:14,232 --> 26:29:19,600
it has received and based on its current
30881
26:29:16,720 --> 26:29:22,080
state it's gonna either output the same
30882
26:29:19,600 --> 26:29:22,872
state or it's gonna output a new state
30883
26:29:22,872 --> 26:29:28,639
events come in and states go out and the
30884
26:29:25,831 --> 26:29:32,159
off block sits in the middle so event
30885
26:29:28,639 --> 26:29:33,600
off block and estate and these are three
30886
26:29:32,160 --> 26:29:36,320
components that we're going to develop
30887
26:29:39,600 --> 26:29:44,160
take care of our state and remember
30888
26:29:42,080 --> 26:29:46,479
again state as its name indicates is the
30889
26:29:44,160 --> 26:29:49,360
state of authentication either you're
30890
26:29:46,479 --> 26:29:51,191
logged in or you're logged out okay and
30891
26:29:49,360 --> 26:29:53,680
you could also be logged out with an
30892
26:29:51,191 --> 26:29:55,279
error remember so you're either logged
30893
26:29:57,119 --> 26:30:02,479
we're going to start looking at these
30894
26:29:59,360 --> 26:30:04,232
off states so what we need to first do
30895
26:30:02,479 --> 26:30:05,191
is to create a file as the caption
30896
26:30:05,191 --> 26:30:10,639
under lip services auth block off state
30897
26:30:10,639 --> 26:30:13,679
let me do some reshuffling on the screen
30898
26:30:13,679 --> 26:30:17,191
maybe decrease the font size a little
30899
26:30:15,512 --> 26:30:19,600
bit because it's just ginormous the way
30900
26:30:17,191 --> 26:30:22,080
it is right now so maybe this font is a
30901
26:30:22,080 --> 26:30:25,040
i'm going to put visual studio studio
30902
26:30:25,039 --> 26:30:30,159
to the left and then i'm gonna bring scr
30903
26:30:30,160 --> 26:30:34,320
okay so i'm gonna close all these tabs
30904
26:30:32,399 --> 26:30:36,479
that i have right here how we left the
30905
26:30:34,320 --> 26:30:38,800
application in the previous chapter and
30906
26:30:36,479 --> 26:30:40,231
let's go ahead inside lib let's let's
30907
26:30:38,800 --> 26:30:42,800
see actually what we have in here we
30908
26:30:40,232 --> 26:30:45,279
have lib and we have services
30909
26:30:42,800 --> 26:30:47,192
and under services we already have auth
30910
26:30:45,279 --> 26:30:49,191
but we don't have a folder called block
30911
26:30:47,191 --> 26:30:50,479
at the moment we have auth provider etc
30912
26:30:50,479 --> 26:30:54,479
so let's go in off and just create a new
30913
26:30:54,479 --> 26:30:58,551
slash auth state state like this dot
30914
26:31:03,440 --> 26:31:07,191
now if you remember from the previous
30915
26:31:10,479 --> 26:31:16,551
usually states are immutable and that
30916
26:31:13,512 --> 26:31:19,911
they're also they're like at the generic
30917
26:31:16,551 --> 26:31:21,360
states that every other state in your
30918
26:31:22,872 --> 26:31:27,911
is usually an abstract immutable class
30919
26:31:25,512 --> 26:31:30,232
meaning that it is a class pretty much
30920
26:31:27,911 --> 26:31:32,872
almost with no logic at all it may have
30921
26:31:32,872 --> 26:31:39,040
in and on itself it does nothing so it
30922
26:31:35,279 --> 26:31:41,440
just is dictating that hey every state
30923
26:31:39,039 --> 26:31:43,759
that comes out of this off block is of
30924
26:31:43,759 --> 26:31:48,159
let's go ahead and create our off state
30925
26:31:46,232 --> 26:31:50,552
so maybe i should actually increase the
30926
26:31:50,551 --> 26:31:56,000
so we're going to start by writing um
30927
26:31:56,000 --> 26:32:00,720
states as you can see so we're going to
30928
26:31:57,831 --> 26:32:02,319
code that in auth state.dart file
30929
26:32:00,720 --> 26:32:06,080
so i'm going to go ahead and just say
30930
26:32:02,320 --> 26:32:08,000
abstract class auth state okay
30931
26:32:06,080 --> 26:32:10,000
and let's just create a constant
30932
26:32:08,000 --> 26:32:11,759
constructor for it as well in case one
30933
26:32:10,000 --> 26:32:13,512
of our states needs to also have a
30934
26:32:11,759 --> 26:32:15,039
constant constructor so this is this is
30935
26:32:13,512 --> 26:32:16,080
a pattern that you may have already been
30936
26:32:16,080 --> 26:32:20,400
by creating abstract classes and if you
30937
26:32:18,080 --> 26:32:22,000
have like sub classes that conform to
30938
26:32:20,399 --> 26:32:23,439
your abstract classes and those
30939
26:32:22,000 --> 26:32:25,440
subclasses actually want to have
30940
26:32:23,440 --> 26:32:27,119
constant constructors then you need to
30941
26:32:25,440 --> 26:32:29,191
have a constant constructor in your
30942
26:32:27,119 --> 26:32:31,679
abstract class as well so that those
30943
26:32:29,191 --> 26:32:33,191
subclasses can actually call that const
30944
26:32:31,679 --> 26:32:36,639
constructor in the abstract class
30945
26:32:33,191 --> 26:32:38,639
otherwise you won't be able to have
30946
26:32:36,639 --> 26:32:40,232
constant constructors for your
30947
26:32:38,639 --> 26:32:41,831
subclasses so for instance if i say
30948
26:32:43,600 --> 26:32:49,120
extends off state and if i say const
30949
26:32:47,191 --> 26:32:50,799
blah like this you can see it says a
30950
26:32:49,119 --> 26:32:53,039
constant constructor can't call a
30951
26:32:50,800 --> 26:32:54,720
non-constant superconstructor and that
30952
26:32:53,039 --> 26:32:56,719
is the reason that i usually create a
30953
26:32:58,639 --> 26:33:04,872
classes for states and for um the events
30954
26:33:05,440 --> 26:33:10,639
okay now we have our abstract class off
30955
26:33:07,911 --> 26:33:12,872
state now let's go and make it immutable
30956
26:33:10,639 --> 26:33:14,479
and for that we need to import material
30957
26:33:12,872 --> 26:33:16,000
or actually it is foundation let's
30958
26:33:14,479 --> 26:33:19,191
import from foundation in that case and
30959
26:33:16,000 --> 26:33:21,911
we could just say show immutable
30960
26:33:19,191 --> 26:33:23,831
can we do it like that yeah that works
30961
26:33:23,831 --> 26:33:29,039
so that's that we have a generic off
30962
26:33:26,320 --> 26:33:31,512
state so um actually i don't mean
30963
26:33:29,039 --> 26:33:33,439
generic in terms of like a dart generics
30964
26:33:31,512 --> 26:33:37,680
which i just mean an abstract class that
30965
26:33:33,440 --> 26:33:37,680
every other off state can conform to
30966
26:33:41,440 --> 26:33:45,360
low i mean we have quite a few states so
30967
26:33:43,360 --> 26:33:47,279
i'm just going to start doing and doing
30968
26:33:45,360 --> 26:33:48,551
and creating those off states one at a
30969
26:33:48,551 --> 26:33:52,080
while you're authenticating for instance
30970
26:33:54,399 --> 26:33:57,679
you've just opened the application and
30971
26:33:56,000 --> 26:34:00,399
then we need to basically tell our
30972
26:33:57,679 --> 26:34:02,959
authentication um provider which is
30973
26:34:00,399 --> 26:34:05,831
firebase to initialize itself while it's
30974
26:34:02,960 --> 26:34:08,232
doing that then our auth state is in the
30975
26:34:05,831 --> 26:34:09,759
state of loading or initializing
30976
26:34:08,232 --> 26:34:11,512
whatever you want to call it but we kind
30977
26:34:09,759 --> 26:34:13,679
of need have to have a state that
30978
26:34:11,512 --> 26:34:15,040
indicates to the application that hey
30979
26:34:13,679 --> 26:34:17,119
something is happening with the auth
30980
26:34:15,039 --> 26:34:19,439
process and it is in the in the process
30981
26:34:17,119 --> 26:34:22,479
of loading so let's go ahead and define
30982
26:34:19,440 --> 26:34:26,872
that so let's just say off state loading
30983
26:34:22,479 --> 26:34:28,720
extends off state just like that okay
30984
26:34:26,872 --> 26:34:31,192
and this could also have a const
30985
26:34:28,720 --> 26:34:32,399
constructor so let's just say like that
30986
26:34:32,399 --> 26:34:37,039
that's the state of loading and we can
30987
26:34:35,191 --> 26:34:39,440
actually use the state of loading and i
30988
26:34:37,039 --> 26:34:42,159
believe we're actually going to use it
30989
26:34:39,440 --> 26:34:43,191
while the user for instance is has just
30990
26:34:42,160 --> 26:34:45,760
opened the application and the
30991
26:34:43,191 --> 26:34:48,319
applications is initializing
30992
26:34:45,759 --> 26:34:50,959
and we can also use it for instance when
30993
26:34:48,320 --> 26:34:52,552
you tap the login button in order to log
30994
26:34:50,960 --> 26:34:54,872
into the application and we're
30995
26:34:52,551 --> 26:34:58,479
communicating with firebase and that is
30996
26:34:54,872 --> 26:35:01,040
also a state of loading okay
30997
26:34:58,479 --> 26:35:02,800
so you will see soon now these states
30998
26:35:01,039 --> 26:35:05,831
are very important how the ui then
30999
26:35:02,800 --> 26:35:07,279
reacts to various events that are or
31000
26:35:05,831 --> 26:35:08,159
various states that are happening in our
31001
26:35:12,639 --> 26:35:17,191
we have the loading state let's just
31002
26:35:14,320 --> 26:35:19,120
define a a logged in state so when the
31003
26:35:17,191 --> 26:35:20,720
user has already logged into our
31004
26:35:19,119 --> 26:35:23,440
application then that is its own
31005
26:35:20,720 --> 26:35:25,911
separate state so let's go ahead and say
31006
26:35:25,911 --> 26:35:29,831
and it extends the off state
31007
26:35:29,831 --> 26:35:34,639
this is important to see okay when
31008
26:35:32,800 --> 26:35:36,639
you're logged into the application what
31009
26:35:34,639 --> 26:35:39,119
does the application actually need from
31010
26:35:36,639 --> 26:35:41,119
us well the only thing the application
31011
26:35:39,119 --> 26:35:43,512
needs from us when you have logged in
31012
26:35:41,119 --> 26:35:46,080
with the user is the current user at the
31013
26:35:43,512 --> 26:35:48,400
moment we are going to our auth provider
31014
26:35:46,080 --> 26:35:50,639
and or our auth service and grabbing the
31015
26:35:48,399 --> 26:35:52,871
current user but if we're gonna move
31016
26:35:50,639 --> 26:35:55,440
over to block and like blockifying our
31017
26:35:52,872 --> 26:35:58,720
entire auth process then it makes more
31018
26:35:55,440 --> 26:36:00,400
sense for us to grab the current user
31019
26:35:58,720 --> 26:36:04,080
that has logged into the application
31020
26:36:00,399 --> 26:36:05,759
from the current state of our auth block
31021
26:36:04,080 --> 26:36:07,279
it's it's i mean to me it's really
31022
26:36:07,279 --> 26:36:12,232
it makes sure that we can separate
31023
26:36:10,160 --> 26:36:14,480
the auth service and the auth provider
31024
26:36:12,232 --> 26:36:15,360
from the ui by putting a block in the
31025
26:36:18,639 --> 26:36:22,639
it may sound like you're blocking the ui
31026
26:36:20,872 --> 26:36:25,680
but that's not how block is written as
31027
26:36:25,679 --> 26:36:29,439
but that's that's what we need to do so
31028
26:36:27,119 --> 26:36:31,512
let's just say we have the final off
31029
26:36:29,440 --> 26:36:33,279
user and it's going to auto import it
31030
26:36:31,512 --> 26:36:35,512
for me if you're using vim if you're on
31031
26:36:33,279 --> 26:36:37,279
linux and or if you're using subline
31032
26:36:35,512 --> 26:36:38,872
that it's not able to auto import things
31033
26:36:37,279 --> 26:36:41,911
then you'll need to auto you need to
31034
26:36:38,872 --> 26:36:44,080
import off user yourself okay
31035
26:36:41,911 --> 26:36:45,831
so let's say that a state of logged in
31036
26:36:44,080 --> 26:36:48,160
or always carries with itself the
31037
26:36:45,831 --> 26:36:50,080
currently logged in user okay so we're
31038
26:36:48,160 --> 26:36:52,552
just going to say user and i'm going to
31039
26:36:50,080 --> 26:36:54,080
create a constant constructor then for
31040
26:36:52,551 --> 26:36:55,759
this class as well which in turn is
31041
26:36:55,759 --> 26:37:02,319
automatically for us on off state okay
31042
26:36:58,639 --> 26:37:04,000
so that's our state of logged in
31043
26:37:02,320 --> 26:37:05,280
now let's say that we're going to define
31044
26:37:05,279 --> 26:37:10,872
a logged out state and but also we want
31045
26:37:11,600 --> 26:37:16,480
actually before we go to log out maybe
31046
26:37:13,600 --> 26:37:18,232
we have to talk about talk about login
31047
26:37:16,479 --> 26:37:21,119
when you're trying to log in a user in
31048
26:37:18,232 --> 26:37:23,760
our application today if we go to our
31049
26:37:21,119 --> 26:37:26,319
login view you'll see that upon pressing
31050
26:37:23,759 --> 26:37:28,399
the button to log in then we're doing a
31051
26:37:26,320 --> 26:37:29,832
try a weight of auth service firebase
31052
26:37:28,399 --> 26:37:32,000
login so we're literally going towards
31053
26:37:29,831 --> 26:37:34,720
firebase directly and then if anything
31054
26:37:32,000 --> 26:37:37,279
goes wrong then we're doing like a user
31055
26:37:34,720 --> 26:37:39,119
not found off exception wrong password
31056
26:37:37,279 --> 26:37:41,440
off exception so we're handling our
31057
26:37:39,119 --> 26:37:44,639
exceptions in this way and the way that
31058
26:37:41,440 --> 26:37:47,440
we need to do this now with uh fire with
31059
26:37:44,639 --> 26:37:50,232
block is that we need to produce a state
31060
26:37:47,440 --> 26:37:52,639
you see the ui needs to only talk with
31061
26:37:50,232 --> 26:37:55,040
that block so it says hey block here's
31062
26:37:55,039 --> 26:37:58,231
and then it says and then a blog is
31063
26:37:56,639 --> 26:38:00,551
going to do some processing and then
31064
26:37:58,232 --> 26:38:02,480
maybe it says oh incorrect user
31065
26:38:02,479 --> 26:38:09,119
or password is wrong or whatever so that
31066
26:38:06,232 --> 26:38:10,720
needs to be its own state so
31067
26:38:10,720 --> 26:38:16,639
an exception has occurred during login
31068
26:38:13,512 --> 26:38:18,960
that is a state login failure we're
31069
26:38:16,639 --> 26:38:20,551
going to call it login failure so the ui
31070
26:38:18,960 --> 26:38:22,800
is then going to react to that
31071
26:38:20,551 --> 26:38:25,039
particular state in order to display for
31072
26:38:22,800 --> 26:38:26,960
instance an error message to the user
31073
26:38:34,479 --> 26:38:38,080
and we're going to extend our off state
31074
26:38:36,720 --> 26:38:39,512
in here and what we're going to do is
31075
26:38:39,512 --> 26:38:44,720
a login failure we need to carry with
31076
26:38:42,479 --> 26:38:46,720
that state the actual exception that
31077
26:38:44,720 --> 26:38:49,119
caused the failure so let's just in here
31078
26:38:46,720 --> 26:38:51,360
say exception exception just like we're
31079
26:38:49,119 --> 26:38:53,599
doing we're carrying the user with us
31080
26:38:51,360 --> 26:38:55,911
when you log in we carry the exception
31081
26:38:53,600 --> 26:38:58,639
with us as well if you couldn't log in
31082
26:38:55,911 --> 26:39:01,119
okay so that's how you should think as
31083
26:38:58,639 --> 26:39:03,831
well so your state should carry with
31084
26:39:01,119 --> 26:39:07,039
them all the information the ui or the
31085
26:39:03,831 --> 26:39:08,871
consumer of that blog requires in order
31086
26:39:11,831 --> 26:39:15,439
so in this case upon not being able to
31087
26:39:15,440 --> 26:39:19,680
the ui is going to require the actual
31088
26:39:17,512 --> 26:39:21,832
exception that occurred so that it can
31089
26:39:19,679 --> 26:39:23,679
switch on it or do some if statements
31090
26:39:21,831 --> 26:39:25,911
and see what kind of exception it was
31091
26:39:23,679 --> 26:39:28,000
and display the correct correct
31092
26:39:28,000 --> 26:39:32,960
so let's go ahead and then define that
31093
26:39:30,232 --> 26:39:34,800
and since we've expected an exception in
31094
26:39:32,960 --> 26:39:37,192
here i'm going to create a constant
31095
26:39:38,232 --> 26:39:41,832
oh actually we got a warning here it
31096
26:39:39,679 --> 26:39:43,359
says prefer declaring cons constructors
31097
26:39:41,831 --> 26:39:47,279
on immutable classes that's actually
31098
26:39:43,360 --> 26:39:51,039
beautiful yes sorry constant fantastic
31099
26:39:47,279 --> 26:39:53,119
okay so that's our login failure
31100
26:39:51,039 --> 26:39:55,119
then what we need is you remember also i
31101
26:39:53,119 --> 26:39:57,279
mean at the moment since we have our
31102
26:39:55,119 --> 26:39:59,440
counter block uh in here and the counter
31103
26:39:57,279 --> 26:40:01,440
application that we did in the previous
31104
26:39:59,440 --> 26:40:03,512
chapter i can't show you the ui of the
31105
26:40:01,440 --> 26:40:06,000
application but if you can recall what
31106
26:40:03,512 --> 26:40:08,720
we also had is if you try to log in with
31107
26:40:06,000 --> 26:40:11,512
a user and that user's email is not
31108
26:40:08,720 --> 26:40:12,872
verified when they were actually gonna
31109
26:40:11,512 --> 26:40:14,720
what we are what we were doing is that
31110
26:40:12,872 --> 26:40:16,639
we were sending the the user to the
31111
26:40:14,720 --> 26:40:19,440
needs verification view or something
31112
26:40:16,639 --> 26:40:22,000
that we call it let's say let's see very
31113
26:40:19,440 --> 26:40:24,800
verify email view right so we sent the
31114
26:40:22,000 --> 26:40:27,360
user to this view and we need to also
31115
26:40:24,800 --> 26:40:30,479
we need to also produce that state so
31116
26:40:27,360 --> 26:40:33,279
upon user pressing the login button and
31117
26:40:30,479 --> 26:40:35,599
if our off block realizes that hey this
31118
26:40:33,279 --> 26:40:38,399
user does exist but here she hasn't
31119
26:40:35,600 --> 26:40:40,552
verified their email address then we're
31120
26:40:38,399 --> 26:40:43,360
gonna produce a state telling you ui
31121
26:40:40,551 --> 26:40:44,959
that hey this user needs to verify their
31122
26:40:44,960 --> 26:40:49,600
let's go ahead and implement that so
31123
26:40:56,000 --> 26:41:00,399
and then here we're just gonna grab this
31124
26:40:57,831 --> 26:41:02,639
as a cons constructor like this all
31125
26:41:04,320 --> 26:41:09,760
and also after doing that so now we have
31126
26:41:06,639 --> 26:41:12,319
login and login failure we have needs
31127
26:41:09,759 --> 26:41:14,080
verification and we have the loading
31128
26:41:12,320 --> 26:41:15,680
state if we're in the middle of for
31129
26:41:14,080 --> 26:41:16,960
instance making an api call that could
31130
26:41:16,960 --> 26:41:20,720
the other state that we need is also
31131
26:41:18,872 --> 26:41:22,639
logged out if you're in the log out
31132
26:41:20,720 --> 26:41:26,399
state then we need to produce that so
31133
26:41:22,639 --> 26:41:28,160
let's just say class off state um
31134
26:41:32,479 --> 26:41:36,639
and this is going to extend offset as
31135
26:41:36,639 --> 26:41:42,800
let's then make a constant constructor
31136
26:41:38,960 --> 26:41:44,552
for this like this great all right
31137
26:41:42,800 --> 26:41:45,832
so log out when you're logged out you're
31138
26:41:44,551 --> 26:41:47,360
logged out there's nothing that the
31139
26:41:45,831 --> 26:41:48,871
logged out state actually has to carry
31140
26:41:47,360 --> 26:41:51,191
with itself it doesn't have to carry the
31141
26:41:48,872 --> 26:41:53,279
currently logged in user or anything or
31142
26:41:51,191 --> 26:41:55,512
even the current user in firebase even
31143
26:41:53,279 --> 26:41:57,119
if even if you have anonymous users the
31144
26:41:55,512 --> 26:41:58,479
logged out state for our application
31145
26:41:57,119 --> 26:42:00,799
doesn't have to carry with itself
31146
26:42:00,800 --> 26:42:06,232
and last but not least we also have to
31147
26:42:02,800 --> 26:42:08,479
define our logout errors and so upon
31148
26:42:08,479 --> 26:42:12,720
encounter some errors like if if
31149
26:42:11,191 --> 26:42:14,799
a firebase for some reason is trying to
31150
26:42:12,720 --> 26:42:16,872
make an api call and that api call
31151
26:42:14,800 --> 26:42:19,440
doesn't succeed then it is going to give
31152
26:42:16,872 --> 26:42:21,760
us an error so let's just define that as
31153
26:42:19,440 --> 26:42:24,080
well let's just say class you see we
31154
26:42:21,759 --> 26:42:26,799
have that already for login failure
31155
26:42:24,080 --> 26:42:28,320
let's go and actually copy that and
31156
26:42:28,320 --> 26:42:32,720
and here instead of login i'm just going
31157
26:42:30,080 --> 26:42:34,720
to say log out failure and copy that
31158
26:42:32,720 --> 26:42:37,040
name and put it in the consonant
31159
26:42:44,551 --> 26:42:47,512
off states so that looks actually really
31160
26:42:47,512 --> 26:42:50,400
so our auth states are now defined okay
31161
26:42:55,191 --> 26:43:01,039
we need to define the inputs you see the
31162
26:42:58,800 --> 26:43:03,040
states have been the output of our off
31163
26:43:01,039 --> 26:43:05,360
block which we're going to write soon
31164
26:43:03,039 --> 26:43:07,831
the off block we haven't written it yet
31165
26:43:05,360 --> 26:43:11,119
but these have been the outputs now what
31166
26:43:07,831 --> 26:43:13,599
are the inputs imagine in our off inputs
31167
26:43:11,119 --> 26:43:16,871
we have to think about what the ui what
31168
26:43:13,600 --> 26:43:19,600
the ui is actually going to call so
31169
26:43:16,872 --> 26:43:21,512
the ui is going to send packages of data
31170
26:43:19,600 --> 26:43:23,832
to this off block and these packages of
31171
26:43:21,512 --> 26:43:25,600
data are the events so we need to make
31172
26:43:25,600 --> 26:43:31,600
can contain with them the data that the
31173
26:43:28,320 --> 26:43:33,760
ui can package and send to our off block
31174
26:43:31,600 --> 26:43:36,232
for instance during logging in what
31175
26:43:33,759 --> 26:43:38,871
event is it okay it's let's just say off
31176
26:43:36,232 --> 26:43:40,720
event login what should it contain well
31177
26:43:38,872 --> 26:43:43,760
it should be the email and password
31178
26:43:40,720 --> 26:43:46,000
something like that okay upon log out
31179
26:43:43,759 --> 26:43:47,119
okay that's a log out event what should
31180
26:43:47,119 --> 26:43:50,479
no it's nothing it's just a log out
31181
26:43:48,872 --> 26:43:52,080
event it shouldn't even provide the
31182
26:43:50,479 --> 26:43:54,319
email and password it should log out the
31183
26:43:52,080 --> 26:43:55,911
currently logged in user from the
31184
26:43:55,911 --> 26:44:01,279
so we need to think about events and
31185
26:43:58,720 --> 26:44:03,600
their consumers and also the states and
31186
26:44:01,279 --> 26:44:06,479
their consumers so you have to pack
31187
26:44:03,600 --> 26:44:08,552
enough information both into your states
31188
26:44:08,551 --> 26:44:14,479
so that the consumer of your blog can
31189
26:44:11,759 --> 26:44:16,080
actually both receive enough information
31190
26:44:14,479 --> 26:44:18,800
and be able to pack enough information
31191
26:44:21,911 --> 26:44:27,119
okay now what we need to do is just go
31192
26:44:24,232 --> 26:44:30,720
and define our auth event right here in
31193
26:44:27,119 --> 26:44:32,551
lib services auth block off state
31194
26:44:30,720 --> 26:44:34,160
we have written our off state so i'm
31195
26:44:32,551 --> 26:44:36,959
just going to close that file and let's
31196
26:44:34,160 --> 26:44:39,760
go in the same folder called blocking
31197
26:44:36,960 --> 26:44:41,360
here you see lib services auth block
31198
26:44:39,759 --> 26:44:44,159
we're going to create a new file called
31199
26:44:41,360 --> 26:44:46,232
auth event so right click new file off
31200
26:44:49,360 --> 26:44:53,759
all right and now we have our off event
31201
26:44:52,080 --> 26:44:56,080
and we need to do something very similar
31202
26:44:53,759 --> 26:44:57,439
to what we did with off state in that we
31203
26:44:59,911 --> 26:45:04,319
a super class an abstract class that
31204
26:45:04,320 --> 26:45:09,760
engulfs all other um auth event so every
31205
26:45:08,232 --> 26:45:12,080
auth event in our application is going
31206
26:45:09,759 --> 26:45:14,959
to be of this type so let's say
31207
26:45:12,080 --> 26:45:17,759
immutable and we don't have access to it
31208
26:45:17,759 --> 26:45:20,831
let me just write it for now let's just
31209
26:45:23,440 --> 26:45:27,832
and a constant constructor which you now
31210
26:45:29,512 --> 26:45:34,720
an immutable comes from foundation we've
31211
26:45:31,759 --> 26:45:36,479
already done this so import immutable
31212
26:45:42,320 --> 26:45:46,640
sorry i programming quite a lot of
31213
26:45:43,831 --> 26:45:49,191
languages python and rust and swift and
31214
26:45:46,639 --> 26:45:50,960
you name it javascript so it's sometimes
31215
26:45:49,191 --> 26:45:52,159
a little bit messy in my head about
31216
26:45:53,831 --> 26:45:56,959
there are quite a lot of different ways
31217
26:45:55,759 --> 26:45:59,831
of important things in different
31218
26:45:56,960 --> 26:46:02,720
languages so i sometimes mix them up
31219
26:45:59,831 --> 26:46:05,759
and so now we have our aus event
31220
26:46:02,720 --> 26:46:08,720
which is an immutable abstract class so
31221
26:46:05,759 --> 26:46:11,599
now what we need from the ui is upon it
31222
26:46:08,720 --> 26:46:13,279
wanting to initialize our auth you see
31223
26:46:11,600 --> 26:46:14,720
at the moment let's see actually what we
31224
26:46:14,720 --> 26:46:18,872
main dart file this is just us having a
31225
26:46:20,800 --> 26:46:25,680
and that's that's the counter block but
31226
26:46:23,600 --> 26:46:29,040
how we had it before is if you remember
31227
26:46:25,679 --> 26:46:31,511
in our home page we had upon the entire
31228
26:46:29,039 --> 26:46:33,759
home page being loaded we were saying
31229
26:46:31,512 --> 26:46:36,960
auth service firebase initialize so this
31230
26:46:33,759 --> 26:46:39,191
is a signal from the ui that needs to
31231
26:46:36,960 --> 26:46:41,192
now go to our auth block and say hey
31232
26:46:41,191 --> 26:46:48,551
let's define that signal or event
31233
26:46:45,440 --> 26:46:50,740
let's say auth event initialize
31234
26:46:52,399 --> 26:46:57,831
and it has no parameters it's as you saw
31235
26:46:55,360 --> 26:46:59,600
in main darts it's literally just a
31236
26:46:57,831 --> 26:47:01,511
function being called so we're going to
31237
26:46:59,600 --> 26:47:04,400
represent it with an event that has no
31238
26:47:01,512 --> 26:47:06,232
parameters but it has a constant
31239
26:47:06,232 --> 26:47:11,680
that's that's that okay we have now our
31240
26:47:11,679 --> 26:47:16,231
what we also need is an auth event for
31241
26:47:14,399 --> 26:47:18,000
logging in and as i mentioned it's very
31242
26:47:16,232 --> 26:47:19,911
simple it's just with an email and
31243
26:47:18,000 --> 26:47:21,831
password so let's just go ahead and say
31244
26:47:21,831 --> 26:47:29,360
of event login something like this
31245
26:47:25,039 --> 26:47:30,871
or log in with a capital i extends off
31246
26:47:30,872 --> 26:47:35,192
and we need we need two parameters to be
31247
26:47:33,039 --> 26:47:36,871
passed in here let's just say final
31248
26:47:36,872 --> 26:47:40,832
and we also need a password so let's
31249
26:47:40,831 --> 26:47:45,759
password and now we have the email and
31250
26:47:43,911 --> 26:47:47,911
password we're just going to create a
31251
26:47:45,759 --> 26:47:50,080
constructor here and make it constant
31252
26:47:50,080 --> 26:47:56,960
so now we have our login event
31253
26:47:54,639 --> 26:47:58,960
and so login event should carry with
31254
26:47:56,960 --> 26:48:01,680
itself every piece of information that
31255
26:47:58,960 --> 26:48:04,080
the auth block will need in the future
31256
26:48:01,679 --> 26:48:06,231
in order to log in that user into the
31257
26:48:04,080 --> 26:48:08,160
into our provider which in this case is
31258
26:48:08,160 --> 26:48:12,639
so after defining login we also need to
31259
26:48:10,399 --> 26:48:14,551
define log out now if you have a look at
31260
26:48:14,551 --> 26:48:20,231
there are so many files in here so views
31261
26:48:17,191 --> 26:48:22,551
and we have notes and then we have
31262
26:48:20,232 --> 26:48:24,320
excuse me we have notes view if you have
31263
26:48:22,551 --> 26:48:27,119
a look at notes view if you have a look
31264
26:48:24,320 --> 26:48:29,832
at this and log out what it's doing as
31265
26:48:27,119 --> 26:48:32,799
you can see it's a weight of service
31266
26:48:32,800 --> 26:48:37,279
so this is a clear event with no
31267
26:48:35,039 --> 26:48:39,039
parameters it's just telling the off
31268
26:48:37,279 --> 26:48:41,679
block then or in this case the off
31269
26:48:39,039 --> 26:48:44,159
service that hey you need to log out no
31270
26:48:41,679 --> 26:48:45,831
parameters log out the current user okay
31271
26:48:44,160 --> 26:48:47,760
so let's go and define that as well in
31272
26:48:45,831 --> 26:48:48,959
here so let's just say class
31273
26:48:48,960 --> 26:48:55,360
event log out extends off event
31274
26:48:53,119 --> 26:48:57,191
and it has no parameters as i mentioned
31275
26:48:55,360 --> 26:48:59,039
so let's create a constant constructor
31276
26:48:57,191 --> 26:49:01,360
for it which in turn is going to call
31277
26:48:59,039 --> 26:49:04,959
the constant constructor of the abstract
31278
26:49:05,759 --> 26:49:10,639
all right fantastic those were the only
31279
26:49:08,479 --> 26:49:12,551
events that we had to define initialize
31280
26:49:10,639 --> 26:49:14,639
login and log out so these are the
31281
26:49:12,551 --> 26:49:19,039
inputs to the block and then we had our
31282
26:49:14,639 --> 26:49:20,960
auth states which are the output our
31283
26:49:19,039 --> 26:49:22,231
outputs of our off block which we're
31284
26:49:25,600 --> 26:49:29,760
so we have the events and the states the
31285
26:49:27,440 --> 26:49:31,911
only thing that's missing is the
31286
26:49:29,759 --> 26:49:35,279
uh auth block itself so let's go ahead
31287
26:49:31,911 --> 26:49:38,399
inside this block folder create an off
31288
26:49:44,720 --> 26:49:49,512
now we need to actually write our auth
31289
26:49:47,191 --> 26:49:51,279
block and this is for me at least this
31290
26:49:55,831 --> 26:50:00,399
because we're going to put together
31291
26:49:58,080 --> 26:50:02,080
three pieces of uh two pieces of
31292
26:50:00,399 --> 26:50:04,319
information the states and the events
31293
26:50:02,080 --> 26:50:06,639
and now we're creating the actual login
31294
26:50:04,320 --> 26:50:07,512
the logic of our authentication block so
31295
26:50:07,512 --> 26:50:13,191
very exciting so let's say class
31296
26:50:10,160 --> 26:50:14,639
off block like this extend block now
31297
26:50:13,191 --> 26:50:16,639
it's going to complain saying that well
31298
26:50:16,639 --> 26:50:21,679
so let's go ahead and import that import
31299
26:50:19,360 --> 26:50:23,831
that as you can see here now remember
31300
26:50:21,679 --> 26:50:26,319
block if you go into source code it has
31301
26:50:23,831 --> 26:50:28,551
two parameters there's two generic data
31302
26:50:26,320 --> 26:50:31,192
types in here event and state
31303
26:50:28,551 --> 26:50:33,119
our events are called off event and it's
31304
26:50:31,191 --> 26:50:35,759
going to auto import that and then we
31305
26:50:35,759 --> 26:50:39,911
like this which also is going to be auto
31306
26:50:40,720 --> 26:50:45,759
just like our off service if we go back
31307
26:50:43,191 --> 26:50:47,759
to our off service in here you'll see
31308
26:50:45,759 --> 26:50:50,959
that our auth service at the moment is
31309
26:50:47,759 --> 26:50:52,479
taking in as a parameter a provider so
31310
26:50:50,960 --> 26:50:54,480
we're going to do the exact same thing
31311
26:50:52,479 --> 26:50:56,720
in our auth block it's going to say
31312
26:50:54,479 --> 26:50:59,360
give us a provider to work with is it a
31313
26:50:56,720 --> 26:51:00,232
firebase provider or what is it
31314
26:51:00,232 --> 26:51:03,760
but we're not gonna directly go and say
31315
26:51:02,080 --> 26:51:05,512
give us a firebase provider we're gonna
31316
26:51:03,759 --> 26:51:07,191
say give us an auth provider remember
31317
26:51:05,512 --> 26:51:08,479
that we had an abstract class called
31318
26:51:12,960 --> 26:51:18,080
the logic or defines the interface for
31319
26:51:16,320 --> 26:51:19,760
every auth provider whether it's a
31320
26:51:18,080 --> 26:51:21,759
firebase auth provider gmail auto
31321
26:51:21,759 --> 26:51:25,679
that's how the interface should look
31322
26:51:23,440 --> 26:51:27,600
like okay so what we need to do is to
31323
26:51:27,600 --> 26:51:31,440
a constructor and in here what we're
31324
26:51:29,512 --> 26:51:32,639
going to say is to give us an auth
31325
26:51:32,639 --> 26:51:36,639
we expect an auth provider auto import
31326
26:51:35,119 --> 26:51:38,159
okay so if you're getting errors here
31327
26:51:36,639 --> 26:51:40,479
it's because you have an imported off
31328
26:51:38,160 --> 26:51:42,639
provider the way visual studio code just
31329
26:51:40,479 --> 26:51:44,551
imported it for me right now
31330
26:51:44,551 --> 26:51:48,319
that we call the provider in our
31331
26:51:46,551 --> 26:51:50,080
constructor and if you remember
31332
26:51:48,320 --> 26:51:52,232
correctly from the previous chapter we
31333
26:51:50,080 --> 26:51:54,232
need to also make sure that auth block
31334
26:51:56,639 --> 26:52:01,360
that's what block as a super class
31335
26:51:59,279 --> 26:52:03,279
requires so let's see you see that's the
31336
26:52:03,279 --> 26:52:10,160
of the block libraries block class that
31337
26:52:06,800 --> 26:52:12,720
says it should have an initial state so
31338
26:52:10,160 --> 26:52:14,872
our initial initial state is going to be
31339
26:52:12,720 --> 26:52:17,759
in the k in the state of loading so
31340
26:52:14,872 --> 26:52:18,800
let's say off state loading
31341
26:52:22,479 --> 26:52:27,119
okay so and i can see right now that i'm
31342
26:52:24,639 --> 26:52:30,551
not using scr cpy so much so i'm just
31343
26:52:30,551 --> 26:52:33,512
yeah i'm just moving it to another
31344
26:52:33,512 --> 26:52:37,680
so we don't get bothered by it and that
31345
26:52:35,759 --> 26:52:40,551
enables me then to increase the size of
31346
26:52:37,679 --> 26:52:42,799
visual studio code in width so it's a
31347
26:52:42,800 --> 26:52:47,600
so i'm gonna go create a constant here
31348
26:52:45,440 --> 26:52:49,600
and then we're gonna create our curly
31349
26:52:47,600 --> 26:52:51,600
brackets in order to go to the actual
31350
26:52:49,600 --> 26:52:54,639
initializer or the constructor of this
31351
26:52:54,639 --> 26:53:00,232
all right now your job in here inside
31352
26:52:57,119 --> 26:53:03,279
the auth block is to actually handle
31353
26:53:00,232 --> 26:53:06,160
various events and then based on those
31354
26:53:06,160 --> 26:53:11,600
what is the first event remember this
31355
26:53:08,160 --> 26:53:14,320
event initialize so if the user tells us
31356
26:53:14,320 --> 26:53:18,640
auth block what should we do well we
31357
26:53:16,639 --> 26:53:21,039
should go to that provider and actually
31358
26:53:21,039 --> 26:53:25,599
so let's go ahead and do that so i'm
31359
26:53:22,960 --> 26:53:27,680
just going to say on off event
31360
26:53:27,679 --> 26:53:33,679
and remember every on function you see
31361
26:53:33,679 --> 26:53:39,039
the event let's see actually yeah it's
31362
26:53:36,160 --> 26:53:41,832
the event and then an emitter it's not
31363
26:53:44,000 --> 26:53:49,600
it's quite generic it's i would say it's
31364
26:53:49,600 --> 26:53:54,552
but that's that's the way it is so we
31365
26:53:51,512 --> 26:53:56,720
take the event that came in so in case
31366
26:53:54,551 --> 26:53:58,080
you need to extract some data from your
31367
26:53:58,080 --> 26:54:03,600
in this case initialize is an empty
31368
26:54:00,232 --> 26:54:05,911
class so it has no data but it when we
31369
26:54:03,600 --> 26:54:09,680
actually start loading for instance and
31370
26:54:05,911 --> 26:54:11,831
we start handling the login event we do
31371
26:54:09,679 --> 26:54:13,599
need the events to actually come in so
31372
26:54:11,831 --> 26:54:16,159
that we can extract this email and
31373
26:54:13,600 --> 26:54:18,080
password okay but in the case of event
31374
26:54:16,160 --> 26:54:20,400
initialize the event is pretty much
31375
26:54:18,080 --> 26:54:22,400
useless so we could literally ignore it
31376
26:54:20,399 --> 26:54:25,759
by just doing something like this okay
31377
26:54:22,399 --> 26:54:28,399
but we're gonna take it in anyways
31378
26:54:25,759 --> 26:54:31,119
so now that we have that event we the
31379
26:54:28,399 --> 26:54:35,039
second parameter in here is called emit
31380
26:54:31,119 --> 26:54:38,319
and emits then allows you to um
31381
26:54:35,039 --> 26:54:42,159
actually emit and send states from your
31382
26:54:38,320 --> 26:54:44,232
off block out to whoever is watching
31383
26:54:42,160 --> 26:54:47,040
the stage changes in your off block
31384
26:54:44,232 --> 26:54:49,279
which is going to be our ui okay so emit
31385
26:54:47,039 --> 26:54:51,360
is your way out is your communication
31386
26:54:51,360 --> 26:54:55,440
so let's make this function asynchronous
31387
26:54:55,440 --> 26:55:00,400
gonna call our provider and call some
31388
26:54:57,911 --> 26:55:03,911
asynchronous functionality on it so
31389
26:55:00,399 --> 26:55:05,599
let's go ahead and see if we can do that
31390
26:55:03,911 --> 26:55:07,759
so the first thing that we need to do in
31391
26:55:05,600 --> 26:55:09,440
here is to call our provider and say
31392
26:55:09,440 --> 26:55:14,320
and initialize you can see is it returns
31393
26:55:11,512 --> 26:55:16,720
a future of void so i'm just gonna wait
31394
26:55:14,320 --> 26:55:19,440
on it all right so then what we're gonna
31395
26:55:16,720 --> 26:55:20,639
do is to say okay after doing that we're
31396
26:55:20,639 --> 26:55:26,800
final user is provider current user and
31397
26:55:23,911 --> 26:55:28,551
that is an optional off user if you
31398
26:55:26,800 --> 26:55:30,872
remember from its function signal or
31399
26:55:28,551 --> 26:55:34,000
from its getter signature you see
31400
26:55:34,872 --> 26:55:40,400
null after doing an initialize then we
31401
26:55:37,191 --> 26:55:42,551
know that the state should be logged out
31402
26:55:40,399 --> 26:55:44,720
it means we initialize the provider but
31403
26:55:42,551 --> 26:55:48,159
there is no user you are logged out okay
31404
26:55:44,720 --> 26:55:51,440
so let's just say if user is null
31405
26:55:48,160 --> 26:55:54,800
then we're going to emit a new state and
31406
26:55:51,440 --> 26:55:55,832
we're going to say auth state logged out
31407
26:56:03,911 --> 26:56:07,831
so now we have a user we're sure that
31408
26:56:05,679 --> 26:56:10,639
we're not coming into this block here
31409
26:56:07,831 --> 26:56:12,871
that says auth user is null if there is
31410
26:56:10,639 --> 26:56:14,232
a user but that user is not email
31411
26:56:12,872 --> 26:56:15,512
verified then we're going to produce
31412
26:56:21,600 --> 26:56:26,320
is email verified not so it's not email
31413
26:56:24,399 --> 26:56:29,439
verified then we're gonna emit
31414
26:56:31,600 --> 26:56:35,912
okay so that makes sense as well
31415
26:56:34,000 --> 26:56:39,831
otherwise we're going to say where our
31416
26:56:35,911 --> 26:56:42,160
state is bought state logged in and
31417
26:56:39,831 --> 26:56:45,759
remember the logged in state actually
31418
26:56:46,872 --> 26:56:51,040
um that is actually working quite well
31419
26:56:55,440 --> 26:57:00,639
that shouldn't really happen because the
31420
26:57:00,639 --> 26:57:04,960
so we have already checked the user so
31421
26:57:02,800 --> 26:57:07,040
we could put let's see what is it
31422
26:57:07,039 --> 26:57:12,159
user value of type null can't be
31423
26:57:09,831 --> 26:57:15,599
assigned to a parameter of auth user in
31424
26:57:12,160 --> 26:57:18,800
a cons constructor try using a subtype
31425
26:57:15,600 --> 26:57:20,160
or removing the keyword const and
31426
26:57:18,800 --> 26:57:21,120
i mean i understand this part to be
31427
26:57:20,160 --> 26:57:22,639
honest with you and that's correct
31428
26:57:21,119 --> 26:57:24,231
that's a mistake that i've made in here
31429
26:57:22,639 --> 26:57:26,160
and that's because i said a constant
31430
26:57:24,232 --> 26:57:28,320
constructor is being called with a user
31431
26:57:26,160 --> 26:57:31,192
which is a variable so you should also
31432
26:57:28,320 --> 26:57:33,760
know that we can't do that all right
31433
26:57:31,191 --> 26:57:36,231
because user in itself is not const
31434
26:57:33,759 --> 26:57:38,799
hence we can't call a const constructor
31435
26:57:36,232 --> 26:57:40,400
on a on a state that uses a variable
31436
26:57:41,360 --> 26:57:46,000
now we've handled the initialize events
31437
26:57:46,000 --> 26:57:50,232
what we need to do is to handle the
31438
26:57:47,911 --> 26:57:52,000
login event so let's go ahead after this
31439
26:57:50,232 --> 26:57:53,192
i'm just going to put a comment in here
31440
26:57:53,191 --> 26:57:57,039
initialize just to make things a little
31441
26:57:55,360 --> 26:57:59,191
bit separate from each other and then
31442
26:57:59,191 --> 26:58:02,319
i'm going to bring the code up so you
31443
26:58:00,551 --> 26:58:03,911
see it sorry about that it was a little
31444
26:58:02,320 --> 26:58:06,800
bit hidden when i wrote this comment so
31445
26:58:03,911 --> 26:58:09,440
now you can see how it looks like
31446
26:58:06,800 --> 26:58:12,000
then we're going to handle login events
31447
26:58:09,440 --> 26:58:14,400
so remember again an event is something
31448
26:58:12,000 --> 26:58:16,800
that the ui is going to send us and that
31449
26:58:14,399 --> 26:58:18,959
event if you remember it has a username
31450
26:58:16,800 --> 26:58:20,720
sorry an email and a password then we're
31451
26:58:18,960 --> 26:58:23,280
going to unpack that email and password
31452
26:58:20,720 --> 26:58:25,360
provided to give it to our provider and
31453
26:58:23,279 --> 26:58:27,600
provide it to our provider give it to
31454
26:58:25,360 --> 26:58:29,600
the provider and then react to the
31455
26:58:27,600 --> 26:58:31,912
various results that come back from the
31456
26:58:33,039 --> 26:58:39,360
so we're gonna say then on off event
31457
26:58:36,479 --> 26:58:41,911
login oops yeah login and we're going to
31458
26:58:41,911 --> 26:58:46,319
and we're going to say this is an async
31459
26:58:43,600 --> 26:58:48,000
function and it goes in here all right
31460
26:58:48,000 --> 26:58:53,600
now this is the beauty of a blog using
31461
26:58:50,551 --> 26:58:55,039
emit you can let your consumers know
31462
26:58:55,039 --> 26:58:59,119
let's say someone says login what is the
31463
26:58:57,119 --> 26:59:01,279
first thing that we're up to yeah we are
31464
26:58:59,119 --> 26:59:02,871
loading we are in the state of loading
31465
26:59:01,279 --> 26:59:05,279
because we are going to start loading
31466
26:59:02,872 --> 26:59:08,720
and make api calls and that's exactly
31467
26:59:05,279 --> 26:59:10,800
why we have these off states in here
31468
26:59:08,720 --> 26:59:12,872
remember we have the auth state of
31469
26:59:10,800 --> 26:59:14,320
loading so let's change our state as
31470
26:59:12,872 --> 26:59:16,720
soon as you tell us to log in we're
31471
26:59:14,320 --> 26:59:19,192
going to say oh now we're loading okay
31472
26:59:16,720 --> 26:59:21,191
because we don't have a state that says
31473
26:59:21,191 --> 26:59:24,399
but we have a general state that says
31474
26:59:24,399 --> 26:59:27,599
if you want to you could remove this
31475
26:59:29,360 --> 26:59:35,680
i have a class for instance auth state
31476
26:59:32,960 --> 26:59:38,000
logging in that's also acceptable but
31477
26:59:41,191 --> 26:59:45,831
uh state for everything like even if
31478
26:59:43,360 --> 26:59:48,551
you're logging out you should say off
31479
26:59:48,551 --> 26:59:52,551
uh so then you have to have a loading
31480
26:59:50,399 --> 26:59:54,479
state for pretty much all the states
31481
26:59:52,551 --> 26:59:55,759
that do something asynchronous
31482
26:59:54,479 --> 26:59:58,080
and that's why we haven't done that we
31483
26:59:55,759 --> 27:00:00,551
have a generic or a general loading
31484
26:59:58,080 --> 27:00:02,400
state that indicates to the outside
31485
27:00:06,232 --> 27:00:09,120
don't worry about all these saved
31486
27:00:07,512 --> 27:00:11,512
operations that have been in this off
31487
27:00:09,119 --> 27:00:14,000
state file i pretty much i mean i didn't
31488
27:00:11,512 --> 27:00:16,320
change anything in this file okay so it
31489
27:00:14,000 --> 27:00:17,831
is how we left it when we finished off
31490
27:00:17,831 --> 27:00:23,360
all right so let's in here then emit a
31491
27:00:25,360 --> 27:00:29,039
and upon logging in what we need to do
31492
27:00:27,279 --> 27:00:30,959
is just to grab the email so we're just
31493
27:00:29,039 --> 27:00:34,399
going to say email is equal to the event
31494
27:00:30,960 --> 27:00:35,912
email and password is equal to the event
31495
27:00:43,039 --> 27:00:48,479
so we're gonna say await provider um
31496
27:00:47,039 --> 27:00:50,319
i believe we have let's see what the
31497
27:00:52,399 --> 27:00:57,911
let's then create a user so let's say
31498
27:00:55,039 --> 27:01:01,279
final user is equal to provider dot
31499
27:00:57,911 --> 27:01:02,399
we have a login function on our provider
31500
27:01:02,399 --> 27:01:07,439
and here we're literally passing email
31501
27:01:04,399 --> 27:01:10,159
and password to that function okay and
31502
27:01:07,440 --> 27:01:12,479
remember login function at the provider
31503
27:01:12,479 --> 27:01:16,479
throw an exception but that's fine
31504
27:01:14,399 --> 27:01:18,799
because we have a catch in here so if we
31505
27:01:16,479 --> 27:01:20,551
go to the login function in our auth
31506
27:01:18,800 --> 27:01:22,232
provider let's see if we can find
31507
27:01:22,232 --> 27:01:26,232
inside the login function let's see if
31508
27:01:24,232 --> 27:01:28,000
we can find out here we have various
31509
27:01:26,232 --> 27:01:31,040
exceptions that are going to be thrown
31510
27:01:28,000 --> 27:01:33,191
user not found wrong password generic
31511
27:01:31,039 --> 27:01:34,959
auth exception so if any of those
31512
27:01:33,191 --> 27:01:38,000
exceptions happen we're going to come
31513
27:01:34,960 --> 27:01:39,912
into this catch block all right
31514
27:01:39,911 --> 27:01:44,319
if nothing happens if no exceptions
31515
27:01:41,831 --> 27:01:46,639
happen then we're going to emit and
31516
27:01:44,320 --> 27:01:49,120
we're going to say const or actually we
31517
27:01:46,639 --> 27:01:51,279
can't do a const because a user is a
31518
27:01:49,119 --> 27:01:52,551
variable so we're going to say auth
31519
27:01:53,831 --> 27:01:57,831
and it's just going to say give us a
31520
27:01:57,831 --> 27:02:02,399
should any exception happen we're going
31521
27:01:59,440 --> 27:02:04,479
to emit a login failure and we're going
31522
27:02:10,160 --> 27:02:14,232
what's it failure login failure i can
31523
27:02:14,232 --> 27:02:18,552
and in here we literally pass the
31524
27:02:19,039 --> 27:02:22,959
can't be assigned and then so we
31525
27:02:21,279 --> 27:02:24,720
probably just have to see i can i mean i
31526
27:02:22,960 --> 27:02:27,600
understand this exception as well it's
31527
27:02:24,720 --> 27:02:29,831
because exceptions in dart maybe this is
31528
27:02:29,831 --> 27:02:34,399
side talk but exceptions in dart can be
31529
27:02:32,479 --> 27:02:36,159
anything i mean i posted something on
31530
27:02:34,399 --> 27:02:39,599
linkedin on twitter a while ago saying
31531
27:02:39,600 --> 27:02:43,832
an enum value as an exception and that's
31532
27:02:43,831 --> 27:02:48,231
dart exceptions are of type object and
31533
27:02:46,800 --> 27:02:50,400
in this case i believe they're even
31534
27:02:48,232 --> 27:02:53,120
object optional object no it's actually
31535
27:02:50,399 --> 27:02:54,871
an object so here the error is that
31536
27:02:53,119 --> 27:02:57,191
you're saying that off state login
31537
27:02:54,872 --> 27:02:59,911
failure that needs an exception but
31538
27:02:57,191 --> 27:03:02,080
you're passing it an object so let's say
31539
27:03:07,279 --> 27:03:11,039
and that's because we know that our
31540
27:03:09,039 --> 27:03:12,871
login function is not act let's have a
31541
27:03:11,039 --> 27:03:15,191
look at the login function and see if it
31542
27:03:12,872 --> 27:03:17,440
can throw anything other than an
31543
27:03:15,191 --> 27:03:19,039
exception and we see now that it has a
31544
27:03:19,039 --> 27:03:23,191
block which throws a generic auth
31545
27:03:21,119 --> 27:03:25,599
exception which in turn is an exception
31546
27:03:23,191 --> 27:03:27,599
so in our application right now as it is
31547
27:03:25,600 --> 27:03:29,760
we're not throwing anything that is not
31548
27:03:27,600 --> 27:03:33,192
an exception so every exception is
31549
27:03:29,759 --> 27:03:34,399
coming from the exception class
31550
27:03:34,399 --> 27:03:40,871
fantastic now we have our login um
31551
27:03:38,399 --> 27:03:43,191
event in place and we're emitting the
31552
27:03:40,872 --> 27:03:46,551
correct states logged in or login
31553
27:03:43,191 --> 27:03:48,720
failure now we have to handle log out so
31554
27:03:46,551 --> 27:03:50,720
let me bring the code up and we're going
31555
27:03:48,720 --> 27:03:52,800
to say log out and this is very similar
31556
27:03:50,720 --> 27:03:54,080
to login a little bit less code so let's
31557
27:03:54,080 --> 27:03:58,960
again we're going to handle inputs okay
31558
27:03:58,960 --> 27:04:03,680
event log out so if someone tells us to
31559
27:04:03,679 --> 27:04:08,799
like this then we're gonna say okay we
31560
27:04:06,320 --> 27:04:10,720
take the state oh so much documentation
31561
27:04:12,232 --> 27:04:17,360
and then the emit and then we make this
31562
27:04:14,639 --> 27:04:18,960
function asynchronous like that
31563
27:04:17,360 --> 27:04:19,911
and the first thing that we have to do
31564
27:04:19,911 --> 27:04:24,800
since in log out we're going to call the
31565
27:04:22,320 --> 27:04:26,960
logout on our provider which is an
31566
27:04:24,800 --> 27:04:29,192
asynchronous function we need to tell
31567
27:04:26,960 --> 27:04:31,832
the ui about that we need to tell the ui
31568
27:04:31,831 --> 27:04:36,319
log out from the off block you have to
31569
27:04:34,232 --> 27:04:38,872
do some loading what better way of
31570
27:04:36,320 --> 27:04:41,120
indicating that to the output to the
31571
27:04:38,872 --> 27:04:43,832
outside world by actually changing our
31572
27:04:41,119 --> 27:04:47,279
state using emit so we're going to say
31573
27:04:43,831 --> 27:04:48,639
off state loading okay so that's us
31574
27:04:47,279 --> 27:04:51,600
indicating to the outside world that
31575
27:04:52,399 --> 27:04:57,679
all right so uh let's then do a try and
31576
27:05:03,759 --> 27:05:08,551
if an exception occurs then we're going
31577
27:05:08,639 --> 27:05:13,831
off states failure we had a log out
31578
27:05:11,600 --> 27:05:17,040
failure and that expected an exception
31579
27:05:13,831 --> 27:05:19,039
so i'm just going to put the e in there
31580
27:05:17,039 --> 27:05:20,479
we could also put this image in try it
31581
27:05:19,039 --> 27:05:22,231
doesn't matter because this doesn't
31582
27:05:20,479 --> 27:05:23,679
really throw an exception it can never
31583
27:05:23,679 --> 27:05:26,639
but we're going to put it in try catch
31584
27:05:25,119 --> 27:05:30,159
because i believe just it's a little bit
31585
27:05:26,639 --> 27:05:32,319
cleaner it's it's like a transaction
31586
27:05:30,160 --> 27:05:34,000
so what we're gonna do is to say await
31587
27:05:34,000 --> 27:05:38,720
and log out in here all right and should
31588
27:05:37,039 --> 27:05:40,231
the logout actually go through then
31589
27:05:38,720 --> 27:05:42,160
we're going to go to the next line which
31590
27:05:40,232 --> 27:05:44,400
is line 40 for me maybe another line
31591
27:05:44,399 --> 27:05:50,159
and then in this case we're just going
31592
27:05:45,911 --> 27:05:51,440
to emit a const of off state
31593
27:05:54,960 --> 27:06:01,120
that was it really i mean it was just a
31594
27:05:56,960 --> 27:06:03,192
lot of talk a lot of creation of like uh
31595
27:06:03,191 --> 27:06:07,512
but um we've now gotten there so now we
31596
27:06:05,759 --> 27:06:09,759
have an off block and then we have our
31597
27:06:07,512 --> 27:06:11,600
auth event and off state so now that we
31598
27:06:09,759 --> 27:06:13,279
have those i'm going to close those tabs
31599
27:06:11,600 --> 27:06:16,480
after you've saved them so make sure
31600
27:06:13,279 --> 27:06:17,911
that those files are also saved
31601
27:06:16,479 --> 27:06:20,000
then what we're going to do is just to
31602
27:06:17,911 --> 27:06:21,599
get rid of that ugly counter block that
31603
27:06:20,000 --> 27:06:23,119
we created in the previous chapter which
31604
27:06:23,119 --> 27:06:27,512
dirtying down our main user interface so
31605
27:06:29,279 --> 27:06:36,080
home page the way we have here let's see
31606
27:06:33,440 --> 27:06:37,832
so let's go in this new home page that
31607
27:06:36,080 --> 27:06:40,160
we created for our counter block and
31608
27:06:37,831 --> 27:06:41,759
just completely remove that everything
31609
27:06:40,160 --> 27:06:43,040
that is related to that counter block
31610
27:06:43,039 --> 27:06:48,831
and then let's go ahead and bring back
31611
27:06:51,911 --> 27:06:56,160
we have flutter block and block in there
31612
27:06:53,911 --> 27:06:57,679
and that is causing a little a
31613
27:06:56,160 --> 27:06:59,832
little bit of a problem but that's okay
31614
27:06:59,831 --> 27:07:03,360
so what we need to do now is to actually
31615
27:07:07,512 --> 27:07:11,600
captioning here as you can see now we
31616
27:07:09,279 --> 27:07:13,279
need to use block provider and block
31617
27:07:11,600 --> 27:07:15,760
builder and we're going to do that in
31618
27:07:17,679 --> 27:07:21,359
jumped over the previous chapter because
31619
27:07:19,360 --> 27:07:22,872
i talked a lot about in the previous
31620
27:07:21,360 --> 27:07:24,872
chapter about block providers block
31621
27:07:22,872 --> 27:07:26,320
builders block listeners block consumers
31622
27:07:24,872 --> 27:07:27,832
and what they are how they're different
31623
27:07:26,320 --> 27:07:29,280
from each other and there's a lot of
31624
27:07:27,831 --> 27:07:31,039
information and material available
31625
27:07:29,279 --> 27:07:33,759
online that you can read also
31626
27:07:31,039 --> 27:07:35,439
about all these things online but if
31627
27:07:33,759 --> 27:07:37,039
you've skimmed over that chapter and
31628
27:07:35,440 --> 27:07:39,360
didn't understand really how things
31629
27:07:37,039 --> 27:07:41,439
worked what we need in here just think
31630
27:07:39,360 --> 27:07:44,160
of it that our main application needs to
31631
27:07:41,440 --> 27:07:46,872
offlock the auth block is responsible
31632
27:07:44,160 --> 27:07:49,279
now from this point on to handle
31633
27:07:46,872 --> 27:07:50,639
everything related to authentication
31634
27:07:50,639 --> 27:07:55,119
not the ui part remember the ui part is
31635
27:07:52,872 --> 27:07:58,320
completely separate that's the goal of
31636
27:07:55,119 --> 27:08:00,399
block in its core to separate business
31637
27:07:58,320 --> 27:08:02,232
logic from presentation logic so your
31638
27:08:00,399 --> 27:08:04,479
presentation logic everything related to
31639
27:08:02,232 --> 27:08:06,720
the ui for instance displaying dialogues
31640
27:08:04,479 --> 27:08:09,759
displaying exceptions handling etc etc
31641
27:08:06,720 --> 27:08:12,320
etc that's all in the ui has nothing to
31642
27:08:09,759 --> 27:08:13,511
do with all of what but the off block is
31643
27:08:12,320 --> 27:08:15,600
going to be responsible for actually
31644
27:08:13,512 --> 27:08:17,360
initializing the authentication process
31645
27:08:15,600 --> 27:08:19,040
and also with with firebase and also
31646
27:08:17,360 --> 27:08:20,232
allowing us to log in and log out et
31647
27:08:20,232 --> 27:08:25,279
we need the auth block so how do we get
31648
27:08:22,639 --> 27:08:28,399
off block in our main application since
31649
27:08:25,279 --> 27:08:30,479
the entire application is dependent on
31650
27:08:28,399 --> 27:08:32,079
the auth block even when you're in the
31651
27:08:30,479 --> 27:08:34,800
main ui of the application you should
31652
27:08:32,080 --> 27:08:37,040
still be able to for instance log out
31653
27:08:34,800 --> 27:08:39,680
then we could literally say that oh
31654
27:08:37,039 --> 27:08:42,079
everything inside our application in the
31655
27:08:39,679 --> 27:08:45,359
main function is gonna be dependent on
31656
27:08:42,080 --> 27:08:47,680
that off block so what we're gonna do is
31657
27:08:47,679 --> 27:08:52,639
let's see in here here we're right now
31658
27:08:50,320 --> 27:08:55,040
saying we have a home const homepage you
31659
27:08:52,639 --> 27:08:58,960
see actually let me command s this and
31660
27:08:55,039 --> 27:09:00,959
bring uh scrcpy bag back here
31661
27:09:00,960 --> 27:09:06,400
back so home page is fixed now
31662
27:09:04,399 --> 27:09:08,231
so what we are going to do in here we're
31663
27:09:06,399 --> 27:09:10,079
going to instead of a const homepage
31664
27:09:08,232 --> 27:09:11,680
we're going to replace this with an auth
31665
27:09:12,639 --> 27:09:18,000
we could do this as you can see we have
31666
27:09:15,679 --> 27:09:19,279
um do we have sorry with a block
31667
27:09:19,279 --> 27:09:24,479
i have the block extension in visual
31668
27:09:22,639 --> 27:09:27,759
studio code which then gives me the
31669
27:09:24,479 --> 27:09:28,959
ability to wrap things with various
31670
27:09:28,960 --> 27:09:34,320
components and flutter block components
31671
27:09:31,191 --> 27:09:37,279
and you can go to extensions and install
31672
27:09:37,279 --> 27:09:42,959
extension for visual studio code
31673
27:09:40,320 --> 27:09:44,552
if you're if you're using another uh
31674
27:09:42,960 --> 27:09:47,832
development environment if you're for
31675
27:09:44,551 --> 27:09:51,119
instance using sublime you may not have
31676
27:09:51,119 --> 27:09:56,319
what you'll need to do is to write this
31677
27:09:53,191 --> 27:09:58,551
by hand so i'm gonna take advantage of
31678
27:09:56,320 --> 27:10:00,232
wrapping this homepage with a block
31679
27:10:00,232 --> 27:10:06,552
my home page now let's see here
31680
27:10:03,279 --> 27:10:08,551
let's say this is a const as well
31681
27:10:08,551 --> 27:10:13,360
home page before its creation is
31682
27:10:11,279 --> 27:10:14,232
dependent on the creation of a block
31683
27:10:14,232 --> 27:10:20,000
so let's go in here and say the block
31684
27:10:16,320 --> 27:10:22,232
provider is also using our off block
31685
27:10:20,000 --> 27:10:24,479
which i believe now visual studio code
31686
27:10:22,232 --> 27:10:26,639
is going to auto import you may need to
31687
27:10:24,479 --> 27:10:29,191
import that by hand if you are not using
31688
27:10:26,639 --> 27:10:32,960
visual studio code or an or text editor
31689
27:10:29,191 --> 27:10:34,551
or an id that has this feature
31690
27:10:34,551 --> 27:10:39,191
parameter of our block provider we
31691
27:10:36,551 --> 27:10:40,720
actually have to create the uh block
31692
27:10:39,191 --> 27:10:44,080
that we promised we're going to create
31693
27:10:40,720 --> 27:10:44,800
and you can see that being created here
31694
27:10:44,800 --> 27:10:51,040
and i can now see directly in here it's
31695
27:10:51,039 --> 27:10:55,279
but we can't have that simply because
31696
27:10:53,039 --> 27:10:57,599
our auth block if we go back to our off
31697
27:10:55,279 --> 27:10:59,911
block in here i believe that our
31698
27:10:59,911 --> 27:11:04,800
constant so if you put const in there
31699
27:11:02,479 --> 27:11:06,551
you can see that it's not allowing us to
31700
27:11:06,551 --> 27:11:12,159
block itself as a library as a class
31701
27:11:09,440 --> 27:11:14,320
here it has no constant constructor so
31702
27:11:12,160 --> 27:11:16,720
we can't have a constant provider so
31703
27:11:14,320 --> 27:11:18,800
let's remove that const from there okay
31704
27:11:16,720 --> 27:11:20,479
now in here we have to say it should
31705
27:11:22,800 --> 27:11:27,512
requires an auth provider so let's go in
31706
27:11:29,679 --> 27:11:33,599
fire and that's going to be auto
31707
27:11:36,479 --> 27:11:43,679
block provider that's fantastic so
31708
27:11:41,191 --> 27:11:45,831
now what we need to do is to have a look
31709
27:11:43,679 --> 27:11:47,119
in here and see what else we have to
31710
27:11:52,000 --> 27:11:55,039
what we have at the moment i mean we
31711
27:11:55,039 --> 27:11:58,719
of course we have this functionality
31712
27:11:58,720 --> 27:12:03,680
auth block for us in the main function
31713
27:12:01,119 --> 27:12:06,159
but we're not actually really using that
31714
27:12:03,679 --> 27:12:08,159
in inside here we're using future
31715
27:12:08,160 --> 27:12:13,600
so what we need to do is instead of
31716
27:12:10,080 --> 27:12:15,360
using future builder let's use our um
31717
27:12:13,600 --> 27:12:18,320
what we're going to do is we're going to
31718
27:12:18,320 --> 27:12:22,160
i'm sorry block builder and block
31719
27:12:20,551 --> 27:12:23,911
builder is kind of like future builder
31720
27:12:22,160 --> 27:12:25,040
but it's going to use but it's going to
31721
27:12:27,191 --> 27:12:32,159
which is defined here now this may seem
31722
27:12:29,759 --> 27:12:33,599
all very complicated to begin with and
31723
27:12:32,160 --> 27:12:35,512
what you need to understand is that
31724
27:12:33,600 --> 27:12:37,832
there is a lot of magic happening behind
31725
27:12:35,512 --> 27:12:40,232
the scenes in block in that when you
31726
27:12:37,831 --> 27:12:42,479
create a block provider in here and then
31727
27:12:40,232 --> 27:12:44,552
it gets a context and then it goes here
31728
27:12:42,479 --> 27:12:47,911
to create the block what's happening
31729
27:12:44,551 --> 27:12:50,800
internally in block is that that context
31730
27:12:47,911 --> 27:12:53,191
itself is gonna get injected with your
31731
27:12:50,800 --> 27:12:56,080
off block so when you create the auth
31732
27:12:53,191 --> 27:12:58,639
login here this context from this point
31733
27:12:56,080 --> 27:12:59,600
on inside the entire application is
31734
27:12:59,600 --> 27:13:04,552
it's going to be populated with an auth
31735
27:13:01,831 --> 27:13:07,191
block that you can read from okay and
31736
27:13:07,191 --> 27:13:11,119
so in the build function of your
31737
27:13:09,191 --> 27:13:13,831
homepage what you need to do in here
31738
27:13:13,911 --> 27:13:17,039
see we have this future we have the
31739
27:13:21,679 --> 27:13:25,119
let's just then go ahead actually what
31740
27:13:23,600 --> 27:13:26,639
we need to do to be honest with you is
31741
27:13:26,639 --> 27:13:30,319
we're not going to use so much of this
31742
27:13:28,399 --> 27:13:32,479
code so it's perhaps makes more sense
31743
27:13:30,320 --> 27:13:34,320
just to shift it down a little bit to
31744
27:13:36,479 --> 27:13:43,191
so in uh sorry a block builder
31745
27:13:40,479 --> 27:13:44,959
so our block builder has a builder
31746
27:13:43,191 --> 27:13:47,279
function but we also are going to get
31747
27:13:47,279 --> 27:13:50,959
actual block in here in the block
31748
27:13:50,960 --> 27:13:54,400
when you come to your home page what the
31749
27:13:52,872 --> 27:13:56,720
first thing that we need to do is to
31750
27:13:54,399 --> 27:13:59,039
tell our os block to initialize itself
31751
27:13:56,720 --> 27:14:01,759
do you remember our auth block has this
31752
27:13:59,039 --> 27:14:03,831
um event handling for initialize so
31753
27:14:01,759 --> 27:14:06,319
somehow in this build function we need
31754
27:14:03,831 --> 27:14:08,479
to tell our author like hey
31755
27:14:06,320 --> 27:14:09,912
initialize yourself so how do we get
31756
27:14:09,911 --> 27:14:14,080
i talked about this how do we hold off
31757
27:14:12,232 --> 27:14:16,232
how do we get hold of the off block in
31758
27:14:14,080 --> 27:14:18,400
here since we don't have access to it
31759
27:14:16,232 --> 27:14:20,720
here but i just mentioned that
31760
27:14:18,399 --> 27:14:22,551
when you create an auth provider sorry a
31761
27:14:20,720 --> 27:14:24,800
blog provider that blog provider is
31762
27:14:22,551 --> 27:14:28,399
going to inject your off block into the
31763
27:14:24,800 --> 27:14:30,800
context so the the auth block is hidden
31764
27:14:28,399 --> 27:14:34,000
somewhere in this context and the way to
31765
27:14:30,800 --> 27:14:36,479
read that is you just say context dot
31766
27:14:34,000 --> 27:14:37,279
read and then there's a you see there's
31767
27:14:37,279 --> 27:14:40,959
function in here and if you go into this
31768
27:14:39,119 --> 27:14:43,831
read function you see it actually comes
31769
27:14:44,551 --> 27:14:50,639
flutter provider provider dart okay
31770
27:14:48,000 --> 27:14:54,320
so in context read let's just say that
31771
27:14:54,320 --> 27:14:59,040
and what we're going to tell it to is to
31772
27:14:56,639 --> 27:15:00,479
tell it to initialize but if you put dot
31773
27:14:59,039 --> 27:15:02,000
in here you see there is no function
31774
27:15:00,479 --> 27:15:04,479
called initialize or anything and that's
31775
27:15:02,000 --> 27:15:07,119
because the way you communicate with an
31776
27:15:04,479 --> 27:15:09,039
auth block as we saw in um or the way
31777
27:15:07,119 --> 27:15:12,000
that you communicate with a block
31778
27:15:09,039 --> 27:15:14,479
generally is that you send it messages
31779
27:15:12,000 --> 27:15:17,600
using its add function so add is your
31780
27:15:14,479 --> 27:15:20,231
way of communicating with your block or
31781
27:15:17,600 --> 27:15:22,720
your blocks about various events that
31782
27:15:20,232 --> 27:15:25,040
you're sending okay so in this in here
31783
27:15:22,720 --> 27:15:26,639
we're going to say add and then we're
31784
27:15:30,160 --> 27:15:33,360
if you're getting an error about this
31785
27:15:31,759 --> 27:15:35,039
auth event initialize not being in
31786
27:15:33,360 --> 27:15:38,551
context it's probably because you don't
31787
27:15:35,039 --> 27:15:42,231
have an auto import for this uh file in
31788
27:15:42,232 --> 27:15:48,720
we have now we are sending initialize
31789
27:15:48,720 --> 27:15:53,191
now that that is done we need to do our
31790
27:15:50,960 --> 27:15:54,960
block builder so in this builder
31791
27:15:53,191 --> 27:15:57,360
function let me go here and get help
31792
27:15:54,960 --> 27:16:00,320
from visual studio code to complete that
31793
27:15:57,360 --> 27:16:02,639
and you can see now i get a context and
31794
27:16:02,639 --> 27:16:06,800
so let's go ahead and handle various
31795
27:16:04,551 --> 27:16:09,039
states that could happen during this
31796
27:16:06,800 --> 27:16:10,960
period during the initialization period
31797
27:16:10,960 --> 27:16:17,120
if the state is off state logged in so
31798
27:16:14,800 --> 27:16:20,400
if we are actually logged in then we're
31799
27:16:17,119 --> 27:16:22,831
gonna return const notes view like that
31800
27:16:30,551 --> 27:16:35,831
then let's see what we were doing we
31801
27:16:32,639 --> 27:16:40,399
were returning this verify email view so
31802
27:16:35,831 --> 27:16:41,759
let's go ahead and do that here as well
31803
27:16:41,759 --> 27:16:46,639
excuse me if the state is logged out
31804
27:16:50,960 --> 27:16:55,120
then let's see how we were handling that
31805
27:16:57,360 --> 27:17:03,680
um if we were logged out we were going
31806
27:17:00,000 --> 27:17:05,600
to the login view like like here
31807
27:17:03,679 --> 27:17:09,439
so if we were logged out then we should
31808
27:17:05,600 --> 27:17:09,440
send the user to the login view
31809
27:17:14,479 --> 27:17:18,231
what can we do let's say that in the
31810
27:17:16,639 --> 27:17:20,399
future you're going to add some more
31811
27:17:20,399 --> 27:17:24,639
block block builder right now is not
31812
27:17:25,679 --> 27:17:30,000
um what you want is still an application
31813
27:17:28,320 --> 27:17:32,080
that is in working condition you
31814
27:17:30,000 --> 27:17:33,679
shouldn't crash or anything so
31815
27:17:32,080 --> 27:17:36,400
let's just in this case return a
31816
27:17:39,191 --> 27:17:45,360
and let's in the body of our scaffold
31817
27:17:42,551 --> 27:17:48,720
create a circular progress indicator
31818
27:17:45,360 --> 27:17:51,360
just like that all right so it looks
31819
27:17:48,720 --> 27:17:53,911
like that also you could mark your block
31820
27:17:51,360 --> 27:17:56,232
builder as well to say that it
31821
27:17:56,232 --> 27:18:01,680
and also it has off states you remember
31822
27:17:59,039 --> 27:18:03,279
block builder has these parameters in
31823
27:18:03,279 --> 27:18:07,600
the builder and sorry the block itself
31824
27:18:05,360 --> 27:18:09,759
and the state that's why i've marked
31825
27:18:07,600 --> 27:18:12,000
them like this okay and now as you can
31826
27:18:09,759 --> 27:18:14,231
see state is not an uh it's not just a
31827
27:18:12,000 --> 27:18:17,360
normal object anymore it's an off state
31828
27:18:14,232 --> 27:18:19,680
before writing that state was just an
31829
27:18:17,360 --> 27:18:21,911
object but now i've marked it as off
31830
27:18:19,679 --> 27:18:24,319
state and you can see it's become an off
31831
27:18:24,320 --> 27:18:28,480
great stuff now let's get rid of the
31832
27:18:26,080 --> 27:18:31,279
future builder that we have from before
31833
27:18:28,479 --> 27:18:32,872
so i'm going to remove all that code
31834
27:18:32,872 --> 27:18:38,551
and now you can see we have our off
31835
27:18:36,080 --> 27:18:40,639
our block builder here and a block
31836
27:18:40,639 --> 27:18:45,600
so that's all we have to do um now it's
31837
27:18:43,440 --> 27:18:48,872
great actually we're getting this issue
31838
27:18:45,600 --> 27:18:50,960
um and you can see it's i love these
31839
27:18:48,872 --> 27:18:53,120
errors i mean a lot of developers are
31840
27:18:50,960 --> 27:18:55,120
scared of stuff like this but it's so
31841
27:18:53,119 --> 27:18:56,799
important to actually read what's inside
31842
27:18:55,119 --> 27:18:58,231
this what is what it's telling us is
31843
27:18:56,800 --> 27:18:59,760
this happens because you use the build
31844
27:18:58,232 --> 27:19:01,360
context that does not include the
31845
27:18:59,759 --> 27:19:02,871
provider of your choice and that's
31846
27:19:02,872 --> 27:19:09,680
is this thing context read auth block so
31847
27:19:07,831 --> 27:19:11,831
so what flutter is saying that hey
31848
27:19:09,679 --> 27:19:13,191
you're expecting me to extract an off
31849
27:19:11,831 --> 27:19:15,911
block from the context but it's not
31850
27:19:13,191 --> 27:19:18,479
there okay why is it not there it's
31851
27:19:15,911 --> 27:19:20,000
simply because the main function i've
31852
27:19:18,479 --> 27:19:22,231
mentioned this quite a few times in the
31853
27:19:20,000 --> 27:19:24,232
course but i believe it's so important
31854
27:19:22,232 --> 27:19:28,232
that i want to mention it again the main
31855
27:19:24,232 --> 27:19:30,800
function does not get called during hot
31856
27:19:28,232 --> 27:19:32,800
reloads and i just did a hot reload by
31857
27:19:32,800 --> 27:19:38,872
there is no block inside the context
31858
27:19:36,479 --> 27:19:40,872
because the block is actually created by
31859
27:19:38,872 --> 27:19:43,192
the block provider which is inside the
31860
27:19:40,872 --> 27:19:44,639
main function so if i want this auth
31861
27:19:43,191 --> 27:19:47,191
block to be injected in the build
31862
27:19:44,639 --> 27:19:48,800
context then i have to do a hot restart
31863
27:19:48,800 --> 27:19:52,720
now the application is working as it
31864
27:19:54,960 --> 27:20:00,000
so we've now taken care of our main dart
31865
27:19:57,831 --> 27:20:02,319
file removed the stuff that we have for
31866
27:20:00,000 --> 27:20:04,232
the counter application which we created
31867
27:20:02,320 --> 27:20:06,800
with auth with which we created with
31868
27:20:04,232 --> 27:20:09,440
block and now we've moved to using our
31869
27:20:06,800 --> 27:20:12,479
first two components from block which is
31870
27:20:09,440 --> 27:20:14,551
block provider and also block builder we
31871
27:20:12,479 --> 27:20:16,639
have a few unused imports so let's just
31872
27:20:16,639 --> 27:20:21,119
okay just to make sure that this file is
31873
27:20:21,119 --> 27:20:26,319
the part is that it's done now what we
31874
27:20:23,679 --> 27:20:28,551
need to do is to use as you can see in
31875
27:20:26,320 --> 27:20:31,040
the caption we need to use our off block
31876
27:20:28,551 --> 27:20:32,872
in the login view and the only thing we
31877
27:20:31,039 --> 27:20:35,039
really need to do is upon pressing the
31878
27:20:32,872 --> 27:20:38,720
login button we need to send the off
31879
27:20:38,720 --> 27:20:44,000
that's very very simple so let's go
31880
27:20:41,440 --> 27:20:46,160
ahead and take care of that this is just
31881
27:20:46,160 --> 27:20:50,552
go to login view as the caption
31882
27:20:47,679 --> 27:20:53,831
indicates and where we're calling this
31883
27:20:53,831 --> 27:20:56,799
as you can see we're saying
31884
27:20:59,279 --> 27:21:04,639
password and we're just yeah calling a
31885
27:21:04,639 --> 27:21:09,831
let's see we also have is email verified
31886
27:21:07,191 --> 27:21:11,119
so we're not gonna take care of that at
31887
27:21:13,191 --> 27:21:18,799
uh take care of email verified so in
31888
27:21:15,440 --> 27:21:20,400
this in this try statement here verify
31889
27:21:20,399 --> 27:21:24,079
we will fix that soon so let's just
31890
27:21:24,080 --> 27:21:28,160
try everything in the try block
31891
27:21:26,551 --> 27:21:31,599
and what we need to do in here we need
31892
27:21:28,160 --> 27:21:34,960
to read our block our auth block and
31893
27:21:31,600 --> 27:21:37,600
then convey an event to it okay how do
31894
27:21:34,960 --> 27:21:41,280
we read the the a block and that is
31895
27:21:37,600 --> 27:21:44,832
using context dot read or what was it
31896
27:21:41,279 --> 27:21:47,679
called read i believe actually yeah but
31897
27:21:47,679 --> 27:21:52,399
and three function is not available
31898
27:21:52,399 --> 27:21:58,159
provider and i can see in here says
31899
27:21:54,479 --> 27:22:00,399
package provider src but in the
31900
27:21:58,160 --> 27:22:03,192
in our main file we didn't actually
31901
27:22:00,399 --> 27:22:05,360
import provider so we've imported our
31902
27:22:03,191 --> 27:22:08,159
flutter block so let's go ahead and do
31903
27:22:05,360 --> 27:22:10,639
that as well in here so inside login
31904
27:22:08,160 --> 27:22:12,800
view dart please import your flutter
31905
27:22:10,639 --> 27:22:16,639
block so now all of a sudden we're going
31906
27:22:12,800 --> 27:22:18,400
to have access to the read function okay
31907
27:22:16,639 --> 27:22:20,872
so in there what we what we're going to
31908
27:22:18,399 --> 27:22:21,831
do is just to add an event to
31909
27:22:21,831 --> 27:22:26,000
let's see if we can get access oh for
31910
27:22:23,911 --> 27:22:27,279
that we need probably to import block as
31911
27:22:34,399 --> 27:22:38,231
let's see if then all of a sudden we're
31912
27:22:36,160 --> 27:22:40,232
gonna get the add functionality in here
31913
27:22:38,232 --> 27:22:42,400
context read oh sorry about that it's
31914
27:22:40,232 --> 27:22:45,760
because this is a function i need to
31915
27:22:42,399 --> 27:22:48,079
call the function so add and i may then
31916
27:22:45,759 --> 27:22:49,599
get away by removing block from here i
31917
27:22:48,080 --> 27:22:51,440
apologize for that we didn't really need
31918
27:22:55,600 --> 27:22:58,872
okay i understand this is a little bit
31919
27:22:57,119 --> 27:23:00,720
jumpy that's okay though so all we're
31920
27:22:58,872 --> 27:23:03,040
doing is that we removed everything in
31921
27:23:00,720 --> 27:23:05,680
the try uh block and we're removing
31922
27:23:03,039 --> 27:23:07,511
we're replacing that using context read
31923
27:23:05,679 --> 27:23:09,439
we're reading our off block from the
31924
27:23:07,512 --> 27:23:10,479
build context and now we want to tell it
31925
27:23:10,479 --> 27:23:16,479
log in so you remember we had a l off
31926
27:23:16,479 --> 27:23:20,159
so let's go ahead and do that and as you
31927
27:23:18,399 --> 27:23:20,959
can see it's going to auto import it for
31928
27:23:20,960 --> 27:23:25,832
so i mean here we have the email and
31929
27:23:28,720 --> 27:23:32,399
all right so that's gonna send that
31930
27:23:30,800 --> 27:23:35,040
event and then we have the rest of the
31931
27:23:37,512 --> 27:23:41,680
exceptions though how are we handling
31932
27:23:43,039 --> 27:23:47,599
at the moment our exception handling is
31933
27:23:45,039 --> 27:23:50,079
completely broken by going towards using
31934
27:23:47,600 --> 27:23:53,760
auth block everything is broken
31935
27:23:50,080 --> 27:23:56,232
as far as exceptions go because um
31936
27:23:53,759 --> 27:23:58,231
you can see the way our auth block
31937
27:23:56,232 --> 27:24:00,800
actually throws exceptions is by
31938
27:23:58,232 --> 27:24:02,552
emitting them inside states so you see
31939
27:24:00,800 --> 27:24:04,800
it says a state login failure and then
31940
27:24:02,551 --> 27:24:06,551
there's an exception in it so we're not
31941
27:24:04,800 --> 27:24:08,639
handling those at the moment so you're
31942
27:24:06,551 --> 27:24:11,191
right exceptions are completely broken
31943
27:24:08,639 --> 27:24:13,039
for the entirety of this chapter and
31944
27:24:11,191 --> 27:24:15,759
that's okay because we're gonna fix them
31945
27:24:13,039 --> 27:24:16,959
exactly right after this chapter
31946
27:24:15,759 --> 27:24:19,511
so now you know what's coming in the
31947
27:24:19,512 --> 27:24:24,232
all right that's that's for uh our
31948
27:24:24,232 --> 27:24:28,400
i don't think we need to do more to be
31949
27:24:25,911 --> 27:24:29,831
honest inside our login so let's go into
31950
27:24:28,399 --> 27:24:32,551
our imports and just clean up the
31951
27:24:32,639 --> 27:24:37,279
great stuff so that's for login um
31952
27:24:35,831 --> 27:24:39,119
what we also have to do now is the
31953
27:24:37,279 --> 27:24:40,639
caption indicates we have to go to our
31954
27:24:42,232 --> 27:24:47,360
make sure that we can log out using our
31955
27:24:44,800 --> 27:24:48,800
auth block as well so let's go to notes
31956
27:24:48,800 --> 27:24:52,720
and right now what we're doing is saying
31957
27:24:50,872 --> 27:24:54,720
we're awaiting on the auth service
31958
27:24:52,720 --> 27:24:56,479
firebase logout so we're not going to do
31959
27:24:56,479 --> 27:25:01,679
so we're just going to use our off block
31960
27:25:02,399 --> 27:25:07,831
in here let's remove that and just say
31961
27:25:05,512 --> 27:25:10,080
that we're saying to where we want to
31962
27:25:07,831 --> 27:25:13,119
grab the auth block first okay so let's
31963
27:25:10,080 --> 27:25:15,119
say context and then we're gonna
31964
27:25:16,551 --> 27:25:22,959
like this and if he asks visual studio
31965
27:25:18,960 --> 27:25:24,720
code it's gonna it wants to import um
31966
27:25:22,960 --> 27:25:28,480
oh yeah it wants to import auth block so
31967
27:25:24,720 --> 27:25:30,399
let's grab off block to bring it in
31968
27:25:28,479 --> 27:25:31,831
it also doesn't know where read comes
31969
27:25:34,080 --> 27:25:39,440
so what we need to do now is to
31970
27:25:36,551 --> 27:25:42,080
import uh the block library in here so
31971
27:25:44,399 --> 27:25:48,871
so importing flutter block and then
31972
27:25:47,039 --> 27:25:50,799
flatter block guard and here i'm
31973
27:25:48,872 --> 27:25:51,911
actually drilling down inside flutter
31974
27:25:50,800 --> 27:25:55,279
block and just seeing that i'm
31975
27:25:51,911 --> 27:25:58,000
interested in read context okay and read
31976
27:25:55,279 --> 27:26:00,000
context is as you can see in the code is
31977
27:26:00,000 --> 27:26:05,191
reading here oh my god there's so much
31978
27:26:05,191 --> 27:26:09,759
all right so that gives us the read
31979
27:26:07,119 --> 27:26:11,679
functionality that we can use in here so
31980
27:26:09,759 --> 27:26:13,599
that's the function all right after
31981
27:26:11,679 --> 27:26:15,439
grabbing our off block now we have to
31982
27:26:13,600 --> 27:26:17,360
convey the message of logging out in
31983
27:26:15,440 --> 27:26:19,512
here so we're going to add an event to
31984
27:26:17,360 --> 27:26:23,039
it and then we're going to say we add
31985
27:26:19,512 --> 27:26:25,440
the event of off event log out just like
31986
27:26:23,039 --> 27:26:27,511
that and this is a constant constructor
31987
27:26:25,440 --> 27:26:29,760
as well so let's just send it send it
31988
27:26:29,911 --> 27:26:34,319
and after doing that we don't really
31989
27:26:35,360 --> 27:26:40,639
and we're also not in this case we're
31990
27:26:37,679 --> 27:26:42,319
not actually gonna go to to the login
31991
27:26:42,320 --> 27:26:45,192
what is gonna happen in here i'm
31992
27:26:43,831 --> 27:26:46,639
actually gonna remove that and we're
31993
27:26:45,191 --> 27:26:49,440
gonna start testing a little bit so
31994
27:26:46,639 --> 27:26:50,319
you'll see how things work okay
31995
27:26:50,320 --> 27:26:55,192
um i'm gonna do a hot restart in here
31996
27:26:53,191 --> 27:26:57,039
and see if everything's working as it
31997
27:26:55,191 --> 27:26:59,599
should so yeah what i'm going to do then
31998
27:26:59,600 --> 27:27:02,960
so in here i'm just going to say this
31999
27:27:02,960 --> 27:27:06,960
log out or cancel i'll say cancel so
32000
27:27:06,960 --> 27:27:10,800
and i say log out and then log out and
32001
27:27:09,360 --> 27:27:12,960
all of a sudden we came to the login
32002
27:27:10,800 --> 27:27:15,279
view but hey wait a minute what happened
32003
27:27:12,960 --> 27:27:16,480
we removed this code this code that was
32004
27:27:16,479 --> 27:27:21,831
why is why are we going to the login
32005
27:27:18,800 --> 27:27:23,600
view without that code so this may look
32006
27:27:21,831 --> 27:27:25,831
magical but what is happening is that
32007
27:27:23,600 --> 27:27:27,360
since the entire application is now
32008
27:27:27,360 --> 27:27:32,320
our auth block an auth block upon it
32009
27:27:30,232 --> 27:27:33,760
receiving the log out event let's go to
32010
27:27:33,759 --> 27:27:37,911
so you get reminded of the log out event
32011
27:27:35,911 --> 27:27:40,551
but what it is saying is that it first
32012
27:27:37,911 --> 27:27:42,232
goes to the loading state and then if it
32013
27:27:40,551 --> 27:27:45,360
could lock the user out and it actually
32014
27:27:42,232 --> 27:27:48,160
says that i'm logged out now remember in
32015
27:27:45,360 --> 27:27:49,831
the main function here we are actually
32016
27:27:48,160 --> 27:27:52,480
listening to various events that come
32017
27:27:49,831 --> 27:27:54,871
from our off blog and when the events
32018
27:27:52,479 --> 27:27:57,599
that comes in is logged out we are
32019
27:27:54,872 --> 27:27:58,400
showing the login view so it is the main
32020
27:27:58,399 --> 27:28:01,911
is the home page that is doing this work
32021
27:28:01,911 --> 27:28:05,759
it is to me it is absolutely beautiful
32022
27:28:07,600 --> 27:28:12,480
uh logic from our code and one step at a
32023
27:28:14,639 --> 27:28:20,479
login as well uh so what we need to
32024
27:28:21,512 --> 27:28:28,479
uh let's have a look in here at login
32025
27:28:24,639 --> 27:28:31,440
you see after login we're not telling
32026
27:28:28,479 --> 27:28:33,831
the application that you have to go to
32027
27:28:33,831 --> 27:28:38,479
and so we can actually test this so i'm
32028
27:28:35,831 --> 27:28:41,439
going to say my email address here and
32029
27:28:41,440 --> 27:28:45,360
see it comes to the main screen how did
32030
27:28:43,360 --> 27:28:49,680
that do that and that's again because of
32031
27:28:45,360 --> 27:28:51,440
the main dart you see it first said um
32032
27:28:51,440 --> 27:28:54,720
loading let's see are we handling
32033
27:28:53,279 --> 27:28:58,080
loading somewhere no we're not using
32034
27:28:54,720 --> 27:29:00,720
that um but if if it actually becomes uh
32035
27:28:58,080 --> 27:29:03,119
logged in then it says display the notes
32036
27:29:00,720 --> 27:29:04,399
view so that's how these screens are now
32037
27:29:04,399 --> 27:29:08,000
and displayed to the user without us
32038
27:29:08,000 --> 27:29:14,320
push routes or push name routes so
32039
27:29:12,232 --> 27:29:15,600
fantastic very well done we've taken
32040
27:29:14,320 --> 27:29:17,600
care of everything that we said we're
32041
27:29:15,600 --> 27:29:19,360
going to take care of in this chapter so
32042
27:29:17,600 --> 27:29:20,552
and what we usually do at the end of
32043
27:29:19,360 --> 27:29:22,551
every chapter is now that you're
32044
27:29:20,551 --> 27:29:25,831
familiar with everything you've come so
32045
27:29:22,551 --> 27:29:27,599
far almost 40 40 chapters in this course
32046
27:29:25,831 --> 27:29:30,080
so you should know that we need to tag
32047
27:29:27,600 --> 27:29:31,760
our work so that we don't lose them
32048
27:29:31,759 --> 27:29:38,551
let's go ahead and have a look at
32049
27:29:35,831 --> 27:29:40,799
if i can bring terminal up in here and
32050
27:29:38,551 --> 27:29:43,279
we see bit log you can see the last
32051
27:29:40,800 --> 27:29:46,479
commit was step 22 so let's say git
32052
27:29:43,279 --> 27:29:48,720
commit get status first actually
32053
27:29:46,479 --> 27:29:50,872
a whole new folder was added so we're
32054
27:29:50,872 --> 27:29:54,639
and let me increase the size of the
32055
27:29:54,639 --> 27:30:00,551
so we're going to say git commit and um
32056
27:30:04,320 --> 27:30:09,680
and we have a look at our logs get to
32057
27:30:06,551 --> 27:30:11,679
step 22 and step 23 and there is nothing
32058
27:30:11,679 --> 27:30:16,399
so let's also tag our work and we say
32059
27:30:19,831 --> 27:30:22,799
fantastic so if you look at our tags now
32060
27:30:28,720 --> 27:30:31,911
fantastic as this tradition at the end
32061
27:30:30,639 --> 27:30:33,360
of every chapter we talk about what
32062
27:30:31,911 --> 27:30:35,831
we're going to discuss in the chapter
32063
27:30:35,831 --> 27:30:40,720
as i mentioned just briefly
32064
27:30:38,720 --> 27:30:42,872
as a little note while i was talking
32065
27:30:42,872 --> 27:30:45,680
we've now broken our exception handling
32066
27:30:49,279 --> 27:30:56,232
signal to our block our auth block um
32067
27:30:53,911 --> 27:30:57,759
that in itself is not gonna produce an
32068
27:30:57,759 --> 27:31:02,231
but right now we're treating that add
32069
27:31:00,232 --> 27:31:05,040
function and we're putting it inside a
32070
27:31:02,232 --> 27:31:06,872
try block and then there's on exception
32071
27:31:05,039 --> 27:31:08,719
blah blah after that so none of those
32072
27:31:11,191 --> 27:31:15,831
so uh we're gonna handle that and fix
32073
27:31:14,000 --> 27:31:18,080
that in the next chapter so grab some
32074
27:31:15,831 --> 27:31:20,231
refreshments and i'll see you there
32075
27:31:18,080 --> 27:31:21,759
hello everyone and welcome to chapter 41
32076
27:31:21,759 --> 27:31:26,551
in previous chapters we've been talking
32077
27:31:23,600 --> 27:31:28,960
quite a bit about uh block and
32078
27:31:26,551 --> 27:31:30,479
um i suggested that everybody who's
32079
27:31:28,960 --> 27:31:32,552
taking this course to have a look at
32080
27:31:30,479 --> 27:31:34,551
block on their own time as well and to
32081
27:31:32,551 --> 27:31:36,399
read the documentation because
32082
27:31:34,551 --> 27:31:38,080
um i understand that block could be
32083
27:31:36,399 --> 27:31:39,439
something intimidating for especially
32084
27:31:38,080 --> 27:31:41,600
for those who haven't done for us this
32085
27:31:41,600 --> 27:31:45,040
however it allows us to create a good
32086
27:31:45,039 --> 27:31:50,079
and between our ui and our business
32087
27:31:47,512 --> 27:31:52,960
logic as that's the point of using block
32088
27:31:50,080 --> 27:31:54,720
in a flutter application for instance
32089
27:31:52,960 --> 27:31:56,552
so in this chapter we're going to build
32090
27:31:54,720 --> 27:31:57,360
up on top of what we've already done but
32091
27:31:57,360 --> 27:32:01,440
from this chapter onwards we're going to
32092
27:31:59,119 --> 27:32:04,080
spend a little bit of time to clean the
32093
27:32:01,440 --> 27:32:05,832
logic up i mean even though things may
32094
27:32:04,080 --> 27:32:07,119
be working the way they are right now
32095
27:32:07,119 --> 27:32:10,551
and there is like a saying in software
32096
27:32:10,551 --> 27:32:15,119
usually strongly disagree with that
32097
27:32:12,479 --> 27:32:17,831
people say if it's not broken don't fix
32098
27:32:15,119 --> 27:32:20,159
it however we've seen over and over
32099
27:32:17,831 --> 27:32:22,799
again that things that work don't
32100
27:32:20,160 --> 27:32:24,480
necessarily continue to work or things
32101
27:32:24,479 --> 27:32:27,599
necessarily working to the best of their
32102
27:32:28,399 --> 27:32:31,911
in order to make things uh a little bit
32103
27:32:30,720 --> 27:32:33,911
better in our source code we're going to
32104
27:32:31,911 --> 27:32:37,679
spend a little bit of time to make the
32105
27:32:33,911 --> 27:32:40,232
logic more thorough and we have to
32106
27:32:37,679 --> 27:32:42,479
think it more through um we've gotten
32107
27:32:40,232 --> 27:32:44,960
started with block but we are not really
32108
27:32:42,479 --> 27:32:46,479
there yet so in this chapter as you can
32109
27:32:44,960 --> 27:32:49,040
see in the captions we're gonna handle
32110
27:32:46,479 --> 27:32:50,479
off block exceptions during login so
32111
27:32:52,800 --> 27:32:57,832
moving around between different files
32112
27:32:55,191 --> 27:32:59,679
and we're gonna like basically clean
32113
27:32:57,831 --> 27:33:01,279
things up so we have to jump around
32114
27:32:59,679 --> 27:33:02,639
between files and i'm going to do my
32115
27:33:02,639 --> 27:33:06,160
when i move between files as well and
32116
27:33:04,639 --> 27:33:07,360
like what we're adding what we're
32117
27:33:07,360 --> 27:33:10,720
what we're modifying so i hope you can
32118
27:33:14,639 --> 27:33:17,512
all right so the first thing that we're
32119
27:33:16,399 --> 27:33:20,079
going to do as you can see in the
32120
27:33:17,512 --> 27:33:21,600
caption here is to remove our off state
32121
27:33:21,600 --> 27:33:27,279
so what we're going to do is um first of
32122
27:33:24,320 --> 27:33:29,280
all i'm going to bring the code to the
32123
27:33:27,279 --> 27:33:31,440
to the main screen here so you see it as
32124
27:33:31,440 --> 27:33:36,160
perhaps not even bring up scrcpy because
32125
27:33:34,080 --> 27:33:38,320
i don't really think we need scr cpy
32126
27:33:44,080 --> 27:33:47,680
the way it is right now i don't even
32127
27:33:47,679 --> 27:33:53,511
um if i say command p off state so let's
32128
27:33:50,639 --> 27:33:55,831
go to the off state dart file okay
32129
27:33:53,512 --> 27:33:58,639
and as you can see in here if i if i
32130
27:33:55,831 --> 27:34:00,799
make the size a little bit bigger
32131
27:33:58,639 --> 27:34:01,911
you can see that we have for instance at
32132
27:34:03,191 --> 27:34:08,231
a off state login failure and then there
32133
27:34:05,759 --> 27:34:10,399
is an exception in there and also we for
32134
27:34:08,232 --> 27:34:11,600
instance have off state logged in so it
32135
27:34:10,399 --> 27:34:13,360
seems like this is kind of like a
32136
27:34:11,600 --> 27:34:16,080
pattern that we're following so we have
32137
27:34:13,360 --> 27:34:18,639
off state logged in and then auth state
32138
27:34:16,080 --> 27:34:21,119
login failure with an exception and then
32139
27:34:18,639 --> 27:34:23,039
we have off state logged out and then a
32140
27:34:23,039 --> 27:34:28,639
however we're going to clean this up a
32141
27:34:25,119 --> 27:34:31,360
little bit here and make sure that
32142
27:34:28,639 --> 27:34:32,080
we don't have just like except
32143
27:34:34,000 --> 27:34:38,399
off states that we have to handle in our
32144
27:34:38,399 --> 27:34:45,039
so what we need to do is to go into our
32145
27:34:41,831 --> 27:34:46,551
logged out in here and add an exception
32146
27:34:46,551 --> 27:34:50,639
the point of this is that if you for
32147
27:34:50,639 --> 27:34:54,080
are logged out at the moment in the
32148
27:34:54,080 --> 27:34:58,551
then there may also be an exception and
32149
27:34:56,399 --> 27:35:01,360
you you you probably are asking like how
32150
27:34:58,551 --> 27:35:02,231
can a state of logout have an exception
32151
27:35:02,232 --> 27:35:06,872
what we're going to do is that when you
32152
27:35:04,160 --> 27:35:08,800
try to log into the application let's
32153
27:35:06,872 --> 27:35:10,400
let's say you're a complete new user and
32154
27:35:08,800 --> 27:35:12,551
you haven't logged into the application
32155
27:35:10,399 --> 27:35:14,551
before okay you download the application
32156
27:35:12,551 --> 27:35:16,399
what you what is your state your state
32157
27:35:16,399 --> 27:35:20,720
now let's say that you make up an email
32158
27:35:18,551 --> 27:35:22,399
and a password and then you write that
32159
27:35:20,720 --> 27:35:24,232
in the login screen and then you press
32160
27:35:22,399 --> 27:35:26,399
the login button there are no users
32161
27:35:24,232 --> 27:35:28,639
let's say in the system with that with
32162
27:35:26,399 --> 27:35:29,599
those information that you provided
32163
27:35:28,639 --> 27:35:31,191
then we're going to give you an
32164
27:35:29,600 --> 27:35:33,279
exception we're going to give you an
32165
27:35:31,191 --> 27:35:34,319
error saying that well you couldn't log
32166
27:35:34,320 --> 27:35:39,192
what is your state at that point well
32167
27:35:36,551 --> 27:35:41,039
you're still logged out okay but now
32168
27:35:39,191 --> 27:35:43,599
you're logged out and then the screen
32169
27:35:41,039 --> 27:35:45,759
also has to display some exceptions so
32170
27:35:43,600 --> 27:35:48,720
that's why we're going to build a build
32171
27:35:45,759 --> 27:35:50,799
exception right into the auth state
32172
27:35:50,800 --> 27:35:56,160
so let's go in here and just create an
32173
27:35:53,679 --> 27:35:58,231
optional exception in here like that and
32174
27:35:56,160 --> 27:35:59,680
just call it exception okay and i'm
32175
27:35:58,232 --> 27:36:02,400
going to get help from visual studio
32176
27:35:59,679 --> 27:36:03,831
code to add that parameter into the
32177
27:36:03,831 --> 27:36:08,159
and let me do some reshuffling on the
32178
27:36:05,831 --> 27:36:10,399
screen as well so you see it better and
32179
27:36:08,160 --> 27:36:13,192
perhaps decrease the size of the font as
32180
27:36:13,440 --> 27:36:17,279
so that was the first thing that we had
32181
27:36:17,279 --> 27:36:22,959
that i've written we don't really need
32182
27:36:19,039 --> 27:36:24,000
auth state loading in auth events login
32183
27:36:24,000 --> 27:36:28,872
what we're going to do is to go in
32184
27:36:26,800 --> 27:36:32,400
our off block so let me just save this
32185
27:36:28,872 --> 27:36:32,400
file and let's go to off block
32186
27:36:32,720 --> 27:36:36,479
and in here we have this logged out with
32187
27:36:35,119 --> 27:36:39,279
an exception and we're going to assume
32188
27:36:36,479 --> 27:36:41,599
fix that actually let's see in here
32189
27:36:41,600 --> 27:36:47,832
logged out at the moment and let's pass
32190
27:36:44,232 --> 27:36:49,680
a null exception in here as well
32191
27:36:47,831 --> 27:36:52,080
so i'm going to go to my notes as well
32192
27:36:49,679 --> 27:36:54,399
to auth block to ensure that i have all
32193
27:36:52,080 --> 27:36:55,759
the necessary information to pass
32194
27:36:55,759 --> 27:36:59,759
so let's go in here and also fix that so
32195
27:36:57,831 --> 27:37:01,831
now we're in our off block dart file and
32196
27:36:59,759 --> 27:37:04,231
we fixed the error that was caused by us
32197
27:37:01,831 --> 27:37:08,479
adding an optional parameter
32198
27:37:04,232 --> 27:37:11,360
um to our off state um logged out all
32199
27:37:11,360 --> 27:37:14,232
then the next step as the caption
32200
27:37:12,800 --> 27:37:17,192
indicates is we're going to remove the
32201
27:37:14,232 --> 27:37:20,320
emitting of off state loading
32202
27:37:20,320 --> 27:37:25,280
let's go ahead and do that so we're
32203
27:37:22,479 --> 27:37:27,440
going to go ahead and remove this image
32204
27:37:25,279 --> 27:37:29,279
from there okay so we're not gonna
32205
27:37:27,440 --> 27:37:31,680
display any kind of like a login screen
32206
27:37:34,720 --> 27:37:39,279
as you can see in here we're now gonna
32207
27:37:39,279 --> 27:37:44,232
um i've talked about block listener
32208
27:37:41,279 --> 27:37:46,872
block provider block builder block
32209
27:37:44,232 --> 27:37:49,360
consumer before but for those of you who
32210
27:37:46,872 --> 27:37:50,872
are not aware of what a block listener
32211
27:37:49,360 --> 27:37:53,600
is a block listener as its name
32212
27:37:50,872 --> 27:37:56,000
indicates and it's only going to listen
32213
27:37:53,600 --> 27:37:58,320
to changes in the state of a block for
32214
27:37:56,000 --> 27:37:59,759
instance our off block and it is going
32215
27:38:02,232 --> 27:38:07,360
a side effect is for instance displaying
32216
27:38:04,872 --> 27:38:09,120
of a new screen or displaying a dialogue
32217
27:38:07,360 --> 27:38:10,160
or removing a dialogue or removing a
32218
27:38:10,160 --> 27:38:13,600
from your navigation stack these are
32219
27:38:18,399 --> 27:38:24,079
to be for instance uh to replace the
32220
27:38:22,639 --> 27:38:26,000
current widget that's on the screen
32221
27:38:24,080 --> 27:38:29,191
instead they can create something that
32222
27:38:26,000 --> 27:38:31,039
is on the side as its name indicates so
32223
27:38:29,191 --> 27:38:32,959
listener is perfect for that so the
32224
27:38:32,960 --> 27:38:37,192
or the listener parameter of a block
32225
27:38:34,639 --> 27:38:39,279
listener doesn't return a widget except
32226
27:38:37,191 --> 27:38:41,279
it's just a void block so it allows you
32227
27:38:39,279 --> 27:38:42,399
to do something with the incoming state
32228
27:38:42,399 --> 27:38:46,319
so what we're gonna do now is we're
32229
27:38:46,320 --> 27:38:50,552
block listener in our login view for
32230
27:38:50,551 --> 27:38:55,679
in order to basically handle our
32231
27:38:53,360 --> 27:38:56,639
exceptions because if you have a look at
32232
27:38:56,639 --> 27:39:00,800
login view right now you can see that we
32233
27:39:04,080 --> 27:39:09,831
and in there we're sending an
32234
27:39:07,279 --> 27:39:12,232
event of login to our auth block
32235
27:39:09,831 --> 27:39:14,080
but we're also handling exceptions in
32236
27:39:12,232 --> 27:39:16,080
this way and as we mentioned before
32237
27:39:14,080 --> 27:39:18,800
these exceptions are never going to
32238
27:39:21,679 --> 27:39:27,039
block or any block doesn't necessarily
32239
27:39:24,639 --> 27:39:29,039
have to throw an exception the way it
32240
27:39:27,039 --> 27:39:31,439
works for us if we go back to our auth
32241
27:39:31,440 --> 27:39:37,680
look at our login you can see that if
32242
27:39:35,360 --> 27:39:39,911
there is an exception what we're going
32243
27:39:37,679 --> 27:39:41,911
to do and what we're doing at the moment
32244
27:39:39,911 --> 27:39:44,080
is like we're saying off state login
32245
27:39:44,080 --> 27:39:48,400
and what we're what we also need to do
32246
27:39:46,399 --> 27:39:51,279
actually is to clean this up because
32247
27:39:48,399 --> 27:39:53,279
login failure shouldn't really be there
32248
27:39:51,279 --> 27:39:55,679
so i'm going to go to my notes as well
32249
27:39:53,279 --> 27:39:58,160
and make sure that that yeah that seems
32250
27:39:55,679 --> 27:40:00,231
to be completely removed so let's go to
32251
27:39:58,160 --> 27:40:02,000
our off state actually and as part of
32252
27:40:02,000 --> 27:40:07,191
logged out that we added the exception
32253
27:40:04,551 --> 27:40:10,399
let's go and remove this login failure
32254
27:40:07,191 --> 27:40:12,639
completely okay so now i'm in off state
32255
27:40:17,600 --> 27:40:22,720
off state login failure because as i
32256
27:40:20,399 --> 27:40:25,759
mentioned a login failure is now
32257
27:40:22,720 --> 27:40:27,512
expressed by the auth state logged out
32258
27:40:27,512 --> 27:40:31,680
you're either logged in or logged out
32259
27:40:29,600 --> 27:40:33,912
that's how i'm thinking and if you're
32260
27:40:31,679 --> 27:40:35,191
logged out there may be an exception
32261
27:40:35,191 --> 27:40:39,599
therefore for instance caused during the
32262
27:40:37,039 --> 27:40:42,799
login process so now that we've removed
32263
27:40:39,600 --> 27:40:45,040
that state auth state login failure in
32264
27:40:42,800 --> 27:40:47,760
here we're going to replace that in our
32265
27:40:45,039 --> 27:40:51,119
osblog dart file we're going to replace
32266
27:40:52,399 --> 27:40:57,039
log out and then an exception in here
32267
27:41:00,639 --> 27:41:06,000
so now we're talking about uh auth
32268
27:41:02,872 --> 27:41:09,279
listeners so let's go ahead and try to
32269
27:41:06,000 --> 27:41:11,039
fix this up so in our login view
32270
27:41:09,279 --> 27:41:13,039
so i'm just going to go into my notes as
32271
27:41:13,039 --> 27:41:18,479
so if you have a look at our login view
32272
27:41:16,000 --> 27:41:20,000
right now we have a text button at the
32273
27:41:20,000 --> 27:41:24,639
which looks like this this is a text
32274
27:41:22,720 --> 27:41:27,680
button and it has an on press with an
32275
27:41:24,639 --> 27:41:31,191
async okay so that is the actual login
32276
27:41:27,679 --> 27:41:33,359
button all right and this login button
32277
27:41:31,191 --> 27:41:34,959
is the one then for now that is going to
32278
27:41:33,360 --> 27:41:38,000
take care of the exception handling
32279
27:41:38,479 --> 27:41:41,911
block listener so as you can see in the
32280
27:41:40,232 --> 27:41:44,232
cache it says our login view won't be
32281
27:41:41,911 --> 27:41:46,479
rebuilt since the state is the same but
32282
27:41:46,479 --> 27:41:50,959
so this is very important to actually
32283
27:41:48,551 --> 27:41:53,759
understand so let's have a look again at
32284
27:41:50,960 --> 27:41:55,192
our auth state in here and auth state
32285
27:41:55,911 --> 27:42:02,872
even if we put an a block listener and
32286
27:42:00,080 --> 27:42:04,960
wrap this button this text button here
32287
27:42:05,831 --> 27:42:10,399
you see once the application launches in
32288
27:42:08,000 --> 27:42:13,512
our off block you can see that
32289
27:42:10,399 --> 27:42:15,599
first we are logged out okay so when the
32290
27:42:13,512 --> 27:42:17,119
application launches there is no user
32291
27:42:15,600 --> 27:42:18,720
then the state is logged out and then
32292
27:42:17,119 --> 27:42:20,871
when you press the login button with
32293
27:42:18,720 --> 27:42:22,639
invalid credentials for instance
32294
27:42:20,872 --> 27:42:24,639
then the state is still going to be
32295
27:42:22,639 --> 27:42:26,399
logged out but with an exception
32296
27:42:26,399 --> 27:42:32,551
button won't be able to render or do
32297
27:42:30,080 --> 27:42:35,512
anything with those exceptions because
32298
27:42:32,551 --> 27:42:38,080
from our off blocks perspective it is
32299
27:42:35,512 --> 27:42:40,479
the same state one within without an
32300
27:42:42,720 --> 27:42:47,680
so it is the same state or it is the
32301
27:42:48,800 --> 27:42:54,000
we we are actually going to fix that um
32302
27:42:51,911 --> 27:42:57,679
but for now we're just going to go ahead
32303
27:42:57,679 --> 27:43:02,319
so let's go ahead and as the caption
32304
27:43:00,080 --> 27:43:05,759
indicates we're gonna handle some
32305
27:43:02,320 --> 27:43:09,832
exceptions in our text button in here
32306
27:43:05,759 --> 27:43:12,479
so let's go and wrap our text button um
32307
27:43:09,831 --> 27:43:14,551
with a block listener okay so i'm gonna
32308
27:43:14,551 --> 27:43:19,279
and then i'm gonna say wrap with block
32309
27:43:16,639 --> 27:43:22,479
listener and as i've mentioned this
32310
27:43:19,279 --> 27:43:25,119
previously i have this these wrap with
32311
27:43:22,479 --> 27:43:27,512
block etc because i have an extension in
32312
27:43:25,119 --> 27:43:30,159
visual studio code call call block that
32313
27:43:27,512 --> 27:43:32,400
is from felix angelov i hope that i'm
32314
27:43:30,160 --> 27:43:34,872
pronouncing pronouncing his name right
32315
27:43:32,399 --> 27:43:36,871
from um very good ventures who are the
32316
27:43:34,872 --> 27:43:39,440
people who are basically sponsoring
32317
27:43:41,440 --> 27:43:45,680
that is the reason i see all those wrap
32318
27:43:43,440 --> 27:43:47,279
with block etc in visual studio code if
32319
27:43:45,679 --> 27:43:49,279
you don't have that you may have to do
32320
27:43:47,279 --> 27:43:51,119
this part by hand like to create a block
32321
27:43:49,279 --> 27:43:52,800
listener in here but i'm just gonna take
32322
27:43:51,119 --> 27:43:54,959
advantage of having that extension in
32323
27:43:52,800 --> 27:43:57,440
visual studio code and just say wrap
32324
27:43:57,440 --> 27:44:01,512
and here you can see it says okay what
32325
27:43:59,679 --> 27:44:04,871
type of a block is it and i'm gonna just
32326
27:44:04,872 --> 27:44:09,040
and it says what state does it have then
32327
27:44:09,039 --> 27:44:14,719
all right and then here it says okay do
32328
27:44:16,800 --> 27:44:21,832
that was the wrapping of our text button
32329
27:44:19,600 --> 27:44:24,400
with a block listener so that's that's
32330
27:44:21,831 --> 27:44:26,319
just that just went smoothly
32331
27:44:24,399 --> 27:44:28,479
now what we have to do is as you can see
32332
27:44:26,320 --> 27:44:30,160
in the caption is to handle three
32333
27:44:28,479 --> 27:44:32,639
separate exceptions that might happen
32334
27:44:30,160 --> 27:44:34,552
during login let's go back let's take a
32335
27:44:36,800 --> 27:44:41,832
um so firebase author provider dart file
32336
27:44:43,759 --> 27:44:47,831
and you can see that there could be
32337
27:44:45,191 --> 27:44:50,159
three exceptions that might happen that
32338
27:44:47,831 --> 27:44:53,831
are called firebase auth exception user
32339
27:44:53,831 --> 27:44:58,080
so we need to handle these off
32340
27:44:56,160 --> 27:45:00,960
exceptions so user not found wrong
32341
27:44:58,080 --> 27:45:03,911
password and generic auth exception okay
32342
27:45:00,960 --> 27:45:08,720
so let's go in here and just say that
32343
27:45:13,600 --> 27:45:17,600
remember inside logged out we could have
32344
27:45:15,759 --> 27:45:19,679
an exception an optional exception and
32345
27:45:17,600 --> 27:45:21,040
that's exactly what we're gonna handle
32346
27:45:22,720 --> 27:45:27,911
that was you see we said now if state is
32347
27:45:25,911 --> 27:45:29,679
logged out so now in this code block in
32348
27:45:27,911 --> 27:45:33,599
here dart is going to understand that
32349
27:45:29,679 --> 27:45:36,000
okay anywhere in here state is
32350
27:45:33,600 --> 27:45:38,720
auth state logged out so you have access
32351
27:45:38,720 --> 27:45:42,800
so then we're going to say if states
32352
27:45:47,279 --> 27:45:50,479
and we're gonna display a weight
32353
27:45:51,360 --> 27:45:56,800
error dialog so let's make this a
32354
27:45:53,911 --> 27:45:59,279
listener also async and then we're gonna
32355
27:45:59,279 --> 27:46:03,911
and which we've coded before remember
32356
27:46:01,911 --> 27:46:07,191
this uses the generic dialog so i'm
32357
27:46:03,911 --> 27:46:08,800
going to go back here to login view dart
32358
27:46:07,191 --> 27:46:11,360
and for the text we're just going to say
32359
27:46:11,360 --> 27:46:16,232
then we have to also handle wrong
32360
27:46:13,279 --> 27:46:19,039
password off exception so else if state
32361
27:46:16,232 --> 27:46:21,600
exception is wrong password off
32362
27:46:19,039 --> 27:46:22,959
exception then copy the text here and
32363
27:46:21,600 --> 27:46:25,832
then in here we're just going to say
32364
27:46:26,232 --> 27:46:30,320
and remember in anything that has to do
32365
27:46:28,639 --> 27:46:33,831
with username and password it's quite
32366
27:46:30,320 --> 27:46:36,480
important that you don't tell the user
32367
27:46:33,831 --> 27:46:39,119
which part of their credentials actually
32368
27:46:39,119 --> 27:46:42,720
i mean if there is a hacker who's trying
32369
27:46:40,800 --> 27:46:45,279
to get into the system and just using
32370
27:46:42,720 --> 27:46:47,279
the ui then if you tell them wrong
32371
27:46:45,279 --> 27:46:49,039
password they'd be like ah so i got the
32372
27:46:47,279 --> 27:46:50,232
email right it's just a password that's
32373
27:46:50,232 --> 27:46:56,232
try not to tell a user even if it's for
32374
27:46:53,512 --> 27:46:58,232
good reasons like if it even if you even
32375
27:46:56,232 --> 27:46:59,832
if you think well i have no hackers in
32376
27:46:59,831 --> 27:47:04,551
it is still better just to say wrong
32377
27:47:02,000 --> 27:47:06,399
credentials because the user themselves
32378
27:47:04,551 --> 27:47:08,231
probably already know that their email
32379
27:47:06,399 --> 27:47:10,231
is correct or incorrect so they're first
32380
27:47:08,232 --> 27:47:11,512
going to check their email so if the
32381
27:47:10,232 --> 27:47:13,279
email is correct then they are going to
32382
27:47:11,512 --> 27:47:14,400
know that the password is incorrect and
32383
27:47:14,399 --> 27:47:18,720
we're going to later allow the user to
32384
27:47:18,720 --> 27:47:22,872
so just say wrong credentials in my
32385
27:47:25,279 --> 27:47:30,872
exception is generic auth exception
32386
27:47:29,039 --> 27:47:32,319
then we're going to display a dialogue
32387
27:47:30,872 --> 27:47:33,832
and in here we're just going to say
32388
27:47:38,160 --> 27:47:44,000
so that's that part done so now we've
32389
27:47:40,800 --> 27:47:47,279
handled those auth exceptions in our
32390
27:47:44,000 --> 27:47:48,399
login view for our text button that says
32391
27:47:51,279 --> 27:47:55,831
so now that we have that what we need to
32392
27:47:52,960 --> 27:47:58,552
do is to remove the uh exception
32393
27:47:55,831 --> 27:48:02,959
handling from the button itself so at
32394
27:47:58,551 --> 27:48:05,512
the moment we have a huge try statement
32395
27:48:02,960 --> 27:48:07,512
not a huge actually we have quite a long
32396
27:48:05,512 --> 27:48:09,911
try catch statements here that we have
32397
27:48:07,512 --> 27:48:12,320
we're catching three exceptions which
32398
27:48:09,911 --> 27:48:13,279
are now actually being caught here with
32399
27:48:13,279 --> 27:48:18,160
block listener so let's go and not
32400
27:48:16,232 --> 27:48:19,832
actually do that so i want you to grab
32401
27:48:19,831 --> 27:48:24,639
and where we actually pass the event of
32402
27:48:22,232 --> 27:48:27,911
log into our block and remove this
32403
27:48:24,639 --> 27:48:30,720
entire try and catch block and just do
32404
27:48:27,911 --> 27:48:32,639
the context read at auth event login so
32405
27:48:32,639 --> 27:48:36,399
event or sorry on your on press
32406
27:48:34,551 --> 27:48:38,959
parameter of your text button should
32407
27:48:36,399 --> 27:48:41,439
look very simple just like this email
32408
27:48:38,960 --> 27:48:44,800
password and then you pass that event to
32409
27:48:45,512 --> 27:48:52,000
all right so now that that has happened
32410
27:48:48,551 --> 27:48:54,231
let's actually check this out and see if
32411
27:48:52,000 --> 27:48:56,800
everything works and remember this is
32412
27:48:54,232 --> 27:48:59,040
like the beginning of us moving towards
32413
27:48:56,800 --> 27:49:00,720
a better approach of handling our
32414
27:49:00,720 --> 27:49:05,440
routing with blocks so things aren't
32415
27:49:02,872 --> 27:49:07,360
going to be smooth actually we have a
32416
27:49:05,440 --> 27:49:09,512
lot of problems we have to fix but this
32417
27:49:07,360 --> 27:49:12,960
is just like the beginning so i'm going
32418
27:49:09,512 --> 27:49:15,279
to bring scr cpy in here and let's just
32419
27:49:19,679 --> 27:49:24,799
now i'm on the login screen so okay i'm
32420
27:49:22,639 --> 27:49:26,319
then gonna go ahead in here and like put
32421
27:49:26,320 --> 27:49:29,760
and then i'm gonna put some inquiry
32422
27:49:28,080 --> 27:49:32,080
credentials in here okay and i'm just
32423
27:49:29,759 --> 27:49:34,551
gonna press the login button and now you
32424
27:49:32,080 --> 27:49:36,639
can see that our block listener is
32425
27:49:34,551 --> 27:49:39,360
taking care of that so it's saying oh
32426
27:49:36,639 --> 27:49:42,319
you're logged out and then it's wrong
32427
27:49:39,360 --> 27:49:44,800
credentials okay so i'm gonna press ok
32428
27:49:42,320 --> 27:49:46,640
then i'm gonna just put an email address
32429
27:49:44,800 --> 27:49:48,160
here that doesn't exist and then press
32430
27:49:46,639 --> 27:49:50,399
the login button and now you can see
32431
27:49:48,160 --> 27:49:52,080
user not found okay and to be honest
32432
27:49:50,399 --> 27:49:53,831
with you if you wanna if you wanna do
32433
27:49:52,080 --> 27:49:55,191
what i actually said before that it's
32434
27:49:55,191 --> 27:50:00,639
not tell the user whether it's their
32435
27:49:57,600 --> 27:50:03,192
user that is wrong or password you may
32436
27:50:00,639 --> 27:50:05,911
want to actually wrap both the state
32437
27:50:03,191 --> 27:50:07,759
exception of user not found and wrong
32438
27:50:05,911 --> 27:50:10,080
password and just display the same
32439
27:50:07,759 --> 27:50:12,831
message so you could do that by saying
32440
27:50:16,720 --> 27:50:20,000
and then you can just display the same
32441
27:50:18,399 --> 27:50:22,231
message and then you could just remove
32442
27:50:20,000 --> 27:50:23,831
this statement from there so that could
32443
27:50:22,232 --> 27:50:26,160
also work i'm just gonna leave it like
32444
27:50:23,831 --> 27:50:28,080
this but just so you know it is actually
32445
27:50:26,160 --> 27:50:30,872
better to do that approach which i just
32446
27:50:30,872 --> 27:50:34,232
all right so it seems like our block
32447
27:50:32,320 --> 27:50:36,160
listener is working fine in the login
32448
27:50:34,232 --> 27:50:37,832
view so this was just the beginning and
32449
27:50:36,160 --> 27:50:40,080
we have a lot to fix so we're going to
32450
27:50:37,831 --> 27:50:41,279
fix those things in the coming chapters
32451
27:50:41,279 --> 27:50:46,479
now that the code seems to be working
32452
27:50:43,360 --> 27:50:48,399
for login view let's just go ahead and
32453
27:50:46,479 --> 27:50:52,399
do what we usually do and commit our
32454
27:50:48,399 --> 27:50:54,479
work so that we don't lose the the code
32455
27:50:57,360 --> 27:51:01,600
make visual studio code a little bit
32456
27:51:01,600 --> 27:51:06,400
increase the size quite dramatically
32457
27:51:03,831 --> 27:51:08,871
let's have a look at our status
32458
27:51:06,399 --> 27:51:12,319
we've modified three files so let's just
32459
27:51:14,232 --> 27:51:19,832
let's actually let's do it at all and
32460
27:51:16,960 --> 27:51:22,160
then we just do a normal commenting here
32461
27:51:22,160 --> 27:51:26,400
now that it's done let's just push our
32462
27:51:23,911 --> 27:51:29,119
changes to the remote and then let's
32463
27:51:26,399 --> 27:51:30,479
just also gets get status nothing to
32464
27:51:29,119 --> 27:51:32,639
command so everything was committed
32465
27:51:30,479 --> 27:51:36,231
successfully and then let's just tag as
32466
27:51:36,232 --> 27:51:40,232
so that's our tag and then we push our
32467
27:51:40,232 --> 27:51:46,320
and let's have a look at our tags to
32468
27:51:42,872 --> 27:51:48,960
this point 23 we have where's 24 and
32469
27:51:46,320 --> 27:51:50,960
there is 24 so we have everything tagged
32470
27:51:50,960 --> 27:51:56,400
great so um as you can see and as is
32471
27:51:54,720 --> 27:51:57,680
tradition we always talk about at the
32472
27:51:56,399 --> 27:51:59,439
end of every chapter we talk about what
32473
27:51:57,679 --> 27:52:00,871
we need to discuss in the chapter that's
32474
27:52:02,800 --> 27:52:06,720
so you can see our routing and dialog
32475
27:52:04,639 --> 27:52:08,639
handling isn't isn't block based at the
32476
27:52:06,720 --> 27:52:10,160
moment we still have quite a lot of
32477
27:52:08,639 --> 27:52:12,160
places in our application that we're
32478
27:52:10,160 --> 27:52:14,480
seeing for instance navigator of context
32479
27:52:12,160 --> 27:52:16,320
push name and removed until or we're
32480
27:52:16,320 --> 27:52:19,912
so we've handled some bits and pieces of
32481
27:52:18,232 --> 27:52:21,512
our application and we're using block
32482
27:52:19,911 --> 27:52:23,279
but for instance we aren't handling
32483
27:52:21,512 --> 27:52:25,191
stuff in the register view or the verify
32484
27:52:23,279 --> 27:52:27,440
email view stuff like that so
32485
27:52:25,191 --> 27:52:28,799
we have a lot of work to do and the next
32486
27:52:27,440 --> 27:52:30,639
chapter is actually going to be a heavy
32487
27:52:28,800 --> 27:52:32,800
one but it's going to be such a key
32488
27:52:30,639 --> 27:52:34,872
chapter in this entire course
32489
27:52:32,800 --> 27:52:36,800
that if you could just stick with me
32490
27:52:34,872 --> 27:52:38,872
throughout the next chapter then you're
32491
27:52:36,800 --> 27:52:41,440
gonna see your applications architecture
32492
27:52:38,872 --> 27:52:43,279
actually become more and more robust so
32493
27:52:41,440 --> 27:52:45,279
grab some refreshments if you want to
32494
27:52:43,279 --> 27:52:47,512
and i'll see you in the next chapter
32495
27:52:45,279 --> 27:52:49,039
hello everyone and welcome to chapter 42
32496
27:52:49,039 --> 27:52:53,191
in previous chapters we've talked quite
32497
27:52:50,960 --> 27:52:55,912
a bit about cleaning up our application
32498
27:52:53,191 --> 27:52:59,039
logic and our authentication logic we've
32499
27:52:55,911 --> 27:53:00,160
come a good bit forward with that and
32500
27:53:00,160 --> 27:53:05,512
um we clean up quite a bit of stuff in
32501
27:53:03,512 --> 27:53:07,279
the login view and now we're using block
32502
27:53:05,512 --> 27:53:09,119
listener in the login view if you follow
32503
27:53:07,279 --> 27:53:10,232
all the chapters chronologically up to
32504
27:53:09,119 --> 27:53:11,440
up to that including the previous
32505
27:53:11,440 --> 27:53:14,960
so you should already know about block
32506
27:53:13,279 --> 27:53:17,360
block listener block consumer block
32507
27:53:19,191 --> 27:53:24,399
but we have quite a bit left and i'm
32508
27:53:22,160 --> 27:53:27,040
actually proud to say that this chapter
32509
27:53:24,399 --> 27:53:29,191
and maybe the next one or two chapters
32510
27:53:29,191 --> 27:53:35,191
glues that bring the application to a
32511
27:53:32,320 --> 27:53:37,600
lot more tighter point where it will be
32512
27:53:35,191 --> 27:53:39,360
ready for releasing to the app store and
32513
27:53:37,600 --> 27:53:41,040
the play store so if you stick with me
32514
27:53:39,360 --> 27:53:41,911
throughout these few chapters that are
32515
27:53:41,911 --> 27:53:46,551
we are going to basically create a lot
32516
27:53:44,080 --> 27:53:49,911
more cleaner product that is not only
32517
27:53:46,551 --> 27:53:53,039
usable by the end user but it's also
32518
27:53:49,911 --> 27:53:54,639
but it's also architecturally sound so
32519
27:53:53,039 --> 27:53:56,231
you're going to be proud of actually
32520
27:53:54,639 --> 27:53:59,119
releasing this application or maybe even
32521
27:53:56,232 --> 27:54:00,720
showing this code to your friends and
32522
27:54:00,720 --> 27:54:03,759
as a caption in the case in this chapter
32523
27:54:02,551 --> 27:54:06,399
we're going to talk about moving to
32524
27:54:03,759 --> 27:54:08,959
block for routing and dialogues because
32525
27:54:06,399 --> 27:54:11,191
right now you know routing what we have
32526
27:54:08,960 --> 27:54:14,400
in our application is kind of like a
32527
27:54:11,191 --> 27:54:17,512
hybrid in the main dart file and i mean
32528
27:54:14,399 --> 27:54:19,511
we don't have to talk about uh
32529
27:54:17,512 --> 27:54:21,191
so like abstract concept concepts we can
32530
27:54:19,512 --> 27:54:22,800
actually look at our main dart files so
32531
27:54:21,191 --> 27:54:24,551
if you look here what we've done in the
32532
27:54:22,800 --> 27:54:26,800
main dart file we're actually creating a
32533
27:54:24,551 --> 27:54:29,191
block builder and depending on the
32534
27:54:26,800 --> 27:54:31,440
states that are being output by our
32535
27:54:29,191 --> 27:54:33,911
block we're displaying the correct view
32536
27:54:31,440 --> 27:54:35,600
so this in itself is quite fine so
32537
27:54:33,911 --> 27:54:38,399
there's nothing wrong with this but
32538
27:54:35,600 --> 27:54:40,480
we're also mixing this up with custom
32539
27:54:38,399 --> 27:54:42,799
places in our application where we're
32540
27:54:40,479 --> 27:54:47,191
saying for instance context of
32541
27:54:42,800 --> 27:54:48,479
um let's see actually with navigator off
32542
27:54:47,191 --> 27:54:50,551
and you can see we're doing actually
32543
27:54:48,479 --> 27:54:52,720
that's fine but you can see in our login
32544
27:54:50,551 --> 27:54:54,551
view when you press the not registered
32545
27:54:52,720 --> 27:54:56,160
yet register here button in order to do
32546
27:54:54,551 --> 27:54:58,479
the registration of the user then we're
32547
27:54:56,160 --> 27:55:01,279
doing a navigator of push blah blah blah
32548
27:54:58,479 --> 27:55:03,599
so there's quite a few bits and pieces
32549
27:55:01,279 --> 27:55:05,440
left still in our application that we're
32550
27:55:03,600 --> 27:55:06,960
either directly talking with our auth
32551
27:55:05,440 --> 27:55:09,191
service which we shouldn't be doing we
32552
27:55:06,960 --> 27:55:12,480
should be talking to the off block
32553
27:55:09,191 --> 27:55:15,279
or and we're talking with navigator of
32554
27:55:12,479 --> 27:55:16,720
something to do push name so
32555
27:55:15,279 --> 27:55:19,119
in this chapter we're going to clean
32556
27:55:16,720 --> 27:55:20,960
these things up and make make basically
32557
27:55:20,960 --> 27:55:25,680
the consumption of our off block a lot
32558
27:55:23,440 --> 27:55:29,191
tighter all right using block and
32559
27:55:25,679 --> 27:55:30,799
listeners block builders and um
32560
27:55:29,191 --> 27:55:32,799
we're all also going to use block
32561
27:55:38,720 --> 27:55:41,279
as the caption indicates i mean i've
32562
27:55:40,080 --> 27:55:43,040
already talked about this maybe i should
32563
27:55:41,279 --> 27:55:44,479
have displayed this caption a few
32564
27:55:44,479 --> 27:55:47,440
but we've already talked about this we
32565
27:55:45,759 --> 27:55:49,599
should basically tighten up how we're
32566
27:55:52,399 --> 27:55:55,911
how we work with off service
32567
27:55:56,080 --> 27:56:00,800
and you can see in here we need a few
32568
27:55:58,800 --> 27:56:02,960
more auth events in order to be able to
32569
27:56:00,800 --> 27:56:05,192
achieve this so let's go ahead and open
32570
27:56:05,191 --> 27:56:09,512
i need to probably do some reshuffling
32571
27:56:07,191 --> 27:56:12,231
on the screen here so you see the code
32572
27:56:09,512 --> 27:56:15,279
better so i'll do what i usually do here
32573
27:56:12,232 --> 27:56:16,232
and then let's go to our off event
32574
27:56:16,232 --> 27:56:20,480
so these are the events that we have at
32575
27:56:17,911 --> 27:56:22,872
the moment we have log out login and
32576
27:56:20,479 --> 27:56:25,679
then we have an initialize but we also
32577
27:56:22,872 --> 27:56:27,760
have quite a few other ui events that
32578
27:56:25,679 --> 27:56:29,911
the application is doing in order to for
32579
27:56:27,759 --> 27:56:31,119
instance interact with authentication
32580
27:56:31,119 --> 27:56:35,599
um sending a verification email all
32581
27:56:33,360 --> 27:56:37,512
right so when you're in the verify email
32582
27:56:35,600 --> 27:56:39,512
view and the user presses send the
32583
27:56:37,512 --> 27:56:41,279
verification email again then that is at
32584
27:56:39,512 --> 27:56:42,720
the moment talking with our auth service
32585
27:56:41,279 --> 27:56:44,831
directly and we shouldn't be doing that
32586
27:56:42,720 --> 27:56:48,800
we should be asking our off blog to do
32587
27:56:44,831 --> 27:56:51,191
that or when you for instance um
32588
27:56:48,800 --> 27:56:53,040
ask the in in our verify email view so
32589
27:56:51,191 --> 27:56:54,159
if you go here you can see that we had
32590
27:56:54,160 --> 27:57:00,000
um log out button or the restart button
32591
27:56:57,831 --> 27:57:03,439
so let's go ahead and i'm going to bring
32592
27:57:03,440 --> 27:57:06,960
actually to be able to show to verify
32593
27:57:05,039 --> 27:57:08,799
email we have to have a user who hasn't
32594
27:57:06,960 --> 27:57:10,480
been verified but if you remember from
32595
27:57:08,800 --> 27:57:11,760
before if you've created a user just
32596
27:57:11,759 --> 27:57:16,479
or just just now for instance and that
32597
27:57:14,232 --> 27:57:18,720
user hasn't verified their credentials
32598
27:57:16,479 --> 27:57:20,479
then they're gonna always be moved into
32599
27:57:18,720 --> 27:57:23,600
this verify email view in which they
32600
27:57:20,479 --> 27:57:26,000
have to for instance say that yeah um i
32601
27:57:23,600 --> 27:57:28,400
am i did they had the ability to send a
32602
27:57:26,000 --> 27:57:30,551
verification email to their email again
32603
27:57:28,399 --> 27:57:32,639
or restart the whole process meaning to
32604
27:57:30,551 --> 27:57:34,159
log out and just go to the registered
32605
27:57:34,160 --> 27:57:38,320
that is at the moment happening directly
32606
27:57:35,911 --> 27:57:39,679
you can see it's off service directly to
32607
27:57:38,320 --> 27:57:41,120
the auth service and we should be doing
32608
27:57:39,679 --> 27:57:42,799
that and then there is a navigator of
32609
27:57:41,119 --> 27:57:44,479
push name then removed until which we
32610
27:57:44,479 --> 27:57:49,279
so in order to tighten these things up
32611
27:57:46,160 --> 27:57:50,872
we need a few more events in our auth
32612
27:57:49,279 --> 27:57:53,600
event dart file and that's what we're
32613
27:57:53,600 --> 27:57:59,680
so let's go to our auth event file and
32614
27:57:56,551 --> 27:58:01,679
i'm gonna do the same thing in my notes
32615
27:58:01,679 --> 27:58:05,279
new event that we're gonna create in
32616
27:58:03,512 --> 27:58:08,479
here as you can see it's called auth
32617
27:58:05,279 --> 27:58:10,232
event send email verification all right
32618
27:58:08,479 --> 27:58:12,159
so let's go ahead and do that i'm going
32619
27:58:10,232 --> 27:58:15,279
to get rid of this bottom view in here
32620
27:58:12,160 --> 27:58:17,192
and also the project structure
32621
27:58:15,279 --> 27:58:20,000
so i've already written that in my notes
32622
27:58:17,191 --> 27:58:21,759
so i'm just going to bring it here to
32623
27:58:20,000 --> 27:58:23,512
the to visual studio code so i don't
32624
27:58:21,759 --> 27:58:25,511
have to write it manually but the event
32625
27:58:23,512 --> 27:58:29,512
name should be called off event send
32626
27:58:25,512 --> 27:58:32,000
email verification the goal is for our
32627
27:58:29,512 --> 27:58:34,080
verify email view to send this event to
32628
27:58:32,000 --> 27:58:36,000
our off block in order to request a new
32629
27:58:34,080 --> 27:58:39,831
verification email to be sent to the
32630
27:58:36,000 --> 27:58:39,831
currently logged in user okay
32631
27:58:41,119 --> 27:58:46,959
we also need a register event so the
32632
27:58:44,639 --> 27:58:48,160
goal is that inside register view so
32633
27:58:46,960 --> 27:58:50,160
let's go have a look at the register
32634
27:58:48,160 --> 27:58:52,639
view right now and you can see when the
32635
27:58:50,160 --> 27:58:54,800
user presses the register button at the
32636
27:58:52,639 --> 27:58:57,440
moment we're saying uh firebase create
32637
27:58:54,800 --> 27:58:58,960
user so we're going directly to firebase
32638
27:58:58,960 --> 27:59:02,000
and we're saying create user and then
32639
27:59:00,720 --> 27:59:03,911
immediately we're saying send email
32640
27:59:02,000 --> 27:59:05,759
verification so we shouldn't be doing
32641
27:59:03,911 --> 27:59:07,599
any of these so these three things that
32642
27:59:05,759 --> 27:59:10,231
we're doing here are pretty much wrong
32643
27:59:07,600 --> 27:59:11,760
from the architecture perspective so we
32644
27:59:10,232 --> 27:59:14,000
shouldn't be talking with these services
32645
27:59:11,759 --> 27:59:15,439
directly we should clean this up okay
32646
27:59:14,000 --> 27:59:18,160
in order to achieve that we need to go
32647
27:59:15,440 --> 27:59:21,512
back to our auth event and create a new
32648
27:59:21,512 --> 27:59:26,800
so i'm going to bring that at the bottom
32649
27:59:23,831 --> 27:59:29,039
of login here so let me go ahead and
32650
27:59:29,039 --> 27:59:33,191
off event we call it class of event
32651
27:59:33,191 --> 27:59:36,720
and of course we're going to extend our
32652
27:59:36,720 --> 27:59:40,960
and for register we need two parameters
32653
27:59:39,512 --> 27:59:42,551
if we go back to the register view you
32654
27:59:40,960 --> 27:59:44,080
see upon registering we're always
32655
27:59:42,551 --> 27:59:45,512
sending the email and the password so
32656
27:59:44,080 --> 27:59:47,911
let's go ahead and do the same thing in
32657
27:59:45,512 --> 27:59:49,512
here so we say final string email and
32658
27:59:47,911 --> 27:59:51,119
i'm going to copy this and i'm going to
32659
27:59:49,512 --> 27:59:53,279
say just password and get help from
32660
27:59:51,119 --> 27:59:56,159
visual studio code to create this
32661
27:59:53,279 --> 27:59:59,191
constant constructor okay you may want
32662
27:59:56,160 --> 28:00:01,360
to make these required name fields using
32663
27:59:59,191 --> 28:00:02,551
these but i'm not going to do that so
32664
28:00:01,360 --> 28:00:06,399
i'm just going to leave it like this
32665
28:00:02,551 --> 28:00:06,399
with email and password okay
32666
28:00:06,551 --> 28:00:12,319
so that's our off event register
32667
28:00:12,872 --> 28:00:19,360
so the other thing that we need
32668
28:00:15,039 --> 28:00:21,599
an event called should register so um
32669
28:00:19,360 --> 28:00:25,039
basically that means for instance if you
32670
28:00:21,600 --> 28:00:26,480
um haven't really registered a user yet
32671
28:00:26,479 --> 28:00:31,911
send this event i'm actually gonna have
32672
28:00:31,911 --> 28:00:37,679
and that is if you for instance go to a
32673
28:00:37,679 --> 28:00:41,279
and then you have a look at this button
32674
28:00:39,191 --> 28:00:43,119
that we have in here not registered yet
32675
28:00:41,279 --> 28:00:44,399
register here that is basically the
32676
28:00:43,119 --> 28:00:46,231
event that we're going to implement
32677
28:00:44,399 --> 28:00:49,119
right now so we're going to tell the off
32678
28:00:46,232 --> 28:00:51,680
block that hey you should register user
32679
28:00:49,119 --> 28:00:54,319
okay and then off block is then going to
32680
28:00:51,679 --> 28:00:55,759
change its state to a state that the
32681
28:00:54,320 --> 28:00:57,512
application is going to understand and
32682
28:00:55,759 --> 28:00:59,360
automatically send the user to the
32683
28:01:02,160 --> 28:01:07,279
so um let's go ahead i'm gonna just
32684
28:01:04,960 --> 28:01:09,680
check my notes as well let's go ahead
32685
28:01:07,279 --> 28:01:11,279
and develop this should register and
32686
28:01:09,679 --> 28:01:13,359
i've already done that in my notes so
32687
28:01:11,279 --> 28:01:15,600
i'm gonna bring it at the bottom of off
32688
28:01:13,360 --> 28:01:17,119
event register but you will need to
32689
28:01:15,600 --> 28:01:19,192
write this yourself so it looks like
32690
28:01:17,119 --> 28:01:20,871
auth event should register extends off
32691
28:01:19,191 --> 28:01:25,119
event and it just has a constant
32692
28:01:20,872 --> 28:01:28,800
constructor so it's very simple okay
32693
28:01:25,119 --> 28:01:31,279
so that was for our auth um event should
32694
28:01:32,551 --> 28:01:35,831
at the moment if we go now as you can
32695
28:01:34,320 --> 28:01:38,080
see it in caption we need also and now
32696
28:01:35,831 --> 28:01:40,000
we've done the auth events like this
32697
28:01:38,080 --> 28:01:42,080
stuff that we had to create in order to
32698
28:01:42,080 --> 28:01:46,320
um events that come from the ui but we
32699
28:01:43,911 --> 28:01:49,119
also need to fix up our states so let's
32700
28:01:46,320 --> 28:01:50,872
go to our off state and have a refresher
32701
28:01:49,119 --> 28:01:51,831
in here you can see we have the state
32702
28:01:51,831 --> 28:01:57,119
logged in needs verification logged out
32703
28:01:55,119 --> 28:01:58,720
and log out failure but we're going to
32704
28:01:57,119 --> 28:02:00,871
clean this up a little bit and make sure
32705
28:01:58,720 --> 28:02:02,800
that we have every state that our
32706
28:02:00,872 --> 28:02:05,040
application requires in order to be able
32707
28:02:02,800 --> 28:02:08,400
to for instance display dialogs or do
32708
28:02:09,679 --> 28:02:15,679
in at the moment in our off state what
32709
28:02:13,039 --> 28:02:17,831
we need to do is to create you see we
32710
28:02:15,679 --> 28:02:19,599
have this loading state and what we're
32711
28:02:17,831 --> 28:02:22,159
going to do is to actually remove the
32712
28:02:19,600 --> 28:02:25,680
loading state and we're going to create
32713
28:02:22,160 --> 28:02:27,192
an auth state called on initialized all
32714
28:02:28,080 --> 28:02:33,119
let's go ahead and actually remove this
32715
28:02:30,399 --> 28:02:35,360
off states loading and create a class in
32716
28:02:35,360 --> 28:02:40,399
on initialized because when you land in
32717
28:02:40,399 --> 28:02:43,911
for the first time you may actually want
32718
28:02:43,911 --> 28:02:47,440
display some sort of loading screen or
32719
28:02:45,512 --> 28:02:49,040
whatever and we're going to indicate
32720
28:02:47,440 --> 28:02:50,960
that the application hasn't really
32721
28:02:50,960 --> 28:02:55,280
authentication system using this off
32722
28:02:53,279 --> 28:02:59,039
state uninitialized it's just this is a
32723
28:02:55,279 --> 28:03:01,679
cleaner way of indicating to the two
32724
28:02:59,039 --> 28:03:03,439
the call side which is ui that hey we
32725
28:03:01,679 --> 28:03:05,439
haven't yet been initialized so you need
32726
28:03:03,440 --> 28:03:07,911
to call the initialize function on our
32727
28:03:05,440 --> 28:03:10,080
off block okay or sorry you have to send
32728
28:03:10,080 --> 28:03:14,320
uh initialize auth event okay so let's
32729
28:03:14,320 --> 28:03:18,800
just to recap i removed off state
32730
28:03:18,800 --> 28:03:23,600
and now we're going to put in our off
32731
28:03:21,360 --> 28:03:27,831
state uninitialized so we're going to
32732
28:03:23,600 --> 28:03:29,680
say uninitialize extends off state
32733
28:03:27,831 --> 28:03:32,871
and let's just create a constant
32734
28:03:29,679 --> 28:03:35,191
constructor for it as well like that
32735
28:03:36,232 --> 28:03:40,232
so the other thing that we have to
32736
28:03:40,232 --> 28:03:45,760
obviously we've talked about login like
32737
28:03:42,720 --> 28:03:48,551
here login logged out and then log out
32738
28:03:48,551 --> 28:03:53,119
and and now we actually have to start
32739
28:03:51,279 --> 28:03:55,039
talking about what happens when the user
32740
28:03:53,119 --> 28:03:57,039
presses the register button when the
32741
28:03:55,039 --> 28:03:58,799
user presses the register button we also
32742
28:03:58,800 --> 28:04:03,120
the case that yeah we are registering at
32743
28:04:01,039 --> 28:04:05,119
the moment so it's a process that's
32744
28:04:03,119 --> 28:04:07,512
ongoing but we also have to talk about
32745
28:04:05,119 --> 28:04:09,759
what happens if the registration
32746
28:04:07,512 --> 28:04:12,232
fails so we're in the process of
32747
28:04:09,759 --> 28:04:14,319
registering either it goes fine and then
32748
28:04:12,232 --> 28:04:17,120
we say you're registered or we say
32749
28:04:14,320 --> 28:04:18,552
registry registration failed so let's go
32750
28:04:18,551 --> 28:04:23,599
a um a state in here right after
32751
28:04:21,279 --> 28:04:25,512
uninitialized let's just say class
32752
28:04:25,512 --> 28:04:31,911
what are we calling it registering
32753
28:04:28,800 --> 28:04:32,800
extends off state okay and let's just in
32754
28:04:32,800 --> 28:04:36,551
as we're doing in here for instance in
32755
28:04:34,720 --> 28:04:37,440
the state of logged out let's just copy
32756
28:04:37,440 --> 28:04:41,040
exception and bring it into off state
32757
28:04:41,039 --> 28:04:44,639
and then let's create a constant
32758
28:04:42,479 --> 28:04:46,231
constructor here for our off state
32759
28:04:44,639 --> 28:04:48,319
registering and i'm just going to say
32760
28:04:46,232 --> 28:04:51,279
constant here okay so now we have
32761
28:04:51,279 --> 28:04:56,872
so now we have registering logged in
32762
28:04:54,160 --> 28:04:59,192
and we also actually need to remove off
32763
28:05:02,720 --> 28:05:07,360
we have logged out with an exception
32764
28:05:08,320 --> 28:05:13,040
um so let's go ahead and do that right
32765
28:05:10,232 --> 28:05:15,279
now let's just remove off state log
32766
28:05:19,279 --> 28:05:23,360
so that's for off state registering
32767
28:05:25,191 --> 28:05:28,799
as you can see in the caption it says
32768
28:05:26,479 --> 28:05:31,039
loading of the logged out state we need
32769
28:05:28,800 --> 28:05:34,232
login screen to have a loading dialog so
32770
28:05:31,039 --> 28:05:36,551
we need is loading in the auth state
32771
28:05:34,232 --> 28:05:39,680
logged out so let's have a look at
32772
28:05:40,872 --> 28:05:46,080
previously we had this loading state as
32773
28:05:43,600 --> 28:05:47,680
a separate state so it was off state
32774
28:05:46,080 --> 28:05:49,360
loading and we were gonna generically
32775
28:05:47,679 --> 28:05:51,439
use it everywhere but now what we're
32776
28:05:49,360 --> 28:05:52,720
gonna do is to build this loading state
32777
28:05:52,720 --> 28:05:58,000
or to build this loading flag into
32778
28:05:55,679 --> 28:06:00,719
existing states themselves so
32779
28:05:58,000 --> 28:06:02,800
let's then go ahead and say well
32780
28:06:00,720 --> 28:06:05,279
when you press the login button what
32781
28:06:02,800 --> 28:06:07,360
we're going to do first is just to say
32782
28:06:05,279 --> 28:06:09,039
um actually wait let's go one step back
32783
28:06:07,360 --> 28:06:10,960
let's say you just landed in the
32784
28:06:09,039 --> 28:06:12,399
application but you already have a user
32785
28:06:10,960 --> 28:06:15,360
which you haven't logged them before
32786
28:06:12,399 --> 28:06:17,439
okay so your state is logged out and the
32787
28:06:17,440 --> 28:06:23,191
and we're going to add a flag in here
32788
28:06:19,512 --> 28:06:25,191
and say final bool is loading
32789
28:06:23,191 --> 28:06:27,279
and let's add that is loading to this
32790
28:06:25,191 --> 28:06:30,399
parameter in here and make both of these
32791
28:06:27,279 --> 28:06:31,831
required parameters okay like this
32792
28:06:31,831 --> 28:06:36,871
comma there as well like this boom so
32793
28:06:35,039 --> 28:06:39,119
when you land in the application
32794
28:06:36,872 --> 28:06:41,360
exception your state is logged out there
32795
28:06:39,119 --> 28:06:42,871
is no exception so exceptions null and
32796
28:06:41,360 --> 28:06:45,119
is loading is false because we're not
32797
28:06:42,872 --> 28:06:46,639
loading anything then you write your
32798
28:06:45,119 --> 28:06:49,360
credentials and you press the login
32799
28:06:46,639 --> 28:06:52,232
button then what happens state is still
32800
28:06:49,360 --> 28:06:53,680
logged out exception is null but loading
32801
28:06:53,679 --> 28:06:56,959
then let's just say that you entered the
32802
28:06:55,440 --> 28:06:58,639
incorrect credentials then what we're
32803
28:06:56,960 --> 28:07:00,400
going to do in our block auth block is
32804
28:06:58,639 --> 28:07:02,960
going to say ooh you're off state logged
32805
28:07:00,399 --> 28:07:05,119
out there is an exception and is loading
32806
28:07:05,119 --> 28:07:08,959
and then you'd be like okay now i
32807
28:07:07,360 --> 28:07:10,639
entered the inquiry credentials then
32808
28:07:08,960 --> 28:07:12,320
you're gonna correct those and then
32809
28:07:10,639 --> 28:07:14,080
press the login button again now what
32810
28:07:12,320 --> 28:07:16,232
are we gonna say we're gonna say okay
32811
28:07:14,080 --> 28:07:18,872
all state logged out exception is
32812
28:07:16,232 --> 28:07:20,320
nothing and then is loading is true
32813
28:07:20,320 --> 28:07:24,080
we can log you in that we're gonna
32814
28:07:21,911 --> 28:07:26,959
produce another state for you so you see
32815
28:07:24,080 --> 28:07:27,911
this is how we're using states to convey
32816
28:07:27,911 --> 28:07:31,599
cur like the correct state of the
32817
28:07:29,831 --> 28:07:33,439
application to the consumer which is the
32818
28:07:33,440 --> 28:07:37,911
so and this is not like you may think oh
32819
28:07:36,399 --> 28:07:40,159
how does he know that this is the right
32820
28:07:37,911 --> 28:07:43,599
right way of doing things well
32821
28:07:40,160 --> 28:07:45,360
there is no rights and wrong in here it
32822
28:07:45,360 --> 28:07:49,279
reason about your application
32823
28:07:47,679 --> 28:07:50,319
and when i say there is no right and
32824
28:07:50,320 --> 28:07:53,760
what i mean is that some things are more
32825
28:07:52,160 --> 28:07:56,320
right than the others and some things
32826
28:07:53,759 --> 28:07:58,399
are more wrong than the others but
32827
28:07:56,320 --> 28:08:00,640
what you need to find is like the sweet
32828
28:08:02,720 --> 28:08:07,600
good for your application and at the
32829
28:08:04,479 --> 28:08:09,599
same time is not incorrect okay and that
32830
28:08:07,600 --> 28:08:12,320
is the definition of write for your
32831
28:08:09,600 --> 28:08:14,720
application and in this case this is the
32832
28:08:12,320 --> 28:08:16,552
definition of right for this application
32833
28:08:14,720 --> 28:08:19,831
so you just need to find a sweet spot
32834
28:08:21,119 --> 28:08:25,360
now let's have a look in here a little
32835
28:08:23,360 --> 28:08:27,680
and talk a little about a little bit
32836
28:08:28,872 --> 28:08:33,192
what i mean by equality in here is that
32837
28:08:30,960 --> 28:08:35,512
you see what i talked about is three
32838
28:08:33,191 --> 28:08:38,479
different logged out states logged out
32839
28:08:35,512 --> 28:08:40,551
with exception null is loading false
32840
28:08:38,479 --> 28:08:42,479
logged out with exceptional is loading
32841
28:08:40,551 --> 28:08:44,319
true and then logged out with an
32842
28:08:42,479 --> 28:08:45,679
exception and is loading false for
32843
28:08:45,679 --> 28:08:50,639
so you're producing three different
32844
28:08:47,512 --> 28:08:52,720
types of states all of the same class
32845
28:08:52,720 --> 28:08:57,911
how will uh your application understand
32846
28:08:55,440 --> 28:08:58,720
that these are actually different states
32847
28:08:58,720 --> 28:09:03,512
you kind of need to differentiate
32848
28:09:00,551 --> 28:09:05,191
between various states of your off state
32849
28:09:03,512 --> 28:09:06,872
logged out so you kind of need to tell
32850
28:09:06,872 --> 28:09:11,760
although the previous state was also off
32851
28:09:09,191 --> 28:09:13,360
state logged out and the correct like
32852
28:09:11,759 --> 28:09:16,231
the one that i'm producing right now is
32853
28:09:13,360 --> 28:09:18,232
also off state logged out but these two
32854
28:09:16,232 --> 28:09:20,720
states could actually be different from
32855
28:09:18,232 --> 28:09:22,232
each other and in what they contain so
32856
28:09:20,720 --> 28:09:23,680
you need to kind of create like an
32857
28:09:24,639 --> 28:09:28,720
logic into your states to tell the
32858
28:09:28,720 --> 28:09:33,680
although it's the same is like a new
32859
28:09:30,960 --> 28:09:35,912
instance of the same state class but
32860
28:09:33,679 --> 28:09:38,319
internally is not the same thing and for
32861
28:09:35,911 --> 28:09:39,831
that we have to implement equality all
32862
28:09:39,831 --> 28:09:43,439
now there is a good package that allows
32863
28:09:41,831 --> 28:09:45,831
you to do this in order to implement
32864
28:09:43,440 --> 28:09:47,512
equality in your applications and in
32865
28:09:45,831 --> 28:09:50,399
your dart code and it is called
32866
28:09:47,512 --> 28:09:52,551
equitable so let's go ahead and import
32867
28:09:50,399 --> 28:09:54,159
that and don't be intimidated by all
32868
28:09:52,551 --> 28:09:55,679
these logs in here it's just because we
32869
28:09:54,160 --> 28:09:58,872
have a lot of problems that we're fixing
32870
28:09:55,679 --> 28:10:01,119
at the moment so let's go ahead and um
32871
28:09:58,872 --> 28:10:02,551
i'm gonna change the screen layout a
32872
28:10:04,551 --> 28:10:10,551
and let's just go ahead and say flutter
32873
28:10:12,232 --> 28:10:15,600
stuff like that and you can read more
32874
28:10:14,000 --> 28:10:16,479
about that so i'm just going to bring up
32875
28:10:16,479 --> 28:10:21,191
safari in here and let's just say
32876
28:10:23,512 --> 28:10:28,400
and let's just say equatable
32877
28:10:28,399 --> 28:10:33,831
and you can see it is actually developed
32878
28:10:30,160 --> 28:10:35,832
by flutter community dev in here okay so
32879
28:10:33,831 --> 28:10:38,159
it's a verified developer in here and
32880
28:10:35,831 --> 28:10:39,831
you can also actually follow flutter
32881
28:10:38,160 --> 28:10:42,480
community dev on twitter as well to get
32882
28:10:39,831 --> 28:10:44,551
some updates about their packages okay
32883
28:10:42,479 --> 28:10:47,119
so we're now importing that into our
32884
28:10:44,551 --> 28:10:49,679
application and we should now be able to
32885
28:10:47,119 --> 28:10:51,119
use that so i'm going to get rid of this
32886
28:10:51,119 --> 28:10:56,639
and change the screen layout again
32887
28:10:56,639 --> 28:11:03,039
okay so in here now let's go and import
32888
28:10:59,911 --> 28:11:04,479
equitable so i'm gonna just import that
32889
28:11:03,039 --> 28:11:05,831
i've already imported that in my notes
32890
28:11:04,479 --> 28:11:07,279
so i'm just gonna paste that in here you
32891
28:11:05,831 --> 28:11:10,959
import equitable like this package
32892
28:11:07,279 --> 28:11:13,911
equitable slash equitable dart okay
32893
28:11:10,960 --> 28:11:16,080
so what we need here is we're already
32894
28:11:13,911 --> 28:11:18,959
extending an existing class so what you
32895
28:11:16,080 --> 28:11:21,119
can do is you can bring in equality in
32896
28:11:18,960 --> 28:11:24,400
your classes using a mix and so we're
32897
28:11:21,119 --> 28:11:26,831
going to say mixing e quotable
32898
28:11:30,232 --> 28:11:34,232
so now that we're doing with that mixing
32899
28:11:32,800 --> 28:11:35,512
now we have to implement a few
32900
28:11:34,232 --> 28:11:36,872
functionalities in here as you can see
32901
28:11:35,512 --> 28:11:40,160
visual studio code helps me it says
32902
28:11:36,872 --> 28:11:43,440
create one missing override okay
32903
28:11:40,160 --> 28:11:46,080
so i do that override in here
32904
28:11:43,440 --> 28:11:48,320
and it says okay now we have to override
32905
28:11:46,080 --> 28:11:50,479
this property and you can see in here
32906
28:11:48,320 --> 28:11:52,232
what you need to return is a list of
32907
28:11:50,479 --> 28:11:55,360
properties that have to be taken into
32908
28:11:52,232 --> 28:11:57,040
account when the equitable package can
32909
28:11:57,039 --> 28:12:00,719
equality in your class and in here what
32910
28:11:59,191 --> 28:12:02,959
we're going to say is that we have two
32911
28:12:00,720 --> 28:12:05,119
properties in here called exception
32912
28:12:02,960 --> 28:12:08,000
and we also have is loading so take
32913
28:12:05,119 --> 28:12:10,720
these two properties into account when
32914
28:12:08,000 --> 28:12:13,911
computing equality in the instances of
32915
28:12:16,399 --> 28:12:21,119
very well done so that's that's what
32916
28:12:18,872 --> 28:12:23,760
we've done in here so we've made our off
32917
28:12:21,119 --> 28:12:25,831
state logged out class equitable and the
32918
28:12:23,759 --> 28:12:28,159
reason again for that is that we need to
32919
28:12:28,160 --> 28:12:33,120
various um mutations of this off state
32920
28:12:35,512 --> 28:12:40,000
mutations with various exceptions and is
32921
28:12:38,080 --> 28:12:41,600
loading need to be distinguishable from
32922
28:12:40,000 --> 28:12:45,191
each other okay and that's why we're
32923
28:12:41,600 --> 28:12:45,192
using the equitable package in here
32924
28:12:47,279 --> 28:12:50,872
this thing we've already talked about
32925
28:12:48,960 --> 28:12:53,912
and we don't need the off state logout
32926
28:12:50,872 --> 28:12:55,600
failure so we we've removed that already
32927
28:12:53,911 --> 28:12:57,440
as part of the cleanup that we were
32928
28:12:55,600 --> 28:12:58,872
doing earlier but if you forgot to do
32929
28:12:57,440 --> 28:13:00,160
that please just look at the caption at
32930
28:12:58,872 --> 28:13:01,551
the bottom of the screen just to make
32931
28:13:00,160 --> 28:13:04,639
and just make sure go you go to
32932
28:13:01,551 --> 28:13:06,231
offstate.file and remove your off state
32933
28:13:04,639 --> 28:13:07,600
logout failure and the reason behind
32934
28:13:06,232 --> 28:13:09,760
that since i explained before is that
32935
28:13:07,600 --> 28:13:12,160
now logout failure is actually built in
32936
28:13:09,759 --> 28:13:16,319
and baked into off state logged out
32937
28:13:12,160 --> 28:13:16,320
class inside an exception all right
32938
28:13:18,960 --> 28:13:23,280
all right let's go to the next section
32939
28:13:24,551 --> 28:13:29,599
you see at the moment we have no loading
32940
28:13:26,872 --> 28:13:31,911
screens in our application so
32941
28:13:29,600 --> 28:13:34,800
when something happens when we're doing
32942
28:13:31,911 --> 28:13:37,039
an api call for instance or we're um
32943
28:13:34,800 --> 28:13:39,360
going to our off provider and say login
32944
28:13:37,039 --> 28:13:42,231
or send an email verification we have no
32945
28:13:39,360 --> 28:13:44,080
loading screen inside the application
32946
28:13:42,232 --> 28:13:45,512
so there is nothing that indicates to
32947
28:13:44,080 --> 28:13:47,759
the user that something is actually
32948
28:13:45,512 --> 28:13:49,512
happening and we're gonna go fix that up
32949
28:13:47,759 --> 28:13:51,679
soon so as you'll see we're going to
32950
28:13:49,512 --> 28:13:54,320
create a new dialog which does some
32951
28:13:51,679 --> 28:13:55,831
loading for the user and then using that
32952
28:13:54,320 --> 28:13:57,192
dialog users going to understand that
32953
28:13:55,831 --> 28:13:58,959
okay something is happening i just have
32954
28:13:58,960 --> 28:14:03,040
but the user experience that we have
32955
28:14:00,479 --> 28:14:04,551
right now is kind of sub-optimal in that
32956
28:14:03,039 --> 28:14:06,079
the user presses the login screen and
32957
28:14:06,080 --> 28:14:09,279
sorry the user presses the login button
32958
28:14:07,831 --> 28:14:11,039
and depending on their internet
32959
28:14:09,279 --> 28:14:13,039
connectivity and the speed of their
32960
28:14:11,039 --> 28:14:14,871
internet internet connection that
32961
28:14:14,872 --> 28:14:18,800
anywhere between a few milliseconds to a
32962
28:14:18,800 --> 28:14:22,232
if you're making a user wait a few
32963
28:14:20,800 --> 28:14:24,160
seconds based on their internet
32964
28:14:22,232 --> 28:14:25,832
connection speed then you have to kind
32965
28:14:24,160 --> 28:14:26,800
of display to them that you're doing
32966
28:14:26,800 --> 28:14:31,760
well the the usual i mean way that you
32967
28:14:29,759 --> 28:14:33,599
could do that is to display some sort of
32968
28:14:31,759 --> 28:14:34,959
a small loading indicator for instance
32969
28:14:34,960 --> 28:14:40,480
natively you have a little loading
32970
28:14:37,911 --> 28:14:43,039
indicator that sits on on the status bar
32971
28:14:40,479 --> 28:14:45,119
that just moves a little bit and it's
32972
28:14:43,039 --> 28:14:46,319
very tiny i would dare to say it's less
32973
28:14:46,320 --> 28:14:51,192
20 pixels wide and 20 pixels in height
32974
28:14:48,800 --> 28:14:53,440
kind of it could even be like 17 pixels
32975
28:14:51,191 --> 28:14:55,191
width on height it's very little so it's
32976
28:14:53,440 --> 28:14:56,551
a subtle indication that something is
32977
28:14:56,551 --> 28:15:00,639
but that's usually i mean i find that
32978
28:14:58,639 --> 28:15:02,639
quite annoying because when something is
32979
28:15:02,639 --> 28:15:07,512
block the user from trying to press the
32980
28:15:04,720 --> 28:15:08,960
same button thousands of times so
32981
28:15:07,512 --> 28:15:11,191
if you display that little loading
32982
28:15:08,960 --> 28:15:12,320
indicator on the top on the status bar
32983
28:15:11,191 --> 28:15:14,080
then what you also have to do you have
32984
28:15:12,320 --> 28:15:16,400
to add some extra logic to your
32985
28:15:14,080 --> 28:15:18,800
application to block for instance the
32986
28:15:16,399 --> 28:15:20,639
current register button or the loading
32987
28:15:18,800 --> 28:15:22,872
button and you usually don't want to do
32988
28:15:20,639 --> 28:15:24,872
that but because that's just extra logic
32989
28:15:22,872 --> 28:15:26,400
what would make more sense is upon a
32990
28:15:24,872 --> 28:15:27,832
user pressing the login button or the
32991
28:15:26,399 --> 28:15:29,759
register button you want to display like
32992
28:15:29,759 --> 28:15:34,000
that tells them that hey i'm doing
32993
28:15:31,600 --> 28:15:37,192
something okay so don't do anything else
32994
28:15:34,000 --> 28:15:39,512
while this screen is is visible on your
32995
28:15:37,191 --> 28:15:41,831
mobile display so let's go ahead and do
32996
28:15:41,911 --> 28:15:45,360
so we're going to code a loading screen
32997
28:15:43,759 --> 28:15:47,039
as you can see in the caption says we're
32998
28:15:45,360 --> 28:15:49,279
going to do it in lib utilities
32999
28:15:47,039 --> 28:15:50,799
dialogues loading dialog so let's go
33000
28:15:50,800 --> 28:15:54,832
and bring up my notes as well
33001
28:15:55,360 --> 28:15:59,039
i'm going to close all these files just
33002
28:15:57,279 --> 28:16:01,039
to make sure we've also saved them
33003
28:15:59,039 --> 28:16:02,719
because if you close a file in visual
33004
28:16:01,039 --> 28:16:04,159
studio code at least which we haven't
33005
28:16:02,720 --> 28:16:05,512
saved before visual studio is going to
33006
28:16:04,160 --> 28:16:06,872
display your dialogue saying are you
33007
28:16:05,512 --> 28:16:08,960
sure you want to close this file without
33008
28:16:06,872 --> 28:16:11,440
saving it so it's usually good practice
33009
28:16:08,960 --> 28:16:13,680
to close your existing files before you
33010
28:16:11,440 --> 28:16:15,119
move into doing something new
33011
28:16:13,679 --> 28:16:18,159
so that you at least are sure that
33012
28:16:15,119 --> 28:16:20,799
you've saved those changes okay
33013
28:16:18,160 --> 28:16:22,872
um now let's i mean we have some errors
33014
28:16:22,872 --> 28:16:25,911
you should now be comfortable with
33015
28:16:24,320 --> 28:16:27,120
having errors in your application
33016
28:16:25,911 --> 28:16:28,551
because you know at the end of every
33017
28:16:27,119 --> 28:16:31,191
chapter we're going to tighten things up
33018
28:16:28,551 --> 28:16:33,911
and fix things okay so let's go to lib
33019
28:16:35,911 --> 28:16:38,551
dialogues and we're going to create a
33020
28:16:37,191 --> 28:16:42,000
new file in here as the caption
33021
28:16:38,551 --> 28:16:44,319
indicates called loading dialog dart
33022
28:16:42,000 --> 28:16:46,399
and you see this loading dialog what we
33023
28:16:44,320 --> 28:16:47,192
also have to have in this loading dialog
33024
28:16:48,720 --> 28:16:53,360
to allow the caller to display this
33025
28:16:50,872 --> 28:16:55,120
dialog but also to allow the caller to
33026
28:16:53,360 --> 28:16:57,191
dismiss this dialog so it's very
33027
28:16:55,119 --> 28:16:58,959
important to be able to dismiss a
33028
28:16:57,191 --> 28:17:01,759
dialogue when the application actually
33029
28:16:58,960 --> 28:17:04,160
needs for that dialog to disappear so
33030
28:17:01,759 --> 28:17:06,799
what we're going to do first is to bring
33031
28:17:04,160 --> 28:17:08,872
a create a type f in here and we're
33032
28:17:06,800 --> 28:17:11,600
gonna call it closed dialog let me just
33033
28:17:08,872 --> 28:17:13,040
increase the size of that font as well
33034
28:17:11,600 --> 28:17:16,480
and we're gonna make sure that it's
33035
28:17:13,039 --> 28:17:19,039
equal to a void function in here okay so
33036
28:17:16,479 --> 28:17:20,720
what we're to do in here we have we're
33037
28:17:19,039 --> 28:17:23,279
going to create a function that displays
33038
28:17:20,720 --> 28:17:26,720
a loading dialog but it also returns
33039
28:17:23,279 --> 28:17:28,872
back a function that the caller can call
33040
28:17:26,720 --> 28:17:31,512
to dismiss it so it may be a little bit
33041
28:17:28,872 --> 28:17:33,192
of a shift in how you think about
33042
28:17:31,512 --> 28:17:34,960
programming if it's the first time
33043
28:17:33,191 --> 28:17:36,799
you're doing something like this but i
33044
28:17:34,960 --> 28:17:39,120
promise you it will make a lot more
33045
28:17:36,800 --> 28:17:41,600
sense as we develop it so let's say that
33046
28:17:39,119 --> 28:17:44,159
we have a function that returns a close
33047
28:17:41,600 --> 28:17:46,232
dialogue um and we call it show loading
33048
28:17:47,831 --> 28:17:51,831
required parameters so let's put curly
33049
28:17:51,831 --> 28:17:57,511
and then let's just say we have
33050
28:17:57,512 --> 28:18:03,440
and we call it build context
33051
28:18:01,440 --> 28:18:05,911
or let's just call it context and then
33052
28:18:03,440 --> 28:18:07,680
we have a text to display so required
33053
28:18:11,119 --> 28:18:14,639
so and now you can see you get this
33054
28:18:14,639 --> 28:18:17,279
try changing its name and i'm going to
33055
28:18:15,831 --> 28:18:19,599
get help from facial studio code to
33056
28:18:21,911 --> 28:18:25,440
now we have just one error saying that
33057
28:18:23,279 --> 28:18:26,800
you're not returning anything in here
33058
28:18:25,440 --> 28:18:28,232
so the first thing we're going to do is
33059
28:18:26,800 --> 28:18:30,232
we're actually going to define our
33060
28:18:28,232 --> 28:18:32,000
dialog how is this loading dialog going
33061
28:18:30,232 --> 28:18:33,911
to look like so it's the only thing it's
33062
28:18:32,000 --> 28:18:36,872
going to do is just to have a little
33063
28:18:33,911 --> 28:18:39,191
loading indicator a bit of spacing and
33064
28:18:39,191 --> 28:18:43,191
using the text widget to render this
33065
28:18:41,360 --> 28:18:44,639
string so let's first define our
33066
28:18:43,191 --> 28:18:46,871
dialogue so i'm just going to say final
33067
28:18:44,639 --> 28:18:48,960
dialog is equal to alert dialogue
33068
28:18:50,160 --> 28:18:54,480
let's just go to the next line semicolon
33069
28:18:54,479 --> 28:18:57,440
and then we have to define the content
33070
28:18:55,911 --> 28:18:59,279
for it as you can see content should be
33071
28:18:57,440 --> 28:19:00,800
a widget so the widget we're developing
33072
28:18:59,279 --> 28:19:02,872
is a column because we want like a
33073
28:19:00,800 --> 28:19:04,800
vertical list of widgets the loading
33074
28:19:02,872 --> 28:19:06,720
screen a little bit of a size box
33075
28:19:04,800 --> 28:19:09,279
spacing and a text widget so you can
33076
28:19:06,720 --> 28:19:11,512
render that with column easily
33077
28:19:09,279 --> 28:19:13,679
and remember column what what column
33078
28:19:11,512 --> 28:19:16,400
wants to usually do is to grab as much
33079
28:19:13,679 --> 28:19:18,319
space as it needs so it could be like
33080
28:19:16,399 --> 28:19:20,479
the entire screen long we don't want
33081
28:19:18,320 --> 28:19:23,280
that what we want for the column to take
33082
28:19:20,479 --> 28:19:24,872
as little space as it needs to render
33083
28:19:23,279 --> 28:19:27,831
its content correctly so we're going to
33084
28:19:27,831 --> 28:19:31,360
exercise it should be of type main
33085
28:19:29,679 --> 28:19:35,279
access size and we're going to say main
33086
28:19:31,360 --> 28:19:35,279
exercise of minimum all right
33087
28:19:36,960 --> 28:19:42,872
are going to be an array of two constant
33088
28:19:42,872 --> 28:19:46,320
of a circular progress indicator like
33089
28:19:46,320 --> 28:19:50,232
and then we're going to say a constant
33090
28:19:50,232 --> 28:19:56,160
size box we haven't used size boxes
33091
28:19:52,720 --> 28:19:59,680
before but size box is really good for
33092
28:19:59,679 --> 28:20:03,911
as you can see in here it's just an
33093
28:20:00,960 --> 28:20:05,280
empty space with a height of 10.
33094
28:20:03,911 --> 28:20:07,191
and then what we're going to do in here
33095
28:20:05,279 --> 28:20:08,551
we're just going to say display also a
33096
28:20:08,551 --> 28:20:14,319
renders this particular text parameter
33097
28:20:14,960 --> 28:20:19,280
now we're we have a little problem here
33098
28:20:17,119 --> 28:20:20,871
with how this thing is rendered and you
33099
28:20:19,279 --> 28:20:23,360
can see they're in the same line and
33100
28:20:20,872 --> 28:20:25,832
that's why it kind of looks strange
33101
28:20:23,360 --> 28:20:27,831
let's put a comma in here and then save
33102
28:20:27,831 --> 28:20:31,679
formatting correct and let's put a comma
33103
28:20:32,800 --> 28:20:38,872
okay so now it's working as it should or
33104
28:20:35,360 --> 28:20:40,399
at least it's formatting as it should so
33105
28:20:38,872 --> 28:20:42,160
then what we're going to do in here
33106
28:20:42,160 --> 28:20:44,872
we want to display that dialogue so
33107
28:20:50,639 --> 28:20:54,960
and let's go in here and the context of
33108
28:20:53,191 --> 28:20:56,871
this dialog and i'm going to bring it
33109
28:20:54,960 --> 28:20:59,120
here so you see it the context is the
33110
28:20:56,872 --> 28:21:00,551
context that we are providing to this
33111
28:21:00,551 --> 28:21:04,399
and a barrier or dismissable and i'm
33112
28:21:03,119 --> 28:21:06,399
going to show you the documentation for
33113
28:21:04,399 --> 28:21:08,551
very dismissible and let's see if we can
33114
28:21:09,440 --> 28:21:12,400
it's not helping me with that but that's
33115
28:21:12,399 --> 28:21:17,191
what barrier dismissable allows you to
33116
28:21:14,639 --> 28:21:20,080
do is to say that if the user taps
33117
28:21:17,191 --> 28:21:22,080
outside this dialogue either allow the
33118
28:21:20,080 --> 28:21:24,400
dismissal of this dialogue or don't and
33119
28:21:22,080 --> 28:21:27,040
we don't want the user to be able to tap
33120
28:21:24,399 --> 28:21:28,231
outside this dialog in order to dismiss
33121
28:21:27,039 --> 28:21:29,511
it because a loading screen should be
33122
28:21:28,232 --> 28:21:31,040
dismissed when we want it to be
33123
28:21:29,512 --> 28:21:33,191
dismissed not when the user wants it to
33124
28:21:33,191 --> 28:21:36,720
for those who are ux designers who are
33125
28:21:35,119 --> 28:21:39,279
watching this course he may be actually
33126
28:21:36,720 --> 28:21:42,232
tempted also to for instance
33127
28:21:39,279 --> 28:21:44,399
um provide a cancel i actually think
33128
28:21:42,232 --> 28:21:46,232
having a cancel button in most loading
33129
28:21:48,160 --> 28:21:51,360
for whatever reason an application may
33130
28:21:50,080 --> 28:21:52,800
not be able to handle for instance
33131
28:21:51,360 --> 28:21:55,440
different errors and exceptions that
33132
28:21:52,800 --> 28:21:57,120
could occur while making an api call and
33133
28:21:55,440 --> 28:21:59,191
i personally have been in this situation
33134
28:21:57,119 --> 28:22:00,959
where a dialogue was displayed to the
33135
28:21:59,191 --> 28:22:02,479
user and it was just never dismissed
33136
28:22:00,960 --> 28:22:04,232
because something went wrong the
33137
28:22:02,479 --> 28:22:05,911
application wasn't able to handle it so
33138
28:22:04,232 --> 28:22:07,832
i personally as a user had to go and
33139
28:22:05,911 --> 28:22:09,279
force kill the application and restart
33140
28:22:07,831 --> 28:22:11,759
the entire process in order to get
33141
28:22:09,279 --> 28:22:13,831
things working so if you want to have a
33142
28:22:11,759 --> 28:22:15,279
cancel button in here it's fine but um
33143
28:22:13,831 --> 28:22:16,639
i'm not doing that right now it's just
33144
28:22:15,279 --> 28:22:19,440
for the sake of simplicity so that we
33145
28:22:16,639 --> 28:22:21,512
can move on with this code as um as fast
33146
28:22:19,440 --> 28:22:22,720
as accuracy as fast and accurate as
33147
28:22:22,720 --> 28:22:25,680
so now you know what barrier dismissible
33148
28:22:25,679 --> 28:22:30,000
and for the builder function that's what
33149
28:22:27,279 --> 28:22:32,319
this um error is here we have to just
33150
28:22:32,320 --> 28:22:38,552
and but in here what we do is just do we
33151
28:22:36,232 --> 28:22:40,232
remove we we return the dialogue in here
33152
28:22:38,551 --> 28:22:41,599
okay so now we're saying show this
33153
28:22:41,600 --> 28:22:46,872
and and then we're just going to say
33154
28:22:45,119 --> 28:22:48,159
the return value see we still have this
33155
28:22:46,872 --> 28:22:49,760
problem with the return value that we're
33156
28:22:48,160 --> 28:22:51,279
not returning a closed dialogue and what
33157
28:22:49,759 --> 28:22:53,511
this close dialogue is just going to be
33158
28:22:51,279 --> 28:22:55,600
is we are going to return a function
33159
28:22:53,512 --> 28:22:57,600
from our function so when the user then
33160
28:22:55,600 --> 28:23:01,040
calls that function we're going to pop
33161
28:22:57,600 --> 28:23:02,800
this dialog it's it's beautiful
33162
28:23:01,039 --> 28:23:04,231
so let's just say we return a function
33163
28:23:04,232 --> 28:23:09,832
upon calling which we are going to say
33164
28:23:06,872 --> 28:23:12,639
navigator of this context and we're just
33165
28:23:09,831 --> 28:23:15,279
going to say pop okay so that's how you
33166
28:23:12,639 --> 28:23:18,319
return a function that can be acted upon
33167
28:23:18,320 --> 28:23:23,120
so now we save this and you can see we
33168
28:23:19,831 --> 28:23:23,119
don't have any errors i'm going to just
33169
28:23:23,360 --> 28:23:27,680
resize this a little bit make the font a
33170
28:23:25,600 --> 28:23:30,720
little bit smaller so you see the code
33171
28:23:33,279 --> 28:23:36,872
now let's talk about loading and
33172
28:23:35,119 --> 28:23:38,551
exception handling during the login
33173
28:23:38,551 --> 28:23:44,159
let's go to our login view
33174
28:23:41,279 --> 28:23:46,000
and you see here we have already some
33175
28:23:44,160 --> 28:23:47,832
exception handling and we also have this
33176
28:23:46,000 --> 28:23:49,831
off block but we also have this text
33177
28:23:47,831 --> 28:23:52,399
button that is doing like manual
33178
28:23:49,831 --> 28:23:55,679
navigation it says push name and remove
33179
28:23:52,399 --> 28:23:58,319
until and we need to clean these things
33180
28:24:04,399 --> 28:24:07,911
i'm going to also do it in my notes
33181
28:24:09,512 --> 28:24:12,800
let's have a look at how we've done
33182
28:24:11,119 --> 28:24:14,639
things you can see in here we have a
33183
28:24:12,800 --> 28:24:16,320
block listener at the moment that is
33184
28:24:16,320 --> 28:24:20,552
itself around this text button so we're
33185
28:24:19,119 --> 28:24:23,360
not gonna do that we're gonna have the
33186
28:24:20,551 --> 28:24:24,720
text button exactly the way it is and so
33187
28:24:23,360 --> 28:24:26,872
meaning that we're gonna remove this
33188
28:24:24,720 --> 28:24:29,680
block listener from here okay
33189
28:24:26,872 --> 28:24:31,360
so what we could do is as the caption
33190
28:24:29,679 --> 28:24:33,191
indicates we're just gonna go here to
33191
28:24:31,360 --> 28:24:36,000
the scaffold and just say okay we have a
33192
28:24:33,191 --> 28:24:38,080
new block listener and remember this
33193
28:24:36,000 --> 28:24:40,399
should be the off block itself so i'm
33194
28:24:38,080 --> 28:24:43,512
gonna say off block and this should be
33195
28:24:40,399 --> 28:24:45,911
the off state like this so then inside
33196
28:24:43,512 --> 28:24:46,800
the listener what we need to do is to
33197
28:24:54,399 --> 28:24:58,159
text button in here so we have the
33198
28:24:58,160 --> 28:25:02,320
excuse me so as the caption indicates
33199
28:25:01,191 --> 28:25:04,551
we're going to do this exception
33200
28:25:02,320 --> 28:25:06,872
handling now inside our new block
33201
28:25:04,551 --> 28:25:08,872
listener on top so remove all the code
33202
28:25:06,872 --> 28:25:10,960
from your block listener for your text
33203
28:25:08,872 --> 28:25:12,000
button all the exception handling just
33204
28:25:12,000 --> 28:25:16,800
and bring it please up into this block
33205
28:25:14,800 --> 28:25:19,680
listener which is at the top level all
33206
28:25:16,800 --> 28:25:21,279
right and make this an async listener so
33207
28:25:19,679 --> 28:25:23,511
that you can await on your show or
33208
28:25:21,279 --> 28:25:25,440
dialogue okay so that's the first step
33209
28:25:23,512 --> 28:25:27,680
however we still have this empty block
33210
28:25:25,440 --> 28:25:30,232
listener in here so i'm gonna remove
33211
28:25:27,679 --> 28:25:33,359
that now so all of a sudden you see now
33212
28:25:30,232 --> 28:25:36,080
we have the text button in here
33213
28:25:33,360 --> 28:25:39,512
all right that was fantastic
33214
28:25:36,080 --> 28:25:41,759
so then what we need to do is to
33215
28:25:43,600 --> 28:25:48,552
screen basically so that is going to be
33216
28:25:46,232 --> 28:25:52,080
a bit of code so but don't be scared of
33217
28:25:48,551 --> 28:25:54,479
that we're going to handle that soon
33218
28:25:54,479 --> 28:25:59,911
display our loading screen we also have
33219
28:25:57,039 --> 28:26:01,279
to kind of like keep hold off this
33220
28:26:01,279 --> 28:26:06,319
close handle what do i mean by that
33221
28:26:03,600 --> 28:26:08,232
let's go back to our loading dialog you
33222
28:26:06,320 --> 28:26:09,832
see every time we call this function
33223
28:26:08,232 --> 28:26:12,000
this is going to give us a function back
33224
28:26:12,000 --> 28:26:16,639
the dialog we have to keep hold of this
33225
28:26:14,232 --> 28:26:18,552
so that when the states change inside
33226
28:26:16,639 --> 28:26:20,720
our login view we're going to look at
33227
28:26:18,551 --> 28:26:22,399
that previous handle and be like oh we
33228
28:26:22,399 --> 28:26:27,191
displayed to the user we have to first
33229
28:26:23,911 --> 28:26:29,360
dismiss it okay so let's go where we're
33230
28:26:27,191 --> 28:26:31,831
keeping hold of our email and password
33231
28:26:31,831 --> 28:26:36,871
close dialogue and it's going to auto
33232
28:26:34,320 --> 28:26:39,680
import that you see so if you don't have
33233
28:26:36,872 --> 28:26:41,832
auto import you may have to import this
33234
28:26:41,831 --> 28:26:44,720
so let's say it's an optional and we
33235
28:26:47,679 --> 28:26:51,119
so we keep hold of that we haven't
33236
28:26:49,600 --> 28:26:53,600
assigned to it yet but we're gonna do
33237
28:26:54,080 --> 28:26:59,911
so let's stand in here in the state of
33238
28:26:57,119 --> 28:27:01,039
logged out and right here just add some
33239
28:27:01,039 --> 28:27:05,911
and what we're gonna do we're gonna say
33240
28:27:03,039 --> 28:27:07,831
um do we already have a closed dialog
33241
28:27:13,512 --> 28:27:17,360
and what we're going to do now is we're
33242
28:27:15,360 --> 28:27:20,232
going to have a look at our states and
33243
28:27:17,360 --> 28:27:22,872
also if we have a closed dialog handle
33244
28:27:20,232 --> 28:27:25,040
and we're going to display correct
33245
28:27:25,039 --> 28:27:28,231
so what we're going to do is we're going
33246
28:27:28,232 --> 28:27:33,832
state is loading if we're not loading at
33247
28:27:31,600 --> 28:27:35,440
the moment meaning that maybe we were
33248
28:27:35,440 --> 28:27:40,080
then our goal in here is that saying
33249
28:27:37,191 --> 28:27:43,440
that if we are not loading and
33250
28:27:40,080 --> 28:27:45,191
excuse me close dialogue is not null
33251
28:27:47,759 --> 28:27:51,911
in this case what this conveys to us
33252
28:27:49,759 --> 28:27:54,551
saying it says that we're not loading
33253
28:27:51,911 --> 28:27:56,720
now but we were loading before
33254
28:27:54,551 --> 28:27:58,872
and that the bot part is coming from
33255
28:27:56,720 --> 28:28:00,872
here what we need to do in here then is
33256
28:27:58,872 --> 28:28:03,512
just to close that dialog so let's just
33257
28:28:00,872 --> 28:28:05,760
say close dialog we call that function
33258
28:28:09,831 --> 28:28:15,759
so we're just cleaning that up now okay
33259
28:28:16,551 --> 28:28:19,360
what we have to have so what we've
33260
28:28:17,679 --> 28:28:20,719
handled right now is closing the dial up
33261
28:28:19,360 --> 28:28:22,160
but we also have the hell of showing it
33262
28:28:20,720 --> 28:28:24,080
all so we're now going to say if the
33263
28:28:24,080 --> 28:28:29,440
and we don't have a closed dial sorry we
33264
28:28:27,360 --> 28:28:32,080
don't have a loading dialog yet on the
33265
28:28:29,440 --> 28:28:34,080
screen then we have to show it so
33266
28:28:32,080 --> 28:28:35,040
excuse me so let's say if state is
33267
28:28:40,160 --> 28:28:44,872
then we have to show the dialogue so
33268
28:28:42,232 --> 28:28:48,080
let's just say close dialog handle is
33269
28:28:44,872 --> 28:28:49,360
equal to show loading dialog we pass the
33270
28:28:49,360 --> 28:28:53,039
let's do some formatting in here and
33271
28:28:55,831 --> 28:29:01,679
and we leave the rest of this stuff in
33272
28:29:02,080 --> 28:29:04,872
the next thing that we need to do now is
33273
28:29:04,872 --> 28:29:08,479
as you can see in the caption on the
33274
28:29:07,039 --> 28:29:10,000
screen we have to hook the register
33275
28:29:08,479 --> 28:29:12,800
button to our auth block when register
33276
28:29:10,000 --> 28:29:16,639
button is tap send the auth event should
33277
28:29:16,639 --> 28:29:20,479
and what we're going to do then is go to
33278
28:29:18,639 --> 28:29:22,960
and find this button in here at the
33279
28:29:20,479 --> 28:29:24,551
bottom of the loading via sorry login
33280
28:29:24,551 --> 28:29:28,551
and upon pressing it let's just make
33281
28:29:28,551 --> 28:29:32,159
yeah i don't think it really has to be
33282
28:29:30,232 --> 28:29:35,360
any asynchronous code at all so let's
33283
28:29:32,160 --> 28:29:39,279
just in here let's say that we
33284
28:29:35,360 --> 28:29:40,399
grab our off block so let's say context
33285
28:29:40,399 --> 28:29:44,399
and we are looking for off blog in our
33286
28:29:42,639 --> 28:29:45,279
context and then we're gonna send it an
33287
28:29:45,279 --> 28:29:49,759
and we're gonna send const auth event
33288
28:29:49,759 --> 28:29:56,231
should register just like that okay
33289
28:29:52,960 --> 28:29:57,912
so and i believe add event is not async
33290
28:29:56,232 --> 28:29:59,680
or anything it's just a void so this
33291
28:29:57,911 --> 28:30:01,759
function doesn't have to be async so if
33292
28:29:59,679 --> 28:30:03,831
you had it as async you can just safely
33293
28:30:03,831 --> 28:30:07,191
i'm just gonna save this file as well
33294
28:30:07,600 --> 28:30:11,760
all right a lot of work we've we're kind
33295
28:30:11,759 --> 28:30:17,279
almost done with uh our login view
33296
28:30:15,360 --> 28:30:18,872
so what i'm gonna do is i'm gonna close
33297
28:30:17,279 --> 28:30:21,039
all these files that are on the screen
33298
28:30:18,872 --> 28:30:22,479
right now and we're gonna start moving
33299
28:30:22,479 --> 28:30:28,479
also blockifying our register view so
33300
28:30:26,399 --> 28:30:31,191
let's go as the caption says let's go to
33301
28:30:36,479 --> 28:30:39,679
and i can see in here in the previous
33302
28:30:38,479 --> 28:30:41,360
chapters we've been working with
33303
28:30:39,679 --> 28:30:43,439
cleaning up the login view so
33304
28:30:41,360 --> 28:30:44,639
blockifying the login but we didn't do
33305
28:30:43,440 --> 28:30:45,832
the same thing in register view and
33306
28:30:44,639 --> 28:30:48,639
that's fine we're going to take care of
33307
28:30:45,831 --> 28:30:50,799
that and i can see that by just looking
33308
28:30:48,639 --> 28:30:52,800
at our try and catch statements in here
33309
28:30:50,800 --> 28:30:54,639
you see these things shouldn't be
33310
28:30:54,639 --> 28:30:58,160
as like but one thing at a time as the
33311
28:30:56,479 --> 28:30:59,512
caption of the yeah as i capture the
33312
28:30:58,160 --> 28:31:01,680
bottom screen indicates we're going to
33313
28:30:59,512 --> 28:31:03,512
wrap the scaffold inside a block
33314
28:31:01,679 --> 28:31:06,719
listener so it's going to be very
33315
28:31:03,512 --> 28:31:08,232
similar to how we did it for our
33316
28:31:10,160 --> 28:31:14,800
a wrap with block listener here and i'm
33317
28:31:16,831 --> 28:31:20,479
block and it's going to auto import it
33318
28:31:19,039 --> 28:31:22,000
for me so very important if you're
33319
28:31:20,479 --> 28:31:23,512
getting errors for the auth block not
33320
28:31:22,000 --> 28:31:25,600
being found in this context it's
33321
28:31:23,512 --> 28:31:27,119
probably because you haven't imported
33322
28:31:25,600 --> 28:31:28,872
off block so and in here we're going to
33323
28:31:28,872 --> 28:31:32,639
and that's going to also import it as
33324
28:31:30,551 --> 28:31:34,080
well and block listener is not available
33325
28:31:32,639 --> 28:31:36,479
in this context either because we don't
33326
28:31:34,080 --> 28:31:37,911
have a flutter block so that's also
33327
28:31:36,479 --> 28:31:39,512
going to be all too important so that's
33328
28:31:39,512 --> 28:31:45,600
so that's the three um auto imports and
33329
28:31:42,479 --> 28:31:46,720
they're all available i believe so
33330
28:31:51,759 --> 28:31:55,360
you could actually bring it next to each
33331
28:31:53,360 --> 28:31:59,119
other if you want to so you know which
33332
28:31:55,360 --> 28:31:59,119
ones to import it's these three
33333
28:31:59,679 --> 28:32:04,479
wow okay um so what we need to do that
33334
28:32:02,872 --> 28:32:06,720
that was the first thing that we had to
33335
28:32:07,600 --> 28:32:11,120
we also as i said now we have to go and
33336
28:32:12,872 --> 28:32:17,512
this is very similar to how we did and
33337
28:32:15,279 --> 28:32:19,911
did it in the login views so we kind of
33338
28:32:19,911 --> 28:32:24,000
so now what we need to do inside this
33339
28:32:22,000 --> 28:32:26,232
listener of our block listener we have
33340
28:32:24,000 --> 28:32:28,232
to handle the exceptions that we are at
33341
28:32:26,232 --> 28:32:30,160
the moment handling here at the bottom
33342
28:32:28,232 --> 28:32:32,080
so this should be very similar process
33343
28:32:30,160 --> 28:32:34,639
to how we were doing things in the login
33344
28:32:32,080 --> 28:32:36,639
view from if you remember so if we oops
33345
28:32:34,639 --> 28:32:38,399
if i go to our login view you can see we
33346
28:32:38,399 --> 28:32:42,399
block listener and then we're doing this
33347
28:32:40,320 --> 28:32:43,912
kind of pattern in there so we're going
33348
28:32:42,399 --> 28:32:45,279
to do something very similar to that
33349
28:32:43,911 --> 28:32:46,720
except we're going to do it in register
33350
28:32:46,720 --> 28:32:51,440
inside register view the state is
33351
28:32:49,911 --> 28:32:53,279
i mean all the exceptions all the
33352
28:32:51,440 --> 28:32:57,360
problems that could arise are going to
33353
28:32:53,279 --> 28:32:58,872
be inside the um registering state so
33354
28:32:57,360 --> 28:33:01,440
we're just gonna first make sure that
33355
28:32:58,872 --> 28:33:02,639
we're in that state okay so let's say
33356
28:33:06,232 --> 28:33:12,480
and we're gonna say if state exception
33357
28:33:09,600 --> 28:33:13,279
is weak password auth exception
33358
28:33:13,279 --> 28:33:18,319
let's make this listener asynchronous so
33359
28:33:15,512 --> 28:33:20,639
we can do an await on our show dialog
33360
28:33:23,360 --> 28:33:27,600
and the text is just going to be weak
33361
28:33:27,600 --> 28:33:32,480
and then we're going to do another else
33362
28:33:30,160 --> 28:33:35,512
an else statement with another if and we
33363
28:33:35,512 --> 28:33:40,720
it's email already in use auth exception
33364
28:33:39,191 --> 28:33:42,319
and then here we're gonna display
33365
28:33:40,720 --> 28:33:46,551
another dialog then that says for
33366
28:33:42,320 --> 28:33:48,232
instance email is already in use okay
33367
28:33:48,232 --> 28:33:51,832
so let's then go to another else
33368
28:33:50,399 --> 28:33:54,079
statement so i'm going to just copy this
33369
28:33:51,831 --> 28:33:56,479
i'm a little bit lazy and i'm just going
33370
28:33:54,080 --> 28:33:58,160
to say generic auth exception and then
33371
28:33:58,160 --> 28:34:02,480
failed to register so these are the
33372
28:34:00,160 --> 28:34:07,192
various exceptions that can occur
33373
28:34:02,479 --> 28:34:10,080
while you're registering for a user okay
33374
28:34:07,191 --> 28:34:11,759
and you can see in here we have three
33375
28:34:10,080 --> 28:34:13,360
uh exceptions we're handling weak
33376
28:34:11,759 --> 28:34:15,679
password email already in use and then
33377
28:34:13,360 --> 28:34:17,600
we also have invalid email auth
33378
28:34:15,679 --> 28:34:19,119
exception so maybe we could actually
33379
28:34:17,600 --> 28:34:21,040
handle that as well so let's just go
33380
28:34:19,119 --> 28:34:23,039
ahead and add another else statement in
33381
28:34:23,039 --> 28:34:27,039
uh invalid email auth exception so we
33382
28:34:30,000 --> 28:34:35,320
so now we've handled those four
33383
28:34:37,512 --> 28:34:41,832
what we need now is to make sure as you
33384
28:34:40,399 --> 28:34:43,439
can see in the caption that in register
33385
28:34:41,831 --> 28:34:46,159
view the register button to send the
33386
28:34:43,440 --> 28:34:47,760
auth event called auth event register so
33387
28:34:46,160 --> 28:34:49,440
let's find that register button that
33388
28:34:49,440 --> 28:34:54,800
and that is this text button you can see
33389
28:34:54,872 --> 28:34:58,800
so what we need to do is perhaps to
33390
28:34:56,800 --> 28:35:01,120
clean this code up at the moment there's
33391
28:34:58,800 --> 28:35:03,192
just so much information in here that we
33392
28:35:01,119 --> 28:35:04,871
don't really have to do so go to your
33393
28:35:03,191 --> 28:35:07,191
register button please in the register
33394
28:35:04,872 --> 28:35:10,160
view and just pretty much just nuke this
33395
28:35:07,191 --> 28:35:12,159
entire try and all these cad statements
33396
28:35:12,160 --> 28:35:17,040
so now we have a clean slate so now we
33397
28:35:14,720 --> 28:35:19,360
have just email and password and let's
33398
28:35:17,039 --> 28:35:21,360
grab the auth block in here and ask the
33399
28:35:19,360 --> 28:35:24,872
auth block to do the registration okay
33400
28:35:21,360 --> 28:35:24,872
so i'm just going to say context
33401
28:35:25,360 --> 28:35:30,551
and let's just say we grab the
33402
28:35:36,960 --> 28:35:41,600
and then i'm just going to say add in
33403
28:35:46,160 --> 28:35:50,232
with email and password just like that
33404
28:35:50,232 --> 28:35:53,760
so your code should kind of look like
33405
28:35:51,911 --> 28:35:55,831
this and put a comma in here to make it
33406
28:35:53,759 --> 28:35:58,911
a little bit cleaner so just like that
33407
28:35:59,512 --> 28:36:05,119
okay that was for register
33408
28:36:05,119 --> 28:36:09,599
login button in here which right now
33409
28:36:07,360 --> 28:36:11,512
inside our register view do you remember
33410
28:36:09,600 --> 28:36:13,279
if you end up in the registry view and
33411
28:36:11,512 --> 28:36:14,479
incorrectly so you just tap on some
33412
28:36:13,279 --> 28:36:16,080
button and enter them in the registry
33413
28:36:14,479 --> 28:36:17,599
and be like oh i'm in the wrong place i
33414
28:36:16,080 --> 28:36:20,232
want to log in actually instance so we
33415
28:36:17,600 --> 28:36:22,000
have this already registered login here
33416
28:36:20,232 --> 28:36:24,232
button and at the moment that's doing
33417
28:36:22,000 --> 28:36:26,551
custom navigator or push name and remove
33418
28:36:24,232 --> 28:36:28,800
until and it shouldn't be doing that so
33419
28:36:26,551 --> 28:36:30,399
let's go ahead and fix that up so let's
33420
28:36:28,800 --> 28:36:33,832
go in here and remove that code and just
33421
28:36:33,831 --> 28:36:39,191
and we're going to basically add an
33422
28:36:35,191 --> 28:36:40,639
event in here of con of type const auth
33423
28:36:40,639 --> 28:36:46,639
log out just like that okay so that then
33424
28:36:44,232 --> 28:36:49,680
is going to send the user to the login
33425
28:36:50,960 --> 28:36:54,720
all right let's move now to the next
33426
28:36:53,512 --> 28:36:56,320
point as you can see it says send
33427
28:36:54,720 --> 28:36:57,680
verification button and verify email
33428
28:36:57,679 --> 28:37:01,599
it should send an auth event and when
33429
28:37:00,000 --> 28:37:04,479
you press it it should send the auth
33430
28:37:01,600 --> 28:37:06,872
event send the email verification to the
33431
28:37:04,479 --> 28:37:09,279
blog so i'm going to go into my notes as
33432
28:37:09,279 --> 28:37:14,000
and just find that button and now let's
33433
28:37:14,000 --> 28:37:18,551
let's go to verify email view
33434
28:37:16,479 --> 28:37:20,872
and have a look at that button that
33435
28:37:18,551 --> 28:37:22,080
we're talking about which is right here
33436
28:37:20,872 --> 28:37:23,760
and at the moment as you can see it's
33437
28:37:22,080 --> 28:37:25,279
doing all service firebase and email
33438
28:37:23,759 --> 28:37:26,159
verification but we shouldn't be doing
33439
28:37:26,160 --> 28:37:30,080
um we should ask our block to do that so
33440
28:37:31,039 --> 28:37:35,039
first of all remove that code inside the
33441
28:37:33,119 --> 28:37:37,279
buttons unpressed and then this button
33442
28:37:35,039 --> 28:37:38,959
doesn't have to be async anymore
33443
28:37:37,279 --> 28:37:41,911
and what we're going to say is just
33444
28:37:38,960 --> 28:37:43,760
going to say context and read
33445
28:37:41,911 --> 28:37:45,279
and but we don't have read remember
33446
28:37:43,759 --> 28:37:47,119
because we don't have we haven't
33447
28:37:47,119 --> 28:37:51,440
we haven't imported block or flutter
33448
28:37:49,600 --> 28:37:52,960
block into this file yet but we're going
33449
28:37:51,440 --> 28:37:55,512
to fix that soon so first of all just
33450
28:37:52,960 --> 28:37:57,680
say read the off block and that's going
33451
28:37:55,512 --> 28:38:00,160
to also import off block for us so
33452
28:37:57,679 --> 28:38:02,000
that's the first part and now you have
33453
28:38:00,160 --> 28:38:03,512
this error let's get visual studio code
33454
28:38:03,512 --> 28:38:08,479
the same provider but i actually want
33455
28:38:08,479 --> 28:38:13,119
let's go ahead and import that ourselves
33456
28:38:10,232 --> 28:38:15,760
so let's say package flutter block and
33457
28:38:15,759 --> 28:38:20,399
now it's fine alright so let's in here
33458
28:38:17,831 --> 28:38:22,399
and then add an event we say const off
33459
28:38:22,399 --> 28:38:27,911
send email verification just like that
33460
28:38:31,279 --> 28:38:36,551
so the next thing we have to do is you
33461
28:38:34,000 --> 28:38:38,080
can see inside this restart button at
33462
28:38:36,551 --> 28:38:40,080
the bottom of the screen at the moment
33463
28:38:38,080 --> 28:38:42,872
it's doing quite a lot of work
33464
28:38:40,080 --> 28:38:44,551
it is basically first logging out from
33465
28:38:42,872 --> 28:38:46,479
our auth service and then it's doing
33466
28:38:44,551 --> 28:38:48,319
navigation so this button is like all
33467
28:38:46,479 --> 28:38:50,800
over the place it's taking care of
33468
28:38:48,320 --> 28:38:53,760
authentication it's taking care of i
33469
28:38:50,800 --> 28:38:55,192
mean i'm actually very i'm laughing here
33470
28:38:53,759 --> 28:38:56,959
because i'm kind of laughing at the
33471
28:38:55,191 --> 28:38:57,759
progress that we've made so far and that
33472
28:38:57,759 --> 28:39:02,000
gone from very very raw programming to
33473
28:39:02,000 --> 28:39:08,080
handling of exceptions alien handling of
33474
28:39:05,440 --> 28:39:10,160
routing etc so it is actually really fun
33475
28:39:08,080 --> 28:39:12,400
to be here to be honest with you
33476
28:39:10,160 --> 28:39:14,400
so in here let's remove that code and
33477
28:39:12,399 --> 28:39:16,231
kind of grab this thing that we have up
33478
28:39:14,399 --> 28:39:17,759
here in our send email verification
33479
28:39:16,232 --> 28:39:19,512
button and bring it down here instead of
33480
28:39:17,759 --> 28:39:21,911
sending the off event send email
33481
28:39:19,512 --> 28:39:24,232
verification we're gonna send alt event
33482
28:39:25,360 --> 28:39:29,831
excuse me all right so that part is done
33483
28:39:31,600 --> 28:39:36,720
what we need now let's go in now let's
33484
28:39:34,080 --> 28:39:38,872
close this file and go to our off block
33485
28:39:36,720 --> 28:39:40,320
so we have quite a bit of work now to do
33486
28:39:38,872 --> 28:39:42,551
in our off block as you can see it's
33487
28:39:42,551 --> 28:39:45,759
i want to do the same thing in my notes
33488
28:39:45,759 --> 28:39:49,119
the first thing that we need to do is
33489
28:39:47,279 --> 28:39:50,639
make sure that we are not using this off
33490
28:39:49,119 --> 28:39:53,360
state loading because we don't have that
33491
28:39:50,639 --> 28:39:55,679
anymore what we have is off states on in
33492
28:39:53,360 --> 28:39:58,551
each light so please take care of that
33493
28:40:00,800 --> 28:40:06,960
we also have now an auth event send
33494
28:40:04,720 --> 28:40:09,759
email verification and we haven't
33495
28:40:06,960 --> 28:40:11,680
handled that yet so let's go on top of
33496
28:40:09,759 --> 28:40:14,080
this initialize i'm just gonna send say
33497
28:40:11,679 --> 28:40:17,359
send email verification okay and let's
33498
28:40:14,080 --> 28:40:18,639
create a new on to handle auth events
33499
28:40:17,360 --> 28:40:20,800
and email verification because we
33500
28:40:18,639 --> 28:40:23,039
haven't handled that so we have event
33501
28:40:23,039 --> 28:40:27,679
let's just go and say this is an async
33502
28:40:24,960 --> 28:40:29,600
function and then open it and then a
33503
28:40:27,679 --> 28:40:32,079
semicolon at the end to get the format
33504
28:40:32,080 --> 28:40:35,759
the only thing we have to do in the auth
33505
28:40:34,080 --> 28:40:38,160
event send email verification to
33506
28:40:35,759 --> 28:40:40,479
actually call and tell the provider that
33507
28:40:38,160 --> 28:40:42,552
hey um we're gonna basically send an
33508
28:40:40,479 --> 28:40:45,679
email verification all right so let's
33509
28:40:42,551 --> 28:40:47,191
just let's just say a wait provider
33510
28:40:45,679 --> 28:40:48,639
and email verification and then what
33511
28:40:47,191 --> 28:40:51,512
we're gonna do we're gonna emit the
33512
28:40:51,512 --> 28:40:56,639
so by coming into by sending this event
33513
28:40:55,039 --> 28:40:58,719
we are just going to do some work and
33514
28:40:56,639 --> 28:41:01,191
emit the exact same state that you're in
33515
28:40:58,720 --> 28:41:02,960
so we're not actually changing the state
33516
28:41:01,191 --> 28:41:05,440
of the application because remember when
33517
28:41:02,960 --> 28:41:07,680
you're in the verify email view and then
33518
28:41:05,440 --> 28:41:10,000
you press the button to actually send a
33519
28:41:07,679 --> 28:41:12,231
new verification email what happens on
33520
28:41:10,000 --> 28:41:13,600
the screen nothing we're not like doing
33521
28:41:12,232 --> 28:41:15,760
anything it's just we're sending the
33522
28:41:13,600 --> 28:41:17,360
email verification that's all so we're
33523
28:41:15,759 --> 28:41:19,191
not sending you to a new screen or
33524
28:41:17,360 --> 28:41:20,872
anything like that so that's why we're
33525
28:41:19,191 --> 28:41:23,279
emitting the exact same state as we had
33526
28:41:24,720 --> 28:41:29,759
all right now we have to actually handle
33527
28:41:32,639 --> 28:41:37,911
so let's go ahead and do that so that is
33528
28:41:35,039 --> 28:41:40,871
completely new so let's just say on
33529
28:41:40,872 --> 28:41:45,440
and we say we have the events and the
33530
28:41:42,800 --> 28:41:49,080
emails and an asynchronous function just
33531
28:41:50,960 --> 28:41:55,280
when we have the auth event register if
33532
28:41:52,872 --> 28:41:57,832
you remember from before this authentic
33533
28:41:55,279 --> 28:41:59,039
include the email and password in itself
33534
28:41:59,039 --> 28:42:03,191
so we can grab those and that
33535
28:42:01,191 --> 28:42:06,080
information right now just say email is
33536
28:42:03,191 --> 28:42:08,159
advanced.email and let's just say final
33537
28:42:11,600 --> 28:42:16,320
all right so then we're going to put
33538
28:42:13,600 --> 28:42:19,120
this into a try and catch block so we're
33539
28:42:16,320 --> 28:42:21,040
going to say try on exception
33540
28:42:21,039 --> 28:42:25,039
when an exception happens we're just
33541
28:42:32,639 --> 28:42:36,551
we talked about this before but just to
33542
28:42:34,551 --> 28:42:39,191
refresh when you're during the process
33543
28:42:36,551 --> 28:42:42,000
of register we actually can emit a new
33544
28:42:39,191 --> 28:42:44,080
state in here just called registering
33545
28:42:42,000 --> 28:42:46,232
and then it can it can contain an
33546
28:42:44,080 --> 28:42:47,512
exception all right so that's what we're
33547
28:42:46,232 --> 28:42:49,120
emitting in here saying that you're in
33548
28:42:47,512 --> 28:42:50,960
the process of registering but something
33549
28:42:49,119 --> 28:42:53,119
bad happened which is an exception all
33550
28:42:53,360 --> 28:42:58,080
so in here then let's just say await
33551
28:42:55,831 --> 28:42:59,759
provider and we're going to create a new
33552
28:42:58,080 --> 28:43:03,279
user with the email and password they
33553
28:42:59,759 --> 28:43:05,191
just fit right in so that's really great
33554
28:43:03,279 --> 28:43:07,512
and then if you remember from the
33555
28:43:05,191 --> 28:43:09,191
registration process that we had before
33556
28:43:09,191 --> 28:43:12,551
in our register view during registration
33557
28:43:12,551 --> 28:43:16,800
upon doing a registration we didn't just
33558
28:43:14,872 --> 28:43:18,872
register the user with the provider but
33559
28:43:16,800 --> 28:43:20,232
we also send an email verification just
33560
28:43:18,872 --> 28:43:22,400
to make sure that the user doesn't have
33561
28:43:20,232 --> 28:43:24,160
to go and send an email verification and
33562
28:43:22,399 --> 28:43:26,720
manually so we're going to do the same
33563
28:43:26,720 --> 28:43:32,080
so let's also wait on the provider
33564
28:43:30,320 --> 28:43:34,720
and we say send email verification just
33565
28:43:34,720 --> 28:43:39,191
um and then after doing that since you
33566
28:43:37,119 --> 28:43:41,279
registered a new user well what is the
33567
28:43:39,191 --> 28:43:42,720
states if you remember from our
33568
28:43:43,911 --> 28:43:48,720
we have this needs verification we know
33569
28:43:46,639 --> 28:43:50,160
that when we register and use a new user
33570
28:43:48,720 --> 28:43:52,872
that user is always going to need
33571
28:43:50,160 --> 28:43:55,192
verification right so let's go in here
33572
28:43:52,872 --> 28:43:58,320
and just emits that state so
33573
28:43:55,191 --> 28:43:59,831
uh auth state needs verification just
33574
28:43:58,320 --> 28:44:01,280
like that and that's an empty state so
33575
28:43:59,831 --> 28:44:03,599
it doesn't have any parameters and such
33576
28:44:07,279 --> 28:44:12,080
then we have to handle our auth event
33577
28:44:10,080 --> 28:44:15,360
initialize so let's have a look in here
33578
28:44:12,080 --> 28:44:17,759
and see how the code look looks like so
33579
28:44:15,360 --> 28:44:20,160
in here what we need to do at the moment
33580
28:44:17,759 --> 28:44:22,319
we have logged out but you can see we're
33581
28:44:20,160 --> 28:44:24,000
not providing that is a loading
33582
28:44:22,320 --> 28:44:25,760
parameter and we're not providing
33583
28:44:24,000 --> 28:44:28,080
exceptions so i'm just actually going to
33584
28:44:25,759 --> 28:44:29,191
click clean this and write it by hand
33585
28:44:29,191 --> 28:44:33,360
so in the emit let's just emit a const
33586
28:44:40,720 --> 28:44:43,911
when you initialize the application from
33587
28:44:42,551 --> 28:44:46,000
the beginning when the application
33588
28:44:43,911 --> 28:44:48,800
actually runs we're just gonna say by
33589
28:44:46,000 --> 28:44:50,639
default you're logged out all right
33590
28:44:48,800 --> 28:44:52,639
so let's go ahead and do that if the
33591
28:44:52,639 --> 28:44:56,399
so in the exception we don't have any
33592
28:44:54,720 --> 28:44:57,831
exceptions and we're not loading
33593
28:44:56,399 --> 28:45:00,000
anything as such so that's like the
33594
28:44:57,831 --> 28:45:01,599
default state so that's it comma in
33595
28:45:00,000 --> 28:45:05,440
there and a comma here just to get the
33596
28:45:09,440 --> 28:45:13,600
we also have the initialize in here
33597
28:45:13,600 --> 28:45:20,872
it's email verified and that so
33598
28:45:16,960 --> 28:45:20,872
yeah that looks that looks fine to me
33599
28:45:21,512 --> 28:45:26,000
okay now let's have a look at logging in
33600
28:45:24,551 --> 28:45:27,831
as you can see we have to take care of
33601
28:45:26,000 --> 28:45:30,960
our login and logic a little bit and
33602
28:45:27,831 --> 28:45:33,279
make sure that we're loading so when you
33603
28:45:30,960 --> 28:45:34,800
say i want to log in we're going to say
33604
28:45:33,279 --> 28:45:37,039
okay you want to log in that means
33605
28:45:34,800 --> 28:45:39,360
you're logged out but you're logged out
33606
28:45:37,039 --> 28:45:41,039
and there's a loading screen okay that's
33607
28:45:39,360 --> 28:45:44,160
why we created that loading dialog which
33608
28:45:41,039 --> 28:45:46,871
we're going to put into you so
33609
28:45:44,160 --> 28:45:49,192
so upon the user asking to log in let's
33610
28:45:46,872 --> 28:45:50,800
just say okay we're going to emit our
33611
28:45:53,679 --> 28:45:58,159
and there is no exception and the
33612
28:45:55,759 --> 28:46:01,599
loading flag is actually true
33613
28:45:58,160 --> 28:46:04,080
so like that and right there and just
33614
28:46:07,679 --> 28:46:14,231
and let's have a look at how we're doing
33615
28:46:09,759 --> 28:46:15,439
things in here so we have our login
33616
28:46:15,440 --> 28:46:19,119
and we also as you can see in here so
33617
28:46:17,279 --> 28:46:20,800
that that was that part we've taken care
33618
28:46:19,119 --> 28:46:23,191
of and now what we have to do is to
33619
28:46:20,800 --> 28:46:26,000
disable disable the loading screen if
33620
28:46:26,000 --> 28:46:31,191
um at the moment we have this user in
33621
28:46:28,399 --> 28:46:32,799
here you can see final user okay and
33622
28:46:34,800 --> 28:46:38,720
logged in but that is not complete
33623
28:46:36,960 --> 28:46:39,912
because we're not checking whether the
33624
28:46:39,911 --> 28:46:44,000
verified their email address or not so
33625
28:46:44,000 --> 28:46:48,080
and say as the caption indicates if
33626
28:46:46,080 --> 28:46:50,400
email not verified then disable the
33627
28:46:48,080 --> 28:46:52,800
loading screen by sending a new logged
33628
28:46:50,399 --> 28:46:55,039
out okay before sending the needs
33629
28:46:52,800 --> 28:46:59,192
verification so let's take care of that
33630
28:46:55,039 --> 28:47:01,119
so we say if um user is email verified
33631
28:47:02,479 --> 28:47:08,959
a constant of auth state logged out
33632
28:47:08,960 --> 28:47:14,000
and we say well no exception and we're
33633
28:47:14,000 --> 28:47:20,720
so that disables essentially the loading
33634
28:47:17,600 --> 28:47:22,552
screen okay by saying it's loading false
33635
28:47:20,720 --> 28:47:26,320
remember here we sent is loading true
33636
28:47:22,551 --> 28:47:28,080
now we're sending is loading false
33637
28:47:28,080 --> 28:47:31,191
when the email is not verified we
33638
28:47:34,639 --> 28:47:39,360
state needs verification just like that
33639
28:47:39,360 --> 28:47:43,279
otherwise if the user's email is
33640
28:47:41,191 --> 28:47:45,119
verified then we're gonna say we're
33641
28:47:45,119 --> 28:47:49,191
let me bring up the correct caption so
33642
28:47:47,600 --> 28:47:51,912
we have to do the exact same thing in
33643
28:47:49,191 --> 28:47:53,911
here we're gonna disable basically the
33644
28:47:55,039 --> 28:47:59,279
and then we're going to send
33645
28:48:05,360 --> 28:48:10,800
all right and also in our exception
33646
28:48:07,512 --> 28:48:12,639
handling we we don't use this uh um yet
33647
28:48:10,800 --> 28:48:15,120
we're gonna use off state logged out but
33648
28:48:12,639 --> 28:48:18,872
we're gonna clean this up so inside emit
33649
28:48:15,119 --> 28:48:21,039
we're gonna say auth state logged out
33650
28:48:18,872 --> 28:48:22,639
and then there is an exception and we
33651
28:48:24,479 --> 28:48:28,000
please place that inside the exception
33652
28:48:37,759 --> 28:48:42,159
now as you can see the caption that says
33653
28:48:39,119 --> 28:48:44,000
fix fix up auth state logged out
33654
28:48:42,160 --> 28:48:47,360
we have to emit the auth state logged
33655
28:48:44,000 --> 28:48:48,800
out and fix up exception handler as well
33656
28:48:48,800 --> 28:48:52,400
let's find out our auth event logged out
33657
28:48:51,039 --> 28:48:54,399
and we have a lot of errors in here
33658
28:48:54,399 --> 28:48:58,551
so it would actually be better
33659
28:48:58,551 --> 28:49:02,399
nuked this code in here and wrote it
33660
28:49:01,039 --> 28:49:03,279
from scratch so i'm just going to say
33661
28:49:03,279 --> 28:49:07,360
and then we'll say on exception
33662
28:49:09,360 --> 28:49:12,960
and then when there's an exception
33663
28:49:10,800 --> 28:49:14,479
during logged out logging out what we're
33664
28:49:12,960 --> 28:49:17,040
going to just say we're going to say
33665
28:49:14,479 --> 28:49:20,231
well you are logged out but an exception
33666
28:49:17,039 --> 28:49:22,319
happened all right so let's just say um
33667
28:49:28,000 --> 28:49:32,080
there is an exception and we're not
33668
28:49:29,911 --> 28:49:34,000
loading okay so that's what you need to
33669
28:49:39,512 --> 28:49:42,551
what do we actually have to do we have
33670
28:49:49,039 --> 28:49:52,719
and then we also have to emit the new
33671
28:49:50,800 --> 28:49:54,320
states that we're going to say you're
33672
28:49:52,720 --> 28:49:56,232
logged out and then there is no
33673
28:49:54,320 --> 28:49:58,232
exception so i'm just going to grab this
33674
28:49:56,232 --> 28:50:00,720
code from there and place it in here and
33675
28:49:58,232 --> 28:50:01,832
say there is no exception like that
33676
28:50:01,831 --> 28:50:06,479
and it says well this can now be a cons
33677
28:50:03,831 --> 28:50:08,720
so i'm gonna make it a const just like
33678
28:50:10,479 --> 28:50:14,479
the next thing that we have to do is to
33679
28:50:12,320 --> 28:50:16,320
clean up our routing because you see the
33680
28:50:14,479 --> 28:50:18,231
more and more we're blockifying the
33681
28:50:16,320 --> 28:50:20,232
entire process inside our application
33682
28:50:18,232 --> 28:50:23,120
the less we need different different
33683
28:50:20,232 --> 28:50:25,600
screens to actually do routing manually
33684
28:50:23,119 --> 28:50:28,479
because routing is going to be handled
33685
28:50:25,600 --> 28:50:29,912
by our block listeners and things like
33686
28:50:29,911 --> 28:50:35,039
so let's go ahead and as the caption
33687
28:50:32,639 --> 28:50:37,279
indicates in our routes dart file we're
33688
28:50:35,039 --> 28:50:39,911
gonna remove all routes except for
33689
28:50:37,279 --> 28:50:41,512
create or update node route so let's
33690
28:50:41,512 --> 28:50:44,551
actually before we do that i'm going to
33691
28:50:42,720 --> 28:50:46,872
close all the files in here just to make
33692
28:50:44,551 --> 28:50:48,872
sure everything's saved then go to route
33693
28:50:48,872 --> 28:50:55,551
and remove everything except for
33694
28:50:58,320 --> 28:51:02,480
excuse me let's now go now that we've
33695
28:51:00,720 --> 28:51:04,160
done that we have to go to our main dart
33696
28:51:06,232 --> 28:51:10,400
and we're gonna clean up our routing in
33697
28:51:08,551 --> 28:51:12,080
here as you can see we have those four
33698
28:51:10,399 --> 28:51:14,959
routes now that we've removed let's just
33699
28:51:12,080 --> 28:51:18,232
remove them from main dark file as well
33700
28:51:18,800 --> 28:51:22,479
so what we need also is as the caption
33701
28:51:20,800 --> 28:51:24,720
captioning case we should show the
33702
28:51:22,479 --> 28:51:26,720
register view if auth state is
33703
28:51:26,720 --> 28:51:31,759
so in main dart show register view if
33704
28:51:29,440 --> 28:51:34,232
off state is registering so i'm gonna
33705
28:51:31,759 --> 28:51:36,231
bring up my notes as well in here
33706
28:51:34,232 --> 28:51:38,232
so let's go ahead and see what we have
33707
28:51:36,232 --> 28:51:39,911
we have auth state logged out what we
33708
28:51:38,232 --> 28:51:41,832
have what we also have to have in here
33709
28:51:39,911 --> 28:51:45,599
we have to create another else statement
33710
28:51:48,551 --> 28:51:54,399
and open your curly brackets um
33711
28:51:52,232 --> 28:51:57,680
on curly bracket missing and in here we
33712
28:51:54,399 --> 28:52:00,319
just say return cons register view okay
33713
28:52:01,191 --> 28:52:05,599
all right that was a lot of work that
33714
28:52:03,360 --> 28:52:07,911
we've done and now if you then look at
33715
28:52:05,600 --> 28:52:10,320
your files in here you shouldn't you
33716
28:52:07,911 --> 28:52:12,399
basically shouldn't have any errors okay
33717
28:52:10,320 --> 28:52:14,720
so before testing this all because there
33718
28:52:12,399 --> 28:52:16,799
were just so much stuff that we've done
33719
28:52:14,720 --> 28:52:19,279
and we've also changed our main function
33720
28:52:16,800 --> 28:52:20,479
it just makes sense to do a hot restart
33721
28:52:20,479 --> 28:52:26,872
so i did a hot restart let me just
33722
28:52:23,279 --> 28:52:28,080
resize my visual studio code so we see
33723
28:52:31,279 --> 28:52:37,440
now this is the login view uh if you
33724
28:52:33,759 --> 28:52:39,831
look at our login view dart file uh if
33725
28:52:37,440 --> 28:52:41,832
you have a look at what we did when the
33726
28:52:39,831 --> 28:52:43,119
login button is tapped we're literally
33727
28:52:44,000 --> 28:52:49,279
auth block to do this thing in here log
33728
28:52:47,119 --> 28:52:52,551
in all right so we're sending a new
33729
28:52:49,279 --> 28:52:55,679
event to it so if something happens to
33730
28:52:52,551 --> 28:52:57,512
that and things don't work as well then
33731
28:52:55,679 --> 28:52:59,511
it says user not found wrong credentials
33732
28:52:57,512 --> 28:53:00,400
authentication error then we should
33733
28:53:00,399 --> 28:53:03,911
actually get an error displayed on the
33734
28:53:02,000 --> 28:53:06,232
screen so let's test this and you can
33735
28:53:03,911 --> 28:53:09,512
see it says authentication error so
33736
28:53:06,232 --> 28:53:11,360
that's in here okay so that's that seems
33737
28:53:11,360 --> 28:53:15,440
and it would be really good if you could
33738
28:53:15,440 --> 28:53:20,080
our loading dialogue and see if it works
33739
28:53:20,080 --> 28:53:25,440
foobar bads in here and say login
33740
28:53:23,191 --> 28:53:27,512
we saw that loading so that was our
33741
28:53:25,440 --> 28:53:30,400
loading dialog that was this logic right
33742
28:53:27,512 --> 28:53:32,551
here so it's it's really cool actually
33743
28:53:30,399 --> 28:53:35,599
how it's working let's go in here and
33744
28:53:32,551 --> 28:53:37,599
say log out and log out and then we come
33745
28:53:35,600 --> 28:53:40,160
to the login screen so this is all
33746
28:53:40,160 --> 28:53:43,360
and you could and if you want to see
33747
28:53:41,600 --> 28:53:44,800
your loading screen a little bit more
33748
28:53:43,360 --> 28:53:47,279
and like if you're in the process of
33749
28:53:44,800 --> 28:53:48,639
debugging it you could always go to your
33750
28:53:50,960 --> 28:53:56,800
and inside when you're asked to log in
33751
28:53:54,320 --> 28:53:58,480
you could actually a wait so you could
33752
28:53:58,479 --> 28:54:04,159
a weight future delayed and you could
33753
28:54:01,119 --> 28:54:06,639
say duration and you could say seconds
33754
28:54:04,160 --> 28:54:08,872
three something like this okay
33755
28:54:06,639 --> 28:54:10,551
so this is gonna await like it's just
33756
28:54:08,872 --> 28:54:12,960
gonna wait three seconds before it
33757
28:54:10,551 --> 28:54:15,191
continues so let me just save that and
33758
28:54:12,960 --> 28:54:18,232
enter some information in here say
33759
28:54:15,191 --> 28:54:19,279
google okay it's our gmail
33760
28:54:20,399 --> 28:54:25,679
oops that didn't work so well
33761
28:54:24,160 --> 28:54:27,360
i don't know why that didn't work so
33762
28:54:25,679 --> 28:54:29,759
well even though this is an async
33763
28:54:27,360 --> 28:54:30,720
function could this need hot restarting
33764
28:54:33,759 --> 28:54:37,511
log out in here and enter foo barba
33765
28:54:37,512 --> 28:54:44,160
avant np gmail.com foo barbas and then
33766
28:54:41,679 --> 28:54:46,231
login there we go now it's waiting more
33767
28:54:44,160 --> 28:54:48,480
than three seconds kind of then it goes
33768
28:54:46,232 --> 28:54:50,160
to the application so i would say that
33769
28:54:48,479 --> 28:54:53,279
is working very well so we can now
33770
28:54:50,160 --> 28:54:57,760
remove this weight in here okay
33771
28:54:53,279 --> 28:54:57,759
and maybe do a hot restart as well
33772
28:54:58,960 --> 28:55:03,512
that that was a lot of work we did but
33773
28:55:02,000 --> 28:55:05,512
that's what you do with software
33774
28:55:03,512 --> 28:55:07,360
development sometimes you break things
33775
28:55:05,512 --> 28:55:09,040
to make them better you have to break
33776
28:55:07,360 --> 28:55:10,960
sometimes the code that you have in
33777
28:55:09,039 --> 28:55:13,191
order to build up something better we
33778
28:55:10,960 --> 28:55:14,800
didn't really break things but we
33779
28:55:14,800 --> 28:55:20,400
we basically removed a lot of old old
33780
28:55:17,440 --> 28:55:22,800
code in order to make it and work better
33781
28:55:22,800 --> 28:55:27,120
i'm in this course my goal is to make
33782
28:55:24,800 --> 28:55:28,639
you a software developer using flutter
33783
28:55:27,119 --> 28:55:30,319
i'm not just going to show you the right
33784
28:55:28,639 --> 28:55:32,960
thing to do from the beginning we're
33785
28:55:30,320 --> 28:55:34,552
going to gradually make things better a
33786
28:55:32,960 --> 28:55:35,680
software developer also is not going to
33787
28:55:34,551 --> 28:55:37,679
be depending on their experience they're
33788
28:55:35,679 --> 28:55:40,399
not going to do the exact right thing
33789
28:55:37,679 --> 28:55:42,399
from point one or point zero
33790
28:55:40,399 --> 28:55:43,599
they're they're gonna make experiments
33791
28:55:42,399 --> 28:55:45,511
they're gonna google a lot of things
33792
28:55:43,600 --> 28:55:47,279
look at stack overflow find the right
33793
28:55:45,512 --> 28:55:49,040
way to do things get inspiration maybe
33794
28:55:47,279 --> 28:55:51,119
from like another product that's kind of
33795
28:55:49,039 --> 28:55:53,279
doing something similar and develop
33796
28:55:51,119 --> 28:55:55,759
things one step at a time make it better
33797
28:55:53,279 --> 28:55:57,440
so that's the reason we're in chapter 40
33798
28:55:57,440 --> 28:56:00,400
we've just gotten to this point
33799
28:55:59,191 --> 28:56:02,799
otherwise we would have done this from
33800
28:56:00,399 --> 28:56:04,799
chapter zero for chapter one so
33801
28:56:04,800 --> 28:56:08,000
through us sticking around throughout
33802
28:56:06,399 --> 28:56:09,759
this chapter and coming to this point
33803
28:56:08,000 --> 28:56:11,360
that we are right now so as this
33804
28:56:09,759 --> 28:56:13,360
tradition we're gonna now commit our
33805
28:56:11,360 --> 28:56:15,911
code and tag it so let me do some
33806
28:56:13,360 --> 28:56:16,960
reshuffling of the screen go to terminal
33807
28:56:22,320 --> 28:56:27,760
and like that and i'm gonna shuffle the
33808
28:56:24,960 --> 28:56:30,080
screen as well so you see things better
33809
28:56:27,759 --> 28:56:32,799
so let's go ahead and have a look at our
33810
28:56:30,080 --> 28:56:34,400
git status ginormous amount of things
33811
28:56:32,800 --> 28:56:36,160
we've done everything is modified and
33812
28:56:34,399 --> 28:56:38,159
there's a new file added so let's say
33813
28:56:42,479 --> 28:56:46,319
because if you have a look at our logs
33814
28:56:44,232 --> 28:56:48,232
the previous chapter was step 24 so now
33815
28:56:48,232 --> 28:56:52,400
so let's then push our changes now that
33816
28:56:52,399 --> 28:56:56,871
and then we're going to say git tag
33817
28:56:56,872 --> 28:57:01,360
25 as well so and then we're going to
33818
28:57:01,360 --> 28:57:04,639
if you look at our tags now we have step
33819
28:57:02,960 --> 28:57:07,120
24 and then somewhere in here we should
33820
28:57:04,639 --> 28:57:08,551
have step 25 as well as you can see here
33821
28:57:08,551 --> 28:57:12,800
congratulations for getting through this
33822
28:57:10,399 --> 28:57:14,159
chapter was one of the jumpiest chapters
33823
28:57:12,800 --> 28:57:16,232
i would say in this entire course and
33824
28:57:14,160 --> 28:57:17,760
that we moved so much from file to file
33825
28:57:16,232 --> 28:57:19,832
so if you made it through then
33826
28:57:21,039 --> 28:57:25,759
so what we need to work on in the next
33827
28:57:23,039 --> 28:57:27,599
chapter is our broken loading screen i
33828
28:57:25,759 --> 28:57:30,319
know it's a little bit of an anti-climax
33829
28:57:27,600 --> 28:57:32,400
in that we just work on our loading
33830
28:57:30,320 --> 28:57:34,320
screen so we should be kind of proud
33831
28:57:32,399 --> 28:57:36,000
however there is a problem with this
33832
28:57:34,320 --> 28:57:36,960
loading screen and that is because we're
33833
28:57:36,960 --> 28:57:43,280
navigator of context and then we're
33834
28:57:39,191 --> 28:57:45,911
popping remember popping inside
33835
28:57:43,279 --> 28:57:48,639
executing pop invoking the pop function
33836
28:57:45,911 --> 28:57:50,160
on your navigator and actually i can
33837
28:57:50,160 --> 28:57:54,720
without going into too much details so
33838
28:57:52,479 --> 28:57:56,479
let's have a look at our uh loading
33839
28:57:56,479 --> 28:58:00,000
see at the bottom of this loading
33840
28:57:57,759 --> 28:58:02,479
dialogue we're doing navigator off pop
33841
28:58:00,000 --> 28:58:05,911
this doesn't necessarily pop this dialog
33842
28:58:02,479 --> 28:58:08,231
it pops the current view on the
33843
28:58:05,911 --> 28:58:10,639
navigator so even if our dialog is not
33844
28:58:08,232 --> 28:58:13,832
displayed on the screen saying navigator
33845
28:58:10,639 --> 28:58:16,232
of is gonna confuse the navigation stack
33846
28:58:13,831 --> 28:58:17,911
in flutter so we're gonna have a look at
33847
28:58:16,232 --> 28:58:20,320
that and fixing that actually in the
33848
28:58:17,911 --> 28:58:22,399
next chapter so grab some tea coffee
33849
28:58:20,320 --> 28:58:23,832
chocolate whatever you want to and i'll
33850
28:58:22,399 --> 28:58:25,911
see you in the next chapter hello and
33851
28:58:23,831 --> 28:58:27,119
welcome to chapter 43 of this flutter
33852
28:58:27,119 --> 28:58:30,959
we are now very very close to actually
33853
28:58:29,360 --> 28:58:33,039
being able to release our application to
33854
28:58:30,960 --> 28:58:35,360
the app store there are just a few
33855
28:58:33,039 --> 28:58:39,039
things left sorry app store and play
33856
28:58:35,360 --> 28:58:42,160
store and we have a few things left um
33857
28:58:39,039 --> 28:58:43,679
to do before we can actually do that and
33858
28:58:42,160 --> 28:58:45,512
um one of the most important things we
33859
28:58:43,679 --> 28:58:47,439
need to take care of are loading screens
33860
28:58:47,440 --> 28:58:51,279
if you remember from what we've done so
33861
28:58:49,119 --> 28:58:53,039
far we've been working with block we've
33862
28:58:51,279 --> 28:58:55,600
been working with our auth service and
33863
28:58:55,600 --> 28:59:01,120
and we also have loading state in some
33864
28:59:01,119 --> 28:59:05,279
actually i can't call it loading state
33865
28:59:02,872 --> 28:59:08,400
we have loading property on some of our
33866
28:59:05,279 --> 28:59:11,039
off states so when our off block returns
33867
28:59:08,399 --> 28:59:12,959
a state depending on which state it is
33868
28:59:11,039 --> 28:59:15,599
then we can actually see whether it has
33869
28:59:12,960 --> 28:59:17,912
it is loading property or not
33870
28:59:15,600 --> 28:59:20,080
and we've been working with loading
33871
28:59:17,911 --> 28:59:21,831
dialogue so far and there are just
33872
28:59:20,080 --> 28:59:23,831
simple dialogues that we're displaying
33873
28:59:21,831 --> 28:59:26,159
on the screen with a column with a
33874
28:59:23,831 --> 28:59:27,119
circular progress indicator and we also
33875
28:59:27,119 --> 28:59:31,831
a size box just to separate the loading
33876
28:59:30,080 --> 28:59:34,080
indicator from a text that we're
33877
28:59:34,080 --> 28:59:37,831
this has been working okay so far but as
33878
28:59:36,551 --> 28:59:39,599
i mentioned in at the end of the
33879
28:59:37,831 --> 28:59:41,119
previous chapter we have a bit of a
33880
28:59:41,119 --> 28:59:44,479
if you remember from the code actually i
33881
28:59:42,960 --> 28:59:46,320
can bring it on the screen so you can
33882
28:59:44,479 --> 28:59:47,679
have a look here let's go to our loading
33883
28:59:47,679 --> 28:59:52,959
loading dialog at the end of this if you
33884
28:59:50,551 --> 28:59:55,911
remember we return a function
33885
28:59:52,960 --> 28:59:59,040
and which in turn upon calling which we
33886
28:59:55,911 --> 29:00:01,039
pop our navigation navigator
33887
28:59:59,039 --> 29:00:02,719
however as you can see there is no
33888
29:00:01,039 --> 29:00:05,279
transaction in here meaning that the
33889
29:00:02,720 --> 29:00:07,512
navigator can't necessarily know that
33890
29:00:05,279 --> 29:00:09,759
what it is popping at the moment is in
33891
29:00:09,759 --> 29:00:13,279
and this problem is actually quite big
33892
29:00:11,600 --> 29:00:15,440
in that you could for instance have a
33893
29:00:13,279 --> 29:00:16,959
loading dialog on the screen and then
33894
29:00:15,440 --> 29:00:18,479
while that loading dialog is being
33895
29:00:16,960 --> 29:00:20,480
displayed you could display another
33896
29:00:18,479 --> 29:00:22,872
screen and push that screen in your
33897
29:00:20,479 --> 29:00:24,720
navigation stack and then if you then
33898
29:00:22,872 --> 29:00:26,639
try to dismiss your loading dialogue
33899
29:00:24,720 --> 29:00:28,479
what you will dismiss in fact is the
33900
29:00:26,639 --> 29:00:29,600
second screen that you displayed in the
33901
29:00:29,600 --> 29:00:34,080
this process is not transaction based in
33902
29:00:31,759 --> 29:00:36,871
that you're playing literally with the
33903
29:00:34,080 --> 29:00:39,600
navigate in navigation stack in flutter
33904
29:00:36,872 --> 29:00:41,680
and that's not such a wise thing to do
33905
29:00:39,600 --> 29:00:43,912
so what we want to do in this chapter is
33906
29:00:41,679 --> 29:00:46,479
to clean up our loading screens in the
33907
29:00:43,911 --> 29:00:49,191
application and make sure that they are
33908
29:00:51,911 --> 29:00:56,800
so now i named overlays and it is a good
33909
29:00:54,479 --> 29:00:58,872
time then to explain what overlays are
33910
29:00:56,800 --> 29:01:02,000
and why they're good especially for
33911
29:00:58,872 --> 29:01:04,160
loading screens um as you know
33912
29:01:02,000 --> 29:01:04,960
normal screens that you display on on
33913
29:01:04,960 --> 29:01:08,232
mobile telephone for instance or on the
33914
29:01:08,232 --> 29:01:12,552
on a desktop with flutter there it
33915
29:01:10,639 --> 29:01:14,479
basically placed inside a navigation
33916
29:01:12,551 --> 29:01:16,231
stack so the navigation stack is there
33917
29:01:14,479 --> 29:01:18,159
to keep track of which screen is
33918
29:01:16,232 --> 29:01:19,911
displayed and then which screens you can
33919
29:01:19,911 --> 29:01:24,872
and so they have a hierarchy however if
33920
29:01:22,960 --> 29:01:27,832
you want to display something on top of
33921
29:01:24,872 --> 29:01:30,000
the navigation stack independent of the
33922
29:01:27,831 --> 29:01:31,511
navigation stack and the various changes
33923
29:01:30,000 --> 29:01:33,831
that could happen to the navigation
33924
29:01:31,512 --> 29:01:36,320
stack you could use and you probably
33925
29:01:33,831 --> 29:01:38,319
actually should use overlays either
33926
29:01:36,320 --> 29:01:39,912
directly or using other material
33927
29:01:38,320 --> 29:01:42,800
components that are provided by flutter
33928
29:01:39,911 --> 29:01:44,479
that in turn use overlays so
33929
29:01:42,800 --> 29:01:46,320
overlays as their name indicates they
33930
29:01:44,479 --> 29:01:48,231
have they have the ability to place
33931
29:01:46,320 --> 29:01:50,320
themselves over other content that is
33932
29:01:48,232 --> 29:01:52,232
currently displayed on the screen so
33933
29:01:50,320 --> 29:01:53,832
there and that makes them the perfect
33934
29:01:52,232 --> 29:01:55,512
candidate for loading screens for
33935
29:01:53,831 --> 29:01:57,439
instance because loading screens are
33936
29:01:55,512 --> 29:01:59,600
usually displayed on top of the current
33937
29:01:57,440 --> 29:02:01,279
content that the user is looking at so
33938
29:01:59,600 --> 29:02:04,400
in this chapter we're going to focus on
33939
29:02:01,279 --> 29:02:06,551
using overlays to improve the state of
33940
29:02:04,399 --> 29:02:08,551
our loading screens in the application
33941
29:02:09,440 --> 29:02:13,832
now before we actually get started
33942
29:02:10,872 --> 29:02:15,680
writing the uh our loading screen
33943
29:02:13,831 --> 29:02:17,831
um what we need to talk about is a
33944
29:02:15,679 --> 29:02:20,159
controller uh as its name indicates a
33945
29:02:17,831 --> 29:02:22,551
controller is an object usually that you
33946
29:02:25,512 --> 29:02:29,191
and using this controller usually an
33947
29:02:27,440 --> 29:02:31,279
object that receives that controller is
33948
29:02:29,191 --> 29:02:34,551
able to control either the contents or
33949
29:02:31,279 --> 29:02:36,160
the behavior of the object that
33950
29:02:34,551 --> 29:02:37,360
is being displayed on the screen for
33951
29:02:37,360 --> 29:02:41,039
so imagine a scenario where you have a
33952
29:02:41,039 --> 29:02:45,119
already appearing on the mobile device
33953
29:02:43,440 --> 29:02:48,080
and you're telling the user wait while
33954
29:02:45,119 --> 29:02:49,759
i'm logging you in now imagine that you
33955
29:02:48,080 --> 29:02:52,080
want to kick off another process while
33956
29:02:49,759 --> 29:02:54,000
that is ongoing and you want to display
33957
29:02:52,080 --> 29:02:55,680
a loading screen again to the user while
33958
29:02:54,000 --> 29:02:57,360
the previous loading screen is already
33959
29:02:58,399 --> 29:03:01,679
a typical way of doing that would be for
33960
29:03:00,160 --> 29:03:02,400
instance to dismiss the first loading
33961
29:03:02,399 --> 29:03:06,639
show a new loading screen with the new
33962
29:03:04,000 --> 29:03:08,080
content and when you get rid of the
33963
29:03:06,639 --> 29:03:10,080
second loading screen then you can
33964
29:03:08,080 --> 29:03:12,639
display the first loading screen again
33965
29:03:10,080 --> 29:03:14,872
as that process is ongoing however this
33966
29:03:14,872 --> 29:03:18,960
it is quite a bit of a race in that you
33967
29:03:16,639 --> 29:03:20,551
have to know the previous context what
33968
29:03:18,960 --> 29:03:22,720
loading screen was displayed before what
33969
29:03:20,551 --> 29:03:24,159
loading screen you're displaying now
33970
29:03:24,160 --> 29:03:27,911
loading screen before you have to
33971
29:03:25,191 --> 29:03:29,512
display it again so it's not so scalable
33972
29:03:27,911 --> 29:03:30,959
in that you will personally then be
33973
29:03:29,512 --> 29:03:32,960
responsible for keeping track of the
33974
29:03:30,960 --> 29:03:34,320
state of your loading screen so what
33975
29:03:32,960 --> 29:03:36,639
we're going to do in this chapter is to
33976
29:03:34,320 --> 29:03:38,960
create a loading screen that is a that
33977
29:03:36,639 --> 29:03:40,479
is able to be controlled and its text
33978
29:03:38,960 --> 29:03:42,552
and contents is going to be controlled
33979
29:03:43,360 --> 29:03:47,911
upon creating that loading screen we're
33980
29:03:45,191 --> 29:03:49,191
then gonna get a loading screen
33981
29:03:49,191 --> 29:03:53,599
and this loading controller is gonna
33982
29:03:51,191 --> 29:03:54,959
allow us to one dismiss the current
33983
29:03:53,600 --> 29:03:57,360
loading screen that is displayed on the
33984
29:03:54,960 --> 29:03:59,440
screen if any and then secondly it's
33985
29:03:57,360 --> 29:04:01,512
going to allow us to update the contents
33986
29:04:01,512 --> 29:04:06,320
so without further ado we could actually
33987
29:04:03,831 --> 29:04:08,799
start by having a look at creating this
33988
29:04:06,320 --> 29:04:10,552
loading controller and or loading screen
33989
29:04:08,800 --> 29:04:12,080
controller and then we're going to use
33990
29:04:10,551 --> 29:04:14,800
this loading screen controller where we
33991
29:04:12,080 --> 29:04:16,639
create our loading screen so as usual
33992
29:04:14,800 --> 29:04:18,160
i'm going to do some reshuffling on the
33993
29:04:18,160 --> 29:04:22,800
let me make the code bigger here and
33994
29:04:20,232 --> 29:04:26,000
then the font a little smaller
33995
29:04:22,800 --> 29:04:28,400
and let's then actually here i i'm
33996
29:04:26,000 --> 29:04:30,479
pretty sure that we don't need scr cpy
33997
29:04:30,479 --> 29:04:34,000
we're not gonna have a look at how that
33998
29:04:32,399 --> 29:04:35,439
loading screen looks which looks like
33999
29:04:34,000 --> 29:04:37,191
right now we're gonna write quite a bit
34000
29:04:35,440 --> 29:04:38,400
of code and then we're gonna put it into
34001
29:04:38,399 --> 29:04:41,679
i'm gonna make visual studio code full
34002
29:04:41,679 --> 29:04:46,799
and i'm going to get rid of this bottom
34003
29:04:46,960 --> 29:04:51,120
okay so as the caption indicates what
34004
29:04:49,279 --> 29:04:53,191
we're going to do now is to go ahead and
34005
29:04:51,119 --> 29:04:55,360
create our loading screen controller
34006
29:04:55,360 --> 29:05:00,479
loading loading screen controller and
34007
29:04:58,399 --> 29:05:02,319
let's go in here and have a look at lib
34008
29:05:00,479 --> 29:05:04,159
and we can see we have lib utility
34009
29:05:02,320 --> 29:05:06,080
service access you know constant views
34010
29:05:04,160 --> 29:05:07,512
but we don't have helpers so i'm gonna
34011
29:05:06,080 --> 29:05:10,551
right click on live and just say new
34012
29:05:07,512 --> 29:05:12,400
file and then i'm going to say helpers
34013
29:05:10,551 --> 29:05:13,599
and so that you can also see it here
34014
29:05:13,600 --> 29:05:18,160
and loading and then loading screen
34015
29:05:18,160 --> 29:05:20,232
so that's going to create the
34016
29:05:20,232 --> 29:05:24,232
folders for us as well so you can see
34017
29:05:22,232 --> 29:05:27,279
now we're under lip helpers loading
34018
29:05:24,232 --> 29:05:28,800
loading screen controller okay
34019
29:05:27,279 --> 29:05:31,512
so what we need here as i mentioned
34020
29:05:28,800 --> 29:05:33,760
before is the ability for us to be able
34021
29:05:31,512 --> 29:05:35,832
to control two things to close the
34022
29:05:33,759 --> 29:05:38,231
loading screen and also update its
34023
29:05:35,831 --> 29:05:41,191
contents so let's go ahead and define
34024
29:05:38,232 --> 29:05:43,440
these type def so let's just say type f
34025
29:05:41,191 --> 29:05:46,000
and we're going to call it close loading
34026
29:05:48,639 --> 29:05:52,551
that indicates whether the loading
34027
29:05:50,479 --> 29:05:54,479
screen could actually be closed or not
34028
29:05:52,551 --> 29:05:56,231
okay so it's just a function definition
34029
29:05:54,479 --> 29:05:58,800
for now there is no implementation of
34030
29:05:58,800 --> 29:06:05,680
so let's also go and create a type f
34031
29:06:03,039 --> 29:06:07,119
and we're going to say update
34032
29:06:07,119 --> 29:06:11,360
and this is a void function and actually
34033
29:06:09,512 --> 29:06:14,080
a bool function which will also indicate
34034
29:06:11,360 --> 29:06:15,911
whether the text could be updated and we
34035
29:06:14,080 --> 29:06:17,911
just say text so what we're saying in
34036
29:06:15,911 --> 29:06:19,440
here we will have two functions that
34037
29:06:19,440 --> 29:06:22,551
interface basically soon as you'll soon
34038
29:06:24,320 --> 29:06:28,960
let's then go ahead and create a class
34039
29:06:26,639 --> 29:06:31,279
and we call it loading screen
34040
29:06:28,960 --> 29:06:33,680
indicator or sorry controller
34041
29:06:31,279 --> 29:06:36,000
and let's mark this as immutable as well
34042
29:06:33,679 --> 29:06:37,911
and for this we need material so
34043
29:06:36,000 --> 29:06:40,399
um actually foundation would do as well
34044
29:06:37,911 --> 29:06:42,319
so let's just go in foundation and in
34045
29:06:40,399 --> 29:06:44,871
here i'm actually going to say show
34046
29:06:42,320 --> 29:06:47,280
immutable just like that so we just need
34047
29:06:44,872 --> 29:06:50,080
the immutable part of the foundation
34048
29:06:50,080 --> 29:06:54,080
okay so that's the definition of our
34049
29:06:52,000 --> 29:06:57,600
loading screen controller so what it
34050
29:06:54,080 --> 29:07:00,551
does is that it basically it takes in a
34051
29:06:57,600 --> 29:07:01,600
closed loading screen as a parameter and
34052
29:07:02,960 --> 29:07:06,720
and we also say final update loading
34053
29:07:06,720 --> 29:07:09,831
updates just like that and i'm going to
34054
29:07:08,320 --> 29:07:12,552
get help from visual studio code to
34055
29:07:09,831 --> 29:07:14,319
complete this as a constant constructor
34056
29:07:12,551 --> 29:07:17,599
and i'm going to make these parameters
34057
29:07:14,320 --> 29:07:19,912
also required so these things we've
34058
29:07:17,600 --> 29:07:21,760
talked about so much before so that's
34059
29:07:19,911 --> 29:07:24,160
why i'm kind of jumping over them as
34060
29:07:21,759 --> 29:07:25,679
fast as possible hot reload is not
34061
29:07:24,160 --> 29:07:28,552
working so well right now it's just
34062
29:07:25,679 --> 29:07:30,719
because the application on scrcpy is not
34063
29:07:28,551 --> 29:07:32,159
on the screen and that's why hot reload
34064
29:07:30,720 --> 29:07:34,551
isn't working so well so i'm going to
34065
29:07:32,160 --> 29:07:36,639
just jump to the application and now hot
34066
29:07:34,551 --> 29:07:39,119
reload works and then i'm going to put
34067
29:07:36,639 --> 29:07:41,119
scr cpy on another screen so it doesn't
34068
29:07:41,119 --> 29:07:45,831
okay so that's our controller so
34069
29:07:44,160 --> 29:07:47,279
we're then gonna work on creating a
34070
29:07:45,831 --> 29:07:49,439
function that can display the loading
34071
29:07:47,279 --> 29:07:51,592
screen and that function itself is gonna
34072
29:07:49,440 --> 29:07:53,279
return a loading screen controller to
34073
29:07:51,592 --> 29:07:55,360
you so that's the beauty of that
34074
29:07:53,279 --> 29:07:57,759
function using the controller then you
34075
29:07:55,360 --> 29:07:59,831
can close the loading screen or update
34076
29:07:57,759 --> 29:08:01,911
it so you can see that these two are
34077
29:07:59,831 --> 29:08:05,360
basically functions that the call side
34078
29:08:01,911 --> 29:08:07,039
can accept and call in order to close
34079
29:08:05,360 --> 29:08:10,039
and update the loading screen
34080
29:08:10,872 --> 29:08:14,960
all right that was the loading screen
34081
29:08:12,479 --> 29:08:18,399
controller what we need to do now is to
34082
29:08:14,960 --> 29:08:20,639
work on the loading screen itself so
34083
29:08:18,399 --> 29:08:23,360
um let's go ahead as the caption
34084
29:08:20,639 --> 29:08:25,440
indicates we're gonna go to lib helpers
34085
29:08:25,440 --> 29:08:29,760
and we're going to create a new file
34086
29:08:27,592 --> 29:08:32,800
inside loading and let's just call it
34087
29:08:35,512 --> 29:08:39,440
and inside loading screen we're just
34088
29:08:37,119 --> 29:08:41,119
going to create a loading screen
34089
29:08:41,119 --> 29:08:43,591
and we're going to make our loading
34090
29:08:43,592 --> 29:08:47,592
a singleton and since we've done
34091
29:08:45,679 --> 29:08:49,911
singleton twice before i'm just going to
34092
29:08:47,592 --> 29:08:51,512
basically paste the pattern in here so
34093
29:08:49,911 --> 29:08:54,319
we don't have to write this
34094
29:08:51,512 --> 29:08:56,232
boring code again but this is a pattern
34095
29:08:54,320 --> 29:08:58,320
that we've done so far twice as i
34096
29:08:56,232 --> 29:09:01,040
mentioned before so you should basically
34097
29:08:58,320 --> 29:09:02,960
know how it works so we have a private
34098
29:09:01,039 --> 29:09:04,479
constructor then we have a factory
34099
29:09:02,960 --> 29:09:08,160
constructor which is public which in
34100
29:09:08,160 --> 29:09:12,232
variable which in turn calls the private
34101
29:09:12,232 --> 29:09:17,512
it's just a bit of a we could actually
34102
29:09:14,639 --> 29:09:19,279
do it like this in so this is in order
34103
29:09:17,512 --> 29:09:20,872
basically so when someone calls our
34104
29:09:19,279 --> 29:09:22,800
loading screen constructor factory
34105
29:09:20,872 --> 29:09:25,512
constructor from outside in turn calls
34106
29:09:22,800 --> 29:09:29,832
this and this in turn calls this so it's
34107
29:09:25,512 --> 29:09:29,832
a it's a layer base it's three layers
34108
29:09:30,000 --> 29:09:33,440
okay so what we're going to do in here
34109
29:09:31,911 --> 29:09:36,551
we're also going to keep pulling up our
34110
29:09:33,440 --> 29:09:37,680
loading screen controller and so let's
34111
29:09:36,551 --> 29:09:38,800
go ahead and send loading screen
34112
29:09:37,679 --> 29:09:40,319
controller as you can see it's going to
34113
29:09:38,800 --> 29:09:41,832
also import it for me so i'm just going
34114
29:09:40,320 --> 29:09:43,680
to say loading screen controller and
34115
29:09:41,831 --> 29:09:46,871
let's just say it's optional
34116
29:09:43,679 --> 29:09:49,359
because we might not actually have it
34117
29:09:46,872 --> 29:09:51,832
and um then what we're gonna do in here
34118
29:09:49,360 --> 29:09:53,191
we're gonna have a function called show
34119
29:09:54,720 --> 29:09:58,479
then we're gonna have a few more
34120
29:09:56,320 --> 29:10:01,832
functions there that are gonna allow us
34121
29:09:58,479 --> 29:10:04,080
to control basically our loading screen
34122
29:10:01,831 --> 29:10:05,039
and i wonder which one is actually best
34123
29:10:09,039 --> 29:10:13,039
it could be that we should be working
34124
29:10:13,039 --> 29:10:17,360
show overlay function so let's go ahead
34125
29:10:15,119 --> 29:10:19,440
and do that so let's say that we are
34126
29:10:17,360 --> 29:10:22,479
going to have a function on our loading
34127
29:10:19,440 --> 29:10:25,832
screen um class and we're calling it
34128
29:10:22,479 --> 29:10:28,399
show overlay so and this show overlay is
34129
29:10:25,831 --> 29:10:30,159
then in turn going to return an instance
34130
29:10:28,399 --> 29:10:31,911
of loading screen controller so let's go
34131
29:10:30,160 --> 29:10:33,360
ahead and start writing that so loading
34132
29:10:36,080 --> 29:10:40,400
and this function has a two required
34133
29:10:38,872 --> 29:10:43,192
parameters so i'm going to put curly
34134
29:10:40,399 --> 29:10:44,959
bracket in here a curly bracket in here
34135
29:10:43,191 --> 29:10:47,679
and let's just say we need a build
34136
29:10:44,960 --> 29:10:49,440
context so build contacts and
34137
29:10:47,679 --> 29:10:52,399
it's going to auto import from material
34138
29:10:49,440 --> 29:10:54,320
so that's great build context
34139
29:10:52,399 --> 29:10:55,679
and require parameter build context and
34140
29:10:54,320 --> 29:10:57,912
i'm just going to call it context and
34141
29:10:55,679 --> 29:11:00,871
then upon you wanting to show an overlay
34142
29:10:57,911 --> 29:11:01,831
you also have to specify its text so
34143
29:11:01,831 --> 29:11:05,039
what we're saying in here is that an
34144
29:11:03,191 --> 29:11:07,360
overlay can't be displayed without an
34145
29:11:05,039 --> 29:11:09,360
actual text in it okay and remember
34146
29:11:07,360 --> 29:11:11,440
we're using the word overlay but in this
34147
29:11:09,360 --> 29:11:13,759
case our loading screen is going to have
34148
29:11:11,440 --> 29:11:16,320
a custom overlay with some material
34149
29:11:13,759 --> 29:11:18,959
components like a column and button etc
34150
29:11:16,320 --> 29:11:20,872
etc okay so show overlay in this case
34151
29:11:18,960 --> 29:11:23,040
means show the loading screen with this
34152
29:11:23,039 --> 29:11:27,119
so we call it that and then let's go
34153
29:11:25,191 --> 29:11:30,479
ahead and basically say this is a string
34154
29:11:27,119 --> 29:11:32,231
of text just like that okay
34155
29:11:32,232 --> 29:11:37,192
perfect so that's fine so now what we're
34156
29:11:34,399 --> 29:11:39,439
going to create now is um we're going to
34157
29:11:41,911 --> 29:11:46,800
new strings that are provided by this
34158
29:11:45,279 --> 29:11:48,551
controller remember we created this
34159
29:11:46,800 --> 29:11:50,720
thing so if someone updates the loading
34160
29:11:48,551 --> 29:11:52,551
screen text we're going to put those
34161
29:11:50,720 --> 29:11:55,191
strings inside a stream controller so
34162
29:11:52,551 --> 29:11:57,512
let's go ahead and create a final
34163
29:11:57,512 --> 29:12:04,551
so we'll say this is a stream controller
34164
29:12:00,000 --> 29:12:06,720
control controller of string okay
34165
29:12:04,551 --> 29:12:08,080
we just create that and it can't find
34166
29:12:06,720 --> 29:12:11,279
stream controller so i'm just going to
34167
29:12:08,080 --> 29:12:14,320
say import lib dart async so that's
34168
29:12:11,279 --> 29:12:16,800
another import um right here which you
34169
29:12:14,320 --> 29:12:18,480
might have to do by hand if you don't
34170
29:12:16,800 --> 29:12:20,551
have visual studio code or if you're not
34171
29:12:18,479 --> 29:12:22,399
using for instance a text editor or id
34172
29:12:20,551 --> 29:12:24,479
that can also import things for you
34173
29:12:22,399 --> 29:12:26,319
stream controller is available in dart
34174
29:12:26,320 --> 29:12:30,320
so then the first thing we're going to
34175
29:12:27,831 --> 29:12:32,000
do is to add the current text
34176
29:12:32,000 --> 29:12:36,160
our stream controller so this text
34177
29:12:34,399 --> 29:12:37,360
parameter that was provided to us we're
34178
29:12:36,160 --> 29:12:39,360
going to put it inside the stream
34179
29:12:40,399 --> 29:12:45,119
what we need to do is basically
34180
29:12:43,039 --> 29:12:47,119
use a new function that we haven't used
34181
29:12:45,119 --> 29:12:48,639
before which is called overlay of
34182
29:12:48,639 --> 29:12:52,551
if i look at if you look at the return
34183
29:12:50,551 --> 29:12:55,360
of this it will return something called
34184
29:12:52,551 --> 29:12:57,440
an overlay state and it says the state
34185
29:12:55,360 --> 29:13:00,320
from the closest instance of this class
34186
29:12:57,440 --> 29:13:03,040
that encloses the given context so we
34187
29:13:00,320 --> 29:13:05,440
need this state in order to be able to
34188
29:13:03,039 --> 29:13:08,000
display our overlay so let's just grab
34189
29:13:05,440 --> 29:13:09,512
this overlay of context and put it
34190
29:13:11,512 --> 29:13:15,911
and then what we're going to do is
34191
29:13:13,911 --> 29:13:17,440
since overlays are kind of displayed on
34192
29:13:15,911 --> 29:13:19,440
top of everything else that's on the
34193
29:13:17,440 --> 29:13:21,512
screen they don't have intrinsic sizes
34194
29:13:19,440 --> 29:13:22,720
as such so if you're using with if
34195
29:13:21,512 --> 29:13:24,232
you're using for instance material
34196
29:13:24,232 --> 29:13:27,760
various widgets inside your flutter
34197
29:13:26,000 --> 29:13:29,592
application if you create different
34198
29:13:27,759 --> 29:13:32,551
containers buttons they have some sort
34199
29:13:29,592 --> 29:13:35,192
of intrinsic size in them however with
34200
29:13:32,551 --> 29:13:35,911
overlays you kind of have to grab like
34201
29:13:35,911 --> 29:13:39,759
state of the current screen and what
34202
29:13:38,399 --> 29:13:41,831
components are displayed on and
34203
29:13:39,759 --> 29:13:43,279
available with the available height
34204
29:13:45,119 --> 29:13:50,639
to basically base our overlay on top of
34205
29:13:48,000 --> 29:13:52,320
so let's go ahead and grab our render
34206
29:13:52,320 --> 29:13:56,800
and i'm going to say using this context
34207
29:13:54,479 --> 29:13:59,191
and we're going to get find render
34208
29:13:59,592 --> 29:14:04,960
like this as a renderer box okay so
34209
29:14:03,360 --> 29:14:07,039
there's lots of documentation available
34210
29:14:04,960 --> 29:14:09,192
about what render box is but it is kind
34211
29:14:07,039 --> 29:14:11,679
of like low level and i'm not gonna go
34212
29:14:09,191 --> 29:14:13,191
into so much details about that but
34213
29:14:11,679 --> 29:14:15,039
let's go actually have a look a little
34214
29:14:13,191 --> 29:14:17,512
bit here as you can see it's a render
34215
29:14:15,039 --> 29:14:20,000
object and it is quite low level as i
34216
29:14:17,512 --> 29:14:21,512
mentioned inside rendering box and what
34217
29:14:20,000 --> 29:14:24,399
it will do it will allow you to
34218
29:14:21,512 --> 29:14:26,720
basically extract the available
34219
29:14:26,720 --> 29:14:31,191
have on the screen so let's go ahead and
34220
29:14:29,279 --> 29:14:33,279
create a final size in here and say
34221
29:14:33,279 --> 29:14:38,551
about size okay so that's that
34222
29:14:36,800 --> 29:14:42,160
then what we need to do we actually need
34223
29:14:38,551 --> 29:14:44,231
to now create our overlay so our overlay
34224
29:14:42,160 --> 29:14:46,000
and you may think oh this is the overlay
34225
29:14:44,232 --> 29:14:47,680
because we call it overlay here well
34226
29:14:46,000 --> 29:14:49,592
it's not really because the overlay is
34227
29:14:49,592 --> 29:14:55,040
in in this context that's overlay of
34228
29:14:55,039 --> 29:15:00,079
parent overlay uh context so
34229
29:14:57,911 --> 29:15:02,399
uh what you are going to create in your
34230
29:15:00,080 --> 29:15:06,080
application is actually called overlay
34231
29:15:02,399 --> 29:15:07,591
entry so um but when when we say we're
34232
29:15:06,080 --> 29:15:11,911
going to create an overlay what we
34233
29:15:07,592 --> 29:15:13,832
actually mean is an overlay entry okay
34234
29:15:11,911 --> 29:15:15,679
so let's go ahead and create an overlay
34235
29:15:13,831 --> 29:15:18,871
entry in here so we're gonna say final
34236
29:15:15,679 --> 29:15:21,039
overlay is overlay entry just like that
34237
29:15:18,872 --> 29:15:22,639
and then we have a builder function
34238
29:15:21,039 --> 29:15:24,399
now i'm gonna get visual studio code to
34239
29:15:22,639 --> 29:15:27,279
complete this it needs a context all
34240
29:15:24,399 --> 29:15:29,911
right so let's go in here now
34241
29:15:27,279 --> 29:15:32,080
overlays they don't have a parent like a
34242
29:15:29,911 --> 29:15:33,831
scaffold or anything so if you don't
34243
29:15:33,831 --> 29:15:37,191
like this component that you return from
34244
29:15:35,592 --> 29:15:38,480
your builder which should be a widget
34245
29:15:37,191 --> 29:15:40,720
let's go in here you can see it's a
34246
29:15:38,479 --> 29:15:42,959
widget if you don't wrap this inside
34247
29:15:40,720 --> 29:15:46,080
some sort of a material component such
34248
29:15:42,960 --> 29:15:47,680
as scaffold or material itself your
34249
29:15:46,080 --> 29:15:49,440
overlay is going to have horrible
34250
29:15:47,679 --> 29:15:52,639
styling because it's not going to have
34251
29:15:49,440 --> 29:15:53,680
any default system styling so excuse me
34252
29:15:52,639 --> 29:15:56,960
what we're going to do in here we're
34253
29:15:53,679 --> 29:15:58,959
going to return a material component
34254
29:15:56,960 --> 29:16:00,160
and material is going to allow you if
34255
29:16:00,160 --> 29:16:03,120
as a documentation of material it says
34256
29:16:04,720 --> 29:16:08,720
i mean okay um but what it basically
34257
29:16:07,191 --> 29:16:10,551
means it is actually let's have a look
34258
29:16:08,720 --> 29:16:11,440
at this code maybe that makes more sense
34259
29:16:11,440 --> 29:16:16,080
uh is a stateful widget so it will
34260
29:16:14,080 --> 29:16:18,160
create a stateful widget for you which
34261
29:16:16,080 --> 29:16:19,680
has some default styling so you can put
34262
29:16:18,160 --> 29:16:22,800
your components in there and they'll be
34263
29:16:19,679 --> 29:16:25,511
style according to the system skin okay
34264
29:16:22,800 --> 29:16:27,192
so let's say that we are going to give
34265
29:16:25,512 --> 29:16:29,279
the material which is going to cover the
34266
29:16:27,191 --> 29:16:30,231
entire screen this material component
34267
29:16:29,279 --> 29:16:32,399
that we're returning here is going to
34268
29:16:30,232 --> 29:16:34,480
cover the entire screen remember so
34269
29:16:32,399 --> 29:16:36,871
let's first paint the entire screen with
34270
29:16:34,479 --> 29:16:39,039
kind of like a dark color as you know
34271
29:16:36,872 --> 29:16:41,040
when you display like errors or
34272
29:16:39,039 --> 29:16:42,639
dialogues to the screen to the user
34273
29:16:41,039 --> 29:16:44,079
usually what they do is like they paint
34274
29:16:42,639 --> 29:16:46,319
the background the entire background
34275
29:16:44,080 --> 29:16:48,232
kind of like a dark color so then they
34276
29:16:46,320 --> 29:16:49,832
can display their dialogue in the middle
34277
29:16:48,232 --> 29:16:50,480
of the screen and kind of give it kind
34278
29:16:54,160 --> 29:16:58,080
elevation so it kind of it pops out of
34279
29:16:56,479 --> 29:16:59,512
the screen a little bit so what we're
34280
29:16:58,080 --> 29:17:01,440
going to do in here we're going to say
34281
29:16:59,512 --> 29:17:05,191
color the color of our material uh
34282
29:17:01,440 --> 29:17:08,960
staple widget in here is colors black
34283
29:17:08,960 --> 29:17:14,080
and then the child of our material then
34284
29:17:11,191 --> 29:17:16,639
it's gonna be a center okay so that's
34285
29:17:14,080 --> 29:17:18,551
what we're gonna create here so
34286
29:17:16,639 --> 29:17:20,960
let's then go in here and what we're
34287
29:17:18,551 --> 29:17:22,399
going to do is the child of this is
34288
29:17:20,960 --> 29:17:24,080
going to be container so i'm just going
34289
29:17:22,399 --> 29:17:28,159
to create a container here and then put
34290
29:17:24,080 --> 29:17:30,872
a semicolon there and it's happy now
34291
29:17:28,160 --> 29:17:33,512
so then our content container is gonna
34292
29:17:30,872 --> 29:17:35,192
place some constraints off on our
34293
29:17:33,512 --> 29:17:37,680
overlay so it's gonna say for instance
34294
29:17:35,191 --> 29:17:39,512
that its max width and height should be
34295
29:17:37,679 --> 29:17:41,119
a certain value so we haven't used this
34296
29:17:39,512 --> 29:17:42,639
before but we're gonna now use something
34297
29:17:41,119 --> 29:17:45,039
called constraints in here and you can
34298
29:17:42,639 --> 29:17:47,440
see the value of constraints is of type
34299
29:17:45,039 --> 29:17:50,159
box constraints so let's say constraints
34300
29:17:47,440 --> 29:17:53,360
and then we say box constraints okay so
34301
29:17:50,160 --> 29:17:55,911
we're going to start with max width
34302
29:17:53,360 --> 29:17:59,592
so then we're going to say size width
34303
29:17:55,911 --> 29:18:01,440
multiplied by zero at that eight and
34304
29:17:59,592 --> 29:18:02,320
what we're basically saying here saying
34305
29:18:02,320 --> 29:18:06,160
this dialogue that we're displaying to
34306
29:18:03,759 --> 29:18:08,319
the user is going to consume at most
34307
29:18:06,160 --> 29:18:10,480
eighty percent of the available widths
34308
29:18:08,320 --> 29:18:12,160
on the screen so this is our way of
34309
29:18:10,479 --> 29:18:13,591
creating some margins to the right and
34310
29:18:12,160 --> 29:18:15,592
left for those of you who are web
34311
29:18:13,592 --> 29:18:17,360
developers and are like know about
34312
29:18:17,360 --> 29:18:20,639
and even if you're a web even if you're
34313
29:18:19,119 --> 29:18:22,639
a designer you'll probably know already
34314
29:18:20,639 --> 29:18:25,512
about margin so what we're saying is
34315
29:18:22,639 --> 29:18:27,759
that this container needs to wrap itself
34316
29:18:25,512 --> 29:18:30,000
around its contents but if the contents
34317
29:18:27,759 --> 29:18:31,039
grow it's gonna go at most eighty
34318
29:18:31,039 --> 29:18:36,231
of the available width and this width is
34319
29:18:33,440 --> 29:18:38,232
coming from our render box okay
34320
29:18:36,232 --> 29:18:40,232
so that's that and we're gonna do the
34321
29:18:38,232 --> 29:18:44,639
same thing with max height so we're
34322
29:18:40,232 --> 29:18:46,232
going to say size height multiplied 0.8
34323
29:18:44,639 --> 29:18:49,911
and then we're going to give it a min
34324
29:18:46,232 --> 29:18:52,000
width of size with multiply 0.5 so we're
34325
29:18:49,911 --> 29:18:55,191
going to say at least it should it
34326
29:18:52,000 --> 29:18:57,279
should grab um half of the screen width
34327
29:18:57,279 --> 29:19:00,080
then let's give it some decoration so
34328
29:18:58,872 --> 29:19:02,800
we're going to say this is box
34329
29:19:00,080 --> 29:19:05,040
decoration so let's go in here
34330
29:19:02,800 --> 29:19:08,232
and so this is just to give it some um
34331
29:19:05,039 --> 29:19:09,360
border so uh usually dialogues or in
34332
29:19:08,232 --> 29:19:10,960
this case an overlay that we're
34333
29:19:09,360 --> 29:19:13,831
displaying to use or they have some sort
34334
29:19:10,960 --> 29:19:16,320
of a border so it creates this kind of
34335
29:19:13,831 --> 29:19:18,319
like a beautiful elevation so if this is
34336
29:19:16,320 --> 29:19:21,832
the dark background in here which we
34337
29:19:18,320 --> 29:19:25,040
created with black of alpha 150 then we
34338
29:19:21,831 --> 29:19:26,959
have an arc basically overlaying here or
34339
29:19:25,039 --> 29:19:29,119
overlay um we call it here as you can
34340
29:19:26,960 --> 29:19:30,400
see overlay entry then the overlay entry
34341
29:19:29,119 --> 29:19:32,319
will be placed here but it will have
34342
29:19:32,320 --> 29:19:35,912
separate it from the background okay so
34343
29:19:34,320 --> 29:19:38,800
this is just a technique to separate our
34344
29:19:35,911 --> 29:19:40,319
overlay from the background
34345
29:19:38,800 --> 29:19:42,720
so we're going to say the border is
34346
29:19:42,720 --> 29:19:47,831
our sorry color is white and then we're
34347
29:19:45,191 --> 29:19:50,479
going to say it has a border radius
34348
29:19:50,479 --> 29:19:54,679
all these documentations on the screen
34349
29:19:52,080 --> 29:19:57,360
are just driving me crazy and border
34350
29:19:54,679 --> 29:20:01,591
radius.circular and let's just give it a
34351
29:19:57,360 --> 29:20:01,592
circle value of 10 in here okay
34352
29:20:02,399 --> 29:20:06,959
sometimes documentation is just
34353
29:20:07,039 --> 29:20:10,399
so let's stand in here as you can see
34354
29:20:08,720 --> 29:20:12,399
now we have an empty container we should
34355
29:20:10,399 --> 29:20:14,639
never do that so let's go in here and
34356
29:20:12,399 --> 29:20:17,039
just create a child for it so the child
34357
29:20:14,639 --> 29:20:19,592
in here is going to be a padding
34358
29:20:17,039 --> 29:20:22,551
so um or maybe we could just say single
34359
29:20:22,551 --> 29:20:27,039
and then i'm gonna embed the single
34360
29:20:24,872 --> 29:20:28,800
child scroll view inside padding that's
34361
29:20:27,039 --> 29:20:30,319
that's my preferred way of doing this so
34362
29:20:28,800 --> 29:20:32,551
just like that and let's just give it
34363
29:20:32,551 --> 29:20:36,551
so the reason that the child of this
34364
29:20:34,639 --> 29:20:38,872
padding that we created here is a single
34365
29:20:36,551 --> 29:20:41,831
child scroll view is as you remember we
34366
29:20:38,872 --> 29:20:44,232
said the max height of our overlay entry
34367
29:20:41,831 --> 29:20:45,679
is 80 of the available height on the
34368
29:20:49,360 --> 29:20:53,039
your just your application display on a
34369
29:20:53,039 --> 29:20:58,551
then you're displaying a lot of text
34370
29:20:55,512 --> 29:21:01,040
well if you don't put your contents in
34371
29:20:58,551 --> 29:21:03,440
the entire contents of your material
34372
29:21:01,039 --> 29:21:05,360
widget inside a single child scroll view
34373
29:21:03,440 --> 29:21:07,760
then your content is going to be
34374
29:21:05,360 --> 29:21:10,479
basically chopped so the users are not
34375
29:21:07,759 --> 29:21:12,399
going to see the content in its entirety
34376
29:21:10,479 --> 29:21:15,512
and what single chat scroll view does is
34377
29:21:12,399 --> 29:21:17,360
that it tries to not scroll its contents
34378
29:21:15,512 --> 29:21:19,911
if the content has enough space to be
34379
29:21:17,360 --> 29:21:22,479
displayed on the container but if the
34380
29:21:19,911 --> 29:21:24,160
contents overflows the container's
34381
29:21:22,479 --> 29:21:27,191
height for instance then it's going to
34382
29:21:24,160 --> 29:21:29,760
allow the user to scroll on that
34383
29:21:27,191 --> 29:21:31,591
container so it it works perfectly trust
34384
29:21:31,592 --> 29:21:35,680
so let's go in here and then go and
34385
29:21:34,080 --> 29:21:37,680
inside the single chart scroll view
34386
29:21:35,679 --> 29:21:39,511
create a child and in here we're going
34387
29:21:39,512 --> 29:21:44,720
and our main axis size is going to be
34388
29:21:44,720 --> 29:21:48,639
main axis size of minimum because
34389
29:21:47,119 --> 29:21:50,319
remember if you don't give a main
34390
29:21:48,639 --> 29:21:52,160
exercise a minimum pure column your
34391
29:21:50,320 --> 29:21:54,480
column is going to grab as much space as
34392
29:21:52,160 --> 29:21:56,639
it can so it's just going to expand as
34393
29:21:54,479 --> 29:21:58,639
much as it can and if you say main
34394
29:21:56,639 --> 29:22:00,960
exercise is minimum it's just gonna
34395
29:22:00,960 --> 29:22:04,872
hug its contents as much as it can
34396
29:22:05,119 --> 29:22:10,479
and then we're gonna say main access
34397
29:22:07,440 --> 29:22:14,080
alignment is main access alignment of
34398
29:22:10,479 --> 29:22:18,551
center so it's also going to place its
34399
29:22:14,080 --> 29:22:18,551
contents vertically in the center okay
34400
29:22:19,039 --> 29:22:23,511
then what we're going to do in here in
34401
29:22:21,512 --> 29:22:25,911
column children so let's go in here and
34402
29:22:23,512 --> 29:22:29,440
say children then let's create a size
34403
29:22:25,911 --> 29:22:32,319
box um and give it a height of 10 so
34404
29:22:29,440 --> 29:22:35,440
we're creating some top margin from
34405
29:22:32,320 --> 29:22:36,800
um from top of the column so this is
34406
29:22:35,440 --> 29:22:39,360
saying that we have a column we're going
34407
29:22:36,800 --> 29:22:40,639
to put some stuff in it but give it 10
34408
29:22:40,639 --> 29:22:44,551
emptiness on top so it just creates a
34409
29:22:42,399 --> 29:22:46,231
little bit of a margin okay and look i
34410
29:22:44,551 --> 29:22:48,800
fully understand that this is a lot of
34411
29:22:46,232 --> 29:22:50,160
abstract stuff it would be a lot nicer
34412
29:22:48,800 --> 29:22:51,120
if you could actually see this on the
34413
29:22:51,119 --> 29:22:54,000
but sometimes when you're programming
34414
29:22:52,551 --> 29:22:55,831
especially in flutter since it's so
34415
29:22:54,000 --> 29:22:58,000
declarative then you have to kind of use
34416
29:22:55,831 --> 29:22:59,591
your imagination on how this thing is
34417
29:22:58,000 --> 29:23:00,960
actually going to look like on the
34418
29:23:01,759 --> 29:23:06,799
you could do a lot of experiments and
34419
29:23:04,399 --> 29:23:08,319
test this for your for yourself and just
34420
29:23:06,800 --> 29:23:10,000
maybe just even do this don't do
34421
29:23:08,320 --> 29:23:11,592
anything more than this just use a size
34422
29:23:10,000 --> 29:23:13,279
block on the size box on the screen and
34423
29:23:11,592 --> 29:23:16,960
just display it overlay and see how it
34424
29:23:13,279 --> 29:23:19,119
looks like that also works okay
34425
29:23:16,960 --> 29:23:20,960
and right after this let's go and create
34426
29:23:20,960 --> 29:23:25,912
our const of circular progress indicator
34427
29:23:23,911 --> 29:23:27,512
so that's going to be a little indicator
34428
29:23:25,911 --> 29:23:29,360
that sits there and displays that
34429
29:23:29,360 --> 29:23:33,191
and then we're going to give it another
34430
29:23:31,039 --> 29:23:35,759
size box with a height of maybe this
34431
29:23:33,191 --> 29:23:37,440
time actually 20 and so this creates a
34432
29:23:37,440 --> 29:23:41,512
and then what we're doing in here we
34433
29:23:41,512 --> 29:23:45,760
and but that text could change because
34434
29:23:44,000 --> 29:23:47,592
that text is placed inside the stream
34435
29:23:45,759 --> 29:23:50,000
controller so we're not going to use a
34436
29:23:47,592 --> 29:23:51,040
stream builder so let's say stream
34437
29:24:00,831 --> 29:24:05,439
there so what we need to do basically is
34438
29:24:03,759 --> 29:24:07,911
to grab the stream from the stream
34439
29:24:05,440 --> 29:24:09,832
controller and use it inside our stream
34440
29:24:07,911 --> 29:24:12,160
builder and then i'm going to help from
34441
29:24:09,831 --> 29:24:15,831
visual studio coding here and say that
34442
29:24:12,160 --> 29:24:17,760
the builder function should be like
34443
29:24:15,831 --> 29:24:20,159
and if you remember we could use a
34444
29:24:20,160 --> 29:24:25,279
getter on our snapshot that says has
34445
29:24:22,551 --> 29:24:28,231
data so let's say return or sorry um you
34446
29:24:25,279 --> 29:24:31,592
say if snapshot has data then we're
34447
29:24:28,232 --> 29:24:34,800
going to return a text in here okay
34448
29:24:31,592 --> 29:24:36,872
and the text basically is it's the text
34449
29:24:34,800 --> 29:24:40,232
of the text widget is going to be the
34450
29:24:36,872 --> 29:24:41,760
snapshots data as string we know that it
34451
29:24:41,759 --> 29:24:45,911
and also we are going to give it a text
34452
29:24:43,512 --> 29:24:47,832
alignment of text align in the center
34453
29:24:47,831 --> 29:24:51,759
so that's that part and let's put a
34454
29:24:51,759 --> 29:24:55,511
and also we're we're getting this error
34455
29:24:53,592 --> 29:24:58,000
right now because we're not returning a
34456
29:24:55,512 --> 29:24:59,911
widget in all the available paths inside
34457
29:24:58,000 --> 29:25:01,360
this builder and we have to put an else
34458
29:25:01,360 --> 29:25:07,279
and otherwise we just can return a
34459
29:25:03,592 --> 29:25:09,192
container as you can see in here okay so
34460
29:25:07,279 --> 29:25:11,191
since we have to return something we
34461
29:25:09,191 --> 29:25:12,639
could just return an empty container for
34462
29:25:12,639 --> 29:25:16,720
i mean you could also solve this in
34463
29:25:14,551 --> 29:25:19,759
another way for instance say okay if the
34464
29:25:16,720 --> 29:25:21,911
snapshot has data i'm going to return a
34465
29:25:19,759 --> 29:25:24,231
text like this or otherwise i'm going to
34466
29:25:24,232 --> 29:25:28,552
like an empty text like this
34467
29:25:26,639 --> 29:25:30,551
you could also try to do that but right
34468
29:25:28,551 --> 29:25:33,440
now we're just leaving it as returning a
34469
29:25:43,279 --> 29:25:47,592
fold this that we created in here which
34470
29:25:45,279 --> 29:25:49,119
is our overlay we've just created the
34471
29:25:47,592 --> 29:25:51,512
overlay that doesn't mean that we're
34472
29:25:49,119 --> 29:25:53,911
displaying it so the way to display an
34473
29:25:51,512 --> 29:25:57,440
overlay is to use that overlay of which
34474
29:25:53,911 --> 29:26:00,872
created an overlay state and say insert
34475
29:25:57,440 --> 29:26:03,680
overlay okay so this actually adds our
34476
29:26:00,872 --> 29:26:07,680
overlay to the entire overlay state that
34477
29:26:03,679 --> 29:26:09,679
flutter manages on the screen so
34478
29:26:07,679 --> 29:26:12,399
so now we've done that so what we need
34479
29:26:09,679 --> 29:26:13,591
to do then upon upon this happening we
34480
29:26:13,592 --> 29:26:18,480
take our return statement and that's why
34481
29:26:18,479 --> 29:26:21,591
basically loading screen dart file here
34482
29:26:20,160 --> 29:26:24,000
in visual studio code depending
34483
29:26:21,592 --> 29:26:25,832
depending on your editor or id that
34484
29:26:24,000 --> 29:26:27,512
you're using you may or may not see this
34485
29:26:25,831 --> 29:26:29,360
screen as having an error but if you
34486
29:26:27,512 --> 29:26:31,832
scroll up in here it basically tells you
34487
29:26:29,360 --> 29:26:33,592
that well you're not returning what you
34488
29:26:31,831 --> 29:26:35,511
said you should return so let's go in
34489
29:26:33,592 --> 29:26:36,800
here and create an instance of loading
34490
29:26:39,440 --> 29:26:43,760
and we have to take care of the close
34491
29:26:41,679 --> 29:26:45,591
and we have to also take care of the
34492
29:26:43,759 --> 29:26:48,000
update but let's take care of closed
34493
29:26:45,592 --> 29:26:50,160
first so it's an empty function
34494
29:26:48,000 --> 29:26:51,911
and the only thing it should do is to
34495
29:26:50,160 --> 29:26:53,680
have a look at our stream controller and
34496
29:26:53,679 --> 29:26:57,439
and then we have we go to our overlay
34497
29:26:55,911 --> 29:27:00,160
that we just created and basically
34498
29:27:00,160 --> 29:27:05,440
and also we just say yeah we returned
34499
29:27:03,279 --> 29:27:07,191
through from this okay and now we're
34500
29:27:05,440 --> 29:27:08,800
getting an error in here saying update
34501
29:27:07,191 --> 29:27:10,479
it's not provided so let's go ahead and
34502
29:27:08,800 --> 29:27:13,120
create update as well and if you
34503
29:27:10,479 --> 29:27:15,360
remember from update uh what it does it
34504
29:27:13,119 --> 29:27:16,799
actually takes the string as a parameter
34505
29:27:16,800 --> 29:27:20,872
in here the only thing we have to do is
34506
29:27:18,320 --> 29:27:22,160
to add that to our stream controller so
34507
29:27:20,872 --> 29:27:23,911
i just noticed that you can't see the
34508
29:27:23,911 --> 29:27:27,759
let's add that and just return true and
34509
29:27:26,232 --> 29:27:30,000
to be honest with you you could just say
34510
29:27:27,759 --> 29:27:32,399
well let's just not return any value in
34511
29:27:30,000 --> 29:27:33,592
here you could do that as well but i
34512
29:27:33,592 --> 29:27:38,872
um function signatures so that you can
34513
29:27:35,759 --> 29:27:39,591
also indicate an error to the call site
34514
29:27:39,592 --> 29:27:44,000
you may try to get rid of these
34515
29:27:42,160 --> 29:27:45,120
yeah let's go ahead and do that if you
34516
29:27:44,000 --> 29:27:47,679
want to but i'm just going to leave it
34517
29:27:45,119 --> 29:27:49,759
like this in case we want to extend this
34518
29:27:47,679 --> 29:27:54,079
functionality in the future so that we
34519
29:27:49,759 --> 29:27:54,080
can return false if things go wrong okay
34520
29:27:54,232 --> 29:28:00,400
all right that was the uh let's say that
34521
29:27:56,960 --> 29:28:02,960
was our show overlay function so that's
34522
29:28:02,960 --> 29:28:06,160
let's then go ahead and create a
34523
29:28:04,720 --> 29:28:08,479
function in here that we're going to
34524
29:28:06,160 --> 29:28:11,120
call also height now we have show let's
34525
29:28:11,119 --> 29:28:16,159
so let's just say void hide like this
34526
29:28:14,551 --> 29:28:18,231
and what we're gonna do in here we're
34527
29:28:16,160 --> 29:28:20,400
gonna take our controller like this and
34528
29:28:18,232 --> 29:28:22,552
if it's there we're just gonna say close
34529
29:28:20,399 --> 29:28:24,079
okay remember close the way it was
34530
29:28:24,080 --> 29:28:27,191
closes the stream controller for text
34531
29:28:25,679 --> 29:28:29,439
and it also removes the overlay and
34532
29:28:27,191 --> 29:28:31,360
returns true so that's gonna if there is
34533
29:28:29,440 --> 29:28:33,279
a controller available on the screen
34534
29:28:31,360 --> 29:28:36,232
then it's gonna return that okay sorry
34535
29:28:36,872 --> 29:28:40,872
so um and also we're just gonna say
34536
29:28:42,960 --> 29:28:47,832
so and the point for us is that to show
34537
29:28:45,279 --> 29:28:49,279
to use this function internally remember
34538
29:28:47,831 --> 29:28:51,759
this this function is going to return
34539
29:28:49,279 --> 29:28:54,800
this loading screen controller which
34540
29:28:51,759 --> 29:28:56,231
we are soon going to place inside this
34541
29:28:54,800 --> 29:28:58,160
controller variable at the moment
34542
29:28:56,232 --> 29:29:00,960
control variable is always basically
34543
29:29:01,592 --> 29:29:05,832
all right that's great stuff so now
34544
29:29:03,512 --> 29:29:07,760
we've taken our taking care of hide so
34545
29:29:05,831 --> 29:29:11,191
now that we have hide let's go and
34546
29:29:07,759 --> 29:29:13,360
create show so we say show and then we
34547
29:29:13,360 --> 29:29:18,800
two required parameters so let's say
34548
29:29:15,191 --> 29:29:19,831
required build context build context
34549
29:29:19,831 --> 29:29:24,000
and then we say required string text
34550
29:29:22,399 --> 29:29:25,831
okay so anybody calling this function
34551
29:29:24,000 --> 29:29:27,592
has to provide these two parameters and
34552
29:29:25,831 --> 29:29:29,831
they're very familiar because they are
34553
29:29:27,592 --> 29:29:31,912
the parameters needed by show overlay
34554
29:29:31,911 --> 29:29:37,039
so let's go in here and we say if we
34555
29:29:33,759 --> 29:29:39,191
have a controller um if we can actually
34556
29:29:37,039 --> 29:29:41,511
use this controller's update function in
34557
29:29:41,512 --> 29:29:47,592
and we pass the text in here or false
34558
29:29:44,800 --> 29:29:49,760
so now you probably are like starting to
34559
29:29:47,592 --> 29:29:51,680
see why i'm returning true from this
34560
29:29:49,759 --> 29:29:53,591
function and that's because well if you
34561
29:29:51,679 --> 29:29:55,511
don't have a controller then you can't
34562
29:30:00,080 --> 29:30:03,360
code you have to write shorter because
34563
29:30:01,911 --> 29:30:04,479
otherwise you'd have to do like this if
34564
29:30:05,911 --> 29:30:09,911
then you would have to update but in
34565
29:30:08,000 --> 29:30:11,831
here we're just saying either update the
34566
29:30:15,679 --> 29:30:19,279
if we could update the controller's x we
34567
29:30:17,592 --> 29:30:20,960
just return because that means well we
34568
29:30:19,279 --> 29:30:23,039
already have a controller on the screen
34569
29:30:20,960 --> 29:30:26,000
a an overlay controller so we could
34570
29:30:23,039 --> 29:30:27,679
update its text so show should just
34571
29:30:26,000 --> 29:30:30,872
return right after that it shouldn't
34572
29:30:27,679 --> 29:30:32,959
display a new um overlay otherwise we
34573
29:30:30,872 --> 29:30:34,960
create and we basically create a new
34574
29:30:32,960 --> 29:30:37,040
overlay using this show overlay and
34575
29:30:34,960 --> 29:30:39,592
assign it to our controller
34576
29:30:37,039 --> 29:30:41,360
our property on top so we say this is
34577
29:30:45,119 --> 29:30:50,231
all right fantastic so that's pretty
34578
29:30:46,960 --> 29:30:52,160
much all we have to do and for our
34579
29:30:50,232 --> 29:30:54,080
loading screen.dart file so we could
34580
29:30:52,160 --> 29:30:58,232
just save this and i'm just going to
34581
29:30:54,080 --> 29:30:58,232
save this file as well and close it
34582
29:30:58,399 --> 29:31:03,119
so let's talk a little bit about our um
34583
29:31:04,320 --> 29:31:09,120
and if you remember from our off state
34584
29:31:07,279 --> 29:31:11,831
and for instance here we have off state
34585
29:31:09,119 --> 29:31:14,000
logged out and that has a has is loading
34586
29:31:11,831 --> 29:31:15,911
um property in here but if you look at
34587
29:31:14,000 --> 29:31:18,080
for instance needs verification or
34588
29:31:18,080 --> 29:31:24,960
they don't have is loading so
34589
29:31:21,592 --> 29:31:28,320
what if we added is loading to a higher
34590
29:31:24,960 --> 29:31:30,080
level here to our off state so any off
34591
29:31:28,320 --> 29:31:32,720
state in our application could
34592
29:31:30,080 --> 29:31:35,440
potentially be in the loading state as
34593
29:31:32,720 --> 29:31:38,232
well so that means registering could be
34594
29:31:35,440 --> 29:31:41,592
loading logging could be loading whoever
34595
29:31:38,232 --> 29:31:43,120
wants to could have loading
34596
29:31:41,592 --> 29:31:44,800
and that's exactly what we're gonna do
34597
29:31:43,119 --> 29:31:47,191
now so i'm going to go to my notes as
34598
29:31:47,191 --> 29:31:51,759
let's go ahead and add these
34599
29:31:49,679 --> 29:31:53,759
parameters that we have at the bottom of
34600
29:31:51,759 --> 29:31:55,759
the screen to our off state okay so i'm
34601
29:31:58,320 --> 29:32:05,120
and also let's say final string
34602
29:32:01,360 --> 29:32:05,119
loading text something like this
34603
29:32:07,360 --> 29:32:10,479
undefine class build sorry about that i
34604
29:32:09,279 --> 29:32:14,080
just programmed so many different
34605
29:32:10,479 --> 29:32:15,591
languages um at final and they're so so
34606
29:32:14,080 --> 29:32:17,512
different every language is kind of like
34607
29:32:15,592 --> 29:32:19,360
they have their own data types and
34608
29:32:17,512 --> 29:32:21,760
typescript has their own lowercase data
34609
29:32:21,759 --> 29:32:25,360
it's just a mishmash of various
34610
29:32:23,191 --> 29:32:27,512
different types i just wish we could get
34611
29:32:25,360 --> 29:32:29,279
along and have like one standard for all
34612
29:32:27,512 --> 29:32:31,360
data types at least the primary data
34613
29:32:31,360 --> 29:32:35,279
but that's just wishful thinking maybe i
34614
29:32:33,360 --> 29:32:38,479
digress let's go ahead and add these
34615
29:32:38,479 --> 29:32:42,399
and let's go ahead and do this make
34616
29:32:40,080 --> 29:32:45,191
these required parameters so we say it's
34617
29:32:42,399 --> 29:32:47,759
it should uh this should be provided is
34618
29:32:45,191 --> 29:32:49,911
loading but the loading text doesn't
34619
29:32:47,759 --> 29:32:52,080
need to be provided we'll always have a
34620
29:32:49,911 --> 29:32:54,160
default we'll say please wait a moment
34621
29:32:54,160 --> 29:32:58,400
uh and we should close this have i not
34622
29:33:00,479 --> 29:33:06,479
so that's adding these two parameters to
34623
29:33:03,039 --> 29:33:11,039
our um auth state and loading text
34624
29:33:06,479 --> 29:33:11,039
always has a default string okay
34625
29:33:11,191 --> 29:33:16,159
so let's go ahead to auth state
34626
29:33:13,440 --> 29:33:18,551
uninitialized and add is loading in here
34627
29:33:18,551 --> 29:33:23,360
bool is loading so now that we've done
34628
29:33:20,479 --> 29:33:24,720
that we should actually you see now what
34629
29:33:23,360 --> 29:33:26,551
we're getting in here is saying that
34630
29:33:24,720 --> 29:33:28,551
wait you're not calling your super
34631
29:33:26,551 --> 29:33:30,000
because it's a super has this is loading
34632
29:33:28,551 --> 29:33:31,591
parameter in here that you need to
34633
29:33:30,000 --> 29:33:33,512
provide because it's required but you're
34634
29:33:31,592 --> 29:33:35,279
not doing that so let's go ahead and
34635
29:33:33,512 --> 29:33:37,592
actually add that parameter to our cells
34636
29:33:37,592 --> 29:33:42,232
and what we're doing here which is
34637
29:33:38,960 --> 29:33:46,960
called super and we say is loading is is
34638
29:33:42,232 --> 29:33:49,440
loading as is provided to us okay
34639
29:33:46,960 --> 29:33:51,912
so that's for uninitialized
34640
29:33:49,440 --> 29:33:54,000
um now let's go to registering and do
34641
29:33:51,911 --> 29:33:56,720
the same thing in in there so we're
34642
29:33:54,000 --> 29:33:59,759
going to say for registering we actually
34643
29:33:56,720 --> 29:34:02,479
have exception required so let's make
34644
29:34:02,479 --> 29:34:06,551
is loading required so it is loading
34645
29:34:06,551 --> 29:34:12,231
okay and let's call super is loading is
34646
29:34:19,831 --> 29:34:24,871
auth states logged in at the moment
34647
29:34:22,232 --> 29:34:26,480
we're getting taking the user
34648
29:34:24,872 --> 29:34:28,160
and you see i'm making these parameters
34649
29:34:28,160 --> 29:34:31,192
if you don't make them required as soon
34650
29:34:29,592 --> 29:34:33,040
as you go to two parameters three
34651
29:34:31,191 --> 29:34:34,319
parameters for creating a cons for
34652
29:34:34,320 --> 29:34:37,832
an object using this initializer then
34653
29:34:36,479 --> 29:34:39,440
things start to get messy because
34654
29:34:37,831 --> 29:34:42,000
they're not named parameters otherwise
34655
29:34:39,440 --> 29:34:44,400
so passing three unnamed parameters to
34656
29:34:42,000 --> 29:34:47,039
an initializer to me is just it's just a
34657
29:34:44,399 --> 29:34:48,720
little bit difficult to understand so
34658
29:34:47,039 --> 29:34:50,319
that's why we're making them required
34659
29:34:50,320 --> 29:34:53,592
so let's go in here and make this also
34660
29:34:53,592 --> 29:34:58,639
name parameter required if i can spell
34661
29:34:58,639 --> 29:35:03,440
and then i'm gonna say required uh bool
34662
29:35:03,440 --> 29:35:09,592
uh required bull is loading all right
34663
29:35:07,512 --> 29:35:12,320
like that and then let's call super is
34664
29:35:09,592 --> 29:35:17,440
loading with is loading all right
34665
29:35:12,320 --> 29:35:19,832
so that's for off state logged in
34666
29:35:17,440 --> 29:35:22,232
now we need to also think about off
34667
29:35:19,831 --> 29:35:24,231
state needs a verification and we're
34668
29:35:22,232 --> 29:35:25,911
just gonna take is loading in there as
34669
29:35:25,911 --> 29:35:29,679
so let's go ahead and say needs
34670
29:35:27,911 --> 29:35:31,119
verification also has a required
34671
29:35:31,119 --> 29:35:34,871
bool is loading and we're gonna do the
34672
29:35:33,119 --> 29:35:36,799
same thing super is loading it is
34673
29:35:34,872 --> 29:35:39,512
loading so all we're doing is that we're
34674
29:35:36,800 --> 29:35:42,320
making sure that every state has and is
34675
29:35:39,512 --> 29:35:44,551
loading and that is loading is passed to
34676
29:35:42,320 --> 29:35:46,720
the super class called off state all
34677
29:35:46,720 --> 29:35:51,279
and then we need to take care of also
34678
29:35:48,551 --> 29:35:52,159
our off state logged out so
34679
29:35:52,160 --> 29:35:55,040
you see at the moment we have a little
34680
29:35:53,592 --> 29:35:57,832
problem in here and it says don't
34681
29:35:55,039 --> 29:35:59,591
overwrite fields thank you dart and that
34682
29:35:57,831 --> 29:36:01,360
means basically it's loading is already
34683
29:35:59,592 --> 29:36:03,279
implemented on the super class so we
34684
29:36:01,360 --> 29:36:05,911
could just safely remove it from here
34685
29:36:05,911 --> 29:36:10,551
is loading and actually required bull
34686
29:36:10,551 --> 29:36:18,319
and also we take in a string of um our
34687
29:36:20,639 --> 29:36:23,759
now that that is like that we're just
34688
29:36:22,000 --> 29:36:25,679
gonna call super and say is loading is
34689
29:36:23,759 --> 29:36:29,191
equal to is loading and then loading
34690
29:36:25,679 --> 29:36:33,679
text is loading text just like that okay
34691
29:36:29,191 --> 29:36:33,679
and then put a comma at the end of this
34692
29:36:33,759 --> 29:36:37,759
perfect all right so that is basically
34693
29:36:35,911 --> 29:36:40,000
saying that we may want to customize the
34694
29:36:37,759 --> 29:36:41,831
off state logged out loading text
34695
29:36:40,000 --> 29:36:44,080
because we're taking it in and then
34696
29:36:41,831 --> 29:36:46,159
passing it up to the super whereas the
34697
29:36:44,080 --> 29:36:47,759
others are not allowing us at the moment
34698
29:36:47,759 --> 29:36:51,591
loading text so that's why we have
34699
29:36:49,592 --> 29:36:53,360
string loading text only for off state
34700
29:36:51,592 --> 29:36:55,760
locked out and not for the other classes
34701
29:36:58,551 --> 29:37:01,759
so that's that so we've already
34702
29:37:00,320 --> 29:37:03,912
basically taken care of this caption as
34703
29:37:01,759 --> 29:37:08,551
well so we've added loading text to our
34704
29:37:08,720 --> 29:37:14,960
so now we need to save this file and
34705
29:37:10,720 --> 29:37:16,800
just go back to our off block in here
34706
29:37:14,960 --> 29:37:18,872
and you can see now we have a little bit
34707
29:37:16,800 --> 29:37:21,440
of a problem in here so let me also go
34708
29:37:18,872 --> 29:37:22,720
to my notes so i can bring up my notes
34709
29:37:25,279 --> 29:37:29,191
auth state uninitialized in here and
34710
29:37:27,360 --> 29:37:32,232
what we need to do is say when the
34711
29:37:29,191 --> 29:37:33,759
application opens when you the
34712
29:37:32,232 --> 29:37:35,279
absolute initial state of the
34713
29:37:33,759 --> 29:37:37,439
application should be in the loading
34714
29:37:35,279 --> 29:37:39,279
state so we should say it's loading true
34715
29:37:39,279 --> 29:37:43,440
so that's that part we taking care of
34716
29:37:43,440 --> 29:37:47,191
so i need to what we need to do now is
34717
29:37:45,279 --> 29:37:50,551
to take care of as you say update off
34718
29:37:47,191 --> 29:37:52,639
state logged out in off block so
34719
29:37:55,039 --> 29:38:00,639
and we can have a look in here let's see
34720
29:37:57,831 --> 29:38:02,720
if we have logged out anywhere yes and
34721
29:38:00,639 --> 29:38:05,279
it says add is loading true to off state
34722
29:38:05,279 --> 29:38:10,551
so um i'm gonna have a look here and see
34723
29:38:08,000 --> 29:38:12,479
if we can actually find that so that's
34724
29:38:14,080 --> 29:38:17,911
and that's fine and then what we're
34725
29:38:15,911 --> 29:38:19,039
gonna do in here we're gonna say loading
34726
29:38:19,039 --> 29:38:25,759
and let's say please wait while i log
34727
29:38:22,320 --> 29:38:25,760
you in something like this okay
34728
29:38:25,831 --> 29:38:30,720
that's off state logged out that's the
34729
29:38:27,911 --> 29:38:32,800
first thing that we have to do and let's
34730
29:38:30,720 --> 29:38:34,800
see where else we're using off state
34731
29:38:36,960 --> 29:38:42,232
yes and that's fine that's fine
34732
29:38:40,320 --> 29:38:45,832
so maybe that was the only place that we
34733
29:38:42,232 --> 29:38:48,160
actually had to update our log state uh
34734
29:38:48,160 --> 29:38:53,040
i don't think we have anywhere else that
34735
29:38:50,000 --> 29:38:55,360
off state logged out has to be set to
34736
29:38:53,039 --> 29:38:57,360
true except for when we're actually
34737
29:38:57,360 --> 29:39:02,872
and i believe that we've done that now
34738
29:38:59,360 --> 29:39:04,960
so off state logged out is there with is
34739
29:39:02,872 --> 29:39:07,911
loading true there so that's that's the
34740
29:39:04,960 --> 29:39:09,440
only thing we have to do okay
34741
29:39:07,911 --> 29:39:12,720
the next thing that we have to do is to
34742
29:39:09,440 --> 29:39:15,360
add is loading to other states in off
34743
29:39:12,720 --> 29:39:18,232
block so let's start from where we're
34744
29:39:15,360 --> 29:39:20,872
getting all these errors so we have
34745
29:39:18,232 --> 29:39:23,832
excuse me off event initialize so i'm
34746
29:39:20,872 --> 29:39:26,479
going to find that in my notes in here
34747
29:39:23,831 --> 29:39:28,231
and in these cases when we're emitting
34748
29:39:26,479 --> 29:39:30,159
auth state needs verification we should
34749
29:39:28,232 --> 29:39:31,120
just say is loading false because you
34750
29:39:31,119 --> 29:39:34,799
when we actually end up in this state
34751
29:39:33,039 --> 29:39:36,319
we're not loading anything we've already
34752
29:39:34,800 --> 29:39:37,680
done the work that we were supposed to
34753
29:39:37,679 --> 29:39:43,511
and that's sufficient basically in here
34754
29:39:41,360 --> 29:39:45,512
so here we have the user so now this is
34755
29:39:43,512 --> 29:39:46,800
a required parameter named parameter so
34756
29:39:45,512 --> 29:39:48,960
it has its user and then we're going to
34757
29:39:48,960 --> 29:39:52,872
and in here we're going to say false as
34758
29:39:50,639 --> 29:39:54,399
well so command here to make the code
34759
29:39:54,399 --> 29:40:01,279
and let's then go ahead in here which is
34760
29:40:02,720 --> 29:40:07,119
this problem at the end which is off
34761
29:40:07,119 --> 29:40:11,119
and when we've emitted this off state
34762
29:40:09,119 --> 29:40:12,959
needs verification is loading is also
34763
29:40:11,119 --> 29:40:14,959
false so pretty much is loading is false
34764
29:40:14,960 --> 29:40:18,639
except for when we're actually loading
34765
29:40:18,639 --> 29:40:22,399
which is for instance uh let's see
34766
29:40:22,399 --> 29:40:26,231
when we're actually logging in for
34767
29:40:23,831 --> 29:40:27,679
instance okay so when we have the user
34768
29:40:26,232 --> 29:40:29,592
in here we say user is a required
34769
29:40:27,679 --> 29:40:30,959
parameter and is loading is false as
34770
29:40:33,911 --> 29:40:38,080
and just looking up and down this file i
34771
29:40:36,000 --> 29:40:40,080
can see we also have a problem off event
34772
29:40:38,080 --> 29:40:41,759
register so let's go to auth event
34773
29:40:41,759 --> 29:40:47,279
excuse me and let's just say auth needs
34774
29:40:44,232 --> 29:40:49,512
verification is loading is false as well
34775
29:40:47,279 --> 29:40:51,592
and in here we have an exception name
34776
29:40:49,512 --> 29:40:53,360
parameter i believe and they require
34777
29:40:51,592 --> 29:40:55,360
parameter and then we say is loading is
34778
29:40:53,360 --> 29:40:57,119
false as well so just a comma in there
34779
29:40:55,360 --> 29:41:00,232
to get the formatting working
34780
29:40:57,119 --> 29:41:01,831
and that is working as it should so we
34781
29:41:00,232 --> 29:41:04,872
shouldn't have any errors basically in
34782
29:41:01,831 --> 29:41:08,231
our offline at this point all right
34783
29:41:04,872 --> 29:41:08,960
so then i'm gonna close that file
34784
29:41:08,960 --> 29:41:12,232
what we need to do as the captioning
34785
29:41:10,479 --> 29:41:13,911
case we need to go to our login view and
34786
29:41:12,232 --> 29:41:14,800
remove everything that has anything to
34787
29:41:14,800 --> 29:41:21,279
loading so let's go to a login view
34788
29:41:24,551 --> 29:41:28,399
and at the moment you can see we have
34789
29:41:25,911 --> 29:41:30,551
this closed dialog close dialog handle
34790
29:41:28,399 --> 29:41:32,799
all that stuff so we shouldn't do any of
34791
29:41:30,551 --> 29:41:35,191
that so now you see the point of what
34792
29:41:32,800 --> 29:41:36,720
we've done is for our application to be
34793
29:41:36,720 --> 29:41:42,320
the loading dialog just in one place
34794
29:41:40,160 --> 29:41:45,040
loading dialogue should be handled in
34795
29:41:42,320 --> 29:41:46,720
one place in the entire application
34796
29:41:45,039 --> 29:41:48,551
that's what we're trying to do we
34797
29:41:46,720 --> 29:41:51,831
shouldn't have loading states and
34798
29:41:48,551 --> 29:41:54,000
loading like handling loading and or any
34799
29:41:51,831 --> 29:41:56,000
dialogues and that has anything to do
34800
29:41:54,000 --> 29:41:57,279
with loading in various views inside our
34801
29:41:56,000 --> 29:41:59,279
application so that's what we're trying
34802
29:41:57,279 --> 29:42:01,039
to get to okay so let's first go to this
34803
29:41:59,279 --> 29:42:02,232
close dialogue handle and remove that
34804
29:42:01,039 --> 29:42:04,319
because we're not going to need that
34805
29:42:02,232 --> 29:42:06,320
anymore and then let's go in here and
34806
29:42:04,320 --> 29:42:08,320
remove all this code inside your login
34807
29:42:06,320 --> 29:42:10,400
view dot dart file that has anything to
34808
29:42:08,320 --> 29:42:14,080
do with loading so now you should just
34809
29:42:10,399 --> 29:42:16,551
have exception handling all right
34810
29:42:20,639 --> 29:42:25,440
here have a look at what we have you can
34811
29:42:23,759 --> 29:42:28,000
see at the moment we have a block
34812
29:42:25,440 --> 29:42:30,720
builder inside the main widget of home
34813
29:42:28,000 --> 29:42:32,872
page in in our build function we have a
34814
29:42:30,720 --> 29:42:34,800
block builder but what we want is to
34815
29:42:36,232 --> 29:42:40,080
changes to something that has a loading
34816
29:42:38,160 --> 29:42:42,400
in it okay so you see this state at the
34817
29:42:40,080 --> 29:42:44,872
moment is off state but inside there
34818
29:42:42,399 --> 29:42:47,679
this state could have is loading set to
34819
29:42:44,872 --> 29:42:49,680
true so how do we handle that remember
34820
29:42:47,679 --> 29:42:52,399
block builder is not supposed to have
34821
29:42:49,679 --> 29:42:54,479
any side effects that's the job of the
34822
29:42:54,479 --> 29:42:58,319
however we need the block builder we
34823
29:42:56,551 --> 29:43:00,000
actually need to return something in
34824
29:43:00,000 --> 29:43:04,399
different views depending on the current
34825
29:43:01,831 --> 29:43:06,159
state but we also need a block listener
34826
29:43:04,399 --> 29:43:09,439
so how do we do this how do we fix this
34827
29:43:06,160 --> 29:43:10,800
well the the solution is using a block
34828
29:43:10,800 --> 29:43:14,720
so a block consumer i've mentioned this
34829
29:43:14,720 --> 29:43:18,639
builds on top of a block builder and a
34830
29:43:16,800 --> 29:43:20,639
block listener so it allows you to do
34831
29:43:18,639 --> 29:43:22,232
both things at the same time so if you
34832
29:43:20,639 --> 29:43:23,911
ever end up in a situation or
34833
29:43:22,232 --> 29:43:25,760
application where you want a builder a
34834
29:43:23,911 --> 29:43:28,399
blog builder and you want a blog
34835
29:43:25,759 --> 29:43:31,119
listener block listener at the same time
34836
29:43:28,399 --> 29:43:32,959
there is where you need a blog consumer
34837
29:43:32,960 --> 29:43:37,280
so let's go in here and say that in our
34838
29:43:35,360 --> 29:43:38,960
main file i'm going to go to my notes as
34839
29:43:42,872 --> 29:43:48,320
we don't have a block builder
34840
29:43:50,080 --> 29:43:55,680
and now we have listener in here and
34841
29:43:55,679 --> 29:44:01,279
what we're going to do in here is say if
34842
29:44:01,512 --> 29:44:05,040
then what we're going to say is we're
34843
29:44:02,872 --> 29:44:07,760
going to say loading screen and it also
34844
29:44:05,039 --> 29:44:09,511
imported for me okay and then we're
34845
29:44:09,512 --> 29:44:14,551
okay we have the context already and
34846
29:44:12,000 --> 29:44:18,080
then we either take the state's loading
34847
29:44:14,551 --> 29:44:21,360
text or we say please wait in a moment
34848
29:44:18,080 --> 29:44:23,440
so if the state's loading text is not
34849
29:44:21,360 --> 29:44:24,800
available we just use a default one in
34850
29:44:24,800 --> 29:44:29,192
so if the state is not loading we just
34851
29:44:29,191 --> 29:44:33,759
dot height all right so that's that so
34852
29:44:32,479 --> 29:44:35,279
now that we've done this this is pretty
34853
29:44:33,759 --> 29:44:37,591
much like the last building block that
34854
29:44:35,279 --> 29:44:38,959
we have to build inside this um inside
34855
29:44:37,592 --> 29:44:41,440
this application for now so i'm just
34856
29:44:38,960 --> 29:44:43,592
going to close this main dart file and
34857
29:44:41,440 --> 29:44:45,680
resize the screen let's go ahead and
34858
29:44:45,679 --> 29:44:50,231
and if i dare i'm gonna hot restart the
34859
29:44:48,320 --> 29:44:52,640
application entirely because we've done
34860
29:44:52,639 --> 29:44:59,119
and let's go ahead in uh just for
34861
29:44:55,679 --> 29:45:00,719
experiment i'm gonna go into
34862
29:44:59,119 --> 29:45:02,551
what is it loading okay i'm just gonna
34863
29:45:04,080 --> 29:45:08,479
in firebase auth provider inside this
34864
29:45:14,872 --> 29:45:20,080
like this we could basically have a
34865
29:45:17,512 --> 29:45:22,400
little bit of a delay so because
34866
29:45:20,080 --> 29:45:24,400
otherwise we may not actually see the
34867
29:45:22,399 --> 29:45:26,551
our little uh overlay so i'm just gonna
34868
29:45:24,399 --> 29:45:29,591
first not do that and try to log in
34869
29:45:29,592 --> 29:45:33,360
you saw did you see our little overlay
34870
29:45:31,759 --> 29:45:34,799
there so i'm going to log out now and
34871
29:45:35,911 --> 29:45:40,000
but if i try to now put a little bit of
34872
29:45:38,232 --> 29:45:41,360
a delay in here so i'm just going to say
34873
29:45:43,592 --> 29:45:49,192
delayed the rate const duration
34874
29:45:49,191 --> 29:45:55,119
and just hot restart the application
34875
29:45:55,119 --> 29:45:59,831
my normal credentials foo bar
34876
29:45:57,759 --> 29:46:01,759
and press the login button and this is
34877
29:46:01,759 --> 29:46:06,639
right and it has the ability for you to
34878
29:46:04,000 --> 29:46:08,720
actually update its text as it's
34879
29:46:08,720 --> 29:46:12,720
then yes everything is actually working
34880
29:46:10,720 --> 29:46:15,040
as it should so now we have an overlay
34881
29:46:12,720 --> 29:46:17,119
we don't have our loading dialog anymore
34882
29:46:15,039 --> 29:46:19,591
so you could safely basically go and say
34883
29:46:17,119 --> 29:46:21,119
well i want to get a complete rid of
34884
29:46:19,592 --> 29:46:22,720
the loading dialog so i'm going to leave
34885
29:46:22,720 --> 29:46:26,872
as now that we did we don't need the
34886
29:46:25,279 --> 29:46:29,119
loading dialogue so what we achieved in
34887
29:46:26,872 --> 29:46:32,639
this chapter is actually huge because we
34888
29:46:29,119 --> 29:46:34,871
now have a loading um screen that is
34889
29:46:32,639 --> 29:46:37,039
independent of the entire application
34890
29:46:34,872 --> 29:46:39,680
and it's in just one place that's the
34891
29:46:37,039 --> 29:46:41,511
goal we don't have many different places
34892
29:46:39,679 --> 29:46:43,679
in our application that are handling the
34893
29:46:43,679 --> 29:46:48,479
so let's go ahead and make sure we're
34894
29:46:45,911 --> 29:46:50,479
not going to lose our code our precious
34895
29:46:48,479 --> 29:46:52,159
code that we've written so far so i'm
34896
29:46:50,479 --> 29:46:54,959
gonna rid of i'm gonna get rid of scr
34897
29:46:52,160 --> 29:46:57,680
cpy increase the size of the screen
34898
29:46:54,960 --> 29:47:00,000
and let's go as we usually do and commit
34899
29:46:57,679 --> 29:47:02,959
and tag our code so if you look at our
34900
29:47:00,000 --> 29:47:03,911
logs the previous commit was step 25
34901
29:47:04,960 --> 29:47:08,872
everything and say git commit
34902
29:47:10,639 --> 29:47:14,720
i'm going to push these changes and
34903
29:47:22,872 --> 29:47:26,872
but if you look at our logs now so we
34904
29:47:24,639 --> 29:47:30,080
have step 26 in here and if i scroll a
34905
29:47:26,872 --> 29:47:32,479
little bit step 25 is before it and all
34906
29:47:30,080 --> 29:47:35,911
the tags are also available in here you
34907
29:47:32,479 --> 29:47:38,551
can see 25 and 26 available right there
34908
29:47:35,911 --> 29:47:40,080
all right so we've done what we promised
34909
29:47:38,551 --> 29:47:41,911
to do at the beginning of this chapter
34910
29:47:40,080 --> 29:47:44,000
and we created a great overlay that we
34911
29:47:41,911 --> 29:47:47,831
can reuse in the in the application and
34912
29:47:44,000 --> 29:47:50,551
just show and hide only in one place
34913
29:47:47,831 --> 29:47:52,319
so what we need to do now is the very
34914
29:47:50,551 --> 29:47:54,159
exciting stuff in that we're getting
34915
29:47:52,320 --> 29:47:56,640
really close to being complete with our
34916
29:47:54,160 --> 29:47:58,160
application so we have login register
34917
29:47:58,160 --> 29:48:03,360
email verification we have loading in
34918
29:48:00,551 --> 29:48:04,800
screens we have sharing deleting it's
34919
29:48:03,360 --> 29:48:06,639
just we have pretty much everything for
34920
29:48:06,639 --> 29:48:10,960
we still have some little bits and
34921
29:48:08,399 --> 29:48:12,551
pieces left to make the application more
34922
29:48:10,960 --> 29:48:14,400
useful because remember when you create
34923
29:48:12,551 --> 29:48:16,479
your application and send it to apple
34924
29:48:14,399 --> 29:48:19,360
and google for review there's actually
34925
29:48:16,479 --> 29:48:20,872
going to be real people who sit there
34926
29:48:19,360 --> 29:48:22,872
and interact with your application to
34927
29:48:20,872 --> 29:48:25,760
see if they can make sense of it so we
34928
29:48:22,872 --> 29:48:27,592
need to clean the ui up so that it's a
34929
29:48:25,759 --> 29:48:29,591
little bit more user friendly and that's
34930
29:48:27,592 --> 29:48:31,192
exactly what we're going to take care of
34931
29:48:29,592 --> 29:48:33,040
in the next chapter so i'll see you
34932
29:48:31,191 --> 29:48:35,591
there hello everyone and welcome to
34933
29:48:33,039 --> 29:48:38,639
chapter 44 of the swata course in
34934
29:48:35,592 --> 29:48:41,040
previous chapters we've been basically
34935
29:48:38,639 --> 29:48:42,800
working quite a lot with block and we've
34936
29:48:41,039 --> 29:48:45,279
been making sure that our applications
34937
29:48:42,800 --> 29:48:46,551
loading screen is working so we have one
34938
29:48:45,279 --> 29:48:48,720
place in the entire application that
34939
29:48:46,551 --> 29:48:51,360
we're taking care of the loading screens
34940
29:48:48,720 --> 29:48:54,320
and we also have wrapped our whole
34941
29:48:51,360 --> 29:48:56,399
authentication process inside a block
34942
29:48:54,320 --> 29:48:58,400
and we're very now close to being able
34943
29:48:56,399 --> 29:49:00,079
to release our application to the app
34944
29:48:58,399 --> 29:49:01,191
store apple's app store and google's
34945
29:49:02,160 --> 29:49:05,592
this is usually what we do as software
34946
29:49:05,592 --> 29:49:10,960
just before releasing our product or we
34947
29:49:08,551 --> 29:49:13,831
basically go and clean it up as we say
34948
29:49:10,960 --> 29:49:16,080
so we put some final touches to it so
34949
29:49:13,831 --> 29:49:17,439
even if you're a designer you usually do
34950
29:49:16,080 --> 29:49:20,232
that probably like if you're working
34951
29:49:17,440 --> 29:49:22,320
with figma or you're working with sketch
34952
29:49:20,232 --> 29:49:24,232
you first are like designing your
34953
29:49:22,320 --> 29:49:26,480
product and then before you present it
34954
29:49:24,232 --> 29:49:28,160
to the product owner or the developers
34955
29:49:26,479 --> 29:49:31,039
you probably put some final touches to
34956
29:49:28,160 --> 29:49:34,320
it so um that's what we're gonna do in
34957
29:49:31,039 --> 29:49:36,319
this chapter and we have um a few things
34958
29:49:34,320 --> 29:49:38,320
also left to do which have nothing
34959
29:49:36,320 --> 29:49:40,872
really to do with the final touches to
34960
29:49:38,320 --> 29:49:43,120
the ui it's mainly to do with the
34961
29:49:40,872 --> 29:49:44,872
products functionality and we'll talk
34962
29:49:44,872 --> 29:49:49,192
so if you think about it what we have at
34963
29:49:49,191 --> 29:49:53,279
an application that a user can register
34964
29:49:51,440 --> 29:49:55,191
they can't send an email verification
34965
29:49:53,279 --> 29:49:57,191
they can log in and they can go into the
34966
29:49:55,191 --> 29:49:59,591
list of notes that they have they can
34967
29:49:57,191 --> 29:50:02,399
create notes delete notes and edit and
34968
29:49:59,592 --> 29:50:04,552
share notes however we haven't really
34969
29:50:02,399 --> 29:50:06,959
exposed a functionality for a user to be
34970
29:50:04,551 --> 29:50:09,360
able to reset their password so
34971
29:50:06,960 --> 29:50:12,080
imagine a process imagine an application
34972
29:50:09,360 --> 29:50:14,232
where you've created it created a user
34973
29:50:12,080 --> 29:50:15,831
in the application and you forgot your
34974
29:50:14,232 --> 29:50:18,320
password and there's absolutely no way
34975
29:50:15,831 --> 29:50:20,399
for you to get back into the product or
34976
29:50:18,320 --> 29:50:22,000
the software and because you just don't
34977
29:50:22,000 --> 29:50:25,440
may then have to personally contact the
34978
29:50:24,000 --> 29:50:28,639
application developer and say could you
34979
29:50:25,440 --> 29:50:30,800
reset my password so it's a very very
34980
29:50:28,639 --> 29:50:32,800
difficult process to do manually and you
34981
29:50:30,800 --> 29:50:34,080
shouldn't really do that so what we're
34982
29:50:34,080 --> 29:50:37,831
we're going to do in this chapter is not
34983
29:50:35,512 --> 29:50:39,911
only to do final ui touches but also
34984
29:50:37,831 --> 29:50:44,080
we're going to create a password reset
34985
29:50:39,911 --> 29:50:45,759
functionality into our application
34986
29:50:44,080 --> 29:50:48,160
so let's get started with that i'm going
34987
29:50:45,759 --> 29:50:49,191
to do some screen reshuffling in here as
34988
29:50:48,160 --> 29:50:51,592
you can see in the cache we're going to
34989
29:50:49,191 --> 29:50:53,831
go delete all users in firebase console
34990
29:50:54,872 --> 29:50:58,551
i'm going to bring up console
34991
29:50:56,872 --> 29:51:01,279
firebase.com and i'm going to bring it
34992
29:50:58,551 --> 29:51:03,360
to the main screen in here
34993
29:51:01,279 --> 29:51:05,512
let's find our application i believe
34994
29:51:03,360 --> 29:51:06,479
it's this one and i'm then gonna go in
34995
29:51:06,479 --> 29:51:12,159
to a firebase date the firestore
34996
29:51:08,872 --> 29:51:15,512
database and let's start by
34997
29:51:15,512 --> 29:51:20,160
these documents so let's say delete
34998
29:51:17,911 --> 29:51:21,279
document and we have four documents so
34999
29:51:23,039 --> 29:51:28,000
just one at a time we delete these
35000
29:51:28,000 --> 29:51:31,592
and those are our documents gone so you
35001
29:51:30,232 --> 29:51:32,960
could just keep your collection i think
35002
29:51:31,592 --> 29:51:34,960
it's best because our application at the
35003
29:51:32,960 --> 29:51:36,480
moment is assuming that there is a node
35004
29:51:36,479 --> 29:51:41,831
if you remember from our node service
35005
29:51:39,679 --> 29:51:43,911
so that's that part we deleted the data
35006
29:51:41,831 --> 29:51:45,759
but we haven't really deleted the user
35007
29:51:43,911 --> 29:51:47,512
so let's go off to authentication
35008
29:51:49,592 --> 29:51:52,800
and in here i'm just gonna say delete
35009
29:51:52,800 --> 29:51:57,512
and let's just delete this account as
35010
29:51:54,872 --> 29:52:00,232
well so now we're basically starting off
35011
29:51:57,512 --> 29:52:01,191
fresh so no users and no data in the
35012
29:52:04,320 --> 29:52:07,912
so that's that part let's do that i'm
35013
29:52:06,080 --> 29:52:09,360
going to then bring up our source coding
35014
29:52:14,399 --> 29:52:19,119
my notes application as we've called it
35015
29:52:17,512 --> 29:52:21,191
so that's visual studio code i'm going
35016
29:52:19,119 --> 29:52:23,759
to resize it a little bit and then i'm
35017
29:52:21,191 --> 29:52:25,831
going to bring up scrcpy as well which
35018
29:52:23,759 --> 29:52:27,119
has our app running at the moment and
35019
29:52:25,831 --> 29:52:28,639
the application thinks at the moment
35020
29:52:28,639 --> 29:52:32,160
because it hasn't really communicated
35021
29:52:30,000 --> 29:52:34,800
with the back end yet so i'm gonna just
35022
29:52:32,160 --> 29:52:37,279
do a hot restart in here and this is
35023
29:52:34,800 --> 29:52:40,080
this is the problem that you'll
35024
29:52:37,279 --> 29:52:41,592
sometimes actually notice in the in your
35025
29:52:41,592 --> 29:52:45,360
firebase isn't gonna immediately
35026
29:52:43,440 --> 29:52:48,080
understand that this user doesn't exist
35027
29:52:45,360 --> 29:52:49,759
on the back end anymore so if you delete
35028
29:52:48,080 --> 29:52:51,592
a user from your firebase backend it
35029
29:52:49,759 --> 29:52:53,831
doesn't necessarily mean that it's
35030
29:52:51,592 --> 29:52:55,832
immediately going to be reflected to the
35031
29:52:53,831 --> 29:52:58,231
application so let's see what happens in
35032
29:52:55,831 --> 29:53:01,511
here if i then log out with this user
35033
29:52:58,232 --> 29:53:03,192
like this and then try to log in with a
35034
29:53:01,512 --> 29:53:04,800
user that used to exist in the
35035
29:53:03,191 --> 29:53:06,080
application but i just deleted it foo
35036
29:53:06,080 --> 29:53:09,592
and let's see what happens in here and
35037
29:53:07,592 --> 29:53:11,760
now you can see we see we say user not
35038
29:53:09,592 --> 29:53:14,232
found okay we're gonna clean up that
35039
29:53:11,759 --> 29:53:16,479
message as well soon in this chapter
35040
29:53:14,232 --> 29:53:18,000
so good we have a clean slate now so we
35041
29:53:16,479 --> 29:53:19,911
have no users and no data in the
35042
29:53:20,720 --> 29:53:26,639
so what we need to do now is to start by
35043
29:53:23,592 --> 29:53:28,872
defining our events and states for
35044
29:53:26,639 --> 29:53:31,119
forgotten password okay so if user says
35045
29:53:28,872 --> 29:53:32,320
hey i forgot my password we have to have
35046
29:53:32,320 --> 29:53:36,552
so that we can send that event
35047
29:53:38,800 --> 29:53:42,639
so you can see in here we have to go to
35048
29:53:40,320 --> 29:53:45,360
auth event dark file and add an auth
35049
29:53:45,360 --> 29:53:50,479
so let's go ahead and do that so i'm
35050
29:53:47,279 --> 29:53:52,160
going to open off event dark file
35051
29:53:52,160 --> 29:53:56,552
over log out in here we're just going to
35052
29:53:54,320 --> 29:53:58,640
say class i'm going to increase the size
35053
29:53:56,551 --> 29:54:01,679
in here as well obviously better
35054
29:53:58,639 --> 29:54:05,279
class um off as we've said in the notes
35055
29:54:01,679 --> 29:54:06,079
here off event forgot password extends
35056
29:54:09,440 --> 29:54:14,320
and in here we need to grab the user's
35057
29:54:14,320 --> 29:54:18,080
like that and i'm gonna create a
35058
29:54:15,911 --> 29:54:19,119
constructor for this as well just like
35059
29:54:21,759 --> 29:54:25,759
or here with curly brackets okay
35060
29:54:26,160 --> 29:54:29,911
all right so it's a name parameter now
35061
29:54:27,911 --> 29:54:32,399
um and we just said auth event forgot
35062
29:54:32,479 --> 29:54:37,759
fantastic so that's that part um then we
35063
29:54:35,512 --> 29:54:40,479
also need to go and define a state
35064
29:54:37,759 --> 29:54:42,399
because when a user presses a button for
35065
29:54:40,479 --> 29:54:44,319
instance saying i forgot my password
35066
29:54:42,399 --> 29:54:47,191
then our off block is going to produce
35067
29:54:44,320 --> 29:54:49,680
that state and say hey application that
35068
29:54:47,191 --> 29:54:51,360
your state right now is forgot password
35069
29:54:49,679 --> 29:54:53,831
and then in the main dart file as you'll
35070
29:54:51,360 --> 29:54:55,911
soon see we will go and edit and add
35071
29:54:53,831 --> 29:54:58,799
that state to our state handling as you
35072
29:54:55,911 --> 29:55:00,319
can see in your main dart file
35073
29:54:58,800 --> 29:55:02,872
the moment we have all these states but
35074
29:55:00,320 --> 29:55:05,280
we're going to add a new state that says
35075
29:55:02,872 --> 29:55:07,360
else if state is off state forgot
35076
29:55:05,279 --> 29:55:11,360
password then display a forgot password
35077
29:55:07,360 --> 29:55:12,160
view which we're also gonna develop soon
35078
29:55:12,160 --> 29:55:18,960
as the caption indicates let's go and
35079
29:55:14,800 --> 29:55:20,639
let's go to the file off state dart file
35080
29:55:18,960 --> 29:55:23,120
and i'm going to do that in my notes as
35081
29:55:20,639 --> 29:55:24,639
well after registering it really doesn't
35082
29:55:23,119 --> 29:55:26,000
matter where you place that code i'm
35083
29:55:24,639 --> 29:55:28,080
just going to place it here after
35084
29:55:28,080 --> 29:55:33,800
and just say off state forgot password
35085
29:55:40,639 --> 29:55:44,872
and then we have to also take care of
35086
29:55:44,960 --> 29:55:48,720
what should the state actually indicate
35087
29:55:48,720 --> 29:55:53,119
let's say that when you're in the forgot
35088
29:55:51,360 --> 29:55:54,000
password view which we're soon gonna
35089
29:55:54,000 --> 29:55:59,191
um there could be two things that you
35090
29:55:56,320 --> 29:56:02,480
wanna convey to the user in that screen
35091
29:55:59,191 --> 29:56:04,399
either the user has just landed so there
35092
29:56:02,479 --> 29:56:06,319
are actually three three states that
35093
29:56:06,320 --> 29:56:10,720
either the user has just landed on that
35094
29:56:08,639 --> 29:56:12,639
screen meaning that there is no errors
35095
29:56:10,720 --> 29:56:15,191
nothing we haven't done anything so it's
35096
29:56:12,639 --> 29:56:16,319
just a clean slate so that's the default
35097
29:56:16,320 --> 29:56:20,552
of off state forgot password so nothing
35098
29:56:20,551 --> 29:56:24,399
however what if the user has actually
35099
29:56:25,360 --> 29:56:29,279
send reminder email because you see the
35100
29:56:27,279 --> 29:56:31,440
way we're going to handle for a password
35101
29:56:29,279 --> 29:56:33,279
is we're going to actually ask firebase
35102
29:56:31,440 --> 29:56:35,911
and say firebase this user forgot their
35103
29:56:33,279 --> 29:56:37,679
password with this email send a reminder
35104
29:56:35,911 --> 29:56:38,959
email to them or send some kind of like
35105
29:56:37,679 --> 29:56:41,591
an email to them that they can't
35106
29:56:38,960 --> 29:56:44,320
actually reset their password
35107
29:56:41,592 --> 29:56:47,040
so upon user pressing that button to
35108
29:56:44,320 --> 29:56:48,480
send a reminder email to their email
35109
29:56:50,720 --> 29:56:55,512
actually two things that we're going to
35110
29:56:55,512 --> 29:57:00,000
we tried to send an email but it didn't
35111
29:56:57,512 --> 29:57:01,832
succeed so kind of an exception so
35112
29:57:00,000 --> 29:57:03,039
that's the second state remember no
35113
29:57:03,039 --> 29:57:07,191
second state is there's an exception and
35114
29:57:05,039 --> 29:57:09,591
there's a third state that there was no
35115
29:57:07,191 --> 29:57:11,759
exception but we've actually sent the
35116
29:57:09,592 --> 29:57:13,360
email so three things we have to handle
35117
29:57:13,360 --> 29:57:18,000
so the default state with no values is
35118
29:57:15,592 --> 29:57:19,912
state number one nothing has happened
35119
29:57:18,000 --> 29:57:25,000
state number two would be actually
35120
29:57:19,911 --> 29:57:25,000
having an optional accept exception here
35121
29:57:28,720 --> 29:57:33,119
has sent email like this okay
35122
29:57:33,592 --> 29:57:36,552
so let me go ahead and create a
35123
29:57:35,119 --> 29:57:38,399
constructor for these i'm not gonna
35124
29:57:36,551 --> 29:57:39,831
explain this again because we've talked
35125
29:57:38,399 --> 29:57:42,000
about this quite a lot and i'm gonna
35126
29:57:39,831 --> 29:57:43,279
make these required parameters okay just
35127
29:57:43,279 --> 29:57:49,512
and put a semicolon at the end
35128
29:57:46,000 --> 29:57:51,512
and in here we're just gonna call em
35129
29:57:49,512 --> 29:57:54,400
we're gonna call super but remember from
35130
29:57:51,512 --> 29:57:57,592
super off states has a constructor here
35131
29:57:54,399 --> 29:58:00,551
that has to provide is loading okay so
35132
29:57:57,592 --> 29:58:03,040
in in this case let's just actually take
35133
29:58:00,551 --> 29:58:05,191
a bull is loading as well as a parameter
35134
29:58:05,191 --> 29:58:10,399
and then we're gonna pass is loading to
35135
29:58:07,592 --> 29:58:12,720
our super as well just like that
35136
29:58:13,759 --> 29:58:16,720
when we're actually working with this
35137
29:58:15,191 --> 29:58:18,799
auth state for that password we can
35138
29:58:16,720 --> 29:58:20,639
actually give it is loading parameter
35139
29:58:18,800 --> 29:58:23,680
and that's going to get delegated back
35140
29:58:20,639 --> 29:58:25,512
to off state so our main dart file is
35141
29:58:23,679 --> 29:58:27,911
going to be able to display a loading
35142
29:58:25,512 --> 29:58:29,040
screen if is loading is true if you
35143
29:58:29,039 --> 29:58:33,360
main dart file we have this beautiful
35144
29:58:31,440 --> 29:58:35,592
block consumer with the listener that
35145
29:58:33,360 --> 29:58:37,680
that looks at any off state and as long
35146
29:58:35,592 --> 29:58:40,720
as this auth states is loading parameter
35147
29:58:37,679 --> 29:58:43,039
is true or that auth states is loading
35148
29:58:40,720 --> 29:58:46,000
variable or property is true then it
35149
29:58:46,000 --> 29:58:49,440
all right perfect so now we've taken
35150
29:58:47,512 --> 29:58:53,279
care of off state so we didn't make any
35151
29:58:49,440 --> 29:58:53,279
changes in main dart file yet okay
35152
29:58:54,000 --> 29:58:59,119
all right what we need to do is now go
35153
29:58:55,911 --> 29:59:02,399
to our um auth provider dart file and
35154
29:58:59,119 --> 29:59:04,959
define an interface function for sending
35155
29:59:04,960 --> 29:59:09,280
i'm gonna go and do that right now auth
35156
29:59:09,279 --> 29:59:13,191
i'm gonna do it here as well off
35157
29:59:14,960 --> 29:59:18,480
so let's go ahead and define a function
35158
29:59:16,479 --> 29:59:20,639
that every auth provider including our
35159
29:59:18,479 --> 29:59:24,159
firebase auth provider has to conform to
35160
29:59:20,639 --> 29:59:26,551
okay so let's say this is a future
35161
29:59:24,160 --> 29:59:29,680
point and we call it send password
35162
29:59:26,551 --> 29:59:32,231
reset like that and we have a required
35163
29:59:29,679 --> 29:59:34,000
string parameter to email just like that
35164
29:59:34,000 --> 29:59:37,440
after defining this you'll understand
35165
29:59:35,512 --> 29:59:39,911
now soon that we have a few errors
35166
29:59:37,440 --> 29:59:41,040
because auth service conforms to auth
35167
29:59:41,039 --> 29:59:46,479
and so does firebase auth provider but
35168
29:59:43,119 --> 29:59:48,799
we're gonna fix these soon okay
35169
29:59:46,479 --> 29:59:51,360
so as the caption indicates let's go to
35170
29:59:48,800 --> 29:59:53,592
firebase auth provider in here and
35171
29:59:51,360 --> 29:59:56,320
actually implement that so i'm gonna go
35172
29:59:59,039 --> 30:00:04,399
and i'm also going to go here on the
35173
30:00:04,399 --> 30:00:08,639
off provider and you'll see an error in
35174
30:00:07,360 --> 30:00:10,080
here in visual studio code you can
35175
30:00:08,639 --> 30:00:12,160
actually get help from visual studio
35176
30:00:10,080 --> 30:00:14,000
code to complete that missing overwrite
35177
30:00:12,160 --> 30:00:15,911
for us you can see create one missing
35178
30:00:14,000 --> 30:00:17,592
override and this is basically saying
35179
30:00:15,911 --> 30:00:19,440
that you're conforming to auth provider
35180
30:00:17,592 --> 30:00:21,440
but you're not actually overwriting all
35181
30:00:19,440 --> 30:00:23,512
the functions that boss provider wants
35182
30:00:21,440 --> 30:00:25,279
you to override okay so if you're
35183
30:00:23,512 --> 30:00:27,119
working with vim or if you're working
35184
30:00:25,279 --> 30:00:30,000
with sublime that doesn't for instance
35185
30:00:30,000 --> 30:00:34,720
plugin then you may have to override
35186
30:00:32,160 --> 30:00:36,080
that function yourself but the signature
35187
30:00:34,720 --> 30:00:37,911
of that function is very easy you can
35188
30:00:36,080 --> 30:00:39,680
just go to auth provider and grab this
35189
30:00:39,679 --> 30:00:44,399
override before it okay so that's
35190
30:00:41,911 --> 30:00:46,319
completely fine as well but since i'm
35191
30:00:44,399 --> 30:00:47,679
working with and this is asking me to
35192
30:00:46,320 --> 30:00:49,192
save this file but there's pretty much
35193
30:00:47,679 --> 30:00:50,479
nothing that i did in this file already
35194
30:00:50,479 --> 30:00:53,911
so since i have visual studio code i can
35195
30:00:52,320 --> 30:00:55,592
ask it to create the missing override
35196
30:00:53,911 --> 30:00:57,591
for me and it's gonna probably create it
35197
30:00:55,592 --> 30:00:59,192
right at the bottom in here okay so
35198
30:00:59,191 --> 30:01:05,440
so let's put this whole thing into a
35199
30:01:02,080 --> 30:01:06,551
catch block so i'm just gonna say catch
35200
30:01:06,551 --> 30:01:11,831
all right and then if anything happens
35201
30:01:09,831 --> 30:01:14,479
during this process of sending a
35202
30:01:11,831 --> 30:01:15,759
password reset email to the user we're
35203
30:01:15,759 --> 30:01:20,639
a generic auth exception in here okay so
35204
30:01:21,279 --> 30:01:25,679
then um and also if you're wondering
35205
30:01:23,831 --> 30:01:28,479
about this syntax this is just like you
35206
30:01:25,679 --> 30:01:31,119
ignoring an incoming variable in swift
35207
30:01:28,479 --> 30:01:32,959
and in rust and some other languages
35208
30:01:31,119 --> 30:01:35,591
like python you could also do something
35209
30:01:32,960 --> 30:01:38,552
like this that you ignore an incoming
35210
30:01:35,592 --> 30:01:40,720
variable using underscore but in dart
35211
30:01:38,551 --> 30:01:42,639
it's not really you ignoring ignoring
35212
30:01:40,720 --> 30:01:43,680
the variable it's you naming the
35213
30:01:43,679 --> 30:01:48,959
underscore but i try to sometimes use
35214
30:01:46,872 --> 30:01:50,720
this just to indicate that hey i don't
35215
30:01:48,960 --> 30:01:53,280
care about this variable okay but just
35216
30:01:50,720 --> 30:01:56,800
know that internally you're not ignoring
35217
30:01:53,279 --> 30:01:59,592
it you're just naming it underscore okay
35218
30:01:56,800 --> 30:02:02,400
so let's go in here and and now ask our
35219
30:01:59,592 --> 30:02:04,320
provider so um so we just say await
35220
30:02:02,399 --> 30:02:07,511
since we're in firebase auth provider we
35221
30:02:04,320 --> 30:02:09,192
can actually say wait firebase off
35222
30:02:07,512 --> 30:02:12,000
oh and we have to mark this function as
35223
30:02:09,191 --> 30:02:14,000
async otherwise we can't use a weight
35224
30:02:12,000 --> 30:02:16,160
and then instance and then there's a
35225
30:02:14,000 --> 30:02:18,399
function called send password reset
35226
30:02:16,160 --> 30:02:22,080
email and it it says to which email and
35227
30:02:18,399 --> 30:02:22,079
we're gonna say to this email okay
35228
30:02:22,639 --> 30:02:27,119
all right so that's our catch in there
35229
30:02:24,872 --> 30:02:29,592
but we also have to have another catch
35230
30:02:27,119 --> 30:02:31,512
that is that catches firebase off
35231
30:02:29,592 --> 30:02:33,279
exception as we're doing in many other
35232
30:02:31,512 --> 30:02:36,160
places so let's have a look
35233
30:02:33,279 --> 30:02:38,959
um here for instance okay so let's go
35234
30:02:36,160 --> 30:02:40,552
before this catch and say on firebase
35235
30:02:40,551 --> 30:02:46,159
catch e something like that
35236
30:02:44,000 --> 30:02:48,080
and then curly brackets and curly
35237
30:02:46,160 --> 30:02:51,512
brackets close so i'm going to bring
35238
30:02:48,080 --> 30:02:53,512
this code up so we see better
35239
30:02:51,512 --> 30:02:55,440
so there are two things that we have to
35240
30:02:53,512 --> 30:02:57,040
handle two codes that we have to handle
35241
30:02:55,440 --> 30:02:58,720
as you can see we're handling a few
35242
30:02:57,039 --> 30:03:01,119
codes in here for instance user not
35243
30:02:58,720 --> 30:03:02,399
found wrong password and these things
35244
30:03:02,399 --> 30:03:05,679
i haven't really found the correct
35245
30:03:04,160 --> 30:03:08,320
documentation for these things like
35246
30:03:05,679 --> 30:03:10,000
where firebase has documented that these
35247
30:03:08,320 --> 30:03:12,320
errors are going to happen with these
35248
30:03:10,000 --> 30:03:14,080
codes it's mainly that i found them out
35249
30:03:12,320 --> 30:03:16,160
through experience just like trying
35250
30:03:14,080 --> 30:03:18,400
different things and seeing that things
35251
30:03:16,160 --> 30:03:20,552
fail and upon failing i caught their
35252
30:03:18,399 --> 30:03:22,159
error code and now i know which error
35253
30:03:20,551 --> 30:03:23,679
codes i had to actually have to handle
35254
30:03:22,160 --> 30:03:24,960
but if you search on google i'm pretty
35255
30:03:23,679 --> 30:03:26,871
sure you're gonna find some good
35256
30:03:24,960 --> 30:03:28,720
documentation about a firebase and the
35257
30:03:26,872 --> 30:03:30,872
google team are great at documenting
35258
30:03:30,872 --> 30:03:34,720
so one error that we have to handle is
35259
30:03:32,720 --> 30:03:36,399
called firebase auth invalid email and
35260
30:03:34,720 --> 30:03:39,279
the other one call is called firebase
35261
30:03:36,399 --> 30:03:41,831
off user not found so let's first
35262
30:03:39,279 --> 30:03:44,232
grab the um error code so i'm just going
35263
30:03:41,831 --> 30:03:45,439
to say switch e code in here because
35264
30:03:45,440 --> 30:03:49,191
any firebase auth exception that comes
35265
30:03:47,119 --> 30:03:50,959
from firebase has a code of type string
35266
30:03:49,191 --> 30:03:53,591
as you can see here and that's that
35267
30:03:50,960 --> 30:03:56,000
string that we're interested in so let's
35268
30:03:53,592 --> 30:03:58,080
handle firebase auth invalid email for
35269
30:03:58,080 --> 30:04:02,800
and then in this case we're just going
35270
30:03:59,512 --> 30:04:05,040
to say throw um invalid email off
35271
30:04:05,039 --> 30:04:08,639
we already have this defined from before
35272
30:04:08,639 --> 30:04:12,960
in our off exceptions here dark file you
35273
30:04:12,960 --> 30:04:15,832
and the other case that we have to
35274
30:04:15,831 --> 30:04:22,000
firebase auth user not found so it's a
35275
30:04:18,551 --> 30:04:23,831
user it's like anyone asking for a
35276
30:04:22,000 --> 30:04:25,440
reminder email for their password and
35277
30:04:23,831 --> 30:04:27,679
that user just doesn't exist in the
35278
30:04:25,440 --> 30:04:29,279
database so then we have to handle that
35279
30:04:27,679 --> 30:04:31,359
case as well it's called user not found
35280
30:04:29,279 --> 30:04:32,319
just like that okay and then we're gonna
35281
30:04:32,320 --> 30:04:38,640
a user not found off exception
35282
30:04:36,080 --> 30:04:40,160
in any other case of firebase
35283
30:04:38,639 --> 30:04:42,479
authexception we're just going to throw
35284
30:04:40,160 --> 30:04:43,592
generic off exception just like that
35285
30:04:43,592 --> 30:04:47,040
and we're going to save this file
35286
30:04:48,160 --> 30:04:52,080
fantastic so we fixed firebase auth
35287
30:04:50,551 --> 30:04:53,759
provider but if you look at your project
35288
30:04:52,080 --> 30:04:55,911
explorer you still have a problem in
35289
30:04:53,759 --> 30:04:58,000
auth service because if you remember
35290
30:04:55,911 --> 30:04:59,911
auth service also implements auth
35291
30:04:58,000 --> 30:05:02,720
provider but it delegates all its
35292
30:04:59,911 --> 30:05:06,479
responsibility to its auth provider
35293
30:05:02,720 --> 30:05:08,551
so let's go into our auth service and
35294
30:05:06,479 --> 30:05:10,319
implement the send password reset
35295
30:05:08,551 --> 30:05:11,591
functionality so i'm just going to go in
35296
30:05:11,592 --> 30:05:15,832
and get a visual studio code to complete
35297
30:05:13,759 --> 30:05:17,591
this with command dot on mac or control
35298
30:05:15,831 --> 30:05:20,799
dot and linux and windows and just say
35299
30:05:17,592 --> 30:05:23,040
create one missing override okay and in
35300
30:05:20,800 --> 30:05:25,279
here i'm making this an arrow function
35301
30:05:23,039 --> 30:05:27,039
because i believe every other function
35302
30:05:25,279 --> 30:05:27,911
we've done in here is an error function
35303
30:05:27,911 --> 30:05:31,440
all these functions inside all servers
35304
30:05:31,440 --> 30:05:35,440
basically delegate their functionality
35305
30:05:35,440 --> 30:05:39,360
which is given to it inside its
35306
30:05:39,360 --> 30:05:42,960
so let's go ahead and create an error
35307
30:05:40,872 --> 30:05:44,720
function and in here just delegate this
35308
30:05:42,960 --> 30:05:45,680
to the provider and we just say provider
35309
30:05:46,831 --> 30:05:52,959
verification and in here we just say um
35310
30:05:50,479 --> 30:05:55,831
send password resets actually called
35311
30:05:52,960 --> 30:05:59,440
sorry provider send password reset to
35312
30:05:55,831 --> 30:05:59,439
email to email just like that
35313
30:06:00,160 --> 30:06:03,040
all right and let's just save this file
35314
30:06:06,551 --> 30:06:12,231
is to actually handle our auth event for
35315
30:06:09,592 --> 30:06:13,680
god password in the off box so
35316
30:06:12,232 --> 30:06:15,592
i understand there's lots of like
35317
30:06:13,679 --> 30:06:17,039
jargons that are flying around here so
35318
30:06:15,592 --> 30:06:18,800
you may just be a bit confused about
35319
30:06:17,039 --> 30:06:21,360
okay what are we actually doing so what
35320
30:06:21,360 --> 30:06:24,639
soon what we're going to do is to create
35321
30:06:25,592 --> 30:06:30,800
say forgot password so when the user
35322
30:06:28,639 --> 30:06:32,319
lands in the login screen they may be
35323
30:06:30,800 --> 30:06:33,832
like okay this is my email but i
35324
30:06:32,320 --> 30:06:35,440
actually forgot my password so they have
35325
30:06:33,831 --> 30:06:36,799
to have a forgot password button
35326
30:06:36,800 --> 30:06:41,279
upon them pressing that button
35327
30:06:38,872 --> 30:06:43,512
in the login view we're gonna send this
35328
30:06:41,279 --> 30:06:45,679
event to our off block so if you
35329
30:06:43,512 --> 30:06:47,512
remember from our off event so i'm going
35330
30:06:45,679 --> 30:06:50,719
to go back here you don't have to go
35331
30:06:47,512 --> 30:06:52,160
here if you go to our off events you can
35332
30:06:50,720 --> 30:06:55,040
see we have an auth event forgot
35333
30:06:52,160 --> 30:06:56,400
password so the goal is for our user
35334
30:06:56,399 --> 30:07:00,871
for our user interface to send this
35335
30:06:58,399 --> 30:07:03,591
events to the auth block and then off
35336
30:07:00,872 --> 30:07:06,320
block is going to calculate its state
35337
30:07:06,320 --> 30:07:12,640
so let's go now into our auth block file
35338
30:07:12,639 --> 30:07:17,279
and i'm going to do that here
35339
30:07:14,479 --> 30:07:18,959
in my code as well and we're going to go
35340
30:07:19,911 --> 30:07:27,191
this functionality here forgot password
35341
30:07:23,759 --> 30:07:28,319
like this and let's go and say on off
35342
30:07:28,320 --> 30:07:32,080
forgot password just like that and you
35343
30:07:32,080 --> 30:07:36,639
quite used to this syntax emit
35344
30:07:35,191 --> 30:07:39,591
and this is going to be asynchronous
35345
30:07:36,639 --> 30:07:41,679
function and just uh curly brackets just
35346
30:07:39,592 --> 30:07:43,440
like that so this is like the bare bones
35347
30:07:46,399 --> 30:07:50,079
okay now we're handling off event for a
35348
30:07:48,080 --> 30:07:52,639
god password so what we're gonna do in
35349
30:07:50,080 --> 30:07:55,191
here is we're just gonna say
35350
30:07:52,639 --> 30:07:57,119
uh by default we're emitting
35351
30:07:57,119 --> 30:08:02,231
off state for a god password
35352
30:08:00,000 --> 30:08:04,000
exception is null has sent email is
35353
30:08:04,000 --> 30:08:08,320
and it's loading is false so what we're
35354
30:08:06,232 --> 30:08:10,552
basically saying in here is saying by
35355
30:08:08,320 --> 30:08:13,440
the user pressing the forgot password
35356
30:08:10,551 --> 30:08:15,759
button what we're doing is saying
35357
30:08:13,440 --> 30:08:17,592
yeah go to the forgot password screen
35358
30:08:15,759 --> 30:08:20,080
that's all that's all we're saying okay
35359
30:08:17,592 --> 30:08:21,680
because then our main dart file is gonna
35360
30:08:20,080 --> 30:08:23,279
handle this it's gonna say okay if this
35361
30:08:21,679 --> 30:08:27,039
date is forgot password i'm just gonna
35362
30:08:23,279 --> 30:08:28,479
go to the forgot password screen okay
35363
30:08:27,039 --> 30:08:31,039
so then what we're gonna do is we're
35364
30:08:28,479 --> 30:08:33,679
gonna extract the user's email from this
35365
30:08:31,039 --> 30:08:37,119
event if there is an email in there it
35366
30:08:33,679 --> 30:08:39,679
means that the user was in the fargot
35367
30:08:37,119 --> 30:08:43,679
password screen and actually press the
35368
30:08:39,679 --> 30:08:45,359
button to send a forgot password email
35369
30:08:45,360 --> 30:08:49,592
if that's not the case then we know that
35370
30:08:47,360 --> 30:08:52,232
all the user did is just to go to that
35371
30:08:49,592 --> 30:08:55,040
screen so there is no email to handle so
35372
30:08:52,232 --> 30:08:56,639
let's just say final and if i can spell
35373
30:08:56,639 --> 30:09:01,831
final email is event email and we say if
35374
30:08:59,512 --> 30:09:03,832
email is null then we just return
35375
30:09:01,831 --> 30:09:05,759
meaning that yeah the user it seems like
35376
30:09:03,831 --> 30:09:08,720
the user just wanted to go to the forgot
35377
30:09:11,592 --> 30:09:16,160
if that is not the case so let's just
35378
30:09:13,360 --> 30:09:18,479
put a comment in here user just wants to
35379
30:09:20,000 --> 30:09:27,592
and if we end up in here in line 21 for
35380
30:09:22,479 --> 30:09:30,319
me user wants to actually send a forgot
35381
30:09:27,592 --> 30:09:33,040
password email okay and in this case
35382
30:09:30,320 --> 30:09:35,040
let's just emit the exact same state as
35383
30:09:33,039 --> 30:09:37,911
we did before but in this case we're
35384
30:09:35,039 --> 30:09:40,159
saying loading okay remember
35385
30:09:37,911 --> 30:09:41,591
our main dart file is going to catch all
35386
30:09:40,160 --> 30:09:43,512
the states that have loading and
35387
30:09:41,592 --> 30:09:46,160
actually display our loading screen or
35388
30:09:43,512 --> 30:09:48,232
the loading um overlay okay so that's
35389
30:09:48,232 --> 30:09:51,120
but then what we're gonna do is let's
35390
30:09:51,119 --> 30:09:56,159
and we have to actually say in here do a
35391
30:09:53,911 --> 30:09:57,759
try catching here so we say cat on
35392
30:10:01,039 --> 30:10:05,911
and since we're in our off block we have
35393
30:10:03,911 --> 30:10:08,800
access to our provider so let's say we
35394
30:10:05,911 --> 30:10:12,959
wait for the provider to send a password
35395
30:10:08,800 --> 30:10:15,512
reset to the email just like that okay
35396
30:10:12,960 --> 30:10:19,360
and then we have to enable two variables
35397
30:10:15,512 --> 30:10:23,040
in here we just say boolean did send
35398
30:10:19,360 --> 30:10:25,119
password or set bits and email
35399
30:10:25,119 --> 30:10:30,319
and we also have an optional exception
35400
30:10:27,679 --> 30:10:32,959
like this so the goal is we have a try
35401
30:10:30,320 --> 30:10:34,720
and catch block in here and in the try
35402
30:10:32,960 --> 30:10:36,000
we just say yeah this email was sent
35403
30:10:36,000 --> 30:10:39,512
because yeah if you don't end up in the
35404
30:10:37,759 --> 30:10:40,959
catch block meaning that there's there
35405
30:10:40,960 --> 30:10:44,800
then the email was actually sent
35406
30:10:42,800 --> 30:10:47,360
successfully and we will also say the
35407
30:10:44,800 --> 30:10:48,400
exception is basically null so we don't
35408
30:10:52,720 --> 30:10:57,680
after this point but remember we are
35409
30:10:55,039 --> 30:11:00,799
basically saving these two variables in
35410
30:10:57,679 --> 30:11:03,591
here so that after the try and catch
35411
30:11:00,800 --> 30:11:06,400
block we can actually emit an aust state
35412
30:11:03,592 --> 30:11:08,872
for a password with those variables so
35413
30:11:06,399 --> 30:11:10,479
this thing is going to go in here in oh
35414
30:11:08,872 --> 30:11:11,832
the documentation it's going to go in
35415
30:11:11,831 --> 30:11:16,000
and this thing is going to go in here
35416
30:11:14,479 --> 30:11:18,000
okay and it's loading is going to be
35417
30:11:16,000 --> 30:11:20,080
false so that's why we're basically
35418
30:11:18,000 --> 30:11:22,551
storing them in here so in the positive
35419
30:11:20,080 --> 30:11:24,320
case in the happy path as we call it
35420
30:11:22,551 --> 30:11:25,591
we're going to say did send email is
35421
30:11:25,592 --> 30:11:30,320
and we're gonna say exception is no okay
35422
30:11:28,160 --> 30:11:33,192
and in this case that's an email it's
35423
30:11:30,320 --> 30:11:36,000
gonna be false and exception is gonna be
35424
30:11:33,191 --> 30:11:38,871
e all right so we store those
35425
30:11:36,000 --> 30:11:42,160
and let's just then copy this state from
35426
30:11:38,872 --> 30:11:44,639
above and let's just paste it in here
35427
30:11:42,160 --> 30:11:46,960
so in this case we say hey the exception
35428
30:11:48,320 --> 30:11:52,480
invalid oh yeah it can't be constant if
35429
30:11:50,320 --> 30:11:54,320
it's a variable so um let me bring it
35430
30:11:52,479 --> 30:11:57,512
here again so you can see exception is
35431
30:11:57,512 --> 30:12:01,592
it has sent email is going to be it send
35432
30:12:03,039 --> 30:12:08,479
is loading is false so that's it now we
35433
30:12:06,320 --> 30:12:11,040
are emitting that state to the
35434
30:12:12,800 --> 30:12:17,279
after all of this you see if and now
35435
30:12:15,119 --> 30:12:18,871
that we've handled that event and the
35436
30:12:17,279 --> 30:12:20,319
state in our offload we also have to
35437
30:12:18,872 --> 30:12:23,040
display some sort of a dialogue to the
35438
30:12:20,320 --> 30:12:25,912
user so if you're on the reset password
35439
30:12:23,039 --> 30:12:28,399
um screen and you enter you've entered
35440
30:12:25,911 --> 30:12:31,191
your email and you say hey send me a
35441
30:12:31,191 --> 30:12:34,319
after you've done that we're then going
35442
30:12:32,639 --> 30:12:36,800
to display a little dialogue to you and
35443
30:12:34,320 --> 30:12:37,760
say hey okay we did that we've sent any
35444
30:12:37,759 --> 30:12:41,831
an email to you go check your email so
35445
30:12:40,232 --> 30:12:43,680
we basically need a dialogue and if you
35446
30:12:41,831 --> 30:12:45,591
remember we have a generic dialogue
35447
30:12:43,679 --> 30:12:47,831
already so we're just going to reuse
35448
30:12:45,592 --> 30:12:49,120
that okay so let's go ahead as the
35449
30:12:47,831 --> 30:12:51,039
caption at the bottom of the screen in
35450
30:12:49,119 --> 30:12:53,119
the case go and create a file under lib
35451
30:12:51,039 --> 30:12:56,479
utilities dialogues called password
35452
30:12:56,479 --> 30:13:02,959
so um let's let's go ahead and do that
35453
30:12:59,592 --> 30:13:05,192
under i'm gonna close this file as well
35454
30:13:02,960 --> 30:13:06,960
have a look at what we have in here and
35455
30:13:09,440 --> 30:13:12,872
i'm going to create a new file in here
35456
30:13:10,800 --> 30:13:14,400
and just going to call it password
35457
30:13:14,399 --> 30:13:20,720
and email send dialogue dot dart okay
35458
30:13:18,720 --> 30:13:23,279
and so that's the file and we're just
35459
30:13:20,720 --> 30:13:24,080
gonna say this is a future void um
35460
30:13:26,399 --> 30:13:31,119
uh reset sent dialogue all right so it's
35461
30:13:29,679 --> 30:13:33,439
a function that just needs a build
35462
30:13:33,440 --> 30:13:37,040
and we're going to get an error here
35463
30:13:37,039 --> 30:13:40,231
oh visual studio code imported build
35464
30:13:38,960 --> 30:13:42,320
context for me automatically that was
35465
30:13:42,320 --> 30:13:48,232
so we're just gonna return show generic
35466
30:13:45,592 --> 30:13:49,760
dialogue okay and you can see this is
35467
30:13:48,232 --> 30:13:52,480
also gonna be auto imported we've
35468
30:13:49,759 --> 30:13:54,799
already had this function from before
35469
30:13:52,479 --> 30:13:58,399
so let me put a comma here and a
35470
30:13:54,800 --> 30:14:00,000
semicolon at the end just to get the um
35471
30:13:58,399 --> 30:14:01,439
dart formatter to format my code and i'm
35472
30:14:00,000 --> 30:14:04,399
just going to in here say this is a
35473
30:14:04,399 --> 30:14:08,959
and for title we're just going to say
35474
30:14:05,911 --> 30:14:11,512
password reset like that with a capital
35475
30:14:08,960 --> 30:14:13,360
r and the content is also string we can
35476
30:14:18,000 --> 30:14:23,440
so like this please check your
35477
30:14:23,440 --> 30:14:26,960
something like that okay and you can
35478
30:14:24,960 --> 30:14:28,639
change the string if you want
35479
30:14:26,960 --> 30:14:31,512
and for the options it's an error
35480
30:14:28,639 --> 30:14:33,592
function that has to return a map and it
35481
30:14:31,512 --> 30:14:37,279
has only one button with the value of
35482
30:14:38,320 --> 30:14:43,192
all right so that's our show password
35483
30:14:43,191 --> 30:14:47,591
now what we have to do we also have to
35484
30:14:44,872 --> 30:14:48,800
develop the actual view for password
35485
30:14:48,800 --> 30:14:52,639
as the caption at the bottom of the
35486
30:14:50,800 --> 30:14:53,592
screen indicates we're gonna go to lib
35487
30:14:53,592 --> 30:14:58,320
and we're gonna go here you see lib
35488
30:14:56,160 --> 30:15:00,400
views and under views we're gonna create
35489
30:14:58,320 --> 30:15:01,912
a view called forgot password view so
35490
30:15:00,399 --> 30:15:05,831
let me go ahead and do that forgot
35491
30:15:01,911 --> 30:15:08,319
password view dot dart okay
35492
30:15:05,831 --> 30:15:11,191
and i'm gonna go into my notes as well i
35493
30:15:08,320 --> 30:15:13,360
forgot the password view okay
35494
30:15:11,191 --> 30:15:15,119
but we're gonna create a stateful widget
35495
30:15:13,360 --> 30:15:16,800
in here so that's actually quite a bit
35496
30:15:15,119 --> 30:15:18,319
of code that we have to we have to write
35497
30:15:16,800 --> 30:15:20,872
but we're gonna take care of that so
35498
30:15:18,320 --> 30:15:22,960
it's not a problem so let's go to forgot
35499
30:15:20,872 --> 30:15:24,639
password view and the first thing i'm
35500
30:15:22,960 --> 30:15:26,552
going to do is to create a stateful
35501
30:15:24,639 --> 30:15:28,639
widget with stf in visual studio code
35502
30:15:26,551 --> 30:15:31,440
i'm just going to call forgot password
35503
30:15:31,440 --> 30:15:36,000
and since we need a text field on the
35504
30:15:33,592 --> 30:15:38,160
screen and so that the user can enter
35505
30:15:36,000 --> 30:15:40,639
their uh email address just like we're
35506
30:15:38,160 --> 30:15:43,760
doing in the login view let's go ahead
35507
30:15:40,639 --> 30:15:44,960
and create a text editing controller but
35508
30:15:43,759 --> 30:15:46,479
before all of that we also have to
35509
30:15:44,960 --> 30:15:47,832
import materials so that we get rid of
35510
30:15:46,479 --> 30:15:50,080
all these errors that are on the screen
35511
30:15:47,831 --> 30:15:52,399
right now so let's go in here and just
35512
30:15:50,080 --> 30:15:53,440
create a text editing controller so late
35513
30:15:53,440 --> 30:15:57,760
text editing controller and let's just
35514
30:15:57,759 --> 30:16:00,399
and you remember this pattern from
35515
30:15:59,119 --> 30:16:02,639
before so i don't have to explain it
35516
30:16:00,399 --> 30:16:04,159
again so we go into init state
35517
30:16:02,639 --> 30:16:05,911
inside in its state we create the
35518
30:16:04,160 --> 30:16:07,760
controller so we say it's a text editing
35519
30:16:11,831 --> 30:16:15,679
in dispose we just dispose of it
35520
30:16:13,679 --> 30:16:16,959
basically so controller dot displays
35521
30:16:16,960 --> 30:16:20,232
just a boilerplate there's nothing
35522
30:16:18,800 --> 30:16:23,192
magical happening in here we're just
35523
30:16:23,191 --> 30:16:27,759
so what we need to do also in here we're
35524
30:16:25,512 --> 30:16:30,479
going to create inside this build
35525
30:16:27,759 --> 30:16:32,720
function we're going to return a block
35526
30:16:32,720 --> 30:16:37,191
based on the various states of auth
35527
30:16:34,960 --> 30:16:38,960
state forgot password so let's go to
35528
30:16:38,960 --> 30:16:44,400
or god password here based on various
35529
30:16:41,592 --> 30:16:46,639
states of this we may have to show or
35530
30:16:44,399 --> 30:16:48,079
hide different things for instance
35531
30:16:48,080 --> 30:16:54,720
if we know that the has sent email
35532
30:16:51,119 --> 30:16:56,959
boolean flag is true then we're gonna
35533
30:16:54,720 --> 30:16:59,119
basically clear the text fields value
35534
30:16:56,960 --> 30:17:02,232
using the controller's clear function
35535
30:16:59,119 --> 30:17:04,231
and we're also going to display that
35536
30:17:02,232 --> 30:17:06,080
dialogue that we just wrote
35537
30:17:10,720 --> 30:17:17,191
it was let's see in our dialogues
35538
30:17:14,320 --> 30:17:19,360
uh where is it in our dialogues if i can
35539
30:17:17,191 --> 30:17:21,039
find it it should be under utilities
35540
30:17:19,360 --> 30:17:22,720
dialogues and then we we should be
35541
30:17:21,039 --> 30:17:24,159
called a password recent email sends
35542
30:17:24,160 --> 30:17:29,832
so we're going to display that
35543
30:17:26,080 --> 30:17:32,232
and that is why we need a listener so
35544
30:17:29,831 --> 30:17:33,591
inside this build in here what we're
35545
30:17:32,232 --> 30:17:36,552
going to do is just going to say we
35546
30:17:33,592 --> 30:17:39,360
return um a block listener and this
35547
30:17:36,551 --> 30:17:41,911
needs to be auto imported as you can see
35548
30:17:39,360 --> 30:17:44,160
and this block listener actually listens
35549
30:17:41,911 --> 30:17:46,399
for off block which also needs to be
35550
30:17:44,160 --> 30:17:48,800
auto imported so there's lots of imports
35551
30:17:46,399 --> 30:17:50,720
and if you don't have a good text editor
35552
30:17:48,800 --> 30:17:52,400
like visual studio code unfortunately
35553
30:17:50,720 --> 30:17:55,119
you'll have to import all these by hand
35554
30:17:52,399 --> 30:17:56,871
and that's just a huge time waste direct
35555
30:17:56,872 --> 30:18:02,320
i don't usually give advice but um
35556
30:17:59,759 --> 30:18:05,119
my advice here at least because i think
35557
30:18:02,320 --> 30:18:06,960
it's so important is to get yourself a
35558
30:18:05,119 --> 30:18:09,279
good text editor because it makes
35559
30:18:06,960 --> 30:18:11,280
development a lot easier if you have
35560
30:18:11,279 --> 30:18:16,479
so we have off block and then the second
35561
30:18:13,911 --> 30:18:17,831
and generic parameter is off state which
35562
30:18:16,479 --> 30:18:18,872
also needs to be auto imported so
35563
30:18:17,831 --> 30:18:21,511
there's if you look at the top of the
35564
30:18:18,872 --> 30:18:22,872
file there's quite a few um imports
35565
30:18:21,512 --> 30:18:25,911
already that i didn't have to do
35566
30:18:22,872 --> 30:18:27,360
manually and so we have a listener let's
35567
30:18:25,911 --> 30:18:30,000
get help from visual studio to complete
35568
30:18:27,360 --> 30:18:32,479
the listener and we also have a little
35569
30:18:30,000 --> 30:18:34,800
um let's see we have a child in our
35570
30:18:32,479 --> 30:18:36,800
block listener that we can return so in
35571
30:18:34,800 --> 30:18:39,760
here for now let's just say we return a
35572
30:18:36,800 --> 30:18:41,911
scaffold as a constant all right so
35573
30:18:39,759 --> 30:18:43,759
but we can now work on our listener
35574
30:18:43,759 --> 30:18:47,191
so inside the listener the only thing
35575
30:18:45,679 --> 30:18:48,551
we're the only state that we're
35576
30:18:47,191 --> 30:18:50,551
interested in because this is going to
35577
30:18:48,551 --> 30:18:53,039
return any off state to us as they
35578
30:18:50,551 --> 30:18:56,399
change we're only interested in
35579
30:18:56,399 --> 30:19:01,591
is off state forgot password so that's
35580
30:18:59,360 --> 30:19:04,160
the only state we're interested in
35581
30:19:01,592 --> 30:19:05,912
and then we say if state has sent email
35582
30:19:04,160 --> 30:19:08,000
then we're going to control go to
35583
30:19:08,000 --> 30:19:12,800
and then we're gonna await on and
35584
30:19:10,720 --> 30:19:15,911
displaying the dialogue so async and
35585
30:19:16,160 --> 30:19:21,279
and i forgot the name of our huge file
35586
30:19:18,960 --> 30:19:22,720
in here again utilities dialogs and
35587
30:19:21,279 --> 30:19:24,872
password reset email so i'm going to
35588
30:19:22,720 --> 30:19:26,320
grab this the name of this function at
35589
30:19:26,320 --> 30:19:29,832
so i grab the name of that function
35590
30:19:27,911 --> 30:19:32,479
paste it in here and get visual studio
35591
30:19:29,831 --> 30:19:34,399
code to auto import it for me okay
35592
30:19:32,479 --> 30:19:36,231
and in here the only thing we have to do
35593
30:19:34,399 --> 30:19:38,231
is just to pass the context in there so
35594
30:19:36,232 --> 30:19:40,000
if the email was sent the password reset
35595
30:19:38,232 --> 30:19:42,320
was sent and we're going to say clear
35596
30:19:40,000 --> 30:19:44,080
the text on the screen on the controller
35597
30:19:42,320 --> 30:19:46,832
and then show the dialog telling the
35598
30:19:44,080 --> 30:19:49,360
user hey we sent an email to you
35599
30:19:53,119 --> 30:19:57,191
then what we're gonna do is to display
35600
30:19:55,592 --> 30:19:58,480
an error to the user so we're just gonna
35601
30:20:01,592 --> 30:20:04,872
and i think that also got auto imported
35602
30:20:06,160 --> 30:20:08,800
so then we're going to say error dialog
35603
30:20:07,512 --> 30:20:12,720
with that context and then we're going
35604
30:20:14,551 --> 30:20:22,080
please make sure that you are a
35605
30:20:17,440 --> 30:20:25,279
registered user or something like that
35606
30:20:25,279 --> 30:20:28,160
please make sure that you're a
35607
30:20:33,911 --> 30:20:41,039
or or if not register a user now by
35608
30:20:41,039 --> 30:20:43,911
so this is just some text i mean you
35609
30:20:42,551 --> 30:20:45,191
don't have to write this text it's just
35610
30:20:43,911 --> 30:20:46,800
basically saying that if you're in the
35611
30:20:46,800 --> 30:20:49,832
screen and you're saying that hey i
35612
30:20:47,911 --> 30:20:51,279
forgot my password it's my email if we
35613
30:20:49,831 --> 30:20:52,799
can't find that email if there's an
35614
30:20:53,592 --> 30:20:58,080
um we're gonna display this message and
35615
30:20:55,440 --> 30:21:00,232
say hey you may not be a registered user
35616
30:21:03,440 --> 30:21:06,720
and remember in here you could be you
35617
30:21:05,279 --> 30:21:08,720
could try to be more fine-grained
35618
30:21:06,720 --> 30:21:10,720
because remember our exceptions in here
35619
30:21:08,720 --> 30:21:12,551
off state exception in the case of auth
35620
30:21:12,551 --> 30:21:17,360
if you go to our off block um
35621
30:21:17,360 --> 30:21:21,759
in this case remember the exceptions
35622
30:21:19,512 --> 30:21:23,680
come from the send password reset so
35623
30:21:21,759 --> 30:21:24,799
this send password reset if you go to
35624
30:21:26,960 --> 30:21:30,552
send password reset oh my god where did
35625
30:21:34,479 --> 30:21:38,800
in this case those exceptions could be
35626
30:21:36,399 --> 30:21:41,511
invalid email or user not found so you
35627
30:21:38,800 --> 30:21:43,760
could actually try to be clean and in
35628
30:21:41,512 --> 30:21:45,512
your auth sorry in your forgot password
35629
30:21:43,759 --> 30:21:47,511
view and actually check what kind of
35630
30:21:45,512 --> 30:21:49,512
exception that is so i actually think
35631
30:21:47,512 --> 30:21:51,119
it's it's better if you do that i'm not
35632
30:21:49,512 --> 30:21:53,360
going to do that in for the sake of just
35633
30:21:51,119 --> 30:21:55,191
saving some time but you may decide to
35634
30:21:53,360 --> 30:21:57,680
go ahead and do that and i encourage you
35635
30:21:57,679 --> 30:22:01,359
to do something like that if you want to
35636
30:22:07,440 --> 30:22:11,680
is we've done the listener so that's
35637
30:22:09,191 --> 30:22:13,759
really good but in the child we actually
35638
30:22:13,759 --> 30:22:18,319
we have to create a um proper scaffold
35639
30:22:18,320 --> 30:22:21,440
let's go ahead and remove the consonant
35640
30:22:20,232 --> 30:22:22,872
in here because at the end we're not
35641
30:22:21,440 --> 30:22:24,639
going to end up with a constant scaffold
35642
30:22:22,872 --> 30:22:26,080
it's very rare that you'd end up with a
35643
30:22:27,911 --> 30:22:30,872
i'm just going to say we have an app bar
35644
30:22:30,872 --> 30:22:36,160
and it has a title and the title is just
35645
30:22:33,592 --> 30:22:39,680
going to be constant text and we're just
35646
30:22:41,279 --> 30:22:44,000
some commas in there to get the
35647
30:22:44,000 --> 30:22:49,039
correctly and in the body we're gonna
35648
30:22:49,039 --> 30:22:52,231
this is what i usually like to do create
35649
30:22:50,551 --> 30:22:54,479
a column and then i'm going to wrap it
35650
30:22:52,232 --> 30:22:58,480
in some padding like this and let's just
35651
30:22:54,479 --> 30:22:58,479
say padding of 16 as well okay
35652
30:23:01,592 --> 30:23:05,680
that's that's basically our
35653
30:23:03,512 --> 30:23:08,232
main focus in here so we need to work on
35654
30:23:05,679 --> 30:23:10,479
a little column in your forgot password
35655
30:23:10,551 --> 30:23:14,159
so now we have that as the first child
35656
30:23:12,639 --> 30:23:16,720
of the column we're going to add a
35657
30:23:14,160 --> 30:23:18,639
little const of text in here
35658
30:23:16,720 --> 30:23:20,080
and to tell the user actually what they
35659
30:23:18,639 --> 30:23:20,960
should do in this screen so let's just
35660
30:23:20,960 --> 30:23:25,832
and i'm going to grab the text that i
35661
30:23:25,831 --> 30:23:30,479
and paste it in here so i don't have to
35662
30:23:27,911 --> 30:23:34,720
actually write this thing again so uh
35663
30:23:30,479 --> 30:23:37,119
let's see why is it complaining
35664
30:23:34,720 --> 30:23:39,119
what is the actual error um too many
35665
30:23:37,119 --> 30:23:40,399
positional arguments okay i've messed up
35666
30:23:40,399 --> 30:23:44,639
right of course because in the column i
35667
30:23:42,320 --> 30:23:47,680
added actually didn't say children
35668
30:23:47,679 --> 30:23:52,479
children inside the children first i'm
35669
30:23:49,831 --> 30:23:53,831
going to put this text okay so if you
35670
30:23:52,479 --> 30:23:56,231
have the same problem like me it's
35671
30:23:53,831 --> 30:23:57,759
because you place the text right inside
35672
30:23:56,232 --> 30:23:59,592
the column and that's not okay we have
35673
30:23:57,759 --> 30:24:01,679
to put it inside children property of
35674
30:24:01,679 --> 30:24:04,871
and we're going to create a text field
35675
30:24:03,039 --> 30:24:06,319
right after this where the user can
35676
30:24:04,872 --> 30:24:10,479
actually enter their email address so
35677
30:24:06,320 --> 30:24:10,480
let's say text um text field
35678
30:24:14,479 --> 30:24:17,191
but we don't have a comma at the end of
35679
30:24:15,831 --> 30:24:19,191
this either so i'm going to put a comma
35680
30:24:17,191 --> 30:24:20,959
in here okay text field so the screen
35681
30:24:19,191 --> 30:24:22,799
looks a little bit scary right now it's
35682
30:24:20,960 --> 30:24:25,512
just because it thinks that it has to be
35683
30:24:22,800 --> 30:24:27,360
a constant but it's not a constant so
35684
30:24:25,512 --> 30:24:28,872
these little warnings are gonna soon
35685
30:24:28,872 --> 30:24:33,440
so let's say keyboard type and it's a
35686
30:24:31,360 --> 30:24:35,512
text input type so i'm gonna say text
35687
30:24:38,479 --> 30:24:43,039
autocorrect on email fields always has
35688
30:24:41,592 --> 30:24:44,800
to be false okay you don't want
35689
30:24:43,039 --> 30:24:45,831
autocorrect on email fields it's very
35690
30:24:45,831 --> 30:24:49,911
and we autofocus as well so that when
35691
30:24:47,911 --> 30:24:53,119
the user ends up on that screen the
35692
30:24:49,911 --> 30:24:55,119
textville is automatically focused on
35693
30:24:53,119 --> 30:24:56,799
and then we put a controller and after
35694
30:24:55,119 --> 30:24:58,551
this the problem with the constants is
35695
30:24:58,551 --> 30:25:03,039
so that's fantastic um and then let's
35696
30:25:01,039 --> 30:25:06,719
just go and create a little decoration
35697
30:25:03,039 --> 30:25:08,799
with a hint so we just say const
35698
30:25:08,800 --> 30:25:16,320
and we're going to say hint text is
35699
30:25:11,759 --> 30:25:16,319
your email address like this okay
35700
30:25:16,479 --> 30:25:19,591
so that's that part now we've created
35701
30:25:19,592 --> 30:25:24,080
after this we actually need to have a
35702
30:25:21,831 --> 30:25:25,569
text button we actually need two of them
35703
30:25:24,080 --> 30:25:27,119
so i'm going to say text button
35704
30:25:28,232 --> 30:25:32,320
and inside the text button on the first
35705
30:25:30,320 --> 30:25:34,552
one it's going to it's going to be the
35706
30:25:32,320 --> 30:25:36,480
actual cta call to action meaning that
35707
30:25:34,551 --> 30:25:37,759
when the users enter their email address
35708
30:25:36,479 --> 30:25:39,759
then they're going to press this button
35709
30:25:37,759 --> 30:25:40,959
and this upon pressing this button we're
35710
30:25:40,960 --> 30:25:46,320
the email to them okay so let's say i'm
35711
30:25:43,592 --> 30:25:48,480
pressed and this is an empty function
35712
30:25:46,320 --> 30:25:50,872
just like this for now and its child is
35713
30:25:48,479 --> 30:25:53,191
just going to be const of text
35714
30:25:50,872 --> 30:25:55,279
and we're gonna send send me password
35715
30:25:57,512 --> 30:26:02,000
so that's the first i'm gonna copy this
35716
30:25:59,759 --> 30:26:04,479
text button actually and paste it again
35717
30:26:02,000 --> 30:26:05,440
right after that and in here we're just
35718
30:26:06,800 --> 30:26:11,512
login the login page and in here we
35719
30:26:09,831 --> 30:26:14,000
actually have this functionality from
35720
30:26:11,512 --> 30:26:17,040
before in our auth blog so let's just go
35721
30:26:14,000 --> 30:26:18,960
inside this and say context read or off
35722
30:26:17,039 --> 30:26:21,831
block from the context and then we're
35723
30:26:18,960 --> 30:26:24,800
gonna add an event in here and say off
35724
30:26:28,639 --> 30:26:32,551
so this is gonna send the user to the
35725
30:26:30,960 --> 30:26:34,872
login page okay so that's the second
35726
30:26:34,872 --> 30:26:39,279
and in the first button let's just grab
35727
30:26:36,960 --> 30:26:41,280
the user's email so let's just say email
35728
30:26:43,592 --> 30:26:47,360
in here we're then going to tell the off
35729
30:26:45,512 --> 30:26:48,800
block that it has to send a password
35730
30:26:47,360 --> 30:26:51,592
reset to this email so we're just going
35731
30:26:48,800 --> 30:26:53,911
to say context dot read off block from
35732
30:26:51,592 --> 30:26:55,832
the context and we're going to add and
35733
30:27:00,551 --> 30:27:06,231
and the email is email just like that
35734
30:27:10,080 --> 30:27:14,080
yeah it's cleaner not to have a comma in
35735
30:27:12,000 --> 30:27:15,679
there because if i put a comma then it
35736
30:27:14,080 --> 30:27:17,360
formats a code like this but without
35737
30:27:15,679 --> 30:27:20,639
having formats like this which to me in
35738
30:27:17,360 --> 30:27:22,872
my opinion is a little bit cleaner okay
35739
30:27:20,639 --> 30:27:25,440
so i think now we've implemented that so
35740
30:27:22,872 --> 30:27:27,279
this screen should be ready our forgot
35741
30:27:27,279 --> 30:27:31,119
so as a caption now at the bottom of the
35742
30:27:28,960 --> 30:27:33,832
screen in the case we need to go and
35743
30:27:31,119 --> 30:27:36,551
look for the off state for god password
35744
30:27:33,831 --> 30:27:37,759
and return for god password view in main
35745
30:27:37,759 --> 30:27:41,911
so i'm gonna go to main dark file um
35746
30:27:41,911 --> 30:27:46,080
so let's let me close this and close
35747
30:27:44,000 --> 30:27:48,000
this and let's go to main dart file and
35748
30:27:46,080 --> 30:27:51,279
we are handling already quite a lot of
35749
30:27:48,000 --> 30:27:52,800
states and right after here login view
35750
30:27:54,232 --> 30:27:59,192
else if state is off state for a god
35751
30:28:01,440 --> 30:28:04,400
and in here then we're going to say
35752
30:28:04,399 --> 30:28:09,679
const forgot password view and this is
35753
30:28:07,039 --> 30:28:12,399
going to be also imported as well okay
35754
30:28:14,479 --> 30:28:20,000
that's that's that part uh our forgot
35755
30:28:20,000 --> 30:28:23,191
and what we also need to do is to make
35756
30:28:23,191 --> 30:28:29,512
inside our login view so let's go into
35757
30:28:29,512 --> 30:28:34,000
we need to have a little button in here
35758
30:28:31,679 --> 30:28:36,079
that allows the user to go to the
35759
30:28:34,000 --> 30:28:38,399
foreground password view so we're gonna
35760
30:28:36,080 --> 30:28:40,160
add that in here so i'm just gonna
35761
30:28:38,399 --> 30:28:42,000
create another text button so copy the
35762
30:28:40,160 --> 30:28:45,120
text button that you have at the bottom
35763
30:28:42,000 --> 30:28:46,639
and paste it in between in here okay and
35764
30:28:45,119 --> 30:28:49,759
in this text right now we're just going
35765
30:28:46,639 --> 30:28:51,911
to say i forgot my password like this
35766
30:28:49,759 --> 30:28:55,039
and in here let's just send off event
35767
30:28:55,831 --> 30:29:00,399
so now if i press the command s button
35768
30:28:58,399 --> 30:29:02,799
to hot reload you can see i forgot my
35769
30:29:00,399 --> 30:29:04,799
password displayed here and we press it
35770
30:29:02,800 --> 30:29:06,639
and at the moment actually nothing is
35771
30:29:04,800 --> 30:29:08,800
happening it's probably because we
35772
30:29:06,639 --> 30:29:11,360
changed our main dart file and we
35773
30:29:08,800 --> 30:29:13,680
haven't done hot reload so sorry hot
35774
30:29:11,360 --> 30:29:15,592
restart so i do a hot restart now and i
35775
30:29:13,679 --> 30:29:16,959
say i forgot my password you can see we
35776
30:29:15,592 --> 30:29:18,960
end up in this screen that we just
35777
30:29:16,960 --> 30:29:21,040
developed and then you have the avail
35778
30:29:21,039 --> 30:29:27,191
um reminder email and if you say back to
35779
30:29:24,232 --> 30:29:29,440
login page then logout is sent and you
35780
30:29:32,399 --> 30:29:36,871
now what we need to do also in a login
35781
30:29:34,720 --> 30:29:38,720
view dart in here so let's go to login
35782
30:29:38,720 --> 30:29:43,440
and have a look at how we're handling
35783
30:29:40,960 --> 30:29:45,592
this user not found at the moment and we
35784
30:29:43,440 --> 30:29:47,119
have just user not found but if you
35785
30:29:45,592 --> 30:29:50,320
think about it there is going to be
35786
30:29:47,119 --> 30:29:52,319
people from both apple and google who
35787
30:29:50,320 --> 30:29:54,160
will test your application when you send
35788
30:29:54,160 --> 30:29:58,639
uh google play store so just saying user
35789
30:29:58,639 --> 30:30:03,679
it's i don't want to say it's wrong but
35790
30:30:03,679 --> 30:30:07,759
encompassing what could what the problem
35791
30:30:08,551 --> 30:30:12,551
saying user not found is like the bare
35792
30:30:10,551 --> 30:30:14,231
minimum of what we could convey to our
35793
30:30:12,551 --> 30:30:16,479
user so let's just make that better by
35794
30:30:16,479 --> 30:30:20,959
text in here so i'm just going to write
35795
30:30:18,551 --> 30:30:22,551
this text that i had from before so we
35796
30:30:20,960 --> 30:30:24,639
it's better just to say cannot find a
35797
30:30:22,551 --> 30:30:28,000
user with the entered credentials okay
35798
30:30:24,639 --> 30:30:30,160
just a little bit better message
35799
30:30:28,000 --> 30:30:32,479
as now that we're we've basically done
35800
30:30:30,160 --> 30:30:34,800
the forgot password where we're going
35801
30:30:32,479 --> 30:30:36,800
into the cleanup state so we're adding
35802
30:30:34,800 --> 30:30:38,960
some final ui touches to our application
35803
30:30:36,800 --> 30:30:40,800
to make it look better so as the caption
35804
30:30:38,960 --> 30:30:42,800
indicates let's go into login view and
35805
30:30:40,800 --> 30:30:44,720
add a padding in here you see we just
35806
30:30:42,800 --> 30:30:47,512
have a column and it kind of looks like
35807
30:30:44,720 --> 30:30:49,440
edge to edge it's not so professional so
35808
30:30:47,512 --> 30:30:51,832
let's just add a padding in here i'm
35809
30:30:49,440 --> 30:30:53,440
just going to say wrap with padding
35810
30:30:51,831 --> 30:30:55,911
and we're just going to say padding of
35811
30:30:53,440 --> 30:30:57,512
16 in here okay so it looks a little bit
35812
30:30:55,911 --> 30:30:59,039
nicer in my opinion at least looks
35813
30:30:57,512 --> 30:31:00,639
cleaner okay even if you're doing
35814
30:31:02,960 --> 30:31:07,192
for instance elements on the screen they
35815
30:31:05,119 --> 30:31:09,512
have like your user agent has some
35816
30:31:07,191 --> 30:31:11,191
padding already or margins built in to
35817
30:31:09,512 --> 30:31:12,232
inherited widgets it's our inherited
35818
30:31:12,232 --> 30:31:17,760
um unless you go and change your css so
35819
30:31:15,039 --> 30:31:20,159
this is kind of us adding that um
35820
30:31:17,759 --> 30:31:22,551
padding in our elements in the flutter
35821
30:31:22,551 --> 30:31:25,360
the next thing that we need to do in
35822
30:31:23,759 --> 30:31:26,799
here you can see in the login page at
35823
30:31:25,360 --> 30:31:29,039
the moment it's just on the top says
35824
30:31:26,800 --> 30:31:30,479
login and enter your email blah blah but
35825
30:31:29,039 --> 30:31:32,399
it doesn't actually give the user any
35826
30:31:30,479 --> 30:31:33,911
instructions you see here in the i
35827
30:31:32,399 --> 30:31:35,591
forgot my password we're giving the user
35828
30:31:33,911 --> 30:31:38,080
some instructions on what he or she has
35829
30:31:35,592 --> 30:31:40,080
to do but in the login page we're not so
35830
30:31:38,080 --> 30:31:42,400
let's go ahead and remedy that and just
35831
30:31:40,080 --> 30:31:44,080
add a text on top of the screen i'm
35832
30:31:42,399 --> 30:31:46,479
going to paste that text from what i had
35833
30:31:44,080 --> 30:31:48,872
before inside the children of this
35834
30:31:46,479 --> 30:31:50,720
column and we're just saying please log
35835
30:31:48,872 --> 30:31:53,040
into your account blah blah
35836
30:31:50,720 --> 30:31:54,800
and you'll see now that appear here just
35837
30:31:53,039 --> 30:31:57,360
makes it look a little bit nicer in my
35838
30:31:58,551 --> 30:32:03,831
we've already now fixed this and going
35839
30:32:03,831 --> 30:32:08,399
forgot password we've already added that
35840
30:32:06,080 --> 30:32:09,680
in here as you can see so this element
35841
30:32:08,399 --> 30:32:10,959
at the bottom of the screen this caption
35842
30:32:09,679 --> 30:32:13,359
is already addressed we don't have to do
35843
30:32:10,960 --> 30:32:15,192
anything special about that
35844
30:32:15,191 --> 30:32:20,000
register view as you can see our
35845
30:32:17,911 --> 30:32:22,080
have you broken the register view not
35846
30:32:20,000 --> 30:32:24,160
registered yet i can see that that
35847
30:32:22,080 --> 30:32:26,872
button at the moment isn't working so
35848
30:32:26,872 --> 30:32:32,479
event should register okay
35849
30:32:32,479 --> 30:32:36,399
event should register i can see we
35850
30:32:34,232 --> 30:32:37,760
haven't even handled off event should
35851
30:32:38,639 --> 30:32:44,080
we need to definitely do that right now
35852
30:32:40,800 --> 30:32:45,192
so let's go to off block and
35853
30:32:45,191 --> 30:32:51,119
have a look at handling our um
35854
30:32:49,279 --> 30:32:52,720
i'm gonna remove this caption right now
35855
30:32:51,119 --> 30:32:55,279
because that's not what we're working on
35856
30:32:52,720 --> 30:32:58,232
right now so let's go to our off block
35857
30:32:55,279 --> 30:33:00,319
i'm going to maybe actually add that so
35858
30:33:04,000 --> 30:33:09,759
what we're working on right now okay so
35859
30:33:06,080 --> 30:33:12,232
let's go to our auth block and say on
35860
30:33:12,232 --> 30:33:16,800
and let's just say event and emit
35861
30:33:16,800 --> 30:33:22,080
and what we're doing in here is to say
35862
30:33:22,080 --> 30:33:27,360
constant off state registering
35863
30:33:25,119 --> 30:33:29,591
okay and there is no exception and there
35864
30:33:27,360 --> 30:33:31,512
is no loading so false just like that
35865
30:33:29,592 --> 30:33:34,000
okay and a comma here to get the
35866
30:33:31,512 --> 30:33:35,680
formatting working so now let's press
35867
30:33:34,000 --> 30:33:37,592
hot restart because remember you're
35868
30:33:35,679 --> 30:33:39,511
changing your auth block which is being
35869
30:33:37,592 --> 30:33:42,720
provided in your in to your entire
35870
30:33:39,512 --> 30:33:44,232
application in the main dart file so
35871
30:33:44,232 --> 30:33:49,760
so you can see in here it's the
35872
30:33:47,360 --> 30:33:51,831
block provider that is basically
35873
30:33:49,759 --> 30:33:53,191
creating the off block so if you change
35874
30:33:51,831 --> 30:33:54,799
anything in your off block you may
35875
30:33:53,191 --> 30:33:57,119
actually have to do a hot restart okay
35876
30:33:54,800 --> 30:33:58,800
for those changes to take effect for app
35877
30:33:57,119 --> 30:34:00,399
for entire applications so not
35878
30:33:58,800 --> 30:34:02,551
registered yet pressing it goes to the
35879
30:34:02,551 --> 30:34:06,639
so as the next point that we have to
35880
30:34:04,232 --> 30:34:08,720
handle here is to add some padding to
35881
30:34:08,720 --> 30:34:12,080
as you can see in here our register view
35882
30:34:10,720 --> 30:34:13,279
at the moment looks like this we have
35883
30:34:12,080 --> 30:34:16,000
the register button and already
35884
30:34:13,279 --> 30:34:17,911
registered button buttons right here but
35885
30:34:16,000 --> 30:34:19,759
we don't have any padding around our
35886
30:34:17,911 --> 30:34:20,800
register view so let's go ahead and take
35887
30:34:19,759 --> 30:34:22,720
care of that so i'm going to go to
35888
30:34:23,679 --> 30:34:27,911
let's go ahead then and wrap this column
35889
30:34:27,911 --> 30:34:31,191
at the moment in here and just say wrap
35890
30:34:29,512 --> 30:34:32,320
it with padding as the caption at the
35891
30:34:31,191 --> 30:34:34,720
bottom of the screen says we're going to
35892
30:34:34,720 --> 30:34:39,040
you can see now we have some padding in
35893
30:34:36,960 --> 30:34:40,552
there and soon just like in the login
35894
30:34:39,039 --> 30:34:42,319
view we're going to add some text to the
35895
30:34:40,551 --> 30:34:44,159
top of the register view so what we need
35896
30:34:42,320 --> 30:34:46,720
to do is just to ensure that deleting
35897
30:34:44,160 --> 30:34:49,192
that their text inside this column is
35898
30:34:46,720 --> 30:34:50,960
actually pat it's and it's basically
35899
30:34:49,191 --> 30:34:52,479
sticking to the left side of the column
35900
30:34:50,960 --> 30:34:54,720
because by default all the components
35901
30:34:52,479 --> 30:34:57,279
that you place inside your column are
35902
30:34:54,720 --> 30:35:00,551
vertically aligned and no sorry they're
35903
30:34:57,279 --> 30:35:01,911
horizontally aligned in the main axis of
35904
30:35:03,592 --> 30:35:07,592
column so if you that's what i mean like
35905
30:35:06,080 --> 30:35:10,479
if the column what i mean is that the
35906
30:35:07,592 --> 30:35:12,960
column is expanding to the entire
35907
30:35:10,479 --> 30:35:14,399
space uh real state and then all the
35908
30:35:12,960 --> 30:35:16,480
components that you're placing inside
35909
30:35:14,399 --> 30:35:19,039
your column they're horizontally aligned
35910
30:35:19,039 --> 30:35:22,079
that's actually a better way of probably
35911
30:35:20,399 --> 30:35:24,319
saying it so and what we need to do in
35912
30:35:22,080 --> 30:35:26,400
here let's just go and say uh inside the
35913
30:35:24,320 --> 30:35:27,512
column as you can see in the caption at
35914
30:35:26,399 --> 30:35:29,439
the bottom screen we're going to say
35915
30:35:29,440 --> 30:35:33,279
we're going to say cross axis alignment
35916
30:35:31,119 --> 30:35:35,512
start if i save this and go back to the
35917
30:35:33,279 --> 30:35:37,831
register viewer you're seeing this in
35918
30:35:35,512 --> 30:35:40,720
here basically like that and what we're
35919
30:35:40,720 --> 30:35:46,960
is to add a title to our column so i've
35920
30:35:43,831 --> 30:35:49,279
already added that before so let me
35921
30:35:50,872 --> 30:35:55,440
i'm going to add a little title to the
35922
30:35:53,440 --> 30:35:57,680
first item inside the register view so
35923
30:35:55,440 --> 30:35:59,592
it looks like this but we also now that
35924
30:35:57,679 --> 30:36:01,119
we've done that i mean we want our text
35925
30:35:59,592 --> 30:36:02,480
field to be left aligned that's why we
35926
30:36:01,119 --> 30:36:04,399
added this cross access alignment but
35927
30:36:02,479 --> 30:36:06,159
we've kind of messed up the alignment of
35928
30:36:04,399 --> 30:36:09,591
our buttons in here so we need to kind
35929
30:36:06,160 --> 30:36:11,911
of wrap them inside centers so
35930
30:36:09,592 --> 30:36:14,232
what we could do is to inside you see we
35931
30:36:11,911 --> 30:36:16,232
have two elements in here but we don't
35932
30:36:14,232 --> 30:36:18,080
want to wrap both of them in their own
35933
30:36:16,232 --> 30:36:20,320
centers so what we could do is just to
35934
30:36:20,320 --> 30:36:24,552
text button inside a column
35935
30:36:22,479 --> 30:36:27,759
then we put the other text button also
35936
30:36:24,551 --> 30:36:31,279
inside the column right here
35937
30:36:27,759 --> 30:36:34,399
and then we will wrap this column
35938
30:36:31,279 --> 30:36:37,039
inside a center so wrap this column then
35939
30:36:34,399 --> 30:36:38,551
inside a center just like that
35940
30:36:37,039 --> 30:36:40,719
so if you go back to our register view
35941
30:36:38,551 --> 30:36:43,440
now we have a nice little layout
35942
30:36:43,440 --> 30:36:47,680
so we've taken care of that we've taken
35943
30:36:45,191 --> 30:36:49,279
care of the title of our application
35944
30:36:47,679 --> 30:36:51,119
and what we also need to do is to make
35945
30:36:49,279 --> 30:36:52,639
sure when we come to the register view
35946
30:36:52,639 --> 30:36:58,000
that we are auto focusing on our uh text
35947
30:36:58,000 --> 30:37:03,440
so let's go inside the effects if the
35948
30:37:03,440 --> 30:37:07,680
and right after auto correcting here
35949
30:37:09,191 --> 30:37:13,039
true so when i press save in here and i
35950
30:37:11,592 --> 30:37:14,800
go to the register screen you can see
35951
30:37:13,039 --> 30:37:17,439
that the keyboard pops up automatically
35952
30:37:14,800 --> 30:37:19,832
auto focusing on the first email field
35953
30:37:20,639 --> 30:37:25,592
okay now we also have a little problem
35954
30:37:27,119 --> 30:37:31,831
fixed our tests as you can see in here
35955
30:37:29,759 --> 30:37:33,439
implement send password reset and mock
35956
30:37:33,440 --> 30:37:37,512
and throw i can see there's a spelling
35957
30:37:35,831 --> 30:37:40,871
error in the caption i'm going to fix
35958
30:37:44,320 --> 30:37:50,160
and that is here so let's go and fix our
35959
30:37:47,191 --> 30:37:52,639
test so i want you to please go to us
35960
30:37:50,160 --> 30:37:54,720
testing here and you'll see that we have
35961
30:37:52,639 --> 30:37:56,000
an error here telling us in mock auth
35962
30:37:54,720 --> 30:37:58,320
provider saying that we haven't
35963
30:37:56,000 --> 30:38:00,000
implemented the last function that we
35964
30:37:58,320 --> 30:38:01,760
just added to our off provider called
35965
30:38:01,759 --> 30:38:06,959
so let's go in here and just ask it to
35966
30:38:06,960 --> 30:38:11,912
create that missing override
35967
30:38:09,911 --> 30:38:13,512
and what we're going to do for this
35968
30:38:11,911 --> 30:38:15,911
exercise at the moment is just we're
35969
30:38:13,512 --> 30:38:18,080
gonna leave this as it is on implemented
35970
30:38:15,911 --> 30:38:20,000
error and i actually encourage you to go
35971
30:38:18,080 --> 30:38:22,000
and do an implementation for the send
35972
30:38:20,000 --> 30:38:23,039
password reset you may for instance do
35973
30:38:23,039 --> 30:38:28,799
mock and password reset do some future
35974
30:38:26,000 --> 30:38:30,551
uh delayed a weight on it and change
35975
30:38:28,800 --> 30:38:32,320
some states in your provider if you want
35976
30:38:30,551 --> 30:38:34,639
to you're more welcome to do that so you
35977
30:38:32,320 --> 30:38:36,160
could just take this as an exercise but
35978
30:38:34,639 --> 30:38:38,000
we're just going to leave it like this
35979
30:38:36,160 --> 30:38:40,160
for now but i highly encourage you to
35980
30:38:38,000 --> 30:38:41,592
actually write some tests for this as
35981
30:38:41,592 --> 30:38:45,192
so we've now done quite a lot of work
35982
30:38:43,679 --> 30:38:47,359
we've done quite a lot of reshuffling
35983
30:38:45,191 --> 30:38:49,591
things around what we could do is just
35984
30:38:47,360 --> 30:38:51,360
to have a look at the entire app and see
35985
30:38:49,592 --> 30:38:53,360
how it kind of looks like so i'm gonna
35986
30:38:53,360 --> 30:38:57,191
and we end up in here you can see our
35987
30:38:57,191 --> 30:39:03,191
and if we try to log in with a user that
35988
30:39:00,232 --> 30:39:05,040
doesn't exist in the application anymore
35989
30:39:03,191 --> 30:39:07,360
so i could just type any password and
35990
30:39:05,039 --> 30:39:09,439
say login and we get our updated screen
35991
30:39:07,360 --> 30:39:11,279
that says cannot find a user
35992
30:39:09,440 --> 30:39:13,440
then i can actually go and register that
35993
30:39:11,279 --> 30:39:16,080
user the text field is autofocus that we
35994
30:39:19,759 --> 30:39:23,511
and we can see that we get this verify
35995
30:39:21,679 --> 30:39:26,399
email we sent you an email verification
35996
30:39:23,512 --> 30:39:29,119
we also have to clean this view up soon
35997
30:39:26,399 --> 30:39:31,759
because i believe that this is not a
35998
30:39:29,119 --> 30:39:33,831
part of this a particular chapter at the
35999
30:39:31,759 --> 30:39:36,551
moment that we clean this up but we're
36000
30:39:33,831 --> 30:39:39,191
gonna we're gonna clean it up soon
36001
30:39:36,551 --> 30:39:42,319
um so the verification email should have
36002
30:39:39,191 --> 30:39:44,159
been sent now so if i go to my mail
36003
30:39:42,320 --> 30:39:46,720
application i'll just see if i can
36004
30:39:50,320 --> 30:39:56,640
have i received any email from firebase
36005
30:39:54,000 --> 30:39:58,720
yes and that email is available here i
36006
30:39:58,720 --> 30:40:03,911
as you can see there is a link on it so
36007
30:40:01,759 --> 30:40:05,679
i'm gonna tap this link and this will
36008
30:40:08,320 --> 30:40:12,320
firebase so if i say console firebase if
36009
30:40:10,720 --> 30:40:14,479
we go to the console of our application
36010
30:40:12,320 --> 30:40:17,192
now we should see that user generated
36011
30:40:17,191 --> 30:40:21,039
so that user is right here and is
36012
30:40:18,872 --> 30:40:23,911
verified user so we can just press the
36013
30:40:21,039 --> 30:40:25,279
restart button and log in with that user
36014
30:40:27,191 --> 30:40:30,551
log in and we see our dialog and there
36015
30:40:29,191 --> 30:40:33,679
are no notes so i'm just going to create
36016
30:40:33,679 --> 30:40:39,119
and it's sitting there thinking
36017
30:40:36,232 --> 30:40:41,760
and then i'm gonna say hello world all
36018
30:40:39,119 --> 30:40:44,399
right that's my first note gonna go out
36019
30:40:41,759 --> 30:40:47,591
let's go to the console again and to our
36020
30:40:44,399 --> 30:40:49,911
application and have a look at
36021
30:40:47,592 --> 30:40:52,232
our fire firestore database and make
36022
30:40:49,911 --> 30:40:54,479
sure that that note was actually created
36023
30:40:52,232 --> 30:40:57,680
and i can see that was actually created
36024
30:40:54,479 --> 30:40:59,911
here hello world with that user id nvic
36025
30:40:57,679 --> 30:41:01,039
if i go to authentication i can see nvic
36026
30:41:03,831 --> 30:41:07,511
it seems to be working we have quite a
36027
30:41:05,911 --> 30:41:09,512
bit of work still left we have worked
36028
30:41:09,512 --> 30:41:13,832
with some margins we have worked with
36029
30:41:11,440 --> 30:41:14,872
icons app name etc before we can submit
36030
30:41:13,831 --> 30:41:16,551
it and these are things that we're going
36031
30:41:14,872 --> 30:41:18,080
to take care of in the coming chapters
36032
30:41:16,551 --> 30:41:19,591
but we've got we've come basically a
36033
30:41:19,592 --> 30:41:23,279
so we're almost there but not really
36034
30:41:23,279 --> 30:41:27,360
but no worries we're going to fix those
36035
30:41:24,800 --> 30:41:29,760
soon and let me do some screen
36036
30:41:27,360 --> 30:41:32,080
reshuffling in here and let's have a
36037
30:41:29,759 --> 30:41:33,591
look at the committing of our work which
36038
30:41:32,080 --> 30:41:35,360
is something that we usually do at the
36039
30:41:35,360 --> 30:41:39,360
i'm going to minimize scr cpy increase
36040
30:41:37,831 --> 30:41:42,319
the size of visual studio code so you
36041
30:41:39,360 --> 30:41:45,191
see my screen better let's go in here to
36042
30:41:42,320 --> 30:41:49,120
the terminal and have a look at this
36043
30:41:45,191 --> 30:41:51,591
shell in here and say git status
36044
30:41:51,592 --> 30:41:55,192
a few files that are on track which are
36045
30:41:53,360 --> 30:41:57,191
new which is our forgot password view
36046
30:41:55,191 --> 30:41:59,039
which is new and password reset email
36047
30:41:59,039 --> 30:42:04,000
and quite a lot of files that have been
36048
30:42:01,831 --> 30:42:05,039
updated in here so let's just say git
36049
30:42:05,039 --> 30:42:10,231
and also git commit step 27 all right
36050
30:42:10,232 --> 30:42:14,160
and we have to push our changes also
36051
30:42:14,232 --> 30:42:18,232
so after we've done that let's also tag
36052
30:42:16,320 --> 30:42:20,160
as is tradition at the end of every
36053
30:42:18,232 --> 30:42:23,279
chapter we're going to tag this
36054
30:42:23,279 --> 30:42:27,119
and after doing that we can say git
36055
30:42:24,960 --> 30:42:29,680
status as you can see there's nothing to
36056
30:42:27,119 --> 30:42:31,591
commit in here and nothing to push
36057
30:42:29,679 --> 30:42:33,191
again as a tradition at the end of every
36058
30:42:31,592 --> 30:42:35,279
chapter we talk about what we need to
36059
30:42:33,191 --> 30:42:36,871
discuss in the coming chapter
36060
30:42:35,279 --> 30:42:38,720
so this is the exciting part at the
36061
30:42:36,872 --> 30:42:40,400
moment we've been working a lot with the
36062
30:42:38,720 --> 30:42:43,119
application code itself but we haven't
36063
30:42:40,399 --> 30:42:45,679
really done anything to make it ready
36064
30:42:43,119 --> 30:42:48,231
really for release the app store and the
36065
30:42:45,679 --> 30:42:50,000
play store google play store and there
36066
30:42:48,232 --> 30:42:52,080
are a lot of things that we have to do
36067
30:42:50,000 --> 30:42:52,872
such as screenshots we have to prepare
36068
30:42:52,872 --> 30:42:57,040
each respective store and we also have
36069
30:42:54,551 --> 30:42:57,759
to prepare the app icon the app name etc
36070
30:42:57,759 --> 30:43:00,799
lots of work to do and that's the kind
36071
30:42:59,679 --> 30:43:02,959
of thing that we're going to take care
36072
30:43:00,800 --> 30:43:05,512
of in the next chapter so i'll see you
36073
30:43:02,960 --> 30:43:07,512
there hello and welcome to chapter 45 of
36074
30:43:05,512 --> 30:43:09,512
the slatter course in previous chapters
36075
30:43:07,512 --> 30:43:11,279
we've been talking quite a bit about our
36076
30:43:09,512 --> 30:43:13,191
authentication and authentication block
36077
30:43:11,279 --> 30:43:14,639
and then in the previous chapter we made
36078
30:43:13,191 --> 30:43:16,399
our application a little bit more ready
36079
30:43:14,639 --> 30:43:18,160
for releasing in the app store and
36080
30:43:16,399 --> 30:43:20,720
google play store but we still have
36081
30:43:18,160 --> 30:43:22,552
quite a bit left and these are like some
36082
30:43:20,720 --> 30:43:24,639
of the final touches that we're gonna
36083
30:43:22,551 --> 30:43:26,000
put on our application before we can
36084
30:43:24,639 --> 30:43:27,039
release it in their respective app
36085
30:43:27,039 --> 30:43:30,719
um so what we're gonna do specifically
36086
30:43:29,512 --> 30:43:31,592
in this chapter as you can see in the
36087
30:43:30,720 --> 30:43:33,592
caption at the bottom of the screen
36088
30:43:31,592 --> 30:43:34,960
we're gonna take care of our app icons
36089
30:43:33,592 --> 30:43:37,279
and the app name and i'm gonna take you
36090
30:43:34,960 --> 30:43:40,000
through the process which works very
36091
30:43:37,279 --> 30:43:41,911
well and has always worked for me so i'm
36092
30:43:40,000 --> 30:43:43,512
going to show you how to grab
36093
30:43:41,911 --> 30:43:46,551
free icons bring them into your
36094
30:43:43,512 --> 30:43:48,160
application and also be able to kind of
36095
30:43:46,551 --> 30:43:51,119
like automate that process you don't
36096
30:43:48,160 --> 30:43:53,192
have to generate the icons by hand
36097
30:43:51,119 --> 30:43:55,831
so to begin with we have to talk about
36098
30:43:53,191 --> 30:43:57,279
what app icons are so so far we've been
36099
30:43:55,831 --> 30:43:59,759
just kind of like running our
36100
30:43:57,279 --> 30:44:01,911
application and just looking at what is
36101
30:43:59,759 --> 30:44:03,831
inside the app itself we haven't really
36102
30:44:01,911 --> 30:44:06,160
have we haven't had the time to actually
36103
30:44:03,831 --> 30:44:08,399
look what's the application
36104
30:44:06,160 --> 30:44:09,440
how the application is represented from
36105
30:44:09,440 --> 30:44:15,191
perspective on the operating system so
36106
30:44:12,720 --> 30:44:16,720
if i bring up scr cpy in the middle of
36107
30:44:16,720 --> 30:44:20,080
and then i bring this application and
36108
30:44:20,080 --> 30:44:23,680
all the apps up in this android phone
36109
30:44:21,911 --> 30:44:26,319
for instance this you can see is our
36110
30:44:23,679 --> 30:44:29,039
application right here so if i change
36111
30:44:29,039 --> 30:44:32,639
a little bit here so you see better so
36112
30:44:32,639 --> 30:44:36,639
notes application is right here and it
36113
30:44:34,399 --> 30:44:39,119
has a default icon so every application
36114
30:44:36,639 --> 30:44:40,960
on both android and ios and pretty much
36115
30:44:39,119 --> 30:44:44,720
in every operating system has its own
36116
30:44:40,960 --> 30:44:46,480
icon so flutter allows you or flutter
36117
30:44:44,720 --> 30:44:47,680
provides a default icon for all the
36118
30:44:46,479 --> 30:44:50,080
applications that you create with
36119
30:44:47,679 --> 30:44:51,591
flutter create so you have a default
36120
30:44:50,080 --> 30:44:52,872
icon that is displayed for your
36121
30:44:52,872 --> 30:44:56,720
this is just a default flutter icon as
36122
30:44:54,872 --> 30:44:59,120
i'm mentioning so we need to have our
36123
30:44:56,720 --> 30:45:00,399
own icon that the operating system can
36124
30:45:00,399 --> 30:45:04,639
in order to represent our application
36125
30:45:02,551 --> 30:45:06,479
amongst all the other applications that
36126
30:45:04,639 --> 30:45:08,232
are installed on that target operating
36127
30:45:08,232 --> 30:45:12,480
so that's for the icons and then what we
36128
30:45:10,479 --> 30:45:14,720
have to talk about is what splash
36129
30:45:12,479 --> 30:45:16,479
screens are so splash screen is this
36130
30:45:14,720 --> 30:45:19,119
little screen that the operating system
36131
30:45:16,479 --> 30:45:22,080
displays on the screen and as soon as
36132
30:45:19,119 --> 30:45:23,591
you open an application so i'm wondering
36133
30:45:22,080 --> 30:45:24,960
if there's any application for instance
36134
30:45:24,960 --> 30:45:28,960
open up in order for us to see a splash
36135
30:45:27,039 --> 30:45:32,551
screen so let's for instance go here to
36136
30:45:28,960 --> 30:45:34,232
the clock application and as i saw here
36137
30:45:32,551 --> 30:45:37,119
let me just bring it up again so if i
36138
30:45:37,119 --> 30:45:41,591
by going here and then i go to the clock
36139
30:45:40,232 --> 30:45:43,512
application again you can see that there
36140
30:45:43,512 --> 30:45:47,760
displays instantaneously and then just
36141
30:45:45,592 --> 30:45:49,192
disappears that is the splash screen and
36142
30:45:47,759 --> 30:45:50,871
or in this case you could actually see
36143
30:45:49,191 --> 30:45:52,799
it's the lack of its flat screen because
36144
30:45:50,872 --> 30:45:54,320
there's no splash screen apparently for
36145
30:45:52,800 --> 30:45:55,440
the clock application and let's go to
36146
30:45:55,440 --> 30:45:58,872
and this application opens up so fast it
36147
30:45:57,360 --> 30:46:00,720
probably doesn't even have a splash
36148
30:45:58,872 --> 30:46:02,479
screen but what essentially his flash
36149
30:46:00,720 --> 30:46:04,960
screen is is a screen as its name
36150
30:46:02,479 --> 30:46:08,639
indicate that gets displayed to the user
36151
30:46:04,960 --> 30:46:11,832
just very fast while flutter is
36152
30:46:08,639 --> 30:46:15,440
loading its binary to display to the to
36153
30:46:11,831 --> 30:46:17,360
um the user so there are two stages for
36154
30:46:15,440 --> 30:46:19,279
flutter to actually show a splash screen
36155
30:46:17,360 --> 30:46:21,512
one is when the application binary is
36156
30:46:19,279 --> 30:46:23,360
being loaded by the operating system and
36157
30:46:21,512 --> 30:46:26,232
then there is another stage when the
36158
30:46:23,360 --> 30:46:28,960
flutter engine is being loaded to be
36159
30:46:26,232 --> 30:46:30,639
basically kicking off your applications
36160
30:46:28,960 --> 30:46:32,080
process basically but i'm not going to
36161
30:46:30,639 --> 30:46:33,440
go into too much details about that but
36162
30:46:32,080 --> 30:46:34,960
just know that splashbearing is a screen
36163
30:46:33,440 --> 30:46:37,680
that the operating system displays the
36164
30:46:34,960 --> 30:46:39,680
user while it's loading the application
36165
30:46:37,679 --> 30:46:42,159
so if for instance your application is
36166
30:46:39,679 --> 30:46:44,399
being loaded or is being displayed for
36167
30:46:42,160 --> 30:46:47,360
the first time on an android telephone
36168
30:46:44,399 --> 30:46:48,551
version that has very old hardware
36169
30:46:47,360 --> 30:46:50,479
because there are thousands and
36170
30:46:48,551 --> 30:46:51,759
thousands of android devices out there
36171
30:46:50,479 --> 30:46:54,720
then the operating system may actually
36172
30:46:51,759 --> 30:46:57,759
take a lot of time in order to load your
36173
30:46:54,720 --> 30:46:59,191
binary and that time it will and during
36174
30:46:57,759 --> 30:47:01,439
that time it will display a splash
36175
30:46:59,191 --> 30:47:05,119
screen so we're going to fix both the
36176
30:47:01,440 --> 30:47:06,960
app icon and a splash screen soon
36177
30:47:05,119 --> 30:47:08,551
so let's now talk about where you can
36178
30:47:06,960 --> 30:47:10,232
actually find some icons so if you're a
36179
30:47:08,551 --> 30:47:11,759
designer and if you're comfortable with
36180
30:47:10,232 --> 30:47:13,512
figma or sketch for instance then you
36181
30:47:11,759 --> 30:47:16,000
can go and design your own app icon
36182
30:47:13,512 --> 30:47:19,040
you're more welcome to do that i can i
36183
30:47:16,000 --> 30:47:21,039
feel free with figma i'm not a sketch
36184
30:47:19,039 --> 30:47:22,319
user but i can design my like icons in
36185
30:47:21,039 --> 30:47:24,159
figma but that's not what we're going to
36186
30:47:22,320 --> 30:47:26,080
do in this chapter we're actually going
36187
30:47:24,160 --> 30:47:28,800
to go to this website as i'm showing you
36188
30:47:26,080 --> 30:47:30,160
here stockio.com and grab some free
36189
30:47:30,160 --> 30:47:35,832
if i minimize scrcpy here and bring up a
36190
30:47:35,831 --> 30:47:41,039
stock io.com you can't see that right
36191
30:47:38,479 --> 30:47:43,831
now i'll bring it to the screen
36192
30:47:41,039 --> 30:47:45,679
like that and you can see you can hear
36193
30:47:43,831 --> 30:47:47,360
go to for instance icons and then
36194
30:47:45,679 --> 30:47:49,191
there's a search functionality where you
36195
30:47:47,360 --> 30:47:51,680
can search for the type of icons that
36196
30:47:49,191 --> 30:47:54,000
you're interested in these icons are not
36197
30:47:51,679 --> 30:47:56,639
really free sometimes they're actually
36198
30:47:54,000 --> 30:48:00,800
they need to be paid for however you can
36199
30:47:56,639 --> 30:48:02,551
also find um cheap or even free icons
36200
30:48:00,800 --> 30:48:04,800
that you can use in your application but
36201
30:48:02,551 --> 30:48:06,800
it's very important that you attribute
36202
30:48:04,800 --> 30:48:09,911
the author work the way they ask you to
36203
30:48:06,800 --> 30:48:11,760
do that and i'll talk about that soon
36204
30:48:09,911 --> 30:48:14,160
so for our application we're actually
36205
30:48:11,759 --> 30:48:15,759
going to grab this particular icon so
36206
30:48:14,160 --> 30:48:17,440
it's called stock io we're going to go
36207
30:48:20,080 --> 30:48:25,040
note file icon okay so that's the icon
36208
30:48:23,039 --> 30:48:27,511
we are going to use for our application
36209
30:48:25,039 --> 30:48:29,591
and and you can go ahead and do the same
36210
30:48:27,512 --> 30:48:32,160
thing i mean it's not that the app store
36211
30:48:29,592 --> 30:48:33,832
is gonna like google play store and apps
36212
30:48:32,160 --> 30:48:35,440
are not gonna set us like they're not
36213
30:48:33,831 --> 30:48:38,720
gonna stop you from releasing your
36214
30:48:35,440 --> 30:48:40,872
application just because your icon
36215
30:48:38,720 --> 30:48:42,399
is the same icon as someone else's app
36216
30:48:42,399 --> 30:48:46,479
basically check that really unless your
36217
30:48:44,232 --> 30:48:47,760
icon represents a very well-known app
36218
30:48:47,759 --> 30:48:50,551
add the facebook icon to your
36219
30:48:49,279 --> 30:48:51,831
application then the people who are
36220
30:48:50,551 --> 30:48:53,759
reviewing your application are going to
36221
30:48:51,831 --> 30:48:54,871
know that immediately and recognize it
36222
30:48:53,759 --> 30:48:57,119
and then they're going to flag it and
36223
30:48:54,872 --> 30:48:58,872
perhaps reject your application but this
36224
30:48:57,119 --> 30:49:01,512
is such a generic icon that i don't
36225
30:48:58,872 --> 30:49:04,160
think anybody is going to basically
36226
30:49:01,512 --> 30:49:06,551
have anything to say about it if someone
36227
30:49:04,160 --> 30:49:08,400
else has used this already in one of the
36228
30:49:06,551 --> 30:49:10,159
hundreds and thousands of applications
36229
30:49:08,399 --> 30:49:12,871
that are available in in those
36230
30:49:10,160 --> 30:49:16,960
respective stores so what we need to do
36231
30:49:12,872 --> 30:49:19,120
here go and say free download as an svg
36232
30:49:16,960 --> 30:49:20,160
so i just did that so let's go in here
36233
30:49:24,160 --> 30:49:28,160
so i'm going to bring it up here and you
36234
30:49:25,440 --> 30:49:31,119
can see it's an svg and that's been
36235
30:49:28,160 --> 30:49:32,552
downloaded on my computer right now so
36236
30:49:32,551 --> 30:49:36,551
basically talk now a little bit about
36237
30:49:36,551 --> 30:49:40,800
so as you can see here in the
36238
30:49:38,872 --> 30:49:42,232
information that is provided here on the
36239
30:49:40,800 --> 30:49:44,551
screen i'm going to increase the size so
36240
30:49:42,232 --> 30:49:46,800
you see it better it says free for
36241
30:49:44,551 --> 30:49:48,872
personal and commercial use that's that
36242
30:49:46,800 --> 30:49:50,720
means even if your application is free
36243
30:49:50,720 --> 30:49:53,360
in this in this flutter course we're
36244
30:49:52,320 --> 30:49:54,960
going to release our application as a
36245
30:49:53,360 --> 30:49:56,800
free application of course but if even
36246
30:49:54,960 --> 30:49:58,960
if it's for a commercial use you're
36247
30:49:56,800 --> 30:50:02,232
allowed to use this icon but it says
36248
30:49:58,960 --> 30:50:04,080
with attribution to stock io.com so
36249
30:50:02,232 --> 30:50:07,120
what we should do if we're a good
36250
30:50:04,080 --> 30:50:09,279
citizens of the internet land then when
36251
30:50:07,119 --> 30:50:11,360
you basically upload your application to
36252
30:50:09,279 --> 30:50:13,592
the app store and google play store as
36253
30:50:11,360 --> 30:50:15,831
i'll show you later we will actually
36254
30:50:13,592 --> 30:50:19,512
write a little sentence and attribute
36255
30:50:15,831 --> 30:50:22,191
the um stock io.com website and even
36256
30:50:19,512 --> 30:50:24,551
maybe say icon is provided by
36257
30:50:22,191 --> 30:50:26,871
stockion.com and even place the entire
36258
30:50:28,479 --> 30:50:32,479
inside our application description when
36259
30:50:30,399 --> 30:50:34,399
we submit it to the respective app store
36260
30:50:32,479 --> 30:50:36,159
so be very careful about this because
36261
30:50:34,399 --> 30:50:39,191
there are actually artists that are
36262
30:50:36,160 --> 30:50:40,320
creating these icons for you so
36263
30:50:40,320 --> 30:50:44,160
see that it's free you may be attempted
36264
30:50:42,160 --> 30:50:45,440
to just say yeah i forget about i'm just
36265
30:50:44,160 --> 30:50:46,872
gonna put it there i'm not gonna
36266
30:50:45,440 --> 30:50:49,360
attribute the author but if you think
36267
30:50:46,872 --> 30:50:50,160
about it it's just one line of text that
36268
30:50:49,360 --> 30:50:51,592
you're going to write in your
36269
30:50:50,160 --> 30:50:54,232
application description it's worth it
36270
30:50:51,592 --> 30:50:55,832
because someone has actually sat there
36271
30:50:54,232 --> 30:50:57,120
spent quite a lot of time designing this
36272
30:50:57,911 --> 30:51:02,000
karma to make sure that we follow these
36273
30:51:00,160 --> 30:51:03,279
attributions apps that are provided in
36274
30:51:02,000 --> 30:51:05,512
the website where you download your
36275
30:51:05,512 --> 30:51:10,551
so now we have this svg icon so if i
36276
30:51:08,000 --> 30:51:13,191
bring my finder here so we just have one
36277
30:51:10,551 --> 30:51:14,720
file in here but as you'll soon see when
36278
30:51:13,191 --> 30:51:16,720
we submit our application to app store
36279
30:51:14,720 --> 30:51:19,360
and play store google play store we have
36280
30:51:16,720 --> 30:51:20,872
to provide various icon sizes all right
36281
30:51:20,872 --> 30:51:24,720
it's not that you have to provide the
36282
30:51:22,320 --> 30:51:26,800
various icon sizes to the app store but
36283
30:51:24,720 --> 30:51:28,399
when you build your application you
36284
30:51:26,800 --> 30:51:30,720
actually have to provide these different
36285
30:51:28,399 --> 30:51:33,360
icon sizes to the operating system for
36286
30:51:30,720 --> 30:51:35,911
instance if the user is loading your
36287
30:51:33,360 --> 30:51:38,399
application on a very old iphone without
36288
30:51:35,911 --> 30:51:40,959
a retina display which i highly doubt
36289
30:51:38,399 --> 30:51:42,479
now nowadays almost all ios devices have
36290
30:51:42,479 --> 30:51:47,039
then that user with that phone that
36291
30:51:44,639 --> 30:51:49,039
phone particularly cannot display very
36292
30:51:47,039 --> 30:51:51,039
high resolution images so it needs to
36293
30:51:51,039 --> 30:51:54,159
app icon resolution however if you run
36294
30:51:54,160 --> 30:52:00,232
app for instance on an iphone
36295
30:51:56,872 --> 30:52:02,872
13 pro max then that device can actually
36296
30:52:00,232 --> 30:52:05,592
display a high resolution image so
36297
30:52:02,872 --> 30:52:08,000
using this svg file we have to create
36298
30:52:05,592 --> 30:52:10,000
and slice it up so that we have various
36299
30:52:08,000 --> 30:52:11,440
icon sizes to provide for various
36300
30:52:10,000 --> 30:52:12,831
operating systems and device
36301
30:52:12,831 --> 30:52:16,399
so that's what we're going to do but
36302
30:52:14,960 --> 30:52:18,080
we're not going to do that by hand we're
36303
30:52:16,399 --> 30:52:21,039
going to use a tool in here called app
36304
30:52:18,080 --> 30:52:22,080
icon dot co so let's go in app icon dot
36305
30:52:22,080 --> 30:52:28,479
and this is a great free tool that you
36306
30:52:24,160 --> 30:52:31,832
can use and you can just basically
36307
30:52:31,831 --> 30:52:36,871
target and it will generate your icons
36308
30:52:34,551 --> 30:52:39,440
for you so let's go ahead and do that
36309
30:52:36,872 --> 30:52:40,551
i'm going to drag this svg in here just
36310
30:52:40,551 --> 30:52:46,000
all right and you can see that i can
36311
30:52:43,592 --> 30:52:47,592
generate the icons for the destinations
36312
30:52:46,000 --> 30:52:49,759
that i'm interested in our application
36313
30:52:47,592 --> 30:52:52,000
doesn't support watch os at the moment
36314
30:52:49,759 --> 30:52:53,439
and we're not a mac os application so at
36315
30:52:52,000 --> 30:52:57,592
the moment we're just saying iphone and
36316
30:52:57,592 --> 30:53:01,440
so let's just generate these icons and
36317
30:52:59,759 --> 30:53:03,911
if i go in here i can see that there was
36318
30:53:01,440 --> 30:53:05,911
a zip file generated in here so let's
36319
30:53:03,911 --> 30:53:07,831
just unzip this file and have a look at
36320
30:53:05,911 --> 30:53:10,479
it and you see that there's a folder
36321
30:53:10,479 --> 30:53:16,399
it has android app store assets etc in
36322
30:53:16,479 --> 30:53:19,591
so now that we have these icons
36323
30:53:18,000 --> 30:53:21,279
generated here as a caption indicates we
36324
30:53:19,592 --> 30:53:22,872
have to add them to our application so
36325
30:53:21,279 --> 30:53:23,592
how do we do that do we go ahead and
36326
30:53:23,592 --> 30:53:27,760
add these by hand no but there is
36327
30:53:26,232 --> 30:53:30,480
actually better way of doing this so
36328
30:53:27,759 --> 30:53:32,959
i'll explain it to you right now
36329
30:53:30,479 --> 30:53:35,039
there is a package called flutter
36330
30:53:32,960 --> 30:53:37,280
launcher icons that can take care of
36331
30:53:35,039 --> 30:53:39,591
this for you so instead of you having to
36332
30:53:37,279 --> 30:53:41,512
place these icons manually inside your
36333
30:53:39,592 --> 30:53:42,872
application binary or inside your
36334
30:53:41,512 --> 30:53:44,551
application source code for instance
36335
30:53:42,872 --> 30:53:47,760
visual studio code or android studio it
36336
30:53:44,551 --> 30:53:48,639
can do that for you so let's go to pub
36337
30:53:48,639 --> 30:53:53,512
i'm getting rid of this dialog here as
36338
30:53:50,639 --> 30:53:56,160
well and let's search for flutter
36339
30:53:56,160 --> 30:53:59,911
and we found it right here and you can
36340
30:53:58,000 --> 30:54:02,000
see that it is provided by the flutter
36341
30:53:59,911 --> 30:54:04,872
community right there and there is
36342
30:54:02,000 --> 30:54:07,039
information on how you should actually
36343
30:54:04,872 --> 30:54:08,000
configure this and we'll get there soon
36344
30:54:09,039 --> 30:54:13,511
but what we first need to do
36345
30:54:15,831 --> 30:54:20,799
our application so this uh
36346
30:54:21,512 --> 30:54:26,080
let's go to installing in here and
36347
30:54:23,831 --> 30:54:28,639
you'll see here that it says
36348
30:54:26,080 --> 30:54:30,720
dart pub and with flutter we want to do
36349
30:54:28,639 --> 30:54:33,440
this basically father pub at flutter
36350
30:54:30,720 --> 30:54:35,040
launcher icons okay so let's go ahead in
36351
30:54:33,440 --> 30:54:37,512
our application so i'm going to bring
36352
30:54:37,512 --> 30:54:40,800
let's go to terminal so let me bring
36353
30:54:40,800 --> 30:54:46,000
and let's just paste that command in
36354
30:54:46,000 --> 30:54:49,512
all right so that is just going to add
36355
30:54:47,759 --> 30:54:52,080
flutter launcher icons to our
36356
30:54:52,551 --> 30:54:57,039
and so that's the adding of it so if you
36357
30:54:54,720 --> 30:54:58,551
go to pop spec yaml now and have a look
36358
30:54:57,039 --> 30:55:00,231
at our yaml file you can see that
36359
30:54:58,551 --> 30:55:02,639
there's this flutter launcher icons
36360
30:55:00,232 --> 30:55:03,911
added right here okay then what we need
36361
30:55:02,639 --> 30:55:05,911
to do is to create some sort of a
36362
30:55:03,911 --> 30:55:08,800
configuration file for this plugin and
36363
30:55:05,911 --> 30:55:10,872
to understand how it should generate our
36364
30:55:08,800 --> 30:55:11,911
icons for us you can see if we go back
36365
30:55:11,911 --> 30:55:14,720
you can see that there's some
36366
30:55:12,960 --> 30:55:16,639
information about that if you read the
36367
30:55:14,720 --> 30:55:18,160
readme file it actually asks you
36368
30:55:16,639 --> 30:55:20,639
actually to generate a file called
36369
30:55:18,160 --> 30:55:22,080
flutter launcher icons yaml and that's
36370
30:55:20,639 --> 30:55:24,319
exactly what we're going to do in here
36371
30:55:22,080 --> 30:55:26,000
so let's go to the root folder of our
36372
30:55:27,759 --> 30:55:31,511
folder in here so make sure that you're
36373
30:55:29,360 --> 30:55:35,119
in the root folder of your application
36374
30:55:31,512 --> 30:55:37,191
and then i'm just gonna say new file
36375
30:55:35,119 --> 30:55:38,799
and let's just add flutter launcher
36376
30:55:38,800 --> 30:55:44,479
and in here they basically say add this
36377
30:55:47,279 --> 30:55:52,479
here copy this information as it is
36378
30:55:50,160 --> 30:55:55,440
stated there and place it there but we
36379
30:55:55,440 --> 30:56:01,680
and basically key in here called remove
36380
30:55:58,479 --> 30:56:04,399
alpha ios and we have to set this to
36381
30:56:01,679 --> 30:56:06,231
true and this is a key that i don't know
36382
30:56:04,399 --> 30:56:09,119
if it's actually documented so let's
36383
30:56:06,232 --> 30:56:11,360
have a look at the documentation in here
36384
30:56:09,119 --> 30:56:13,440
let's see version scores change log
36385
30:56:13,440 --> 30:56:18,232
it's not really documented unfortunately
36386
30:56:16,232 --> 30:56:20,232
but there may be inside the git
36387
30:56:18,232 --> 30:56:22,000
repository for this application like
36388
30:56:20,232 --> 30:56:24,232
there may be some good documentation to
36389
30:56:22,000 --> 30:56:26,872
be honest with you change log
36390
30:56:26,872 --> 30:56:30,960
flavors could there be anything in there
36391
30:56:30,960 --> 30:56:35,192
no unfortunately but i will just explain
36392
30:56:33,279 --> 30:56:37,440
what this key basically does what it
36393
30:56:37,440 --> 30:56:42,320
as an operating system it doesn't allow
36394
30:56:39,440 --> 30:56:45,360
alpha channel transparency channel on
36395
30:56:42,320 --> 30:56:46,800
its icons on its app icons so
36396
30:56:45,360 --> 30:56:49,039
what you need to do is to get rid of
36397
30:56:46,800 --> 30:56:50,400
that so when we generate our icons we're
36398
30:56:49,039 --> 30:56:53,119
going to tell this plugin that hey when
36399
30:56:50,399 --> 30:56:55,191
you're generating the ios icons remove
36400
30:56:53,119 --> 30:56:56,959
the alpha channel and for you designers
36401
30:56:55,191 --> 30:56:58,639
out there you already know what alpha
36402
30:56:58,639 --> 30:57:02,872
so it's just a transparency layer
36403
30:57:01,440 --> 30:57:05,760
all right so what we need to do now is
36404
30:57:02,872 --> 30:57:09,832
to grab our icon the downloaded icon and
36405
30:57:05,759 --> 30:57:11,591
place it inside assets icon icon.png
36406
30:57:09,831 --> 30:57:13,511
okay so as you can see in here let's see
36407
30:57:11,592 --> 30:57:16,639
if you have an assets folder and we
36408
30:57:13,512 --> 30:57:18,720
don't so let's go ahead and say new file
36409
30:57:18,720 --> 30:57:23,191
and i'm going to say assets
36410
30:57:20,639 --> 30:57:24,872
and then we're gonna call it icon okay
36411
30:57:24,872 --> 30:57:30,160
and let's go then and bring that app
36412
30:57:27,440 --> 30:57:32,160
store png file that is right here and
36413
30:57:30,160 --> 30:57:34,320
just place it inside the folder that we
36414
30:57:32,160 --> 30:57:35,680
just created so it's a huge file okay
36415
30:57:35,679 --> 30:57:39,439
so now that we've done that and you'll
36416
30:57:37,440 --> 30:57:42,160
be wondering okay where why is it under
36417
30:57:39,440 --> 30:57:44,320
assets icon and that's because in this
36418
30:57:42,160 --> 30:57:47,760
launcher configuration we said that that
36419
30:57:44,320 --> 30:57:49,832
icon should be there you see icon png so
36420
30:57:47,759 --> 30:57:52,399
what we need to do now is just to rename
36421
30:57:55,279 --> 30:58:02,080
package can find it under assets icon
36422
30:57:57,911 --> 30:58:04,479
icon ph png as it's specified here okay
36423
30:58:02,080 --> 30:58:06,479
so in order to then generate your icons
36424
30:58:04,479 --> 30:58:08,399
you just have to run this for
36425
30:58:06,479 --> 30:58:10,399
this command right here so i'm gonna i'm
36426
30:58:10,399 --> 30:58:14,231
let's see uh terminal is actually right
36427
30:58:14,232 --> 30:58:19,592
um let's go here terminals and i'm then
36428
30:58:17,831 --> 30:58:22,080
going to clean the terminal get rid of
36429
30:58:19,592 --> 30:58:25,832
the left hand side bar i'm going to say
36430
30:58:22,080 --> 30:58:29,592
flutter pump run flutter launcher icons
36431
30:58:30,000 --> 30:58:34,160
that is going to basically do its job
36432
30:58:31,512 --> 30:58:36,400
have a look at um the configuration and
36433
30:58:34,160 --> 30:58:38,720
then it's going to generate our icons
36434
30:58:38,720 --> 30:58:42,872
so in order to test this we actually
36435
30:58:40,399 --> 30:58:44,399
need to make a clean build and this is a
36436
30:58:42,872 --> 30:58:45,911
little bit of a pain in the neck and
36437
30:58:44,399 --> 30:58:47,591
that's completely okay it's just because
36438
30:58:45,911 --> 30:58:49,591
we change something dramatic in our
36439
30:58:47,592 --> 30:58:51,040
application and then we need to just
36440
30:58:49,592 --> 30:58:52,872
make sure that we stop the running of
36441
30:58:51,039 --> 30:58:54,479
our application so i can see now this
36442
30:58:52,872 --> 30:58:56,720
particular application at the moment
36443
30:58:54,479 --> 30:58:57,679
isn't running in scrcpy so that's really
36444
30:58:57,679 --> 30:59:02,079
as you can note here this is the icon of
36445
30:59:00,080 --> 30:59:03,911
our application right now without us
36446
30:59:03,911 --> 30:59:09,911
so let's just do as the caption
36447
30:59:06,080 --> 30:59:09,911
indicates we're gonna do flutter clean
36448
30:59:11,119 --> 30:59:14,959
and after cleaning is done we're just
36449
30:59:14,960 --> 30:59:19,440
pop get in order to grab all our
36450
30:59:19,440 --> 30:59:23,512
and i can see that you can't actually
36451
30:59:21,360 --> 30:59:26,080
see what i typed there but that's what i
36452
30:59:23,512 --> 30:59:27,040
typed flutter pup get as you can see
36453
30:59:27,039 --> 30:59:30,871
and it grabbed all the dependencies
36454
30:59:28,720 --> 30:59:33,759
again and what i'm going to do is just
36455
30:59:30,872 --> 30:59:34,639
going to go to main dart file in here
36456
30:59:34,639 --> 30:59:38,551
just run the application but before
36457
30:59:37,191 --> 30:59:40,319
doing that i'm just going to also make
36458
30:59:38,551 --> 30:59:42,551
sure that flutter select device has
36459
30:59:40,320 --> 30:59:44,232
selected the correct device which is my
36460
30:59:42,551 --> 30:59:46,639
android app and which is my android
36461
30:59:44,232 --> 30:59:48,320
phone and just gonna say run without
36462
30:59:48,320 --> 30:59:52,552
it could actually help if you removed
36463
30:59:52,551 --> 30:59:56,159
so just to make sure that that
36464
30:59:54,399 --> 30:59:59,279
application is completely deleted from
36465
30:59:56,160 --> 31:00:01,360
the phone so it's completely gone now
36466
30:59:59,279 --> 31:00:04,160
and really all we have to do is just
36467
31:00:01,360 --> 31:00:06,551
right now wait for this gradle task to
36468
31:00:04,160 --> 31:00:09,279
complete its work so i'm just gonna let
36469
31:00:12,160 --> 31:00:17,120
now you can see that our application is
36470
31:00:14,160 --> 31:00:20,160
running on uh scr cpy which is an actual
36471
31:00:17,119 --> 31:00:22,720
real phone in here so if i now go back
36472
31:00:20,160 --> 31:00:24,960
here and bring up all the apps installed
36473
31:00:22,720 --> 31:00:27,191
on this device you can see we have this
36474
31:00:24,960 --> 31:00:29,760
application running right there my notes
36475
31:00:27,191 --> 31:00:31,039
and it has this little icon here and
36476
31:00:29,759 --> 31:00:32,639
this is another application that i've
36477
31:00:31,039 --> 31:00:35,039
had from before so i can just uninstall
36478
31:00:32,639 --> 31:00:37,119
that safely and we just go to our
36479
31:00:35,039 --> 31:00:39,679
application in here you can see it is as
36480
31:00:37,119 --> 31:00:42,319
we left it last time but the important
36481
31:00:39,679 --> 31:00:44,319
thing is that there is a new icon
36482
31:00:45,119 --> 31:00:49,911
that's really good now we've tested that
36483
31:00:47,119 --> 31:00:51,119
on android so the testing of android is
36484
31:00:49,911 --> 31:00:52,319
actually done so you don't need this
36485
31:00:51,119 --> 31:00:53,512
caption at the bottom of the screen i
36486
31:00:52,320 --> 31:00:55,280
should have brought up brought it up a
36487
31:00:53,512 --> 31:00:57,832
little bit earlier and what we need to
36488
31:00:55,279 --> 31:01:00,479
do is just to run our application on ios
36489
31:00:57,831 --> 31:01:02,720
as well so i'm going to stop the the
36490
31:01:00,479 --> 31:01:04,159
execution of the application on android
36491
31:01:02,720 --> 31:01:07,512
and i'm just going to say flutter select
36492
31:01:04,160 --> 31:01:09,832
device and iphone 13 pro which is a
36493
31:01:07,512 --> 31:01:12,551
simulator and then i'm just gonna say
36494
31:01:09,831 --> 31:01:14,720
run and this is also gonna perhaps take
36495
31:01:12,551 --> 31:01:17,279
some time because usually i run my
36496
31:01:14,720 --> 31:01:19,440
applications on the android telephone as
36497
31:01:17,279 --> 31:01:22,872
you've seen with scrcpy i usually don't
36498
31:01:19,440 --> 31:01:25,440
run with an ios simulator or a device
36499
31:01:22,872 --> 31:01:28,080
when i'm developing with flutter
36500
31:01:25,440 --> 31:01:30,872
and but it is always good practice to do
36501
31:01:28,080 --> 31:01:34,160
that so now it's doing the xcode build
36502
31:01:30,872 --> 31:01:36,232
and let's just wait for it to finish
36503
31:01:34,160 --> 31:01:38,639
okay and now we can see that our
36504
31:01:36,232 --> 31:01:40,800
application is also running on ios so
36505
31:01:38,639 --> 31:01:42,080
what we can do in here is just to send
36506
31:01:40,800 --> 31:01:45,192
the app to the background and then you
36507
31:01:42,080 --> 31:01:48,080
can see that we have our my notes
36508
31:01:45,191 --> 31:01:50,799
application right here and the icon that
36509
31:01:48,080 --> 31:01:53,592
we basically created for our app so that
36510
31:01:53,592 --> 31:01:57,279
what we need to talk about now is our
36511
31:01:55,759 --> 31:01:58,319
app name and as you can see in the
36512
31:01:57,279 --> 31:01:59,592
caption at the bottom of the screen
36513
31:01:58,320 --> 31:02:02,640
since we need to update the app name
36514
31:01:59,592 --> 31:02:04,232
it's not so nice as it is now and right
36515
31:02:02,639 --> 31:02:07,119
now it's just saying my notes with a
36516
31:02:04,232 --> 31:02:10,080
lowercase and and capital m and all in
36517
31:02:07,119 --> 31:02:11,831
one word so it's not as it should be so
36518
31:02:10,080 --> 31:02:13,512
let's go ahead and fix this and the way
36519
31:02:11,831 --> 31:02:15,591
to do that is that you have to do it in
36520
31:02:13,512 --> 31:02:16,872
two places one for ios and one for
36521
31:02:15,592 --> 31:02:19,120
android so we're going to take care of
36522
31:02:16,872 --> 31:02:21,120
ios first so in visual studio code i'm
36523
31:02:19,119 --> 31:02:23,759
going to jump into a file called info
36524
31:02:21,119 --> 31:02:26,871
key list and this is the info p list is
36525
31:02:23,759 --> 31:02:28,959
like basically an ios applications and
36526
31:02:26,872 --> 31:02:30,320
kind of configuration place which you
36527
31:02:28,960 --> 31:02:33,192
can configure a few things for
36528
31:02:30,320 --> 31:02:36,320
application like permissions etc and if
36529
31:02:33,191 --> 31:02:38,319
you go to this uh file ios runner slash
36530
31:02:36,320 --> 31:02:40,232
info p list so let's go in there and
36531
31:02:38,320 --> 31:02:42,320
then there is a key in here called core
36532
31:02:42,320 --> 31:02:47,120
let's see if you can find a bundle name
36533
31:02:45,191 --> 31:02:49,279
cf bundle name at the moment it says my
36534
31:02:47,119 --> 31:02:53,039
notes in here so we need to fix this
36535
31:02:49,279 --> 31:02:54,479
just to call it basically my notes like
36536
31:02:55,360 --> 31:02:58,800
and let's see if there's any other place
36537
31:02:57,039 --> 31:03:01,191
in here we can also see that there is a
36538
31:02:58,800 --> 31:03:05,192
bundle display name which we may also
36539
31:03:01,191 --> 31:03:05,191
have to fix so let's just call it my
36540
31:03:06,479 --> 31:03:10,399
and to be honest with you we don't maybe
36541
31:03:08,160 --> 31:03:12,160
actually have to change the bundle name
36542
31:03:10,399 --> 31:03:14,479
i would say maybe changing the bundle
36543
31:03:14,479 --> 31:03:18,080
let's not do the bundle name actually
36544
31:03:16,551 --> 31:03:21,039
i'm going to change the caption and just
36545
31:03:18,080 --> 31:03:23,360
call it changing the bundle display name
36546
31:03:21,039 --> 31:03:25,039
because i would say a bundle name and
36547
31:03:23,360 --> 31:03:26,720
bundle display name are two completely
36548
31:03:25,039 --> 31:03:28,551
different things the bundle name is like
36549
31:03:26,720 --> 31:03:29,911
the binary name of the application and
36550
31:03:28,551 --> 31:03:32,399
the bundled display name is what the
36551
31:03:29,911 --> 31:03:34,639
user sees on the screen so let's not do
36552
31:03:32,399 --> 31:03:36,399
the bundle name and let's just change
36553
31:03:34,639 --> 31:03:38,319
the bundle display name in here and just
36554
31:03:38,320 --> 31:03:43,360
so after doing that we could try to
36555
31:03:41,279 --> 31:03:44,872
stop the application in here and then
36556
31:03:45,911 --> 31:03:51,911
it may take effect it depends kind of on
36557
31:03:49,360 --> 31:03:55,191
how flutter is gonna trigger these
36558
31:03:51,911 --> 31:03:57,591
changes with xcode build and how xcode
36559
31:03:55,191 --> 31:03:58,720
build is going to interpret our changes
36560
31:03:58,720 --> 31:04:02,639
it might actually be necessary for you
36561
31:04:02,639 --> 31:04:06,872
and then run the application again on
36562
31:04:04,800 --> 31:04:08,800
that target platform so that's just a
36563
31:04:06,872 --> 31:04:11,120
bit unfortunate when you change like
36564
31:04:08,800 --> 31:04:13,360
huge changes when you make you changes
36565
31:04:11,119 --> 31:04:15,512
to the applications structure
36566
31:04:13,360 --> 31:04:17,911
and i could see now that my notes was
36567
31:04:15,512 --> 31:04:19,832
actually taking the fed effect right now
36568
31:04:17,911 --> 31:04:21,759
so we don't have to do any flutter clean
36569
31:04:21,759 --> 31:04:26,231
then what we need to do also is to
36570
31:04:24,232 --> 31:04:29,760
update the app name on android and we do
36571
31:04:26,232 --> 31:04:32,080
that by going to android app src main
36572
31:04:29,759 --> 31:04:35,279
and we could just do that right now so
36573
31:04:32,080 --> 31:04:38,320
let's go to android manifest xml
36574
31:04:35,279 --> 31:04:40,232
and you can see here is android app src
36575
31:04:38,320 --> 31:04:41,592
main i'm going to go in there and then
36576
31:04:41,592 --> 31:04:45,832
key in here android label and just
36577
31:04:43,191 --> 31:04:48,080
change it to my notes all right
36578
31:04:45,831 --> 31:04:50,231
so let's just do that and then i'm going
36579
31:04:48,080 --> 31:04:52,232
to go here just to a flutter select
36580
31:04:50,232 --> 31:04:55,440
device run it on my android phone then
36581
31:04:52,232 --> 31:04:57,832
i'm just going to stop the ios execution
36582
31:04:55,440 --> 31:05:00,000
and just go to run run without debugging
36583
31:04:57,831 --> 31:05:03,511
so that you can try to run the
36584
31:05:00,000 --> 31:05:06,399
application on this android phone so if
36585
31:05:03,512 --> 31:05:08,720
everything works as expected then we
36586
31:05:06,399 --> 31:05:11,039
should have our mynotes application
36587
31:05:08,720 --> 31:05:13,360
right here with the correct uh
36588
31:05:11,039 --> 31:05:16,000
icon and then we should also have the
36589
31:05:13,360 --> 31:05:17,680
correct label alright so let's just send
36590
31:05:17,679 --> 31:05:20,871
let's go in here and have a look at our
36591
31:05:19,440 --> 31:05:24,551
application you can see now it says my
36592
31:05:20,872 --> 31:05:26,639
notes the right icon and also um yeah
36593
31:05:24,551 --> 31:05:28,231
the application is running as it should
36594
31:05:26,639 --> 31:05:30,232
and if you go back to our ios
36595
31:05:28,232 --> 31:05:33,911
application then we can see the name is
36596
31:05:30,232 --> 31:05:36,000
also correct and the right icon
36597
31:05:33,911 --> 31:05:38,000
so we could actually say that we've
36598
31:05:36,000 --> 31:05:39,440
already tested things on ios they seem
36599
31:05:38,000 --> 31:05:41,119
to be working so if i bring up the
36600
31:05:39,440 --> 31:05:41,911
simulator the app is working as it
36601
31:05:42,720 --> 31:05:47,680
we don't have any crashes the icon is
36602
31:05:44,551 --> 31:05:50,080
correct and the label is correct and on
36603
31:05:47,679 --> 31:05:52,000
android if we bring up scrcpy again you
36604
31:05:52,000 --> 31:05:57,360
icon is correct and also the name of the
36605
31:05:58,232 --> 31:06:01,192
we've done what we said that we're going
36606
31:05:59,592 --> 31:06:03,360
to do in this chapter we talked about
36607
31:06:01,191 --> 31:06:06,080
icons and we also talked about what
36608
31:06:03,360 --> 31:06:08,800
splash screens are in preparation for
36609
31:06:06,080 --> 31:06:10,479
the next chapter and it's usually the um
36610
31:06:08,800 --> 31:06:11,911
what we do in the and at the end of
36611
31:06:10,479 --> 31:06:14,000
every chapter we talk about what we need
36612
31:06:11,911 --> 31:06:15,759
to discuss in the chapter that's coming
36613
31:06:14,000 --> 31:06:18,720
so what we need to do in the chapter
36614
31:06:15,759 --> 31:06:21,439
that is coming is to prepare ourselves
36615
31:06:18,720 --> 31:06:23,680
for creating splash screens you now know
36616
31:06:21,440 --> 31:06:25,592
what splash screens are but in the next
36617
31:06:23,679 --> 31:06:26,871
chapter we're gonna go and create them
36618
31:06:26,872 --> 31:06:31,279
we're gonna add them to our application
36619
31:06:29,119 --> 31:06:32,080
so grab some refreshments if you want to
36620
31:06:33,039 --> 31:06:36,799
i'll see you in the next chapter hello
36621
31:06:34,872 --> 31:06:39,279
and welcome to chapter 46 of the
36622
31:06:36,800 --> 31:06:40,551
slaughter course um if you follow the
36623
31:06:40,551 --> 31:06:44,159
chronologically you'll know that we've
36624
31:06:42,000 --> 31:06:46,960
done a lot of preparation and we're
36625
31:06:44,160 --> 31:06:49,120
actually about to start preparing our
36626
31:06:46,960 --> 31:06:51,360
app to be submitted to the app store and
36627
31:06:49,119 --> 31:06:53,911
google play store but before doing that
36628
31:06:51,360 --> 31:06:56,000
now that we fixed our icons and
36629
31:06:53,911 --> 31:06:58,000
our application name for both android
36630
31:06:56,000 --> 31:07:00,080
and ios we need to fix something called
36631
31:07:00,080 --> 31:07:04,080
and we talked briefly about splash
36632
31:07:02,160 --> 31:07:06,480
screens and what they actually mean in
36633
31:07:04,080 --> 31:07:09,040
the mobile world for instance in both
36634
31:07:06,479 --> 31:07:11,440
android os and ios and ipad os for that
36635
31:07:09,039 --> 31:07:13,191
matter but for those of you who missed
36636
31:07:13,191 --> 31:07:17,279
a splash screen is a screen that is
36637
31:07:15,039 --> 31:07:19,511
displayed to the user when they open
36638
31:07:17,279 --> 31:07:21,360
your application from a cold
36639
31:07:19,512 --> 31:07:22,960
boots basically meaning that your
36640
31:07:21,360 --> 31:07:24,551
application hasn't been running for
36641
31:07:22,960 --> 31:07:26,872
instance in the background in that
36642
31:07:24,551 --> 31:07:28,800
operating system and while the
36643
31:07:26,872 --> 31:07:30,400
application binary is being loaded to
36644
31:07:28,800 --> 31:07:31,832
the screen and the experience is being
36645
31:07:31,831 --> 31:07:36,720
um then the host operating system in
36646
31:07:34,479 --> 31:07:38,959
this case android and ios will have to
36647
31:07:36,720 --> 31:07:40,720
display something to the user while
36648
31:07:38,960 --> 31:07:41,680
they're waiting for the experience to be
36649
31:07:41,679 --> 31:07:45,511
so in native applications for instance
36650
31:07:43,911 --> 31:07:47,831
if you're creating a native
36651
31:07:47,831 --> 31:07:52,799
coupling for ios sorry kotlin for
36652
31:07:50,080 --> 31:07:55,512
android and swift or swift ui for ios
36653
31:07:52,800 --> 31:07:57,440
then um in that case there is there is
36654
31:07:55,512 --> 31:07:58,800
only one stage of loading for
36655
31:07:58,800 --> 31:08:01,911
you submit your binary to apple and then
36656
31:08:01,911 --> 31:08:06,479
um to google play store and then the
36657
31:08:04,800 --> 31:08:09,120
host operating system just loads your
36658
31:08:06,479 --> 31:08:10,551
binary and then that um your main user
36659
31:08:09,119 --> 31:08:12,551
interface is displayed to the user so
36660
31:08:12,551 --> 31:08:17,440
in flutter however there are two stages
36661
31:08:14,479 --> 31:08:19,759
of loading your application one is
36662
31:08:17,440 --> 31:08:22,400
the your application binary in itself
36663
31:08:19,759 --> 31:08:24,000
being loaded and the second stage is for
36664
31:08:22,399 --> 31:08:25,591
the flutter experience to actually be
36665
31:08:24,000 --> 31:08:28,399
loaded inside your application since
36666
31:08:25,592 --> 31:08:30,000
flutter is its own sdk basically
36667
31:08:28,399 --> 31:08:31,119
so what we're going to do is we're going
36668
31:08:30,000 --> 31:08:32,160
to create a splash screen that gets
36669
31:08:31,119 --> 31:08:34,551
displayed to the user while our
36670
31:08:32,160 --> 31:08:36,800
application binary is being presented to
36671
31:08:36,800 --> 31:08:41,911
so let's have a little look at a the
36672
31:08:39,759 --> 31:08:42,959
official documentation for splash
36673
31:08:44,479 --> 31:08:51,191
screen up here and increase the size
36674
31:08:46,479 --> 31:08:52,872
perhaps a little bit so like this
36675
31:08:52,872 --> 31:08:56,551
as it is explaining here first and you
36676
31:08:56,551 --> 31:09:00,231
android for instance operating system in
36677
31:08:58,479 --> 31:09:02,080
here and you tap on your application
36678
31:09:00,232 --> 31:09:04,080
icon and then it goes through a series
36679
31:09:02,080 --> 31:09:06,479
of steps in order to land on your
36680
31:09:06,479 --> 31:09:10,231
main interface and here there's a great
36681
31:09:08,479 --> 31:09:13,039
documentation basically for splash
36682
31:09:10,232 --> 31:09:14,872
screens which i recommend everybody
36683
31:09:13,039 --> 31:09:17,279
who wants to submit their application to
36684
31:09:14,872 --> 31:09:19,911
ios app store and google play so to read
36685
31:09:17,279 --> 31:09:21,759
this thoroughly because there's great
36686
31:09:19,911 --> 31:09:23,279
pieces of information here even if you
36687
31:09:21,759 --> 31:09:25,831
are just following for instance my
36688
31:09:23,279 --> 31:09:27,759
advice in this chapter but it is still a
36689
31:09:27,759 --> 31:09:33,759
to go ahead and read about this
36690
31:09:33,759 --> 31:09:39,439
before we actually go and start
36691
31:09:39,440 --> 31:09:43,040
i also have to mention something that
36692
31:09:43,039 --> 31:09:46,719
this chapter is quite i mean you need in
36693
31:09:45,360 --> 31:09:48,320
order for you to be able to go through
36694
31:09:46,720 --> 31:09:50,872
the chapter you will unfortunately need
36695
31:09:48,320 --> 31:09:52,400
to have a macintosh so because we're
36696
31:09:50,872 --> 31:09:53,279
actually going to play a little bit with
36697
31:09:53,279 --> 31:09:56,872
um ios splash screen and for that you
36698
31:09:55,191 --> 31:09:59,911
need to have xcode but i'll talk soon
36699
31:09:59,911 --> 31:10:04,872
so how do we go about creating a splash
36700
31:10:04,872 --> 31:10:08,160
i mean there are so many different ways
36701
31:10:08,160 --> 31:10:12,400
if if you're a developer from before you
36702
31:10:10,800 --> 31:10:13,832
probably are not so comfortable you're
36703
31:10:12,399 --> 31:10:15,831
not this kind of like a unicorn
36704
31:10:15,831 --> 31:10:19,511
a so-called unicorn developer as a
36705
31:10:17,831 --> 31:10:21,119
developer who's also comfortable with
36706
31:10:21,119 --> 31:10:24,720
or you might you might only be a
36707
31:10:22,639 --> 31:10:26,800
designer and you've started this course
36708
31:10:24,720 --> 31:10:28,320
and you've come to this point so you may
36709
31:10:26,800 --> 31:10:30,400
actually be comfortable with a tool like
36710
31:10:32,639 --> 31:10:37,360
depending on your background you may or
36711
31:10:34,872 --> 31:10:39,832
may not be comfortable with designing so
36712
31:10:37,360 --> 31:10:41,831
i've basically taken the liberty of
36713
31:10:39,831 --> 31:10:43,039
using a design tool a free design tool
36714
31:10:43,039 --> 31:10:46,551
and for this chapter which you can
36715
31:10:44,872 --> 31:10:48,160
access freely with for instance a google
36716
31:10:49,911 --> 31:10:54,911
or you could just create a normal free
36717
31:10:55,191 --> 31:10:59,360
but i don't make the assumption that you
36718
31:10:57,039 --> 31:11:01,119
know anything about designing and for
36719
31:10:59,360 --> 31:11:04,080
that what we're going to do is we're
36720
31:11:01,119 --> 31:11:06,000
going to create a very very very simple
36721
31:11:06,000 --> 31:11:10,720
assuming that the person is watching
36722
31:11:07,512 --> 31:11:15,191
this course has no information about
36723
31:11:10,720 --> 31:11:15,191
figma or designing previously okay
36724
31:11:20,639 --> 31:11:24,160
now that we talked about figma let's
36725
31:11:27,440 --> 31:11:33,119
so um what we can do in here is to bring
36726
31:11:30,639 --> 31:11:34,639
our application to the screen so i'll
36727
31:11:34,639 --> 31:11:39,512
app in here increase the size a little
36728
31:11:39,512 --> 31:11:43,592
and what we can do is to bring up
36729
31:11:41,279 --> 31:11:45,911
terminal in here so get rid of a little
36730
31:11:43,592 --> 31:11:47,832
bit of distraction in here so
36731
31:11:47,831 --> 31:11:53,119
so if you say good status we have a lot
36732
31:11:50,720 --> 31:11:55,440
of stuff that we've done but we haven't
36733
31:11:53,119 --> 31:11:57,191
committed them so that's fine let those
36734
31:11:55,440 --> 31:11:58,720
be there we're going to commit them soon
36735
31:11:58,720 --> 31:12:03,191
so in your application what i need you
36736
31:12:05,679 --> 31:12:11,679
your ios application so there is
36737
31:12:09,279 --> 31:12:13,759
something in the ios application
36738
31:12:13,759 --> 31:12:17,360
template when we created our our
36739
31:12:15,679 --> 31:12:18,551
template from the absolute beginning of
36740
31:12:18,551 --> 31:12:23,679
and there is a file a specific file
36741
31:12:21,360 --> 31:12:26,232
called a launch i believe it's called
36742
31:12:23,679 --> 31:12:28,000
launch screen dot storyboard if you're
36743
31:12:26,232 --> 31:12:30,320
not comfortable with ios development
36744
31:12:28,000 --> 31:12:32,800
like native ios development from before
36745
31:12:30,320 --> 31:12:34,720
i can just explain you that a storyboard
36746
31:12:34,720 --> 31:12:40,320
a file that apple designated for um
36747
31:12:38,160 --> 31:12:41,911
developers to be able to visually design
36748
31:12:40,320 --> 31:12:44,400
their application and then write the
36749
31:12:41,911 --> 31:12:46,399
code for it later and apple's decided
36750
31:12:44,399 --> 31:12:47,911
that for specifically the launch screen
36751
31:12:46,399 --> 31:12:52,231
for instance that gets displayed to the
36752
31:12:47,911 --> 31:12:54,872
user there should be a a dedicated um
36753
31:12:52,232 --> 31:12:59,360
storyboard file for that so
36754
31:12:54,872 --> 31:13:02,400
we're gonna go ahead and launch xcode
36755
31:12:59,360 --> 31:13:05,831
on this macintosh in order to manipulate
36756
31:13:02,399 --> 31:13:08,319
that storyboard file but before we do
36757
31:13:05,831 --> 31:13:11,360
that i'm just going to go ahead and open
36758
31:13:08,320 --> 31:13:13,832
the root folder of our application
36759
31:13:11,360 --> 31:13:15,680
then i'm going to go and let me also
36760
31:13:13,831 --> 31:13:16,959
change the screen layout a little bit so
36761
31:13:18,720 --> 31:13:22,800
then inside this ios folder so in the
36762
31:13:21,119 --> 31:13:24,959
root folder of your application go to
36763
31:13:22,800 --> 31:13:27,760
ios and then you can see two files in
36764
31:13:24,960 --> 31:13:30,480
here runner xcode proj and runner xc
36765
31:13:27,759 --> 31:13:32,319
workspace and dependent on your settings
36766
31:13:30,479 --> 31:13:33,440
on your macintosh you may or may not be
36767
31:13:34,639 --> 31:13:39,360
extensions of these files i i've i've
36768
31:13:37,592 --> 31:13:41,192
done so in my macintosh that i can
36769
31:13:41,191 --> 31:13:44,959
file extensions because it's important
36770
31:13:43,039 --> 31:13:46,959
for me so if you're not seeing the
36771
31:13:44,960 --> 31:13:49,360
extensions you just have to trust on the
36772
31:13:46,960 --> 31:13:52,639
icon so one of these files has this
36773
31:13:49,360 --> 31:13:54,872
bluish icon which says project here and
36774
31:13:52,639 --> 31:13:56,720
the other one is a workspace i need you
36775
31:13:56,720 --> 31:14:00,399
on this workspace in order to open it
36776
31:14:00,399 --> 31:14:05,911
so let's go ahead and open this
36777
31:14:05,911 --> 31:14:12,000
and let's then go have a look at this
36778
31:14:08,551 --> 31:14:12,720
launch screen inside this runner folder
36779
31:14:12,720 --> 31:14:17,680
if i collapse everything inside you will
36780
31:14:15,679 --> 31:14:19,831
see that you have your runner and which
36781
31:14:17,679 --> 31:14:21,039
is the flutter templates created
36782
31:14:21,039 --> 31:14:26,399
inside there we have another runner and
36783
31:14:24,232 --> 31:14:28,800
in that runner folder then you'll have
36784
31:14:29,679 --> 31:14:34,231
we can then have a look at this launch
36785
31:14:31,512 --> 31:14:36,160
screen and see how it is created
36786
31:14:37,679 --> 31:14:41,679
in order to expand the contents of this
36787
31:14:40,000 --> 31:14:43,759
view controller to have a look at the
36788
31:14:41,679 --> 31:14:46,639
internals of this launch screen and a
36789
31:14:43,759 --> 31:14:48,231
good trick is if you want to expand you
36790
31:14:46,639 --> 31:14:49,759
can see here you have to expand this and
36791
31:14:48,232 --> 31:14:50,720
then you have to expand this and expand
36792
31:14:50,720 --> 31:14:54,960
if you don't want to expand one step at
36793
31:14:53,440 --> 31:14:57,191
a time you can always hold down the
36794
31:14:54,960 --> 31:14:59,192
option key or the alt key and then click
36795
31:14:57,191 --> 31:15:01,759
on this little arrow and that expands
36796
31:14:59,191 --> 31:15:03,360
the entire chain for you and if you want
36797
31:15:01,759 --> 31:15:05,511
to collapse the entire chain you can
36798
31:15:03,360 --> 31:15:08,080
press down alt and then click and then
36799
31:15:05,512 --> 31:15:10,639
collapses the entire change so
36800
31:15:08,080 --> 31:15:12,960
let's let's expand the entire chain and
36801
31:15:10,639 --> 31:15:16,160
then in here you'll see that there is a
36802
31:15:12,960 --> 31:15:17,680
view and then a launch image image view
36803
31:15:16,160 --> 31:15:20,080
which at the moment is pointing to a
36804
31:15:17,679 --> 31:15:22,159
file called launch image which doesn't
36805
31:15:20,080 --> 31:15:23,831
exist because if you go to our assets in
36806
31:15:22,160 --> 31:15:25,832
here you'll see that launch image is
36807
31:15:23,831 --> 31:15:28,000
just empty at the moment okay so there
36808
31:15:25,831 --> 31:15:30,479
is no launch image meaning there is no
36809
31:15:31,592 --> 31:15:35,832
we're gonna manipulate this file a
36810
31:15:33,440 --> 31:15:36,720
little bit as you'll soon see so let me
36811
31:15:41,039 --> 31:15:46,231
so that was the basics of that launch
36812
31:15:46,232 --> 31:15:50,400
as you see at the caption on on the
36813
31:15:48,720 --> 31:15:53,440
caption at the bottom of the screen this
36814
31:15:50,399 --> 31:15:54,319
is an unfortunate unfortunate thing that
36815
31:15:55,831 --> 31:16:00,720
isn't as open in my eyes at least as
36816
31:15:58,232 --> 31:16:01,680
many other companies like microsoft and
36817
31:16:01,679 --> 31:16:06,799
in that if you want to for instance do
36818
31:16:04,000 --> 31:16:09,119
native ios development and have xcode in
36819
31:16:06,800 --> 31:16:11,360
order to open your project and run your
36820
31:16:09,119 --> 31:16:13,679
project for instance then you'll have to
36821
31:16:11,360 --> 31:16:16,232
have a macintosh because xcode isn't
36822
31:16:13,679 --> 31:16:18,551
available on other platforms and it's
36823
31:16:18,551 --> 31:16:24,080
it's it's nothing to really be proud of
36824
31:16:21,440 --> 31:16:25,680
i would say i'm a native ios developer
36825
31:16:24,080 --> 31:16:27,592
and i'm actually ashamed of the fact
36826
31:16:25,679 --> 31:16:29,439
that xcode the tool that i use on a
36827
31:16:27,592 --> 31:16:31,592
daily basis is only available on a
36828
31:16:29,440 --> 31:16:32,639
macintosh because i might personally for
36829
31:16:32,639 --> 31:16:37,512
like to write my code ios code on ubuntu
36830
31:16:37,512 --> 31:16:40,800
or some of you may actually prefer
36831
31:16:38,960 --> 31:16:42,232
windows but let's not go there let's
36832
31:16:40,800 --> 31:16:43,832
just say that you'll unfortunately need
36833
31:16:42,232 --> 31:16:45,760
macintosh in order to be able to
36834
31:16:45,759 --> 31:16:50,479
um launch screen as storyboard file and
36835
31:16:48,960 --> 31:16:53,120
for those of you who don't have a
36836
31:16:50,479 --> 31:16:55,679
macintosh you'll need to contact perhaps
36837
31:16:53,119 --> 31:16:58,720
somebody in your network who does have
36838
31:16:55,679 --> 31:17:01,119
access to a macintosh and ask them to
36839
31:16:58,720 --> 31:17:03,512
manipulate the storyboard file for you
36840
31:17:01,119 --> 31:17:06,231
and add your icons as you'll soon see
36841
31:17:03,512 --> 31:17:07,680
how and then send that storyboard file
36842
31:17:15,679 --> 31:17:19,359
so what we need to do is to actually get
36843
31:17:19,360 --> 31:17:24,639
roots of what we need to work on in this
36844
31:17:22,232 --> 31:17:26,720
chapter and that is creating a splash
36845
31:17:24,639 --> 31:17:28,720
screen okay so as i mentioned in the
36846
31:17:26,720 --> 31:17:31,831
beginning of this chapter i'm gonna rely
36847
31:17:28,720 --> 31:17:34,872
on a free tool called figma
36848
31:17:31,831 --> 31:17:35,831
so let's go ahead let me see if i can do
36849
31:17:35,831 --> 31:17:42,159
reshuffling on this screen
36850
31:17:39,191 --> 31:17:44,871
and close a tab in here i'm gonna bring
36851
31:17:44,872 --> 31:17:51,040
gonna minimize our application and bring
36852
31:17:48,080 --> 31:17:52,872
up my browser right here so i need you
36853
31:17:51,039 --> 31:17:55,279
to please visit a website called
36854
31:17:55,279 --> 31:18:02,232
and in figma.com then you will have the
36855
31:17:58,399 --> 31:18:03,039
ability to create your design files all
36856
31:18:03,039 --> 31:18:06,959
so i'm not gonna show you actually how
36857
31:18:05,039 --> 31:18:10,000
to register for figma because that is
36858
31:18:06,960 --> 31:18:12,400
very easy so you can just perhaps if i
36859
31:18:10,000 --> 31:18:13,911
for instance go to and bring up a
36860
31:18:13,911 --> 31:18:18,639
tab in here and say figma.com where i'm
36861
31:18:16,160 --> 31:18:21,120
not logged in you can just say sign up
36862
31:18:18,639 --> 31:18:23,831
and as you'll soon see here you can
36863
31:18:21,119 --> 31:18:26,639
continue with google or use an email
36864
31:18:23,831 --> 31:18:27,439
address of your choice in order to sign
36865
31:18:27,440 --> 31:18:32,872
for figma and as i mentioned figma is
36866
31:18:30,479 --> 31:18:36,399
free until to a certain point
36867
31:18:32,872 --> 31:18:38,720
and you can you can for instance um
36868
31:18:38,720 --> 31:18:43,759
normal design files in figma without
36869
31:18:40,872 --> 31:18:45,360
having to think about actually
36870
31:18:43,759 --> 31:18:47,191
paying for a subscription but if you
36871
31:18:45,360 --> 31:18:48,872
want to do advanced work for instance if
36872
31:18:47,191 --> 31:18:51,512
you want to do a lot of sharing of your
36873
31:18:48,872 --> 31:18:53,279
work with other team members etc then
36874
31:18:55,679 --> 31:18:59,679
after you've registered your account in
36875
31:18:57,911 --> 31:19:02,800
figma what i need you to do please is
36876
31:18:59,679 --> 31:19:04,551
just to go and click on new design file
36877
31:19:02,800 --> 31:19:08,872
okay so i'm going to increase the size
36878
31:19:04,551 --> 31:19:08,872
in here and just say new design file
36879
31:19:08,960 --> 31:19:14,232
all right so it's created a new design
36880
31:19:11,119 --> 31:19:16,159
file here for us and as you'll see as
36881
31:19:14,232 --> 31:19:19,192
you'll see in the bottom of the screen
36882
31:19:16,160 --> 31:19:21,040
in here um i wonder if i actually have
36883
31:19:19,191 --> 31:19:23,831
to bring my face to the right because
36884
31:19:23,831 --> 31:19:29,511
so i hadn't noticed that so um
36885
31:19:27,191 --> 31:19:32,479
so what you'll need to do is to create a
36886
31:19:32,479 --> 31:19:38,479
maybe this is a better screen um
36887
31:19:35,679 --> 31:19:40,399
yeah set up maybe this is better okay so
36888
31:19:38,479 --> 31:19:42,759
what we need to do in here is to create
36889
31:19:44,679 --> 31:19:49,359
2778 and i didn't i didn't like make up
36890
31:19:49,360 --> 31:19:56,479
this is the size of a screen for an
36891
31:19:56,479 --> 31:19:59,360
if you're not a designer you may not
36892
31:19:57,831 --> 31:20:00,799
notice but when you're designing things
36893
31:19:59,360 --> 31:20:03,440
you always have to create like your
36894
31:20:00,800 --> 31:20:05,440
design so that it it scales to various
36895
31:20:03,440 --> 31:20:08,320
sizes this was not a problem back in
36896
31:20:05,440 --> 31:20:10,000
2007 or 2008 when we only had one iphone
36897
31:20:08,320 --> 31:20:11,680
and just a handful of android devices
36898
31:20:10,000 --> 31:20:14,160
but nowadays you have to kind of like
36899
31:20:11,679 --> 31:20:16,551
create a template in for instance figma
36900
31:20:14,160 --> 31:20:18,400
and then ensure that it is scalable for
36901
31:20:16,551 --> 31:20:20,000
different sizes but we're not going to
36902
31:20:18,399 --> 31:20:23,679
focus on that right now all we're going
36903
31:20:23,679 --> 31:20:28,231
splash screen and then inside our ios
36904
31:20:26,800 --> 31:20:30,400
app and android app we're just going to
36905
31:20:28,232 --> 31:20:32,400
make sure that it scales okay so let's
36906
31:20:30,399 --> 31:20:35,119
just target one device at the moment and
36907
31:20:32,399 --> 31:20:36,639
in here i need you to go in here and
36908
31:20:35,119 --> 31:20:39,039
actually here sorry about that and
36909
31:20:39,039 --> 31:20:42,551
after creating a rectangle we're going
36910
31:20:40,479 --> 31:20:43,279
to go in here and set the width to what
36911
31:20:46,639 --> 31:20:51,279
i can see my keyboard and the height is
36912
31:20:51,279 --> 31:20:57,360
okay so it's a huge rectangle
36913
31:20:57,360 --> 31:21:02,720
that's our rectangle and what we need to
36914
31:20:59,831 --> 31:21:05,439
do is to kind of give this a background
36915
31:21:02,720 --> 31:21:07,279
color now as you've seen so far and if
36916
31:21:05,440 --> 31:21:09,832
you follow the chapters chronologically
36917
31:21:07,279 --> 31:21:13,759
for this course you'll know that i
36918
31:21:13,759 --> 31:21:18,959
soft theme in visual studio code for
36919
31:21:16,639 --> 31:21:21,191
uh coding and i absolutely love this
36920
31:21:18,960 --> 31:21:23,760
it's the preference you may like a light
36921
31:21:21,191 --> 31:21:26,720
team i like a dark team such as tokyo
36922
31:21:23,759 --> 31:21:29,039
night and tokyo night is a visual studio
36923
31:21:26,720 --> 31:21:30,872
code theme that is open source and you
36924
31:21:32,320 --> 31:21:36,080
github so what i'm going to do in here
36925
31:21:34,232 --> 31:21:38,639
is just to make sure that the background
36926
31:21:36,080 --> 31:21:42,479
color of our splash screens actually
36927
31:21:38,639 --> 31:21:45,911
painted with that color okay so let's go
36928
31:21:45,911 --> 31:21:51,119
in github and you'll end up in this
36929
31:21:48,160 --> 31:21:54,160
website github.com and kia tokyo night
36930
31:21:51,119 --> 31:21:55,679
vs code theme so if you don't have this
36931
31:21:54,160 --> 31:21:58,000
link and if you couldn't be bothered
36932
31:21:55,679 --> 31:21:59,831
writing this name you could just google
36933
31:21:58,000 --> 31:22:03,592
and so i'm just gonna go to google and
36934
31:21:59,831 --> 31:22:05,191
say tokyo night theme okay and you'll
36935
31:22:03,592 --> 31:22:07,832
end up with the github link so you can
36936
31:22:05,191 --> 31:22:11,191
just click on it all right so i'm gonna
36937
31:22:07,831 --> 31:22:14,319
go down here in this um theme and i'm
36938
31:22:11,191 --> 31:22:16,959
going to grab this beautiful editor
36939
31:22:19,440 --> 31:22:24,551
um actually either we could use storm or
36940
31:22:22,320 --> 31:22:27,280
night i'm gonna choose storm and just
36941
31:22:24,551 --> 31:22:28,159
see how it looks like so grab this code
36942
31:22:28,160 --> 31:22:34,400
the rgb code for uh tokyo knight and
36943
31:22:31,360 --> 31:22:36,479
let's go to figma into our rectangle and
36944
31:22:36,479 --> 31:22:40,959
so that created a nice little background
36945
31:22:38,960 --> 31:22:43,280
color for us okay so we could just live
36946
31:22:43,279 --> 31:22:48,399
then what we need to do is i like to
36947
31:22:45,911 --> 31:22:50,319
basically create some sort of a gradient
36948
31:22:48,399 --> 31:22:52,479
in this background color so it's not so
36949
31:22:50,320 --> 31:22:54,160
bland as it is right now so what i'm
36950
31:22:52,479 --> 31:22:57,360
gonna do is just to go to effects in
36951
31:22:54,160 --> 31:23:00,080
here and then say that we have actually
36952
31:22:57,360 --> 31:23:02,479
no not effects it's probably in fill
36953
31:23:00,080 --> 31:23:06,639
let's go and fill press the plus button
36954
31:23:02,479 --> 31:23:09,191
and in here just click on this little uh
36955
31:23:12,232 --> 31:23:15,192
you know what actually i would really
36956
31:23:13,592 --> 31:23:16,960
like to change the screen layout a
36957
31:23:15,191 --> 31:23:20,639
little bit so you see my figma screen
36958
31:23:16,960 --> 31:23:22,872
better so i'm gonna hide this caption
36959
31:23:22,872 --> 31:23:27,279
and see if i can change the caption
36960
31:23:31,759 --> 31:23:36,231
and hence i can change the screen layout
36961
31:23:34,399 --> 31:23:37,679
with my screen with my face still
36962
31:23:36,232 --> 31:23:39,512
visible so i think this is a little bit
36963
31:23:37,679 --> 31:23:41,439
better okay after doing this fill so we
36964
31:23:39,512 --> 31:23:42,720
added a fill effect in here using this
36965
31:23:42,720 --> 31:23:48,872
and go and tap on this um little icon
36966
31:23:46,080 --> 31:23:50,960
next to fill you see here clicking on it
36967
31:23:48,872 --> 31:23:53,360
you can then say that you want for
36968
31:23:53,360 --> 31:23:59,360
linear should we create a radial maybe
36969
31:23:56,232 --> 31:24:01,911
or a linear gradient let's see
36970
31:23:59,360 --> 31:24:04,160
let's create a linear gradient okay
36971
31:24:01,911 --> 31:24:06,959
then this as you can see is a gradient
36972
31:24:04,160 --> 31:24:08,080
that at the moment is going from black
36973
31:24:08,080 --> 31:24:13,040
transparent with zero percent in here so
36974
31:24:10,720 --> 31:24:14,399
let's make this black point as well
36975
31:24:15,759 --> 31:24:21,679
zero and we're gonna in both these cases
36976
31:24:18,872 --> 31:24:23,360
set the background color as the starting
36977
31:24:21,679 --> 31:24:25,439
point and the ending point so click on
36978
31:24:23,360 --> 31:24:27,279
the starting point change this color to
36979
31:24:27,279 --> 31:24:31,911
tokenite background color and here as
36980
31:24:29,512 --> 31:24:33,760
well so that's that okay then in the
36981
31:24:31,911 --> 31:24:36,959
middle somewhere we're gonna create a
36982
31:24:33,759 --> 31:24:39,679
point and give it a hundred percent uh
36983
31:24:36,960 --> 31:24:41,760
transparency and let's see how it looks
36984
31:24:41,759 --> 31:24:45,191
in here can we not have three points
36985
31:24:43,360 --> 31:24:47,191
yeah figma just went a little bit
36986
31:24:45,191 --> 31:24:49,512
ballistic on us but that's okay
36987
31:24:47,191 --> 31:24:52,159
so in here we have that color in here we
36988
31:24:52,160 --> 31:24:56,872
so so the start and the end have to be
36989
31:24:54,800 --> 31:24:59,120
transparent with that color that we've
36990
31:24:56,872 --> 31:25:01,040
chosen and let's go in in the middle and
36991
31:24:59,119 --> 31:25:02,479
just kind of change the color to red and
36992
31:25:01,039 --> 31:25:03,831
you can see that it gets created here
36993
31:25:03,831 --> 31:25:08,399
and then what we're going to do for the
36994
31:25:05,911 --> 31:25:10,959
middle we're going to go and create
36995
31:25:08,399 --> 31:25:12,799
grab this particular color here as you
36996
31:25:10,960 --> 31:25:15,280
can see it's kind of like a light very
36997
31:25:12,800 --> 31:25:17,440
soft light blue starts with 7d so it's
36998
31:25:17,440 --> 31:25:20,639
and i'm going to go back to the figma
36999
31:25:20,639 --> 31:25:25,440
change the middle color to that
37000
31:25:23,440 --> 31:25:27,440
just like this okay so it kind of
37001
31:25:25,440 --> 31:25:30,232
creates a nice little effect for us in
37002
31:25:32,720 --> 31:25:37,040
so after doing that let's go to our
37003
31:25:34,399 --> 31:25:38,799
downloads and grab our icon so i'm going
37004
31:25:38,800 --> 31:25:42,000
downloads and if you remember we had
37005
31:25:42,000 --> 31:25:46,872
sticky note svg file and figma is great
37006
31:25:45,039 --> 31:25:48,831
with stuff like this so let's just grab
37007
31:25:48,831 --> 31:25:53,360
middle okay and that's our sticky note
37008
31:25:53,360 --> 31:25:57,592
so let's see what we can actually do
37009
31:25:55,360 --> 31:25:59,440
should we use the svg or should we use
37010
31:25:59,440 --> 31:26:03,832
it's probably better to use actually the
37011
31:26:00,960 --> 31:26:06,480
app icon so revert this change please so
37012
31:26:03,831 --> 31:26:08,319
let's not use this svg let's go to our
37013
31:26:06,479 --> 31:26:10,000
app icons that we extracted in the
37014
31:26:08,320 --> 31:26:12,320
previous chapter and let's grab a
37015
31:26:10,000 --> 31:26:15,360
rasterize png which is this app store
37016
31:26:12,320 --> 31:26:17,120
icon and bring it right here okay so it
37017
31:26:15,360 --> 31:26:19,512
actually is a nice size i'm going to use
37018
31:26:17,119 --> 31:26:21,191
these built-in layout guides in figma as
37019
31:26:19,512 --> 31:26:22,720
you can see it tells me where the center
37020
31:26:21,191 --> 31:26:24,319
is so i'm just going to place our icon
37021
31:26:22,720 --> 31:26:25,911
right there and as you can see it
37022
31:26:24,320 --> 31:26:27,832
actually blends really well with that
37023
31:26:25,911 --> 31:26:30,872
background linear gradient that we
37024
31:26:27,831 --> 31:26:33,191
created so it's a it's a subtle effect
37025
31:26:30,872 --> 31:26:35,279
so you can see that the linear gradient
37026
31:26:35,279 --> 31:26:39,592
and if you disable that linear gradient
37027
31:26:39,592 --> 31:26:44,400
it's very bland so without that linear
37028
31:26:42,320 --> 31:26:46,640
gradient it's our splash screen doesn't
37029
31:26:44,399 --> 31:26:48,720
look so well so you can also play a
37030
31:26:46,639 --> 31:26:52,080
little bit with the transparency of the
37031
31:26:48,720 --> 31:26:53,440
entire thing like 100 and i feel like um
37032
31:26:53,440 --> 31:26:57,191
crazy so maybe 20 was actually pretty
37033
31:26:58,720 --> 31:27:02,160
so here let's go back here and say 20
37034
31:27:02,160 --> 31:27:06,639
as it was so now we have a really good
37035
31:27:06,639 --> 31:27:11,360
base for our splash screen so what we
37036
31:27:08,960 --> 31:27:13,360
need to do now in order to download this
37037
31:27:11,360 --> 31:27:15,831
splash screen you need to select those
37038
31:27:13,360 --> 31:27:17,759
two layers so on my macintosh i'm just
37039
31:27:15,831 --> 31:27:20,000
going to hold down the shift key and
37040
31:27:17,759 --> 31:27:22,000
click on this icon for instance and then
37041
31:27:20,000 --> 31:27:24,080
click on the next one in order to select
37042
31:27:22,000 --> 31:27:25,592
both where i think you could actually
37043
31:27:24,080 --> 31:27:27,119
no you can't select like that so you
37044
31:27:25,592 --> 31:27:29,360
need to basically hold down the shift
37045
31:27:31,119 --> 31:27:35,679
command g on a macintosh or ctrl g on
37046
31:27:33,679 --> 31:27:38,319
linux and windows in order to group
37047
31:27:35,679 --> 31:27:39,679
these two layers together okay so now
37048
31:27:38,320 --> 31:27:40,960
it's a group and i'm just going to call
37049
31:27:40,960 --> 31:27:44,872
splash screens just like that it doesn't
37050
31:27:43,039 --> 31:27:48,000
have to be called like that splash
37051
31:27:44,872 --> 31:27:50,160
screen but i just call it so okay
37052
31:27:48,000 --> 31:27:52,720
so what we need to do is to grab this
37053
31:27:50,160 --> 31:27:55,592
splash screen in three flavors so
37054
31:27:52,720 --> 31:27:58,399
normal like um in normal ios development
37055
31:27:55,592 --> 31:28:02,160
you have to support three different
37056
31:27:58,399 --> 31:28:04,551
resolutions for your assets usually
37057
31:28:09,191 --> 31:28:13,591
so they only support for instance the
37058
31:28:13,592 --> 31:28:17,512
and if this doesn't make sense to you i
37059
31:28:16,000 --> 31:28:18,399
will just explain what this actually
37060
31:28:22,551 --> 31:28:26,639
on ios at least they're called at their
37061
31:28:24,551 --> 31:28:30,399
screen and they're called retina devices
37062
31:28:26,639 --> 31:28:32,160
and it's just a term created by apple um
37063
31:28:32,160 --> 31:28:35,832
and where they said basically they
37064
31:28:34,080 --> 31:28:37,512
doubled the amount of pixels that a
37065
31:28:35,831 --> 31:28:40,479
device can display on the screen but
37066
31:28:37,512 --> 31:28:43,832
they held the aspect ratio as it was so
37067
31:28:40,479 --> 31:28:46,080
if in a little square in an old device
37068
31:28:43,831 --> 31:28:48,399
the device could display four pixels
37069
31:28:46,080 --> 31:28:50,080
then the new devices could display eight
37070
31:28:48,399 --> 31:28:52,799
pixels so they doubled the amount of
37071
31:28:52,800 --> 31:28:57,192
i don't know how you want to say it and
37072
31:28:54,551 --> 31:28:58,639
they call it retina and then they added
37073
31:28:58,639 --> 31:29:03,279
every developer needs to provide an
37074
31:29:00,551 --> 31:29:04,639
image for the old devices and we call it
37075
31:29:07,039 --> 31:29:12,479
and the new devices will have 2x
37076
31:29:10,000 --> 31:29:14,960
then newer iphone devices came out they
37077
31:29:12,479 --> 31:29:17,679
had more modern retina displays and even
37078
31:29:14,960 --> 31:29:19,912
more pixels packed into the same
37079
31:29:17,679 --> 31:29:22,871
space so they said now those devices are
37080
31:29:19,911 --> 31:29:24,800
able to display eight times more pixels
37081
31:29:24,800 --> 31:29:29,360
it's basically gonna be um one x two x
37082
31:29:29,360 --> 31:29:34,399
so um i think it's eight times more
37083
31:29:34,399 --> 31:29:38,720
so it's 1x2x and 3x that we have to
37084
31:29:36,720 --> 31:29:39,911
support so let's go in here
37085
31:29:39,911 --> 31:29:44,720
let me see if i can shuffle things
37086
31:29:41,831 --> 31:29:47,279
around so you see better um maybe like
37087
31:29:44,720 --> 31:29:48,960
this so let's go in here in figma at the
37088
31:29:47,279 --> 31:29:50,959
bottom of the screen you see this export
37089
31:29:48,960 --> 31:29:52,639
button so i'm going to press that export
37090
31:29:50,960 --> 31:29:54,480
so i'm going to press that export button
37091
31:29:52,639 --> 31:29:57,512
actually three times as you can see in
37092
31:29:54,479 --> 31:30:00,000
here so we have the first one is a png
37093
31:29:57,512 --> 31:30:02,160
make sure that they're all png files and
37094
31:30:00,000 --> 31:30:04,399
the first one has no suffix second one
37095
31:30:02,160 --> 31:30:06,720
has two x and the third one has three x
37096
31:30:04,399 --> 31:30:07,439
that's exactly what we need okay
37097
31:30:07,440 --> 31:30:12,720
after doing that what we're gonna do is
37098
31:30:09,911 --> 31:30:13,759
to say export splash screen just like
37099
31:30:13,759 --> 31:30:17,279
and that's gonna do its processing so it
37100
31:30:15,360 --> 31:30:19,592
may actually take some time depending on
37101
31:30:17,279 --> 31:30:22,639
our internet connection as well and then
37102
31:30:19,592 --> 31:30:25,192
we downloaded this zip file so our work
37103
31:30:22,639 --> 31:30:26,872
in this file is basically done and this
37104
31:30:25,191 --> 31:30:29,191
is the contents of that zip file as you
37105
31:30:26,872 --> 31:30:31,120
can see splash screen png and they're
37106
31:30:29,191 --> 31:30:32,319
all the same but their sizes are quite
37107
31:30:31,119 --> 31:30:35,831
different you can see the first one is
37108
31:30:32,320 --> 31:30:38,160
604 kilobytes the second one is 1.4
37109
31:30:35,831 --> 31:30:40,000
megabytes and the third one is 2.5
37110
31:30:40,000 --> 31:30:46,872
so after doing that let's now remove
37111
31:30:44,320 --> 31:30:48,640
safari or your web browser from from the
37112
31:30:48,639 --> 31:30:52,720
and we need to basically go into our
37113
31:30:50,960 --> 31:30:55,360
source code now so i'm going to keep
37114
31:30:52,720 --> 31:30:56,399
this window here do some reshuffling on
37115
31:30:58,551 --> 31:31:03,679
let's see i'm gonna bring our uh
37116
31:31:01,440 --> 31:31:05,911
application to the to the screen like
37117
31:31:05,911 --> 31:31:11,512
okay and actually we don't need the
37118
31:31:08,479 --> 31:31:13,911
application sorry about that we kind of
37119
31:31:11,512 --> 31:31:16,080
need xcode in here so let me bring up
37120
31:31:16,080 --> 31:31:20,232
but let's bring xcode to the screen and
37121
31:31:18,080 --> 31:31:22,800
what we need now is to go to our assets
37122
31:31:20,232 --> 31:31:25,192
in here run our assets and we have our
37123
31:31:22,800 --> 31:31:28,232
launch image right there so what we need
37124
31:31:25,191 --> 31:31:30,479
to do is to grab these images one at a
37125
31:31:28,232 --> 31:31:32,080
time and bring them in here okay so and
37126
31:31:30,479 --> 31:31:34,551
they can be called splash screen that's
37127
31:31:32,080 --> 31:31:36,551
not a problem xcode will do the mapping
37128
31:31:34,551 --> 31:31:38,639
for us so as long as this thing in here
37129
31:31:36,551 --> 31:31:40,639
is called launch image then we're
37130
31:31:40,639 --> 31:31:44,720
so as a caption any case we're now going
37131
31:31:42,320 --> 31:31:46,400
to go and bring these images in here so
37132
31:31:44,720 --> 31:31:48,232
we have three images you can see in here
37133
31:31:46,399 --> 31:31:50,159
and we have three placeholders in here
37134
31:31:48,232 --> 31:31:52,320
that we have to drag and drop our images
37135
31:31:50,160 --> 31:31:54,800
into so let's begin by splash screen png
37136
31:31:54,800 --> 31:32:01,440
let's bring our splash screen 2x into 2x
37137
31:32:04,551 --> 31:32:08,800
that part is now done but we're not
37138
31:32:06,872 --> 31:32:11,120
really done designing this splash screen
37139
31:32:11,119 --> 31:32:15,360
let's go to the launch screen storyboard
37140
31:32:13,440 --> 31:32:16,720
file in here as you'll see it doesn't
37141
31:32:17,512 --> 31:32:22,400
we need to find this launch image that
37142
31:32:20,232 --> 31:32:25,192
is displayed in here and you can see at
37143
31:32:22,399 --> 31:32:27,439
the moment its constraints are like
37144
31:32:25,191 --> 31:32:29,591
very very wrong so it just thinks that
37145
31:32:27,440 --> 31:32:31,680
if you go into this tab it thinks that
37146
31:32:29,592 --> 31:32:33,360
this image is one two eight four by two
37147
31:32:33,360 --> 31:32:38,872
but we don't want that okay we want this
37148
31:32:35,759 --> 31:32:41,039
image to be as big as the screen but we
37149
31:32:41,039 --> 31:32:45,360
fix the aspect ratio of the image so
37150
31:32:43,039 --> 31:32:47,119
that it always fills the entire contents
37151
31:32:45,360 --> 31:32:49,279
of the screen even if that means the
37152
31:32:47,119 --> 31:32:50,871
image goes a little bit outside the
37153
31:32:49,279 --> 31:32:53,360
outside the boundaries of the screen
37154
31:32:50,872 --> 31:32:56,960
okay so that the launch screen looks
37155
31:32:56,960 --> 31:33:01,592
so what you need to do here is just a
37156
31:32:59,119 --> 31:33:03,679
little bit of a work on ios side so you
37157
31:33:01,592 --> 31:33:06,160
need to go in and select your launch
37158
31:33:03,679 --> 31:33:08,871
image in this tab in here which is your
37159
31:33:06,160 --> 31:33:12,232
dimensions the size inspector as as it
37160
31:33:08,872 --> 31:33:15,680
is called in xcode go and say that the x
37161
31:33:12,232 --> 31:33:17,911
is zero and y is also zero so that kind
37162
31:33:15,679 --> 31:33:20,231
of like make sure that your image starts
37163
31:33:17,911 --> 31:33:22,959
right there then let's just zoom out a
37164
31:33:20,232 --> 31:33:25,192
little bit and go manually and drag this
37165
31:33:22,960 --> 31:33:26,800
a little bit so that it fits the screen
37166
31:33:25,191 --> 31:33:29,119
so i'm going to drag this point let's
37167
31:33:26,800 --> 31:33:30,832
see if i can do that with my trackpad or
37168
31:33:30,831 --> 31:33:35,191
mouse and it's it's like playing a
37169
31:33:33,191 --> 31:33:36,871
little bit with me just because this
37170
31:33:35,191 --> 31:33:40,319
launch image at the moment has some
37171
31:33:36,872 --> 31:33:41,832
constraints so let's go and actually
37172
31:33:40,320 --> 31:33:43,592
remove these constraints so i'm going to
37173
31:33:41,831 --> 31:33:45,191
remove this horizontal constraint by
37174
31:33:43,592 --> 31:33:46,480
pressing the backspace button on it or
37175
31:33:45,191 --> 31:33:47,759
if you're on windows and linux you have
37176
31:33:46,479 --> 31:33:49,591
to press the delete button on your
37177
31:33:47,759 --> 31:33:51,039
keyboard so now i've removed those
37178
31:33:49,592 --> 31:33:54,160
constraints so i should be able to
37179
31:33:51,039 --> 31:33:55,831
freely size this hopefully let's see
37180
31:33:54,160 --> 31:33:57,592
and it's not letting me size this but
37181
31:33:55,831 --> 31:33:59,039
that's okay so what i'm going to do is
37182
31:33:57,592 --> 31:34:01,040
i'm going to have a look at this view
37183
31:33:59,039 --> 31:34:03,759
and see its size i can see that view is
37184
31:34:01,039 --> 31:34:07,191
896 then i'm gonna go to my launch image
37185
31:34:03,759 --> 31:34:09,119
and say okay your height is also 896. so
37186
31:34:07,191 --> 31:34:11,119
that's going to ensure that the height
37187
31:34:09,119 --> 31:34:12,959
of my launch image is the exact same
37188
31:34:11,119 --> 31:34:15,039
height as the view then i'm going to
37189
31:34:12,960 --> 31:34:16,872
have a look at the views with is four
37190
31:34:15,039 --> 31:34:19,039
one four and i'm gonna go to the launch
37191
31:34:16,872 --> 31:34:21,512
image and say you're also four
37192
31:34:21,512 --> 31:34:26,720
so now the image container actually
37193
31:34:23,679 --> 31:34:29,119
looks good however this launch image it
37194
31:34:26,720 --> 31:34:31,040
now has hard-coded values hard-coded
37195
31:34:29,119 --> 31:34:34,231
width and hard-coded height
37196
31:34:31,039 --> 31:34:36,159
it's x and y and y are quite fine but
37197
31:34:34,232 --> 31:34:38,232
what we need to do is to create some
37198
31:34:36,160 --> 31:34:39,592
constraints for it and constraints are
37199
31:34:38,232 --> 31:34:41,040
literally i mean we're not going to go
37200
31:34:39,592 --> 31:34:42,552
into native ios development at this
37201
31:34:41,039 --> 31:34:44,231
moment so you need to kind of have some
37202
31:34:42,551 --> 31:34:45,591
knowledge about this yourself and if you
37203
31:34:44,232 --> 31:34:48,639
don't i'm just going to tell you just
37204
31:34:45,592 --> 31:34:51,680
quickly how we create these constraints
37205
31:34:48,639 --> 31:34:54,160
so what we need to do is to click on our
37206
31:34:54,160 --> 31:34:58,800
and hold down the control button on your
37207
31:35:00,639 --> 31:35:05,512
hold down control and drag from launch
37208
31:35:06,551 --> 31:35:12,080
then this menu appears on the screen and
37209
31:35:09,360 --> 31:35:14,232
then hold down the shift key on your
37210
31:35:12,080 --> 31:35:16,400
computer on your macintosh and say you
37211
31:35:18,080 --> 31:35:24,400
and also you want to see leading space
37212
31:35:28,080 --> 31:35:33,279
that's fine for now i would say i mean
37213
31:35:30,479 --> 31:35:35,191
ideally what we want is for this screen
37214
31:35:33,279 --> 31:35:37,039
to be in the center as well so maybe we
37215
31:35:35,191 --> 31:35:39,831
could just say center horizontal and
37216
31:35:37,039 --> 31:35:41,759
center vertical so check these four
37217
31:35:39,831 --> 31:35:43,831
items as you're holding down the shift
37218
31:35:41,759 --> 31:35:46,159
button and then you can let go of the
37219
31:35:43,831 --> 31:35:47,831
shift button and then just click here
37220
31:35:46,160 --> 31:35:48,872
anywhere on the screen to dismiss of
37221
31:35:48,872 --> 31:35:52,551
so now you can see xcode is also happy
37222
31:35:50,960 --> 31:35:54,400
with the constraints that we created
37223
31:35:52,551 --> 31:35:56,639
then what we need to do is just to tell
37224
31:35:56,639 --> 31:36:00,479
according to its width and height so
37225
31:35:58,399 --> 31:36:02,079
let's go into this tab which is called
37226
31:36:00,479 --> 31:36:03,360
let's see what this tab is actually
37227
31:36:03,360 --> 31:36:08,800
attribute inspector and inside this
37228
31:36:08,800 --> 31:36:14,000
it's not scale really i believe it
37229
31:36:11,119 --> 31:36:17,591
should be content mode in here and let's
37230
31:36:14,000 --> 31:36:20,160
just say it is aspect fit okay
37231
31:36:17,592 --> 31:36:22,400
so it keeps the aspect ratio of the
37232
31:36:20,160 --> 31:36:24,639
original image but it also ensures that
37233
31:36:22,399 --> 31:36:27,679
it's like yeah it's fitting on the
37234
31:36:31,759 --> 31:36:37,511
all right so let's then go ahead and
37235
31:36:34,160 --> 31:36:40,480
actually see if this looks okay so what
37236
31:36:37,512 --> 31:36:42,080
we could do is to write in xcode let's
37237
31:36:42,080 --> 31:36:48,400
let's run on ios 13 pro which i believe
37238
31:36:45,039 --> 31:36:50,479
is the simulator and that i have already
37239
31:36:51,759 --> 31:36:56,720
from xcode itself we can press the run
37240
31:36:54,232 --> 31:36:59,360
button to have a look at how this
37241
31:36:56,720 --> 31:37:01,191
actually looks like and while this build
37242
31:36:59,360 --> 31:37:03,512
process is going you can also go to your
37243
31:37:01,191 --> 31:37:05,831
simulator here and say file
37244
31:37:03,512 --> 31:37:08,479
and open simulator and i'm just going to
37245
31:37:05,831 --> 31:37:12,080
choose another simulator as well such as
37246
31:37:08,479 --> 31:37:14,479
iphone 8 plus okay it is just good idea
37247
31:37:12,080 --> 31:37:16,320
usually to test your splash screen and
37248
31:37:14,479 --> 31:37:19,911
the functionality of your application on
37249
31:37:16,320 --> 31:37:22,800
as many devices and simulator as you can
37250
31:37:19,911 --> 31:37:24,551
i mean i actually prefer to test on real
37251
31:37:26,639 --> 31:37:29,831
difficult for me to bring so many test
37252
31:37:28,479 --> 31:37:31,512
devices on the screen so i'm just going
37253
31:37:29,831 --> 31:37:33,279
to use a simulator to test the splash
37254
31:37:33,279 --> 31:37:38,399
so now what we're doing is just to
37255
31:37:35,279 --> 31:37:40,000
compile our application for iphone 13
37256
31:37:38,399 --> 31:37:42,831
pro which is a simulator we've been
37257
31:37:40,000 --> 31:37:43,831
using so far when it came to for
37258
31:37:43,831 --> 31:37:48,399
testing our application so let's move
37259
31:37:46,960 --> 31:37:50,080
this to the background because this is
37260
31:37:48,399 --> 31:37:53,591
not really our application this is our
37261
31:37:50,080 --> 31:37:55,440
application so let's bring it here
37262
31:37:55,440 --> 31:38:00,872
just give some time to xcode to do
37263
31:37:58,399 --> 31:38:03,039
the work that it needs in order to build
37264
31:38:00,872 --> 31:38:05,040
our application for this simulator and
37265
31:38:03,039 --> 31:38:07,039
also install it and run it so that we
37266
31:38:05,039 --> 31:38:08,719
can have a look a little bit at
37267
31:38:07,039 --> 31:38:09,831
the splash screen so i'm just going to
37268
31:38:09,831 --> 31:38:16,319
waiting until that process is done
37269
31:38:13,360 --> 31:38:20,551
all right now our application is running
37270
31:38:16,320 --> 31:38:22,640
on a simulator called iphone 13 pro so
37271
31:38:20,551 --> 31:38:24,639
what we need to do is to actually kill
37272
31:38:22,639 --> 31:38:26,551
the running of the application because
37273
31:38:24,639 --> 31:38:28,551
after the application is launched we're
37274
31:38:26,551 --> 31:38:30,479
not going to see the launch screen even
37275
31:38:28,551 --> 31:38:32,551
if you for instance send the application
37276
31:38:30,479 --> 31:38:34,720
to the background with command shift h
37277
31:38:32,551 --> 31:38:36,551
that sends the application to home and
37278
31:38:34,720 --> 31:38:38,960
bring it back up there is no launch
37279
31:38:36,551 --> 31:38:40,959
screen remember launch screen for an
37280
31:38:38,960 --> 31:38:42,800
application is only displayed when the
37281
31:38:40,960 --> 31:38:45,592
application is completely dead and it's
37282
31:38:42,800 --> 31:38:47,192
cold booting so in order to send in
37283
31:38:45,592 --> 31:38:49,120
order to basically kill the application
37284
31:38:47,191 --> 31:38:50,871
what you could do is either press the
37285
31:38:49,119 --> 31:38:52,959
stop button here on xcode which
37286
31:38:54,872 --> 31:38:59,192
and also kills the application so now
37287
31:38:57,440 --> 31:39:01,512
you can actually click on the
37288
31:38:59,191 --> 31:39:03,360
application in your home screen and
37289
31:39:01,512 --> 31:39:05,119
bring it to the foreground and as you
37290
31:39:03,360 --> 31:39:06,639
saw that was the little splash screen
37291
31:39:05,119 --> 31:39:08,959
that we saw on the screen so i'm gonna
37292
31:39:06,639 --> 31:39:11,039
kill the app and bring it back up again
37293
31:39:08,960 --> 31:39:13,680
and that's our splash screen so seems to
37294
31:39:11,039 --> 31:39:16,159
be actually looking fine on iphone 13
37295
31:39:13,679 --> 31:39:19,759
pro let's now change the target in here
37296
31:39:16,160 --> 31:39:21,512
and change it to our iphone 8 plus
37297
31:39:19,759 --> 31:39:23,039
which is the other simulator that i
37298
31:39:23,039 --> 31:39:27,831
and the reasoning for that is that
37299
31:39:24,720 --> 31:39:30,000
iphone 8 plus is still a major player in
37300
31:39:27,831 --> 31:39:32,319
the market a lot of people have iphone 8
37301
31:39:30,000 --> 31:39:34,831
plus and the screen is fabulous it is a
37302
31:39:32,320 --> 31:39:37,280
great phone that people are still using
37303
31:39:34,831 --> 31:39:40,231
so and the huge difference between
37304
31:39:37,279 --> 31:39:43,191
iphone 8 plus and iphone 13 pro is that
37305
31:39:40,232 --> 31:39:46,160
iphone 8 plus has no notch so it doesn't
37306
31:39:43,191 --> 31:39:48,639
have um the notch that you can see in
37307
31:39:46,160 --> 31:39:51,040
here on an iphone 13 pro so and it has a
37308
31:39:48,639 --> 31:39:53,440
home button so that's a little bit of a
37309
31:39:51,039 --> 31:39:54,959
thing that we have to think about that
37310
31:39:53,440 --> 31:39:56,872
you need to test your application on
37311
31:39:54,960 --> 31:39:58,720
multiple devices and now i'm going to
37312
31:39:56,872 --> 31:40:00,872
kill the application oops i don't
37313
31:40:00,872 --> 31:40:04,960
let's go in here and i'm going to kill
37314
31:40:02,800 --> 31:40:07,120
the debug process on iphone 8 plus as
37315
31:40:04,960 --> 31:40:09,592
well and run it again and let me just
37316
31:40:07,119 --> 31:40:11,759
delete this old app from here so we so
37317
31:40:11,759 --> 31:40:15,191
if you run the application did you just
37318
31:40:13,440 --> 31:40:17,191
see it momentarily that the application
37319
31:40:15,191 --> 31:40:20,639
that the splash screen doesn't look so
37320
31:40:17,191 --> 31:40:23,191
good it's not doing so well so if i run
37321
31:40:20,639 --> 31:40:25,191
it again with do you see the spacing on
37322
31:40:23,191 --> 31:40:27,279
the right and left if you pause the
37323
31:40:27,279 --> 31:40:31,119
that is because we have a little bit of
37324
31:40:28,720 --> 31:40:33,360
problem with our aspect ratio in here
37325
31:40:31,119 --> 31:40:35,440
because you remember in this launch emit
37326
31:40:33,360 --> 31:40:37,911
launch image we said aspect fit what we
37327
31:40:35,440 --> 31:40:40,232
need to do is just to say aspect fill
37328
31:40:37,911 --> 31:40:42,319
and aspect fill what it does it tries to
37329
31:40:40,232 --> 31:40:44,160
keep it it doesn't try it keeps the
37330
31:40:42,320 --> 31:40:46,320
aspect ratio but it always makes sure
37331
31:40:44,160 --> 31:40:49,360
that the image is that is at least as
37332
31:40:46,320 --> 31:40:51,040
big as its container so having done that
37333
31:40:49,360 --> 31:40:52,720
let's run the application again on
37334
31:40:52,720 --> 31:40:59,960
with that change in mind and let's see
37335
31:40:55,360 --> 31:40:59,960
how the application looks like
37336
31:41:00,000 --> 31:41:04,479
now it looked a lot better so there was
37337
31:41:01,911 --> 31:41:06,399
no empty space to the right and left i'm
37338
31:41:04,479 --> 31:41:09,512
gonna kill the application like this
37339
31:41:09,512 --> 31:41:13,512
and let's see oh it's because my debug
37340
31:41:11,831 --> 31:41:16,159
debug process i just killed my debug
37341
31:41:13,512 --> 31:41:18,232
process so let's kill it again
37342
31:41:18,232 --> 31:41:21,592
if i c if i can manage to do that kill
37343
31:41:22,872 --> 31:41:26,872
and now i can see that this splash
37344
31:41:24,720 --> 31:41:29,680
screen is actually looking good on
37345
31:41:29,679 --> 31:41:35,039
great now that things are working fine
37346
31:41:31,911 --> 31:41:38,080
on ios we need to focus on android so
37347
31:41:35,039 --> 31:41:40,000
let me bring up the caption for the next
37348
31:41:38,080 --> 31:41:41,592
section that we're going to talk about
37349
31:41:40,000 --> 31:41:44,479
we're going to talk about android slash
37350
31:41:41,592 --> 31:41:46,232
screens here i'll also try to open this
37351
31:41:47,831 --> 31:41:51,511
so you'll see that there is official
37352
31:41:49,759 --> 31:41:52,959
documentation about creating splash
37353
31:41:51,512 --> 31:41:54,479
screens for android as well on
37354
31:42:02,080 --> 31:42:05,759
um here there is a lot of information
37355
31:42:04,639 --> 31:42:07,279
that you can have a look at and like
37356
31:42:05,759 --> 31:42:09,439
even animations as you can see in here
37357
31:42:07,279 --> 31:42:11,440
what splash screens mean to android
37358
31:42:09,440 --> 31:42:14,400
applications and that you can even
37359
31:42:11,440 --> 31:42:16,800
animate them etc etc so i suggest that
37360
31:42:14,399 --> 31:42:18,959
you actually read the documentation for
37361
31:42:16,800 --> 31:42:20,720
splash screens on android to get a
37362
31:42:18,960 --> 31:42:23,192
better understanding of the differences
37363
31:42:20,720 --> 31:42:25,360
between ios splash screens and android
37364
31:42:23,191 --> 31:42:27,512
splash screens it's always good to know
37365
31:42:25,360 --> 31:42:29,831
i like the underlying implementation and
37366
31:42:27,512 --> 31:42:31,911
how it actually works under the hood
37367
31:42:29,831 --> 31:42:33,511
if you're a flutter developer you don't
37368
31:42:31,911 --> 31:42:35,440
necessarily have to only focus on
37369
31:42:33,512 --> 31:42:37,191
flutter but you since you're deploying
37370
31:42:35,440 --> 31:42:41,360
your application compatible with for
37371
31:42:37,191 --> 31:42:43,759
instance mac os linux windows and
37372
31:42:41,360 --> 31:42:44,960
android it's always good to know in my
37373
31:42:44,960 --> 31:42:49,440
how it works under the hood so
37374
31:42:48,232 --> 31:42:50,720
if you want to have a look at this
37375
31:42:49,440 --> 31:42:53,911
please go ahead and read the
37376
31:42:50,720 --> 31:42:57,360
documentation on how it works and now
37377
31:42:53,911 --> 31:42:59,039
let's go to this a little beauty
37378
31:42:57,360 --> 31:43:00,479
of a link which is on stack overflow
37379
31:42:59,039 --> 31:43:01,831
which which is one of my favorite
37380
31:43:02,960 --> 31:43:07,680
solutions that i can't even think of the
37381
31:43:05,039 --> 31:43:09,591
answers to sorry the problems that i
37382
31:43:07,679 --> 31:43:11,831
can't find the answers to so let's go
37383
31:43:09,592 --> 31:43:13,760
ahead and have a look at this url in
37384
31:43:11,831 --> 31:43:16,080
here which will explain to you the
37385
31:43:13,759 --> 31:43:18,479
different resolutions that we have to
37386
31:43:16,080 --> 31:43:20,639
provide for our splash screen for an
37387
31:43:18,479 --> 31:43:23,440
android device and you saw it from our
37388
31:43:27,440 --> 31:43:31,592
so here you saw that when we exported
37389
31:43:31,759 --> 31:43:35,119
oh this sticky note shouldn't be there i
37390
31:43:33,679 --> 31:43:37,279
don't know why it was added there so i'm
37391
31:43:35,119 --> 31:43:39,679
just going to remove it and i hope that
37392
31:43:37,279 --> 31:43:41,911
we actually didn't create our
37393
31:43:39,679 --> 31:43:43,831
splash screen with that in we could
37394
31:43:41,911 --> 31:43:45,591
double check that by bringing up xcode
37395
31:43:43,831 --> 31:43:46,720
and have it looking have a look at our
37396
31:43:46,720 --> 31:43:50,479
and just have a look at these images
37397
31:43:50,479 --> 31:43:53,759
excuse me i'm going to bring it up and i
37398
31:43:52,000 --> 31:43:55,440
can see that little sticky note wasn't
37399
31:43:53,759 --> 31:43:57,679
in our splash screen so that's really
37400
31:43:55,440 --> 31:43:59,680
good it was just probably a mistake
37401
31:43:59,679 --> 31:44:05,439
that's great so as you saw for ios we
37402
31:44:02,320 --> 31:44:07,592
exported these assets in here three two
37403
31:44:07,592 --> 31:44:12,720
with these suffixes so two x four two x
37404
31:44:10,399 --> 31:44:14,479
three x for three x and nothing for the
37405
31:44:14,479 --> 31:44:19,512
splash screen on one x devices but on
37406
31:44:17,512 --> 31:44:21,832
android there's a lot more that we have
37407
31:44:19,512 --> 31:44:24,000
to export so i'll open that url in here
37408
31:44:21,831 --> 31:44:27,119
that you can you'll also see and you'll
37409
31:44:24,000 --> 31:44:28,960
see that these are the various um
37410
31:44:27,119 --> 31:44:31,591
resolutions that we have to export for
37411
31:44:28,960 --> 31:44:35,120
our splice screen on android we're not
37412
31:44:31,592 --> 31:44:36,639
in our application supporting ldb ldpi
37413
31:44:35,119 --> 31:44:42,551
in here so we'll we're going to go and
37414
31:44:36,639 --> 31:44:44,872
export mdpi hdpi xhdpi and etc etc so
37415
31:44:42,551 --> 31:44:46,479
let's go ahead now in your figma design
37416
31:44:44,872 --> 31:44:48,960
right there select your splash screen
37417
31:44:46,479 --> 31:44:52,159
from the left hand side and go go ahead
37418
31:44:48,960 --> 31:44:54,552
please and remove all these exports
37419
31:44:52,160 --> 31:44:56,320
that we've created earlier okay so what
37420
31:44:54,551 --> 31:44:58,959
we need to do now is to make sure that
37421
31:44:56,320 --> 31:45:00,960
we're conforming to these sizes for mdpi
37422
31:44:58,960 --> 31:45:02,320
for instance and we're going to
37423
31:45:00,960 --> 31:45:04,552
basically select the splash screen and
37424
31:45:06,800 --> 31:45:12,639
that okay these are the sizes so 1x
37425
31:45:10,639 --> 31:45:14,160
let's just say we don't want any suffix
37426
31:45:12,639 --> 31:45:16,160
and i've already prepared something like
37427
31:45:14,160 --> 31:45:18,720
that before so let me just show you how
37428
31:45:18,720 --> 31:45:22,479
and i'm going to select this splash here
37429
31:45:20,960 --> 31:45:25,280
and you can see this is pretty much how
37430
31:45:22,479 --> 31:45:28,231
you should create it so one x and we say
37431
31:45:25,279 --> 31:45:30,720
mdpi as it was displayed in here mdpi
37432
31:45:28,232 --> 31:45:34,872
you see and then we say one and a half x
37433
31:45:30,720 --> 31:45:36,800
is hdpi and xhdpi etc etc okay so let's
37434
31:45:34,872 --> 31:45:39,279
go ahead and do something similar in our
37435
31:45:36,800 --> 31:45:40,720
splash screen in here so one x and as
37436
31:45:39,279 --> 31:45:43,119
you could as you could see in the one
37437
31:45:40,720 --> 31:45:46,232
that i preferred here one x was mdpi so
37438
31:45:43,119 --> 31:45:47,679
let's go ahead and say a suffix is mdpi
37439
31:45:47,679 --> 31:45:53,679
i'll create another export in here and
37440
31:45:50,000 --> 31:45:56,080
we're in this case we need hdpi which is
37441
31:45:53,679 --> 31:45:59,831
one and a half x so let's select this
37442
31:45:56,080 --> 31:46:01,040
and say one and a half x and we say hdpi
37443
31:46:01,039 --> 31:46:06,479
and then we go for the next one which is
37444
31:46:03,191 --> 31:46:09,759
xhdpi so let's go and press the
37445
31:46:06,479 --> 31:46:11,440
plus button in here and say 2x is a x
37446
31:46:11,440 --> 31:46:15,279
and then we go to the next level which
37447
31:46:16,160 --> 31:46:21,192
let's press the plus button and say
37448
31:46:26,800 --> 31:46:31,040
and last but not least we have triplex
37449
31:46:31,039 --> 31:46:37,439
four x the resolution so let's say xxx
37450
31:46:37,440 --> 31:46:42,232
and in here this should be 4x okay so
37451
31:46:40,479 --> 31:46:43,591
now oops i didn't want to create this
37452
31:46:43,592 --> 31:46:48,639
that's how yours should also look like
37453
31:46:45,831 --> 31:46:49,511
with all these uh various resolutions in
37454
31:46:51,119 --> 31:46:54,959
so now what i need you to do please is
37455
31:46:53,279 --> 31:46:56,232
just to go ahead so make sure that your
37456
31:46:54,960 --> 31:46:58,320
slash screen is selected on the left
37457
31:46:56,232 --> 31:47:00,552
hand side and then just go and export
37458
31:46:58,320 --> 31:47:02,552
all of these so let's just press the
37459
31:47:02,551 --> 31:47:06,080
so that's going to take its time and
37460
31:47:04,551 --> 31:47:07,911
calculate basically all these different
37461
31:47:06,080 --> 31:47:09,360
resolutions prepare the pngs for us and
37462
31:47:07,911 --> 31:47:10,872
it's going to pack them into beautiful
37463
31:47:10,872 --> 31:47:14,320
it's going to download that packed file
37464
31:47:12,551 --> 31:47:16,319
for us so depending on your connection
37465
31:47:14,320 --> 31:47:18,800
speed this could take some time and the
37466
31:47:16,320 --> 31:47:20,000
result i can see is an untitled 2 zip
37467
31:47:20,000 --> 31:47:26,080
of about 10 megabytes so there we go
37468
31:47:26,080 --> 31:47:30,232
double click on this file in order to
37469
31:47:28,080 --> 31:47:32,160
unpack it and i'm going to open the
37470
31:47:30,232 --> 31:47:34,080
folder here for you so you can also see
37471
31:47:32,160 --> 31:47:35,911
as you can see splash screen
37472
31:47:34,080 --> 31:47:37,440
it's all there so they're all looking
37473
31:47:35,911 --> 31:47:38,959
very similar to each other but they have
37474
31:47:37,440 --> 31:47:41,592
very different sizes as you can see
37475
31:47:38,960 --> 31:47:45,360
though so the xxx hdpi has the size of
37476
31:47:41,592 --> 31:47:48,232
almost four megabytes whereas the mdpi
37477
31:47:48,232 --> 31:47:52,232
now we got our images perfect so what we
37478
31:47:54,000 --> 31:47:58,399
call them splash screens and then place
37479
31:47:59,512 --> 31:48:04,551
mipmaps folder in our android
37480
31:48:02,080 --> 31:48:06,400
application so let me bring up visual
37481
31:48:04,551 --> 31:48:08,080
studio code in here let me see where
37482
31:48:06,399 --> 31:48:09,911
i've placed my visual studio code right
37483
31:48:12,232 --> 31:48:16,000
go into exploration a little bit here
37484
31:48:14,232 --> 31:48:17,192
you can see we have an ios folder so let
37485
31:48:16,000 --> 31:48:18,080
me just make the size a little bit
37486
31:48:19,360 --> 31:48:24,160
and we have an android folder in here so
37487
31:48:21,360 --> 31:48:27,119
if you go to android and then app src
37488
31:48:24,160 --> 31:48:30,232
main and then res and you'll see that
37489
31:48:27,119 --> 31:48:32,319
you have these mipmap folders hdpi mdpi
37490
31:48:30,232 --> 31:48:35,192
and all those one two three four five
37491
31:48:32,320 --> 31:48:37,680
folders that we need for our five assets
37492
31:48:35,191 --> 31:48:40,551
in here okay so let's go ahead and
37493
31:48:37,679 --> 31:48:42,719
actually name this file in here and let
37494
31:48:40,551 --> 31:48:44,319
me close this little folder that i have
37495
31:48:42,720 --> 31:48:47,360
at the bottom of the screen as well so
37496
31:48:44,320 --> 31:48:50,400
okay so um we start with mdpi in here
37497
31:48:47,360 --> 31:48:53,279
let's just call it splash okay slash png
37498
31:48:50,399 --> 31:48:54,871
and i'm just gonna go to this mdpi
37499
31:48:53,279 --> 31:48:57,279
folder here and i can see i have a
37500
31:48:54,872 --> 31:49:02,160
launcher icon an ic launcher so let's
37501
31:48:57,279 --> 31:49:03,360
just drag this into mip map mdpi if i
37502
31:49:03,360 --> 31:49:08,232
and mid map mdpi there it is so the mdp
37503
31:49:09,119 --> 31:49:12,639
i'm going to delete it from here so now
37504
31:49:10,872 --> 31:49:16,000
we have hdpi then i'm going to call it
37505
31:49:12,639 --> 31:49:18,160
splash again remember it's hdpi so i'm
37506
31:49:16,000 --> 31:49:21,360
going to drag and drop it into the hdpi
37507
31:49:18,160 --> 31:49:22,960
folder so it's called png there as well
37508
31:49:21,360 --> 31:49:25,512
then i'm going to delete it from here
37509
31:49:22,960 --> 31:49:27,680
then we have the xhdpi so i'm going to
37510
31:49:27,679 --> 31:49:33,439
and remember xhdpi so let's go and drag
37511
31:49:30,872 --> 31:49:34,592
it there great then delete it from here
37512
31:49:34,592 --> 31:49:40,872
xxhdpi so call it splash again
37513
31:49:37,512 --> 31:49:42,720
and bring it into xx folder in here
37514
31:49:40,872 --> 31:49:43,832
and i can see it's right there splash
37515
31:49:43,831 --> 31:49:48,479
and last but not least we have the
37516
31:49:45,911 --> 31:49:50,399
triple x hdpi and we're going to call it
37517
31:49:48,479 --> 31:49:52,872
slash again and then let's go in here
37518
31:49:52,872 --> 31:49:57,911
great so now you should actually see one
37519
31:50:00,960 --> 31:50:06,639
and five images that we have exported
37520
31:50:04,232 --> 31:50:10,480
and placed inside our android folder so
37521
31:50:06,639 --> 31:50:10,479
then i can delete the last one safely
37522
31:50:10,872 --> 31:50:15,440
so now that we've done that we need to
37523
31:50:13,512 --> 31:50:17,040
actually tell our android application to
37524
31:50:15,440 --> 31:50:19,191
use those splash screens so what we need
37525
31:50:17,039 --> 31:50:21,591
to do is to look for android window
37526
31:50:19,191 --> 31:50:23,279
background inside our application i'm
37527
31:50:21,592 --> 31:50:25,592
going to close all these open tabs and
37528
31:50:23,279 --> 31:50:28,000
i'm going to search for android window
37529
31:50:25,592 --> 31:50:30,080
background just like that okay
37530
31:50:28,000 --> 31:50:33,360
so you'll find four of them but only two
37531
31:50:30,080 --> 31:50:35,360
of them are actually interesting for us
37532
31:50:33,360 --> 31:50:38,000
so what we need to do is actually i'm
37533
31:50:35,360 --> 31:50:39,759
going to go to my styles as well here so
37534
31:50:38,000 --> 31:50:41,191
as you can see here is using a drawable
37535
31:50:39,759 --> 31:50:42,871
but we're not using a drawable a
37536
31:50:41,191 --> 31:50:44,799
drawable is something that for instance
37537
31:50:42,872 --> 31:50:48,000
if you look for launch background let's
37538
31:50:48,000 --> 31:50:51,592
fine launch background actually is there
37539
31:50:49,759 --> 31:50:53,591
a drawable called launch oh we don't
37540
31:50:51,592 --> 31:50:56,000
have it right now okay anyways so i'm
37541
31:50:56,000 --> 31:51:00,232
android window background as it was our
37542
31:51:00,232 --> 31:51:03,592
so let's go in here and find that window
37543
31:51:02,080 --> 31:51:05,759
background and here as you can see it
37544
31:51:03,592 --> 31:51:08,960
says drawable launch background and this
37545
31:51:05,759 --> 31:51:11,191
file is android app src main res values
37546
31:51:08,960 --> 31:51:13,040
styles xml so that's the first one okay
37547
31:51:11,191 --> 31:51:15,679
that's this drawable so i need you in
37548
31:51:13,039 --> 31:51:17,679
here to change this to mipmap
37549
31:51:15,679 --> 31:51:20,079
and in here just say splash which is the
37550
31:51:17,679 --> 31:51:22,479
name of our file that we created okay so
37551
31:51:20,080 --> 31:51:24,639
that's the first um occurrence of this
37552
31:51:22,479 --> 31:51:26,639
android window background and then we're
37553
31:51:24,639 --> 31:51:29,279
going to go in here as well which is in
37554
31:51:26,639 --> 31:51:33,512
android app src main res values knight
37555
31:51:29,279 --> 31:51:34,551
styles xml and call this mipmap
37556
31:51:34,551 --> 31:51:40,159
and in here we also say splash perfect
37557
31:51:40,160 --> 31:51:44,480
so what we need to do now is to actually
37558
31:51:42,160 --> 31:51:46,232
test our changes on android as well so
37559
31:51:44,479 --> 31:51:49,039
i'm going to close all those tabs as you
37560
31:51:46,232 --> 31:51:51,279
saw and let's just go to main dart file
37561
31:51:49,039 --> 31:51:53,039
just to have a dart file open
37562
31:51:51,279 --> 31:51:54,319
and then i'm going to stop the running
37563
31:51:53,039 --> 31:51:55,679
of this application because i don't
37564
31:51:54,320 --> 31:51:58,232
really know i think it's actually
37565
31:51:55,679 --> 31:52:00,079
running the application on um the iphone
37566
31:51:58,232 --> 31:52:02,080
simulator and then i'm going to say
37567
31:52:00,080 --> 31:52:03,831
command shift p on a macintosh or ctrl
37568
31:52:02,080 --> 31:52:05,512
shift p in windows and linux if you're
37569
31:52:03,831 --> 31:52:07,360
on visual studio code and then say
37570
31:52:05,512 --> 31:52:09,191
flutter select device as you can see in
37571
31:52:07,360 --> 31:52:12,160
here and then i'm going to choose my
37572
31:52:09,191 --> 31:52:13,440
android phone okay and as you know from
37573
31:52:13,440 --> 31:52:17,360
chapters i actually prefer to run my
37574
31:52:15,039 --> 31:52:19,511
applications real phones and then run
37575
31:52:17,360 --> 31:52:20,872
and then run without debugging
37576
31:52:20,872 --> 31:52:25,120
basically kick start our gradle build
37577
31:52:23,279 --> 31:52:30,080
processing here and while that is
37578
31:52:25,119 --> 31:52:32,959
ongoing i'll go and bring um scr cpy to
37579
31:52:30,080 --> 31:52:34,960
the screen so here it is and
37580
31:52:34,960 --> 31:52:38,000
nothing actually what happened to our
37581
31:52:38,000 --> 31:52:42,639
i think our build somehow crashed so
37582
31:52:40,551 --> 31:52:44,319
let's go and build again and see what
37583
31:52:47,279 --> 31:52:51,759
okay i can see it says there is a
37584
31:52:49,191 --> 31:52:54,720
problem and let's see another expected
37585
31:52:51,759 --> 31:52:58,080
caller reference bot got raw string mid
37586
31:52:54,720 --> 31:53:01,279
map splash okay so let's have a look at
37587
31:52:58,080 --> 31:53:03,592
what we actually did with this mid map
37588
31:53:01,279 --> 31:53:06,000
splash i can see i've actually written
37589
31:53:03,592 --> 31:53:07,440
incorrectly i've written me map so that
37590
31:53:06,000 --> 31:53:09,279
could that could explain it it's a
37591
31:53:07,440 --> 31:53:10,960
mid-map so if you've done the same
37592
31:53:09,279 --> 31:53:13,440
mistake as me in one place please just
37593
31:53:15,279 --> 31:53:21,039
fine okay fair enough and let's now try
37594
31:53:18,399 --> 31:53:23,591
to run the application again and see if
37595
31:53:25,191 --> 31:53:30,080
it got a raw string again and it's now
37596
31:53:27,911 --> 31:53:31,831
did i really type it in correctly did i
37597
31:53:31,831 --> 31:53:37,191
this is unbelievable um if i've actually
37598
31:53:37,191 --> 31:53:41,911
so no i i think i've actually written it
37599
31:53:39,759 --> 31:53:43,591
in two places incorrectly so
37600
31:53:45,440 --> 31:53:49,592
it would be very comical if i made a
37601
31:53:47,279 --> 31:53:51,360
mistake again while trying to fix my
37602
31:53:51,360 --> 31:53:55,759
so let's see now if the android build is
37603
31:53:53,831 --> 31:54:00,159
gonna go through successfully so i'll
37604
31:53:55,759 --> 31:54:00,159
just wait here until that task is done
37605
31:54:01,360 --> 31:54:07,119
okay it's built successfully i was just
37606
31:54:03,759 --> 31:54:07,119
gonna go grab some coffee so
37607
31:54:08,160 --> 31:54:12,480
and it's connecting now so that actually
37608
31:54:10,232 --> 31:54:14,639
went really fast i would say gradle
37609
31:54:12,479 --> 31:54:16,319
builds in here are surprisingly fast
37610
31:54:14,639 --> 31:54:19,592
when running with flutter for instance
37611
31:54:16,320 --> 31:54:21,512
compared to the ios xcode build system
37612
31:54:19,592 --> 31:54:23,279
so i'm going to bring up scrcpy in here
37613
31:54:21,512 --> 31:54:24,872
and i can see the application running
37614
31:54:23,279 --> 31:54:27,279
without a problem but we didn't actually
37615
31:54:27,279 --> 31:54:29,911
what i'm going to do is i'm going to
37616
31:54:29,911 --> 31:54:33,440
processing here which kills the
37617
31:54:31,512 --> 31:54:35,680
application and then i'm gonna find our
37618
31:54:33,440 --> 31:54:38,000
application here and then open it and
37619
31:54:35,679 --> 31:54:39,831
then i can see our beautiful splash
37620
31:54:38,000 --> 31:54:41,911
screen on the screen when the
37621
31:54:39,831 --> 31:54:44,231
application starts so that's also
37622
31:54:41,911 --> 31:54:46,399
working as expected no problems at all
37623
31:54:44,232 --> 31:54:48,232
and remember we've done quite a lot of
37624
31:54:46,399 --> 31:54:49,911
work now we've done like icons from the
37625
31:54:48,232 --> 31:54:51,832
previous chapters and we've also worked
37626
31:54:51,831 --> 31:54:54,959
there's lots that we've done but we
37627
31:54:53,440 --> 31:54:56,960
haven't really committed any of these
37628
31:54:54,960 --> 31:54:58,400
because the work wasn't complete
37629
31:55:00,720 --> 31:55:04,872
both icons and splash screens on both
37630
31:55:02,800 --> 31:55:06,479
ios and android i think it's time that
37631
31:55:04,872 --> 31:55:08,232
we do as we usually do at the end of
37632
31:55:06,479 --> 31:55:09,759
every chapter is to commit our work and
37633
31:55:08,232 --> 31:55:10,552
make sure that we're not going to lose
37634
31:55:10,551 --> 31:55:14,639
so i'm going to do some reshuffling on
37635
31:55:12,479 --> 31:55:16,959
the screen right here and i'm going to
37636
31:55:14,639 --> 31:55:19,831
increase the size here as well so i'm
37637
31:55:16,960 --> 31:55:23,120
going to go to terminal then like this
37638
31:55:19,831 --> 31:55:25,039
and let's then have a look at the status
37639
31:55:23,119 --> 31:55:26,871
and you can see that we've done a lot of
37640
31:55:26,872 --> 31:55:30,639
there are many files that have been
37641
31:55:28,720 --> 31:55:32,000
changed as you can see in here modified
37642
31:55:32,000 --> 31:55:36,800
a tremendous amount of work so
37643
31:55:34,320 --> 31:55:40,000
let's just say get at all and then let's
37644
31:55:40,000 --> 31:55:45,440
is it step 28 yes step 28 okay
37645
31:55:43,831 --> 31:55:48,551
so if you look at our logs so we have
37646
31:55:45,440 --> 31:55:50,639
step 27 and then we have step 28 as well
37647
31:55:48,551 --> 31:55:52,872
so i'm gonna push all these changes and
37648
31:55:50,639 --> 31:55:55,592
this push is actually quite a big push
37649
31:55:52,872 --> 31:55:58,551
because we have a lot of resources that
37650
31:55:55,592 --> 31:56:00,160
we're pushing to github so or wherever
37651
31:55:58,551 --> 31:56:02,231
you're hosting your git repository it
37652
31:56:00,160 --> 31:56:04,552
could be bitbucket or somewhere else but
37653
31:56:02,232 --> 31:56:06,800
depending on your connection and the
37654
31:56:04,551 --> 31:56:08,720
ability of your host to receive these
37655
31:56:06,800 --> 31:56:11,192
files this operation could actually take
37656
31:56:08,720 --> 31:56:14,232
some time so and after we've done that
37657
31:56:11,191 --> 31:56:18,159
let's also tag our work at step 28
37658
31:56:14,232 --> 31:56:18,160
like that and push our tags
37659
31:56:18,320 --> 31:56:22,400
all right so if i say now git tag we
37660
31:56:22,399 --> 31:56:29,191
27 and 28 line up right there so perfect
37661
31:56:26,232 --> 31:56:30,400
and we should have no status right now
37662
31:56:30,399 --> 31:56:34,159
as it's tradition after our tagging and
37663
31:56:32,639 --> 31:56:35,279
committing everything at the end of
37664
31:56:34,160 --> 31:56:36,960
every chapter we'll talk about what we
37665
31:56:35,279 --> 31:56:38,551
need to discuss in the chapter that is
37666
31:56:39,679 --> 31:56:43,439
i can't believe we're actually getting
37667
31:56:41,119 --> 31:56:46,000
to this point in this course it is such
37668
31:56:43,440 --> 31:56:48,160
a huge moment both both for me and i
37669
31:56:46,000 --> 31:56:50,800
hope it is for you as well because we
37670
31:56:48,160 --> 31:56:52,960
are actually going to submit our ios
37671
31:56:52,960 --> 31:56:57,120
so without further ado if you want to
37672
31:56:55,119 --> 31:56:58,871
get some refreshments please do and i'll
37673
31:56:58,872 --> 31:57:02,479
hello and welcome to chapter 47 of the
37674
31:57:02,479 --> 31:57:05,911
uh we've been waiting for this moment
37675
31:57:04,080 --> 31:57:08,080
for a very long time now at least i have
37676
31:57:05,911 --> 31:57:09,911
so that we have been developing our
37677
31:57:08,080 --> 31:57:11,759
application using block we've been doing
37678
31:57:09,911 --> 31:57:14,319
a lot of work with widgets we've
37679
31:57:11,759 --> 31:57:15,831
prepared splash screens icons etc etc
37680
31:57:14,320 --> 31:57:18,160
we've even got our hands dirty with
37681
31:57:15,831 --> 31:57:20,399
figma a task that maybe many of you
37682
31:57:20,399 --> 31:57:25,759
what is left now well we're gonna send
37683
31:57:22,872 --> 31:57:28,479
our application to the ios app store and
37684
31:57:25,759 --> 31:57:29,911
it gives me really a lot of pressure
37685
31:57:28,479 --> 31:57:31,591
pleasure to actually announce that that
37686
31:57:31,592 --> 31:57:36,080
what do we need to do in order to be
37687
31:57:33,512 --> 31:57:36,960
able to interact with the app store and
37688
31:57:36,960 --> 31:57:40,000
in order to be able to create your
37689
31:57:38,320 --> 31:57:43,192
application of course you you're going
37690
31:57:40,000 --> 31:57:45,039
to need to have a macintosh and that is
37691
31:57:43,191 --> 31:57:46,720
as i've mentioned an unfortunate fact
37692
31:57:45,039 --> 31:57:48,319
when you're dealing with ios development
37693
31:57:46,720 --> 31:57:51,040
but if you don't have a macintosh you
37694
31:57:48,320 --> 31:57:53,360
can always contact a friend or maybe you
37695
31:57:51,039 --> 31:57:55,279
use a service on the internet that can
37696
31:57:53,360 --> 31:57:56,800
for instance take your source code and
37697
31:57:55,279 --> 31:57:58,959
build your application for you i don't
37698
31:57:56,800 --> 31:58:00,720
know if those services exist however
37699
31:57:58,960 --> 31:58:02,160
let's just accept the fact the
37700
31:58:00,720 --> 31:58:03,759
unfortunate fact that you'll need to
37701
31:58:02,160 --> 31:58:06,000
have a macintosh in order to build your
37702
31:58:03,759 --> 31:58:07,591
application and send it to the ios app
37703
31:58:08,479 --> 31:58:13,360
what do we actually need you see when
37704
31:58:10,479 --> 31:58:16,080
you create your application for um for
37705
31:58:13,360 --> 31:58:17,759
apple you need to bundle it up inside a
37706
31:58:16,080 --> 31:58:21,040
file which is pretty much just a zip
37707
31:58:17,759 --> 31:58:23,679
file but its extension is called ipa
37708
31:58:21,039 --> 31:58:26,000
and this zip file in essence contains
37709
31:58:23,679 --> 31:58:27,679
your entire application bundle all the
37710
31:58:27,679 --> 31:58:32,959
signed binaries from your side and then
37711
31:58:29,911 --> 31:58:34,000
you'll just need to submit it to apple
37712
31:58:34,000 --> 31:58:38,800
then this submission is going to go to
37713
31:58:36,479 --> 31:58:39,831
something called app store connect and
37714
31:58:39,831 --> 31:58:44,231
we're going to now talk about app store
37715
31:58:41,911 --> 31:58:45,191
connect actually and what that is so you
37716
31:58:45,191 --> 31:58:48,159
when when you're developing your flutter
37717
31:58:46,960 --> 31:58:49,760
application for instance and you're
37718
31:58:48,160 --> 31:58:51,360
talking with firebase then inside of
37719
31:58:49,759 --> 31:58:54,000
your code you're talking with the
37720
31:58:51,360 --> 31:58:56,551
firebase sdk but on the backend side of
37721
31:58:54,000 --> 31:58:58,960
firebase then there's an entire console
37722
31:58:56,551 --> 31:59:00,800
so there's in the console.firebase
37723
31:58:58,960 --> 31:59:02,232
google.com i think it's called
37724
31:59:00,800 --> 31:59:04,160
or if you just google it and say
37725
31:59:02,232 --> 31:59:05,279
firebase console you'll get to that
37726
31:59:07,679 --> 31:59:13,511
the firebase console for ios developers
37727
31:59:10,720 --> 31:59:14,800
so it is where you basically manage your
37728
31:59:14,800 --> 31:59:19,192
the reviews that are submitted to your
37729
31:59:16,800 --> 31:59:21,592
applications you can respond to those
37730
31:59:19,191 --> 31:59:22,871
reviews so it's like the back end
37731
31:59:22,872 --> 31:59:26,800
is kind of like a front end for app
37732
31:59:26,800 --> 31:59:31,192
you could say so it's your portal
37733
31:59:28,960 --> 31:59:32,800
basically to to the app store as a
37734
31:59:32,800 --> 31:59:37,279
and google also has something similar
37735
31:59:34,872 --> 31:59:38,832
which is the google developer console
37736
31:59:38,831 --> 31:59:43,759
me so what we need to do now in order to
37737
31:59:42,232 --> 31:59:47,440
be able to continue we need to actually
37738
31:59:43,759 --> 31:59:49,911
create our applications on the app store
37739
31:59:47,440 --> 31:59:51,440
connect so what i'm going to do in here
37740
31:59:49,911 --> 31:59:52,800
is i'm going to bring up app store
37741
31:59:51,440 --> 31:59:54,720
connect and i've already logged in with
37742
31:59:54,720 --> 31:59:58,479
and let's go in here as you can see
37743
31:59:56,872 --> 32:00:00,639
these are some of the apps that i'd
37744
31:59:58,479 --> 32:00:02,800
submitted to apple previously
37745
32:00:00,639 --> 32:00:04,399
if i can increase the size of this let's
37746
32:00:05,759 --> 32:00:10,231
so what we need to do is in order to be
37747
32:00:08,000 --> 32:00:11,831
able to submit our application if we
37748
32:00:10,232 --> 32:00:13,832
haven't done that before for this
37749
32:00:11,831 --> 32:00:15,679
particular application which we haven't
37750
32:00:13,831 --> 32:00:17,360
we need to create an application here on
37751
32:00:15,679 --> 32:00:19,439
app store connect okay so please go to
37752
32:00:19,440 --> 32:00:22,551
and then you'll be presented with a
37753
32:00:21,039 --> 32:00:23,911
screen that asks you okay what do you
37754
32:00:22,551 --> 32:00:25,831
want to do with app store connect and it
37755
32:00:23,911 --> 32:00:28,232
kind of looks like this my apps app
37756
32:00:30,399 --> 32:00:34,159
i'm assuming that you have admin access
37757
32:00:32,639 --> 32:00:35,679
to app store connect because apps are
37758
32:00:37,440 --> 32:00:40,960
permission it's like permission based so
37759
32:00:39,679 --> 32:00:43,591
if you're for instance working with a
37760
32:00:40,960 --> 32:00:45,592
company and that company has invited you
37761
32:00:43,592 --> 32:00:47,192
to their own app store connect account
37762
32:00:45,592 --> 32:00:49,912
and depending on the permissions that
37763
32:00:47,191 --> 32:00:53,759
they set for you you may or may not have
37764
32:00:49,911 --> 32:00:55,911
access to either one or all the apps so
37765
32:00:53,759 --> 32:00:58,399
it is also app-based the permission so
37766
32:00:55,911 --> 32:01:00,479
like and i can invite you to my app
37767
32:00:58,399 --> 32:01:02,231
store connect and only give you access
37768
32:01:00,479 --> 32:01:05,039
for instance to this application and
37769
32:01:02,232 --> 32:01:07,040
only give you a very limited access or
37770
32:01:07,039 --> 32:01:11,279
so if you don't have access to this app
37771
32:01:09,039 --> 32:01:13,511
sections because you're invited as
37772
32:01:11,279 --> 32:01:15,679
um as a user to someone else's app store
37773
32:01:13,512 --> 32:01:17,680
connect account and they haven't given
37774
32:01:15,679 --> 32:01:20,079
you the access to access their
37775
32:01:17,679 --> 32:01:22,159
application so you need to ask them for
37776
32:01:20,080 --> 32:01:24,320
permission basically to increase the
37777
32:01:24,320 --> 32:01:27,680
so let's go ahead and press this plus
37778
32:01:25,759 --> 32:01:29,439
button and this is in here we're going
37779
32:01:27,679 --> 32:01:31,679
to say new app and in here it's going to
37780
32:01:29,440 --> 32:01:34,400
ask you okay what kind of app is it it's
37781
32:01:31,679 --> 32:01:36,551
an ios app it's not a mac os like we
37782
32:01:34,399 --> 32:01:39,039
haven't really worked on a native mac os
37783
32:01:41,679 --> 32:01:46,231
m1 processors on macintosh with
37784
32:01:44,160 --> 32:01:48,639
macintosh which are arm based they can
37785
32:01:46,232 --> 32:01:50,552
actually install ios applications as
37786
32:01:48,639 --> 32:01:52,000
you'll soon see so this application that
37787
32:01:50,551 --> 32:01:54,720
we're developing flutter we didn't
37788
32:01:52,000 --> 32:01:56,551
actually create a macintosh target for
37789
32:01:54,720 --> 32:01:58,160
it but even though it's an ios
37790
32:01:56,551 --> 32:02:00,551
application you can still install it
37791
32:01:58,160 --> 32:02:02,480
with test flight or later when it's
37792
32:02:00,551 --> 32:02:04,479
actually released on the ios app store
37793
32:02:02,479 --> 32:02:06,231
you can install it with the mac app
37794
32:02:04,479 --> 32:02:07,759
store on your macintosh so it's
37795
32:02:07,759 --> 32:02:11,039
okay so here one you need to do in the
37796
32:02:11,039 --> 32:02:16,319
you need to find a unique name in the
37797
32:02:13,759 --> 32:02:18,399
entire app store there are millions of
37798
32:02:16,320 --> 32:02:19,680
applications on the i'm actually making
37799
32:02:18,399 --> 32:02:20,959
up this statistic i don't know if it's
37800
32:02:19,679 --> 32:02:23,119
like hundreds of thousands of
37801
32:02:20,960 --> 32:02:24,720
applications or millions but let's just
37802
32:02:23,119 --> 32:02:26,000
let's just say millions because easier
37803
32:02:26,000 --> 32:02:29,191
all these applications are in the app
37804
32:02:27,360 --> 32:02:31,911
store you have to find a unique name for
37805
32:02:29,191 --> 32:02:35,119
your application and remember you can't
37806
32:02:31,911 --> 32:02:36,319
use reserved words so if you look in
37807
32:02:36,320 --> 32:02:41,512
if i cancel this if you look in here
37808
32:02:38,872 --> 32:02:43,120
this is not an accepted application name
37809
32:02:41,512 --> 32:02:45,592
so i just i've prepared this in here
37810
32:02:43,119 --> 32:02:47,360
just to demonstrate it for you that
37811
32:02:45,592 --> 32:02:50,000
if you use for instance a name like
37812
32:02:50,000 --> 32:02:54,479
probably apple is going to reject your
37813
32:02:51,592 --> 32:02:56,160
application and definitely google is not
37814
32:02:54,479 --> 32:02:59,119
even going to allow you to go to the
37815
32:02:56,160 --> 32:03:00,960
google play store with a name
37816
32:02:59,119 --> 32:03:02,959
with a part of your application name
37817
32:03:00,960 --> 32:03:04,720
being a reserved word like a product
37818
32:03:04,720 --> 32:03:08,960
you have to find a unique name that is
37819
32:03:06,551 --> 32:03:10,872
not reserved so let's just say ios and
37820
32:03:08,960 --> 32:03:13,592
what should we call this i mean in our
37821
32:03:10,872 --> 32:03:15,279
application we call it now my notes
37822
32:03:13,592 --> 32:03:18,080
i'm pretty sure if you say my notes that
37823
32:03:20,232 --> 32:03:26,400
awesome notes something like that
37824
32:03:24,639 --> 32:03:28,479
as you can see it says it is the name
37825
32:03:26,399 --> 32:03:29,911
that will appear in the app store okay
37826
32:03:29,911 --> 32:03:33,512
and in here in this box the primary
37827
32:03:31,831 --> 32:03:35,279
language we're going to choose english
37828
32:03:33,512 --> 32:03:37,760
and we're going to choose us because we
37829
32:03:39,119 --> 32:03:42,319
our language like how we actually
37830
32:03:40,639 --> 32:03:43,759
interact with the user with our strings
37831
32:03:42,320 --> 32:03:45,760
in the application to make sure that
37832
32:03:43,759 --> 32:03:47,511
it's like british english or us english
37833
32:03:45,759 --> 32:03:49,119
so let's just go with the international
37834
32:03:49,119 --> 32:03:52,231
and in this box you're going to be asked
37835
32:03:51,039 --> 32:03:55,039
to actually choose your bundle
37836
32:03:52,232 --> 32:03:56,800
identifier and app store connect has
37837
32:03:55,039 --> 32:03:58,719
then after you log in with app store
37838
32:03:56,800 --> 32:04:01,279
connect it's going to hook into the
37839
32:03:58,720 --> 32:04:02,960
developer account for this user that you
37840
32:04:01,279 --> 32:04:05,512
logged in with and it's going to pull
37841
32:04:02,960 --> 32:04:07,440
all your bundle identifiers into the app
37842
32:04:05,512 --> 32:04:09,760
store connect so you don't have to type
37843
32:04:07,440 --> 32:04:11,191
it by hand so let's go find our my notes
37844
32:04:09,759 --> 32:04:13,119
application as you can see in here it's
37845
32:04:11,191 --> 32:04:15,440
as epic salty my notes and for you it
37846
32:04:15,440 --> 32:04:20,160
so i chose that and then sku is a unique
37847
32:04:18,551 --> 32:04:22,080
id for your app that is not visible on
37848
32:04:20,160 --> 32:04:23,832
the app store so this is mainly for you
37849
32:04:23,831 --> 32:04:29,191
it kind of comes from like um
37850
32:04:27,039 --> 32:04:31,191
old school when you had a normal
37851
32:04:29,191 --> 32:04:33,191
physical store and your products had
37852
32:04:31,191 --> 32:04:36,080
kind of like an identifier so this is an
37853
32:04:33,191 --> 32:04:38,159
identifier for you it may appear some
37854
32:04:36,080 --> 32:04:40,479
places like when you're extracting some
37855
32:04:38,160 --> 32:04:42,400
reports from apple to see okay how many
37856
32:04:40,479 --> 32:04:44,551
unique users do i have how many unique
37857
32:04:44,551 --> 32:04:48,080
so this sku is mainly for you it's an
37858
32:04:46,720 --> 32:04:49,592
identifier so you could just go with
37859
32:04:48,080 --> 32:04:51,279
something that makes sense to you and in
37860
32:04:49,592 --> 32:04:53,760
here i'm just gonna say zero one zero
37861
32:04:54,720 --> 32:04:59,360
this and then one one one one
37862
32:04:59,360 --> 32:05:03,680
and user access in here you can say you
37863
32:05:01,592 --> 32:05:05,512
you can limit which user see this app in
37864
32:05:03,679 --> 32:05:07,591
the app store connect if you select full
37865
32:05:05,512 --> 32:05:10,720
access all your users will have access
37866
32:05:07,592 --> 32:05:12,800
to the app so this is like you limiting
37867
32:05:10,720 --> 32:05:14,551
who can in your app store connect
37868
32:05:12,800 --> 32:05:16,479
account who can have access to this
37869
32:05:14,551 --> 32:05:18,639
application and since i don't have any
37870
32:05:16,479 --> 32:05:20,319
guest users in my private company's
37871
32:05:18,639 --> 32:05:22,479
account i'm just gonna go with full
37872
32:05:20,320 --> 32:05:24,232
access but if you're working with like
37873
32:05:22,479 --> 32:05:25,911
if you're if you're the account owner
37874
32:05:24,232 --> 32:05:27,680
and then you have some other people
37875
32:05:25,911 --> 32:05:29,831
invited to app store connect that don't
37876
32:05:27,679 --> 32:05:31,511
want that shouldn't get access to this
37877
32:05:29,831 --> 32:05:33,911
account you could just go in here and
37878
32:05:31,512 --> 32:05:35,680
basically say limit the access to this
37879
32:05:33,911 --> 32:05:37,119
application to these accounts but i'm
37880
32:05:35,679 --> 32:05:39,039
just going to go with full access okay
37881
32:05:37,119 --> 32:05:40,720
i'm going to say create and in here is
37882
32:05:39,039 --> 32:05:42,231
the place that you may actually get a
37883
32:05:40,720 --> 32:05:44,399
problem with the name of the application
37884
32:05:42,232 --> 32:05:46,552
so let's just try it out and see if my
37885
32:05:44,399 --> 32:05:48,399
awesome notes is some name that somebody
37886
32:05:46,551 --> 32:05:50,319
else has taken and we'll get to know
37887
32:05:50,320 --> 32:05:54,800
and from from the looks of it it seems
37888
32:05:52,399 --> 32:05:57,759
like that my awesome notes was such a
37889
32:05:54,800 --> 32:06:00,551
lame name that nobody has taken so
37890
32:05:57,759 --> 32:06:03,831
so that's great for us so um now we've
37891
32:06:00,551 --> 32:06:06,479
created the application and um
37892
32:06:06,479 --> 32:06:09,279
so as you can see in here the first
37893
32:06:07,831 --> 32:06:12,639
thing that you have to enter in this
37894
32:06:09,279 --> 32:06:15,360
screen let me actually increase the size
37895
32:06:12,639 --> 32:06:17,119
and let me change the screen layout a
37896
32:06:17,119 --> 32:06:21,360
so the first thing that we see on the
37897
32:06:18,960 --> 32:06:22,639
screen here is that uh there's a version
37898
32:06:21,360 --> 32:06:24,232
information and also there's app
37899
32:06:22,639 --> 32:06:25,512
previews and screenshots and this is the
37900
32:06:24,232 --> 32:06:27,592
place that we're gonna upload our
37901
32:06:25,512 --> 32:06:28,960
screenshots to the app store
37902
32:06:27,592 --> 32:06:30,960
as you can see at the bottom of the
37903
32:06:28,960 --> 32:06:33,120
screen it's very important that you take
37904
32:06:30,960 --> 32:06:35,912
your screenshots first on an iphone 13
37905
32:06:35,911 --> 32:06:40,000
the iphone with a six and a half inch
37906
32:06:38,000 --> 32:06:41,360
display and you may be tempted to just
37907
32:06:40,000 --> 32:06:44,160
try to take your screenshots on an
37908
32:06:41,360 --> 32:06:45,592
iphone 13 pro but if you do that then
37909
32:06:44,160 --> 32:06:47,192
you'll understand after uploading them
37910
32:06:45,592 --> 32:06:49,440
you'll get an error from app store
37911
32:06:47,191 --> 32:06:52,479
connect saying that the resolution isn't
37912
32:06:49,440 --> 32:06:54,960
according to what is expected so what we
37913
32:06:52,479 --> 32:06:57,360
need to do here is to go to our iphone
37914
32:06:54,960 --> 32:06:58,800
um simulator so and i have quite a few
37915
32:06:58,800 --> 32:07:04,872
so this is our iphone 13 pro
37916
32:07:04,872 --> 32:07:10,080
and also we have our iphone 13 pro max
37917
32:07:08,080 --> 32:07:12,720
so now our responsibility is to actually
37918
32:07:10,080 --> 32:07:14,960
take the screenshots on this simulator
37919
32:07:12,720 --> 32:07:16,479
however you'll notice that we have a
37920
32:07:16,479 --> 32:07:20,080
well problem problem but for taking
37921
32:07:18,639 --> 32:07:21,512
screenshots this is a little bit of a
37922
32:07:20,080 --> 32:07:23,911
problem in that we have this debug
37923
32:07:21,512 --> 32:07:25,760
manner here that i am that flutter
37924
32:07:23,911 --> 32:07:27,360
creates by default so if i zoom in a
37925
32:07:25,759 --> 32:07:28,959
little bit here you'll see that it's
37926
32:07:27,360 --> 32:07:30,479
it's just saying debug right here and we
37927
32:07:28,960 --> 32:07:32,960
need to make sure that we remove that
37928
32:07:30,479 --> 32:07:34,231
before taking our screenshots so what
37929
32:07:32,960 --> 32:07:36,552
i'm going to do is i'm going to go back
37930
32:07:38,080 --> 32:07:42,160
and you can see at the moment the
37931
32:07:39,512 --> 32:07:44,400
application's running on iphone 8 plus
37932
32:07:42,160 --> 32:07:46,720
which is the simulator to the left hand
37933
32:07:44,399 --> 32:07:48,231
side so in order to remove that debug
37934
32:07:46,720 --> 32:07:52,000
banner what you'll have to do is to go
37935
32:07:48,232 --> 32:07:53,680
to your main um dart file as you can see
37936
32:07:52,000 --> 32:07:55,360
and go to the main function where you've
37937
32:07:53,679 --> 32:07:57,039
created the material application right
37938
32:07:55,360 --> 32:07:59,680
after the title or even before you can
37939
32:07:57,039 --> 32:08:01,759
just say banner which is debug show
37940
32:07:59,679 --> 32:08:03,119
check mode banner and set that parameter
37941
32:08:01,759 --> 32:08:05,191
to false and then i'm just going to do a
37942
32:08:03,119 --> 32:08:07,279
hot reload actually hot restart we have
37943
32:08:07,279 --> 32:08:12,639
oh i'm not even running it so let's just
37944
32:08:09,440 --> 32:08:15,512
go flutter select device 8 plus and then
37945
32:08:12,639 --> 32:08:17,512
i'm going to say run without debugging
37946
32:08:15,512 --> 32:08:20,400
so you need to ensure that you remove
37947
32:08:17,512 --> 32:08:21,832
that um debug show checked mode banner
37948
32:08:20,399 --> 32:08:23,511
and i started not remove it you have to
37949
32:08:21,831 --> 32:08:26,479
remove the banner by setting this
37950
32:08:23,512 --> 32:08:28,639
parameter to false and now it's going to
37951
32:08:26,479 --> 32:08:31,119
basically run the application on iphone
37952
32:08:28,639 --> 32:08:32,800
8 plus and it's going to show us the
37953
32:08:31,119 --> 32:08:33,831
results so this debug banner is going to
37954
32:08:33,831 --> 32:08:37,119
after doing that when we see that it's
37955
32:08:35,360 --> 32:08:38,479
working on iphone 8 plus for instance
37956
32:08:37,119 --> 32:08:40,231
then we're going to do the same thing do
37957
32:08:38,479 --> 32:08:43,831
a flutter select device and run the
37958
32:08:40,232 --> 32:08:45,760
application on iphone 13 pro max so
37959
32:08:43,831 --> 32:08:47,911
this process depending on your machine
37960
32:08:45,759 --> 32:08:50,479
depending on your settings etc it could
37961
32:08:47,911 --> 32:08:52,000
take a while so i'll just wait here and
37962
32:08:52,000 --> 32:08:56,232
now it's running okay that's eight plus
37963
32:08:54,320 --> 32:08:57,760
that's great so now that's done now i'm
37964
32:08:56,232 --> 32:08:59,592
going to close this and stop the debug
37965
32:08:57,759 --> 32:09:02,231
process and say flutter select device
37966
32:08:59,592 --> 32:09:04,160
and choose iphone 13 from max
37967
32:09:02,232 --> 32:09:06,720
and do the same thing run without
37968
32:09:08,000 --> 32:09:11,279
again depending on the machine that
37969
32:09:10,000 --> 32:09:12,800
you're running this command on this
37970
32:09:11,279 --> 32:09:14,800
process could take anywhere between a
37971
32:09:12,800 --> 32:09:16,872
few seconds to maybe even a minute or
37972
32:09:18,551 --> 32:09:23,831
i'm just gonna wait here for this
37973
32:09:20,320 --> 32:09:25,440
process to go through and um
37974
32:09:23,831 --> 32:09:26,871
while that is actually happening you'll
37975
32:09:25,440 --> 32:09:29,040
also need to know that you need to take
37976
32:09:26,872 --> 32:09:31,360
your screenshots on iphone 13 pro max
37977
32:09:29,039 --> 32:09:33,279
and iphone 8 plus in order to be able to
37978
32:09:31,360 --> 32:09:35,191
cover all the required screenshots for
37979
32:09:33,279 --> 32:09:37,440
app store connect so since we don't need
37980
32:09:35,191 --> 32:09:39,440
iphone 13 pro i'm just going to minimize
37981
32:09:37,440 --> 32:09:41,592
it right now into the taskbar and here
37982
32:09:41,592 --> 32:09:44,720
so let's go ahead in here and take some
37983
32:09:43,360 --> 32:09:47,191
screenshots so i'm going to minimize
37984
32:09:44,720 --> 32:09:49,680
iphone 8 plus as well so we have this in
37985
32:09:47,191 --> 32:09:51,911
focus so what i'm going to do in here is
37986
32:09:49,679 --> 32:09:53,831
i'm going to go to this login field and
37987
32:09:51,911 --> 32:09:54,959
at the moment as you can see i can type
37988
32:09:53,831 --> 32:09:57,191
in this field because this is a
37989
32:09:54,960 --> 32:09:59,512
simulator but i don't see the keyboard
37990
32:09:57,191 --> 32:10:00,959
but in real life when users actually
37991
32:09:59,512 --> 32:10:02,160
download your application and run it on
37992
32:10:00,960 --> 32:10:04,960
their iphones they're gonna see a
37993
32:10:02,160 --> 32:10:07,120
keyboard so it is a lot more realistic
37994
32:10:04,960 --> 32:10:09,360
if we bring the software keyboard as
37995
32:10:07,119 --> 32:10:11,279
well on the screen so to do that on your
37996
32:10:09,360 --> 32:10:13,360
macintosh we'll just have to do command
37997
32:10:11,279 --> 32:10:15,440
k for keyboard and that will just bring
37998
32:10:13,360 --> 32:10:17,119
up the keyboard just like this so
37999
32:10:15,440 --> 32:10:18,800
what i'm going to do since i don't like
38000
32:10:17,119 --> 32:10:20,959
this carrot that at the moment is
38001
32:10:20,960 --> 32:10:24,400
i'm going to do is just wait until that
38002
32:10:22,872 --> 32:10:26,551
carrot appears and just take a
38003
32:10:24,399 --> 32:10:28,319
screenshot of this iphone 13 pro max
38004
32:10:26,551 --> 32:10:30,872
simulator and the way to take a
38005
32:10:28,320 --> 32:10:33,360
screenshot on a macintosh on an iphone
38006
32:10:30,872 --> 32:10:36,232
simulator is to press command s as in
38007
32:10:36,232 --> 32:10:38,872
so i'm just going to wait for this care
38008
32:10:38,872 --> 32:10:43,192
and sorry about that i'll just go also
38009
32:10:40,720 --> 32:10:45,191
here in desktop and remove everything
38010
32:10:46,080 --> 32:10:49,759
here's the simulator and here's the
38011
32:10:47,679 --> 32:10:52,399
desktop then i'll wait for the care
38012
32:10:49,759 --> 32:10:54,159
and it went away i took a screenshot so
38013
32:10:52,399 --> 32:10:56,551
let's go ahead and do the same thing in
38014
32:10:54,160 --> 32:10:58,552
forgot password screen for instance
38015
32:10:56,551 --> 32:11:01,119
and i'm just going to wait for care to
38016
32:11:01,119 --> 32:11:04,871
then let's go back to the login screen
38017
32:11:04,872 --> 32:11:08,080
and right here as the care disappears
38018
32:11:06,720 --> 32:11:09,191
i'm going to take a screenshot as well
38019
32:11:08,080 --> 32:11:10,960
so this is going to be our third
38020
32:11:09,191 --> 32:11:12,720
screenshot okay so we have a screenshot
38021
32:11:10,960 --> 32:11:13,440
of the login screen the register screen
38022
32:11:17,360 --> 32:11:22,639
i forgot my password sorry okay so now
38023
32:11:20,720 --> 32:11:24,720
i'm going to log in with a user that
38024
32:11:22,639 --> 32:11:26,080
already exists in the application so
38025
32:11:24,720 --> 32:11:27,512
that we can take a screenshot of the
38026
32:11:26,080 --> 32:11:28,720
main interface of the application as
38027
32:11:27,512 --> 32:11:30,960
well so i'm going to take a screenshot
38028
32:11:28,720 --> 32:11:32,720
of this with command s on my macintosh
38029
32:11:30,960 --> 32:11:35,120
and maybe for the fifth screenshot we're
38030
32:11:32,720 --> 32:11:37,191
also gonna take one from where you're in
38031
32:11:35,119 --> 32:11:39,279
the screen and editing your notes with
38032
32:11:37,191 --> 32:11:41,360
the keyboard up as well okay gonna wait
38033
32:11:39,279 --> 32:11:43,360
for the chara to go away and i just took
38034
32:11:41,360 --> 32:11:45,191
a screenshot right there as well so now
38035
32:11:43,360 --> 32:11:46,639
you should end up with five screenshots
38036
32:11:45,191 --> 32:11:47,759
for your application so if you have a
38037
32:11:46,639 --> 32:11:51,119
look at them they should kind of look
38038
32:11:47,759 --> 32:11:52,720
like this this this this this and ensure
38039
32:11:51,119 --> 32:11:55,191
that also you don't have that debug
38040
32:11:52,720 --> 32:11:57,191
manner by removing the debug show check
38041
32:11:55,191 --> 32:11:58,720
mode banner and after doing that if
38042
32:11:57,191 --> 32:12:00,231
you're already running a debug session
38043
32:11:58,720 --> 32:12:02,720
on your simulator for instance you have
38044
32:12:00,232 --> 32:12:04,480
to do a hot restart remember hot reload
38045
32:12:02,720 --> 32:12:06,639
is not going to take it's not going to
38046
32:12:04,479 --> 32:12:08,231
take the code in your main function into
38047
32:12:06,639 --> 32:12:09,679
effect all right so now we have five
38048
32:12:08,232 --> 32:12:12,000
screenshots in here so i'm going to go
38049
32:12:09,679 --> 32:12:14,319
back to app store connect and let's then
38050
32:12:12,000 --> 32:12:16,399
tap here or click here and view all
38051
32:12:16,399 --> 32:12:19,591
and let's go to choose file in here and
38052
32:12:18,080 --> 32:12:21,911
then choose all these screenshots and
38053
32:12:21,911 --> 32:12:25,831
all right so now in here you have
38054
32:12:23,831 --> 32:12:28,159
basically the chance to reorder these
38055
32:12:25,831 --> 32:12:30,871
screenshots so i think i'm gonna put
38056
32:12:28,160 --> 32:12:33,040
maybe the login screen first then i'm
38057
32:12:30,872 --> 32:12:35,192
gonna go to the register and then forgot
38058
32:12:33,039 --> 32:12:37,119
password and i'm gonna then put the main
38059
32:12:35,191 --> 32:12:40,551
interface of the application
38060
32:12:37,119 --> 32:12:42,799
here and then the actual new node screen
38061
32:12:40,551 --> 32:12:44,159
okay so you can see at the moment when
38062
32:12:42,800 --> 32:12:46,800
uploading the six and a half inch
38063
32:12:44,160 --> 32:12:48,960
display screenshots the five and five
38064
32:12:46,800 --> 32:12:50,872
and eight inch display screen is also
38065
32:12:50,872 --> 32:12:54,232
inch display screenshots so they're the
38066
32:12:52,800 --> 32:12:56,872
same screenshots so you don't have to
38067
32:12:54,232 --> 32:12:59,512
upload them again however then you have
38068
32:12:56,872 --> 32:13:01,040
this five and a half inch display and
38069
32:12:59,512 --> 32:13:04,872
which you also have to upload your
38070
32:13:01,039 --> 32:13:08,399
screenshots for and that is what we need
38071
32:13:08,399 --> 32:13:13,511
we i'm just going to minimize this and
38072
32:13:10,479 --> 32:13:15,039
then i'm going to bring up iphone 8 plus
38073
32:13:15,039 --> 32:13:19,511
and we're going to do the exact same
38074
32:13:16,551 --> 32:13:21,512
process here so bring up the keyboard as
38075
32:13:19,512 --> 32:13:23,040
the carrot goes away take a screenshot
38076
32:13:26,639 --> 32:13:30,872
carrot goes away take a screenshot then
38077
32:13:29,039 --> 32:13:33,831
i'm going to go to a register screen
38078
32:13:30,872 --> 32:13:36,000
carrot goes away screenshot and in the
38079
32:13:33,831 --> 32:13:38,080
login screen i'm going to log in with a
38080
32:13:36,000 --> 32:13:40,399
user that already exists in the system
38081
32:13:47,911 --> 32:13:50,959
it's my keyboard by the way i can't see
38082
32:13:49,440 --> 32:13:52,639
the keyboard so i can see it's been
38083
32:13:50,960 --> 32:13:55,680
switched to unfortunately swedish so i'm
38084
32:13:59,279 --> 32:14:05,191
it's not helping me really so let's see
38085
32:14:07,512 --> 32:14:11,279
for some reason it's still showing the
38086
32:14:09,279 --> 32:14:13,512
swedish stuff in here and i don't really
38087
32:14:11,279 --> 32:14:17,039
know why so i'm just going to say
38088
32:14:13,512 --> 32:14:18,400
gmail.com and foo barbados okay
38089
32:14:18,399 --> 32:14:22,799
an iphone simulator is also software so
38090
32:14:20,320 --> 32:14:23,912
it could be buggy okay so then i'm gonna
38091
32:14:23,911 --> 32:14:27,039
let's see what screenshots we've taken
38092
32:14:25,279 --> 32:14:28,720
so three screenshots so far and let's go
38093
32:14:27,039 --> 32:14:30,231
to the main ui of the application take
38094
32:14:28,720 --> 32:14:32,160
another one with command s as i've
38095
32:14:30,232 --> 32:14:34,480
mentioned before and let's go here as
38096
32:14:34,479 --> 32:14:39,831
oh is this screenshot gonna go away
38097
32:14:44,639 --> 32:14:48,800
please go away okay i think iphone 8
38098
32:14:47,279 --> 32:14:50,399
plus is having some problems so what i'm
38099
32:14:48,800 --> 32:14:52,639
gonna do is i'm just going to close it
38100
32:14:50,399 --> 32:14:54,639
and then say open simulator and let's go
38101
32:14:52,639 --> 32:14:56,479
to 8 plus and i can see after i close
38102
32:14:54,639 --> 32:14:58,399
the 8 plus simulator it actually saved
38103
32:14:56,479 --> 32:14:59,679
the screenshot so that's great all we
38104
32:14:58,399 --> 32:15:02,799
have to do is just to go back to our
38105
32:14:59,679 --> 32:15:04,319
application and right here in the screen
38106
32:15:02,800 --> 32:15:06,000
as the keyboard is displayed on the
38107
32:15:04,320 --> 32:15:07,592
screen after the carrot has disappeared
38108
32:15:06,000 --> 32:15:09,279
i'm going to take a screenshot
38109
32:15:09,279 --> 32:15:12,160
did it at the right time without the
38110
32:15:10,872 --> 32:15:14,320
carrot on the screen so let's have a
38111
32:15:17,592 --> 32:15:21,279
so this is the screenshot so now we have
38112
32:15:19,360 --> 32:15:23,512
five screenshots on iphone 8 plus as
38113
32:15:21,279 --> 32:15:25,191
well so i'm gonna basically delete these
38114
32:15:23,512 --> 32:15:27,911
screenshots that we took from the iphone
38115
32:15:25,191 --> 32:15:29,911
13 pro max right there and let's go to
38116
32:15:27,911 --> 32:15:31,512
the five and a half inch display section
38117
32:15:29,911 --> 32:15:33,911
here in app store connect and say choose
38118
32:15:31,512 --> 32:15:35,832
file and i'm then going to choose all
38119
32:15:33,911 --> 32:15:38,639
those screenshots that we took from
38120
32:15:35,831 --> 32:15:41,039
iphone 8 plus and reorder them so let's
38121
32:15:38,639 --> 32:15:43,119
say log in first then we have register
38122
32:15:41,039 --> 32:15:45,439
forgot password and then main interface
38123
32:15:43,119 --> 32:15:47,759
of the application and then new nodes
38124
32:15:45,440 --> 32:15:49,680
and this is exactly in line with what
38125
32:15:47,759 --> 32:15:51,360
we've done in here so it's just a good
38126
32:15:49,679 --> 32:15:53,039
idea usually to make sure that your
38127
32:15:51,360 --> 32:15:55,360
screenshots are lined up in the same
38128
32:15:53,039 --> 32:15:57,279
order for different devices okay so now
38129
32:15:57,279 --> 32:16:02,232
three other screens screen types are
38130
32:16:02,232 --> 32:16:06,080
plus i think simulators screenshots so
38131
32:16:06,080 --> 32:16:10,800
yes iphone 8 plus so now we've uploaded
38132
32:16:08,551 --> 32:16:12,959
those so as you can see more screenshots
38133
32:16:10,800 --> 32:16:16,479
are already there now so iphone 8 plus
38134
32:16:12,960 --> 32:16:18,872
is also uploaded and we're done
38135
32:16:16,479 --> 32:16:22,551
so what we need to do now is to bring up
38136
32:16:18,872 --> 32:16:23,760
the ipad pro 12 inch simulator as well
38137
32:16:22,551 --> 32:16:26,479
so i'm going to go here to this
38138
32:16:23,759 --> 32:16:29,191
simulator and say file open simulator
38139
32:16:29,191 --> 32:16:34,080
as you can see we have to bring ipad pro
38140
32:16:31,279 --> 32:16:35,360
12 inch so i'm just gonna click on it
38141
32:16:35,360 --> 32:16:40,320
let's go to um visual studio code and
38142
32:16:38,232 --> 32:16:43,832
say select device and then i'm gonna
38143
32:16:40,320 --> 32:16:45,680
choose that ipad pro as it is there and
38144
32:16:43,831 --> 32:16:48,799
then i'm going to stop the debug process
38145
32:16:45,679 --> 32:16:52,231
on the iphone 13 pro max and then say
38146
32:16:52,232 --> 32:16:56,400
and if you're lucky then this process is
38147
32:16:54,232 --> 32:16:58,160
actually going to go quite fast because
38148
32:16:56,399 --> 32:17:00,079
the application binary has already been
38149
32:16:58,160 --> 32:17:02,320
compiled and it should pretty much be
38150
32:17:06,872 --> 32:17:09,512
again depending on your machine this
38151
32:17:08,080 --> 32:17:12,720
process could take anywhere between a
38152
32:17:09,512 --> 32:17:13,760
few seconds to a few minutes even
38153
32:17:13,759 --> 32:17:18,319
let's see here so let's go in here and
38154
32:17:16,399 --> 32:17:20,479
you can see the first section in app
38155
32:17:18,320 --> 32:17:21,512
store connect for ipad is asking you to
38156
32:17:21,512 --> 32:17:26,160
for ipad pro third gen which doesn't
38157
32:17:24,479 --> 32:17:28,872
necessarily have to be third gen any
38158
32:17:26,160 --> 32:17:30,800
ipad pro of 12 and a nine inch display
38159
32:17:30,800 --> 32:17:35,592
so here's our application it this screen
38160
32:17:33,360 --> 32:17:38,720
is obviously ginormous so i'm gonna go
38161
32:17:35,592 --> 32:17:41,040
here bring up the keyboard and
38162
32:17:38,720 --> 32:17:43,512
take a screenshot and then go to forgot
38163
32:17:41,039 --> 32:17:45,911
my password take a screenshot then go to
38164
32:17:43,512 --> 32:17:48,232
back to login and in the register screen
38165
32:17:45,911 --> 32:17:50,720
take a screenshot all where the carrot
38166
32:17:48,232 --> 32:17:52,160
has disappeared let's just double check
38167
32:17:50,720 --> 32:17:53,911
this and i'm going to remove the iphone
38168
32:17:52,160 --> 32:17:56,232
8 plus screenshot so now we have three
38169
32:17:53,911 --> 32:17:58,720
on the ipad pro no carrot no carrot no
38170
32:17:56,232 --> 32:18:00,720
carrot and let's go now to the login
38171
32:17:58,720 --> 32:18:04,639
screen and i'm going to log in with an
38172
32:18:00,720 --> 32:18:06,479
existing user in here okay foo barbat
38173
32:18:04,639 --> 32:18:07,759
login and now you can see the main
38174
32:18:06,479 --> 32:18:09,759
interface of the application let's take
38175
32:18:07,759 --> 32:18:12,000
a screenshot of it and then go to the
38176
32:18:09,759 --> 32:18:15,119
first note bring the keyboard up like
38177
32:18:12,000 --> 32:18:17,592
this and without the carrot take a
38178
32:18:15,119 --> 32:18:19,831
screenshot i actually think i
38179
32:18:17,592 --> 32:18:21,592
i um captured the carrot unfortunately
38180
32:18:19,831 --> 32:18:23,360
in this last screenshot and i can see a
38181
32:18:21,592 --> 32:18:25,440
little bit of glimpse of it there so i'm
38182
32:18:25,440 --> 32:18:30,551
i think i did it actually again to take
38183
32:18:30,551 --> 32:18:34,959
of the same screen with the carrot
38184
32:18:34,960 --> 32:18:38,800
if the ipad's going to help us soon
38185
32:18:36,960 --> 32:18:40,639
where's the screenshot there
38186
32:18:38,800 --> 32:18:43,680
i can see the carrot again a little bit
38187
32:18:40,639 --> 32:18:45,440
so this is a tough one now all right i
38188
32:18:45,440 --> 32:18:48,639
so let's just wait for the screenshot to
38189
32:18:49,679 --> 32:18:53,359
and there is no carrot so that's great
38190
32:18:51,360 --> 32:18:54,639
so now we have basically our screenshots
38191
32:18:54,639 --> 32:18:59,191
12 and a nine inch display let's go in
38192
32:18:57,039 --> 32:19:02,639
here and say choose file and i'm gonna
38193
32:18:59,191 --> 32:19:04,551
select all the screenshots for that ipad
38194
32:19:02,639 --> 32:19:06,479
and put them in order so i'm just going
38195
32:19:04,551 --> 32:19:08,872
to say the login screen first then
38196
32:19:06,479 --> 32:19:10,720
register then forgot password the main
38197
32:19:08,872 --> 32:19:13,120
interface of the application and then
38198
32:19:10,720 --> 32:19:15,512
the note screen okay so as you can see
38199
32:19:13,119 --> 32:19:18,080
the 11 inch display is using the 12 and
38200
32:19:15,512 --> 32:19:21,191
a 9 inch display so that's really great
38201
32:19:18,080 --> 32:19:25,911
however the ipad pro here the second gen
38202
32:19:21,191 --> 32:19:28,639
to 12.9 inch display um is
38203
32:19:25,911 --> 32:19:31,679
is i mean these it's not using this 12
38204
32:19:28,639 --> 32:19:33,512
and a 9 inch display of this ipad so
38205
32:19:31,679 --> 32:19:35,191
what could we do here can we go in here
38206
32:19:33,512 --> 32:19:37,512
and say choose file and upload the same
38207
32:19:35,191 --> 32:19:39,512
screenshots again and it seems like we
38208
32:19:37,512 --> 32:19:41,440
can so that's not a problem let's just
38209
32:19:39,512 --> 32:19:44,320
reuse the same because it's the same
38210
32:19:41,440 --> 32:19:46,400
screen size so it's a bit strange that i
38211
32:19:44,320 --> 32:19:48,552
app store connect is not automatically
38212
32:19:48,551 --> 32:19:53,119
ipad screenshots for also this 12 and a
38213
32:19:51,279 --> 32:19:54,959
9 inch display even though they're the
38214
32:19:53,119 --> 32:19:56,799
same so i'm going to bring login to the
38215
32:19:54,960 --> 32:19:59,440
left then i'm going to bring register
38216
32:19:56,800 --> 32:20:01,120
here for god password like that and then
38217
32:19:59,440 --> 32:20:03,119
the notes and then the new note so now
38218
32:20:01,119 --> 32:20:05,191
you can see all your screens are now set
38219
32:20:03,119 --> 32:20:08,959
all the snap all this screenshots are
38220
32:20:05,191 --> 32:20:11,831
set for both iphone and ipad
38221
32:20:08,960 --> 32:20:13,832
so after uploading all our screenshots
38222
32:20:11,831 --> 32:20:15,759
then we can actually go and set the
38223
32:20:18,872 --> 32:20:22,720
so let's go in here inside our app
38224
32:20:23,592 --> 32:20:28,000
and you can see here there is a note and
38225
32:20:28,000 --> 32:20:32,080
sorry there's a name inside the app
38226
32:20:30,000 --> 32:20:33,679
information section then we have the
38227
32:20:32,080 --> 32:20:35,119
name of our application okay and then
38228
32:20:33,679 --> 32:20:36,719
the subtitle as you can see it says the
38229
32:20:35,119 --> 32:20:37,831
subtitle will be reviewed before it's
38230
32:20:36,720 --> 32:20:39,040
made available on the app store
38231
32:20:37,831 --> 32:20:40,959
unfortunately it doesn't tell you so
38232
32:20:39,039 --> 32:20:43,679
much information but every application
38233
32:20:40,960 --> 32:20:45,832
can have a short subtitle up to 30k up
38234
32:20:43,679 --> 32:20:48,079
to and including 30 characters so when
38235
32:20:45,831 --> 32:20:49,911
people search for my awesome notes for
38236
32:20:48,080 --> 32:20:51,279
instance in app store then they can
38237
32:20:49,911 --> 32:20:53,911
actually see both the name of the
38238
32:20:51,279 --> 32:20:56,232
application and a short subtitle so
38239
32:20:58,000 --> 32:21:02,960
your notes securely with an asterisk at
38240
32:21:02,960 --> 32:21:09,192
so that's already set i can see so um
38241
32:21:07,512 --> 32:21:10,400
and then we could then after making
38242
32:21:10,399 --> 32:21:14,639
the app store connect expects you to
38243
32:21:12,000 --> 32:21:16,399
press the save button so that's also
38244
32:21:16,399 --> 32:21:21,511
so let's go here in this section and go
38245
32:21:18,872 --> 32:21:23,279
to content rights and then set up
38246
32:21:21,512 --> 32:21:25,360
content rights information click on it
38247
32:21:23,279 --> 32:21:27,191
so it says apps that continue or access
38248
32:21:25,360 --> 32:21:29,191
third-party content must have all the
38249
32:21:27,191 --> 32:21:30,871
necessary rights to that content or be
38250
32:21:29,191 --> 32:21:33,039
otherwise permitted to use it under the
38251
32:21:30,872 --> 32:21:35,120
laws of each app store country or region
38252
32:21:33,039 --> 32:21:36,551
so we don't have third-party content
38253
32:21:35,119 --> 32:21:38,159
like we're not actually displaying any
38254
32:21:36,551 --> 32:21:40,000
videos that's coming from a third party
38255
32:21:38,160 --> 32:21:41,832
service so here we can just say no it
38256
32:21:40,000 --> 32:21:43,119
doesn't contain show or access third
38257
32:21:43,119 --> 32:21:46,080
and after pressing the down button we
38258
32:21:44,720 --> 32:21:49,680
can also press the save button just to
38259
32:21:46,080 --> 32:21:52,720
ensure that everything is as saved
38260
32:21:49,679 --> 32:21:54,319
so what we need to do in here also um
38261
32:21:54,320 --> 32:21:59,040
a privacy we also have and then we have
38262
32:21:56,639 --> 32:22:01,592
set age rating across all platforms so
38263
32:21:59,039 --> 32:22:02,639
let's go ahead and do that and say as
38264
32:22:01,592 --> 32:22:04,232
you can see here it says select the
38265
32:22:02,639 --> 32:22:05,512
level of frequency for each content
38266
32:22:04,232 --> 32:22:07,360
description that best describes your
38267
32:22:05,512 --> 32:22:09,911
application so we don't have any
38268
32:22:07,360 --> 32:22:11,680
violence so we say no realistic violence
38269
32:22:11,679 --> 32:22:16,479
uh prolonged graphic or sadistic
38270
32:22:14,479 --> 32:22:18,231
realistic violence i don't even wanna i
38271
32:22:16,479 --> 32:22:19,591
don't even to say say these things out
38272
32:22:18,232 --> 32:22:21,592
loud to be honest with you but what you
38273
32:22:19,592 --> 32:22:23,360
have to do is just to say none to all of
38274
32:22:21,592 --> 32:22:25,512
these because we don't have any like
38275
32:22:23,360 --> 32:22:28,479
medical information alcohol related
38276
32:22:25,512 --> 32:22:29,680
stuff so let's just say none to all of
38277
32:22:31,679 --> 32:22:35,119
contests and we don't have that either
38278
32:22:33,440 --> 32:22:36,960
so let's just say next does your app
38279
32:22:35,119 --> 32:22:38,799
contain unrestricted web access it
38280
32:22:36,960 --> 32:22:41,120
doesn't does your app contain instance
38281
32:22:38,800 --> 32:22:43,512
of gambling no and then we're saying
38282
32:22:44,479 --> 32:22:49,191
rate rating result is that people of age
38283
32:22:47,119 --> 32:22:50,080
four plus can use the application and
38284
32:22:50,080 --> 32:22:53,759
make sure that your app is not made for
38285
32:22:52,160 --> 32:22:55,512
kids because remember applications that
38286
32:22:53,759 --> 32:22:57,511
are made for kids that have to actually
38287
32:22:55,512 --> 32:22:59,911
conform to specific standards in order
38288
32:22:57,512 --> 32:23:01,592
to make sure that eight kids of age four
38289
32:22:59,911 --> 32:23:03,039
plus are actually safe in the
38290
32:23:03,039 --> 32:23:07,439
um what we could do let's see in here if
38291
32:23:05,360 --> 32:23:09,440
your app rates 12 plus or lower and you
38292
32:23:07,440 --> 32:23:11,680
believe it contents may not be suitable
38293
32:23:09,440 --> 32:23:14,639
for children under 17 you can manually
38294
32:23:11,679 --> 32:23:15,831
set the age rating to 17 plus so i'm not
38295
32:23:14,639 --> 32:23:17,279
sure about this to be honest with you
38296
32:23:15,831 --> 32:23:18,639
but i'm just going to leave it blank at
38297
32:23:17,279 --> 32:23:20,551
the moment and press the down button
38298
32:23:18,639 --> 32:23:22,551
okay and then we can press the save
38299
32:23:22,551 --> 32:23:26,872
so the next thing that we need to talk
38300
32:23:24,399 --> 32:23:28,799
about now is something called a support
38301
32:23:26,872 --> 32:23:31,592
url and support url is actually very
38302
32:23:28,800 --> 32:23:33,360
important and that actually appears i
38303
32:23:40,872 --> 32:23:47,512
i think it is somewhere around here
38304
32:23:44,160 --> 32:23:50,232
ratings and reviews app privacy
38305
32:23:50,232 --> 32:23:54,232
we haven't really come there yet but i
38306
32:23:52,479 --> 32:23:56,231
believe we have to submit that anyway
38307
32:23:54,232 --> 32:23:58,639
somewhere and it is here as you can see
38308
32:23:56,232 --> 32:24:00,400
so support url is actually very very
38309
32:23:58,639 --> 32:24:01,360
important as you can see marketing url
38310
32:24:01,360 --> 32:24:05,512
optional sorry marketing url is optional
38311
32:24:03,440 --> 32:24:06,800
support url isn't a support url it's
38312
32:24:06,800 --> 32:24:11,279
that needs to be hosted on your website
38313
32:24:09,191 --> 32:24:12,479
that users of your application if they
38314
32:24:11,279 --> 32:24:14,000
have any problem with it then they can
38315
32:24:12,479 --> 32:24:16,319
go to the support url and get some more
38316
32:24:16,320 --> 32:24:20,960
so i have previously created a support
38317
32:24:18,800 --> 32:24:23,911
url for one of my other applications in
38318
32:24:20,960 --> 32:24:27,120
my website so let's just say pixel sc
38319
32:24:23,911 --> 32:24:29,591
and then we're going to say support
38320
32:24:27,119 --> 32:24:32,319
chords library text okay and as you can
38321
32:24:29,592 --> 32:24:33,440
see here it's a little text document and
38322
32:24:32,320 --> 32:24:34,872
says if you have any questions about
38323
32:24:33,440 --> 32:24:36,800
this app you can drop us a line at
38324
32:24:37,679 --> 32:24:44,231
so you need to just ensure that you have
38325
32:24:40,399 --> 32:24:47,360
a support document that you can um
38326
32:24:44,232 --> 32:24:50,160
place in a website and then you can send
38327
32:24:50,160 --> 32:24:54,232
let's now go ahead and create a support
38328
32:24:52,399 --> 32:24:55,591
document so what i'm going to do in here
38329
32:24:54,232 --> 32:24:57,832
i'm just going to bring up literally
38330
32:24:55,592 --> 32:25:01,680
text edit on my macintosh you can bring
38331
32:24:57,831 --> 32:25:03,439
your um favorite hex editor um um
38332
32:25:01,679 --> 32:25:04,871
actually my tech favorite text editor is
38333
32:25:03,440 --> 32:25:06,551
visual studio code but in this case it's
38334
32:25:04,872 --> 32:25:09,120
just a simple text document so i'm just
38335
32:25:06,551 --> 32:25:11,759
going to use um normal text edit on
38336
32:25:09,119 --> 32:25:13,679
macintosh even if you're linux for
38337
32:25:11,759 --> 32:25:16,551
instance you can just use vim and create
38338
32:25:13,679 --> 32:25:18,000
or vi you can create a simple document
38339
32:25:16,551 --> 32:25:21,191
and let's i'm just going to basically
38340
32:25:18,000 --> 32:25:23,759
copy this and paste it in here and i say
38341
32:25:21,191 --> 32:25:26,080
contact support and thank you for using
38342
32:25:27,440 --> 32:25:31,592
because that's the name of our
38343
32:25:28,551 --> 32:25:33,440
application right it is my awesome notes
38344
32:25:31,592 --> 32:25:35,912
so i'm going to save this document and
38345
32:25:33,440 --> 32:25:37,680
i'm just going to say in here let's call
38346
32:25:39,440 --> 32:25:44,000
notes txt and i'm going to save it on
38347
32:25:46,232 --> 32:25:49,592
it is a little bit strange that it
38348
32:25:49,592 --> 32:25:52,400
let me go back to this text now it saved
38349
32:25:52,399 --> 32:25:57,279
yeah it is right here okay so this is a
38350
32:25:54,800 --> 32:25:59,760
document now text file simple and i'm
38351
32:25:57,279 --> 32:26:01,592
going to go to my website control panel
38352
32:25:59,759 --> 32:26:02,399
as you can see here there's a support
38353
32:26:02,399 --> 32:26:05,360
so i'm going to go into the support
38354
32:26:03,679 --> 32:26:07,759
folder and as you can see i already have
38355
32:26:05,360 --> 32:26:10,399
four text files in this pixelity se
38356
32:26:07,759 --> 32:26:12,319
website and i'm just going to
38357
32:26:10,399 --> 32:26:14,479
hopefully be able to drag a file in
38358
32:26:12,320 --> 32:26:17,440
there or maybe even upload so i'm going
38359
32:26:17,440 --> 32:26:21,440
and i can see it has uploaded now
38360
32:26:21,440 --> 32:26:25,832
seems to be it to be honest
38361
32:26:23,440 --> 32:26:28,160
so let me just go back and see i'm my
38362
32:26:25,831 --> 32:26:29,511
awesomenotes text file right there and
38363
32:26:28,160 --> 32:26:31,512
i'm then going to go in here and see
38364
32:26:35,512 --> 32:26:39,512
and i can actually see it is uploaded
38365
32:26:39,512 --> 32:26:43,911
if you don't have a website which you
38366
32:26:41,759 --> 32:26:46,231
should if you're developing applications
38367
32:26:43,911 --> 32:26:47,759
for ios and android or even if you're
38368
32:26:46,232 --> 32:26:49,440
developing any applications and putting
38369
32:26:47,759 --> 32:26:51,511
it out for customers you should have
38370
32:26:49,440 --> 32:26:53,760
your own website and they're like very
38371
32:26:53,759 --> 32:26:57,591
a website with cheap hosting i don't
38372
32:26:57,592 --> 32:27:02,000
sponsor various services and i'm even
38373
32:26:59,831 --> 32:27:04,080
not even gonna name what i'm using but
38374
32:27:04,080 --> 32:27:09,592
just search online for a cheap hosting
38375
32:27:06,872 --> 32:27:11,192
and creating a website of your own okay
38376
32:27:09,592 --> 32:27:12,960
but since this is the outside that's
38377
32:27:11,191 --> 32:27:15,119
outside the scope of this course i'm not
38378
32:27:12,960 --> 32:27:17,680
going to talk so much about that okay so
38379
32:27:15,119 --> 32:27:19,191
now we have this my awesome notes and
38380
32:27:19,191 --> 32:27:23,759
is to go ahead and add this support url
38381
32:27:22,080 --> 32:27:25,680
so i'm going to copy it here and go to
38382
32:27:23,759 --> 32:27:27,511
app store connect and in the support url
38383
32:27:25,679 --> 32:27:30,479
i'm just gonna save it there i'm gonna
38384
32:27:27,512 --> 32:27:31,279
press the save button okay
38385
32:27:31,279 --> 32:27:35,512
that's that and we also need to make
38386
32:27:33,279 --> 32:27:37,759
sure that we add some other information
38387
32:27:35,512 --> 32:27:40,639
in here promotional text description and
38388
32:27:37,759 --> 32:27:42,399
also keywords and etc okay so
38389
32:27:40,639 --> 32:27:44,551
these things are very important and we
38390
32:27:42,399 --> 32:27:48,231
need to make sure that we fill these out
38391
32:27:44,551 --> 32:27:50,399
so um let's see actually here okay
38392
32:27:48,232 --> 32:27:51,680
so in the promotional text let's just
38393
32:27:50,399 --> 32:27:52,959
enter in some information here as you
38394
32:27:51,679 --> 32:27:54,639
can see this commercial text lets you
38395
32:27:52,960 --> 32:27:56,320
inform your app store visitors of any
38396
32:27:54,639 --> 32:27:58,319
current app features without requiring
38397
32:27:56,320 --> 32:27:59,440
an updated submission okay so let's just
38398
32:28:06,000 --> 32:28:11,679
store your notes in the cloud
38399
32:28:08,800 --> 32:28:14,551
all right and description and this app
38400
32:28:11,679 --> 32:28:15,511
sim this free app allows you
38401
32:28:15,512 --> 32:28:19,592
store your notes securely on the cloud
38402
32:28:20,399 --> 32:28:23,360
and that's it i mean they're very
38403
32:28:21,911 --> 32:28:24,160
similar to each other but that's okay
38404
32:28:24,160 --> 32:28:28,320
and for the keywords in here you have to
38405
32:28:28,320 --> 32:28:31,832
it doesn't really say how many yes 100
38406
32:28:30,160 --> 32:28:33,512
characters you have and you have to like
38407
32:28:31,831 --> 32:28:36,159
comma separate your keywords in here so
38408
32:28:33,512 --> 32:28:38,080
i'm just going to say and notes and
38409
32:28:39,039 --> 32:28:43,039
and make sure you don't have to actually
38410
32:28:45,119 --> 32:28:47,911
i don't think you have to have space
38411
32:28:46,399 --> 32:28:50,231
between them and i'm just going to leave
38412
32:28:47,911 --> 32:28:52,232
it like a notes secure cloud okay these
38413
32:28:52,232 --> 32:28:55,512
i'm going to save this and remember
38414
32:28:53,592 --> 32:28:56,960
we're in here in the ios prepare for
38415
32:28:58,800 --> 32:29:04,872
and our app version is right there
38416
32:29:00,872 --> 32:29:05,832
copyright we can just say 2022 pixelity
38417
32:29:11,360 --> 32:29:14,639
okay these are just big words don't
38418
32:29:16,000 --> 32:29:21,440
and that is pretty much it so
38419
32:29:21,440 --> 32:29:25,279
i don't think we need to do so much more
38420
32:29:23,119 --> 32:29:27,591
to be honest with you in here
38421
32:29:25,279 --> 32:29:29,512
and uh we don't even have to have the
38422
32:29:30,399 --> 32:29:34,639
let's see and also need to go to contact
38423
32:29:32,320 --> 32:29:35,832
information in here so let's say
38424
32:29:38,800 --> 32:29:46,512
and then i'm going to enter some
38425
32:29:42,320 --> 32:29:46,512
fake phone number right now
38426
32:29:46,872 --> 32:29:52,551
something like that and here's my
38427
32:29:55,512 --> 32:29:58,960
and here where we have the version
38428
32:29:57,440 --> 32:30:00,479
release as you can see it says this app
38429
32:29:58,960 --> 32:30:01,832
version can be automatically released
38430
32:30:00,479 --> 32:30:03,440
right after it has been approved so
38431
32:30:05,039 --> 32:30:07,831
how you want to actually release your
38432
32:30:06,320 --> 32:30:09,832
application so after you send your
38433
32:30:07,831 --> 32:30:11,679
binary to apple you can choose for apple
38434
32:30:09,831 --> 32:30:12,551
to either automatically release this
38435
32:30:12,551 --> 32:30:16,231
to all your users in the app store or
38436
32:30:14,800 --> 32:30:17,360
you can say manually release this
38437
32:30:16,232 --> 32:30:18,800
version meaning that after your
38438
32:30:18,800 --> 32:30:22,639
accepted by apple and approved by apple
38439
32:30:20,720 --> 32:30:24,551
you can go manually press the release
38440
32:30:22,639 --> 32:30:25,592
button wherever whenever it suits you
38441
32:30:25,592 --> 32:30:29,912
or you can say automatically release
38442
32:30:27,119 --> 32:30:31,440
this version after app review no earlier
38443
32:30:29,911 --> 32:30:32,959
now so you can set a date for it but
38444
32:30:31,440 --> 32:30:34,232
we're gonna say manually release this
38445
32:30:34,232 --> 32:30:38,232
and after all of this i'm just gonna
38446
32:30:35,831 --> 32:30:42,399
save this information right there and
38447
32:30:38,232 --> 32:30:45,911
let's now go to app privacy so this is
38448
32:30:42,399 --> 32:30:47,039
also very important to remember to do
38449
32:30:52,720 --> 32:30:57,119
yeah i actually believe here now that
38450
32:30:55,440 --> 32:30:59,119
i can see that i've prepared some
38451
32:30:57,119 --> 32:31:00,871
information about this in the upcoming
38452
32:31:00,872 --> 32:31:06,080
we're going to take care of privacy
38453
32:31:03,119 --> 32:31:07,759
policy in the next chapter so but know
38454
32:31:06,080 --> 32:31:09,759
that it exists right there and we have
38455
32:31:09,759 --> 32:31:13,759
so then what we need to do is to
38456
32:31:11,360 --> 32:31:16,800
actually make a build for apple because
38457
32:31:13,759 --> 32:31:18,399
this is like the most important part and
38458
32:31:16,800 --> 32:31:20,720
and you need to make sure that you
38459
32:31:18,399 --> 32:31:22,871
followed like the first chapters of this
38460
32:31:20,720 --> 32:31:25,831
course where i talked about preparing
38461
32:31:22,872 --> 32:31:27,360
our application for ios there is a
38462
32:31:25,831 --> 32:31:28,871
chapter in the beginning of this course
38463
32:31:27,360 --> 32:31:31,191
where we actually talk about creating
38464
32:31:28,872 --> 32:31:32,160
our certificates and profiles and all of
38465
32:31:32,160 --> 32:31:36,400
for ios distribution so i'm assuming
38466
32:31:34,800 --> 32:31:38,160
you've already gone through that so we
38467
32:31:36,399 --> 32:31:41,119
don't have to take care of that now all
38468
32:31:38,160 --> 32:31:42,960
right so let's go now to our application
38469
32:31:41,119 --> 32:31:45,191
in xcode let's see if i can bring up
38470
32:31:45,191 --> 32:31:49,831
it is somewhere around here
38471
32:31:47,512 --> 32:31:52,232
so there is our application and i'm just
38472
32:31:49,831 --> 32:31:54,231
going to go into runner and have a look
38473
32:31:52,232 --> 32:31:56,160
at signing and capabilities and release
38474
32:31:54,232 --> 32:31:58,320
and i can see that there is absolutely
38475
32:31:56,160 --> 32:32:00,552
no problem with this production
38476
32:31:58,320 --> 32:32:02,400
certificate and profile so what we need
38477
32:32:00,551 --> 32:32:04,231
to do in here to make a release for app
38478
32:32:02,399 --> 32:32:06,639
store is just to have a look at our
38479
32:32:04,232 --> 32:32:09,192
runner and here change the target to for
38480
32:32:09,191 --> 32:32:13,591
and then we go to product and then we
38481
32:32:13,592 --> 32:32:19,680
this archiving is then in turn gonna
38482
32:32:16,000 --> 32:32:20,960
create an ipa file for us and as i
38483
32:32:19,679 --> 32:32:22,639
mentioned in the beginning of this
38484
32:32:20,960 --> 32:32:24,639
chapter and this is the ipa file that
38485
32:32:22,639 --> 32:32:25,911
we're going to submit to apple
38486
32:32:25,911 --> 32:32:28,639
xcode is going to help you a lot with
38487
32:32:28,639 --> 32:32:33,039
i'm not sure if i'm a fan of that to be
38488
32:32:31,039 --> 32:32:34,799
honest with you i think xcode hides a
38489
32:32:33,039 --> 32:32:36,479
lot of details and usually i'm used to
38490
32:32:34,800 --> 32:32:38,000
like doing things in the command line
38491
32:32:36,479 --> 32:32:39,679
and doing things simply from visual
38492
32:32:39,679 --> 32:32:42,959
but it is still a good thing that xcode
38493
32:32:41,592 --> 32:32:44,639
is going to help you submit your
38494
32:32:44,639 --> 32:32:48,960
in the previous versions of xcode like
38495
32:32:47,039 --> 32:32:50,551
many many years ago xcode couldn't do
38496
32:32:48,960 --> 32:32:54,080
this so you had a separate application
38497
32:32:50,551 --> 32:32:57,360
to actually upload your ipa files to app
38498
32:32:54,080 --> 32:32:59,512
and that in itself was also quite
38499
32:32:59,512 --> 32:33:02,800
i wouldn't say a negative body was
38500
32:33:00,872 --> 32:33:03,592
something that you have to go through
38501
32:33:03,592 --> 32:33:07,680
it is a plus and a minus that xcode is
38502
32:33:05,831 --> 32:33:09,279
going to take care of all of these in my
38503
32:33:09,279 --> 32:33:13,039
i'm just going to wait here for xcode to
38504
32:33:13,039 --> 32:33:17,831
work and it is very possible that if
38505
32:33:16,160 --> 32:33:19,911
this is the first time that you're
38506
32:33:17,831 --> 32:33:21,439
archiving your application with the
38507
32:33:22,399 --> 32:33:26,319
basically created in the beginning of
38508
32:33:23,911 --> 32:33:28,319
this course it's very possible that
38509
32:33:26,320 --> 32:33:31,192
when the time comes for xcode to
38510
32:33:28,320 --> 32:33:33,912
actually sign your binary and all its
38511
32:33:33,911 --> 32:33:37,039
it's possible that your macintosh is
38512
32:33:37,039 --> 32:33:41,279
for the password to this certificate and
38513
32:33:40,000 --> 32:33:44,080
actually it's going to ask you for the
38514
32:33:44,080 --> 32:33:49,680
in which on your computer this
38515
32:33:46,232 --> 32:33:51,911
certificate is stored so this is usually
38516
32:33:49,679 --> 32:33:54,231
the login keychain so if i go to
38517
32:33:51,911 --> 32:33:56,831
keychain access in here you'll see that
38518
32:33:54,232 --> 32:33:58,800
i have my login keychain and i have
38519
32:33:56,831 --> 32:34:00,231
certificates in here as you can see
38520
32:34:00,232 --> 32:34:04,872
this is the sort that i'm at the moment
38521
32:34:01,759 --> 32:34:06,479
using for duplication and um after
38522
32:34:04,872 --> 32:34:08,320
assigning this as you can see it's
38523
32:34:06,479 --> 32:34:10,319
archiving right hasn't really signed
38524
32:34:08,320 --> 32:34:12,232
things it's very possible that my
38525
32:34:10,320 --> 32:34:15,360
macintosh is going to ask me for the
38526
32:34:12,232 --> 32:34:17,832
password to that keychain so
38527
32:34:17,831 --> 32:34:22,159
finishing the archiving process so
38528
32:34:22,160 --> 32:34:26,480
so let's see basically how it goes after
38529
32:34:24,551 --> 32:34:28,800
after doing that after actually creating
38530
32:34:26,479 --> 32:34:31,679
our application ipa file we're going to
38531
32:34:28,800 --> 32:34:35,120
submit it to apple and that app is going
38532
32:34:31,679 --> 32:34:37,119
to be displayed then first inside here
38533
32:34:35,119 --> 32:34:39,831
in the build section of your
38534
32:34:43,119 --> 32:34:48,319
so let's see if we get this password for
38535
32:34:45,759 --> 32:34:52,720
signing as i've mentioned here
38536
32:34:48,320 --> 32:34:57,120
at the bottom of the screen so 4660
38537
32:34:52,720 --> 32:34:59,680
or 70 files out of 5039 files to
38538
32:34:59,679 --> 32:35:04,871
creating our binary so it's very very
38539
32:35:01,759 --> 32:35:06,159
close let's just see if it can succeed
38540
32:35:06,160 --> 32:35:11,911
and i can hear my macintosh um
38541
32:35:09,759 --> 32:35:13,511
and fans going full speed right now and
38542
32:35:11,911 --> 32:35:15,831
that's usually something you don't hear
38543
32:35:15,831 --> 32:35:20,319
max or macbook pros because they're
38544
32:35:18,000 --> 32:35:21,759
usually so silent like the fan almost
38545
32:35:21,759 --> 32:35:26,959
but this is apparently such a heavy
38546
32:35:23,679 --> 32:35:30,159
process for this macintosh to perform
38547
32:35:26,960 --> 32:35:32,320
the faster googling full speed so
38548
32:35:32,320 --> 32:35:36,400
all right and here is where we're seeing
38549
32:35:34,551 --> 32:35:37,759
that dialogue that i was talking about
38550
32:35:36,399 --> 32:35:40,000
as you can see it says code sign wants
38551
32:35:37,759 --> 32:35:42,159
to sign using your van.hawa nippor in
38552
32:35:40,000 --> 32:35:44,160
your keychain to allow this enter the
38553
32:35:42,160 --> 32:35:45,760
login keychains password so it has
38554
32:35:44,160 --> 32:35:47,440
nothing to do with your certificate it's
38555
32:35:45,759 --> 32:35:49,191
just actually has everything to do with
38556
32:35:47,440 --> 32:35:51,592
your certificate but the password itself
38557
32:35:49,191 --> 32:35:53,591
is the login keychains password so
38558
32:35:51,592 --> 32:35:56,080
it's usually your computer's password so
38559
32:35:53,592 --> 32:35:57,912
i'm just going to enter that
38560
32:35:56,080 --> 32:36:00,400
and then i'm going to say always allow
38561
32:36:00,399 --> 32:36:04,639
after doing that hopefully xcode is not
38562
32:36:03,119 --> 32:36:06,799
going to bother me with this password
38563
32:36:04,639 --> 32:36:08,479
again however i know in some older
38564
32:36:08,479 --> 32:36:12,080
it doesn't really understand when you
38565
32:36:10,000 --> 32:36:13,759
say always allow so when it comes to
38566
32:36:12,080 --> 32:36:14,800
signing your application you may have to
38567
32:36:14,800 --> 32:36:18,800
password up to like 20 times depending
38568
32:36:17,191 --> 32:36:20,159
on how many libraries your application
38569
32:36:20,160 --> 32:36:24,080
i remember this vividly when i was
38570
32:36:21,759 --> 32:36:26,231
working at a company and a tester i was
38571
32:36:26,232 --> 32:36:29,911
compile an archive an application for
38572
32:36:27,911 --> 32:36:31,679
ios and we both thought that he's
38573
32:36:29,911 --> 32:36:34,479
entering his password for his
38574
32:36:31,679 --> 32:36:35,831
certificate incorrectly so and here now
38575
32:36:35,831 --> 32:36:41,911
module shareplus not found and
38576
32:36:38,720 --> 32:36:44,080
what could that be because shareplus is
38577
32:36:41,911 --> 32:36:45,591
basically something that we're using in
38578
32:36:46,800 --> 32:36:50,479
and it's continuing to archive even
38579
32:36:48,800 --> 32:36:52,400
though it it says that something's
38580
32:36:50,479 --> 32:36:55,191
failed so all right so now we got an
38581
32:36:52,399 --> 32:36:56,639
issue here with pods runner framework
38582
32:36:55,191 --> 32:36:57,759
and this could seem i mean i'm actually
38583
32:36:56,639 --> 32:36:59,191
quite glad that we're getting these
38584
32:36:57,759 --> 32:37:01,831
errors and that could some and be
38585
32:36:59,191 --> 32:37:04,159
because we haven't done a proper pod
38586
32:37:01,831 --> 32:37:06,080
install so what i'm gonna do is go to
38587
32:37:04,160 --> 32:37:08,400
visual studio code here and in the
38588
32:37:06,080 --> 32:37:09,759
terminal then let me actually change the
38589
32:37:08,399 --> 32:37:10,871
screen layout a little bit so you see
38590
32:37:10,872 --> 32:37:13,592
so i'm gonna bring this up so you see
38591
32:37:12,551 --> 32:37:16,551
better what i'm doing and i'm going to
38592
32:37:18,160 --> 32:37:22,639
okay and then in here you could just say
38593
32:37:22,639 --> 32:37:26,639
basically pod the integrate it's going
38594
32:37:24,080 --> 32:37:28,080
to remove all your ios dependencies from
38595
32:37:26,639 --> 32:37:29,831
your workspace and then you could just
38596
32:37:29,831 --> 32:37:33,759
and this is gonna reinstall all your
38597
32:37:31,592 --> 32:37:35,760
dependencies from scratch so
38598
32:37:33,759 --> 32:37:37,831
let's see and i can see share plus is
38599
32:37:35,759 --> 32:37:39,591
actually installed now so it's
38600
32:37:37,831 --> 32:37:40,720
generating the pods project
38601
32:37:40,720 --> 32:37:45,440
great so that seems to be fine so let's
38602
32:37:43,191 --> 32:37:49,039
go in here and see if we can
38603
32:37:45,440 --> 32:37:52,639
uh do a clean so i'm gonna go to debug
38604
32:37:49,039 --> 32:37:54,479
sra product clean build folder and let's
38605
32:37:52,639 --> 32:37:56,551
see if we can make a fresh build and
38606
32:37:54,479 --> 32:37:58,959
this could actually take some time
38607
32:37:58,960 --> 32:38:03,512
uh cleaned the build art artifact so
38608
32:38:01,512 --> 32:38:05,832
it's gonna basically start the archiving
38609
32:38:03,512 --> 32:38:07,360
process from absolute beginning so
38610
32:38:05,831 --> 32:38:09,831
i'm just gonna be quiet for a while and
38611
32:38:07,360 --> 32:38:12,639
let us do its work and let's see if the
38612
32:38:09,831 --> 32:38:14,959
archiving process succeeds
38613
32:38:12,639 --> 32:38:16,872
okay so here's the result of actually
38614
32:38:14,960 --> 32:38:19,040
archiving our application again and
38615
32:38:16,872 --> 32:38:21,512
we're seeing the exact same problem now
38616
32:38:19,039 --> 32:38:24,159
after doing a podly integrate and also
38617
32:38:21,512 --> 32:38:26,160
doing a completely new pod install so
38618
32:38:24,160 --> 32:38:28,400
we're seeing the exact same problem with
38619
32:38:26,160 --> 32:38:31,120
share plus say module share plus not
38620
32:38:28,399 --> 32:38:33,911
found and this could be a problem with
38621
32:38:31,119 --> 32:38:35,440
how we've done for instance our
38622
32:38:36,800 --> 32:38:40,872
and to be honest with you i could cut
38623
32:38:38,639 --> 32:38:42,960
this out of this whole video but i'm so
38624
32:38:40,872 --> 32:38:44,639
so glad that we're seeing these problems
38625
32:38:44,639 --> 32:38:48,800
archiving an ios application and simply
38626
32:38:48,800 --> 32:38:52,160
not always going to go fine even just
38627
32:38:50,639 --> 32:38:54,232
doing the same thing for android it's
38628
32:38:52,160 --> 32:38:56,080
not always going to go fine and
38629
32:38:54,232 --> 32:38:57,192
if i cut this out of this video you you
38630
32:38:56,080 --> 32:38:58,872
will be thinking that everything is
38631
32:38:57,191 --> 32:39:00,231
going fine for me but things are not
38632
32:38:58,872 --> 32:39:02,400
working for you and then you'll start
38633
32:39:00,232 --> 32:39:05,279
blaming yourself but i really want to
38634
32:39:02,399 --> 32:39:07,511
keep these stuff in this course so you
38635
32:39:05,279 --> 32:39:09,440
see that well a person like me trying to
38636
32:39:07,512 --> 32:39:12,000
tell you how to do things also needs to
38637
32:39:09,440 --> 32:39:14,320
understand himself how and why these
38638
32:39:14,320 --> 32:39:18,000
in my guess in this case since we've
38639
32:39:16,479 --> 32:39:20,399
already done a pod install it would be
38640
32:39:20,399 --> 32:39:24,551
build folder for our entire flutter
38641
32:39:24,551 --> 32:39:29,440
flutter pop get from scratch so
38642
32:39:27,679 --> 32:39:31,279
let's go ahead in our flutter
38643
32:39:29,440 --> 32:39:34,160
application in here and at the bottom
38644
32:39:31,279 --> 32:39:35,679
i'm just going to say fluffer clean
38645
32:39:34,160 --> 32:39:37,911
and that's going to clean the artifacts
38646
32:39:38,872 --> 32:39:41,911
and then you're going to get a lot of
38647
32:39:40,479 --> 32:39:44,231
errors in your application because then
38648
32:39:41,911 --> 32:39:47,360
it doesn't understand anything so we
38649
32:39:49,440 --> 32:39:53,040
so that's gonna do its work and get all
38650
32:39:51,191 --> 32:39:55,911
your dependencies from scratch basically
38651
32:39:53,039 --> 32:39:58,479
and install them in your application
38652
32:39:55,911 --> 32:39:59,679
all right then what i'm gonna do in here
38653
32:39:59,679 --> 32:40:04,479
yeah we could just leave it like that
38654
32:40:01,191 --> 32:40:06,871
now and go back to our xcode and then
38655
32:40:04,479 --> 32:40:09,191
try to archive the application from
38656
32:40:06,872 --> 32:40:11,592
scratch let's see let's see if this time
38657
32:40:09,191 --> 32:40:14,720
it goes a little bit better and
38658
32:40:11,592 --> 32:40:16,872
hopefully it shouldn't take so much time
38659
32:40:14,720 --> 32:40:18,160
this time but you never know with xcode
38660
32:40:18,160 --> 32:40:22,552
with ios development it has its own
38661
32:40:20,160 --> 32:40:24,800
antiques so let's just wait and see
38662
32:40:22,551 --> 32:40:27,279
after doing a pop get if this process is
38663
32:40:24,800 --> 32:40:29,592
going to go through or not so after
38664
32:40:27,279 --> 32:40:31,759
xcode has compiled the application again
38665
32:40:29,592 --> 32:40:34,160
i could see the same problems as as we
38666
32:40:31,759 --> 32:40:35,911
had before so meaning that our pod the
38667
32:40:34,160 --> 32:40:38,080
integrate and flutter clean really
38668
32:40:35,911 --> 32:40:40,319
didn't have so much effect on the
38669
32:40:38,080 --> 32:40:42,000
application itself now since i've been
38670
32:40:40,320 --> 32:40:44,320
doing ios development for a very long
38671
32:40:42,000 --> 32:40:47,119
time i still have some tools in my in my
38672
32:40:44,320 --> 32:40:49,120
belt that i can drag out and use
38673
32:40:47,119 --> 32:40:51,591
and one of the first things i would use
38674
32:40:49,119 --> 32:40:53,440
as a software engineer and an ios
38675
32:40:51,592 --> 32:40:54,232
developer is just to first have a look
38676
32:40:54,232 --> 32:40:59,360
our deployment ios version and here
38677
32:40:56,872 --> 32:41:01,360
we're supporting ios 9 and it's very
38678
32:41:01,360 --> 32:41:05,512
sharing capability that is built into
38679
32:41:03,911 --> 32:41:07,119
the plugin that we're dragging into our
38680
32:41:05,512 --> 32:41:08,872
application isn't compatible with this
38681
32:41:07,119 --> 32:41:10,720
ios version so first i'm going to bump
38682
32:41:10,720 --> 32:41:15,279
at the moment at the their ios 13 14 and
38683
32:41:13,592 --> 32:41:17,120
50 are very popular so there are the
38684
32:41:15,279 --> 32:41:19,759
latest versions of ios at the time of
38685
32:41:17,119 --> 32:41:21,440
recording this um course so first i'm
38686
32:41:21,440 --> 32:41:26,960
the next thing that i'm going to do is
38687
32:41:23,512 --> 32:41:29,119
to from our project in here so i'm
38688
32:41:26,960 --> 32:41:32,800
having a look here as you can see i'm in
38689
32:41:29,119 --> 32:41:34,159
the ios folder of this notes project so
38690
32:41:34,160 --> 32:41:39,832
then the first thing i'm going to do is
38691
32:41:36,551 --> 32:41:41,759
to perhaps remove the um i wonder if i
38692
32:41:39,831 --> 32:41:43,039
should actually remove the pod file as
38693
32:41:43,039 --> 32:41:49,360
maybe let's just remove the podfile.lock
38694
32:41:46,000 --> 32:41:51,911
and remove also all the pots from the
38695
32:41:49,360 --> 32:41:55,592
project okay so then i'm gonna do
38696
32:41:55,592 --> 32:41:59,760
that removed really all the pots from
38697
32:41:59,759 --> 32:42:06,080
and then after undoing that i'm going to
38698
32:42:03,039 --> 32:42:09,039
have actually a look at our pot file to
38699
32:42:06,080 --> 32:42:10,800
have a look at all our ios dependencies
38700
32:42:09,039 --> 32:42:13,191
and see how they look like so i'm going
38701
32:42:10,800 --> 32:42:15,120
to stop the execution of the program and
38702
32:42:13,191 --> 32:42:16,871
then i'm going to open a file called pod
38703
32:42:15,119 --> 32:42:18,871
file and this is where all your ios
38704
32:42:16,872 --> 32:42:21,760
dependencies basically are stored as you
38705
32:42:18,872 --> 32:42:23,592
can see the platform is ios 13. so it
38706
32:42:21,759 --> 32:42:26,000
was strange that our deployment target
38707
32:42:23,592 --> 32:42:27,440
was ios 9 so this could be a potential
38708
32:42:27,440 --> 32:42:32,639
and after doing that then we have our
38709
32:42:30,320 --> 32:42:34,000
pod file and yeah this this looks fine
38710
32:42:34,000 --> 32:42:40,080
um let's then go after into the terminal
38711
32:42:38,000 --> 32:42:41,279
and after flats are clean let's just say
38712
32:42:45,592 --> 32:42:50,480
our dependencies into our flutter
38713
32:42:48,080 --> 32:42:53,279
project and ios project for instance
38714
32:42:50,479 --> 32:42:55,759
then and we can then go back i'm
38715
32:42:53,279 --> 32:43:00,000
actually going to kill xcode and open
38716
32:43:00,232 --> 32:43:04,800
project workspace again and i can see
38717
32:43:03,191 --> 32:43:07,512
here at the moment the pods aren't
38718
32:43:04,800 --> 32:43:09,192
really installed so let's go and do the
38719
32:43:07,512 --> 32:43:11,279
installation of pods ourselves so i'm
38720
32:43:09,191 --> 32:43:13,279
going to say pod install this is going
38721
32:43:11,279 --> 32:43:15,039
to install all the dependencies and
38722
32:43:13,279 --> 32:43:17,360
let's have a look in here and say what
38723
32:43:17,360 --> 32:43:21,191
cloud fire support as far as store using
38724
32:43:19,119 --> 32:43:23,279
firebase is defining okay those all look
38725
32:43:21,191 --> 32:43:24,551
fine here says coco pods didn't see the
38726
32:43:23,279 --> 32:43:25,831
base configuration of your project
38727
32:43:24,551 --> 32:43:28,159
because your project already has a
38728
32:43:25,831 --> 32:43:30,159
custom config set in order for cocoapods
38729
32:43:28,160 --> 32:43:31,911
integration to work at all please either
38730
32:43:30,160 --> 32:43:33,680
set the base configuration of the target
38731
32:43:31,911 --> 32:43:37,440
runner to target support files blah blah
38732
32:43:33,679 --> 32:43:39,279
blah or include the target support files
38733
32:43:37,440 --> 32:43:41,512
in your build configuration so this
38734
32:43:39,279 --> 32:43:43,831
could actually be very important as we
38735
32:43:43,831 --> 32:43:48,080
there was a problem in setting up our
38736
32:43:46,000 --> 32:43:50,551
project with flutter create when we said
38737
32:43:48,080 --> 32:43:53,440
we created our application to begin with
38738
32:43:50,551 --> 32:43:55,591
but let's just keep this in mind and try
38739
32:43:56,479 --> 32:44:01,191
go in here and open our workspace one
38740
32:43:59,360 --> 32:44:02,800
more time and now i can see all the pods
38741
32:44:05,512 --> 32:44:10,960
share plus is right there pod okay
38742
32:44:09,039 --> 32:44:12,399
and the pod spec what is the pod spec
38743
32:44:10,960 --> 32:44:14,960
says it actually says the platform
38744
32:44:12,399 --> 32:44:16,799
should be ios 8 so it supports ios 8 so
38745
32:44:14,960 --> 32:44:18,800
that's not a problem so what i'm going
38746
32:44:16,800 --> 32:44:20,720
to do now is after doing all these
38747
32:44:18,800 --> 32:44:22,232
things i'm going to basically try to
38748
32:44:20,720 --> 32:44:24,720
build this project again so i'm going to
38749
32:44:22,232 --> 32:44:28,000
do a clean here clean build folder with
38750
32:44:24,720 --> 32:44:30,232
command shift k so blink basically clean
38751
32:44:30,232 --> 32:44:35,440
all while all of this is going on
38752
32:44:33,512 --> 32:44:38,400
editor functionality that's that's fine
38753
32:44:35,440 --> 32:44:39,360
so i'm going to basically start doing a
38754
32:44:39,360 --> 32:44:44,399
product and archive again and then i'll
38755
32:44:42,551 --> 32:44:46,159
see you on the other side either this
38756
32:44:44,399 --> 32:44:48,399
succeeds or fails and if it fails we're
38757
32:44:46,160 --> 32:44:50,480
gonna fix it so let's have a look
38758
32:44:50,479 --> 32:44:54,319
after doing all the gymnastics that i
38759
32:44:54,320 --> 32:44:59,280
then our application has finally
38760
32:44:56,720 --> 32:45:00,551
compiled without a problem and to be
38761
32:44:59,279 --> 32:45:02,399
honest with you this is one of the
38762
32:45:00,551 --> 32:45:04,159
things that i believe many courses are
38763
32:45:04,160 --> 32:45:08,000
when you go through distributing your
38764
32:45:06,080 --> 32:45:09,911
application you actually go through a
38765
32:45:08,000 --> 32:45:11,440
lot it's not just that you press a
38766
32:45:09,911 --> 32:45:13,831
button and submit your application and
38767
32:45:11,440 --> 32:45:16,160
you're done well usually if everything
38768
32:45:13,831 --> 32:45:18,159
is set up correctly then that is the
38769
32:45:16,160 --> 32:45:19,680
case however you have to set up
38770
32:45:19,679 --> 32:45:25,279
so what happened in here is that we have
38771
32:45:21,679 --> 32:45:28,399
to issue a few things what i did
38772
32:45:25,279 --> 32:45:30,232
just to name them step by step is that i
38773
32:45:30,232 --> 32:45:35,360
deployment target of our application
38774
32:45:32,320 --> 32:45:37,912
from 9 to 13. so you can find that by
38775
32:45:35,360 --> 32:45:40,399
clicking on your workspace in xcode then
38776
32:45:37,911 --> 32:45:42,639
clicking on your runner target general
38777
32:45:40,399 --> 32:45:44,959
tab in here and then the deployment
38778
32:45:42,639 --> 32:45:47,039
information i bumped it to ios 13 so
38779
32:45:44,960 --> 32:45:48,872
that's the first thing that i that i did
38780
32:45:47,039 --> 32:45:50,551
however i don't think that that
38781
32:45:48,872 --> 32:45:52,720
necessarily had anything to do with
38782
32:45:52,720 --> 32:45:56,080
the other thing that we did from
38783
32:45:56,080 --> 32:46:00,400
all our pots and i did that by saying
38784
32:46:00,399 --> 32:46:06,079
now we issued that command from the ios
38785
32:46:03,360 --> 32:46:07,759
folder if i open this ios folder you'll
38786
32:46:06,080 --> 32:46:10,400
see that there is a folder in here
38787
32:46:07,759 --> 32:46:12,959
called pods what are pods pods are
38788
32:46:10,399 --> 32:46:15,759
basically your applications dependencies
38789
32:46:12,960 --> 32:46:18,320
for ios that's how flutter manages your
38790
32:46:15,759 --> 32:46:19,831
ios application dependencies so all
38791
32:46:18,320 --> 32:46:22,320
these libraries for instance like
38792
32:46:19,831 --> 32:46:25,039
firebase and this sharing library that
38793
32:46:22,320 --> 32:46:27,912
we just dragged in they're using
38794
32:46:25,039 --> 32:46:30,799
basically they are dependencies that
38795
32:46:27,911 --> 32:46:32,800
flutter manages using cocoapods which is
38796
32:46:30,800 --> 32:46:34,800
a third-party software and you have to
38797
32:46:32,800 --> 32:46:36,551
have cocoapods installed on your
38798
32:46:34,800 --> 32:46:38,720
computer in order to even be able to
38799
32:46:36,551 --> 32:46:40,551
interact with pods so there's lots of
38800
32:46:38,720 --> 32:46:42,320
information on the internet on how to
38801
32:46:40,551 --> 32:46:44,800
install cocoapods but it's usually
38802
32:46:42,320 --> 32:46:46,480
pseudo jam install cocoapods and i think
38803
32:46:44,800 --> 32:46:49,680
maybe you can even use homebrew to
38804
32:46:46,479 --> 32:46:50,959
install cocoapods but i usually use
38805
32:46:50,960 --> 32:46:55,440
or jam in this case but you need sudo
38806
32:46:53,039 --> 32:46:57,191
usually to install cocoapods so
38807
32:46:55,440 --> 32:46:59,512
so what we did we removed the pots
38808
32:46:57,191 --> 32:47:01,360
folder we removed the podfile lock which
38809
32:46:59,512 --> 32:47:03,191
for you who are like comfortable with
38810
32:47:01,360 --> 32:47:05,191
backing the web development with npm
38811
32:47:03,191 --> 32:47:07,119
this is this is like your package lock
38812
32:47:05,191 --> 32:47:08,639
file and if you're not comfortable with
38813
32:47:07,119 --> 32:47:11,591
back-end development basically a pod
38814
32:47:08,639 --> 32:47:14,160
file lock is a file that stores
38815
32:47:11,592 --> 32:47:17,120
information about all your dependencies
38816
32:47:14,160 --> 32:47:19,512
which are currently installed
38817
32:47:17,119 --> 32:47:22,871
whereas the pod file stores information
38818
32:47:19,512 --> 32:47:24,800
about which dependencies you need and
38819
32:47:22,872 --> 32:47:27,680
pod file log stores information about
38820
32:47:24,800 --> 32:47:30,000
the ones that are integrated right now
38821
32:47:27,679 --> 32:47:32,159
into your application so we remove that
38822
32:47:30,000 --> 32:47:33,440
just to ensure that on the next pod
38823
32:47:33,440 --> 32:47:37,592
all our dependencies will be freshly
38824
32:47:35,279 --> 32:47:40,000
installed and regardless of what is
38825
32:47:40,000 --> 32:47:44,232
there were a few steps that we had to
38826
32:47:41,592 --> 32:47:46,160
take but finally we manage oh also we
38827
32:47:44,232 --> 32:47:47,911
don't forget flutter clean we also
38828
32:47:47,911 --> 32:47:52,232
after all these steps we finally managed
38829
32:47:50,000 --> 32:47:54,399
to build our application and as you saw
38830
32:47:52,232 --> 32:47:56,720
in this screen we came to this archive
38831
32:47:56,720 --> 32:48:00,720
i want to have a look a little bit here
38832
32:48:03,360 --> 32:48:07,592
so yeah we've done the password signing
38833
32:48:05,119 --> 32:48:09,279
etc etc and now we basically
38834
32:48:11,279 --> 32:48:15,279
ipa file in here so one you need to do
38835
32:48:13,759 --> 32:48:17,191
in here then you press the distribute
38836
32:48:15,279 --> 32:48:19,039
app button and say app store connect and
38837
32:48:19,039 --> 32:48:23,591
and this is going to do some analysis on
38838
32:48:23,592 --> 32:48:27,279
and it's this is going to connect to app
38839
32:48:27,279 --> 32:48:30,959
and some of you in here may immediately
38840
32:48:29,191 --> 32:48:32,871
get an error saying that well i don't
38841
32:48:30,960 --> 32:48:34,552
know how to connect and that's because
38842
32:48:35,831 --> 32:48:39,679
profile information in xcode if you go
38843
32:48:37,911 --> 32:48:41,831
to xcode preferences there is a section
38844
32:48:39,679 --> 32:48:44,799
called accounts and you need to ensure
38845
32:48:41,831 --> 32:48:46,871
that you basically add your app apple id
38846
32:48:44,800 --> 32:48:47,760
with your account in xcode for any of
38847
32:48:47,759 --> 32:48:51,119
for the distribution to actually work at
38848
32:48:49,592 --> 32:48:53,120
all so i'm going to say app store
38849
32:48:51,119 --> 32:48:56,231
connect here and next upload to app
38850
32:49:05,279 --> 32:49:08,872
and it says okay upload your app symbols
38851
32:49:07,360 --> 32:49:10,639
manage version and build number i don't
38852
32:49:08,872 --> 32:49:12,320
really like that so we're gonna take
38853
32:49:10,639 --> 32:49:13,279
that off so we're not gonna use that
38854
32:49:13,279 --> 32:49:17,512
and let me just make the screen a little
38855
32:49:14,800 --> 32:49:20,400
bit bigger and press next in here and
38856
32:49:17,512 --> 32:49:22,551
here you have to select your uh profile
38857
32:49:22,551 --> 32:49:26,639
press the next button in there and this
38858
32:49:24,232 --> 32:49:29,592
is going to contact app store connect
38859
32:49:26,639 --> 32:49:31,279
and depending on your application size
38860
32:49:29,592 --> 32:49:33,680
this could actually take quite a long
38861
32:49:31,279 --> 32:49:35,279
time for some of the applications that
38862
32:49:35,279 --> 32:49:40,479
not personally but for various companies
38863
32:49:38,399 --> 32:49:41,750
even with my thousand thousand download
38864
32:49:43,440 --> 32:49:48,080
internet connection this process could
38865
32:49:45,191 --> 32:49:49,360
take a long time so let's see how long
38866
32:49:48,080 --> 32:49:51,191
it takes because you see during the
38867
32:49:49,360 --> 32:49:53,119
upload process it's not just uploading
38868
32:49:51,191 --> 32:49:54,319
your binary it's actually contacting
38869
32:49:54,320 --> 32:49:58,800
even validating a lot of your assets
38870
32:49:56,551 --> 32:50:01,119
like your images it's valuing your icons
38871
32:49:58,800 --> 32:50:03,120
it's valid validating even if you have
38872
32:50:01,119 --> 32:50:05,039
other resources in your application and
38873
32:50:03,119 --> 32:50:06,399
i believe it even checks like if you're
38874
32:50:06,399 --> 32:50:10,639
api calls which you shouldn't be making
38875
32:50:08,800 --> 32:50:12,551
and i'm not talking about network api
38876
32:50:10,639 --> 32:50:14,800
calls but i'm actually talking about ios
38877
32:50:12,551 --> 32:50:16,639
sdk api calls for instance if you've
38878
32:50:14,800 --> 32:50:20,232
hidden some work in your application
38879
32:50:16,639 --> 32:50:24,639
which is making uh calls to some um
38880
32:50:20,232 --> 32:50:26,720
private apis at the ios sdk level so
38881
32:50:24,639 --> 32:50:28,160
now we're just gonna let it do its thing
38882
32:50:28,160 --> 32:50:34,720
and um we'll just wait until it's done
38883
32:50:31,831 --> 32:50:35,831
okay well the upload process seems to
38884
32:50:35,831 --> 32:50:42,080
actually a lot better this time and um
38885
32:50:39,911 --> 32:50:44,319
and i actually have to really confess to
38886
32:50:44,320 --> 32:50:49,360
the upload process for me took a very
38887
32:50:46,800 --> 32:50:51,512
very very long time i'm talking about
38888
32:50:49,360 --> 32:50:53,191
upwards of 30 minutes even though i'm on
38889
32:50:55,191 --> 32:51:00,231
download the upload speed um for my
38890
32:50:58,080 --> 32:51:02,800
internet connection this still took a
38891
32:51:00,232 --> 32:51:05,512
long time and this could either be a
38892
32:51:02,800 --> 32:51:07,360
temporary bug a glitch on apple on
38893
32:51:05,512 --> 32:51:09,191
apple's app store connect website or it
38894
32:51:07,360 --> 32:51:11,191
could just be something that well from
38895
32:51:09,191 --> 32:51:13,279
now on things are gonna take a long time
38896
32:51:11,191 --> 32:51:15,279
you never know what apple so
38897
32:51:13,279 --> 32:51:18,000
that's unfortunate but at the moment
38898
32:51:15,279 --> 32:51:19,592
it's gone through and i can see that um
38899
32:51:18,000 --> 32:51:22,000
you will get this message telling you
38900
32:51:19,592 --> 32:51:23,592
that your app was uploaded successfully
38901
32:51:26,720 --> 32:51:31,831
a push notification email that you'll
38902
32:51:28,960 --> 32:51:33,680
receive from apple that will look like
38903
32:51:31,831 --> 32:51:35,191
this after submitting your application
38904
32:51:33,679 --> 32:51:37,759
you will probably receive an email from
38905
32:51:35,191 --> 32:51:40,231
apple that looks kind of like this
38906
32:51:37,759 --> 32:51:41,911
and in here as you'll see it says we i i
38907
32:51:40,232 --> 32:51:43,360
want more issues with recent delivery of
38908
32:51:41,911 --> 32:51:44,479
your application my awesome notes your
38909
32:51:43,360 --> 32:51:45,680
delivery was successful but you
38910
32:51:44,479 --> 32:51:47,512
mentioned you may wish to correct the
38911
32:51:45,679 --> 32:51:49,279
following issues in your next lorry
38912
32:51:47,512 --> 32:51:50,639
missing push notification entitlements
38913
32:51:52,399 --> 32:51:55,679
troubling for some developers but this
38914
32:51:54,160 --> 32:51:57,360
is simply because we're at the moment
38915
32:51:55,679 --> 32:51:58,871
using firebase in our application on
38916
32:51:58,872 --> 32:52:02,080
able to handle push notifications so
38917
32:52:00,720 --> 32:52:04,720
that you can send a push notification
38918
32:52:02,080 --> 32:52:07,759
from firebase console to your
38919
32:52:04,720 --> 32:52:09,512
users however our application isn't
38920
32:52:07,759 --> 32:52:11,039
taking advantage of push notifications
38921
32:52:11,039 --> 32:52:14,551
you can just disregard this email and
38922
32:52:14,551 --> 32:52:18,959
don't try to even fix anything because
38923
32:52:16,872 --> 32:52:21,192
all this email is saying is that we've
38924
32:52:18,960 --> 32:52:22,872
analyzed your binary it looks like you
38925
32:52:21,191 --> 32:52:25,759
are accessing some push notification
38926
32:52:22,872 --> 32:52:27,680
apis however you forgot to enable push
38927
32:52:25,759 --> 32:52:29,759
notifications for applications so and
38928
32:52:27,679 --> 32:52:31,679
this is simply because when you bundle
38929
32:52:29,759 --> 32:52:33,191
your application and send it to apple as
38930
32:52:33,191 --> 32:52:36,959
which is something you probably didn't
38931
32:52:34,720 --> 32:52:39,592
actually look at but if you go to visual
38932
32:52:36,960 --> 32:52:41,592
studio code sorry if you go to xcode in
38933
32:52:39,592 --> 32:52:42,720
this archive browser right click on your
38934
32:52:42,720 --> 32:52:48,000
and here and say show in finder you'll
38935
32:52:45,279 --> 32:52:50,000
see this xcode archive file and say show
38936
32:52:48,000 --> 32:52:51,679
package contents and in here you'll
38937
32:52:50,000 --> 32:52:53,831
probably see some products and
38938
32:52:51,679 --> 32:52:56,799
applications run our app so this whole
38939
32:52:53,831 --> 32:52:59,360
thing is like your ipa file that apple
38940
32:52:56,800 --> 32:53:01,040
has received now in this runner
38941
32:52:59,360 --> 32:53:02,639
application there is information about
38942
32:53:01,039 --> 32:53:04,871
what kind of like libraries it has
38943
32:53:02,639 --> 32:53:06,551
included in itself and you can actually
38944
32:53:04,872 --> 32:53:08,320
right click on run or app and say show
38945
32:53:06,551 --> 32:53:10,000
package contents and in here you'll see
38946
32:53:08,320 --> 32:53:12,400
all the frameworks that your application
38947
32:53:16,720 --> 32:53:21,680
most probably one of the firebase
38948
32:53:18,320 --> 32:53:23,592
frameworks is internally using it has it
38949
32:53:21,679 --> 32:53:24,719
is using some apis related to push
38950
32:53:23,592 --> 32:53:26,720
notifications but that doesn't
38951
32:53:24,720 --> 32:53:29,191
necessarily mean that it is active and
38952
32:53:29,191 --> 32:53:33,591
so that's just an email that apple tells
38953
32:53:31,512 --> 32:53:35,360
you that hey you may have forgotten to
38954
32:53:33,592 --> 32:53:36,960
do something but you can just disregard
38955
32:53:35,360 --> 32:53:38,479
from this email and say no i didn't
38956
32:53:36,960 --> 32:53:40,639
forget anything because we don't have
38957
32:53:38,479 --> 32:53:41,679
push notifications in our application
38958
32:53:46,232 --> 32:53:49,832
so that seems to be fine and after that
38959
32:53:48,000 --> 32:53:51,360
email you'll probably also receive an
38960
32:53:49,831 --> 32:53:54,000
email that looks like this telling you
38961
32:53:51,360 --> 32:53:56,960
that hey your application with this sku
38962
32:53:54,000 --> 32:53:59,191
has now been submitted and has completed
38963
32:53:56,960 --> 32:54:01,280
processing and this this email literally
38964
32:54:01,279 --> 32:54:05,191
this application's finished processing
38965
32:54:02,720 --> 32:54:08,080
you're able to install it on your ios or
38966
32:54:05,191 --> 32:54:10,319
mac device and you can test it as you'll
38967
32:54:11,360 --> 32:54:15,119
we usually do in every chapter at the
38968
32:54:13,191 --> 32:54:16,871
end of every chapter we commit to what
38969
32:54:15,119 --> 32:54:19,440
we've done and we make sure that we
38970
32:54:16,872 --> 32:54:21,120
commit and tag those changes so
38971
32:54:19,440 --> 32:54:22,000
let me do some reshuffling on the screen
38972
32:54:22,000 --> 32:54:26,639
and let's go to and i'm going to close
38973
32:54:24,232 --> 32:54:30,080
xcode here like that go to our
38974
32:54:26,639 --> 32:54:32,720
application my notes to terminal and
38975
32:54:32,720 --> 32:54:35,440
a few things change so i'm going to go
38976
32:54:35,440 --> 32:54:39,592
get status in the main folder of our
38977
32:54:37,911 --> 32:54:43,119
application my notes because i was in
38978
32:54:39,592 --> 32:54:44,720
the ios folder so i just did cd dot dot
38979
32:54:43,119 --> 32:54:46,720
like this so now i'm in the main folder
38980
32:54:44,720 --> 32:54:48,960
grid status shows this and i'm just
38981
32:54:46,720 --> 32:54:51,119
going to say git add all right and let's
38982
32:54:48,960 --> 32:54:53,360
just have a look at our logs the last
38983
32:54:51,119 --> 32:54:55,191
commit was step 28 so let's just think
38984
32:54:55,191 --> 32:54:59,191
step 29 as a caption at the bottom
38985
32:54:57,360 --> 32:55:01,039
screen indicates and we just push our
38986
32:55:01,039 --> 32:55:05,759
after that is now let's just tag our
38987
32:55:03,119 --> 32:55:07,591
changes as well and say step 29
38988
32:55:10,720 --> 32:55:15,680
all right so that is now working as
38989
32:55:15,679 --> 32:55:19,119
what uh we usually at the end of it at
38990
32:55:17,679 --> 32:55:20,399
the end of every chapter is that we talk
38991
32:55:19,119 --> 32:55:22,871
about what we when we are going to
38992
32:55:20,399 --> 32:55:24,799
discuss in the following chapter and
38993
32:55:22,872 --> 32:55:27,040
what we need to do in the next chapter
38994
32:55:24,800 --> 32:55:29,440
is actually release our ios application
38995
32:55:27,039 --> 32:55:32,719
we've sent it now to apple and apple has
38996
32:55:29,440 --> 32:55:34,960
finally finished processing that and
38997
32:55:32,720 --> 32:55:37,440
build meaning that it's ready now to be
38998
32:55:34,960 --> 32:55:38,720
actually submitted to apple and that's
38999
32:55:37,440 --> 32:55:40,400
what we're going to do in the next
39000
32:55:40,399 --> 32:55:45,360
for release to the app store so i'll see
39001
32:55:43,440 --> 32:55:47,592
you there hello everyone and welcome to
39002
32:55:45,360 --> 32:55:49,039
chapter 48 of this flutter course in
39003
32:55:47,592 --> 32:55:50,000
previous chapters we've been working
39004
32:55:50,000 --> 32:55:54,800
creating an ipa file and sending it to
39005
32:55:51,911 --> 32:55:57,119
apple and in this chapter we're going to
39006
32:55:54,800 --> 32:55:58,960
make sure that we're releasing that ipa
39007
32:55:57,119 --> 32:56:01,039
file meaning that we're going to tell
39008
32:55:58,960 --> 32:56:02,872
apple that hey we're ready with this ipa
39009
32:56:04,800 --> 32:56:09,440
this file for us and the review process
39010
32:56:06,872 --> 32:56:11,360
for apple and and google are a little
39011
32:56:09,440 --> 32:56:13,680
bit different in that for instance with
39012
32:56:11,360 --> 32:56:15,279
apple sometimes uh there's an actual
39013
32:56:13,679 --> 32:56:17,911
user looking at your application and
39014
32:56:15,279 --> 32:56:20,399
sometimes if you for instance request a
39015
32:56:17,911 --> 32:56:21,831
um a fast review from apple they may not
39016
32:56:20,399 --> 32:56:24,000
even look at it and they may just say
39017
32:56:21,831 --> 32:56:26,479
okay it just works it's it doesn't crash
39018
32:56:24,000 --> 32:56:29,119
and then they it just goes through
39019
32:56:26,479 --> 32:56:30,959
um and for google it could also be a
39020
32:56:29,119 --> 32:56:32,080
completely different process but
39021
32:56:30,960 --> 32:56:34,480
we're right now in this chapter we're
39022
32:56:32,080 --> 32:56:37,360
going to focus on how ios app app
39023
32:56:34,479 --> 32:56:38,639
submission basically works okay
39024
32:56:38,639 --> 32:56:44,160
when you send an ipa file like we've
39025
32:56:41,039 --> 32:56:46,719
done to apple it will be available in a
39026
32:56:44,160 --> 32:56:50,080
place called test flight so let me bring
39027
32:56:46,720 --> 32:56:54,399
our web browser to the screen and let's
39028
32:56:50,080 --> 32:56:54,400
go and see if we can if you can actually
39029
32:56:56,872 --> 32:57:01,040
views as we had before so let's see app
39030
32:56:59,039 --> 32:57:03,279
store connect and i've restarted my
39031
32:57:01,039 --> 32:57:05,831
computer since last time so i may have
39032
32:57:06,479 --> 32:57:10,231
log in again and thank god i didn't
39033
32:57:08,399 --> 32:57:12,479
actually have to restart the whole
39034
32:57:10,232 --> 32:57:14,080
process and actually grab my security
39035
32:57:14,080 --> 32:57:17,759
it just allowed me to log in so let's go
39036
32:57:15,831 --> 32:57:19,360
to my awesome apps in app store connect
39037
32:57:17,759 --> 32:57:20,551
and then you'll see a tab up here called
39038
32:57:20,551 --> 32:57:25,119
and test flight as you'll see now our
39039
32:57:22,479 --> 32:57:28,551
build then is available in here
39040
32:57:25,119 --> 32:57:30,479
and it's ready to be tested basically
39041
32:57:30,479 --> 32:57:34,319
what we need to also do is to go in here
39042
32:57:32,320 --> 32:57:36,160
in the missing compliance and then tap
39043
32:57:34,320 --> 32:57:38,000
on this manage and it says does your app
39044
32:57:38,000 --> 32:57:41,679
and and it says export logs require that
39045
32:57:39,759 --> 32:57:44,319
products containing encryption must be
39046
32:57:41,679 --> 32:57:46,399
uh properly authorized so in here we
39047
32:57:46,399 --> 32:57:49,360
and it says export compliance does your
39048
32:57:49,360 --> 32:57:52,551
qualify for any of the exams provided in
39049
32:57:51,279 --> 32:57:54,319
the category make sure that your app
39050
32:57:52,551 --> 32:57:55,911
meets the criteria actually we could go
39051
32:57:54,320 --> 32:57:58,960
previous and just say no in here because
39052
32:57:55,911 --> 32:58:00,479
we're not directly using um
39053
32:57:58,960 --> 32:58:01,832
if you it is your responsibility to
39054
32:58:00,479 --> 32:58:03,679
comply with export regulation and you
39055
32:58:01,831 --> 32:58:05,360
should revisit this question if your
39056
32:58:03,679 --> 32:58:06,799
encryption exists i'll just say blah
39057
32:58:06,800 --> 32:58:11,120
now okay and then we say start internal
39058
32:58:09,279 --> 32:58:13,191
testing okay so now that compliance
39059
32:58:13,191 --> 32:58:17,831
so now that we've done that you'll see
39060
32:58:15,759 --> 32:58:19,439
that here in app store connect there is
39061
32:58:17,831 --> 32:58:21,119
a section called test flight and in here
39062
32:58:21,119 --> 32:58:25,759
for instance invite third-party testers
39063
32:58:25,759 --> 32:58:30,799
to test your application and you are
39064
32:58:30,800 --> 32:58:36,479
give access to your application to users
39065
32:58:34,080 --> 32:58:38,232
who you've invited to app store connect
39066
32:58:36,479 --> 32:58:39,512
so it is very very important to
39067
32:58:38,232 --> 32:58:41,592
understand the difference one is
39068
32:58:39,512 --> 32:58:43,512
internal testing and the other one is
39069
32:58:41,592 --> 32:58:45,279
like if you want to submit your
39070
32:58:43,512 --> 32:58:46,872
application to be tested by third
39071
32:58:45,279 --> 32:58:48,959
parties like someone who doesn't work
39072
32:58:46,872 --> 32:58:50,720
for your company for instance so in this
39073
32:58:48,960 --> 32:58:52,552
case we're just going to use internal
39074
32:58:50,720 --> 32:58:53,831
testing in this chapter but just know
39075
32:58:53,831 --> 32:58:58,720
is on ios and mac os an application that
39076
32:58:57,191 --> 32:59:00,159
you can actually download on those
39077
32:59:00,160 --> 32:59:05,592
and you can use test flight in order to
39078
32:59:02,720 --> 32:59:07,911
test your own ios applications or mac
39079
32:59:07,911 --> 32:59:14,080
you submit them to app store okay
39080
32:59:11,440 --> 32:59:15,911
so that's where test flight
39081
32:59:14,080 --> 32:59:18,080
now that we're talking all about all
39082
32:59:15,911 --> 32:59:20,232
these let's just also make sure that we
39083
32:59:18,080 --> 32:59:21,279
know we have a little bit of a security
39084
32:59:21,279 --> 32:59:27,592
um we haven't really talked about it so
39085
32:59:23,911 --> 32:59:30,399
much yet but i i built this um with uh
39086
32:59:27,592 --> 32:59:32,872
uh in swedish you say midfield and that
39087
32:59:30,399 --> 32:59:35,360
is like intentionally intentionally i
39088
32:59:32,872 --> 32:59:37,360
built this into this course so you'll
39089
32:59:35,360 --> 32:59:38,399
see how the resubmission process also
39090
32:59:38,399 --> 32:59:43,279
if if we bring our code let's let's
39091
32:59:41,039 --> 32:59:45,511
bring our mynotes code in here
39092
32:59:45,512 --> 32:59:50,320
um i believe was one of our services
39093
32:59:51,191 --> 32:59:55,191
no service is completely oh because that
39094
32:59:55,191 --> 32:59:59,911
let's have a look at the service and
39095
32:59:59,911 --> 33:00:05,119
crowd cloud storage cloud firebase cloud
39096
33:00:03,440 --> 33:00:07,760
storage it's called okay i'd forgotten
39097
33:00:05,119 --> 33:00:10,399
the name and we had this little all
39098
33:00:10,399 --> 33:00:16,079
so what this all field at the moment is
39099
33:00:12,960 --> 33:00:17,680
doing is saying that go get all the
39100
33:00:17,679 --> 33:00:23,511
all the notes in the notes collection
39101
33:00:20,800 --> 33:00:25,911
so that's doing that and then from all
39102
33:00:23,512 --> 33:00:27,512
the notes remember all the notes not
39103
33:00:27,512 --> 33:00:33,760
it's taking and creating a cloud note
39104
33:00:30,720 --> 33:00:37,040
and then it's filtering them out by who
39105
33:00:33,759 --> 33:00:38,000
you are that is a huge security problem
39106
33:00:38,000 --> 33:00:41,831
by doing this subscription and getting
39107
33:00:40,232 --> 33:00:44,160
this stream you're pretty much reading
39108
33:00:41,831 --> 33:00:46,319
everyone else's notes as well what we
39109
33:00:44,160 --> 33:00:48,400
want soon we're gonna fix that don't
39110
33:00:46,320 --> 33:00:51,120
worry about it what we want is to not
39111
33:00:48,399 --> 33:00:53,360
even allow any user to read someone
39112
33:00:51,119 --> 33:00:54,871
else's notes okay and then we're going
39113
33:00:54,872 --> 33:00:58,872
implementation of all notes and resubmit
39114
33:00:59,592 --> 33:01:03,120
i didn't want us to submit an app to
39115
33:01:01,592 --> 33:01:05,040
apple and then to google and then have
39116
33:01:03,119 --> 33:01:06,799
to resubmit it in both platforms because
39117
33:01:05,039 --> 33:01:08,479
as i said planned this so i just wanted
39118
33:01:06,800 --> 33:01:10,639
us to submit something only to one
39119
33:01:08,479 --> 33:01:12,551
platform and then draw it back and then
39120
33:01:10,639 --> 33:01:14,399
send it again but don't worry about this
39121
33:01:12,551 --> 33:01:16,800
yet i'm just giving you some preparation
39122
33:01:18,000 --> 33:01:21,271
what we need to do now first is to as
39123
33:01:20,160 --> 33:01:23,040
the caption at the bottom of the screen
39124
33:01:21,271 --> 33:01:25,759
in the case we need to install test
39125
33:01:23,039 --> 33:01:28,479
flight for both ios and you also have to
39126
33:01:28,479 --> 33:01:33,440
your mac on on the mac you can just go
39127
33:01:30,960 --> 33:01:36,639
to app store on your macintosh so app
39128
33:01:33,440 --> 33:01:38,232
store app and then search for test
39129
33:01:39,119 --> 33:01:42,959
search for test flight you can install
39130
33:01:41,119 --> 33:01:44,720
it with this install button i have it
39131
33:01:42,960 --> 33:01:46,552
installed already on my computer so i
39132
33:01:44,720 --> 33:01:48,160
don't see a install button in here i can
39133
33:01:48,160 --> 33:01:54,160
and after you've done that um for your
39134
33:01:50,639 --> 33:01:55,679
macintosh you'll also need to install it
39135
33:01:58,399 --> 33:02:03,591
i actually have my iphone my little
39136
33:02:06,000 --> 33:02:09,831
mirroring that iphone here on the screen
39137
33:02:08,320 --> 33:02:11,272
as you can see so what you can see on
39138
33:02:09,831 --> 33:02:12,551
the screen is actually my iphone right
39139
33:02:12,551 --> 33:02:17,271
and test flight is an application which
39140
33:02:15,039 --> 33:02:19,511
is available right here so this is the
39141
33:02:17,271 --> 33:02:20,800
test flight application on ios so at the
39142
33:02:19,512 --> 33:02:23,440
moment you can see that i don't have
39143
33:02:20,800 --> 33:02:26,160
access to my nodes application but we're
39144
33:02:23,440 --> 33:02:28,800
going to fix that soon or my awesome
39145
33:02:28,800 --> 33:02:32,160
so let's go ahead in here and have a
39146
33:02:30,800 --> 33:02:34,232
look at the next thing we need to talk
39147
33:02:32,160 --> 33:02:38,800
about and that's adding a user to to
39148
33:02:34,232 --> 33:02:39,512
test light so how do i get access to um
39149
33:02:39,512 --> 33:02:44,160
this build that we've submitted so that
39150
33:02:41,831 --> 33:02:47,039
i can test it with test flight well the
39151
33:02:44,160 --> 33:02:48,872
user that i've used for testing in here
39152
33:02:50,551 --> 33:02:56,800
gmail.com so what i'm going to do now is
39153
33:02:53,679 --> 33:02:58,479
to invite that user to test this build
39154
33:02:56,800 --> 33:03:00,000
so let's go to internal testing and
39155
33:02:58,479 --> 33:03:03,512
press the plus button and in here i'm
39156
33:03:00,000 --> 33:03:05,440
just going to say my users okay
39157
33:03:03,512 --> 33:03:07,911
and then press the create button
39158
33:03:05,440 --> 33:03:10,232
and in here you'll see a plus button
39159
33:03:07,911 --> 33:03:12,399
tester 0 and i'm just going to say plus
39160
33:03:10,232 --> 33:03:14,000
and in here i'm just going to use a
39161
33:03:12,399 --> 33:03:15,360
pixel to switch so i'm just going to say
39162
33:03:15,360 --> 33:03:20,000
okay and it says one tester has been
39163
33:03:17,679 --> 33:03:22,079
added to this group and that's pretty
39164
33:03:20,000 --> 33:03:23,440
much it so i don't have to do anything
39165
33:03:23,440 --> 33:03:29,592
so what i'm gonna do then is going to
39166
33:03:25,440 --> 33:03:31,911
wait for um an email to be sent by app
39167
33:03:29,592 --> 33:03:33,512
store connect to my user and it's just
39168
33:03:31,911 --> 33:03:35,039
been sent i'm gonna open it so you can
39169
33:03:33,512 --> 33:03:37,191
also see it how it looks like here's the
39170
33:03:35,039 --> 33:03:39,119
email that i just received so app store
39171
33:03:37,191 --> 33:03:41,591
connect is telling me that hey you've
39172
33:03:39,119 --> 33:03:43,271
now been invited to and test this
39173
33:03:41,592 --> 33:03:45,592
application and you can just go ahead
39174
33:03:43,271 --> 33:03:47,360
and do it so i'm just gonna tap on view
39175
33:03:45,592 --> 33:03:50,552
in test flight and this is just gonna
39176
33:03:47,360 --> 33:03:53,119
work because i already have um
39177
33:03:50,551 --> 33:03:55,759
basically a test light installed on my
39178
33:03:53,119 --> 33:03:57,679
macintosh so let me just tap on that and
39179
33:03:55,759 --> 33:03:59,360
i can see test flight open on a separate
39180
33:03:57,679 --> 33:04:04,679
screen i'll bring it to the screen here
39181
33:03:59,360 --> 33:04:04,680
and i can accept in basically installing
39182
33:04:05,440 --> 33:04:09,832
this application so as the bottom
39183
33:04:08,080 --> 33:04:11,592
as the bottom captioning indicates we've
39184
33:04:09,831 --> 33:04:14,080
already looked at the email
39185
33:04:11,592 --> 33:04:16,960
it looked like this and now we're going
39186
33:04:14,080 --> 33:04:18,400
to install this application which is a
39187
33:04:18,399 --> 33:04:22,231
but we're installing it on a macintosh
39188
33:04:20,232 --> 33:04:24,720
and that's just great so let's just
39189
33:04:22,232 --> 33:04:26,872
accept this and you can see now i can
39190
33:04:24,720 --> 33:04:28,720
either say install or done so i'm just
39191
33:04:26,872 --> 33:04:30,479
gonna say done so you see it so this is
39192
33:04:28,720 --> 33:04:32,872
our application here and i'm just gonna
39193
33:04:30,479 --> 33:04:34,800
press the install button and this is
39194
33:04:32,872 --> 33:04:38,872
just gonna go to app store connect and
39195
33:04:34,800 --> 33:04:41,592
grab that binary and bring it down
39196
33:04:38,872 --> 33:04:44,160
so and i can just press the open button
39197
33:04:41,592 --> 33:04:47,120
and if everything goes well this is our
39198
33:04:44,160 --> 33:04:48,720
flutter application running on this
39199
33:04:48,720 --> 33:04:52,639
but it is an ios app we didn't actually
39200
33:04:51,271 --> 33:04:54,639
compile this to be running on a
39201
33:04:52,639 --> 33:04:58,479
macintosh so everything is just working
39202
33:04:54,639 --> 33:04:58,479
as it should i can even log in here
39203
33:05:01,512 --> 33:05:05,360
and then in here it's a foo bar bass
39204
33:05:05,360 --> 33:05:09,360
and i can see my note so it's working as
39205
33:05:08,000 --> 33:05:12,080
expected so i'm just going to close the
39206
33:05:13,271 --> 33:05:17,360
what we need to do now is to submit this
39207
33:05:15,360 --> 33:05:18,720
build we've looked at it it seems to be
39208
33:05:17,360 --> 33:05:20,479
working fine so i'm just going to close
39209
33:05:18,720 --> 33:05:22,551
test flight here and close this email
39210
33:05:20,479 --> 33:05:24,399
let's then go to app store connect and
39211
33:05:22,551 --> 33:05:27,440
let's go to this app store section in
39212
33:05:24,399 --> 33:05:29,511
here and in this ios app section here
39213
33:05:27,440 --> 33:05:32,400
1.0 prepare for submission let's scroll
39214
33:05:29,512 --> 33:05:34,160
down to the place that says build and we
39215
33:05:32,399 --> 33:05:36,720
need to then say select a build before
39216
33:05:34,160 --> 33:05:38,480
you submit your app okay now
39217
33:05:38,479 --> 33:05:42,872
if you don't see this blue button in
39218
33:05:40,232 --> 33:05:45,120
here that's because you've probably just
39219
33:05:42,872 --> 33:05:46,960
submitted your bill to apple
39220
33:05:45,119 --> 33:05:49,191
apple usually takes up to 30 minutes or
39221
33:05:46,960 --> 33:05:51,680
sometimes even more to validate your
39222
33:05:49,191 --> 33:05:53,440
build so they may not have even appeared
39223
33:05:51,679 --> 33:05:54,639
in here especially if it's the first
39224
33:05:54,639 --> 33:05:59,191
sending to apple it may take a while for
39225
33:05:56,800 --> 33:06:01,592
them to process it so you may not see
39226
33:05:59,191 --> 33:06:04,399
this button simply because there is no
39227
33:06:01,592 --> 33:06:06,320
valid build yet but you can test you can
39228
33:06:04,399 --> 33:06:08,399
check the status of your builds by just
39229
33:06:06,320 --> 33:06:10,160
going to this test flight section and
39230
33:06:08,399 --> 33:06:13,191
just having a look at the version that
39231
33:06:10,160 --> 33:06:15,120
you've submitted and if there is if that
39232
33:06:13,191 --> 33:06:17,759
build is still processing it will just
39233
33:06:15,119 --> 33:06:19,512
say uh paranthesis processing and the
39234
33:06:17,759 --> 33:06:21,759
icon will just be a little bit grayed
39235
33:06:19,512 --> 33:06:23,119
out okay so don't worry it's not there's
39236
33:06:21,759 --> 33:06:24,479
nothing wrong you just have to wait a
39237
33:06:24,479 --> 33:06:27,759
so in here i'm just going to say select
39238
33:06:26,232 --> 33:06:29,592
a bill before you submit your app and
39239
33:06:27,759 --> 33:06:32,080
then say one that build that i'd
39240
33:06:29,592 --> 33:06:35,592
submitted all right so and then i'm just
39241
33:06:32,080 --> 33:06:37,592
gonna press the save button
39242
33:06:37,592 --> 33:06:42,552
build so age rating in app store connect
39243
33:06:40,479 --> 33:06:44,231
go to app information and fill in age
39244
33:06:42,551 --> 33:06:46,319
rating and i believe we've already done
39245
33:06:44,232 --> 33:06:48,232
this so if if you've not done that
39246
33:06:46,320 --> 33:06:49,680
before please go ahead and take care of
39247
33:06:48,232 --> 33:06:51,911
that but i explained this in one of the
39248
33:06:49,679 --> 33:06:53,831
previous chapters so you may have to go
39249
33:06:51,911 --> 33:06:56,399
and edit your age rating if you want to
39250
33:06:53,831 --> 33:06:57,759
but if you have followed the chapters
39251
33:06:56,399 --> 33:06:58,639
chronologically you should have done
39252
33:07:02,800 --> 33:07:06,960
we also need to take care of our app
39253
33:07:04,800 --> 33:07:07,911
privacy so we need to go to app privacy
39254
33:07:06,960 --> 33:07:10,000
as the caption at the bottom of the
39255
33:07:07,911 --> 33:07:11,191
screen indicates and here we have to get
39256
33:07:14,872 --> 33:07:19,120
as you can see in here if you have an
39257
33:07:16,720 --> 33:07:20,800
application that collects a lot of data
39258
33:07:19,119 --> 33:07:22,720
you i don't want to scare you but you
39259
33:07:20,800 --> 33:07:25,760
may kind of be in trouble because you
39260
33:07:22,720 --> 33:07:27,911
will have to inform apple about all
39261
33:07:25,759 --> 33:07:29,271
those things what you're collecting from
39262
33:07:29,271 --> 33:07:34,720
so let's let's in here let's say do you
39263
33:07:31,831 --> 33:07:36,639
or third party partners collect data
39264
33:07:34,720 --> 33:07:38,232
from this app then we should say yes in
39265
33:07:36,639 --> 33:07:40,232
here right because we are collecting
39266
33:07:40,232 --> 33:07:47,680
the user's for instance email address
39267
33:07:43,440 --> 33:07:49,592
password and notes so let's just say yes
39268
33:07:47,679 --> 33:07:51,591
in here's a data types that meet all of
39269
33:07:49,592 --> 33:07:53,832
the following criteria are optional to
39270
33:07:51,592 --> 33:07:54,872
disclosure the data is not used for
39271
33:07:54,872 --> 33:07:58,551
we're not using it for tracking the data
39272
33:07:56,551 --> 33:08:00,479
is not used for third party we're not
39273
33:07:58,551 --> 33:08:03,039
doing that collection of data occurs
39274
33:08:00,479 --> 33:08:04,479
only in infrequent cases okay so we
39275
33:08:04,479 --> 33:08:08,479
doing any of those tracking stuff that
39276
33:08:08,479 --> 33:08:11,831
let's go in here and say data collection
39277
33:08:10,080 --> 33:08:13,040
yeah we're collecting your email address
39278
33:08:14,232 --> 33:08:18,639
we're not collecting any financial
39279
33:08:21,119 --> 33:08:27,591
photos audio gameplay none of that
39280
33:08:24,232 --> 33:08:30,552
any other user generated contents yes
39281
33:08:27,592 --> 33:08:32,480
browsing history no search history no
39282
33:08:32,479 --> 33:08:37,039
screen name handle account id
39283
33:08:40,000 --> 33:08:43,679
diagnosis crash data we're not doing
39284
33:08:43,679 --> 33:08:47,679
and other data so yeah this seems fine
39285
33:08:46,080 --> 33:08:50,320
so for now we can just say identifier to
39286
33:08:47,679 --> 33:08:51,831
user id we also said other user content
39287
33:08:50,320 --> 33:08:54,000
because we're collecting the users
39288
33:08:51,831 --> 33:08:55,439
generated notes and we're also
39289
33:08:54,000 --> 33:08:57,592
collecting their email address so let's
39290
33:08:57,592 --> 33:09:02,232
okay and it says additional setup
39291
33:08:58,960 --> 33:09:04,400
required so let's go ahead and fix those
39292
33:09:02,232 --> 33:09:05,512
now in email address let's go set up
39293
33:09:04,399 --> 33:09:07,511
email address so i'm going to click
39294
33:09:05,512 --> 33:09:08,720
there and are we using it for third
39295
33:09:08,720 --> 33:09:14,232
developer advertising no analytics no
39296
33:09:14,232 --> 33:09:19,592
customizing what the user sees such as a
39297
33:09:16,720 --> 33:09:22,000
list of recommended products for no
39298
33:09:19,592 --> 33:09:24,080
app functionality yes that's what we're
39299
33:09:24,080 --> 33:09:27,360
and are the email addresses collected
39300
33:09:25,759 --> 33:09:28,959
from this app linked to the user's
39301
33:09:28,960 --> 33:09:35,040
link to the yes email address collector
39302
33:09:32,320 --> 33:09:36,552
link to the user's identity
39303
33:09:35,039 --> 33:09:38,399
are there i mean this is this is a
39304
33:09:36,551 --> 33:09:39,440
little bit of a legal question so i'm
39305
33:09:42,479 --> 33:09:47,119
answer this but i mean an email isn't
39306
33:09:45,039 --> 33:09:49,439
necessarily connected to someone's
39307
33:09:47,119 --> 33:09:51,271
identity as a person because i can just
39308
33:09:49,440 --> 33:09:53,360
go create like a private email and no
39309
33:09:51,271 --> 33:09:54,800
one knows about so i'm just gonna answer
39310
33:10:02,399 --> 33:10:05,911
doesn't seem like okay do you or
39311
33:10:04,160 --> 33:10:09,120
third-party partners use email addresses
39312
33:10:05,911 --> 33:10:11,679
for tracking purposes nope okay
39313
33:10:11,679 --> 33:10:15,759
the email address stuff is saved now
39314
33:10:14,000 --> 33:10:18,479
let's go to other user content which is
39315
33:10:15,759 --> 33:10:20,551
the user generated notes okay so
39316
33:10:18,479 --> 33:10:23,191
indicate how other user content
39317
33:10:20,551 --> 33:10:25,512
collected from this app is being used
39318
33:10:23,191 --> 33:10:28,319
um advertising no analytics no
39319
33:10:25,512 --> 33:10:29,271
customization no and app functionality
39320
33:10:29,271 --> 33:10:32,872
so let's then go and say is user content
39321
33:10:31,759 --> 33:10:34,551
collected from the sub link to the
39322
33:10:34,551 --> 33:10:39,191
they're used they're linked to the
39323
33:10:36,800 --> 33:10:40,960
user's email and since we said email is
39324
33:10:39,191 --> 33:10:44,000
not linked to the user's identity i'm
39325
33:10:40,960 --> 33:10:46,400
just gonna reason to say no in here
39326
33:10:44,000 --> 33:10:50,000
do you or third-party partners use other
39327
33:10:46,399 --> 33:10:52,720
user content for tracking purposes nope
39328
33:10:50,000 --> 33:10:54,720
okay so that part is done as well then
39329
33:10:52,720 --> 33:10:56,320
let's go to identifiers for user id so
39330
33:10:54,720 --> 33:10:59,271
i'm just going to click there
39331
33:10:56,320 --> 33:11:02,000
and remember user id in here is that uid
39332
33:10:59,271 --> 33:11:03,592
that firebase creates okay remember that
39333
33:11:06,080 --> 33:11:10,872
are the user ids collected from this app
39334
33:11:08,551 --> 33:11:12,800
linked to the user's identity
39335
33:11:15,039 --> 33:11:19,360
i would say yes it is quite obvious so
39336
33:11:19,360 --> 33:11:24,960
do you or third party partners use user
39337
33:11:21,592 --> 33:11:26,080
ids for tracking purposes nope
39338
33:11:26,080 --> 33:11:30,639
all right so saved and that's that now
39339
33:11:28,639 --> 33:11:32,551
you've gone through the privacy policy
39340
33:11:35,831 --> 33:11:41,271
display this to users when they try to
39341
33:11:39,119 --> 33:11:43,440
download your application this is very
39342
33:11:41,271 --> 33:11:45,592
important that you fill in to the best
39343
33:11:43,440 --> 33:11:48,000
of your knowledge and ability this is
39344
33:11:45,592 --> 33:11:50,160
not the place that you go and fake
39345
33:11:48,000 --> 33:11:51,759
anything and say try to hide the
39346
33:11:50,160 --> 33:11:54,080
information that you're collecting from
39347
33:11:51,759 --> 33:11:55,759
the users it is in the in your best
39348
33:11:54,080 --> 33:11:58,551
interest in your product's best interest
39349
33:11:55,759 --> 33:12:02,231
and in your company's best interest to
39350
33:11:58,551 --> 33:12:05,039
make sure that you fill these in as best
39351
33:12:02,232 --> 33:12:07,120
as you can okay usually in bigger
39352
33:12:05,039 --> 33:12:10,079
companies you'd want to probably um
39353
33:12:07,119 --> 33:12:12,720
consult with a lawyer or somebody who's
39354
33:12:10,080 --> 33:12:14,551
um good at making sure you're not
39355
33:12:12,720 --> 33:12:16,080
missing anything so in a big company you
39356
33:12:14,551 --> 33:12:18,319
usually don't do this on your own but
39357
33:12:16,080 --> 33:12:20,320
since we're now assuming that you're a
39358
33:12:18,320 --> 33:12:22,320
simple like a single entity even if
39359
33:12:20,320 --> 33:12:24,000
you're behind an organization like me
39360
33:12:22,320 --> 33:12:28,480
but you're a single entity and trying to
39361
33:12:24,000 --> 33:12:30,479
do this to the best of your ability okay
39362
33:12:28,479 --> 33:12:33,039
so now what we need to do is also fill
39363
33:12:33,039 --> 33:12:38,719
let's see here privacy policy so
39364
33:12:36,800 --> 33:12:40,720
what this is as you can see in here a
39365
33:12:38,720 --> 33:12:43,119
url that links to the privacy policy
39366
33:12:40,720 --> 33:12:44,479
privacy policy is required for all apps
39367
33:12:43,119 --> 33:12:46,399
and as you can see at the bottom of the
39368
33:12:44,479 --> 33:12:48,959
screen i've actually included a little
39369
33:12:46,399 --> 33:12:52,479
privacy policy for my own website and
39370
33:12:48,960 --> 33:12:55,680
i've included that let's see
39371
33:12:55,679 --> 33:12:58,959
let's see if i can do it on a separate
39372
33:12:57,271 --> 33:13:01,360
window so you don't have to be bothered
39373
33:13:03,759 --> 33:13:10,319
because i've actually included that um
39374
33:13:08,320 --> 33:13:12,080
you know what i will actually do it on a
39375
33:13:10,320 --> 33:13:16,000
separate screen so you don't have to be
39376
33:13:21,512 --> 33:13:24,872
i'll go to my hosting website and i'll
39377
33:13:23,271 --> 33:13:27,271
take care of that and then i'll bring it
39378
33:13:24,872 --> 33:13:29,271
to the screen so you can actually see it
39379
33:13:29,271 --> 33:13:34,720
let's see if i can go to my hosting in
39380
33:13:39,119 --> 33:13:43,911
well all my file files are residing
39381
33:13:43,911 --> 33:13:48,399
and i'll bring it in here so let's have
39382
33:13:46,320 --> 33:13:49,360
a look at this url that i provided at
39383
33:13:48,399 --> 33:13:51,511
the bottom of the screen you can see
39384
33:13:49,360 --> 33:13:52,639
pixel dsc privacy policy so i'm going to
39385
33:13:52,639 --> 33:13:56,080
dub dub up there and i have a look at
39386
33:13:54,479 --> 33:13:58,872
this text file which is right there
39387
33:13:56,080 --> 33:14:01,680
privacy policy so if i type pixelity
39388
33:13:58,872 --> 33:14:04,160
excuse me privacy policy you see that
39389
33:14:01,679 --> 33:14:06,479
there is a generic privacy policy that
39390
33:14:06,479 --> 33:14:09,759
and you will need to do the same thing
39391
33:14:08,160 --> 33:14:12,480
so you'll need to basically grab a
39392
33:14:09,759 --> 33:14:14,000
privacy policy from somewhere and look
39393
33:14:12,479 --> 33:14:17,119
at that privacy policy and make sure
39394
33:14:14,000 --> 33:14:18,639
that it works for you so what i did is i
39395
33:14:18,639 --> 33:14:22,960
and i'm not just going to go advertising
39396
33:14:20,479 --> 33:14:25,911
here but you can find free privacy
39397
33:14:22,960 --> 33:14:28,480
policy written by a very good and smart
39398
33:14:25,911 --> 33:14:30,319
people and you can have a look at those
39399
33:14:28,479 --> 33:14:32,551
adjust them to make sure that they make
39400
33:14:30,320 --> 33:14:34,080
sense for you and your company and for
39401
33:14:32,551 --> 33:14:36,080
instance in here i've just taken a
39402
33:14:36,080 --> 33:14:40,800
let's see if i can find it here
39403
33:14:38,872 --> 33:14:43,120
so i put my company name in there and i
39404
33:14:40,800 --> 33:14:45,360
just ensure that it makes sense for my
39405
33:14:43,119 --> 33:14:47,191
company and i've just basically put it
39406
33:14:45,360 --> 33:14:48,960
inside that url that you can see at the
39407
33:14:47,191 --> 33:14:50,871
bottom of the screen so i'm going to go
39408
33:14:48,960 --> 33:14:53,192
in here at privacy and app store connect
39409
33:14:50,872 --> 33:14:54,800
and say privacy policy edit and in the
39410
33:14:53,191 --> 33:14:57,271
privacy policy url i'm just going to say
39411
33:14:57,271 --> 33:15:01,639
dot se and then i'm just going to say
39412
33:15:01,639 --> 33:15:05,911
policy.txt but for you this should be
39413
33:15:03,679 --> 33:15:07,679
something else okay and i'm just going
39414
33:15:05,911 --> 33:15:09,679
to copy that open it and make sure that
39415
33:15:07,679 --> 33:15:12,231
it exists and then i'm going to press
39416
33:15:12,232 --> 33:15:17,911
so after we've done that we also need to
39417
33:15:14,639 --> 33:15:20,319
make sure that we've taken care of our
39418
33:15:17,911 --> 33:15:22,800
categories the categories to which our
39419
33:15:20,320 --> 33:15:24,080
application belongs so let's go to app
39420
33:15:22,800 --> 33:15:26,000
information at the bottom of the screen
39421
33:15:24,080 --> 33:15:27,512
indicates i'm going here in the category
39422
33:15:26,000 --> 33:15:30,000
and the primary category we're going to
39423
33:15:27,512 --> 33:15:33,271
say our app belongs to productivity and
39424
33:15:30,000 --> 33:15:36,232
then it belongs to utilities okay
39425
33:15:33,271 --> 33:15:39,271
here utilities all right then i'm gonna
39426
33:15:39,360 --> 33:15:44,080
okay then what we need to also do before
39427
33:15:41,831 --> 33:15:46,551
we submit our app for review is that
39428
33:15:44,080 --> 33:15:50,000
just remember this application is going
39429
33:15:46,551 --> 33:15:52,080
to be reviewed by an actual human so
39430
33:15:50,000 --> 33:15:54,320
this person is literally going to get
39431
33:15:52,080 --> 33:15:55,759
this information in the queue of their
39432
33:15:54,320 --> 33:15:57,360
work they're going to say oh an
39433
33:15:55,759 --> 33:15:59,591
application called my awesome notes
39434
33:15:59,592 --> 33:16:01,912
and then they're going to say okay
39435
33:16:00,639 --> 33:16:03,191
they're going to have some control panel
39436
33:16:01,911 --> 33:16:06,080
on their screen i don't know really how
39437
33:16:03,191 --> 33:16:07,679
it's formed on apple's site but they're
39438
33:16:06,080 --> 33:16:10,400
going to then download this application
39439
33:16:07,679 --> 33:16:12,079
on various devices automatically perhaps
39440
33:16:10,399 --> 33:16:14,231
and then they're gonna open the app and
39441
33:16:12,080 --> 33:16:15,191
then like how am i supposed to use this
39442
33:16:15,191 --> 33:16:19,360
it is in your best interest to ensure
39443
33:16:17,440 --> 33:16:22,160
that you provide all information
39444
33:16:19,360 --> 33:16:24,232
possible to that person so that they can
39445
33:16:22,160 --> 33:16:27,040
review your application so what you need
39446
33:16:24,232 --> 33:16:28,960
to do then is to go inside app
39447
33:16:27,039 --> 33:16:31,831
here prepare for submission in here app
39448
33:16:28,960 --> 33:16:33,680
review information and then under notes
39449
33:16:33,679 --> 33:16:38,159
what your how your application works and
39450
33:16:36,232 --> 33:16:40,480
how they need to register so in here
39451
33:16:38,160 --> 33:16:42,400
what we're going to say is um
39452
33:16:49,119 --> 33:16:55,591
steps to register now i'm gonna say um
39453
33:16:51,911 --> 33:16:58,160
open the register view and register
39454
33:16:58,160 --> 33:17:04,160
and password of your choosing
39455
33:17:04,160 --> 33:17:12,552
wait for a confirmation email
39456
33:17:09,191 --> 33:17:16,479
wait for a confirmation email from
39457
33:17:12,551 --> 33:17:20,000
to be to be sent to your email address
39458
33:17:21,759 --> 33:17:25,831
on the link to confirm your email
39459
33:17:25,831 --> 33:17:33,679
okay and then step three is go back
39460
33:17:29,360 --> 33:17:34,831
to the app and in the login screen
39461
33:17:43,119 --> 33:17:46,799
we've done that now so i'm gonna
39462
33:17:44,800 --> 33:17:48,232
actually then provide a valid phone
39463
33:17:46,800 --> 33:17:50,400
number in here and since i don't want to
39464
33:17:48,232 --> 33:17:52,160
really share my like phone number
39465
33:17:50,399 --> 33:17:53,119
everywhere on the internet i'm just
39466
33:17:53,119 --> 33:17:58,399
go on to a separate screen here and
39467
33:17:55,679 --> 33:18:00,639
write my valid phone number in here
39468
33:18:00,639 --> 33:18:05,512
but that's my phone number great and
39469
33:18:05,512 --> 33:18:08,872
go here and then i'm going to press save
39470
33:18:08,872 --> 33:18:13,192
and then bring the screen here perfect
39471
33:18:11,191 --> 33:18:15,119
so now i've saved that information
39472
33:18:13,191 --> 33:18:17,512
including my phone number and everything
39473
33:18:15,119 --> 33:18:20,319
should be ready at this point
39474
33:18:17,512 --> 33:18:22,160
so what you need to do then is to
39475
33:18:20,320 --> 33:18:23,760
go and grab some popcorn while you're
39476
33:18:22,160 --> 33:18:26,552
doing this hopefully and then you'll
39477
33:18:23,759 --> 33:18:27,591
just need to say submit for review
39478
33:18:27,592 --> 33:18:31,592
it says the items below need to be okay
39479
33:18:29,592 --> 33:18:33,832
we haven't really done the price pricing
39480
33:18:31,592 --> 33:18:35,360
and then it saw it says an admin must
39481
33:18:33,831 --> 33:18:37,831
provide information about the app's
39482
33:18:35,360 --> 33:18:39,831
privacy practices in app privacy section
39483
33:18:37,831 --> 33:18:42,080
it seems like we missed some stuff so
39484
33:18:39,831 --> 33:18:44,000
let's go to pricing and availability and
39485
33:18:42,080 --> 33:18:45,759
fix that this application is going to be
39486
33:18:44,000 --> 33:18:47,592
free so i'm just going to say it doesn't
39487
33:18:45,759 --> 33:18:49,039
cost anything and save that so that's
39488
33:18:49,039 --> 33:18:52,719
and let's go to app privacy and see if
39489
33:18:51,119 --> 33:18:54,399
we've actually missed anything doesn't
39490
33:18:52,720 --> 33:18:56,399
seem like it but what we've forgotten is
39491
33:18:54,399 --> 33:18:58,551
to actually press the publish button so
39492
33:18:58,551 --> 33:19:03,591
okay then we go back in here and then we
39493
33:19:03,831 --> 33:19:09,911
that's great so now your application is
39494
33:19:07,039 --> 33:19:11,831
submitted to app store and a reviewer
39495
33:19:09,911 --> 33:19:13,759
from the app store connecting is going
39496
33:19:11,831 --> 33:19:15,831
to have a look at your application so
39497
33:19:15,831 --> 33:19:20,319
confirm that it works according to the
39498
33:19:18,232 --> 33:19:22,080
information that you've provided and i
39499
33:19:20,320 --> 33:19:24,552
can see that i actually got an email
39500
33:19:22,080 --> 33:19:26,479
from apple that looks like this and it
39501
33:19:24,551 --> 33:19:28,551
says the status of your application has
39502
33:19:26,479 --> 33:19:30,231
changed to waiting for review so it's
39503
33:19:30,232 --> 33:19:34,552
um but before before we actually do all
39504
33:19:34,551 --> 33:19:39,271
whether apple has had the time to review
39505
33:19:40,720 --> 33:19:45,512
or they found some bugs in it and
39506
33:19:45,512 --> 33:19:50,232
whichever case we need to draw back this
39507
33:19:48,320 --> 33:19:52,160
build and i will show you how in the
39508
33:19:50,232 --> 33:19:54,800
upcoming chapters because we have the
39509
33:19:52,160 --> 33:19:56,720
security bug that i told you about so
39510
33:19:54,800 --> 33:19:57,911
for now we can just be happy that we've
39511
33:19:56,720 --> 33:19:59,440
gone through this chapter we've done
39512
33:20:01,039 --> 33:20:06,639
pat yourself on the back just great job
39513
33:20:08,872 --> 33:20:12,960
and we can get start to actually get
39514
33:20:10,960 --> 33:20:14,480
ready for the next chapter and i'll tell
39515
33:20:12,960 --> 33:20:16,960
you actually what we need to talk about
39516
33:20:14,479 --> 33:20:18,720
in the next chapter and that is this
39517
33:20:18,720 --> 33:20:24,479
problem that we had in the all notes and
39518
33:20:21,679 --> 33:20:26,799
we need to fix this before we can go
39519
33:20:24,479 --> 33:20:28,399
live with android as well so
39520
33:20:26,800 --> 33:20:30,872
now you know what's coming in the
39521
33:20:30,872 --> 33:20:34,639
i'll see you there hello everyone and
39522
33:20:32,800 --> 33:20:37,271
welcome to chapter 49 of this flutter
39523
33:20:34,639 --> 33:20:40,000
course in previous chapters we've
39524
33:20:37,271 --> 33:20:41,759
submitted our application to um
39525
33:20:41,759 --> 33:20:45,271
we also briefly talked about the fact
39526
33:20:43,759 --> 33:20:47,911
that we have a little bit of a security
39527
33:20:45,271 --> 33:20:49,191
problem in our firebase firestore
39528
33:20:49,191 --> 33:20:54,080
so let's have a look at what the actual
39529
33:20:51,759 --> 33:20:55,679
problem is so i explained this briefly
39530
33:20:54,080 --> 33:20:57,680
in the previous chapters but i'll do it
39531
33:20:55,679 --> 33:21:00,159
again in here so let's have a look
39532
33:20:57,679 --> 33:21:02,079
um so if this is our code i'm going to
39533
33:21:00,160 --> 33:21:04,720
increase the size so we'll see it better
39534
33:21:02,080 --> 33:21:06,479
and you'll see that when we are working
39535
33:21:04,720 --> 33:21:09,191
with displaying all the notes on the
39536
33:21:06,479 --> 33:21:11,191
screen for a user so for instance user a
39537
33:21:09,191 --> 33:21:13,271
has signed into the application
39538
33:21:14,639 --> 33:21:18,872
if you go there we'll see that we're
39539
33:21:16,479 --> 33:21:20,720
subscribing to all nodes in here in our
39540
33:21:18,872 --> 33:21:23,360
stream builder so we're saying we're
39541
33:21:20,720 --> 33:21:25,680
basically building our entire list view
39542
33:21:23,360 --> 33:21:27,512
which is here now it's list view and
39543
33:21:25,679 --> 33:21:30,231
we're building it on top of the data
39544
33:21:27,512 --> 33:21:32,080
that comes from this all nodes function
39545
33:21:30,232 --> 33:21:34,800
which is at the moment inside our
39546
33:21:32,080 --> 33:21:37,191
firebase cloud storage okay
39547
33:21:34,800 --> 33:21:39,120
however if you look at this code you'll
39548
33:21:37,191 --> 33:21:41,512
see that what it is doing is referring
39549
33:21:41,512 --> 33:21:46,720
or this node's local variable and which
39550
33:21:44,399 --> 33:21:48,079
is right here and this notes at the
39551
33:21:48,080 --> 33:21:54,080
pointing to the notes collection
39552
33:21:50,800 --> 33:21:57,680
and what it does it literally takes all
39553
33:21:54,080 --> 33:21:59,911
the notes from the notes collection so
39554
33:21:57,679 --> 33:22:02,159
this look this essentially means any
39555
33:21:59,911 --> 33:22:04,720
user logged into our application is
39556
33:22:02,160 --> 33:22:06,320
truly retrieving all the nodes in the
39557
33:22:07,360 --> 33:22:11,759
at the end of that code what we're doing
39558
33:22:09,911 --> 33:22:14,080
is saying we're okay after we retrieve
39559
33:22:11,759 --> 33:22:16,551
all the nodes from the database
39560
33:22:14,080 --> 33:22:19,360
then we're mapping them here to cloud
39561
33:22:16,551 --> 33:22:20,231
nodes so we can consume them locally
39562
33:22:20,232 --> 33:22:25,120
right at the end we're saying hey but
39563
33:22:22,872 --> 33:22:26,960
we're only interested in notes that are
39564
33:22:27,679 --> 33:22:31,039
even though the current login user is
39565
33:22:29,440 --> 33:22:34,320
not going to see all the notes in the
39566
33:22:31,039 --> 33:22:36,639
database but the current user is reading
39567
33:22:34,320 --> 33:22:38,232
all the notes in the database and if you
39568
33:22:36,639 --> 33:22:40,720
perform a man in the middle attack for
39569
33:22:38,232 --> 33:22:43,440
instance if you're using charles proxy
39570
33:22:40,720 --> 33:22:45,831
on a computer and then you're
39571
33:22:43,440 --> 33:22:46,960
using your phone and you're using for
39572
33:22:45,831 --> 33:22:49,271
instance let's say you have charles
39573
33:22:46,960 --> 33:22:51,192
proxy on your computer and then you're
39574
33:22:49,271 --> 33:22:53,592
sharing your wi-fi connection from an
39575
33:22:51,191 --> 33:22:55,039
ethernet connection through wi-fi with
39576
33:22:53,592 --> 33:22:57,120
an iphone that is running your
39577
33:22:55,039 --> 33:22:58,719
application if i don't sit in the middle
39578
33:22:57,119 --> 33:23:00,231
with charles proxy and look at all the
39579
33:22:58,720 --> 33:23:02,479
traffic that's going from your flutter
39580
33:23:00,232 --> 33:23:05,040
application to firebase then i can
39581
33:23:02,479 --> 33:23:07,271
actually see you requesting information
39582
33:23:05,039 --> 33:23:09,911
about all those notes and then those
39583
33:23:07,271 --> 33:23:11,119
notes coming back to the application so
39584
33:23:09,911 --> 33:23:15,039
a man in the middle attack could
39585
33:23:11,119 --> 33:23:17,191
potentially then expose all data in our
39586
33:23:15,039 --> 33:23:18,639
database or in the notes collection at
39587
33:23:20,872 --> 33:23:26,960
what we're going to do is by is to start
39588
33:23:23,512 --> 33:23:28,551
by removing our application from app
39589
33:23:26,960 --> 33:23:30,320
store connect if you remember in the
39590
33:23:28,551 --> 33:23:33,191
previous chapters we sent our
39591
33:23:30,320 --> 33:23:35,192
application to apple for review and what
39592
33:23:33,191 --> 33:23:38,000
i've done in here i've developer
39593
33:23:35,191 --> 33:23:40,000
rejected this application essentially so
39594
33:23:38,000 --> 33:23:42,399
let me have a look and see if i can
39595
33:23:40,000 --> 33:23:44,080
increase the size of the screen so we
39596
33:23:42,399 --> 33:23:46,799
submitted our application to app store
39597
33:23:44,080 --> 33:23:49,191
connect for review from the apple um
39598
33:23:46,800 --> 33:23:51,271
team review team but right before it
39599
33:23:49,191 --> 33:23:53,119
actually went to review i refreshed the
39600
33:23:51,271 --> 33:23:55,360
screen in here and you didn't see this
39601
33:23:53,119 --> 33:23:57,440
but i said remove this application from
39602
33:23:55,360 --> 33:23:59,592
review if you remove your own
39603
33:23:57,440 --> 33:24:01,911
application from review basically it
39604
33:23:59,592 --> 33:24:04,552
will become this it will go to the state
39605
33:24:01,911 --> 33:24:06,720
developer rejected so this is basically
39606
33:24:04,551 --> 33:24:08,479
informing you that hey it's not apple
39607
33:24:06,720 --> 33:24:11,360
basically rejecting your application it
39608
33:24:08,479 --> 33:24:13,759
is you yourself who's done this so
39609
33:24:11,360 --> 33:24:14,551
so i can show you an example how
39610
33:24:14,551 --> 33:24:18,479
confirmation email from apple will look
39611
33:24:16,479 --> 33:24:20,231
like so i'll open it in a separate
39612
33:24:20,232 --> 33:24:24,400
and it kind of looks like this i'll
39613
33:24:22,080 --> 33:24:25,759
bring it to this main screen so you see
39614
33:24:26,720 --> 33:24:30,960
so there we go so then i received an
39615
33:24:29,119 --> 33:24:32,959
email from apple that said that status
39616
33:24:30,960 --> 33:24:36,400
of your app has changed to developer
39617
33:24:32,960 --> 33:24:38,080
rejected app name blah blah okay so
39618
33:24:36,399 --> 33:24:39,911
this is the email that you'll receive so
39619
33:24:38,080 --> 33:24:41,119
i need you to basically reject your
39620
33:24:41,119 --> 33:24:45,191
the version one zero that you sent to
39621
33:24:43,191 --> 33:24:47,039
apple because we have security problems
39622
33:24:45,191 --> 33:24:48,319
with that application okay and again
39623
33:24:47,039 --> 33:24:50,639
i've mentioned this in the previous
39624
33:24:48,320 --> 33:24:52,552
chapters i did this in on purpose so
39625
33:24:50,639 --> 33:24:53,679
that we can understand like someone
39626
33:24:52,551 --> 33:24:55,039
because this is the kind of stuff that
39627
33:24:53,679 --> 33:24:56,231
you're going to go through as a software
39628
33:24:55,039 --> 33:24:58,639
developer sometimes you're going to
39629
33:24:56,232 --> 33:25:00,872
submit something to apple or google and
39630
33:24:58,639 --> 33:25:03,119
then you understand you made a mistake
39631
33:25:00,872 --> 33:25:05,192
so how do you how do you fix that and i
39632
33:25:03,119 --> 33:25:07,039
really wanted this to be a part of this
39633
33:25:07,039 --> 33:25:10,871
course so you understand how you reject
39634
33:25:09,360 --> 33:25:12,320
your application how you fix the problem
39635
33:25:10,872 --> 33:25:14,160
and how you resubmit the application
39636
33:25:12,320 --> 33:25:16,552
okay but i didn't want to do it for both
39637
33:25:14,160 --> 33:25:18,552
ios and android because it just gets
39638
33:25:16,551 --> 33:25:20,000
boring if you have to submit first go
39639
33:25:18,551 --> 33:25:21,831
through the entire submission from two
39640
33:25:20,000 --> 33:25:23,592
platforms and then to submit again so
39641
33:25:21,831 --> 33:25:25,271
that's why we first submitted for ios
39642
33:25:23,592 --> 33:25:26,639
and then we're gonna fix it and then
39643
33:25:25,271 --> 33:25:28,479
once that's fixed we're also gonna
39644
33:25:28,479 --> 33:25:33,440
so after rejecting your application you
39645
33:25:31,119 --> 33:25:36,399
also need to basically remove your build
39646
33:25:33,440 --> 33:25:38,479
from this at 1.0 so i i believe i've
39647
33:25:36,399 --> 33:25:39,759
already done that oh no i haven't so
39648
33:25:38,479 --> 33:25:41,911
it's actually good i haven't done that
39649
33:25:39,759 --> 33:25:44,399
so let's go ahead and here in 1.0 and
39650
33:25:41,911 --> 33:25:45,831
just remove this build okay so we say we
39651
33:25:44,399 --> 33:25:48,720
don't want to submit anything and then
39652
33:25:49,831 --> 33:25:53,911
all right um and also as you can see at
39653
33:25:52,720 --> 33:25:58,160
the bottom of the screen we're going to
39654
33:25:53,911 --> 33:25:59,759
update this 1.0 version now to 1.1 so
39655
33:25:58,160 --> 33:26:01,911
let's go and see if he can find that
39656
33:26:01,911 --> 33:26:06,639
i also saw that i got an email from
39657
33:26:04,232 --> 33:26:07,911
apple and here says okay now it's
39658
33:26:06,639 --> 33:26:09,911
prepared for submission meaning that
39659
33:26:07,911 --> 33:26:12,479
it's not developed or rejected anymore
39660
33:26:09,911 --> 33:26:14,440
and let's just bump this version in here
39661
33:26:14,440 --> 33:26:19,592
0.0 okay and then i'm going to save it
39662
33:26:17,759 --> 33:26:22,231
well and here i mean this is kind of
39663
33:26:19,592 --> 33:26:24,720
like a it depends on your taste if you
39664
33:26:22,232 --> 33:26:27,192
want to resubmit 1.0 you're more than
39665
33:26:24,720 --> 33:26:29,831
welcome to do that but it's usually
39666
33:26:27,191 --> 33:26:32,639
if you change something in your code
39667
33:26:29,831 --> 33:26:34,871
then it is usual for you to go and
39668
33:26:34,872 --> 33:26:38,232
minor version and it's called so because
39669
33:26:36,551 --> 33:26:39,831
this first version is the major version
39670
33:26:38,232 --> 33:26:41,680
so if there's a huge future in the
39671
33:26:39,831 --> 33:26:44,399
application and this is the
39672
33:26:41,679 --> 33:26:46,159
minor version and here is a patch i mean
39673
33:26:44,399 --> 33:26:48,319
you could argue that we could i
39674
33:26:46,160 --> 33:26:50,720
essentially maybe change our application
39675
33:26:48,320 --> 33:26:53,832
version to one zero one because this is
39676
33:26:50,720 --> 33:26:56,232
a patch but i just choose to do one one
39677
33:26:56,232 --> 33:26:59,040
so let's go ahead and i'm assuming that
39678
33:26:58,000 --> 33:27:00,160
you're doing the same thing because
39679
33:26:59,039 --> 33:27:01,831
there's some information i'm gonna
39680
33:27:00,160 --> 33:27:03,832
provide to you a little bit later in
39681
33:27:01,831 --> 33:27:05,591
this chapter that relies on you having
39682
33:27:03,831 --> 33:27:07,591
actually changed your app version to one
39683
33:27:07,592 --> 33:27:12,000
so that's that part is done what we need
39684
33:27:10,000 --> 33:27:13,440
to do now is to go as a caption in case
39685
33:27:13,440 --> 33:27:19,360
all the notes and users in our firestore
39686
33:27:16,399 --> 33:27:21,679
database so let's go ahead and see if we
39687
33:27:21,679 --> 33:27:24,639
my notes flutter project so that's in
39688
33:27:24,639 --> 33:27:29,191
firebase console and i'm going to go
39689
33:27:27,271 --> 33:27:30,639
first to authentication to users there's
39690
33:27:29,191 --> 33:27:32,720
just one user in here i'm just going to
39691
33:27:30,639 --> 33:27:35,191
delete that account okay then i'm going
39692
33:27:32,720 --> 33:27:36,720
to go to firestore database and there's
39693
33:27:35,191 --> 33:27:38,551
probably two notes in the notes
39694
33:27:36,720 --> 33:27:41,360
collection and i'm going to delete them
39695
33:27:38,551 --> 33:27:43,512
as well so delete documents there and
39696
33:27:41,360 --> 33:27:45,831
then delete this document as well okay
39697
33:27:43,512 --> 33:27:48,872
so we have a clean slate no users and no
39698
33:27:48,872 --> 33:27:52,800
so you may be wondering well if we have
39699
33:27:51,191 --> 33:27:54,799
security problems with our database
39700
33:27:52,800 --> 33:27:56,872
shouldn't firebase be intelligent enough
39701
33:27:54,800 --> 33:27:58,400
to know that and firebase is actually
39702
33:27:56,872 --> 33:28:00,639
intelligent enough to know that and
39703
33:27:58,399 --> 33:28:02,479
sometimes you will receive emails from i
39704
33:28:00,639 --> 33:28:04,399
mean depending on the security holes in
39705
33:28:02,479 --> 33:28:06,720
your database you will receive emails
39706
33:28:04,399 --> 33:28:08,000
from at firebase telling you that hey
39707
33:28:06,720 --> 33:28:10,551
there is something wrong with your
39708
33:28:08,000 --> 33:28:13,119
security rules and i've prepared some
39709
33:28:10,551 --> 33:28:14,639
email that that kind of indicates that i
39710
33:28:13,119 --> 33:28:16,000
just wanted to show you how that kind of
39711
33:28:16,000 --> 33:28:20,160
so you can see if you have security
39712
33:28:17,911 --> 33:28:21,831
issues with your fire firebase and
39713
33:28:20,160 --> 33:28:23,192
firestore database you may receive
39714
33:28:21,831 --> 33:28:24,551
something like this you see it says
39715
33:28:23,191 --> 33:28:26,479
we've detected the following issues with
39716
33:28:24,551 --> 33:28:28,720
your security rules any user can read
39717
33:28:28,720 --> 33:28:33,191
it kind of looks like this okay so just
39718
33:28:31,119 --> 33:28:34,871
know that if you receive an email like
39719
33:28:33,191 --> 33:28:37,271
that then you know at least the reason
39720
33:28:37,271 --> 33:28:41,911
and if you're wondering more about like
39721
33:28:41,911 --> 33:28:44,720
how you have to configure them although
39722
33:28:43,512 --> 33:28:46,232
i'm going to tell you how we're going to
39723
33:28:44,720 --> 33:28:47,512
configure our security rules in this
39724
33:28:46,232 --> 33:28:49,832
chapter but if you're wondering how to
39725
33:28:47,512 --> 33:28:51,360
do that on your own and you're curious
39726
33:28:49,831 --> 33:28:53,119
about reading more about it i've
39727
33:28:51,360 --> 33:28:55,759
prepared a little link here so let me
39728
33:28:53,119 --> 33:28:57,440
see if i can actually bring it
39729
33:28:59,759 --> 33:29:03,439
a link and it kind of looks like this so
39730
33:29:01,679 --> 33:29:04,959
you see firebase google.com docs first
39731
33:29:06,639 --> 33:29:11,039
and so you can read about this and i did
39732
33:29:08,960 --> 33:29:12,639
that and i got a lot of inspiration from
39733
33:29:12,639 --> 33:29:17,360
fix our security uh problem in our
39734
33:29:15,360 --> 33:29:18,399
firestore database so i strongly suggest
39735
33:29:18,399 --> 33:29:22,871
documentation you don't have to do it
39736
33:29:20,320 --> 33:29:24,960
right now but please just at least um
39737
33:29:22,872 --> 33:29:27,360
bookmark this page so you can come back
39738
33:29:27,360 --> 33:29:32,720
okay so now to the point let's go and
39739
33:29:30,551 --> 33:29:35,831
fix our security issue in our firestore
39740
33:29:32,720 --> 33:29:37,271
database okay so i've also prepared here
39741
33:29:35,831 --> 33:29:39,439
how we have to actually do it and you
39742
33:29:37,271 --> 33:29:41,759
can see the let me actually bring up our
39743
33:29:39,440 --> 33:29:44,639
security rules so go to firestore
39744
33:29:41,759 --> 33:29:46,551
database tab in your firebase console
39745
33:29:44,639 --> 33:29:48,479
and then go to rules okay let's have a
39746
33:29:46,551 --> 33:29:50,319
look at all roles at the moment and how
39747
33:29:48,479 --> 33:29:52,159
they're set up so the way it's set up at
39748
33:29:50,320 --> 33:29:54,320
the moment you can see it says match any
39749
33:29:52,160 --> 33:29:56,480
database and any documents okay and
39750
33:29:54,320 --> 33:29:58,720
that's what we're doing here as well and
39751
33:29:56,479 --> 33:30:00,720
it says match any document in there so
39752
33:29:58,720 --> 33:30:02,320
at the moment we're allowing read and
39753
33:30:02,320 --> 33:30:08,960
authenticated so okay so let's just for
39754
33:30:05,440 --> 33:30:11,360
now say we are allowing create
39755
33:30:08,960 --> 33:30:13,832
if you're authenticated so we say you
39756
33:30:11,360 --> 33:30:15,360
should be able to create a node as long
39757
33:30:13,831 --> 33:30:17,119
as you're authenticated so let's say
39758
33:30:15,360 --> 33:30:19,680
create and you can see we get some help
39759
33:30:17,119 --> 33:30:21,759
from firebase as well in here okay
39760
33:30:19,679 --> 33:30:23,831
so that's that so creation and then we
39761
33:30:27,360 --> 33:30:30,399
okay and this is the rules that we're
39762
33:30:29,039 --> 33:30:33,119
going to write in here you can see read
39763
33:30:30,399 --> 33:30:34,799
update actually read update and delete
39764
33:30:34,800 --> 33:30:40,160
so read updates and delete and the way
39765
33:30:38,399 --> 33:30:42,551
we have to set it up is of course as you
39766
33:30:40,160 --> 33:30:44,960
can see in here what i preferred is we
39767
33:30:42,551 --> 33:30:47,191
first need to make sure anyone tries to
39768
33:30:44,960 --> 33:30:49,192
read from our database or update the
39769
33:30:47,191 --> 33:30:51,039
database or delete the document should
39770
33:30:51,039 --> 33:30:54,399
let's go in here and say okay if
39771
33:30:54,399 --> 33:30:58,959
we'll bring that code up here okay
39772
33:30:56,800 --> 33:31:01,192
but we're also going to add some more
39773
33:30:58,960 --> 33:31:03,440
information to it and the information
39774
33:31:01,191 --> 33:31:05,831
should like look like this you can see
39775
33:31:05,831 --> 33:31:11,759
you may be like okay but how do i know
39776
33:31:09,831 --> 33:31:14,399
because okay before i actually say that
39777
33:31:11,759 --> 33:31:16,871
what we want is for the currently
39778
33:31:16,872 --> 33:31:23,360
to only be able to access his or her
39779
33:31:19,831 --> 33:31:25,119
documents that have the same user id
39780
33:31:23,360 --> 33:31:28,551
remember in our code we have this user
39781
33:31:25,119 --> 33:31:31,191
id field let me bring it up here
39782
33:31:28,551 --> 33:31:33,191
so if you go to our storage here we have
39783
33:31:31,191 --> 33:31:36,871
these constants and we have this user id
39784
33:31:33,191 --> 33:31:39,271
field so every node that we store in our
39785
33:31:36,872 --> 33:31:42,400
firestore database has a user id field
39786
33:31:39,271 --> 33:31:45,592
so what we want in here is to basically
39787
33:31:42,399 --> 33:31:47,911
grab the user id from the request so if
39788
33:31:45,592 --> 33:31:50,480
you say in here request you'll see we
39789
33:31:47,911 --> 33:31:52,000
have off path resource so let's go off
39790
33:31:50,479 --> 33:31:54,551
and then you'll see there's something
39791
33:31:52,000 --> 33:31:57,360
called a uid and that is the user id
39792
33:31:54,551 --> 33:31:59,191
okay so if we have a look how we have to
39793
33:31:57,360 --> 33:32:01,360
actually do that so we're saying user
39794
33:31:59,191 --> 33:32:04,551
request rtu id should be equal to
39795
33:32:01,360 --> 33:32:07,440
resource data user id and this resource
39796
33:32:04,551 --> 33:32:09,360
is the current resource that the user is
39797
33:32:07,440 --> 33:32:11,040
trying to access okay and if you read
39798
33:32:09,360 --> 33:32:13,119
the documentation that i provided to you
39799
33:32:11,039 --> 33:32:14,551
earlier you'll you would know this so
39800
33:32:13,119 --> 33:32:17,119
let's go in here and say okay the
39801
33:32:14,551 --> 33:32:18,551
request auth uid should be equal to
39802
33:32:18,551 --> 33:32:24,319
beta dot user id because that's the
39803
33:32:21,119 --> 33:32:27,911
field that we provided um as you saw in
39804
33:32:24,320 --> 33:32:29,760
the code here so let's then um
39805
33:32:27,911 --> 33:32:31,759
yeah i think this is good to go so we
39806
33:32:29,759 --> 33:32:33,759
could then publish these changes and it
39807
33:32:31,759 --> 33:32:34,959
says publish changes can take up to a
39808
33:32:33,759 --> 33:32:36,720
minute to propagate and that's
39809
33:32:34,960 --> 33:32:38,639
completely fine because we're actually
39810
33:32:36,720 --> 33:32:39,831
going to take some time in order to
39811
33:32:39,831 --> 33:32:45,271
our code as well okay so that's our
39812
33:32:43,191 --> 33:32:46,799
security rule so let's just make sure
39813
33:32:45,271 --> 33:32:48,720
that they look like this and i'm gonna
39814
33:32:46,800 --> 33:32:50,872
actually bring it to two lines so you
39815
33:32:50,872 --> 33:32:55,911
um if you need to get some um
39816
33:32:53,831 --> 33:32:57,360
inspiration from this you can also build
39817
33:32:55,911 --> 33:32:59,512
on top of this tomorrow so you can add
39818
33:32:57,360 --> 33:33:01,680
more security to this so you're more
39819
33:33:05,039 --> 33:33:10,159
start cleaning up our code on the dart
39820
33:33:07,360 --> 33:33:11,512
site so on the dart side so
39821
33:33:10,160 --> 33:33:12,800
let's have a look at this code that
39822
33:33:11,512 --> 33:33:14,400
we've written in here i'm going to
39823
33:33:12,800 --> 33:33:15,832
change the screen layout a little bit so
39824
33:33:15,831 --> 33:33:20,871
so let's go to this function gets notes
39825
33:33:19,039 --> 33:33:22,799
and you may have noticed it but gets
39826
33:33:20,872 --> 33:33:25,120
notes at the moment we're not using this
39827
33:33:22,800 --> 33:33:28,160
function at the moment so we're only
39828
33:33:25,119 --> 33:33:29,831
using all nodes so let's go ahead and
39829
33:33:28,160 --> 33:33:31,911
just remove this gets notes from
39830
33:33:34,232 --> 33:33:38,000
i'm running the application at the
39831
33:33:35,679 --> 33:33:39,831
moment so let's just command s and i can
39832
33:33:38,000 --> 33:33:42,232
see there's no problems because no one
39833
33:33:39,831 --> 33:33:43,119
is actually using get notes and there's
39834
33:33:43,119 --> 33:33:46,720
errors in our code you can see there's
39835
33:33:44,872 --> 33:33:48,080
no files or folders that are marked as
39836
33:33:48,080 --> 33:33:51,360
um so that's that one that was one of
39837
33:33:50,080 --> 33:33:52,960
the things that we have to do just to
39838
33:33:52,960 --> 33:33:57,120
and then what we need to do in here is
39839
33:33:54,872 --> 33:34:00,800
to ensure that our when we're actually
39840
33:33:57,119 --> 33:34:04,000
saying all notes that we are filtering
39841
33:34:00,800 --> 33:34:05,832
the snapshots before we actually read
39842
33:34:04,000 --> 33:34:09,759
them so let's just go in here and say
39843
33:34:05,831 --> 33:34:11,439
notes and before snapshots f like this
39844
33:34:11,440 --> 33:34:15,360
and you can see it says okay which field
39845
33:34:13,759 --> 33:34:16,551
are you looking for then we say owner
39846
33:34:18,000 --> 33:34:23,360
and that should actually be is equal to
39847
33:34:26,320 --> 33:34:32,872
so that's that one and then after that
39848
33:34:28,232 --> 33:34:34,400
we say snapshot and snapshots map
39849
33:34:34,399 --> 33:34:38,871
that's also fine actually so
39850
33:34:37,679 --> 33:34:40,719
in to be honest with you we could clean
39851
33:34:38,872 --> 33:34:41,680
this code up as well so let's just say
39852
33:34:41,679 --> 33:34:45,191
and we take this and we say this is our
39853
33:34:46,872 --> 33:34:53,832
the final notes is equal to that
39854
33:34:53,831 --> 33:34:59,271
and we could just return it
39855
33:34:56,720 --> 33:35:01,759
all right so now we have this and you
39856
33:34:59,271 --> 33:35:04,399
could basically argue saying that okay
39857
33:35:01,759 --> 33:35:06,639
we have a where clause in here so we
39858
33:35:04,399 --> 33:35:08,959
don't have to have this word clause in
39859
33:35:06,639 --> 33:35:11,360
here and i would actually say yeah that
39860
33:35:08,960 --> 33:35:13,272
does make sense because yeah why would
39861
33:35:11,360 --> 33:35:14,720
we have two word clauses so let's just
39862
33:35:13,271 --> 33:35:16,399
remove that word clause and put the
39863
33:35:16,399 --> 33:35:21,039
okay so we filter before we read all the
39864
33:35:19,119 --> 33:35:22,319
snapshots all right we're getting an
39865
33:35:21,039 --> 33:35:24,479
error in here let me see what the
39866
33:35:22,320 --> 33:35:25,360
problem could be because there's a map
39867
33:35:25,360 --> 33:35:29,191
so your code basically should look like
39868
33:35:29,191 --> 33:35:33,440
and what we can do now is to actually
39869
33:35:31,360 --> 33:35:35,119
put this to test to make sure
39870
33:35:33,440 --> 33:35:37,360
everything's working as expected so i'm
39871
33:35:35,119 --> 33:35:38,871
gonna bring our ios simulator in here
39872
33:35:37,360 --> 33:35:41,831
which the application is running on
39873
33:35:38,872 --> 33:35:43,680
already gonna do a hot restart and let's
39874
33:35:41,831 --> 33:35:44,911
just register a user so i'm just gonna
39875
33:35:46,479 --> 33:35:51,679
gmail.com foo barbeaus and please don't
39876
33:35:48,800 --> 33:35:53,832
use this uh password say register and
39877
33:35:51,679 --> 33:35:56,319
then it says verify email okay
39878
33:35:53,831 --> 33:35:58,399
and let me go ahead and bring up my
39879
33:35:58,399 --> 33:36:05,911
and have a look at my email and see if a
39880
33:36:01,592 --> 33:36:08,160
verification email has been sent to me
39881
33:36:05,911 --> 33:36:10,080
and we've sent an email verification
39882
33:36:08,160 --> 33:36:12,480
please open it to verify your account
39883
33:36:10,080 --> 33:36:14,872
and i hope i actually entered my email
39884
33:36:12,479 --> 33:36:16,959
correctly because i haven't yet received
39885
33:36:16,960 --> 33:36:22,960
so perhaps i could open up gmail in a
39886
33:36:20,800 --> 33:36:26,479
separate tab because i'm using gmail at
39887
33:36:22,960 --> 33:36:28,872
the moment for that particular user
39888
33:36:26,479 --> 33:36:30,399
and see if that email has appeared in my
39889
33:36:36,160 --> 33:36:39,760
and this is i'm doing this on a separate
39890
33:36:37,911 --> 33:36:41,679
screen so that's why you're not seeing
39891
33:36:41,679 --> 33:36:47,271
um i can't see really any email at the
39892
33:36:44,232 --> 33:36:49,832
moment so um let me go ahead in our
39893
33:36:47,271 --> 33:36:51,679
firebase console in here so
39894
33:36:51,679 --> 33:36:57,911
and let's go then to authentication and
39895
33:36:54,872 --> 33:37:00,720
i can see that there is a user here and
39896
33:36:57,911 --> 33:37:03,271
that is actually correct but i don't see
39897
33:37:00,720 --> 33:37:06,160
any verification email being sent to me
39898
33:37:03,271 --> 33:37:07,679
so let's go ahead and have a look at our
39899
33:37:07,679 --> 33:37:11,679
and let's have a look at the button
39900
33:37:09,679 --> 33:37:14,079
implementation if we actually forgot to
39901
33:37:11,679 --> 33:37:16,000
do something so when we pass this
39902
33:37:14,080 --> 33:37:18,320
register event you can see auth event
39903
33:37:16,000 --> 33:37:19,360
register then we have to go to our off
39904
33:37:19,360 --> 33:37:23,440
and have a look at how we've implemented
39905
33:37:21,592 --> 33:37:25,512
implemented that i can see that we say
39906
33:37:23,440 --> 33:37:28,639
create user and then we're awaiting on
39907
33:37:25,512 --> 33:37:31,119
the provider send email verification so
39908
33:37:28,639 --> 33:37:33,191
it seems to be working fine however i
39909
33:37:31,119 --> 33:37:34,551
still haven't received any verification
39910
33:37:33,191 --> 33:37:36,720
email and that's why i'm just going to
39911
33:37:34,551 --> 33:37:37,911
say send email verification here on this
39912
33:37:37,911 --> 33:37:41,679
and by pressing that i'm just going to
39913
33:37:39,679 --> 33:37:43,359
refresh my emails and now i can see i
39914
33:37:41,679 --> 33:37:46,159
received a verification email i'm going
39915
33:37:43,360 --> 33:37:49,191
to bring it here tap on the link and i
39916
33:37:46,160 --> 33:37:50,160
can see that i saw this um i can see
39917
33:37:50,160 --> 33:37:54,480
your email has been verified was
39918
33:37:54,479 --> 33:37:59,759
that's great let's go ahead now and um
39919
33:37:57,911 --> 33:38:01,911
go to the application and i'm going to
39920
33:37:59,759 --> 33:38:04,080
restart here go to the login page and
39921
33:38:01,911 --> 33:38:05,119
i'm going to log in with that user
39922
33:38:06,800 --> 33:38:10,551
log in with the user and no problems i
39923
33:38:08,639 --> 33:38:12,000
can log into the application press the
39924
33:38:10,551 --> 33:38:13,191
plus button and i'm going to say my
39925
33:38:14,800 --> 33:38:19,120
that's saved and then i'm going to save
39926
33:38:19,119 --> 33:38:22,871
all right and that is also saved then
39927
33:38:22,872 --> 33:38:27,760
and try to log back in with another user
39928
33:38:25,360 --> 33:38:30,320
so let's register a new user because
39929
33:38:27,759 --> 33:38:32,639
remember we deleted all our users from
39930
33:38:30,320 --> 33:38:34,960
firestore database so who are about
39931
33:38:32,639 --> 33:38:36,639
again please don't use this password
39932
33:38:34,960 --> 33:38:38,800
and i'm going to have a look at my
39933
33:38:40,399 --> 33:38:43,911
verification email was sent to me so
39934
33:38:42,639 --> 33:38:46,080
that's perfect i'm going to bring it
39935
33:38:46,080 --> 33:38:51,119
if i can open that email it looks like
39936
33:38:48,000 --> 33:38:52,720
this i'm going to verify my user great
39937
33:38:51,119 --> 33:38:55,759
then i'm going to restart the process
39938
33:38:52,720 --> 33:38:56,720
and try to log in with that user
39939
33:38:58,320 --> 33:39:02,000
log in with the user and i can't see van
39940
33:39:02,000 --> 33:39:08,000
notes so i'm going to say another first
39941
33:39:11,512 --> 33:39:16,872
create a new note say another second
39942
33:39:14,160 --> 33:39:19,680
note all right so after these two users
39943
33:39:16,872 --> 33:39:21,911
have created their own two individual
39944
33:39:19,679 --> 33:39:23,511
notes let's go ahead in our database
39945
33:39:21,911 --> 33:39:26,080
refresh the users we can see there are
39946
33:39:23,512 --> 33:39:27,911
two users in here one starting with pg
39947
33:39:26,080 --> 33:39:31,191
which is this pixelity and then there's
39948
33:39:27,911 --> 33:39:32,800
a 9v which is the other user okay
39949
33:39:31,191 --> 33:39:34,639
let's go to our database and see how
39950
33:39:32,800 --> 33:39:35,911
many nodes we have and we can see we
39951
33:39:36,960 --> 33:39:41,040
9v which is for default.user and then we
39952
33:39:44,232 --> 33:39:49,680
the pixelity email which start with the
39953
33:39:46,551 --> 33:39:52,551
user id of pg as you can see in here and
39954
33:39:49,679 --> 33:39:55,191
they they have full access to their own
39955
33:39:52,551 --> 33:39:57,119
documents so now this user you can
39956
33:39:55,191 --> 33:39:59,591
actually go and delete this document for
39957
33:39:57,119 --> 33:40:01,512
instance another first note so he can go
39958
33:39:59,592 --> 33:40:02,872
and say okay i want to delete this note
39959
33:40:02,872 --> 33:40:07,680
and you can see it just immediately got
39960
33:40:04,551 --> 33:40:09,512
deleted from firebase as well so
39961
33:40:07,679 --> 33:40:11,271
they have full access to their own notes
39962
33:40:09,512 --> 33:40:14,000
but they have absolutely no access to
39963
33:40:11,271 --> 33:40:16,080
anybody else's notes alright so that's
39964
33:40:16,080 --> 33:40:20,320
if that's even a word fantastically
39965
33:40:18,720 --> 33:40:22,800
so the next thing we need to do now that
39966
33:40:20,320 --> 33:40:25,040
we fix this is to go ahead and update
39967
33:40:22,800 --> 33:40:27,760
the build number in our pop spec yaml
39968
33:40:25,039 --> 33:40:29,511
file so now i'll show you this let's go
39969
33:40:27,759 --> 33:40:31,679
to visual studio code to our code right
39970
33:40:33,191 --> 33:40:36,720
camel and you'll see on top of this file
39971
33:40:35,360 --> 33:40:38,720
somewhere around here we have this
39972
33:40:36,720 --> 33:40:40,872
version at the moment is one zero zero
39973
33:40:38,720 --> 33:40:43,680
plus one but what we want to do in here
39974
33:40:40,872 --> 33:40:45,760
is just is to say it's one one zero plus
39975
33:40:43,679 --> 33:40:48,719
one so we're updating our build number
39976
33:40:48,720 --> 33:40:54,720
so after doing that since it's such a
39977
33:40:51,360 --> 33:40:56,800
big change you could perhaps look at
39978
33:40:54,720 --> 33:41:00,000
your terminal and see and do a git
39979
33:40:56,800 --> 33:41:02,400
status and you can see by updating that
39980
33:41:02,399 --> 33:41:07,360
it didn't immediately update the build
39981
33:41:05,039 --> 33:41:09,191
number for our application because had
39982
33:41:07,360 --> 33:41:12,080
it done that it should have also been
39983
33:41:09,191 --> 33:41:14,080
updated for our ios application in the
39984
33:41:12,080 --> 33:41:16,320
info plist file so that unfortunately
39985
33:41:14,080 --> 33:41:18,400
wasn't updated and because of this it's
39986
33:41:16,320 --> 33:41:20,960
probably a good idea to issue flutter
39987
33:41:18,399 --> 33:41:22,551
clean so i'm going to bring the
39988
33:41:20,960 --> 33:41:23,592
code like that let's just say flutter
39989
33:41:39,360 --> 33:41:42,720
all right that's doing is we're going to
39990
33:41:40,800 --> 33:41:44,400
say git status let's have a look at our
39991
33:41:42,720 --> 33:41:48,479
status and there's still nothing changed
39992
33:41:44,399 --> 33:41:48,479
so let's just say flutter run ios
39993
33:41:49,679 --> 33:41:53,591
and see if that's gonna listen okay
39994
33:41:51,592 --> 33:41:55,760
flutter run because that's our default
39995
33:41:53,592 --> 33:41:58,480
target at the moment is an ios simulator
39996
33:41:55,759 --> 33:42:01,039
so maybe flutter rom will just accept
39997
33:42:02,551 --> 33:42:06,831
show us the list of devices please
39998
33:42:10,479 --> 33:42:14,231
it's having oh now it found it please
39999
33:42:12,639 --> 33:42:17,831
choose one okay i want to choose the
40000
33:42:14,232 --> 33:42:20,639
iphone 13 pro so i'm gonna choose um
40001
33:42:17,831 --> 33:42:23,439
iphone 13 pro number two in here okay
40002
33:42:20,639 --> 33:42:25,512
so now it's gonna build the project with
40003
33:42:23,440 --> 33:42:26,232
xcode build and in my experience these
40004
33:42:30,720 --> 33:42:35,680
i'm basically gonna stay quiet now let
40005
33:42:33,191 --> 33:42:38,871
it do its work and when it's done we
40006
33:42:35,679 --> 33:42:41,439
will continue with the video
40007
33:42:38,872 --> 33:42:43,832
all right as i suspected this process
40008
33:42:41,440 --> 33:42:45,832
actually took a very long time and i
40009
33:42:43,831 --> 33:42:49,360
think we could actually see in here that
40010
33:42:50,720 --> 33:42:55,271
it is well i'm not going to go into that
40011
33:42:52,639 --> 33:42:57,759
it's a long time um so let's have a look
40012
33:42:55,271 --> 33:42:59,360
now if the version was actually updated
40013
33:42:57,759 --> 33:43:01,360
correctly so i'm going to go another
40014
33:42:59,360 --> 33:43:04,320
into another shell in here and let's say
40015
33:43:01,360 --> 33:43:06,160
git status and i still don't see any
40016
33:43:04,320 --> 33:43:08,160
info plist files have been getting
40017
33:43:06,160 --> 33:43:10,480
changed on the ios side so i'm just
40018
33:43:08,160 --> 33:43:12,872
gonna be curious here and then go to the
40019
33:43:10,479 --> 33:43:14,959
ios file in here and have a look at the
40020
33:43:14,960 --> 33:43:18,720
and let's have a look at the version in
40021
33:43:16,960 --> 33:43:20,872
here well the version does seem to have
40022
33:43:18,720 --> 33:43:22,479
been updated so it's 1 1 0 that's
40023
33:43:20,872 --> 33:43:26,000
exactly what we specified in our pop
40024
33:43:22,479 --> 33:43:28,080
spec yaml so that's you making sure that
40025
33:43:26,000 --> 33:43:29,592
this file is updated and if you don't
40026
33:43:28,080 --> 33:43:31,119
have xcode so if you're for instance
40027
33:43:32,160 --> 33:43:35,592
ubuntu or something and you want to
40028
33:43:33,831 --> 33:43:37,360
still check whether the version number
40029
33:43:35,592 --> 33:43:39,592
was updated for the ios application you
40030
33:43:37,360 --> 33:43:43,440
can always do that by opening up this
40031
33:43:39,592 --> 33:43:44,960
file info plist inside ios runner
40032
33:43:43,440 --> 33:43:46,800
and then you can have i believe you
40033
33:43:46,800 --> 33:43:51,192
your flutter build number in here and
40034
33:43:49,119 --> 33:43:53,591
let's see if flutter build number is set
40035
33:43:55,512 --> 33:43:59,440
i don't actually see the flutter build
40036
33:43:59,440 --> 33:44:03,271
so if we search for one one zero
40037
33:44:01,679 --> 33:44:05,359
actually let's search for one one zero
40038
33:44:03,271 --> 33:44:07,512
in the entire application and the only
40039
33:44:05,360 --> 33:44:09,119
thing i can see in here are like some of
40040
33:44:13,039 --> 33:44:18,079
unfortunately that's not gonna work so
40041
33:44:16,000 --> 33:44:19,911
i don't really know the magic behind how
40042
33:44:18,080 --> 33:44:22,000
the flutter team has actually injected
40043
33:44:22,000 --> 33:44:26,399
it's probably some sort of a build
40044
33:44:23,759 --> 33:44:28,231
variable so if you want to get into
40045
33:44:26,399 --> 33:44:29,679
details about that perhaps we could just
40046
33:44:29,679 --> 33:44:34,479
and have a look at that application
40047
33:44:31,911 --> 33:44:36,720
let's go in here into build settings and
40048
33:44:36,720 --> 33:44:42,080
um and see if there's any one one zero
40049
33:44:39,831 --> 33:44:43,511
in here flutter build name exactly so
40050
33:44:42,080 --> 33:44:45,271
that's that's how they're injecting it
40051
33:44:43,512 --> 33:44:47,760
they have a user defined variable called
40052
33:44:45,271 --> 33:44:50,319
slots are built and flutter build the
40053
33:44:47,759 --> 33:44:51,759
name is then being injected for our info
40054
33:44:51,759 --> 33:44:56,000
if you go here you can see oh this is
40055
33:44:53,759 --> 33:44:58,319
flutter build number so yeah but anyway
40056
33:44:56,000 --> 33:45:00,000
it's this this must be a variable that
40057
33:44:58,320 --> 33:45:02,640
the flutter team has injected into the
40058
33:45:00,000 --> 33:45:05,039
xcode build somehow all right
40059
33:45:02,639 --> 33:45:06,872
but bringing up xcode could confirm that
40060
33:45:05,039 --> 33:45:09,679
the version number is set to 110
40061
33:45:06,872 --> 33:45:12,080
correctly so that's all we needed to do
40062
33:45:09,679 --> 33:45:13,359
then the next step for this chapter for
40063
33:45:13,360 --> 33:45:16,551
make a build and send it to apple this
40064
33:45:16,551 --> 33:45:19,591
not this time we did it the previous
40065
33:45:17,911 --> 33:45:21,591
time as well we sent it to apple so what
40066
33:45:19,592 --> 33:45:23,592
i'm going to do is i need to bring up
40067
33:45:21,592 --> 33:45:26,552
xcode again i shouldn't have closed it
40068
33:45:23,592 --> 33:45:28,320
maybe let's go in here and while we're
40069
33:45:26,551 --> 33:45:30,639
in there we could just go and say we're
40070
33:45:28,320 --> 33:45:32,872
building for any ios device and then i'm
40071
33:45:30,639 --> 33:45:34,551
just going to say product archive as
40072
33:45:32,872 --> 33:45:35,512
we've done in the previous chapters as
40073
33:45:38,960 --> 33:45:44,552
okay now our build has been um created
40074
33:45:42,720 --> 33:45:45,911
by xcode and in here it's very important
40075
33:45:44,551 --> 33:45:47,360
that you actually check that the version
40076
33:45:47,360 --> 33:45:51,191
corresponds to the version number that
40077
33:45:48,800 --> 33:45:53,592
you've created in app store connect and
40078
33:45:51,191 --> 33:45:55,191
just a reminder in app store connect if
40079
33:45:53,592 --> 33:45:57,120
you go back there you can see that the
40080
33:45:55,191 --> 33:45:58,479
version that we prepared is 110 and
40081
33:45:57,119 --> 33:46:00,399
that's why i said in the beginning of
40082
33:45:58,479 --> 33:46:02,080
this chapter it's actually important for
40083
33:46:00,399 --> 33:46:04,639
you to follow the same versioning that
40084
33:46:02,080 --> 33:46:06,160
i'm doing in in the current chapter so
40085
33:46:04,639 --> 33:46:09,039
let's say 110 and i'm going to say
40086
33:46:06,160 --> 33:46:10,720
distribute to apple or distribute app
40087
33:46:16,080 --> 33:46:20,479
analyzing app version fetching app store
40088
33:46:20,479 --> 33:46:24,551
and i'm going to uncheck manage version
40089
33:46:22,800 --> 33:46:26,400
and build number because i want flutter
40090
33:46:24,551 --> 33:46:29,591
to be able to do that and then i'm going
40091
33:46:26,399 --> 33:46:31,759
to choose the production profile that
40092
33:46:29,592 --> 33:46:35,040
we've created for application press the
40093
33:46:35,360 --> 33:46:39,680
and then depending on your network
40094
33:46:37,759 --> 33:46:40,959
connection and your and different
40095
33:46:39,679 --> 33:46:42,871
configurations that you have for your
40096
33:46:40,960 --> 33:46:45,360
network this process could actually take
40097
33:46:45,360 --> 33:46:49,680
previously when i tried this even even
40098
33:46:47,592 --> 33:46:50,960
though i'm on a fiber optic net network
40099
33:46:50,960 --> 33:46:55,512
with a thousand upload a thousand
40100
33:46:52,479 --> 33:46:57,512
download it still took about 30 minutes
40101
33:46:55,512 --> 33:46:59,592
for a simple application to be sent to
40102
33:46:57,512 --> 33:47:01,360
apple and it was literally stuck in this
40103
33:46:59,592 --> 33:47:03,360
requesting app information for more than
40104
33:47:03,360 --> 33:47:07,759
that's an unfortunate fact that we just
40105
33:47:05,440 --> 33:47:08,551
have to accept and let it do its work
40106
33:47:08,551 --> 33:47:14,231
i will see you then once it's
40107
33:47:11,039 --> 33:47:15,759
finally sent the application to apple
40108
33:47:14,232 --> 33:47:17,512
all right so now i can see that our
40109
33:47:15,759 --> 33:47:18,959
application has been submitted to apple
40110
33:47:17,512 --> 33:47:20,551
and i have to confess that this time it
40111
33:47:18,960 --> 33:47:22,800
took only about a minute for this
40112
33:47:20,551 --> 33:47:24,872
process to go through so that was very
40113
33:47:22,800 --> 33:47:26,639
fast much much faster than the previous
40114
33:47:24,872 --> 33:47:28,720
chapters we'd have to submit our
40115
33:47:26,639 --> 33:47:30,000
application which took upwards of 30
40116
33:47:30,000 --> 33:47:33,679
so now that it's done after you've done
40117
33:47:32,232 --> 33:47:35,760
this you will receive an email from
40118
33:47:33,679 --> 33:47:37,511
apple that kind of looks like this if i
40119
33:47:37,512 --> 33:47:40,232
it will look like this and it will tell
40120
33:47:40,232 --> 33:47:45,040
the following build has completed
40121
33:47:42,399 --> 33:47:46,551
processing only after this email has
40122
33:47:45,039 --> 33:47:48,319
been sent you can go to app store
40123
33:47:48,320 --> 33:47:52,480
go and we also have to fix our missing
40124
33:47:50,800 --> 33:47:53,440
compliance so let's just say manage and
40125
33:47:54,960 --> 33:48:00,552
start internal testing after you've done
40126
33:47:57,119 --> 33:48:00,551
that you need to go to the app store
40127
33:48:02,000 --> 33:48:07,592
and in that tab let's just select a new
40128
33:48:04,399 --> 33:48:09,679
bill and it's our 110 build and i'm
40129
33:48:07,592 --> 33:48:11,040
going to say done in there okay after
40130
33:48:09,679 --> 33:48:13,039
you've done that you can press the save
40131
33:48:11,039 --> 33:48:14,639
button and then you can submit your
40132
33:48:17,679 --> 33:48:23,439
then in turn concludes the submission of
40133
33:48:19,911 --> 33:48:24,959
our app to app store and um if there's
40134
33:48:23,440 --> 33:48:26,400
any complications with this application
40135
33:48:24,960 --> 33:48:27,760
like if apple for some reason can't
40136
33:48:26,399 --> 33:48:29,591
register a user or something they're
40137
33:48:27,759 --> 33:48:31,360
going to send you an email telling you
40138
33:48:31,360 --> 33:48:35,119
then you need to go through that process
40139
33:48:35,119 --> 33:48:38,639
review team in order to get started with
40140
33:48:37,360 --> 33:48:40,160
your application but if you remember
40141
33:48:38,639 --> 33:48:42,639
from the previous chapters we've
40142
33:48:40,160 --> 33:48:44,960
actually left some information in there
40143
33:48:44,960 --> 33:48:50,000
and told the review team how to register
40144
33:48:50,000 --> 33:48:52,872
user in our application so that
40145
33:48:51,360 --> 33:48:55,440
information should be sufficient for
40146
33:48:52,872 --> 33:48:57,592
them to understand how to use the app
40147
33:48:55,440 --> 33:49:00,479
fantastic we're done with the origin
40148
33:48:57,592 --> 33:49:03,192
with the submission of our ios app to
40149
33:49:00,479 --> 33:49:05,759
app store so as usual since we've now
40150
33:49:03,191 --> 33:49:07,911
changed our code let's go into
40151
33:49:07,911 --> 33:49:11,831
i'm going to close all these tabs
40152
33:49:09,440 --> 33:49:13,512
because it's just extremely populated on
40153
33:49:13,512 --> 33:49:19,512
get rid of the explorer and go to
40154
33:49:17,191 --> 33:49:21,679
my terminal in here and have a look at
40155
33:49:19,512 --> 33:49:23,191
art status and i can see there's only
40156
33:49:21,679 --> 33:49:26,799
two files changed so i'm going to add
40157
33:49:23,191 --> 33:49:28,720
them and let's commit as step 30 as you
40158
33:49:26,800 --> 33:49:30,232
can see at the bottom of the screen okay
40159
33:49:28,720 --> 33:49:32,160
so if you look at our logs we have step
40160
33:49:30,232 --> 33:49:34,400
29 and then we have step 30 so i'm going
40161
33:49:34,399 --> 33:49:40,159
that's going to push our commit
40162
33:49:36,479 --> 33:49:43,512
and less than a tag v so step 30 and
40163
33:49:40,160 --> 33:49:46,872
let's just say get push tags so
40164
33:49:43,512 --> 33:49:49,760
that is done now and our tag of 30 is
40165
33:49:49,759 --> 33:49:52,799
what we need to do now as usual is
40166
33:49:51,440 --> 33:49:55,592
tradition where we talk about what we
40167
33:49:52,800 --> 33:49:57,271
need to discuss in the upcoming chapters
40168
33:49:55,592 --> 33:50:00,160
and in the next chapter we're going to
40169
33:49:57,271 --> 33:50:02,232
talk about sending our app also to
40170
33:50:00,160 --> 33:50:03,832
google play store we've done it for ios
40171
33:50:02,232 --> 33:50:05,360
we have to do the same process for
40172
33:50:03,831 --> 33:50:06,551
google play store so get some
40173
33:50:05,360 --> 33:50:08,399
refreshments if you want to and i'll see
40174
33:50:06,551 --> 33:50:10,159
you in the next chapter hello everyone
40175
33:50:08,399 --> 33:50:11,831
and welcome to chapter 50 of the slotted
40176
33:50:10,160 --> 33:50:13,360
course in previous chapters we've been
40177
33:50:11,831 --> 33:50:16,159
working quite a lot with submitting our
40178
33:50:13,360 --> 33:50:18,320
application for the ios app store using
40179
33:50:16,160 --> 33:50:19,832
app store connect and in this chapter
40180
33:50:18,320 --> 33:50:21,360
we're going to focus on doing the same
40181
33:50:21,360 --> 33:50:25,680
google and play store so whereas you
40182
33:50:23,271 --> 33:50:27,440
have app store and at the back of app
40183
33:50:27,440 --> 33:50:31,760
um app store connect which allows you as
40184
33:50:29,911 --> 33:50:32,872
a developer to go and interact with the
40185
33:50:31,759 --> 33:50:34,871
your product that's going to be
40186
33:50:32,872 --> 33:50:37,040
submitted to the app store google has
40187
33:50:34,872 --> 33:50:38,872
something similar for your product for
40188
33:50:37,039 --> 33:50:40,719
your android app in this case our
40189
33:50:38,872 --> 33:50:42,400
flutter application to be available in
40190
33:50:42,399 --> 33:50:46,231
which is where users download your
40191
33:50:43,911 --> 33:50:50,872
applications you you as a developer will
40192
33:50:46,232 --> 33:50:52,160
have to go to the google play console so
40193
33:50:50,872 --> 33:50:53,512
we're going to take care of that and for
40194
33:50:52,160 --> 33:50:56,232
that we're going to create something
40195
33:50:53,512 --> 33:50:58,479
called an app bundle where whereas if
40196
33:50:56,232 --> 33:51:00,160
you remember when we created our ios
40197
33:50:58,479 --> 33:51:01,440
application we went to xcode and archive
40198
33:51:00,160 --> 33:51:03,512
our application and that created
40199
33:51:01,440 --> 33:51:05,680
something called an xc archive file and
40200
33:51:03,512 --> 33:51:07,440
that was kind of like a zip file
40201
33:51:05,679 --> 33:51:09,359
and all your files were all your
40202
33:51:07,440 --> 33:51:12,960
binaries at least all your like linked
40203
33:51:09,360 --> 33:51:15,680
libraries all your pods the application
40204
33:51:12,960 --> 33:51:18,000
itself binary was signed with your
40205
33:51:15,679 --> 33:51:19,759
production certificate and profile an
40206
33:51:19,759 --> 33:51:25,360
your um android devices as well is a
40207
33:51:22,720 --> 33:51:28,639
signed bundle so it is the equivalent of
40208
33:51:25,360 --> 33:51:30,160
your um xc archive kind of and we're
40209
33:51:28,639 --> 33:51:32,551
going to take care of that as well soon
40210
33:51:34,800 --> 33:51:37,911
i mean there's something that i i
40211
33:51:36,399 --> 33:51:39,679
actually prefer this but i didn't want
40212
33:51:37,911 --> 33:51:41,512
to mention it before because we were so
40213
33:51:39,679 --> 33:51:43,039
close to actually raising our ios
40214
33:51:41,512 --> 33:51:44,800
application we have to make just some
40215
33:51:43,039 --> 33:51:46,399
small adjustments to our code as well as
40216
33:51:46,399 --> 33:51:52,159
start for instance working with
40217
33:51:49,592 --> 33:51:53,760
taking screenshots of our android of our
40218
33:51:52,160 --> 33:51:57,271
flutter app running on various android
40219
33:51:53,759 --> 33:51:59,591
devices and that's um a scrolling issue
40220
33:51:57,271 --> 33:52:01,911
that we have generally on our
40221
33:51:59,592 --> 33:52:03,440
screens where we display the keyboard
40222
33:52:04,479 --> 33:52:08,399
login view and i believe there's
40223
33:52:08,399 --> 33:52:13,191
and where else do we display a keyword i
40224
33:52:13,191 --> 33:52:17,360
log in register for a got password view
40225
33:52:15,360 --> 33:52:19,119
because we asked the user for
40226
33:52:17,360 --> 33:52:21,680
her email address there as well and also
40227
33:52:21,679 --> 33:52:25,359
actually we don't have the problem on
40228
33:52:23,191 --> 33:52:26,479
the edit notes view so that's not a
40229
33:52:26,479 --> 33:52:30,159
we have this problem in verify email
40230
33:52:28,000 --> 33:52:32,080
view login view register view and forgot
40231
33:52:33,759 --> 33:52:37,191
actually verify email view you could
40232
33:52:35,271 --> 33:52:37,911
argue that yeah it's it's not a problem
40233
33:52:37,911 --> 33:52:41,831
so the issue that we have at the moment
40234
33:52:39,679 --> 33:52:43,511
is that imagine that your application
40235
33:52:41,831 --> 33:52:44,479
application is being run on a very small
40236
33:52:46,160 --> 33:52:49,680
and then the user for instance has a
40237
33:52:48,320 --> 33:52:51,192
very very small screen and then they're
40238
33:52:49,679 --> 33:52:53,759
on the login view and then we displayed
40239
33:52:51,191 --> 33:52:56,000
the keyboard where at where for instance
40240
33:52:53,759 --> 33:52:57,679
they tap on the email field and they try
40241
33:52:56,000 --> 33:52:59,911
to write their email and then the
40242
33:52:57,679 --> 33:53:01,911
keyboard pops up blocking like half the
40243
33:52:59,911 --> 33:53:03,512
screen and depending on the size of the
40244
33:53:01,911 --> 33:53:05,119
screen the rest of the half that is
40245
33:53:03,512 --> 33:53:07,832
remaining might not actually be able to
40246
33:53:05,119 --> 33:53:08,639
display the entire contents of your
40247
33:53:09,592 --> 33:53:13,680
this is a little problem and we have to
40248
33:53:11,191 --> 33:53:16,159
fix it but it is so simple to fix and
40249
33:53:13,679 --> 33:53:17,759
you may then decide to say well the ios
40250
33:53:16,160 --> 33:53:20,480
application we've done already is sent
40251
33:53:17,759 --> 33:53:21,759
to apple it's um it's already accepted
40252
33:53:20,479 --> 33:53:22,959
and i'm going to release it and you
40253
33:53:21,759 --> 33:53:24,639
could definitely do that so it's
40254
33:53:22,960 --> 33:53:26,800
actually good practice if you want to
40255
33:53:24,639 --> 33:53:28,960
release your is application as is just
40256
33:53:26,800 --> 33:53:30,800
go ahead and do that and then you can do
40257
33:53:28,960 --> 33:53:33,272
a patch later and release another
40258
33:53:30,800 --> 33:53:34,960
application to fix that issue
40259
33:53:33,271 --> 33:53:37,759
and i think the more you release
40260
33:53:34,960 --> 33:53:40,400
applications the better because then you
40261
33:53:37,759 --> 33:53:42,479
learn the process of updating things and
40262
33:53:40,399 --> 33:53:44,831
sending release notes etc it's just good
40263
33:53:44,831 --> 33:53:51,911
often so let's go ahead now and talk a
40264
33:53:47,679 --> 33:53:51,911
little bit about the documentation for
40265
33:53:52,232 --> 33:53:55,271
creating an app bundle so i'll bring it
40266
33:53:56,639 --> 33:54:00,800
and it's as you can see at the bottom of
40267
33:53:58,551 --> 33:54:03,191
the screen it's in distribute console
40268
33:54:03,191 --> 33:54:07,119
there's a lot of documentation here that
40269
33:54:04,800 --> 33:54:10,800
you can go and read more about it so i
40270
33:54:07,119 --> 33:54:12,399
thought just to um explain like the
40271
33:54:10,800 --> 33:54:14,400
google play console in here a little bit
40272
33:54:12,399 --> 33:54:16,319
to you so that you can sign in here
40273
33:54:14,399 --> 33:54:18,231
and then you can read more about all
40274
33:54:16,320 --> 33:54:21,040
these topics so i think it's just a good
40275
33:54:21,039 --> 33:54:24,231
bookmark if you want to be able to
40276
33:54:22,960 --> 33:54:26,480
release your application in the future
40277
33:54:24,232 --> 33:54:28,800
as well with google and play store
40278
33:54:26,479 --> 33:54:30,399
otherwise if you're like me and you
40279
33:54:28,800 --> 33:54:32,080
sometimes just want to jump into things
40280
33:54:32,080 --> 33:54:39,271
um logging into google play console so
40281
33:54:37,119 --> 33:54:42,000
let me bring you to the next url as you
40282
33:54:39,271 --> 33:54:45,872
can see the url is played at google.com
40283
33:54:42,000 --> 33:54:50,320
console about so i'm just gonna say um
40284
33:54:45,872 --> 33:54:51,440
play.google.com slash console slash
40285
33:54:53,119 --> 33:54:58,551
and that's our google play console okay
40286
33:54:55,831 --> 33:54:59,679
and i'm just going to log in here with
40287
33:54:59,679 --> 33:55:04,000
a user account and i have this user
40288
33:55:02,000 --> 33:55:05,759
account here which i can log in with
40289
33:55:04,000 --> 33:55:07,911
let's see if i can log in successfully
40290
33:55:07,911 --> 33:55:13,039
all right and then it says choose
40291
33:55:09,911 --> 33:55:15,360
developer again and if you haven't done
40292
33:55:13,039 --> 33:55:18,159
this before you may have to go and
40293
33:55:15,360 --> 33:55:18,960
create a developer account first but i
40294
33:55:18,960 --> 33:55:21,912
in the beginning of this chapter we
40295
33:55:20,320 --> 33:55:24,000
talked quite a lot about creating a
40296
33:55:21,911 --> 33:55:25,759
developer account both for ios and
40297
33:55:24,000 --> 33:55:27,679
android so i'm assuming you've already
40298
33:55:25,759 --> 33:55:29,271
done that but if you haven't you can go
40299
33:55:27,679 --> 33:55:31,039
and create a developer account it is
40300
33:55:29,271 --> 33:55:32,639
free you don't have to pay for anything
40301
33:55:31,039 --> 33:55:35,191
so just go ahead and create your
40302
33:55:35,191 --> 33:55:38,639
so now here i'm going to choose my
40303
33:55:36,551 --> 33:55:41,271
developer account and just go in here
40304
33:55:41,271 --> 33:55:47,119
play console as you can see in here this
40305
33:55:43,440 --> 33:55:49,360
is the console url for me at least and
40306
33:55:47,119 --> 33:55:53,440
what we need to do in here is to go
40307
33:55:53,440 --> 33:55:56,720
let's go ahead as you can see at the
40308
33:55:55,039 --> 33:55:59,191
bottom of the screen let's go ahead and
40309
33:55:56,720 --> 33:56:04,080
tap on create app in here and now in
40310
33:55:59,191 --> 33:56:04,080
here it's asking us for some information
40311
33:56:04,160 --> 33:56:09,512
um and also i just saw that i have a
40312
33:56:12,160 --> 33:56:15,360
action so i'll bring the right caption
40313
33:56:13,831 --> 33:56:17,511
up in here and you'll see that we have
40314
33:56:15,360 --> 33:56:20,399
to go through these steps in order to
40315
33:56:17,512 --> 33:56:22,720
create our application all right so i'm
40316
33:56:20,399 --> 33:56:25,271
gonna go in here and let's just say my
40317
33:56:26,720 --> 33:56:30,872
the default language let's just leave it
40318
33:56:28,320 --> 33:56:32,872
as english us and and it asks you is it
40319
33:56:30,872 --> 33:56:34,800
an app or a game then we're gonna say
40320
33:56:32,872 --> 33:56:36,320
it's an application and it's a free
40321
33:56:36,320 --> 33:56:41,440
and and and we're going to say it it
40322
33:56:38,800 --> 33:56:44,000
meets the developer policies and accept
40323
33:56:41,440 --> 33:56:46,832
us export laws okay and then we create
40324
33:56:44,000 --> 33:56:50,000
the application this may take some
40325
33:56:50,000 --> 33:56:53,831
what we need to do now is to go through
40326
33:56:53,831 --> 33:56:58,871
app access in here so i'm going to bring
40327
33:56:58,872 --> 33:57:02,800
so we need to go through let's see if
40328
33:57:01,119 --> 33:57:04,399
you can actually find the provided
40329
33:57:02,800 --> 33:57:05,680
information about your app and as you
40330
33:57:04,399 --> 33:57:07,271
can see it's right here provide
40331
33:57:05,679 --> 33:57:10,079
information about your app and set up
40332
33:57:07,271 --> 33:57:11,512
your store listening okay so i'm gonna
40333
33:57:10,080 --> 33:57:12,960
have a look at that and these are the
40334
33:57:11,512 --> 33:57:14,800
things you have to go through and we're
40335
33:57:12,960 --> 33:57:17,192
actually gonna go through this together
40336
33:57:14,800 --> 33:57:18,800
to in order to be able to create a
40337
33:57:17,191 --> 33:57:22,959
listing for your application so it's a
40338
33:57:18,800 --> 33:57:25,360
good check checklist basically um and
40339
33:57:22,960 --> 33:57:27,360
i have to say i mean i'm more used to
40340
33:57:25,360 --> 33:57:29,512
the app store connect interface it's a
40341
33:57:27,360 --> 33:57:31,039
little bit like less cluttered i find
40342
33:57:29,512 --> 33:57:32,800
google play console a little bit more
40343
33:57:31,039 --> 33:57:34,159
cluttered to be honest with you and
40344
33:57:34,160 --> 33:57:37,911
there are so much in your face but once
40345
33:57:36,551 --> 33:57:40,231
you get used to it i think you'll
40346
33:57:37,911 --> 33:57:42,080
understand the purpose and
40347
33:57:40,232 --> 33:57:44,320
and then you'll just as as long as you
40348
33:57:42,080 --> 33:57:46,872
know where to find things so in the
40349
33:57:44,320 --> 33:57:48,640
dashboard and for your application just
40350
33:57:46,872 --> 33:57:50,320
scroll down to set up your app provide
40351
33:57:48,639 --> 33:57:52,479
information here about your app instead
40352
33:57:50,320 --> 33:57:55,360
of your store listing and let's go to
40353
33:57:52,479 --> 33:57:57,831
app access and set that up okay
40354
33:57:55,360 --> 33:57:59,440
and then here is asking us okay is there
40355
33:57:57,831 --> 33:58:00,720
any restricted content that we're going
40356
33:58:00,720 --> 33:58:05,119
all functionalities available without
40357
33:58:02,399 --> 33:58:07,439
special access press the save button
40358
33:58:05,119 --> 33:58:09,271
and you can see for instance i saved it
40359
33:58:07,440 --> 33:58:11,360
and now i have to manually go back to
40360
33:58:09,271 --> 33:58:13,831
the dashboard it could have just saved
40361
33:58:11,360 --> 33:58:16,160
it and sent me back but no it doesn't do
40362
33:58:13,831 --> 33:58:18,551
that so app access is now crossed out as
40363
33:58:18,551 --> 33:58:22,800
let's go to the ad section so for the
40364
33:58:20,960 --> 33:58:25,040
ads we're gonna say no my app does not
40365
33:58:22,800 --> 33:58:27,360
contain ads okay press the save button
40366
33:58:29,911 --> 33:58:34,639
and let's go ahead and take care of
40367
33:58:33,039 --> 33:58:36,231
content rating and this is kind of like
40368
33:58:34,639 --> 33:58:38,080
what we have to do for app store connect
40369
33:58:36,232 --> 33:58:39,680
as well in order to for instance say our
40370
33:58:38,080 --> 33:58:41,119
application doesn't contain violence it
40371
33:58:41,119 --> 33:58:45,591
mature content etc so let's go to
40372
33:58:43,512 --> 33:58:47,271
content rating and say start
40373
33:58:47,271 --> 33:58:51,191
and let's just fill in our email address
40374
33:58:51,191 --> 33:58:58,080
provide if i can spell support
40375
33:58:58,080 --> 33:59:02,000
i have some problems right now
40376
33:59:04,639 --> 33:59:09,831
ab.sc and i believe yeah that's my
40377
33:59:09,831 --> 33:59:13,591
so i think that's that's the email i've
40378
33:59:11,512 --> 33:59:15,760
been using in app store connect as well
40379
33:59:15,759 --> 33:59:18,720
just double check that in my notes so
40380
33:59:17,512 --> 33:59:20,872
i'm gonna bring this into a separate
40381
33:59:18,720 --> 33:59:23,191
website just i'm gonna check this in my
40382
33:59:25,271 --> 33:59:28,551
it is actually so i'm not using this
40383
33:59:27,271 --> 33:59:30,720
anymore so let's just pick some of the
40384
33:59:28,551 --> 33:59:33,271
appointments and here you just have to
40385
33:59:30,720 --> 33:59:35,680
enter your own email so don't enter my
40386
33:59:33,271 --> 33:59:36,959
email here so this is in case they need
40387
33:59:35,679 --> 33:59:38,719
as you can see if in case they need to
40388
33:59:36,960 --> 33:59:41,272
contact you so the category of our
40389
33:59:38,720 --> 33:59:42,960
application we say all other app types
40390
33:59:41,271 --> 33:59:45,759
because it's not a game or social or a
40391
33:59:42,960 --> 33:59:47,680
communication application so next
40392
33:59:45,759 --> 33:59:49,911
does the app contain any rating
40393
33:59:47,679 --> 33:59:51,359
ratings relevant content downloaded as
40394
33:59:54,800 --> 33:59:58,400
and user accountant does the app
40395
33:59:56,639 --> 34:00:00,872
natively allow users to interact or
40396
33:59:58,399 --> 34:00:03,831
exchange content with other users
40397
34:00:00,872 --> 34:00:05,911
through the voice communication text no
40398
34:00:05,911 --> 34:00:08,872
online content does the app feature
40399
34:00:07,360 --> 34:00:10,960
promote content that isn't part of the
40400
34:00:08,872 --> 34:00:13,592
initial app download but can be accessed
40401
34:00:13,592 --> 34:00:18,232
promotion or sale of age restricted
40402
34:00:15,512 --> 34:00:19,760
products no miscellaneous does the app
40403
34:00:18,232 --> 34:00:21,911
share the user's current and precise
40404
34:00:21,911 --> 34:00:26,479
um does the app allow users to purchase
40405
34:00:24,000 --> 34:00:28,639
purchase digital goods no is the app a
40406
34:00:26,479 --> 34:00:29,591
web browser or search engine
40407
34:00:29,592 --> 34:00:35,360
is he a primarily a news or educational
40408
34:00:32,232 --> 34:00:37,760
product no okay so we save this
40409
34:00:35,360 --> 34:00:40,000
and we go to the next page summary and
40410
34:00:37,759 --> 34:00:43,039
you can see it says rating of 30 in
40411
34:00:43,039 --> 34:00:46,959
everyone can use this application rate
40412
34:00:46,960 --> 34:00:49,440
not sure to be honest with you with that
40413
34:00:59,512 --> 34:01:03,760
seems like it and then we can we can
40414
34:01:03,759 --> 34:01:08,231
okay and then let's go and take out our
40415
34:01:08,232 --> 34:01:16,639
and we say in here we choose 13
40416
34:01:13,119 --> 34:01:18,231
to 15 16 to 17 18 and over can also use
40417
34:01:16,639 --> 34:01:20,551
our application okay and this is kind of
40418
34:01:18,232 --> 34:01:22,639
like something you may decide on your
40419
34:01:20,551 --> 34:01:24,399
own whether like you you must add a
40420
34:01:22,639 --> 34:01:25,831
privacy policy target audience inclusion
40421
34:01:24,399 --> 34:01:28,399
or under 13 and that's why we're not
40422
34:01:25,831 --> 34:01:30,231
like targeting anybody under 13. and to
40423
34:01:28,399 --> 34:01:31,831
basically you may say oh my app's only
40424
34:01:30,232 --> 34:01:33,512
suitable for 18 and plus and that's
40425
34:01:31,831 --> 34:01:35,191
that's that's completely up to you and
40426
34:01:33,512 --> 34:01:37,191
you're more than welcome to do that but
40427
34:01:35,191 --> 34:01:40,799
i think our app is suitable even for 13
40428
34:01:37,191 --> 34:01:42,639
or even maybe less a 13 is quite a
40429
34:01:40,800 --> 34:01:44,479
basically like the sweet spot i would
40430
34:01:42,639 --> 34:01:46,479
say yeah because if you go lower than
40431
34:01:44,479 --> 34:01:48,800
that then you'll have to provide like
40432
34:01:46,479 --> 34:01:50,159
your privacy policy for those specific
40433
34:01:51,759 --> 34:01:55,591
and then we're gonna press the next
40434
34:01:53,592 --> 34:01:58,232
button and let's have a look in here
40435
34:01:55,592 --> 34:01:59,832
what's asking us to do appeal to
40436
34:01:58,232 --> 34:02:01,680
children could your store listing
40437
34:02:01,679 --> 34:02:05,759
appear to children and we say yes
40438
34:02:05,759 --> 34:02:10,479
um we may not want this app to be
40439
34:02:07,831 --> 34:02:12,871
appearing for children but it may appear
40440
34:02:10,479 --> 34:02:15,360
nonetheless so let's just say yes there
40441
34:02:12,872 --> 34:02:18,232
and in here you can see the target group
40442
34:02:15,360 --> 34:02:19,911
is 13 to 18. so that's great now we
40443
34:02:18,232 --> 34:02:22,232
saved it and let's go back to our
40444
34:02:19,911 --> 34:02:24,639
dashboard and you can see here a target
40445
34:02:27,039 --> 34:02:31,591
so let's go to the new section in here
40446
34:02:29,440 --> 34:02:33,040
news app is our app and news app and we
40447
34:02:33,039 --> 34:02:37,039
all right and then we save and go back
40448
34:02:35,271 --> 34:02:38,800
and you can see that the news app stuff
40449
34:02:38,800 --> 34:02:44,232
so let's now have a look at this covet
40450
34:02:40,720 --> 34:02:46,320
19 contact application and we say um
40451
34:02:44,232 --> 34:02:49,440
my app is not a publicly available code
40452
34:02:46,320 --> 34:02:52,160
with 19 contact tracing or status app so
40453
34:02:49,440 --> 34:02:54,320
save it and we say go back to dashboard
40454
34:02:52,160 --> 34:02:55,911
so that part of the application process
40455
34:02:55,911 --> 34:02:59,831
now we have to fill in the data safety
40456
34:02:58,080 --> 34:03:00,639
stuff so let's go through all of these
40457
34:03:00,639 --> 34:03:04,160
and this might take some time but that's
40458
34:03:02,232 --> 34:03:06,400
okay does your app collector share any
40459
34:03:04,160 --> 34:03:08,800
of the required user data types required
40460
34:03:06,399 --> 34:03:11,511
does your app collect or share any of
40461
34:03:12,960 --> 34:03:18,232
user data types what do they mean
40462
34:03:18,232 --> 34:03:22,232
personal information yeah we will
40463
34:03:19,911 --> 34:03:24,000
collect email addresses so yes of course
40464
34:03:25,512 --> 34:03:29,592
let's remove that is all of the user
40465
34:03:27,759 --> 34:03:31,679
data collected about your app encrypted
40466
34:03:29,592 --> 34:03:33,592
in transit yes and that's because we're
40467
34:03:31,679 --> 34:03:35,679
using firebase and that's using https so
40468
34:03:33,592 --> 34:03:37,271
that's encrypt in transit do you provide
40469
34:03:35,679 --> 34:03:39,911
a way for users to request that their
40470
34:03:37,271 --> 34:03:41,592
data is deleted no we don't do that and
40471
34:03:39,911 --> 34:03:43,512
i actually believe that it will be
40472
34:03:43,512 --> 34:03:47,440
so if you are curious about this and if
40473
34:03:45,592 --> 34:03:49,120
you want to allow the user for instance
40474
34:03:47,440 --> 34:03:50,872
to be able to do that you could you
40475
34:03:49,119 --> 34:03:51,831
could check that out and see how you can
40476
34:03:51,831 --> 34:03:56,000
their data to be deleted you can create
40477
34:03:53,759 --> 34:03:59,679
a separate view for that for instance
40478
34:03:56,000 --> 34:04:01,679
and from there you can you can basically
40479
34:03:59,679 --> 34:04:03,359
make an api call to firebase and delete
40480
34:04:01,679 --> 34:04:05,271
this user so you could do that if you
40481
34:04:03,360 --> 34:04:06,399
want to okay and i may actually provide
40482
34:04:06,399 --> 34:04:10,399
for that i don't know but at the moment
40483
34:04:10,399 --> 34:04:15,511
data types okay and let's have a look in
40484
34:04:15,512 --> 34:04:18,639
a quite a long time so let's have a look
40485
34:04:18,639 --> 34:04:22,479
data types you must select any user data
40486
34:04:20,960 --> 34:04:24,800
that's are collected okay we're not
40487
34:04:24,800 --> 34:04:29,760
personal information and we're
40488
34:04:29,759 --> 34:04:32,871
personal identifier that relates to an
40489
34:04:31,440 --> 34:04:35,512
identifiable person for example an
40490
34:04:32,872 --> 34:04:37,360
account id account number or account
40491
34:04:35,512 --> 34:04:38,320
name yeah personal identifiers yeah
40492
34:04:39,440 --> 34:04:43,360
and other personal info we're not
40493
34:04:41,592 --> 34:04:45,271
collecting so we only have a user id and
40494
34:04:43,360 --> 34:04:46,551
an email address and that's it
40495
34:04:45,271 --> 34:04:47,759
and we're not even asking for their
40496
34:04:52,320 --> 34:04:57,440
let's see what messages uh entails in
40497
34:04:57,440 --> 34:05:01,592
where do you go here messages
40498
34:05:01,592 --> 34:05:05,440
photos and videos audio files files and
40499
34:05:07,440 --> 34:05:10,960
a user's files or documents or any
40500
34:05:09,360 --> 34:05:13,831
information about a user's files or
40501
34:05:10,960 --> 34:05:15,192
documents for example file names yes
40502
34:05:13,831 --> 34:05:18,231
because we're storing actually their
40503
34:05:15,191 --> 34:05:20,871
files their notes so app activity no
40504
34:05:18,232 --> 34:05:22,800
contacts calendar no web browsing no
40505
34:05:20,872 --> 34:05:24,872
app info and performance no device or
40506
34:05:22,800 --> 34:05:27,360
other identifiers no so let's just then
40507
34:05:28,399 --> 34:05:33,511
not started so let's have a look at
40508
34:05:33,512 --> 34:05:38,720
process in here and we say select all
40509
34:05:36,080 --> 34:05:41,911
that apply is this data collected shared
40510
34:05:38,720 --> 34:05:44,872
or both it's only collected okay
40511
34:05:41,911 --> 34:05:47,271
and data collected in this way must
40512
34:05:44,872 --> 34:05:49,760
still be disclosed but will not be shown
40513
34:05:47,271 --> 34:05:51,592
to users on your store listing
40514
34:05:51,592 --> 34:05:55,760
ephemerally process family means that
40515
34:05:53,831 --> 34:05:58,159
the data is only stored in memory and is
40516
34:05:55,759 --> 34:06:00,799
retained for no longer than necessary so
40517
34:05:58,160 --> 34:06:01,911
no it is it is not stored only in the
40518
34:06:01,911 --> 34:06:05,191
and we say is this data required for
40519
34:06:03,679 --> 34:06:06,551
your application and in this case i
40520
34:06:05,191 --> 34:06:08,551
believe that we're talking about email
40521
34:06:06,551 --> 34:06:10,551
address and yes this data is required so
40522
34:06:08,551 --> 34:06:13,271
i'm just going to say yes it's required
40523
34:06:10,551 --> 34:06:15,440
why is the user data collected it's for
40524
34:06:17,512 --> 34:06:21,040
use for the setup and management of user
40525
34:06:19,360 --> 34:06:23,271
accounts actually yeah account
40526
34:06:21,039 --> 34:06:24,719
management so let's just say account
40527
34:06:25,679 --> 34:06:29,831
and then press the save button so now
40528
34:06:27,512 --> 34:06:31,680
we've submitted the email address and
40529
34:06:29,831 --> 34:06:33,360
while we're why we're using that so
40530
34:06:31,679 --> 34:06:35,119
let's go to personal identifiers now and
40531
34:06:33,360 --> 34:06:36,800
start that process so we say we are only
40532
34:06:36,800 --> 34:06:41,592
and because it's a user id and we're not
40533
34:06:39,440 --> 34:06:43,040
processing it ephemerally i think that's
40534
34:06:43,039 --> 34:06:48,871
and we say the data collection is
40535
34:06:44,960 --> 34:06:50,872
required and we say um it is used for
40536
34:06:48,872 --> 34:06:52,639
app functionality okay because we're
40537
34:06:50,872 --> 34:06:54,320
using the user identifier remember when
40538
34:06:52,639 --> 34:06:55,759
we store their notes so it's more for
40539
34:06:54,320 --> 34:06:57,040
app functionality than it is for
40540
34:06:57,039 --> 34:07:01,039
so that's why we do that and that is
40541
34:06:59,039 --> 34:07:03,191
completed now so let's go to files and
40542
34:07:01,039 --> 34:07:04,959
docs and have a look at this process
40543
34:07:04,960 --> 34:07:09,192
it is only collected but it is not
40544
34:07:06,960 --> 34:07:11,120
shared remember we are not sharing the
40545
34:07:09,191 --> 34:07:13,119
user's data even though we added that
40546
34:07:11,119 --> 34:07:14,959
sharing sheet for the user to share
40547
34:07:13,119 --> 34:07:17,119
their own information with someone else
40548
34:07:14,960 --> 34:07:19,680
but then that is their choice it is not
40549
34:07:17,119 --> 34:07:21,440
something that we are doing okay
40550
34:07:19,679 --> 34:07:23,911
is it then is this data processed
40551
34:07:21,440 --> 34:07:24,960
ephemerally then we say no and again i
40552
34:07:23,911 --> 34:07:26,319
don't know if that's the correct
40553
34:07:26,320 --> 34:07:30,000
and then is this data required for your
40554
34:07:28,639 --> 34:07:32,399
app and remember we're talking about
40555
34:07:30,000 --> 34:07:35,759
files and docs users can choose
40556
34:07:32,399 --> 34:07:37,911
whether this data is collected okay
40557
34:07:35,759 --> 34:07:39,831
because it is not something that we
40558
34:07:42,320 --> 34:07:48,640
collected then we say it is for
40559
34:07:48,639 --> 34:07:52,639
should i recommend it no account
40560
34:07:50,080 --> 34:07:55,271
management no so it is app functionality
40561
34:07:52,639 --> 34:07:57,679
we would say and we save it and that's
40562
34:07:55,271 --> 34:07:59,271
it so after you've done that we can just
40563
34:07:57,679 --> 34:08:00,959
go to the next screen and have a look at
40564
34:07:59,271 --> 34:08:02,319
this how it looks like you can actually
40565
34:08:00,960 --> 34:08:04,000
read about all the information that you
40566
34:08:04,000 --> 34:08:07,679
um and in here you can see at the bottom
40567
34:08:06,000 --> 34:08:10,399
of the screen says provide a link to
40568
34:08:07,679 --> 34:08:13,271
your privacy policy and and i have
40569
34:08:10,399 --> 34:08:15,911
already a privacy policy so i've um i
40570
34:08:13,271 --> 34:08:19,360
believe i have it in privacy policy text
40571
34:08:15,911 --> 34:08:21,440
so i'm gonna copy that and go to
40572
34:08:19,360 --> 34:08:23,039
privacy policy in here actually leave
40573
34:08:24,000 --> 34:08:28,160
so we may have to actually provide that
40574
34:08:25,759 --> 34:08:30,720
privacy policy i haven't yet done that
40575
34:08:28,160 --> 34:08:31,911
but we will have to do that
40576
34:08:31,911 --> 34:08:36,232
on the privacy policy page so yes we
40577
34:08:34,160 --> 34:08:38,639
need to we need to actually do that so
40578
34:08:38,639 --> 34:08:42,399
i actually don't want let's save this as
40579
34:08:42,399 --> 34:08:46,079
and then enter the privacy policy in
40580
34:08:44,399 --> 34:08:48,399
here and i'm just going to say https
40581
34:08:46,080 --> 34:08:50,479
let's just make sure it's https yes and
40582
34:08:48,399 --> 34:08:52,799
save that okay then i'm going to go back
40583
34:08:50,479 --> 34:08:55,360
to the dashboard in here where we were
40584
34:08:52,800 --> 34:08:59,592
for data safety we were at the end of
40585
34:08:55,360 --> 34:09:02,800
this so let's go to uh next um
40586
34:08:59,592 --> 34:09:05,440
next next next at the bottom of this now
40587
34:09:02,800 --> 34:09:06,720
we have our privacy policy so now we can
40588
34:09:05,440 --> 34:09:08,080
save this and let's see if there's
40589
34:09:06,720 --> 34:09:10,639
anything that we have to do in order to
40590
34:09:10,639 --> 34:09:15,271
it doesn't seem like it so it is
40591
34:09:12,960 --> 34:09:17,040
saved successfully so if we go back to
40592
34:09:15,271 --> 34:09:18,800
the dashboard and then have a look at
40593
34:09:17,039 --> 34:09:21,191
our data safety now we should be able to
40594
34:09:18,800 --> 34:09:23,760
see that it is crossed out so
40595
34:09:23,759 --> 34:09:30,080
so um data safety is done and now we
40596
34:09:27,440 --> 34:09:32,872
have to have a look at this app category
40597
34:09:30,080 --> 34:09:34,872
and provide contact details okay
40598
34:09:32,872 --> 34:09:37,680
so let's go in here to app category and
40599
34:09:34,872 --> 34:09:40,551
we say it is an app and it's category
40600
34:09:37,679 --> 34:09:42,159
let's just say utilities if they're if
40601
34:09:46,960 --> 34:09:52,480
communication education events food
40602
34:09:49,440 --> 34:09:54,479
house library blah blah medical news
40603
34:09:52,479 --> 34:09:57,271
personalization productivity perhaps
40604
34:09:54,479 --> 34:09:58,959
okay and then tags let's just say
40605
34:10:04,160 --> 34:10:09,040
notebook yeah let's just keep that okay
40606
34:10:07,039 --> 34:10:10,159
and you can choose more tags if you want
40607
34:10:12,960 --> 34:10:16,639
let's see store listing contact details
40608
34:10:15,191 --> 34:10:18,039
and email address i'm just going to say
40609
34:10:18,039 --> 34:10:24,319
pixelity.se phone number and i'm going
40610
34:10:20,872 --> 34:10:26,400
to enter some phone number in here
40611
34:10:24,320 --> 34:10:29,440
okay just a fake phone number for now
40612
34:10:32,800 --> 34:10:35,760
you may choose to advertise your
40613
34:10:34,479 --> 34:10:39,039
application outside of google play if
40614
34:10:35,759 --> 34:10:41,911
you want to and that's okay perhaps and
40615
34:10:39,039 --> 34:10:43,511
um before i save this i'm going to bring
40616
34:10:41,911 --> 34:10:45,191
the screen to another screen and
40617
34:10:43,512 --> 34:10:47,440
actually enter my real phone number okay
40618
34:10:45,191 --> 34:10:50,959
so i'm going to do that here let's see
40619
34:10:50,960 --> 34:10:56,080
it doesn't really seem to like the fact
40620
34:10:53,759 --> 34:10:58,159
that i dragged it to another screen now
40621
34:11:02,872 --> 34:11:07,271
it really doesn't like that i'm dragging
40622
34:11:04,960 --> 34:11:10,480
it to my ipad so i'm gonna bring it to
40623
34:11:10,720 --> 34:11:15,271
yes and so all i'm doing here is just to
40624
34:11:13,512 --> 34:11:16,400
enter that information so let me bring
40625
34:11:16,399 --> 34:11:20,551
and then let's see if you can press the
40626
34:11:18,551 --> 34:11:22,319
save button okay so all i did is just
40627
34:11:20,551 --> 34:11:24,159
move the screen to another
40628
34:11:22,320 --> 34:11:26,232
physical screen enter my real phone
40629
34:11:28,160 --> 34:11:35,680
stay safe your changes couldn't be saved
40630
34:11:31,831 --> 34:11:38,159
why not let me go and see if i
40631
34:11:35,679 --> 34:11:39,679
enter a valid oh i entered my phone
40632
34:11:38,160 --> 34:11:40,960
number incorrectly so i'm just gonna
40633
34:11:40,960 --> 34:11:44,400
and scroll to the top of the screen
40634
34:11:44,399 --> 34:11:51,911
and then let's go to all apps okay
40635
34:11:47,831 --> 34:11:54,319
oops i want to go back to my app here
40636
34:11:51,911 --> 34:11:57,679
so in here we're done with the select
40637
34:11:54,320 --> 34:12:00,320
app category so that's fantastic
40638
34:11:57,679 --> 34:12:03,591
now it's the juicy part we have to set
40639
34:12:03,592 --> 34:12:09,040
this is also actually going to be quite
40640
34:12:05,759 --> 34:12:11,439
a an important part of the setup process
40641
34:12:09,039 --> 34:12:13,511
so this may actually take some time but
40642
34:12:11,440 --> 34:12:15,911
that's okay and we're gonna take care of
40643
34:12:13,512 --> 34:12:17,911
that in due time so now we have to look
40644
34:12:15,911 --> 34:12:19,831
at setting up our store listening and
40645
34:12:17,911 --> 34:12:21,759
the store listening um is one of the
40646
34:12:19,831 --> 34:12:23,191
absolute core components or and the core
40647
34:12:21,759 --> 34:12:25,511
things we have to do in order to be able
40648
34:12:23,191 --> 34:12:28,319
to release our applications so let's go
40649
34:12:25,512 --> 34:12:30,320
to set up your store listing in here and
40650
34:12:28,320 --> 34:12:31,360
let's put a short description and say
40651
34:12:33,759 --> 34:12:37,759
okay and a full description with this
40652
34:12:37,759 --> 34:12:43,439
and you can store your notes in the
40653
34:12:40,399 --> 34:12:45,679
cloud okay so and also i strongly
40654
34:12:43,440 --> 34:12:48,000
suggest that you write some proper
40655
34:12:45,679 --> 34:12:49,759
description for these things and it is
40656
34:12:48,000 --> 34:12:52,960
also very important if you remember that
40657
34:12:49,759 --> 34:12:54,551
we used an icon for our application and
40658
34:12:54,551 --> 34:13:01,679
brought it from stock io so if you go in
40659
34:12:57,679 --> 34:13:04,079
here stock io and we use the sticky note
40660
34:13:01,679 --> 34:13:06,399
icon so it is important that in your
40661
34:13:04,080 --> 34:13:08,720
store description in both ios and
40662
34:13:08,720 --> 34:13:14,232
um app icon provided by and just give
40663
34:13:12,232 --> 34:13:16,552
some attribution to that okay so it's
40664
34:13:14,232 --> 34:13:18,639
very very important that you read these
40665
34:13:16,551 --> 34:13:20,872
things and also give attributions where
40666
34:13:20,872 --> 34:13:25,911
so now we come to the application icon
40667
34:13:23,831 --> 34:13:27,679
section and you can see in here that
40668
34:13:25,911 --> 34:13:29,759
says the application icon should be five
40669
34:13:27,679 --> 34:13:31,511
twelve by five twelve and we don't have
40670
34:13:29,759 --> 34:13:33,039
that unfortunately at the moment what we
40671
34:13:31,512 --> 34:13:35,271
have is a thousand twenty four by
40672
34:13:33,039 --> 34:13:36,959
thousand twenty four so if we go back to
40673
34:13:35,271 --> 34:13:39,119
our downloads for instance in here
40674
34:13:36,960 --> 34:13:40,872
you'll see that we downloaded our app
40675
34:13:39,119 --> 34:13:42,799
icons in one of the earlier chapters and
40676
34:13:40,872 --> 34:13:44,400
we have this app store image in here
40677
34:13:42,800 --> 34:13:46,000
which i believe is thousand twenty four
40678
34:13:44,399 --> 34:13:47,591
thousand twenty four at the moment so
40679
34:13:46,000 --> 34:13:49,592
what i'm gonna do is i'm gonna duplicate
40680
34:13:47,592 --> 34:13:51,271
this file command d on my macintosh on
40681
34:13:49,592 --> 34:13:52,960
windows and linux you may have to do
40682
34:13:51,271 --> 34:13:56,000
something else and if you have for
40683
34:13:56,000 --> 34:14:00,080
plus plus it's called paint.net or
40684
34:13:57,759 --> 34:14:01,831
something on windows you can also resize
40685
34:14:00,080 --> 34:14:03,360
your image but all you need to do is
40686
34:14:01,831 --> 34:14:04,551
just in your host operating system you
40687
34:14:03,360 --> 34:14:06,639
need to make sure that this image is
40688
34:14:04,551 --> 34:14:07,831
512512 so on the mac i'm just going to
40689
34:14:07,831 --> 34:14:11,191
it open on a separate screen and then
40690
34:14:09,360 --> 34:14:13,119
i'm going to go to tools and say adjust
40691
34:14:11,191 --> 34:14:14,871
size and i'm just going to say it is 5
40692
34:14:14,872 --> 34:14:20,232
these are the guidelines so in here i'm
40693
34:14:17,440 --> 34:14:22,551
just going to drop that file right there
40694
34:14:23,592 --> 34:14:28,552
okay so that's for your application icon
40695
34:14:28,551 --> 34:14:32,639
now we also need a it's a required feel
40696
34:14:31,271 --> 34:14:34,399
as you can see it is marked with an
40697
34:14:32,639 --> 34:14:36,080
asterisk in here and it's a future
40698
34:14:34,399 --> 34:14:38,159
graphing and future graphic is something
40699
34:14:36,080 --> 34:14:40,232
that a google play store can sometimes
40700
34:14:38,160 --> 34:14:43,040
use in for instance if your application
40701
34:14:40,232 --> 34:14:44,639
is featured on play store um
40702
34:14:43,039 --> 34:14:47,591
and they are going to use this image in
40703
34:14:47,592 --> 34:14:50,552
do an advertisement for applications so
40704
34:14:50,551 --> 34:14:54,800
guidelines for this and it should be you
40705
34:14:52,232 --> 34:14:56,800
can see it should be 1024x500
40706
34:14:54,800 --> 34:14:59,192
and since we don't have that we are
40707
34:14:56,800 --> 34:15:01,192
going to use our application icon in
40708
34:14:59,191 --> 34:15:02,479
order to create that future image so
40709
34:15:01,191 --> 34:15:04,231
what i think we should do is just to
40710
34:15:04,232 --> 34:15:09,040
and after our figma document is open
40711
34:15:06,872 --> 34:15:12,271
what we can do in here is to go and
40712
34:15:09,039 --> 34:15:14,639
create a little rectangle which was
40713
34:15:12,271 --> 34:15:17,039
1024x500 i believe the guidelines were
40714
34:15:14,639 --> 34:15:18,872
telling us to create it by so 1024 by
40715
34:15:17,039 --> 34:15:22,079
500 so i'm going to select this
40716
34:15:18,872 --> 34:15:24,320
rectangle and i say its width is 1024 by
40717
34:15:22,080 --> 34:15:26,639
and then height is 500 and what i like
40718
34:15:24,320 --> 34:15:29,440
to do is to go my trusty color palette
40719
34:15:29,440 --> 34:15:32,720
let's go to tokyo knight in here in
40720
34:15:31,360 --> 34:15:34,551
github as we've seen in previous
40721
34:15:32,720 --> 34:15:36,960
chapters i'm going to go scroll down a
40722
34:15:34,551 --> 34:15:38,639
little bit here and say that i have i
40723
34:15:36,960 --> 34:15:41,680
want the editor background color so it's
40724
34:15:38,639 --> 34:15:44,399
2428 3b and then i'm going to copy that
40725
34:15:41,679 --> 34:15:46,551
close the tab come here to figma and
40726
34:15:44,399 --> 34:15:48,231
change the fill color of this layer to
40727
34:15:46,551 --> 34:15:51,119
that so we're going to use this as our
40728
34:15:48,232 --> 34:15:53,440
background and what i'm going to do is
40729
34:15:51,119 --> 34:15:56,679
i'm going to go to our downloads folder
40730
34:15:56,679 --> 34:16:00,159
1024024 which we've downloaded in one of
40731
34:15:58,800 --> 34:16:01,360
the previous chapters so i'm gonna bring
40732
34:16:01,360 --> 34:16:05,039
then it is huge i'm gonna hold down the
40733
34:16:03,271 --> 34:16:07,119
shift key and then resize this
40734
34:16:05,039 --> 34:16:08,959
proportionally so kind of reset it to
40735
34:16:07,119 --> 34:16:10,639
something like this okay so i'm gonna
40736
34:16:08,960 --> 34:16:13,272
place it in the middle now i'm gonna
40737
34:16:10,639 --> 34:16:15,271
change the name of this to bg change the
40738
34:16:13,271 --> 34:16:17,592
name of this to icon by double clicking
40739
34:16:15,271 --> 34:16:20,319
on it and then i'm gonna create a text
40740
34:16:17,592 --> 34:16:21,440
field in here and save my awesome
40741
34:16:22,720 --> 34:16:27,271
bring these into three separate lines
40742
34:16:25,039 --> 34:16:30,000
like that and let's also make sure that
40743
34:16:27,271 --> 34:16:32,399
the fill color of this is white also
40744
34:16:30,000 --> 34:16:34,551
ensure as you can see like mine
40745
34:16:32,399 --> 34:16:37,759
it is right aligned then i'm gonna place
40746
34:16:34,551 --> 34:16:39,831
it somewhere here okay in the middle as
40747
34:16:37,759 --> 34:16:42,159
well and perhaps we could even increase
40748
34:16:39,831 --> 34:16:44,639
the size of the font so let's see what
40749
34:16:42,160 --> 34:16:47,440
we have here we have about 200 let's say
40750
34:16:44,639 --> 34:16:49,440
120 and it is a little bit bigger a
40751
34:16:47,440 --> 34:16:51,680
little bit bolder in your face kind of
40752
34:16:49,440 --> 34:16:53,680
stuff so and this is our text so this is
40753
34:16:51,679 --> 34:16:55,679
our text what i'm going to do in here
40754
34:16:56,720 --> 34:17:01,759
basically take these like bg icon and
40755
34:16:59,512 --> 34:17:03,440
text and then duplicate this bg in here
40756
34:17:01,759 --> 34:17:05,119
because this is going to be our mask i'm
40757
34:17:03,440 --> 34:17:06,800
going to grab grab it and bring it at
40758
34:17:05,119 --> 34:17:09,591
the bottom then i'm going to right click
40759
34:17:06,800 --> 34:17:11,592
it and say use as mask and now it has
40760
34:17:09,592 --> 34:17:13,360
its own group then i'm going to grab all
40761
34:17:11,592 --> 34:17:15,271
of these three layers and then drag them
40762
34:17:13,360 --> 34:17:17,360
here and now you can see that that mask
40763
34:17:15,271 --> 34:17:21,039
is basically masking off this entire
40764
34:17:17,360 --> 34:17:23,191
content so it's masking off our icon as
40765
34:17:21,039 --> 34:17:25,191
well so it looks pretty good to me it's
40766
34:17:23,191 --> 34:17:27,591
kind of proportional it's nice so then
40767
34:17:27,592 --> 34:17:32,832
and then in figma go to the bottom so if
40768
34:17:32,831 --> 34:17:38,231
um in here so you can see better perhaps
40769
34:17:35,831 --> 34:17:41,591
then scroll so make sure your mask group
40770
34:17:38,232 --> 34:17:43,832
is selected then go to export and then
40771
34:17:41,592 --> 34:17:46,000
we're gonna export it as one x and then
40772
34:17:43,831 --> 34:17:49,000
that is exported now so now we have our
40773
34:17:46,000 --> 34:17:52,160
image looking like this and it is
40774
34:17:52,160 --> 34:17:57,271
our play console google play console and
40775
34:17:55,119 --> 34:17:59,440
right where we have to uh throw this
40776
34:17:57,271 --> 34:18:01,679
feature graphic i'm going to go to
40777
34:17:59,440 --> 34:18:03,512
downloads and the image that we just
40778
34:18:01,679 --> 34:18:06,959
downloaded which is right here i'm gonna
40779
34:18:07,119 --> 34:18:10,720
so then that is working fine as well and
40780
34:18:10,720 --> 34:18:15,040
save my changes and something is wrong
40781
34:18:12,720 --> 34:18:16,872
with our changes some languages have
40782
34:18:16,872 --> 34:18:19,832
that's probably because we haven't
40783
34:18:18,080 --> 34:18:22,232
really uploaded any screenshots yet and
40784
34:18:19,831 --> 34:18:23,831
we're gonna take care of that soon so it
40785
34:18:23,831 --> 34:18:27,679
strange that it doesn't let me just let
40786
34:18:25,592 --> 34:18:30,000
me save my changes as a draft i have to
40787
34:18:27,679 --> 34:18:31,831
save this entire screen and since i
40788
34:18:30,000 --> 34:18:33,440
haven't entered some of the information
40789
34:18:31,831 --> 34:18:35,360
in the screen which is required it's not
40790
34:18:33,440 --> 34:18:38,000
allowing me to actually save it so but
40791
34:18:35,360 --> 34:18:39,911
we're gonna take care of that soon so um
40792
34:18:38,000 --> 34:18:41,831
what we need to do in here is to ensure
40793
34:18:39,911 --> 34:18:44,319
that we're first running our latest
40794
34:18:41,831 --> 34:18:45,271
application on the correct phone as well
40795
34:18:45,271 --> 34:18:49,039
let's see in here i'm going to bring our
40796
34:18:46,800 --> 34:18:50,960
source code in here and then i'm going
40797
34:18:49,039 --> 34:18:53,271
to say select the device and then i'm
40798
34:18:50,960 --> 34:18:55,120
going to choose my android phone all
40799
34:18:55,119 --> 34:18:59,191
that's that then i'm going to actually
40800
34:18:57,271 --> 34:19:01,039
grab my android phone let's see if i can
40801
34:18:59,191 --> 34:19:04,479
do it without causing too much problem
40802
34:19:01,039 --> 34:19:04,479
here on the screen like that
40803
34:19:08,800 --> 34:19:11,512
make sure it is connected to wi-fi as
40804
34:19:13,592 --> 34:19:19,832
my android phone is now set up
40805
34:19:16,872 --> 34:19:21,911
and let's then go ahead in our source
40806
34:19:23,911 --> 34:19:30,080
in our source code then i'm going to go
40807
34:19:25,759 --> 34:19:34,319
to main dark file if i can spell
40808
34:19:30,080 --> 34:19:36,872
dart file and in here in our terminal
40809
34:19:34,320 --> 34:19:39,192
i have two terminals so one i usually
40810
34:19:39,191 --> 34:19:43,679
scr cpy so i'm just going to say scr cpy
40811
34:19:42,232 --> 34:19:45,911
and that's going to bring up the android
40812
34:19:43,679 --> 34:19:47,911
phone up right there and since we've
40813
34:19:45,911 --> 34:19:49,831
selected that we can now just say run
40814
34:19:47,911 --> 34:19:51,591
without debugging so the goal in here is
40815
34:19:49,831 --> 34:19:53,759
to run the application on this
40816
34:19:53,759 --> 34:19:59,191
and have sdrcpy take screenshots for us
40817
34:19:56,872 --> 34:20:02,551
as you'll soon see so there's a really
40818
34:19:59,191 --> 34:20:04,479
good command called adb and adb is like
40819
34:20:02,551 --> 34:20:06,000
the low level and low level android
40820
34:20:06,000 --> 34:20:10,960
and by using adb you can actually
40821
34:20:10,960 --> 34:20:14,800
you know for instance your emulators
40822
34:20:13,039 --> 34:20:16,231
android emulators and your android
40823
34:20:18,080 --> 34:20:23,680
if you don't have adb you will actually
40824
34:20:20,399 --> 34:20:25,679
have to install it so if i say which adb
40825
34:20:23,679 --> 34:20:28,231
on my computer you can see that it says
40826
34:20:25,679 --> 34:20:30,159
it's homebrew bin adb basically telling
40827
34:20:28,232 --> 34:20:31,271
you that i've installed adb using
40828
34:20:31,271 --> 34:20:36,479
if you haven't a if you don't have adb
40829
34:20:33,831 --> 34:20:38,720
on your computer you may need to install
40830
34:20:36,479 --> 34:20:40,399
it if if what you're also doing is
40831
34:20:38,720 --> 34:20:42,160
following along with the steps that i'm
40832
34:20:40,399 --> 34:20:44,231
providing you meaning that you're taking
40833
34:20:42,160 --> 34:20:46,720
trying to take a screenshot with
40834
34:20:44,232 --> 34:20:48,872
from an actual device that is connected
40835
34:20:46,720 --> 34:20:50,872
to your computer okay so i can see now
40836
34:20:48,872 --> 34:20:53,271
that our application is running in scr
40837
34:20:50,872 --> 34:20:56,000
cpy looking like this so what we could
40838
34:20:53,271 --> 34:20:57,911
do is to issue the command as you saw so
40839
34:21:00,639 --> 34:21:08,479
exec out screen cap key and then we save
40840
34:21:04,720 --> 34:21:10,800
it into for instance file1.png
40841
34:21:08,479 --> 34:21:13,039
and if i have a look in visual studio
40842
34:21:10,800 --> 34:21:15,832
code you'll soon see now there is a file
40843
34:21:13,039 --> 34:21:17,439
stored here file1png and that is that
40844
34:21:15,831 --> 34:21:18,799
file with the screenshot of our
40845
34:21:18,800 --> 34:21:24,160
and then we can go to another screen for
40846
34:21:21,512 --> 34:21:25,119
instance the i forgot my password screen
40847
34:21:25,119 --> 34:21:31,119
and we could also send our keyboard down
40848
34:21:29,119 --> 34:21:32,639
kind of look like this and then we can
40849
34:21:32,639 --> 34:21:38,399
file to png so that's stored as well
40850
34:21:35,831 --> 34:21:40,551
let's go to the registration screen and
40851
34:21:38,399 --> 34:21:43,039
send the keyboard down and then let's
40852
34:21:40,551 --> 34:21:45,440
say file three png and also sending the
40853
34:21:43,039 --> 34:21:48,159
keyboard down or up or leaving it up it
40854
34:21:45,440 --> 34:21:49,832
is it is a it is a taste thing it is
40855
34:21:48,160 --> 34:21:52,552
completely up to you how you want to do
40856
34:21:49,831 --> 34:21:54,319
it okay so in here i'm going to go here
40857
34:21:54,320 --> 34:22:00,552
and actually log in with a real user
40858
34:21:58,000 --> 34:22:04,232
and go to the main screen of the
40859
34:22:00,551 --> 34:22:06,080
application i'm gonna take file for png
40860
34:22:04,232 --> 34:22:07,832
and then i'm going to go to one of my
40861
34:22:06,080 --> 34:22:09,831
notes in here with the keyboard up
40862
34:22:07,831 --> 34:22:11,591
perhaps in this case and then say file
40863
34:22:11,592 --> 34:22:16,720
and then i'm gonna say open so i'll see
40864
34:22:14,320 --> 34:22:19,120
all my png files in here then i'm going
40865
34:22:16,720 --> 34:22:21,759
to take those files and bring them to
40866
34:22:19,119 --> 34:22:24,959
desktop so they're not polluting the
40867
34:22:21,759 --> 34:22:26,720
workspace here in visual studio code
40868
34:22:24,960 --> 34:22:29,120
let's go back in here and you can see
40869
34:22:26,720 --> 34:22:31,512
that you can just drop drop
40870
34:22:29,119 --> 34:22:32,639
two phone or tablet screenshots in there
40871
34:22:32,639 --> 34:22:36,960
let's go ahead to my desktop folder
40872
34:22:34,872 --> 34:22:40,960
where i stored all those screenshots and
40873
34:22:36,960 --> 34:22:42,800
just drop all those images in here okay
40874
34:22:40,960 --> 34:22:46,160
and i can see them populated here i'm
40875
34:22:42,800 --> 34:22:47,512
gonna grab the login screen and see if
40876
34:22:46,160 --> 34:22:48,872
it can actually bring it first and
40877
34:22:47,512 --> 34:22:51,592
unfortunately here it's not allowing me
40878
34:22:48,872 --> 34:22:53,120
to drop things at the right order so
40879
34:22:51,592 --> 34:22:54,960
unfortunately i have to delete them and
40880
34:22:53,119 --> 34:22:57,831
like drop them at the right order so
40881
34:22:58,000 --> 34:23:02,399
and then i have to upload file too so it
40882
34:23:00,232 --> 34:23:04,320
is a little bit um strange that it
40883
34:23:06,551 --> 34:23:11,440
but perhaps there is a functionality for
40884
34:23:08,720 --> 34:23:14,800
that that i don't know about
40885
34:23:11,440 --> 34:23:17,191
so let's then say file four
40886
34:23:14,800 --> 34:23:19,512
and then we have to upload file five as
40887
34:23:23,271 --> 34:23:27,592
so that's that then what we need to take
40888
34:23:25,119 --> 34:23:30,319
care of now is to create a five inch
40889
34:23:27,592 --> 34:23:32,480
tablet and since i don't have a five
40890
34:23:30,320 --> 34:23:34,160
inch tablet here sitting around as a
40891
34:23:32,479 --> 34:23:38,000
physical device then we have to go and
40892
34:23:34,160 --> 34:23:39,832
create one so if we look at um here
40893
34:23:38,000 --> 34:23:42,399
visual studio code and go to flutter
40894
34:23:39,831 --> 34:23:44,551
select device you'll see that there are
40895
34:23:45,911 --> 34:23:50,319
tablets that i've created with
40896
34:23:50,320 --> 34:23:55,040
android studio so if you have android
40897
34:23:52,872 --> 34:23:56,872
studio you can always open it and
40898
34:23:58,160 --> 34:24:04,160
oh it did open it anyway so it's right
40899
34:24:00,160 --> 34:24:07,271
here you can always go i believe into um
40900
34:24:04,160 --> 34:24:08,960
avd manager which is the virtual device
40901
34:24:07,271 --> 34:24:10,720
manager and then create your virtual
40902
34:24:08,960 --> 34:24:13,680
device as you can see you need to create
40903
34:24:10,720 --> 34:24:15,831
a file is this seven inch and a 10.1
40904
34:24:13,679 --> 34:24:18,000
inch tablet because we're going to take
40905
34:24:15,831 --> 34:24:20,551
screenshots with these so what i'm going
40906
34:24:18,000 --> 34:24:22,960
to do actually is to launch both of
40907
34:24:20,551 --> 34:24:25,191
these tablets so that they're ready to
40908
34:24:22,960 --> 34:24:28,552
go when we need them so that's the first
40909
34:24:25,191 --> 34:24:31,039
tablet and i'm actually going to
40910
34:24:28,551 --> 34:24:33,679
turn it around so it is in the portrait
40911
34:24:31,039 --> 34:24:35,119
mode so that's that one and then i'm
40912
34:24:35,119 --> 34:24:41,191
avd manager here to run a second tablet
40913
34:24:38,872 --> 34:24:44,232
in here and that was extremely fast i
40914
34:24:41,191 --> 34:24:46,871
saw i don't even know how it did that
40915
34:24:44,232 --> 34:24:49,040
how could it run this tablet so fast a
40916
34:24:46,872 --> 34:24:51,440
little bit scary to be honest so
40917
34:24:49,039 --> 34:24:53,831
now that's sitting there um
40918
34:24:51,440 --> 34:24:56,232
let's see if it's gonna do its work
40919
34:24:53,831 --> 34:24:58,319
correctly though i can see the seven
40920
34:24:56,232 --> 34:25:00,320
inch tablet is not doing so well let's
40921
34:24:58,320 --> 34:25:03,760
see if i can close it and i'm gonna say
40922
34:25:00,320 --> 34:25:06,640
yes close so perhaps i should have i'm
40923
34:25:06,639 --> 34:25:11,271
and don't know if we're going to
40924
34:25:08,160 --> 34:25:13,911
actually be better off first running the
40925
34:25:11,271 --> 34:25:15,271
7-inch tablet and see if that is
40926
34:25:15,271 --> 34:25:19,440
maybe something happened in the
40927
34:25:16,872 --> 34:25:21,680
processing of the 10 inch as well as the
40928
34:25:26,000 --> 34:25:30,479
and i can see that this device isn't
40929
34:25:28,320 --> 34:25:32,400
really doing so well so i press the
40930
34:25:30,479 --> 34:25:34,399
power button on it here and i can see
40931
34:25:32,399 --> 34:25:35,759
now it is running so i'm going to press
40932
34:25:35,759 --> 34:25:40,479
and um orientation isn't really working
40933
34:25:42,551 --> 34:25:45,831
now maybe it's working a little bit
40934
34:25:44,160 --> 34:25:48,320
better so let's just leave it at that so
40935
34:25:45,831 --> 34:25:50,399
that's the seven inch display and it is
40936
34:25:48,320 --> 34:25:52,480
up and running then what i'm going to do
40937
34:25:50,399 --> 34:25:55,439
and the flutter daemon has terminated
40938
34:25:52,479 --> 34:25:57,911
that's completely fine reload it
40939
34:25:55,440 --> 34:26:00,960
then what we're going to do is to say
40940
34:26:00,960 --> 34:26:04,800
flutter select the vibe and that's
40941
34:26:03,271 --> 34:26:07,759
probably because the flutter demon
40942
34:26:04,800 --> 34:26:09,832
actually crashed on us here so i'm gonna
40943
34:26:07,759 --> 34:26:11,831
try one more time and if it doesn't work
40944
34:26:09,831 --> 34:26:12,959
then i'm going to quit visual studio
40945
34:26:12,960 --> 34:26:17,272
let me start visual studio code and
40946
34:26:17,271 --> 34:26:20,551
okay now that visual studio started
40947
34:26:19,119 --> 34:26:22,319
fresh let's just try again and say
40948
34:26:20,551 --> 34:26:24,399
flutter select device and this time i'm
40949
34:26:24,399 --> 34:26:29,591
android tablet then i'm going to say run
40950
34:26:27,512 --> 34:26:31,271
without debugging so let's see if we're
40951
34:26:29,592 --> 34:26:33,512
going to have any success running this
40952
34:26:31,271 --> 34:26:35,759
application in this tablet
40953
34:26:35,759 --> 34:26:40,159
is working well for us today then it's
40954
34:26:38,320 --> 34:26:42,640
going to allow us to do lse performing
40955
34:26:40,160 --> 34:26:45,440
stream install failed to install
40956
34:26:42,639 --> 34:26:47,759
launching application and sdk g phone 64
40957
34:26:45,440 --> 34:26:50,160
rm64 so there could be some problem with
40958
34:26:47,759 --> 34:26:51,679
this android tablet in here so i'm going
40959
34:26:51,679 --> 34:26:57,439
and i'm going to go back to android
40960
34:26:54,160 --> 34:27:00,400
studio if i can't find it somewhere here
40961
34:27:05,119 --> 34:27:09,679
and let's go in here then i'm going to
40962
34:27:09,679 --> 34:27:15,359
and let's have a look if we can close
40963
34:27:12,399 --> 34:27:18,000
these and kill these two tablets
40964
34:27:15,360 --> 34:27:20,080
completely like that like that
40965
34:27:18,000 --> 34:27:22,000
and while i'm at it i'm also going to
40966
34:27:20,080 --> 34:27:23,271
kill this one so i don't have any use
40967
34:27:22,000 --> 34:27:25,831
for that so i'm going to create a new
40968
34:27:23,271 --> 34:27:29,831
virtual device then i'm going to say
40969
34:27:25,831 --> 34:27:31,679
excuse me a tablet that is nexus 7 and 7
40970
34:27:33,119 --> 34:27:38,319
that is fine and it's thousand 200 by
40971
34:27:35,360 --> 34:27:39,831
nineteen twenty so what is required here
40972
34:27:40,720 --> 34:27:45,040
seven inch tablet screenshots okay
40973
34:27:43,512 --> 34:27:46,872
that's fantastic so it doesn't have
40974
34:27:45,039 --> 34:27:49,831
specific size requirements and then i'm
40975
34:27:51,831 --> 34:27:55,831
that is fine as well on portrait and
40976
34:27:55,831 --> 34:28:01,360
then let's see if he can run this
40977
34:28:01,440 --> 34:28:04,872
and if everything goes fine we're going
40978
34:28:02,960 --> 34:28:06,720
to see the welcome screen here i can see
40979
34:28:04,872 --> 34:28:08,800
google's logo so that's a great sign
40980
34:28:06,720 --> 34:28:10,720
always and i'm going to keep the screen
40981
34:28:10,720 --> 34:28:14,399
and while that is doing its work we're
40982
34:28:14,399 --> 34:28:19,759
flutter and i can see the emulator is up
40983
34:28:17,360 --> 34:28:21,759
now and i'm going to say select device
40984
34:28:19,759 --> 34:28:23,911
and i'm going to choose it here let's
40985
34:28:21,759 --> 34:28:26,159
then say run run without debugging and
40986
34:28:23,911 --> 34:28:28,551
see hopefully this time we have better
40987
34:28:26,160 --> 34:28:31,832
luck in running that application in the
40988
34:28:28,551 --> 34:28:34,319
given emulator so let's see
40989
34:28:31,831 --> 34:28:36,871
wow that went really fast actually it
40990
34:28:34,320 --> 34:28:38,800
went surprisingly fast so now it's
40991
34:28:36,872 --> 34:28:40,639
running in there and i can see our
40992
34:28:38,800 --> 34:28:42,800
application running in the emulator so
40993
34:28:40,639 --> 34:28:46,160
what we need to do in here is to
40994
34:28:42,800 --> 34:28:48,080
actually take some screenshots so um
40995
34:28:46,160 --> 34:28:50,400
when we need all you see here actually
40996
34:28:48,080 --> 34:28:53,040
we all have to provide 7-inch tablet
40997
34:28:50,399 --> 34:28:54,959
screenshots and we also have to fix the
40998
34:28:53,039 --> 34:28:56,719
10-inch tablet screenshot but what i
40999
34:28:56,720 --> 34:29:00,232
depending on the size of the screen at
41000
34:28:58,960 --> 34:29:02,639
the moment you can see everything is
41001
34:29:00,232 --> 34:29:04,552
working fine there's not a problem you
41002
34:29:02,639 --> 34:29:06,232
can go to register screen i also forgot
41003
34:29:04,551 --> 34:29:07,911
my password and all of these are working
41004
34:29:07,911 --> 34:29:13,271
we have a scrolling problem
41005
34:29:11,119 --> 34:29:14,799
and i can see in here that the seven
41006
34:29:13,271 --> 34:29:16,160
inch display i've mentioned at the
41007
34:29:14,800 --> 34:29:18,551
bottom of the screen that the seven inch
41008
34:29:16,160 --> 34:29:21,440
display could actually block the view
41009
34:29:18,551 --> 34:29:23,759
and that could be for instance because
41010
34:29:21,440 --> 34:29:25,592
um now in in this case is not actually
41011
34:29:23,759 --> 34:29:27,191
blocking the view but if you had a
41012
34:29:25,592 --> 34:29:28,960
smaller screen it could block the view
41013
34:29:27,191 --> 34:29:31,271
in that this screen as you can see is
41014
34:29:28,960 --> 34:29:33,832
not scrollable so if you had a smaller
41015
34:29:31,271 --> 34:29:36,479
screen then this keyboard could pop on
41016
34:29:33,831 --> 34:29:38,799
top of the content that you have in here
41017
34:29:36,479 --> 34:29:40,231
blocking the content so what we need to
41018
34:29:38,800 --> 34:29:42,479
do before we start taking some
41019
34:29:40,232 --> 34:29:44,720
screenshots from our android um tablet
41020
34:29:42,479 --> 34:29:46,800
let's go and fix these things up
41021
34:29:44,720 --> 34:29:48,639
let's first go to our verify email view
41022
34:29:46,800 --> 34:29:50,160
in our application oops i press the
41023
34:29:48,639 --> 34:29:52,800
launch button again by mistake sorry
41024
34:29:50,160 --> 34:29:56,480
about that i'm going to stop this
41025
34:29:52,800 --> 34:29:59,271
let's go to and verify email view and
41026
34:29:56,479 --> 34:30:00,800
you'll see in the code that the verify
41027
34:29:59,271 --> 34:30:02,959
email view state at the moment's return
41028
34:30:00,800 --> 34:30:04,400
is scaffold and it has a column in order
41029
34:30:02,960 --> 34:30:06,080
for this column to be vertically
41030
34:30:04,399 --> 34:30:08,639
scrollable all you have to do is just
41031
34:30:06,080 --> 34:30:10,551
wrap it with a widget and just say
41032
34:30:10,551 --> 34:30:14,720
world view as the notes indicate at the
41033
34:30:12,639 --> 34:30:17,440
bottom of the screen okay so that's the
41034
34:30:14,720 --> 34:30:20,399
scrolling down for that let's now go to
41035
34:30:17,440 --> 34:30:22,800
the login view so login view and wrap
41036
34:30:20,399 --> 34:30:26,000
the entire content in here in this
41037
34:30:22,800 --> 34:30:28,720
column and let's say wrap it with
41038
34:30:26,000 --> 34:30:30,232
a widget okay and i'm going to say
41039
34:30:30,232 --> 34:30:35,832
scroll view just like that okay
41040
34:30:34,080 --> 34:30:38,320
and i changed the screen layout a little
41041
34:30:35,831 --> 34:30:40,799
bit so you see the code better let's
41042
34:30:38,320 --> 34:30:43,120
then go to our register view as well so
41043
34:30:40,800 --> 34:30:46,000
register view and on top of the screen
41044
34:30:43,119 --> 34:30:48,231
we have the scaffold and a column so
41045
34:30:46,000 --> 34:30:50,800
let's also in this column say wrap it
41046
34:30:48,232 --> 34:30:53,440
with a widget of single child scroll
41047
34:30:50,800 --> 34:30:56,800
view alright and last but not least
41048
34:30:53,440 --> 34:30:58,639
we're gonna go to our forgot password
41049
34:30:56,800 --> 34:31:00,232
view and have a look at how we're
41050
34:30:58,639 --> 34:31:02,080
creating the screen we have a scaffold
41051
34:31:00,232 --> 34:31:04,232
padding column just like a standard
41052
34:31:02,080 --> 34:31:07,592
we've done in other places as well wrap
41053
34:31:04,232 --> 34:31:10,080
with widget in a single child
41054
34:31:07,592 --> 34:31:11,512
scroll view all right so that's that now
41055
34:31:10,080 --> 34:31:13,119
that we've done that we're actually
41056
34:31:11,512 --> 34:31:15,440
ready to launch this application again
41057
34:31:13,119 --> 34:31:17,360
so select device to nexus and then i'm
41058
34:31:15,440 --> 34:31:20,160
going to say run without debugging all
41059
34:31:17,360 --> 34:31:22,872
right so what we need to do now is to
41060
34:31:20,160 --> 34:31:24,960
use adb again the low level debugger for
41061
34:31:22,872 --> 34:31:27,512
android but this time we want to take
41062
34:31:24,960 --> 34:31:28,872
screenshots of an emulator as you saw in
41063
34:31:28,872 --> 34:31:32,800
section when we talked about taking
41064
34:31:30,320 --> 34:31:36,080
screenshots of an actual android phone
41065
34:31:32,800 --> 34:31:38,551
running in scr cpy we had to use adb as
41066
34:31:36,080 --> 34:31:40,800
well but we didn't have to tell it that
41067
34:31:38,551 --> 34:31:43,679
it is an emulator as you can see at the
41068
34:31:40,800 --> 34:31:47,040
bottom of the screen now if you specify
41069
34:31:43,679 --> 34:31:48,799
an e flag to adb then that indicates the
41070
34:31:47,039 --> 34:31:51,591
adb that you want to take a screenshot
41071
34:31:51,592 --> 34:31:56,000
here's that device running
41072
34:31:56,000 --> 34:32:00,960
and what we need to do now is to go to
41073
34:31:58,639 --> 34:32:03,440
command line and let me just do some
41074
34:32:05,271 --> 34:32:11,911
scrcpy and i'm gonna just do some screen
41075
34:32:08,551 --> 34:32:13,911
shuffling here so get rid of this
41076
34:32:15,592 --> 34:32:19,512
let's issue the command as you can see
41077
34:32:17,360 --> 34:32:21,831
at the bottom of the screen so
41078
34:32:24,551 --> 34:32:31,039
adb exit out but before that i'm just
41079
34:32:27,191 --> 34:32:34,080
gonna say dash e and screen cap
41080
34:32:36,551 --> 34:32:40,399
and if i now go to the project structure
41081
34:32:38,872 --> 34:32:42,639
i can see there is a file called file
41082
34:32:40,399 --> 34:32:45,831
one png and it is a screenshot from our
41083
34:32:42,639 --> 34:32:47,592
emulator okay so i'm gonna re
41084
34:32:45,831 --> 34:32:51,039
do the same thing i'm gonna go to forgot
41085
34:32:47,592 --> 34:32:52,960
my password screen and um let's get up
41086
34:32:51,039 --> 34:32:54,399
and get rid of the keyboard in here and
41087
34:32:52,960 --> 34:32:56,320
let's remove that space that i just
41088
34:32:54,399 --> 34:32:59,039
entered and then take the second
41089
34:32:59,039 --> 34:33:03,360
and then let's go to the login page and
41090
34:33:01,360 --> 34:33:05,191
the register page get rid of this
41091
34:33:05,191 --> 34:33:10,479
file free png okay so now that we have
41092
34:33:10,479 --> 34:33:15,360
i press the back button i'm going to
41093
34:33:12,720 --> 34:33:18,232
log into our application with my email
41094
34:33:18,232 --> 34:33:22,000
horrible password of foo barb ads now
41095
34:33:20,320 --> 34:33:25,512
we're in the application let's take a
41096
34:33:22,000 --> 34:33:28,160
fourth screenshot called file for png
41097
34:33:25,512 --> 34:33:30,080
and in here while this is up with the
41098
34:33:31,512 --> 34:33:37,512
and then take screen shot 5 or file 5
41099
34:33:35,191 --> 34:33:39,591
png so now we have 5 screenshots from
41100
34:33:37,512 --> 34:33:40,720
our 7 inch display as well
41101
34:33:40,720 --> 34:33:45,512
excuse me let's go and collect those
41102
34:33:42,720 --> 34:33:47,592
screenshots file one two five and then
41103
34:33:45,512 --> 34:33:50,400
i'm gonna delete the ones on desktop and
41104
34:33:47,592 --> 34:33:53,040
just cut and paste the ones from
41105
34:33:50,399 --> 34:33:54,799
our application then let's go to
41106
34:33:54,800 --> 34:33:59,440
our google play console in here in the
41107
34:33:57,271 --> 34:34:00,959
seven inch display i'm gonna drop these
41108
34:34:04,160 --> 34:34:08,639
and then let's drop file two right after
41109
34:34:06,479 --> 34:34:09,759
that and then we can say file three four
41110
34:34:09,759 --> 34:34:15,119
so i uh so that you know how um i'm
41111
34:34:13,512 --> 34:34:18,000
thinking about the ordering of the
41112
34:34:18,000 --> 34:34:23,119
so that's file four and then we have
41113
34:34:20,399 --> 34:34:25,591
file five right there and what we need
41114
34:34:23,119 --> 34:34:27,440
to do is we need to basically do the
41115
34:34:27,440 --> 34:34:32,551
a 10 inch display as you can see here it
41116
34:34:29,759 --> 34:34:34,319
says 10 inch tablet screenshot so let's
41117
34:34:34,320 --> 34:34:38,960
now we can close this emulator that is
41118
34:34:36,479 --> 34:34:41,759
right there then we can go back to
41119
34:34:38,960 --> 34:34:42,960
android studio so if i can find android
41120
34:34:42,960 --> 34:34:47,680
okay let's go to avd manager and in here
41121
34:34:46,320 --> 34:34:49,360
we're going to create a new virtual
41122
34:34:47,679 --> 34:34:52,399
device in this case it's going gonna say
41123
34:34:52,399 --> 34:34:57,679
is a 10 inch display i'm going to press
41124
34:34:54,320 --> 34:35:00,640
next and then sdk s that's fine as well
41125
34:34:57,679 --> 34:35:02,719
and just run it ooh landscape not sure
41126
34:35:02,720 --> 34:35:06,232
that's that may be fine but you know
41127
34:35:04,479 --> 34:35:07,831
what i'm actually going to delete it and
41128
34:35:06,232 --> 34:35:10,080
create a new one because we had some
41129
34:35:07,831 --> 34:35:13,039
problem before with the landscape mode
41130
34:35:10,080 --> 34:35:15,680
so i'm going to say nexus 10 again next
41131
34:35:13,039 --> 34:35:17,511
next portrait and then finish okay so
41132
34:35:15,679 --> 34:35:19,759
hopefully this starts it in the portrait
41133
34:35:17,512 --> 34:35:22,000
mode so then i'm gonna press the play
41134
34:35:19,759 --> 34:35:23,759
button right there and unfortunately it
41135
34:35:22,000 --> 34:35:25,512
started in the landscape mode but that's
41136
34:35:23,759 --> 34:35:27,439
okay hopefully we're gonna be able to
41137
34:35:27,440 --> 34:35:33,832
and i can see now it is running
41138
34:35:33,911 --> 34:35:39,759
and we should see now the home screen
41139
34:35:36,479 --> 34:35:42,231
let's see if we can rotate this uh
41140
34:35:39,759 --> 34:35:44,319
and unfortunately it doesn't actually
41141
34:35:42,232 --> 34:35:46,720
rotate so i want to see if there's any
41142
34:35:44,320 --> 34:35:48,552
properties in here that allows us to
41143
34:35:48,551 --> 34:35:55,512
from landscape to portrait so
41144
34:35:52,160 --> 34:35:57,832
snapshots recording settings enabled
41145
34:35:59,512 --> 34:36:04,320
nope nothing in there that allows us to
41146
34:36:05,271 --> 34:36:10,479
directional pad no it doesn't change the
41147
34:36:10,479 --> 34:36:15,191
landscape to portrait and i am now
41148
34:36:12,720 --> 34:36:17,680
basically trying anything i can so even
41149
34:36:15,191 --> 34:36:20,639
if i go to chrome in here for instance
41150
34:36:17,679 --> 34:36:22,639
and say no thanks and then if i rotate
41151
34:36:20,639 --> 34:36:25,911
this i can see that it's unfortunately
41152
34:36:22,639 --> 34:36:27,592
not rotating the actual application so
41153
34:36:27,592 --> 34:36:33,360
take a screenshot in landscape mode so
41154
34:36:31,360 --> 34:36:34,960
let's see if if you can actually do that
41155
34:36:33,360 --> 34:36:36,639
so if there's anybody out there who
41156
34:36:34,960 --> 34:36:38,960
knows how to fix this issue i'd be
41157
34:36:38,960 --> 34:36:42,480
because at the moment even doing the
41158
34:36:40,960 --> 34:36:44,232
command right and left it's not
41159
34:36:42,479 --> 34:36:46,800
listening to my commands it's not
41160
34:36:44,232 --> 34:36:48,320
basically rotating so how about this
41161
34:36:48,320 --> 34:36:52,800
um well that didn't help so so much to
41162
34:36:54,232 --> 34:36:59,512
it didn't really i mean i can go here
41163
34:36:57,039 --> 34:37:01,439
and then here oh now it's portrait okay
41164
34:36:59,512 --> 34:37:02,960
i did something so i just clicked on a
41165
34:37:01,440 --> 34:37:05,271
little icon on the top left after
41166
34:37:02,960 --> 34:37:07,192
rotating so it rotated to portrait so
41167
34:37:07,191 --> 34:37:11,360
let's go to visual studio code and say
41168
34:37:09,039 --> 34:37:13,039
command shift p on a macintosh or ctrl
41169
34:37:11,360 --> 34:37:15,119
shift p in linux and windows and save
41170
34:37:13,039 --> 34:37:16,799
flash or select device choose our 10
41171
34:37:16,800 --> 34:37:20,400
then i'm going to say run run without
41172
34:37:20,399 --> 34:37:24,720
everything is working correctly and
41173
34:37:22,320 --> 34:37:27,272
gradle's working in our favor then then
41174
34:37:24,720 --> 34:37:29,191
the gradle task is going to go by really
41175
34:37:27,271 --> 34:37:30,720
fast and i'm very grateful actually for
41176
34:37:30,720 --> 34:37:35,759
so gradle is working a lot better now
41177
34:37:32,639 --> 34:37:38,080
than xcode build process so here's our
41178
34:37:35,759 --> 34:37:40,551
application and displayed on a 10 inch
41179
34:37:38,080 --> 34:37:42,160
display and let's go ahead and start
41180
34:37:40,551 --> 34:37:44,231
taking some screenshots so i'm going to
41181
34:37:42,160 --> 34:37:46,400
go to terminal here and then start
41182
34:37:46,399 --> 34:37:51,831
file one in the login view then let's go
41183
34:37:51,831 --> 34:37:55,679
file two i'm gonna get rid of the
41184
34:37:53,831 --> 34:37:57,679
keyboard and take the screenshot without
41185
34:37:55,679 --> 34:37:59,511
the keyboard i'm gonna go here to the
41186
34:37:57,679 --> 34:38:03,039
register view get rid of the
41187
34:37:59,512 --> 34:38:06,872
keyboard and then say file three so
41188
34:38:03,039 --> 34:38:10,079
that's that let's not log in with a user
41189
34:38:06,872 --> 34:38:11,760
um like this and say foobar baz
41190
34:38:10,080 --> 34:38:13,592
log in with that user oh wrong
41191
34:38:18,000 --> 34:38:21,039
and after logging in we're going to take
41192
34:38:19,679 --> 34:38:23,191
another screenshot which is our
41193
34:38:21,039 --> 34:38:24,639
screenshot 4 and then we're going to
41194
34:38:23,191 --> 34:38:27,911
take another screenshot with the
41195
34:38:30,720 --> 34:38:34,551
that is also that then i'm going to open
41196
34:38:33,039 --> 34:38:36,871
the current folder i can see five
41197
34:38:34,551 --> 34:38:38,872
screenshots in here go to my desktop get
41198
34:38:36,872 --> 34:38:40,872
rid of the old ones and paste the new
41199
34:38:40,872 --> 34:38:44,800
okay now that we have those we can clean
41200
34:38:44,800 --> 34:38:49,832
emulator we don't have it and i'm also
41201
34:38:47,119 --> 34:38:51,911
going to close avd i can see it's
41202
34:38:49,831 --> 34:38:55,511
already closed so let's go back to
41203
34:38:57,911 --> 34:39:04,080
console so i'm gonna upload
41204
34:39:00,080 --> 34:39:06,160
this new um png file file one then file
41205
34:39:04,080 --> 34:39:08,000
two for the ten inch tablet so all of
41206
34:39:06,160 --> 34:39:10,080
these five screenshots are for the ten
41207
34:39:11,119 --> 34:39:17,119
and then we're gonna go to four here
41208
34:39:14,960 --> 34:39:19,512
and then last but not least we're gonna
41209
34:39:17,119 --> 34:39:21,271
upload screenshot five and then right
41210
34:39:19,512 --> 34:39:22,872
after the upload is done i'm just going
41211
34:39:21,271 --> 34:39:25,039
to delete all those files to keep my
41212
34:39:22,872 --> 34:39:26,639
desktop clean so after doing that let's
41213
34:39:25,039 --> 34:39:29,271
just then save this and now you can see
41214
34:39:26,639 --> 34:39:31,440
it says your changes have been saved
41215
34:39:34,800 --> 34:39:40,720
we need to create a release app so if i
41216
34:39:37,592 --> 34:39:42,720
just bring my notes up a little bit here
41217
34:39:42,720 --> 34:39:46,320
what we need to do we need to have a
41218
34:39:44,080 --> 34:39:47,680
look at a little url here as you can see
41219
34:39:46,320 --> 34:39:50,800
at the bottom of the screen it's called
41220
34:39:47,679 --> 34:39:53,119
docslatter dev deployment android it is
41221
34:39:50,800 --> 34:39:55,040
a very important document and here i
41222
34:39:53,119 --> 34:39:57,360
strongly suggest anybody who's trying to
41223
34:39:55,039 --> 34:39:59,191
create a release application to go
41224
34:39:57,360 --> 34:40:01,759
through this it has information for
41225
34:39:59,191 --> 34:40:05,831
windows and macintosh and linux users
41226
34:40:01,759 --> 34:40:07,679
and these commands are absolutely um
41227
34:40:07,679 --> 34:40:11,911
you may have to google these otherwise
41228
34:40:09,512 --> 34:40:15,680
around but this document has really put
41229
34:40:11,911 --> 34:40:17,591
all of that together in the same place
41230
34:40:15,679 --> 34:40:19,359
so as you can see in here the first
41231
34:40:17,592 --> 34:40:21,912
thing that we need to do is to create a
41232
34:40:19,360 --> 34:40:25,039
signing key for our application
41233
34:40:21,911 --> 34:40:26,872
and you need to follow these um
41234
34:40:25,039 --> 34:40:30,159
commands in here that have been created
41235
34:40:26,872 --> 34:40:32,320
for you so you can see and if i bring a
41236
34:40:32,320 --> 34:40:37,040
terminal and i'll bring it up here and
41237
34:40:34,080 --> 34:40:40,080
if i go to this folder dot android on my
41238
34:40:37,039 --> 34:40:42,719
computer like this and i already have
41239
34:40:40,080 --> 34:40:44,800
some keys as you can see in here so i
41240
34:40:42,720 --> 34:40:46,720
have some keys already set up but in
41241
34:40:47,592 --> 34:40:53,912
be able to follow along with this
41242
34:40:50,800 --> 34:40:56,720
and guide we need to go and create these
41243
34:40:53,911 --> 34:40:59,440
keys for us as well okay so what i'm
41244
34:40:56,720 --> 34:41:01,512
going to do is i'm going to do
41245
34:40:59,440 --> 34:41:03,040
let's see if i can bring up the command
41246
34:41:01,512 --> 34:41:05,191
for you as you can see at the bottom of
41247
34:41:03,039 --> 34:41:06,871
the screen so i'm going to actually copy
41248
34:41:05,191 --> 34:41:09,039
that command that i provided for you at
41249
34:41:06,872 --> 34:41:11,512
the bottom of the screen okay
41250
34:41:09,039 --> 34:41:14,479
so and i'm going to go to terminal and
41251
34:41:11,512 --> 34:41:16,800
um let's just go to desktop for instance
41252
34:41:14,479 --> 34:41:18,639
and then i'm going to issue that command
41253
34:41:16,800 --> 34:41:20,320
exactly as you can see at the bottom of
41254
34:41:18,639 --> 34:41:22,720
the screen so let's see what happens in
41255
34:41:20,320 --> 34:41:24,480
here now it says enter a key store
41256
34:41:22,720 --> 34:41:26,872
password so this is a password that you
41257
34:41:24,479 --> 34:41:28,639
need to then provide inside a property
41258
34:41:26,872 --> 34:41:31,040
file i'll tell you soon about it so
41259
34:41:28,639 --> 34:41:32,319
remember this password up until this
41260
34:41:31,039 --> 34:41:34,399
point for this course we've been using
41261
34:41:32,320 --> 34:41:36,320
foobar baz as a password is an
41262
34:41:34,399 --> 34:41:38,319
absolutely horrible password so please
41263
34:41:36,320 --> 34:41:40,000
don't use that but since we've used it
41264
34:41:38,320 --> 34:41:42,232
consistently in this course and since
41265
34:41:40,000 --> 34:41:44,320
the password in this sense has no
41266
34:41:42,232 --> 34:41:46,320
meaning for this course i'm just going
41267
34:41:44,320 --> 34:41:48,640
to say foo bar pass but please don't use
41268
34:41:46,320 --> 34:41:50,640
a password as weak as that so
41269
34:41:50,639 --> 34:41:55,191
and let's see what it said java as a
41270
34:41:53,119 --> 34:41:56,959
keystore was tampered with or password
41271
34:41:56,960 --> 34:42:01,912
um it this could perhaps be because i'm
41272
34:41:59,831 --> 34:42:04,551
actually trying to create an upload key
41273
34:42:01,911 --> 34:42:06,720
store like this and i already have one
41274
34:42:04,551 --> 34:42:08,800
from before so what i'm going to do is
41275
34:42:06,720 --> 34:42:10,960
to actually delete this file so i'm
41276
34:42:08,800 --> 34:42:13,680
going to say remove that file okay
41277
34:42:10,960 --> 34:42:15,360
upload keystore like that and i'm going
41278
34:42:13,679 --> 34:42:18,319
to issue this command again and i'm
41279
34:42:18,320 --> 34:42:22,552
and fubarba so if you if you've already
41280
34:42:20,872 --> 34:42:24,872
had a key store from before then you
41281
34:42:22,551 --> 34:42:27,591
could just use it but i'm assuming that
41282
34:42:24,872 --> 34:42:30,160
you didn't have one however when i did
41283
34:42:27,592 --> 34:42:32,160
issue this command i already had one so
41284
34:42:30,160 --> 34:42:33,760
chances are you didn't have a keystore
41285
34:42:32,160 --> 34:42:35,832
from before you didn't you didn't have
41286
34:42:33,759 --> 34:42:37,911
to delete it but in my case i actually
41287
34:42:35,831 --> 34:42:39,119
have to delete it first and then issue
41288
34:42:37,911 --> 34:42:41,039
the command that you can see in the
41289
34:42:39,119 --> 34:42:42,551
caption at the bottom of the screen so
41290
34:42:41,039 --> 34:42:44,719
what is your first and last name i'm
41291
34:42:42,551 --> 34:42:45,591
just going to save and i have andy poor
41292
34:42:45,592 --> 34:42:50,720
and your organization unit i'm just
41293
34:42:50,720 --> 34:42:55,759
and then name of your organization is
41294
34:42:52,479 --> 34:42:58,080
pixelity a b okay city or locality okay
41295
34:42:55,759 --> 34:43:01,039
i can just say stockholm okay
41296
34:42:58,080 --> 34:43:03,831
and state or okay stockholm again let's
41297
34:43:01,039 --> 34:43:07,439
see uh two letter country code i'm gonna
41298
34:43:03,831 --> 34:43:09,759
say s e and it is saying is it correct
41299
34:43:07,440 --> 34:43:11,512
then i'm gonna press the enter button
41300
34:43:09,759 --> 34:43:13,759
uh i've already entered all of that
41301
34:43:11,512 --> 34:43:17,271
maybe i made a mistake in here so let's
41302
34:43:13,759 --> 34:43:20,080
just say what was the question
41303
34:43:17,271 --> 34:43:22,720
correct no do i have to type yes i'm
41304
34:43:22,720 --> 34:43:26,232
you have to provide yes at the end of
41305
34:43:24,232 --> 34:43:29,832
that and then what is the same return if
41306
34:43:26,232 --> 34:43:32,800
same as keystore password yes just enter
41307
34:43:29,831 --> 34:43:34,551
okay so now it's created a key store
41308
34:43:32,800 --> 34:43:38,080
for us in here you can see in the
41309
34:43:34,551 --> 34:43:40,959
android folder upload keystore jks okay
41310
34:43:38,080 --> 34:43:43,040
so that's very very important
41311
34:43:40,960 --> 34:43:44,872
now that that has been created what we
41312
34:43:43,039 --> 34:43:46,639
need to do is to have if you had
41313
34:43:44,872 --> 34:43:48,800
followed this you can see that what we
41314
34:43:46,639 --> 34:43:51,271
need to do now is to go to our flutter
41315
34:43:48,800 --> 34:43:52,872
project in here you see it says go to
41316
34:43:53,759 --> 34:43:58,479
and go to the android folder and create
41317
34:43:55,512 --> 34:44:01,832
a file called key dot properties okay so
41318
34:43:58,479 --> 34:44:04,080
let's go ahead and create that so i'm
41319
34:44:01,831 --> 34:44:06,959
going to open visual studio code in here
41320
34:44:04,080 --> 34:44:08,639
and then i'm going to go to cd
41321
34:44:06,960 --> 34:44:10,480
and let's see where we are at the moment
41322
34:44:10,479 --> 34:44:14,319
root folder of our project standard
41323
34:44:12,320 --> 34:44:16,232
project i'm gonna go to the android
41324
34:44:14,320 --> 34:44:18,400
folder as it was suggested there and
41325
34:44:16,232 --> 34:44:20,639
then i'm gonna create a new file as it
41326
34:44:18,399 --> 34:44:23,511
was called here key dot properties okay
41327
34:44:20,639 --> 34:44:24,479
so key dot properties like this and then
41328
34:44:24,479 --> 34:44:28,872
paste that content that was mentioned
41329
34:44:30,479 --> 34:44:34,959
so maybe the entire content so i'm just
41330
34:44:32,872 --> 34:44:37,120
gonna paste it in here okay so it says
41331
34:44:34,960 --> 34:44:40,000
password for previous step from previous
41332
34:44:37,119 --> 34:44:42,720
step and we just said fubar bass
41333
34:44:40,000 --> 34:44:45,191
like that and the key password as well
41334
34:44:42,720 --> 34:44:46,960
and again that is foo bar bass the key
41335
34:44:45,191 --> 34:44:49,039
alias we're going to leave it as upload
41336
34:44:46,960 --> 34:44:52,160
and in here we're going to say the file
41337
34:44:49,039 --> 34:44:54,719
was stored in let's see if you can get
41338
34:44:52,160 --> 34:44:57,592
the entire path for this so it's right
41339
34:44:54,720 --> 34:45:01,191
here so i'm going to copy that path path
41340
34:44:57,592 --> 34:45:03,192
sorry and then i'm going to delete this
41341
34:45:01,191 --> 34:45:05,679
information in here and then paste it
41342
34:45:05,679 --> 34:45:10,399
so that should be good to go so i'm just
41343
34:45:08,232 --> 34:45:12,552
gonna double check in my notes as well
41344
34:45:10,399 --> 34:45:14,959
that that is how we've done it before as
41345
34:45:12,551 --> 34:45:16,231
well and that seems to be completely
41346
34:45:16,232 --> 34:45:20,080
then after doing that with an empty line
41347
34:45:18,232 --> 34:45:23,040
at the end i'm going to close this file
41348
34:45:20,080 --> 34:45:24,720
and save its contents right there so now
41349
34:45:23,039 --> 34:45:26,799
if you go to the main folder of your
41350
34:45:24,720 --> 34:45:28,479
application and say git status then you
41351
34:45:28,479 --> 34:45:33,512
have only these things basically
41352
34:45:31,039 --> 34:45:35,119
committing to your project because your
41353
34:45:33,512 --> 34:45:36,551
key properties are not going to be
41354
34:45:37,759 --> 34:45:41,119
and that's that's why i'm mentioning
41355
34:45:39,679 --> 34:45:43,439
here that you always need to make sure
41356
34:45:41,119 --> 34:45:45,440
that that particular file is not going
41357
34:45:43,440 --> 34:45:48,000
to be committed with your project into
41358
34:45:45,440 --> 34:45:50,232
github so you could always go to your
41359
34:45:48,000 --> 34:45:52,160
git ignore file and actually add that
41360
34:45:50,232 --> 34:45:55,192
particular file to your ignore so let's
41361
34:45:55,191 --> 34:46:00,039
not get ignore and in here we're just
41362
34:45:57,512 --> 34:46:02,639
going to add a new file and say any
41363
34:46:00,039 --> 34:46:04,639
key.properties file should not be
41364
34:46:02,639 --> 34:46:06,872
committed and then we do a good status
41365
34:46:04,639 --> 34:46:09,119
again that our get ignore is changed if
41366
34:46:06,872 --> 34:46:12,080
you're paranoid like me you will do it
41367
34:46:12,080 --> 34:46:17,759
so after doing that what we need to do
41368
34:46:14,399 --> 34:46:19,119
is to in fact create basically
41369
34:46:19,119 --> 34:46:23,271
sorry we have to update our build gradle
41370
34:46:23,271 --> 34:46:30,000
i provide a link which i'm going to go
41371
34:46:33,592 --> 34:46:38,320
configure signing in gradle and that is
41372
34:46:38,320 --> 34:46:42,400
and it is telling us exactly what to do
41373
34:46:40,720 --> 34:46:44,232
it says add the keystore information
41374
34:46:42,399 --> 34:46:46,871
from your properties file before the
41375
34:46:44,232 --> 34:46:49,760
android block you see this android block
41376
34:46:46,872 --> 34:46:52,479
in here so what we need to do is to go
41377
34:46:49,759 --> 34:46:55,679
to this file in our project android app
41378
34:46:52,479 --> 34:47:00,080
build gradle so visual studio code
41379
34:46:55,679 --> 34:47:02,479
let's go to um build.gradle in android
41380
34:47:00,080 --> 34:47:04,160
app all right so we're there and what
41381
34:47:02,479 --> 34:47:06,080
did it say that we have to find this
41382
34:47:06,080 --> 34:47:11,040
so let's find the android block right
41383
34:47:08,000 --> 34:47:13,831
there it's just one so right there then
41384
34:47:11,039 --> 34:47:16,000
let's copy this text as it is mentioned
41385
34:47:13,831 --> 34:47:18,959
there and paste it right before android
41386
34:47:16,000 --> 34:47:19,831
okay boom and i'm going to bring it one
41387
34:47:22,479 --> 34:47:27,271
basically formatted correctly okay so
41388
34:47:24,639 --> 34:47:28,872
that's that part and it says then load
41389
34:47:27,271 --> 34:47:30,551
the key.properties file into the
41390
34:47:28,872 --> 34:47:32,872
keystore properties object and that's
41391
34:47:30,551 --> 34:47:35,191
what this guy is doing okay then what we
41392
34:47:32,872 --> 34:47:37,271
need to do it says find the build types
41393
34:47:35,191 --> 34:47:39,591
block so let's go and find that you can
41394
34:47:37,271 --> 34:47:41,759
see the release we're gonna basically
41395
34:47:39,592 --> 34:47:44,080
edit that as well so i'm gonna go to my
41396
34:47:41,759 --> 34:47:45,591
notes as well build gradle uh sorry
41397
34:47:44,080 --> 34:47:48,400
about that just to ensure that i'm
41398
34:47:45,592 --> 34:47:50,872
following all the steps correctly
41399
34:47:48,399 --> 34:47:52,479
and in here it says release to do add
41400
34:47:50,872 --> 34:47:54,080
your own signing config for the release
41401
34:47:52,479 --> 34:47:56,639
build signing with the debug key for now
41402
34:47:54,080 --> 34:47:59,271
so flutter run release works and it says
41403
34:47:56,639 --> 34:48:02,319
then replace that with this so you just
41404
34:47:59,271 --> 34:48:04,872
have to grab this information here and
41405
34:48:02,320 --> 34:48:06,640
just completely replace this build types
41406
34:48:04,872 --> 34:48:09,512
with that thing that was provided i'm
41407
34:48:06,639 --> 34:48:12,160
gonna fix the uh indentation a little
41408
34:48:09,512 --> 34:48:14,320
bit as well so here the key alias
41409
34:48:12,160 --> 34:48:17,271
password are being read from the correct
41410
34:48:14,320 --> 34:48:19,760
place and then the release is signed
41411
34:48:17,271 --> 34:48:22,000
with the release key in here
41412
34:48:19,759 --> 34:48:24,551
and that is it really so you don't have
41413
34:48:22,000 --> 34:48:26,320
to do so much more and what we're gonna
41414
34:48:24,551 --> 34:48:27,759
do now is to as you can see at the
41415
34:48:26,320 --> 34:48:30,000
bottom of the screen we're gonna do some
41416
34:48:27,759 --> 34:48:32,399
cleaning up of the um of the build
41417
34:48:30,000 --> 34:48:35,440
artifact so in your project you need to
41418
34:48:32,399 --> 34:48:37,831
now go to terminal here as you can see
41419
34:48:35,440 --> 34:48:40,479
for on my screen so i'm just going to go
41420
34:48:48,960 --> 34:48:53,760
and we're then going to say flutter
41421
34:48:59,039 --> 34:49:02,639
and after doing that we're actually
41422
34:49:02,639 --> 34:49:07,039
um create our app bundle so after doing
41423
34:49:05,271 --> 34:49:09,360
flutter pop get then you have to issue
41424
34:49:09,360 --> 34:49:14,160
so by issuing this command you can see
41425
34:49:12,320 --> 34:49:16,320
now it is going to start building your
41426
34:49:14,160 --> 34:49:17,832
application with griddle using all those
41427
34:49:16,320 --> 34:49:19,680
properties that you've specified in
41428
34:49:17,831 --> 34:49:21,360
those various files so there was a lot
41429
34:49:19,679 --> 34:49:24,000
of work that we have to do but
41430
34:49:21,360 --> 34:49:26,320
thankfully it's been documented so well
41431
34:49:24,000 --> 34:49:28,639
that it makes the whole process so much
41432
34:49:26,320 --> 34:49:30,960
easier had it not been for all those
41433
34:49:28,639 --> 34:49:33,191
documentation bits and pieces it would
41434
34:49:30,960 --> 34:49:34,800
have been such a difficult process to go
41435
34:49:33,191 --> 34:49:38,399
through so let's just wait for this
41436
34:49:34,800 --> 34:49:40,000
build gradle process to now do its work
41437
34:49:38,399 --> 34:49:41,911
and all right now you can see that the
41438
34:49:40,000 --> 34:49:44,960
process has gone through it has created
41439
34:49:41,911 --> 34:49:46,639
our little app bundle which is this aab
41440
34:49:46,639 --> 34:49:50,960
and what we need to do is to be able to
41441
34:49:48,399 --> 34:49:54,079
then upload this app bundle to google
41442
34:49:50,960 --> 34:49:55,440
play store so let's go back to our play
41443
34:49:54,080 --> 34:49:56,960
store and here i'm going to close this
41444
34:49:56,960 --> 34:50:01,192
and let's now go back to our dashboard
41445
34:50:01,191 --> 34:50:05,831
and you can see my awesome notes and
41446
34:50:05,831 --> 34:50:11,759
going on in here and what we need to do
41447
34:50:08,080 --> 34:50:15,360
is to go to our production in here and
41448
34:50:11,759 --> 34:50:17,191
and then create a new release okay so
41449
34:50:15,360 --> 34:50:19,271
press the create new new release in
41450
34:50:17,191 --> 34:50:21,440
there and you can see now it asks you to
41451
34:50:19,271 --> 34:50:23,191
upload your app bundle so what i'm going
41452
34:50:21,440 --> 34:50:25,832
to do is to go back to visual studio
41453
34:50:23,191 --> 34:50:29,271
code and see where this file is located
41454
34:50:25,831 --> 34:50:31,679
so i'm going to open that folder and i
41455
34:50:29,271 --> 34:50:34,959
can see the aab here and i'm going to
41456
34:50:31,679 --> 34:50:37,271
then drag it in here and place it there
41457
34:50:39,360 --> 34:50:43,592
after this upload is done it may take
41458
34:50:41,759 --> 34:50:45,191
some time i can see it's 25 megabytes
41459
34:50:43,592 --> 34:50:47,440
although i'm at a thousand thousand line
41460
34:50:45,191 --> 34:50:49,440
um fiber optic network in here it's
41461
34:50:47,440 --> 34:50:50,720
taking like a while to upload i don't
41462
34:50:50,720 --> 34:50:54,551
but in the release name as you can see
41463
34:50:52,399 --> 34:50:56,959
it says that well this is not something
41464
34:50:54,551 --> 34:50:59,512
um that we actually share with anybody
41465
34:50:56,960 --> 34:51:03,120
so let's just say um first we call it
41466
34:50:59,512 --> 34:51:05,512
first version okay so and in here for
41467
34:51:03,119 --> 34:51:07,119
your release notes you will basically
41468
34:51:05,512 --> 34:51:10,400
copy from a previous release well we
41469
34:51:07,119 --> 34:51:12,000
don't have that listen here just say um
41470
34:51:15,271 --> 34:51:19,911
and then we can save this information
41471
34:51:21,592 --> 34:51:27,760
so now we have that um we have the first
41472
34:51:30,320 --> 34:51:33,592
that should be it so let's just go to
41473
34:51:32,000 --> 34:51:34,800
the review release in here and we have
41474
34:51:33,592 --> 34:51:36,872
one error that's probably because we
41475
34:51:34,800 --> 34:51:39,040
haven't provided the countries
41476
34:51:36,872 --> 34:51:40,720
and add at least one country or region
41477
34:51:39,039 --> 34:51:44,000
and that's fine we're gonna we're gonna
41478
34:51:40,720 --> 34:51:46,399
add that so let's go and see
41479
34:51:44,000 --> 34:51:48,399
overview where we have to add these
41480
34:51:46,399 --> 34:51:49,911
countries if we can't figure it out
41481
34:51:49,911 --> 34:51:56,160
let's click in there android okay
41482
34:51:58,399 --> 34:52:02,959
we need to go to under production and
41483
34:52:01,191 --> 34:52:04,799
all the countries or release as you can
41484
34:52:02,960 --> 34:52:07,360
see in google play a console under
41485
34:52:04,800 --> 34:52:09,040
production so i believe we're already
41486
34:52:07,360 --> 34:52:11,119
under production so if i click under
41487
34:52:09,039 --> 34:52:13,271
production now we can see countries and
41488
34:52:11,119 --> 34:52:15,039
regions so let's go in there and say add
41489
34:52:13,271 --> 34:52:16,319
countries and regions and i believe we
41490
34:52:16,320 --> 34:52:20,400
hopefully select all countries
41491
34:52:20,399 --> 34:52:24,079
sell such good make sure your price for
41492
34:52:22,000 --> 34:52:26,080
the countries well can we not sell oh
41493
34:52:26,080 --> 34:52:30,400
if i click here i can select all the
41494
34:52:28,399 --> 34:52:32,799
countries so let's do that and say add
41495
34:52:30,399 --> 34:52:34,399
countries and regions and then press the
41496
34:52:34,399 --> 34:52:39,511
then we're gonna go to our releases
41497
34:52:40,639 --> 34:52:44,872
we have this release so let's go to the
41498
34:52:44,872 --> 34:52:48,400
okay that's fine and then i'm gonna
41499
34:52:48,399 --> 34:52:51,831
and i'm gonna press the review release
41500
34:52:50,399 --> 34:52:53,119
now that we've selected all those
41501
34:52:51,831 --> 34:52:54,639
countries we have one warning the app
41502
34:52:53,119 --> 34:52:56,399
bundle contains native code and if
41503
34:52:54,639 --> 34:52:57,831
you've not uploaded debug symbols okay
41504
34:52:56,399 --> 34:52:59,511
and these debug symbols is something
41505
34:52:57,831 --> 34:53:01,679
that i actually encourage you to go read
41506
34:52:59,512 --> 34:53:05,271
about because these are gonna allow you
41507
34:53:01,679 --> 34:53:07,191
to see when whenever and if there is any
41508
34:53:05,271 --> 34:53:08,160
crashes in your application occurring
41509
34:53:08,160 --> 34:53:11,192
where your users are using your
41510
34:53:11,191 --> 34:53:15,119
i would really suggest that you do this
41511
34:53:13,440 --> 34:53:16,800
and upload your d box symbols although
41512
34:53:15,119 --> 34:53:18,959
that's something that i believe is
41513
34:53:16,800 --> 34:53:20,479
outside the scope of this course but it
41514
34:53:18,960 --> 34:53:21,912
should be quite straightforward for you
41515
34:53:20,479 --> 34:53:24,479
to figure it out and there's link in
41516
34:53:21,911 --> 34:53:26,551
here that you can read more about it
41517
34:53:24,479 --> 34:53:29,039
so now we can start the rollout to
41518
34:53:26,551 --> 34:53:31,119
production and then say rollout
41519
34:53:29,039 --> 34:53:33,119
and you'll see now this is going to go
41520
34:53:33,119 --> 34:53:38,159
and google uh cons like at the play
41521
34:53:35,759 --> 34:53:40,551
console could take some while some time
41522
34:53:38,160 --> 34:53:42,080
to rel to review the first version of
41523
34:53:40,551 --> 34:53:44,319
our application some people said it
41524
34:53:42,080 --> 34:53:46,320
takes upwards of a week and for me it's
41525
34:53:44,320 --> 34:53:48,160
some sometimes actually taking about
41526
34:53:48,160 --> 34:53:51,911
depending on what you've done like that
41527
34:53:50,320 --> 34:53:53,760
your track record from before if you
41528
34:53:51,911 --> 34:53:56,232
release any applications from before you
41529
34:53:53,759 --> 34:53:58,551
may actually be able to be placed
41530
34:53:56,232 --> 34:54:00,160
somewhere first in the queue or maybe
41531
34:53:58,551 --> 34:54:01,679
last i don't know i don't know their
41532
34:54:01,679 --> 34:54:05,039
um and that that was really in that was
41533
34:54:03,759 --> 34:54:06,479
like the releasing of our android
41534
34:54:05,039 --> 34:54:08,479
application and we went through quite a
41535
34:54:06,479 --> 34:54:10,800
lot even figma design in the middle of
41536
34:54:08,479 --> 34:54:12,720
everything so congratulations for going
41537
34:54:10,800 --> 34:54:14,872
through this together with me
41538
34:54:12,720 --> 34:54:16,399
since we've changed some code let's go
41539
34:54:16,399 --> 34:54:21,039
um actually commits all our changes so
41540
34:54:18,872 --> 34:54:23,120
i'm going to say good status
41541
34:54:23,119 --> 34:54:28,000
properties file the key properties file
41542
34:54:25,039 --> 34:54:28,871
is not added so let's just say git add
41543
34:54:28,872 --> 34:54:32,960
and then i'm going to say git commit
41544
34:54:34,872 --> 34:54:38,872
and if you have a look at our logs we
41545
34:54:36,320 --> 34:54:41,272
have step 30 and 31 so let's push those
41546
34:54:38,872 --> 34:54:45,192
changes to our remote and then i'm going
41547
34:54:41,271 --> 34:54:46,479
to say get a tag also step 31
41548
34:54:51,039 --> 34:54:56,799
that was it now you've released your
41549
34:54:52,800 --> 34:54:59,760
application for ios and android and um
41550
34:54:56,800 --> 34:55:02,960
this this could perhaps be the last
41551
34:54:59,759 --> 34:55:05,119
thing that you will um learn about in
41552
34:55:02,960 --> 34:55:07,120
this course right now as it is if you're
41553
34:55:05,119 --> 34:55:10,000
one of the early adopters of this course
41554
34:55:07,119 --> 34:55:12,231
but i'm planning on putting out a lot
41555
34:55:10,000 --> 34:55:15,271
more videos that i'm going to append to
41556
34:55:12,232 --> 34:55:18,232
this course with a lot more material so
41557
34:55:15,271 --> 34:55:20,479
stay tuned and i may actually see you in
41558
34:55:18,232 --> 34:55:22,960
the next chapter hello everyone and
41559
34:55:20,479 --> 34:55:24,800
welcome to this chapter in the previous
41560
34:55:22,960 --> 34:55:25,760
chapters as you've been following along
41561
34:55:25,759 --> 34:55:29,119
course you know that we've created our
41562
34:55:27,360 --> 34:55:30,720
application and we've also released it
41563
34:55:30,720 --> 34:55:35,191
for ios and also google's play store
41564
34:55:37,119 --> 34:55:41,271
i mean any application or any software
41565
34:55:39,679 --> 34:55:43,039
is not something that you will do and
41566
34:55:41,271 --> 34:55:45,191
it's just finished every application has
41567
34:55:43,039 --> 34:55:47,679
to live on and there will be you will
41568
34:55:45,191 --> 34:55:50,551
add new functionalities to it and then
41569
34:55:47,679 --> 34:55:52,639
um you kind of have to keep it alive
41570
34:55:50,551 --> 34:55:53,591
just as i will keep this course live
41571
34:55:52,639 --> 34:55:55,679
you'll also have to keep your
41572
34:55:53,592 --> 34:55:56,872
application alive so one of the things
41573
34:55:55,679 --> 34:55:59,271
that you might want to add to your
41574
34:56:02,720 --> 34:56:05,440
i mean if you haven't done software
41575
34:56:03,831 --> 34:56:07,039
development before you may not know what
41576
34:56:07,039 --> 34:56:12,231
localization in um short form is the
41577
34:56:10,160 --> 34:56:15,271
process of you making your application
41578
34:56:12,232 --> 34:56:16,872
more accessible to other people in
41579
34:56:16,872 --> 34:56:21,360
than the one for instance that um
41580
34:56:21,360 --> 34:56:24,872
up until this point we've been creating
41581
34:56:22,960 --> 34:56:27,120
our application with a user interface
41582
34:56:27,119 --> 34:56:31,512
but you may not be even from england you
41583
34:56:29,512 --> 34:56:34,400
may not be from australia or us you may
41584
34:56:31,512 --> 34:56:37,271
just speak the language english
41585
34:56:34,399 --> 34:56:39,119
and um for instance i live in sweden so
41586
34:56:37,271 --> 34:56:41,360
the application that we have developed
41587
34:56:39,119 --> 34:56:43,360
right now isn't really accessible to
41588
34:56:43,360 --> 34:56:47,680
even though most people in sweden speak
41589
34:56:45,271 --> 34:56:50,399
very fluent english however it's not
41590
34:56:50,399 --> 34:56:54,551
localization is um the process of making
41591
34:56:53,191 --> 34:56:56,000
your application more accessible to
41592
34:56:54,551 --> 34:56:57,679
those people who don't speak the
41593
34:56:56,000 --> 34:56:59,191
language that you've designed for your
41594
34:57:01,512 --> 34:57:06,160
about the language and the text that
41595
34:57:04,000 --> 34:57:07,512
you're using it also entails a lot of
41596
34:57:07,512 --> 34:57:10,800
includes many other things for instance
41597
34:57:12,720 --> 34:57:16,320
currency and values in your application
41598
34:57:14,720 --> 34:57:18,320
now we don't have like a shopping basket
41599
34:57:16,320 --> 34:57:20,400
or anything we don't have an e-commerce
41600
34:57:18,320 --> 34:57:22,232
application and that we've developed so
41601
34:57:20,399 --> 34:57:24,639
far so there's nothing for the user to
41602
34:57:22,232 --> 34:57:26,000
purchase in the application but
41603
34:57:26,000 --> 34:57:29,512
if you were developing an application
41604
34:57:27,759 --> 34:57:30,639
where the user could for instance buy
41605
34:57:30,639 --> 34:57:33,759
your shopping basket would need to for
41606
34:57:33,759 --> 34:57:38,720
the amount um for um like the product
41607
34:57:41,360 --> 34:57:46,399
currency so if you're for instance
41608
34:57:43,440 --> 34:57:48,000
presenting the ui to a person in sweden
41609
34:57:46,399 --> 34:57:49,591
that person doesn't expect to see for
41610
34:57:48,000 --> 34:57:51,191
instance prices in dollars they would
41611
34:57:49,592 --> 34:57:52,160
expect to see prices in the swedish
41612
34:57:52,160 --> 34:57:56,872
and um or if for instance you're doing
41613
34:57:54,960 --> 34:57:59,040
this application for someone in
41614
34:57:56,872 --> 34:58:01,192
england you'd probably want to do
41615
34:58:01,191 --> 34:58:05,440
british pound i think or just pound
41616
34:58:05,440 --> 34:58:10,080
localization is a lot more than just
41617
34:58:08,399 --> 34:58:12,720
changing the text of our application but
41618
34:58:10,080 --> 34:58:14,479
since our application doesn't have any
41619
34:58:12,720 --> 34:58:16,000
of those things we're not presenting any
41620
34:58:14,479 --> 34:58:17,360
dates for instance at the moment we're
41621
34:58:17,360 --> 34:58:22,399
any currencies or values like that then
41622
34:58:19,592 --> 34:58:26,320
for us it in it basically means only
41623
34:58:22,399 --> 34:58:27,591
changing the text of our application
41624
34:58:26,320 --> 34:58:29,680
so what we're going to do in this
41625
34:58:32,551 --> 34:58:36,159
we're going to do it in two languages so
41626
34:58:34,479 --> 34:58:37,591
for english which we've already done so
41627
34:58:36,160 --> 34:58:39,512
far which is the text that we've
41628
34:58:37,592 --> 34:58:41,592
provided for the user interface of the
41629
34:58:39,512 --> 34:58:43,191
application to this point and we're also
41630
34:58:41,592 --> 34:58:44,960
going to do it in swedish now you don't
41631
34:58:43,191 --> 34:58:46,799
have to know swedish in order to be able
41632
34:58:44,960 --> 34:58:48,160
to go through this chapter i'm going to
41633
34:58:46,800 --> 34:58:49,592
help you with that and there's a github
41634
34:58:48,160 --> 34:58:51,832
repository for this project that you can
41635
34:58:51,831 --> 34:58:56,319
the swedish text for instance
41636
34:58:54,320 --> 34:58:57,832
you don't have to even write swedish at
41637
34:58:56,320 --> 34:58:59,360
all you don't even have to follow along
41638
34:58:57,831 --> 34:59:00,799
writing the exact text that i'm writing
41639
34:58:59,360 --> 34:59:03,039
for instance in swedish you can just put
41640
34:59:00,800 --> 34:59:04,479
some gibberish in there because
41641
34:59:03,039 --> 34:59:05,759
all you have to do really is just to
41642
34:59:04,479 --> 34:59:07,679
understand the concepts of what
41643
34:59:05,759 --> 34:59:08,871
localization entails for your
41644
34:59:07,679 --> 34:59:10,399
application how you can do it with
41645
34:59:08,872 --> 34:59:11,440
flutter and then when it comes to
41646
34:59:10,399 --> 34:59:13,271
actually localizing your own
41647
34:59:11,440 --> 34:59:16,080
applications then you can for instance
41648
34:59:13,271 --> 34:59:17,759
choose um bangladeshi or if you want to
41649
34:59:16,080 --> 34:59:21,440
choose any language in india for
41650
34:59:17,759 --> 34:59:23,119
instance or um or do if in pakistan or
41651
34:59:23,119 --> 34:59:27,911
language you choose to basically go for
41652
34:59:26,399 --> 34:59:29,039
so you don't have to really know swedish
41653
34:59:27,911 --> 34:59:29,759
that's what i'm that's what i'm saying
41654
34:59:29,759 --> 34:59:33,679
um also as you can see at the bottom of
41655
34:59:32,000 --> 34:59:35,512
the screen localization could also be
41656
34:59:33,679 --> 34:59:37,759
for languages that are not traditionally
41657
34:59:37,759 --> 34:59:41,831
um arabic so those languages are written
41658
34:59:41,831 --> 34:59:45,911
there will need to be some special
41659
34:59:43,440 --> 34:59:47,911
considerations made into um
41660
34:59:45,911 --> 34:59:50,319
code for you if you're trying to support
41661
34:59:47,911 --> 34:59:51,759
right to left languages like for c
41662
34:59:51,759 --> 34:59:55,191
so for instance a name of a person
41663
34:59:55,191 --> 34:59:59,440
you may want to be able for instance if
41664
34:59:57,191 --> 35:00:00,639
you're presenting a list of famous
41665
35:00:00,639 --> 35:00:04,800
that for instance the user can read
41666
35:00:02,479 --> 35:00:06,319
about those names may not have to
41667
35:00:06,320 --> 35:00:11,360
um presented in arabic names like
41668
35:00:09,360 --> 35:00:12,720
they're like their spelling doesn't
41669
35:00:11,360 --> 35:00:14,160
necessarily have to be arabic it could
41670
35:00:14,160 --> 35:00:17,911
for instance an age of a person like if
41671
35:00:15,911 --> 35:00:19,039
you were saying bill gates you could
41672
35:00:17,911 --> 35:00:21,119
write the name in english even though
41673
35:00:19,039 --> 35:00:23,271
the language of user user interface is
41674
35:00:21,119 --> 35:00:25,191
arabic but the age of that person if
41675
35:00:23,271 --> 35:00:28,479
you're presenting then it might need to
41676
35:00:25,191 --> 35:00:30,871
be translated in like um numerical
41677
35:00:28,479 --> 35:00:33,039
values that are under understood by
41678
35:00:30,872 --> 35:00:34,960
whoever speaks that language
41679
35:00:34,960 --> 35:00:37,680
what i'm trying to say is that if you're
41680
35:00:36,551 --> 35:00:39,360
trying to support right-to-left
41681
35:00:37,679 --> 35:00:41,679
languages you may have to take into
41682
35:00:39,360 --> 35:00:43,360
consideration those points that i just
41683
35:00:41,679 --> 35:00:44,319
mentioned but in this chapter we're not
41684
35:00:43,360 --> 35:00:46,399
going to do that we're just going to
41685
35:00:44,320 --> 35:00:50,000
cover english and swedish and those both
41686
35:00:51,831 --> 35:00:55,439
the documentation because the
41687
35:00:53,039 --> 35:00:58,959
documentation for localization of a
41688
35:00:55,440 --> 35:01:01,040
fluster application is very thorough
41689
35:00:58,960 --> 35:01:03,120
and i highly suggest that after watching
41690
35:01:01,039 --> 35:01:05,679
this chapter and learning about it
41691
35:01:03,119 --> 35:01:07,512
from my perspective i think it is very
41692
35:01:05,679 --> 35:01:10,159
very important that you actually have a
41693
35:01:10,160 --> 35:01:15,760
the official become documentation i'll
41694
35:01:11,759 --> 35:01:18,000
try to open with a tab in here so um
41695
35:01:15,759 --> 35:01:19,511
i'll bring it to the screen so you'll
41696
35:01:24,479 --> 35:01:28,872
screen a little bit like this sorry i
41697
35:01:26,551 --> 35:01:31,512
have to do some rearrangement so you see
41698
35:01:28,872 --> 35:01:34,000
the screen better so as you can see here
41699
35:01:31,512 --> 35:01:35,512
it's an official documentation for
41700
35:01:34,000 --> 35:01:38,639
accessibility localization and
41701
35:01:35,512 --> 35:01:39,440
international internationalization
41702
35:01:40,399 --> 35:01:44,871
you'll see some terms sometimes for
41703
35:01:42,639 --> 35:01:47,119
instance and during internationalization
41704
35:01:44,872 --> 35:01:50,160
and localization you'll see some terms
41705
35:01:50,160 --> 35:01:56,800
and sometimes you'll also see l 10 n and
41706
35:01:54,800 --> 35:01:59,592
you'll be wondering like what are these
41707
35:01:56,800 --> 35:02:03,040
things what does it even mean l 10 n
41708
35:01:59,592 --> 35:02:05,160
and the reason for like what i 18n
41709
35:02:16,399 --> 35:02:21,439
and then if you take 1 2 3 4 5 6 7 8 9
41710
35:02:21,440 --> 35:02:26,960
one two three four five six seven eight
41711
35:02:24,080 --> 35:02:28,320
so 18 total number of characters between
41712
35:02:28,320 --> 35:02:35,440
so it is known then to write i 18 n just
41713
35:02:32,720 --> 35:02:37,271
to refer to internationalization
41714
35:02:35,440 --> 35:02:39,360
and the same thing is true for
41715
35:02:37,271 --> 35:02:41,512
localization because let's let's bring
41716
35:02:39,360 --> 35:02:43,360
up for instance visual studio code
41717
35:02:41,512 --> 35:02:45,440
maybe we can actually see in visual
41718
35:02:43,360 --> 35:02:47,911
studio code a little bit better
41719
35:02:48,960 --> 35:02:54,680
increase the size of the font
41720
35:02:57,360 --> 35:03:03,911
international non-lineation
41721
35:03:00,639 --> 35:03:05,831
okay and then write localization so that
41722
35:03:03,911 --> 35:03:08,000
was one two three four five six seven
41723
35:03:05,831 --> 35:03:12,000
eight nine ten one two three four five
41724
35:03:08,000 --> 35:03:14,800
six seven eight so it's 18 total and if
41725
35:03:12,000 --> 35:03:16,960
we look at localization between l and n
41726
35:03:14,800 --> 35:03:20,000
if you count it one two three four five
41727
35:03:16,960 --> 35:03:22,040
six seven eight nine ten characters so
41728
35:03:20,000 --> 35:03:26,360
a lot of people refer to these things as
41729
35:03:22,039 --> 35:03:28,719
i18n and l10n i18n basically means
41730
35:03:26,360 --> 35:03:30,639
internationalization and l10n means
41731
35:03:28,720 --> 35:03:32,720
localization so now you know the reason
41732
35:03:30,639 --> 35:03:34,720
for that it's just it's just programmers
41733
35:03:32,720 --> 35:03:37,119
being lazy and trying to like shorten
41734
35:03:34,720 --> 35:03:39,040
everything as much as they can so now if
41735
35:03:37,119 --> 35:03:41,360
you see these two terms then you know
41736
35:03:41,360 --> 35:03:45,831
okay so what i was saying basically in
41737
35:03:43,831 --> 35:03:48,231
the beginning is to please after
41738
35:03:45,831 --> 35:03:50,000
watching this video go ahead and read
41739
35:03:48,232 --> 35:03:52,320
the official documentation because it is
41740
35:03:50,000 --> 35:03:53,679
very important it's very thorough it
41741
35:03:52,320 --> 35:03:55,440
talks about things that we don't even
41742
35:03:57,271 --> 35:04:01,119
highly recommend that you read this
41743
35:04:02,232 --> 35:04:07,592
so that was that and now what we need to
41744
35:04:04,720 --> 35:04:09,440
do is to basically get started by adding
41745
35:04:07,592 --> 35:04:12,080
um internationalization localization
41746
35:04:09,440 --> 35:04:13,592
support to our flutter application so
41747
35:04:12,080 --> 35:04:16,551
i'm gonna bring bring a visual studio
41748
35:04:13,592 --> 35:04:18,552
code in here and maybe decrease the size
41749
35:04:18,551 --> 35:04:22,159
i'm gonna change the screen layout all
41750
35:04:22,160 --> 35:04:25,192
um this is how we've left our
41751
35:04:23,679 --> 35:04:26,799
application to this point so what we
41752
35:04:25,191 --> 35:04:28,159
need to do is i'm just gonna close all
41753
35:04:26,800 --> 35:04:30,800
the tabs and then i'm going to press
41754
35:04:28,160 --> 35:04:33,040
command and command p in visual studio
41755
35:04:33,039 --> 35:04:37,911
and then we're going to look at our pop
41756
35:04:37,911 --> 35:04:42,800
if you go there and what we need to do
41757
35:04:39,911 --> 35:04:44,479
is to add flutter localizations to our
41758
35:04:44,479 --> 35:04:47,831
let's have a look in here and you can
41759
35:04:45,759 --> 35:04:49,119
see and you may be actually wondering
41760
35:04:49,119 --> 35:04:52,871
what am i even talking about what is
41761
35:04:52,872 --> 35:04:57,360
localizations and i didn't make that up
41762
35:04:55,271 --> 35:04:59,119
it is basically documented right here
41763
35:04:59,119 --> 35:05:02,720
as you can see it says the first thing
41764
35:05:00,800 --> 35:05:04,800
that we need to do is to go to our pop
41765
35:05:02,720 --> 35:05:07,191
spec yaml file and add flutter
41766
35:05:07,191 --> 35:05:12,319
what this basically does for our
41767
35:05:08,872 --> 35:05:15,040
application is that it allows
41768
35:05:15,039 --> 35:05:20,231
localized and it also adds uh like
41769
35:05:18,232 --> 35:05:22,320
auto-generated code for our application
41770
35:05:22,320 --> 35:05:25,832
it is a little bit difficult to explain
41771
35:05:23,911 --> 35:05:27,911
exactly what it does before you've seen
41772
35:05:25,831 --> 35:05:29,911
the results so what we need to do for
41773
35:05:27,911 --> 35:05:32,800
now is just to find the dependencies
41774
35:05:29,911 --> 35:05:34,959
section of our pop specky ammo here and
41775
35:05:32,800 --> 35:05:37,040
i found it here and what we need to do
41776
35:05:34,960 --> 35:05:38,800
in as you can see it says you just need
41777
35:05:37,039 --> 35:05:40,871
to add flutter localizations and i'm
41778
35:05:38,800 --> 35:05:43,360
going to do that right after flutter
41779
35:05:43,360 --> 35:05:49,119
and then we're going to say sdk flutter
41780
35:05:46,232 --> 35:05:50,639
all right so that's that and this
41781
35:05:49,119 --> 35:05:52,551
application at the moment is not running
41782
35:05:50,639 --> 35:05:55,512
so what i'm gonna do is just to say
41783
35:05:52,551 --> 35:05:59,191
um select device and then i'm going to
41784
35:05:55,512 --> 35:06:00,872
use my android phone okay as you follow
41785
35:05:59,191 --> 35:06:02,231
along with the with the course you know
41786
35:06:04,800 --> 35:06:10,720
real devices running so right now i have
41787
35:06:07,592 --> 35:06:12,400
um scr cpy i think somewhere let's see
41788
35:06:10,720 --> 35:06:13,592
if we can bring it up actually let's go
41789
35:06:19,119 --> 35:06:23,911
and then on the side i also have an
41790
35:06:21,679 --> 35:06:26,319
actual iphone running here so
41791
35:06:23,911 --> 35:06:29,271
basically there are two devices and that
41792
35:06:26,320 --> 35:06:30,800
have our app installed um so an iphone
41793
35:06:29,271 --> 35:06:32,319
and an android and we're going to work
41794
35:06:33,271 --> 35:06:38,959
so um what we're gonna do is to run our
41795
35:06:36,160 --> 35:06:40,720
application uh on the android phone for
41796
35:06:38,960 --> 35:06:42,400
instance i'm gonna say command shift p
41797
35:06:42,399 --> 35:06:47,360
on mac and then ctrl shift b on a linux
41798
35:06:44,479 --> 35:06:49,360
machine or windows and then say select
41799
35:06:47,360 --> 35:06:51,680
device and i'm going to select this
41800
35:06:49,360 --> 35:06:53,911
android phone then i'm going to go to
41801
35:06:51,679 --> 35:06:57,679
the main dart file and then just say run
41802
35:06:53,911 --> 35:06:59,271
without debugging so let that do its job
41803
35:06:57,679 --> 35:07:00,959
i'm going to decrease the font a little
41804
35:06:59,271 --> 35:07:04,551
bit because it's just humongous at the
41805
35:07:00,960 --> 35:07:07,192
moment so after doing that after adding
41806
35:07:04,551 --> 35:07:10,080
the pop specky ammo in here we also need
41807
35:07:07,191 --> 35:07:11,591
to make sure that we follow the
41808
35:07:10,080 --> 35:07:12,960
as you can see in here it says yeah you
41809
35:07:11,592 --> 35:07:14,960
have to do these things and we're going
41810
35:07:14,960 --> 35:07:18,639
but what we're also going to do is to
41811
35:07:16,479 --> 35:07:20,720
add this internationalization package to
41812
35:07:18,639 --> 35:07:22,720
our application so let me remove that
41813
35:07:20,720 --> 35:07:24,320
screen from there make sure that our
41814
35:07:22,720 --> 35:07:26,479
android application is running and this
41815
35:07:24,320 --> 35:07:28,480
is the state i've left the application
41816
35:07:26,479 --> 35:07:31,119
i'm logged in at the moment so what i'm
41817
35:07:28,479 --> 35:07:32,479
going to do is just to log out
41818
35:07:31,119 --> 35:07:34,639
all right so that up until this point
41819
35:07:32,479 --> 35:07:37,679
the only thing we did really was to add
41820
35:07:34,639 --> 35:07:40,399
flutter localization sdk true sorry sdk
41821
35:07:37,679 --> 35:07:42,799
flutter here then what we need to do is
41822
35:07:40,399 --> 35:07:46,000
to add the internationalization package
41823
35:07:42,800 --> 35:07:48,080
to our application okay so let's go and
41824
35:07:46,000 --> 35:07:51,119
i'm going to open a new terminal in here
41825
35:07:48,080 --> 35:07:52,800
in visual studio code and change the
41826
35:07:51,119 --> 35:07:54,399
layout a little bit so you see it better
41827
35:07:54,399 --> 35:07:58,871
and let's just go ahead and say flutter
41828
35:07:58,872 --> 35:08:04,080
and you can read more about this intel
41829
35:08:01,039 --> 35:08:06,551
package on popdev so if we for instance
41830
35:08:04,080 --> 35:08:09,759
go to create a new tab in here and i
41831
35:08:06,551 --> 35:08:11,759
bring it here and we just say puff.dev
41832
35:08:09,759 --> 35:08:14,319
and let me increase the size
41833
35:08:11,759 --> 35:08:17,511
to a little bit more ginormous size
41834
35:08:14,320 --> 35:08:20,000
and let's just say intl okay and you can
41835
35:08:17,512 --> 35:08:22,720
see here's the intl package
41836
35:08:20,000 --> 35:08:24,479
and it is from darkdev so it is actually
41837
35:08:22,720 --> 35:08:25,512
an official package that you can include
41838
35:08:24,479 --> 35:08:29,119
in your application and there's
41839
35:08:25,512 --> 35:08:30,960
documentations about how to use it okay
41840
35:08:29,119 --> 35:08:33,512
so you can also see how you can for
41841
35:08:30,960 --> 35:08:35,592
instance um handle date formatting in
41842
35:08:33,512 --> 35:08:38,080
different languages all right so now
41843
35:08:35,592 --> 35:08:39,512
we've added that and if i bring this
41844
35:08:38,080 --> 35:08:41,360
screen like this so you can see the
41845
35:08:39,512 --> 35:08:43,360
results of adding that package to our
41846
35:08:43,360 --> 35:08:48,000
it says got dependencies all right so
41847
35:08:46,080 --> 35:08:51,040
that was the result of saying flutter
41848
35:08:51,191 --> 35:08:54,479
fantastic the other thing that we need
41849
35:08:57,271 --> 35:09:01,360
in our pop spec if i change the screen
41850
35:09:01,360 --> 35:09:04,960
um we need to go as you can see at the
41851
35:09:03,271 --> 35:09:07,512
bottom of the screen we need to add a
41852
35:09:04,960 --> 35:09:10,720
generate true under the flutter section
41853
35:09:07,512 --> 35:09:14,232
and it is right here so this generates
41854
35:09:10,720 --> 35:09:15,119
true that we add just like this it is um
41855
35:09:15,119 --> 35:09:20,231
very very important basically for how
41856
35:09:17,911 --> 35:09:23,360
code generation is gonna work
41857
35:09:20,232 --> 35:09:26,720
so i'm gonna basically have a look here
41858
35:09:23,360 --> 35:09:28,960
generate and add space here okay so if
41859
35:09:26,720 --> 35:09:31,592
you add this generate true in here it
41860
35:09:28,960 --> 35:09:33,040
allows the localization packages and
41861
35:09:31,592 --> 35:09:35,832
like the localization code that is
41862
35:09:33,039 --> 35:09:38,551
running in your application to generate
41863
35:09:38,551 --> 35:09:44,319
code for you what i mean by that is as
41864
35:09:47,592 --> 35:09:53,000
file called a file type called marb
41865
35:09:53,360 --> 35:09:57,271
and these arb files are kind of like key
41866
35:09:57,271 --> 35:10:03,911
files and very i mean kind of like json
41867
35:10:00,720 --> 35:10:06,160
and in the keys um you specify some
41868
35:10:03,911 --> 35:10:07,191
names for instance you say login screen
41869
35:10:07,191 --> 35:10:12,000
and the value would then be the actual
41870
35:10:09,831 --> 35:10:12,959
value you've translated in that specific
41871
35:10:12,960 --> 35:10:16,552
and you will have multiple of these arb
41872
35:10:16,551 --> 35:10:21,591
and i think actually i'm going to
41873
35:10:18,399 --> 35:10:23,759
explain it rb more soon but it stands
41874
35:10:21,592 --> 35:10:25,440
for application resource bundle
41875
35:10:25,440 --> 35:10:28,080
i mean i don't want to go too much into
41876
35:10:26,639 --> 35:10:29,759
details about arb files right now
41877
35:10:28,080 --> 35:10:31,911
because there's a section coming up
41878
35:10:29,759 --> 35:10:33,360
where i'll explain that but what you
41879
35:10:31,911 --> 35:10:35,911
need to know right now is that this
41880
35:10:33,360 --> 35:10:38,639
generate true flag under your flutter
41881
35:10:35,911 --> 35:10:41,512
section in pop special allows
41882
35:10:38,639 --> 35:10:44,232
the auto generated code to basically
41883
35:10:41,512 --> 35:10:46,872
hook itself into your project and when
41884
35:10:44,232 --> 35:10:49,040
you add new keys and values to your arb
41885
35:10:46,872 --> 35:10:51,360
files as you'll soon see how
41886
35:10:49,039 --> 35:10:53,679
then up then the code generation will
41887
35:10:51,360 --> 35:10:56,080
kick in every time you do a hot restart
41888
35:10:53,679 --> 35:10:58,000
or you run your application fresh and it
41889
35:10:56,080 --> 35:10:59,759
will go through your arb files and it
41890
35:11:04,872 --> 35:11:08,080
and this dart source code will be
41891
35:11:06,399 --> 35:11:10,231
something that you can literally import
41892
35:11:08,080 --> 35:11:12,320
into your application and like use the
41893
35:11:10,232 --> 35:11:14,639
keys you added to the json as just like
41894
35:11:12,320 --> 35:11:16,800
dart code inside your application
41895
35:11:14,639 --> 35:11:18,720
so this is a lot of talking just like
41896
35:11:16,800 --> 35:11:20,872
abstract talking but you will soon see
41897
35:11:18,720 --> 35:11:23,360
exactly how these things work so don't
41898
35:11:23,360 --> 35:11:27,680
so what we need to do now is after we've
41899
35:11:25,679 --> 35:11:30,479
done all this work we need to basically
41900
35:11:27,679 --> 35:11:32,399
add support for localization into our
41901
35:11:30,479 --> 35:11:34,800
ios application as you can see at the
41902
35:11:32,399 --> 35:11:38,319
bottom of the screen in the caption now
41903
35:11:34,800 --> 35:11:40,551
android works just automatically in that
41904
35:11:38,320 --> 35:11:42,320
when we start adding localization to our
41905
35:11:40,551 --> 35:11:43,831
application new languages the android
41906
35:11:42,320 --> 35:11:46,000
app just completely understands then
41907
35:11:43,831 --> 35:11:48,319
okay here's a new language i can handle
41908
35:11:46,000 --> 35:11:50,551
that and i will just refresh my
41909
35:11:48,320 --> 35:11:52,552
ui in order to display all the values
41910
35:11:50,551 --> 35:11:54,800
that you entered but ios is a little bit
41911
35:11:52,551 --> 35:11:56,159
more old-fashioned you have to help it
41912
35:11:54,800 --> 35:11:58,400
understand that this application
41913
35:11:56,160 --> 35:12:00,552
actually supports various languages
41914
35:11:58,399 --> 35:12:02,399
so and i'm actually glad to say that you
41915
35:12:00,551 --> 35:12:04,080
don't have to have xcode in order to go
41916
35:12:06,080 --> 35:12:08,872
but we need to as you can see at the
41917
35:12:07,360 --> 35:12:12,551
bottom of the screen we have to go to
41918
35:12:08,872 --> 35:12:14,160
our info plist file and update a special
41919
35:12:12,551 --> 35:12:15,679
section or create a special section
41920
35:12:14,160 --> 35:12:19,192
called core foundation bundle
41921
35:12:15,679 --> 35:12:21,511
localizations okay so let's go ahead and
41922
35:12:19,191 --> 35:12:23,039
actually take care of that right now so
41923
35:12:21,512 --> 35:12:24,639
i'm gonna also bring up my notes to
41924
35:12:23,039 --> 35:12:27,911
ensure that i'm telling you all
41925
35:12:24,639 --> 35:12:30,160
everything that i plan to tell you
41926
35:12:27,911 --> 35:12:31,512
see if i can find that section
41927
35:12:31,512 --> 35:12:34,872
so what i'm going to do in here i'm
41928
35:12:32,639 --> 35:12:36,479
going to close that file i'm also going
41929
35:12:34,872 --> 35:12:38,720
to close the main dar file and then i'm
41930
35:12:36,479 --> 35:12:40,720
going to press command p in visual
41931
35:12:38,720 --> 35:12:42,872
studio code and i'm going to look for a
41932
35:12:40,720 --> 35:12:46,000
file called info.plist it should be
41933
35:12:42,872 --> 35:12:48,232
under the ios folder slash runner and in
41934
35:12:46,000 --> 35:12:50,800
there there's an info p list and if
41935
35:12:48,232 --> 35:12:52,320
you're curious exactly where that is you
41936
35:12:50,800 --> 35:12:54,639
will be able to for instance go to
41937
35:12:52,320 --> 35:12:56,552
terminal and i'm gonna clean the
41938
35:12:54,639 --> 35:12:58,872
terminal and i'm just gonna say open you
41939
35:12:56,551 --> 35:13:01,759
can see this is the folder where
41940
35:12:58,872 --> 35:13:03,192
this entire course source code is based
41941
35:13:03,191 --> 35:13:06,479
okay so we're gonna open as you can see
41942
35:13:07,191 --> 35:13:10,399
this is the source code where we we are
41943
35:13:09,271 --> 35:13:12,399
at the moment and there is a folder
41944
35:13:10,399 --> 35:13:14,231
called ios and in there there's a a
41945
35:13:12,399 --> 35:13:16,871
folder called runner and in there
41946
35:13:14,232 --> 35:13:18,232
there's a file called info plist so
41947
35:13:18,232 --> 35:13:21,040
that's the file that we have to open
41948
35:13:21,039 --> 35:13:24,799
so i'm going to say command p again and
41949
35:13:22,479 --> 35:13:26,720
then info plist let's open that and
41950
35:13:24,800 --> 35:13:29,680
these are like key values as you can see
41951
35:13:26,720 --> 35:13:32,160
it's it's a strange like p list kind of
41952
35:13:29,679 --> 35:13:34,399
like an xml format kind of thing
41953
35:13:32,160 --> 35:13:36,872
but you will need to look for cf bundle
41954
35:13:36,872 --> 35:13:40,551
and if you don't have cf bundle
41955
35:13:38,872 --> 35:13:42,800
localizations then you'll have to create
41956
35:13:40,551 --> 35:13:45,119
it just like in here so as soon as you
41957
35:13:42,800 --> 35:13:46,960
see this dict which is dictionary let's
41958
35:13:45,119 --> 35:13:48,959
go ahead and create a new key so let's
41959
35:13:46,960 --> 35:13:51,912
just say key and we're going to say core
41960
35:13:48,960 --> 35:13:53,040
foundation bundle localizations
41961
35:13:53,039 --> 35:13:58,079
and then we end the key right there
41962
35:13:56,080 --> 35:13:59,831
and what you have to do this the value
41963
35:13:58,080 --> 35:14:02,479
of this key is not just a string but
41964
35:13:59,831 --> 35:14:04,399
it's actually an array an array meaning
41965
35:14:04,399 --> 35:14:08,639
of things it's a list of languages or
41966
35:14:06,872 --> 35:14:09,832
localizations that your application
41967
35:14:09,831 --> 35:14:14,231
as you see all the other things in here
41968
35:14:12,000 --> 35:14:16,399
there they have like these keys and then
41969
35:14:14,232 --> 35:14:17,680
values but for us we have to do
41970
35:14:16,399 --> 35:14:19,591
something like this you see there's a
41971
35:14:19,592 --> 35:14:23,760
bundle localization and localizations
41972
35:14:22,000 --> 35:14:25,440
and we have to then create an array so
41973
35:14:23,759 --> 35:14:26,399
let's go up here right after this say
41974
35:14:26,399 --> 35:14:30,399
and then we close the array just like
41975
35:14:28,639 --> 35:14:32,080
that you see this is how they were doing
41976
35:14:32,080 --> 35:14:36,080
and then we need to add two strings in
41977
35:14:33,592 --> 35:14:37,440
here so one string and we close that
41978
35:14:37,440 --> 35:14:41,760
and another one okay so because we're
41979
35:14:39,360 --> 35:14:44,320
supporting english and swedish so every
41980
35:14:41,759 --> 35:14:45,191
string in your arraylist is gonna then
41981
35:14:45,191 --> 35:14:49,759
indicate the language code that your
41982
35:14:47,512 --> 35:14:51,832
application supports okay so first we're
41983
35:14:49,759 --> 35:14:53,511
gonna support english and then we're
41984
35:14:51,831 --> 35:14:55,679
gonna sweet and support swedish and
41985
35:14:53,512 --> 35:14:56,832
swedish language code is suv because in
41986
35:14:56,831 --> 35:15:02,639
and sweden itself we don't call the
41987
35:14:59,831 --> 35:15:05,191
country sweden we call it sevaria
41988
35:15:02,639 --> 35:15:07,759
and that's what that's where sv comes
41989
35:15:05,191 --> 35:15:10,551
from but you can also google this and
41990
35:15:07,759 --> 35:15:13,191
you can like look for localization
41991
35:15:10,551 --> 35:15:15,119
country codes and you will get to a list
41992
35:15:13,191 --> 35:15:16,639
on wikipedia or something that tells you
41993
35:15:15,119 --> 35:15:19,271
exactly what you have to use for
41994
35:15:16,639 --> 35:15:22,232
instance if you want to write um
41995
35:15:19,271 --> 35:15:24,479
a special language in india or pakistan
41996
35:15:22,232 --> 35:15:27,592
like urdu or whatever you'll have to
41997
35:15:24,479 --> 35:15:30,872
find the correct language code for that
41998
35:15:27,592 --> 35:15:32,552
so but you can google that easily so um
41999
35:15:30,872 --> 35:15:35,040
i'm not gonna present all those
42000
35:15:32,551 --> 35:15:36,231
languages code language codes in this
42001
35:15:35,039 --> 35:15:40,079
chapter but i'm just giving you the
42002
35:15:36,232 --> 35:15:42,320
tools necessary to find out on your own
42003
35:15:40,080 --> 35:15:44,400
okay and that is it really that's all we
42004
35:15:42,320 --> 35:15:46,400
have to do for the ios app so we've
42005
35:15:44,399 --> 35:15:49,439
added the cf bundle localizations in
42006
35:15:46,399 --> 35:15:51,439
here and we're good to go for the info p
42007
35:15:51,440 --> 35:15:56,479
then what we need to do in here is we
42008
35:15:53,759 --> 35:15:58,639
need to go into our root folder of our
42009
35:15:56,479 --> 35:15:59,759
application and then we need to add a
42010
35:15:58,639 --> 35:16:02,080
file as you can see on the bottom of the
42011
35:15:59,759 --> 35:16:04,720
screen called l10n and as i told you
42012
35:16:04,720 --> 35:16:08,800
it means a localization that's the 10
42013
35:16:07,191 --> 35:16:11,759
thing meaning that there's 10 letters
42014
35:16:08,800 --> 35:16:13,760
between l and n in localization so let's
42015
35:16:11,759 --> 35:16:16,799
go ahead in here and i'm just going to
42016
35:16:13,759 --> 35:16:18,319
right click on this folder in here and
42017
35:16:18,320 --> 35:16:22,480
and then let's add a new file and call
42018
35:16:23,191 --> 35:16:27,440
in here then we have to write some stuff
42019
35:16:25,759 --> 35:16:29,271
and i'll bring the official
42020
35:16:27,440 --> 35:16:31,191
documentation because it is very very
42021
35:16:29,271 --> 35:16:32,720
helpful in this case so let's go and
42022
35:16:31,191 --> 35:16:35,440
have a look at the documentation what we
42023
35:16:32,720 --> 35:16:37,271
have to enter in this ltn file
42024
35:16:35,440 --> 35:16:41,360
let's see if we can find it somewhere
42025
35:16:37,271 --> 35:16:43,360
and it is an arb file so l10n
42026
35:16:41,360 --> 35:16:45,271
and it looks like this so this is this
42027
35:16:43,360 --> 35:16:49,119
is like the contents that we kind of
42028
35:16:45,271 --> 35:16:51,039
need to place in our l10 file
42029
35:16:51,039 --> 35:16:55,831
arb directory and it's called lib el
42030
35:16:53,911 --> 35:16:58,160
tenen all right and we'll soon have a
42031
35:16:55,831 --> 35:17:00,231
look at what this actually means
42032
35:17:00,232 --> 35:17:04,872
and then we have something called a
42033
35:17:02,000 --> 35:17:07,759
template arb file and then something
42034
35:17:04,872 --> 35:17:09,760
called an output localization file okay
42035
35:17:07,759 --> 35:17:12,551
so um i'm going to explain to you what
42036
35:17:09,759 --> 35:17:13,591
this what these all actually mean
42037
35:17:14,399 --> 35:17:20,319
what this arb directory means is it is
42038
35:17:17,271 --> 35:17:22,551
an indication for you you're telling um
42039
35:17:20,320 --> 35:17:23,512
flutters auto generated localization
42040
35:17:25,512 --> 35:17:28,800
files where to find your localizations
42041
35:17:28,800 --> 35:17:32,400
when you create localizations for a new
42042
35:17:30,551 --> 35:17:35,360
language then you have to create a an
42043
35:17:32,399 --> 35:17:36,959
arb file so and you're basically telling
42044
35:17:35,360 --> 35:17:39,360
dart in this case or flutter in this
42045
35:17:36,960 --> 35:17:41,192
case that these arb files i'm going to
42046
35:17:39,360 --> 35:17:43,191
create are going to reside under this
42047
35:17:41,191 --> 35:17:46,399
folder so if you look at visual studio
42048
35:17:43,191 --> 35:17:48,319
code here we have now a folder from all
42049
35:17:46,399 --> 35:17:50,399
when we created basically our project
42050
35:17:48,320 --> 35:17:52,232
which was called lib as you can see in
42051
35:17:53,039 --> 35:17:59,271
in this lib then we're going to create a
42052
35:17:56,080 --> 35:18:01,759
folder as it's indicated in here called
42053
35:17:59,271 --> 35:18:03,759
l10n well you don't actually have to
42054
35:18:01,759 --> 35:18:06,479
call it altenent and that's why you have
42055
35:18:03,759 --> 35:18:08,799
this configuration so you could call it
42056
35:18:06,479 --> 35:18:11,440
something else you could call it
42057
35:18:08,800 --> 35:18:13,760
localization if you want to or my
42058
35:18:11,440 --> 35:18:15,832
strings whatever you want to it's just
42059
35:18:13,759 --> 35:18:17,511
an indication to flutter and the
42060
35:18:15,831 --> 35:18:19,439
localization engine where you're
42061
35:18:17,512 --> 35:18:21,119
replacing those files okay
42062
35:18:19,440 --> 35:18:24,160
so that's that so that's you're telling
42063
35:18:21,119 --> 35:18:26,551
dart where it f it where to find your
42064
35:18:24,160 --> 35:18:29,592
localization information then in here
42065
35:18:26,551 --> 35:18:31,679
the template arv file is a file in that
42066
35:18:31,679 --> 35:18:36,959
basically choosing as the main language
42067
35:18:34,551 --> 35:18:38,959
of the application so if for instance it
42068
35:18:36,960 --> 35:18:40,872
can't find a key for swedish in the
42069
35:18:38,960 --> 35:18:42,960
swedish file arb file it's going to fall
42070
35:18:40,872 --> 35:18:46,000
back to the english one and this is like
42071
35:18:42,960 --> 35:18:48,080
setting the ground for or setting the
42072
35:18:46,000 --> 35:18:49,592
foundation for how you're localizing
42073
35:18:49,592 --> 35:18:53,271
you can think of it as the default
42074
35:18:51,191 --> 35:18:55,039
language that your application supports
42075
35:18:53,271 --> 35:18:56,319
in our case that language is going to be
42076
35:18:55,039 --> 35:19:00,719
english so we're going to leave this
42077
35:18:56,320 --> 35:19:02,960
file name as it is indicated here
42078
35:19:00,720 --> 35:19:06,960
the other thing output localization file
42079
35:19:02,960 --> 35:19:09,512
it is a file for that auto generation to
42080
35:19:06,960 --> 35:19:12,400
basically create for you so as you'll
42081
35:19:09,512 --> 35:19:14,960
soon see auto generation is very special
42082
35:19:14,960 --> 35:19:19,592
so um but you have some control over it
42083
35:19:18,160 --> 35:19:20,720
and this is like one of those things
42084
35:19:19,592 --> 35:19:22,639
that you can control you can actually
42085
35:19:20,720 --> 35:19:25,271
control where that auto generated dart
42086
35:19:22,639 --> 35:19:27,191
code is going to be generated and in
42087
35:19:27,191 --> 35:19:30,639
it is a little bit abstract so i'm not
42088
35:19:28,800 --> 35:19:32,960
going to go too much into it and you'll
42089
35:19:30,639 --> 35:19:34,479
soon see how we can configure this and
42090
35:19:32,960 --> 35:19:36,232
what this actually means so what we need
42091
35:19:34,479 --> 35:19:38,080
to do in this internationalization
42092
35:19:36,232 --> 35:19:39,440
documentation let's just copy this
42093
35:19:39,440 --> 35:19:44,400
and i'm going to then go in this l10 and
42094
35:19:42,232 --> 35:19:46,720
yaml file that we created and just paste
42095
35:19:46,720 --> 35:19:51,512
what we need to do in here we're going
42096
35:19:48,399 --> 35:19:53,591
to leave the arb directory directory as
42097
35:19:51,512 --> 35:19:55,040
lib l10 because that kind of makes sense
42098
35:19:55,039 --> 35:20:00,319
uh but in here app instead of app ian
42099
35:19:58,399 --> 35:20:03,191
i'm just going to say intel yeah it's
42100
35:20:00,320 --> 35:20:04,080
just for me it makes more sense to
42101
35:20:04,080 --> 35:20:10,720
the intl underscore en as the default
42102
35:20:07,679 --> 35:20:12,639
file so we're going to create intl en
42103
35:20:12,639 --> 35:20:17,592
sv for swedish okay and then we're just
42104
35:20:15,831 --> 35:20:19,511
going to leave this as it is so i'm just
42105
35:20:17,592 --> 35:20:21,440
going to save this file right there and
42106
35:20:24,232 --> 35:20:27,832
now remember hot restarting is something
42107
35:20:26,320 --> 35:20:30,640
in internationalization it's very
42108
35:20:27,831 --> 35:20:32,871
important flutter because hot reload
42109
35:20:30,639 --> 35:20:34,800
won't trigger auto generation of your
42110
35:20:32,872 --> 35:20:36,551
internationalization code meaning that
42111
35:20:36,551 --> 35:20:40,639
if you've added some new strings for
42112
35:20:38,232 --> 35:20:43,120
instance to your arb files as we'll talk
42113
35:20:40,639 --> 35:20:46,160
about it soon those things won't be auto
42114
35:20:43,119 --> 35:20:49,119
injected and generated into your code
42115
35:20:46,160 --> 35:20:50,960
until you do a hot restart hot reload
42116
35:20:49,119 --> 35:20:52,720
won't cut it so you have to either do a
42117
35:20:50,960 --> 35:20:54,960
hot restart or just completely stop the
42118
35:20:52,720 --> 35:20:57,119
application and build it from scratch
42119
35:20:54,960 --> 35:20:59,440
and that's a huge overhead so you may
42120
35:20:57,119 --> 35:21:02,479
not want to do that but a hot restart is
42121
35:21:02,479 --> 35:21:06,479
so let's have a look now at um
42122
35:21:06,479 --> 35:21:11,759
arb files are as i mentioned before now
42123
35:21:09,271 --> 35:21:14,000
arb files are application resource
42124
35:21:11,759 --> 35:21:16,871
bundles and they're pretty much json
42125
35:21:14,000 --> 35:21:20,232
files they are key values in there and
42126
35:21:16,872 --> 35:21:22,320
your keys are basically how a handle for
42127
35:21:20,232 --> 35:21:24,080
your application to then reach into your
42128
35:21:22,320 --> 35:21:26,720
localization and grab for instance a
42129
35:21:24,080 --> 35:21:28,160
string and the values of those keys are
42130
35:21:26,720 --> 35:21:30,479
the actual strings that will be
42131
35:21:28,160 --> 35:21:32,872
displayed in your user interface
42132
35:21:30,479 --> 35:21:34,872
they are more than just key values
42133
35:21:32,872 --> 35:21:36,800
because you can actually put logic in
42134
35:21:34,872 --> 35:21:38,400
your arb files in that for instance as
42135
35:21:38,399 --> 35:21:43,360
inside this screen let me bring it up in
42136
35:21:40,551 --> 35:21:45,831
scr cpy and if you log in with a valid
42137
35:21:45,831 --> 35:21:50,080
and we have foobarbas as our
42138
35:21:50,080 --> 35:21:52,960
um in this screen at the moment on the
42139
35:21:51,679 --> 35:21:54,639
top of the screen we're seeing your
42140
35:21:52,960 --> 35:21:56,320
notes but what we're going to do in this
42141
35:21:54,639 --> 35:21:59,119
chapter just to demonstrate how arp
42142
35:21:56,320 --> 35:22:00,160
files work we're gonna say if you have
42143
35:22:02,872 --> 35:22:06,479
you have one note something like that or
42144
35:22:06,479 --> 35:22:09,831
if you have more than one note then it's
42145
35:22:08,000 --> 35:22:13,512
gonna say for instance if you have three
42146
35:22:09,831 --> 35:22:16,319
notes it's gonna say three notes
42147
35:22:13,512 --> 35:22:17,760
or if you have zero notes no notes at
42148
35:22:22,320 --> 35:22:26,480
which is the title on top of the screen
42149
35:22:23,911 --> 35:22:28,479
we can actually put logic into the arb
42150
35:22:28,479 --> 35:22:32,872
this isn't a title however i wanted to
42151
35:22:32,872 --> 35:22:38,232
if this particular count is zero i
42152
35:22:36,232 --> 35:22:40,480
wanted to say you have no notes
42153
35:22:38,232 --> 35:22:43,040
if the account is one i want it to say
42154
35:22:40,479 --> 35:22:45,440
you have one note or if the count is
42155
35:22:43,039 --> 35:22:46,399
more than one i wanted to say you have
42156
35:22:46,399 --> 35:22:51,191
amount of notes and that x is the actual
42157
35:22:48,800 --> 35:22:53,592
number that we will provide to it
42158
35:22:51,191 --> 35:22:55,911
so rb files are more than just json they
42159
35:22:53,592 --> 35:22:57,680
can actually have logic in them and they
42160
35:22:55,911 --> 35:22:59,271
stand as you can see at the bottom of
42161
35:22:57,679 --> 35:23:02,079
the screen they stand for application
42162
35:23:02,551 --> 35:23:09,039
all right and now what we need to do is
42163
35:23:05,440 --> 35:23:12,479
to actually go and create these um files
42164
35:23:09,039 --> 35:23:15,039
so let's go into this lib folder
42165
35:23:12,479 --> 35:23:17,759
and let's go and create our the folder
42166
35:23:15,039 --> 35:23:19,911
that we mentioned in this l10 and you
42167
35:23:17,759 --> 35:23:22,871
see we said that under lib we're gonna
42168
35:23:19,911 --> 35:23:25,831
have a folder called l10n and under that
42169
35:23:22,872 --> 35:23:28,720
l10n we're gonna have a file called intl
42170
35:23:25,831 --> 35:23:30,959
en arb okay so let's go ahead and see if
42171
35:23:28,720 --> 35:23:33,759
we can get that to work so in lib let's
42172
35:23:30,960 --> 35:23:36,639
go and say new file and then i'm going
42173
35:23:39,271 --> 35:23:45,039
and you can see that it creates the
42174
35:23:40,720 --> 35:23:46,720
folder as well lib l10n and intl enarb
42175
35:23:45,039 --> 35:23:48,000
and that is the file that we said we're
42176
35:23:48,000 --> 35:23:54,960
let's then go ahead and say new file
42177
35:23:50,000 --> 35:23:56,399
intl and then we're going to say sv arv
42178
35:23:56,399 --> 35:24:01,191
and as i mentioned before these are very
42179
35:23:58,720 --> 35:24:03,191
simple jsons to begin with so we can
42180
35:24:01,191 --> 35:24:04,959
just create a json for instance here and
42181
35:24:04,960 --> 35:24:08,639
so like this and in here i'm just going
42182
35:24:08,639 --> 35:24:15,039
and then a value of my title goes here
42183
35:24:12,479 --> 35:24:17,591
okay and let's just copy and paste this
42184
35:24:15,039 --> 35:24:18,639
in the swedish one as well just for now
42185
35:24:18,639 --> 35:24:22,639
so and i'm just going to do a hot
42186
35:24:22,639 --> 35:24:28,639
all right so what this all did since
42187
35:24:25,440 --> 35:24:30,551
we've added our auto generation
42188
35:24:28,639 --> 35:24:32,872
in our pop speaking ammo if you remember
42189
35:24:30,551 --> 35:24:35,039
from before we added this generate true
42190
35:24:32,872 --> 35:24:38,000
inside here now what you should be able
42191
35:24:35,039 --> 35:24:39,439
to do is to have a look at the structure
42192
35:24:38,000 --> 35:24:40,872
of your project and now all of a sudden
42193
35:24:39,440 --> 35:24:43,440
you should be able to see a folder
42194
35:24:40,872 --> 35:24:44,872
called dot dart tool and if you drill
42195
35:24:43,440 --> 35:24:46,872
down in there you should be able to see
42196
35:24:44,872 --> 35:24:48,639
something called a flutter gen and if
42197
35:24:46,872 --> 35:24:51,440
you drill down in there you'll see gen
42198
35:24:48,639 --> 35:24:55,039
l10n and in there you'll see now three
42199
35:24:51,440 --> 35:24:58,232
files app localizations app localization
42200
35:24:55,039 --> 35:25:01,039
sv and applicalizations en now
42201
35:24:58,232 --> 35:25:04,400
what is this app localizations well if
42202
35:25:04,399 --> 35:25:10,479
l10n we actually told the generation to
42203
35:25:08,080 --> 35:25:12,720
generate generated code to be named app
42204
35:25:12,720 --> 35:25:17,759
basically it that's that file we said
42205
35:25:15,360 --> 35:25:19,759
that it needs to be called that so we
42206
35:25:17,759 --> 35:25:22,231
can open that and you'll see now there's
42207
35:25:19,759 --> 35:25:24,231
some information in here and
42208
35:25:22,232 --> 35:25:26,080
there is a locale name for instance and
42209
35:25:24,232 --> 35:25:28,552
then there are some delegate stuff and
42210
35:25:26,080 --> 35:25:30,960
i'll explain all these but what you'll
42211
35:25:28,551 --> 35:25:33,911
see here now is something called my
42212
35:25:30,960 --> 35:25:36,400
title and is a string and this is
42213
35:25:33,911 --> 35:25:38,319
exactly what we wrote in this my title
42214
35:25:38,320 --> 35:25:42,800
and you can see then if you go to the
42215
35:25:42,800 --> 35:25:47,760
your string is there my title goes here
42216
35:25:45,831 --> 35:25:50,319
and the swedish one is also saying my
42217
35:25:47,759 --> 35:25:52,551
title goes here so it's not so it's not
42218
35:25:50,320 --> 35:25:54,232
so impressive since we actually chose to
42219
35:25:52,551 --> 35:25:56,720
have the exact same string in the
42220
35:25:54,232 --> 35:25:59,271
english and the swedish version so what
42221
35:25:56,720 --> 35:26:00,479
we could do is to go to the english one
42222
35:26:00,479 --> 35:26:06,720
intel en arb and put eng at the end of
42223
35:26:03,911 --> 35:26:09,039
it and go to the swedish one and say
42224
35:26:09,039 --> 35:26:15,271
okay and then i now get a a save on this
42225
35:26:12,872 --> 35:26:17,440
file and then if you go in here you'll
42226
35:26:15,271 --> 35:26:18,872
see nothing has changed and that's what
42227
35:26:18,872 --> 35:26:23,911
reload doesn't cut it you have to do a
42228
35:26:21,512 --> 35:26:26,639
hot restart and if you do a hot restart
42229
35:26:23,911 --> 35:26:29,360
then this code should basically get
42230
35:26:26,639 --> 35:26:32,399
updated let's go ahead and see if it did
42231
35:26:29,360 --> 35:26:33,759
you can see here's the english one oops
42232
35:26:32,399 --> 35:26:35,679
i didn't mean to change it and here's
42233
35:26:35,679 --> 35:26:40,719
now you know what those things actually
42234
35:26:41,911 --> 35:26:48,319
we now have a really good ground to
42235
35:26:45,191 --> 35:26:51,039
stand on because we've created our
42236
35:26:48,320 --> 35:26:54,000
localization yaml a configuration file
42237
35:26:51,039 --> 35:26:56,799
we have our english and swedish
42238
35:26:54,000 --> 35:26:58,872
localization files right here in lib
42239
35:26:58,872 --> 35:27:05,360
ltn and under those we have intel en and
42240
35:27:05,360 --> 35:27:09,119
internationalization english and
42241
35:27:06,551 --> 35:27:12,720
international nationalization swedish
42242
35:27:09,119 --> 35:27:15,271
now all we really have to do is to
42243
35:27:12,720 --> 35:27:17,759
basically go ahead now and start
42244
35:27:17,759 --> 35:27:22,000
strings in our application and um kind
42245
35:27:22,000 --> 35:27:26,080
sorry populating them in the in these
42246
35:27:24,080 --> 35:27:27,680
arb files and then where in our
42247
35:27:27,679 --> 35:27:33,191
text hard-coded then we're going to
42248
35:27:33,191 --> 35:27:37,440
strings which are in our l10n
42249
35:27:37,440 --> 35:27:42,800
and in order for our application to
42250
35:27:42,800 --> 35:27:48,080
we have localized in inside our arb
42251
35:27:46,399 --> 35:27:50,799
files we have to actually tell the
42252
35:27:48,080 --> 35:27:53,040
application which locales we support
42253
35:27:53,039 --> 35:27:57,191
mention sorry in order to explain that
42254
35:27:55,039 --> 35:27:57,911
we have to go back to the main dart file
42255
35:27:57,911 --> 35:28:01,831
let's go to main dart file and have a
42256
35:27:59,679 --> 35:28:03,591
look at how we've created our
42257
35:28:01,831 --> 35:28:05,759
application and you can see we have this
42258
35:28:03,592 --> 35:28:07,760
code right here that at the moment says
42259
35:28:05,759 --> 35:28:10,159
run app and then we're creating a
42260
35:28:10,160 --> 35:28:14,552
and there are two important properties
42261
35:28:12,551 --> 35:28:16,639
in the creation of material app which we
42262
35:28:14,551 --> 35:28:18,479
haven't used so far because in the
42263
35:28:16,639 --> 35:28:21,271
previous chapters we haven't done any
42264
35:28:18,479 --> 35:28:23,271
localization of the application so far
42265
35:28:21,271 --> 35:28:25,831
so these two properties are namely
42266
35:28:23,271 --> 35:28:27,271
localizations delegate and supported
42267
35:28:27,271 --> 35:28:33,039
let me bring up the caption for this
42268
35:28:29,512 --> 35:28:34,872
section um the way flutter localization
42269
35:28:33,039 --> 35:28:37,360
communicates with the ios app and
42270
35:28:34,872 --> 35:28:39,440
android app or for instance a web
42271
35:28:37,360 --> 35:28:42,479
application or desktop whatever you're
42272
35:28:39,440 --> 35:28:44,551
running flatter on it needs to tell the
42273
35:28:42,479 --> 35:28:47,039
underlying operating system what locales
42274
35:28:47,039 --> 35:28:51,039
so basically that's telling your
42275
35:28:48,639 --> 35:28:54,160
material application which languages
42276
35:28:51,039 --> 35:28:56,079
your application is built to work with
42277
35:28:54,160 --> 35:29:00,160
so that's the locale so you could say
42278
35:28:56,080 --> 35:29:02,320
swedish english persian and arabic or
42279
35:29:00,160 --> 35:29:05,120
what have you so those are the locales
42280
35:29:02,320 --> 35:29:07,760
but you also have the concept of
42281
35:29:05,119 --> 35:29:09,759
localization of your widgets
42282
35:29:07,759 --> 35:29:12,551
you see at the moment we've created some
42283
35:29:09,759 --> 35:29:14,639
strings and and also we're then gonna
42284
35:29:12,551 --> 35:29:17,360
soon go and place those strings on our
42285
35:29:14,639 --> 35:29:18,960
ui but also flutter itself has
42286
35:29:17,360 --> 35:29:20,872
localization support for various
42287
35:29:18,960 --> 35:29:22,800
languages there are so many languages
42288
35:29:20,872 --> 35:29:25,512
that flutter at the moment supports and
42289
35:29:22,800 --> 35:29:27,760
it can internally also localize its own
42290
35:29:25,512 --> 35:29:30,080
widgets for instance if you bring up a
42291
35:29:27,759 --> 35:29:31,911
date picker for instance in your flutter
42292
35:29:30,080 --> 35:29:33,759
application for user to select the date
42293
35:29:31,911 --> 35:29:36,232
that day picker itself can have
42294
35:29:33,759 --> 35:29:37,911
localization based on the system's
42295
35:29:36,232 --> 35:29:39,680
language or your application's language
42296
35:29:37,911 --> 35:29:42,000
so if you've chosen arabic career
42297
35:29:39,679 --> 35:29:43,039
applications language versus at the os
42298
35:29:43,039 --> 35:29:46,639
then and if you bring up a date picker
42299
35:29:45,039 --> 35:29:49,439
then that date picker is going to be
42300
35:29:46,639 --> 35:29:51,440
localized for that language by default
42301
35:29:51,440 --> 35:29:55,440
you need to tell material app both about
42302
35:29:53,831 --> 35:29:59,119
the locales that your application
42303
35:29:55,440 --> 35:30:01,040
supports also how it should localize for
42304
35:29:59,119 --> 35:30:03,271
instance internal widgets and also your
42305
35:30:03,271 --> 35:30:08,551
what we need to do is to actually go and
42306
35:30:05,592 --> 35:30:11,440
add these two properties here
42307
35:30:08,551 --> 35:30:13,911
and what we want to do is to refer to
42308
35:30:11,440 --> 35:30:15,440
this app localization file so if you go
42309
35:30:13,911 --> 35:30:17,911
to dart tools and you can see there's
42310
35:30:15,440 --> 35:30:19,832
this app localizations right here
42311
35:30:17,911 --> 35:30:22,639
and you can see there is a pop speaking
42312
35:30:19,831 --> 35:30:24,479
ammo and and then this is basically a
42313
35:30:22,639 --> 35:30:26,720
package so it is a package that was
42314
35:30:24,479 --> 35:30:28,720
created for you you haven't done
42315
35:30:26,720 --> 35:30:31,759
anything it's just generated for you so
42316
35:30:28,720 --> 35:30:33,911
how do we go ahead and import this in
42317
35:30:31,759 --> 35:30:35,511
our application and that is by going to
42318
35:30:33,911 --> 35:30:38,000
the top of your main file for instance
42319
35:30:35,512 --> 35:30:39,680
and say import and then you say package
42320
35:30:38,000 --> 35:30:41,119
and then in here we just say flutter
42321
35:30:41,119 --> 35:30:45,512
and this is like the generated code for
42322
35:30:42,800 --> 35:30:46,479
you and then gen l10n and in there
42323
35:30:46,479 --> 35:30:50,720
applicabilization's dark files so i need
42324
35:30:48,551 --> 35:30:52,479
you to please go ahead and import this
42325
35:30:54,399 --> 35:30:58,959
after having done that we need to go to
42326
35:30:56,551 --> 35:31:01,512
the material app and right before we do
42327
35:30:58,960 --> 35:31:04,400
anything else we're first going to say
42328
35:31:01,512 --> 35:31:06,551
supported locales this is a property and
42329
35:31:04,399 --> 35:31:08,871
that allows us to tell flutter which
42330
35:31:06,551 --> 35:31:11,191
lookouts our application supports
42331
35:31:08,872 --> 35:31:13,271
now you may be wondering okay what data
42332
35:31:11,191 --> 35:31:15,271
type this is this is actually a list as
42333
35:31:13,271 --> 35:31:16,959
you can see it's an iterable of locale
42334
35:31:15,271 --> 35:31:19,039
and some people go and incorrectly
42335
35:31:16,960 --> 35:31:21,040
create a custom list of accounts and
42336
35:31:19,039 --> 35:31:22,479
then put that in here but you don't have
42337
35:31:21,039 --> 35:31:24,319
to do that and i actually suggest that
42338
35:31:22,479 --> 35:31:26,000
you don't do that even if you can
42339
35:31:24,320 --> 35:31:28,232
because if you go inside this
42340
35:31:26,000 --> 35:31:30,551
applicalization start file you see that
42341
35:31:30,551 --> 35:31:33,759
it is created for you calls supported
42342
35:31:33,759 --> 35:31:37,191
so it is already understanding what
42343
35:31:35,440 --> 35:31:39,760
locales your application supports based
42344
35:31:37,191 --> 35:31:42,080
on the arb files that you've provided to
42345
35:31:42,080 --> 35:31:47,680
please don't go and create the same list
42346
35:31:45,440 --> 35:31:48,960
in your main dart file in here what
42347
35:31:47,679 --> 35:31:51,039
you'll need to do is just to say
42348
35:31:51,039 --> 35:31:56,079
and then you just say supported locales
42349
35:31:52,960 --> 35:31:59,120
okay so this goes and uses your arb
42350
35:31:56,080 --> 35:32:01,360
files as like a guide let's see lib
42351
35:31:59,119 --> 35:32:03,271
ltn and ar b fast it just knows that
42352
35:32:01,360 --> 35:32:04,479
you're supporting english and swedish at
42353
35:32:04,479 --> 35:32:07,512
so that's the first thing that we have
42354
35:32:05,759 --> 35:32:10,319
to do the other thing that we have to do
42355
35:32:10,320 --> 35:32:14,400
it's called localizations delegates as
42356
35:32:12,960 --> 35:32:16,720
you can see it says the delegates for
42357
35:32:14,399 --> 35:32:18,399
this apps localizations widget
42358
35:32:18,399 --> 35:32:22,159
a way for you to tell flutter that hey i
42359
35:32:20,479 --> 35:32:24,319
support for instance swedish and english
42360
35:32:22,160 --> 35:32:25,592
please localize your own widgets as well
42361
35:32:24,320 --> 35:32:28,160
so in here you don't have to create
42362
35:32:25,592 --> 35:32:30,320
custom delegates because those are also
42363
35:32:28,160 --> 35:32:32,480
provided inside your applicalizations so
42364
35:32:30,320 --> 35:32:35,120
if you go in there you'll see
42365
35:32:35,119 --> 35:32:39,591
localizations delegates all right so
42366
35:32:38,080 --> 35:32:42,592
what we need to do now is just to say
42367
35:32:47,679 --> 35:32:52,319
and then localizations delegates so then
42368
35:32:50,320 --> 35:32:54,800
that is provided and i'm going to do a
42369
35:32:52,320 --> 35:32:56,640
hot restart just because we've changed
42370
35:32:54,800 --> 35:32:58,080
the main function in our application and
42371
35:32:56,639 --> 35:33:01,191
those changes aren't going to take
42372
35:32:58,080 --> 35:33:03,271
effect until you do a hot restart okay
42373
35:33:01,191 --> 35:33:05,119
and what we can do now is to go ahead
42374
35:33:07,271 --> 35:33:10,959
what would be really great is actually
42375
35:33:09,119 --> 35:33:14,399
if you could extract that little title
42376
35:33:10,960 --> 35:33:16,232
that we've written in our intel en arb
42377
35:33:14,399 --> 35:33:18,159
and and put it somewhere on some sort of
42378
35:33:16,232 --> 35:33:19,440
widget just to see that it is working in
42379
35:33:18,160 --> 35:33:21,680
english and in swedish so what i'm going
42380
35:33:19,440 --> 35:33:22,960
to do is i'm going to bring scr cpy on
42381
35:33:22,960 --> 35:33:26,872
right here at the moment you can see
42382
35:33:24,720 --> 35:33:29,680
we're on the login page so let's go to
42383
35:33:26,872 --> 35:33:32,551
the login page and you don't have to do
42384
35:33:29,679 --> 35:33:34,551
this so i'm just going to do this myself
42385
35:33:32,551 --> 35:33:36,551
just to demonstrate something and while
42386
35:33:34,551 --> 35:33:39,512
we're in the login page let's also clean
42387
35:33:36,551 --> 35:33:42,231
up these two unused imports okay and
42388
35:33:39,512 --> 35:33:44,000
let's go ahead into our code here to the
42389
35:33:42,232 --> 35:33:46,800
login and you can see there's a cons
42390
35:33:44,000 --> 35:33:49,119
text login but in here we want to use
42391
35:33:46,800 --> 35:33:50,639
that title and again you don't have to
42392
35:33:49,119 --> 35:33:52,639
do this and i actually suggest you don't
42393
35:33:50,639 --> 35:33:54,800
do it it's just for me demonstrating to
42394
35:33:52,639 --> 35:33:57,360
you that hey it's working as expected
42395
35:33:54,800 --> 35:33:58,720
okay so just follow along and look at
42396
35:33:57,360 --> 35:34:00,720
this part without having to do it
42397
35:33:58,720 --> 35:34:02,080
yourself so what we need to do in here
42398
35:34:00,720 --> 35:34:03,759
let's go and import the same
42399
35:34:02,080 --> 35:34:04,831
localization so i'm just going to say
42400
35:34:06,399 --> 35:34:11,191
and then we had flutter lock
42401
35:34:09,440 --> 35:34:13,191
what was it called let's go to main dart
42402
35:34:11,191 --> 35:34:15,191
file and and exactly copy and paste that
42403
35:34:13,191 --> 35:34:17,360
flutter gen okay and i'm gonna bring it
42404
35:34:17,360 --> 35:34:21,592
i'm gonna paste it there so we also have
42405
35:34:19,191 --> 35:34:24,000
access to our localizations and the way
42406
35:34:21,592 --> 35:34:26,000
to grab your localizations is with this
42407
35:34:24,000 --> 35:34:27,911
code so if i write this for instance
42408
35:34:26,000 --> 35:34:29,831
just in here i'm going to remove
42409
35:34:27,911 --> 35:34:31,759
actually let cons be there i just want
42410
35:34:29,831 --> 35:34:33,911
you to see why we have to remove const
42411
35:34:31,759 --> 35:34:36,231
in the future so for us to be able to
42412
35:34:33,911 --> 35:34:38,399
grab this string which is my title in
42413
35:34:36,232 --> 35:34:40,320
our login view we have to say app
42414
35:34:41,440 --> 35:34:47,911
context and then we can say my title and
42415
35:34:44,872 --> 35:34:50,080
then we have to explicitly on wrapless
42416
35:34:47,911 --> 35:34:52,959
okay so this is how you grab a
42417
35:34:50,080 --> 35:34:54,960
localization out of your um supported
42418
35:34:52,960 --> 35:34:56,400
localizations basically the stuff that
42419
35:34:58,399 --> 35:35:02,479
so now we have my title and in here as
42420
35:35:02,479 --> 35:35:06,872
it says hey a value of type null can't
42421
35:35:06,872 --> 35:35:11,512
basically this is an issue with having
42422
35:35:09,039 --> 35:35:13,271
constant here because in in the previous
42423
35:35:11,512 --> 35:35:14,872
i mean up until this point the way we've
42424
35:35:13,271 --> 35:35:16,800
created our app bar was that we said
42425
35:35:14,872 --> 35:35:19,120
that is a constant string it's a
42426
35:35:16,800 --> 35:35:20,800
constant text that says login but now
42427
35:35:19,119 --> 35:35:22,479
that all of a sudden we're saying we're
42428
35:35:20,800 --> 35:35:24,551
retrieving this text from our
42429
35:35:22,479 --> 35:35:26,720
applicalizations these properties
42430
35:35:28,479 --> 35:35:31,679
constants so if you go in here you can
42431
35:35:30,000 --> 35:35:33,512
see it's just a string getter and that's
42432
35:35:31,679 --> 35:35:34,799
the reason you can't have cons in here
42433
35:35:33,512 --> 35:35:36,320
so i'm just going to remove that cons
42434
35:35:34,800 --> 35:35:38,080
it's going to be very happy and the
42435
35:35:36,320 --> 35:35:40,000
reason we have this exclamation mark in
42436
35:35:38,080 --> 35:35:42,400
here is that the app localization is off
42437
35:35:40,000 --> 35:35:44,639
function and you can see it returns an
42438
35:35:42,399 --> 35:35:46,319
optional application it is a bit
42439
35:35:44,639 --> 35:35:48,000
unfortunate i don't really like the
42440
35:35:46,320 --> 35:35:50,320
syntax that everywhere we have to go on
42441
35:35:52,479 --> 35:35:57,119
an exclamation mark in here and we're
42442
35:35:55,191 --> 35:35:59,191
actually going to fix that soon right
42443
35:35:57,119 --> 35:36:00,551
after this demonstration and because
42444
35:36:00,551 --> 35:36:04,319
as you'll see soon it is soon gonna get
42445
35:36:02,720 --> 35:36:06,551
quite annoying to have to always say
42446
35:36:04,320 --> 35:36:08,720
applicalizations of context exclamation
42447
35:36:06,551 --> 35:36:10,872
mark dot and then the name of your
42448
35:36:08,720 --> 35:36:13,512
property but so hang on we'll fix that
42449
35:36:10,872 --> 35:36:15,592
soon so now we have the login in here
42450
35:36:13,512 --> 35:36:17,592
and i'm going to do a hot restart
42451
35:36:15,592 --> 35:36:20,320
and let's see what we get i'm going to
42452
35:36:17,592 --> 35:36:23,760
bring scrcpy and now you can see i see
42453
35:36:20,320 --> 35:36:25,760
my title goes here swedish all right
42454
35:36:23,759 --> 35:36:26,871
and that's the title that we put in the
42455
35:36:28,479 --> 35:36:33,679
swedish you see right here okay
42456
35:36:31,360 --> 35:36:35,440
so we have that english one let me bring
42457
35:36:33,679 --> 35:36:37,439
the swedish one next to the english one
42458
35:36:37,440 --> 35:36:40,000
so we have the english one and the
42459
35:36:38,720 --> 35:36:41,680
swedish one here and you can see at the
42460
35:36:40,000 --> 35:36:43,191
moment we're seeing the swedish one and
42461
35:36:41,679 --> 35:36:46,159
the way to actually change the language
42462
35:36:43,191 --> 35:36:47,911
of your um phone on android is a little
42463
35:36:46,160 --> 35:36:49,192
bit different from ios so here i'm just
42464
35:36:49,191 --> 35:36:56,159
install nina and that's settings and in
42465
35:36:52,080 --> 35:36:58,232
here i believe it is somewhere
42466
35:36:58,232 --> 35:37:01,680
and then spirowak which means language
42467
35:37:00,479 --> 35:37:04,551
and then i'm going to go to language and
42468
35:37:01,679 --> 35:37:07,119
at the moment spirowak here is swedish
42469
35:37:04,551 --> 35:37:09,679
i'm just going to bring english on top
42470
35:37:07,119 --> 35:37:11,360
and you can see now english is on top so
42471
35:37:09,679 --> 35:37:13,439
let's go back to our application and see
42472
35:37:11,360 --> 35:37:14,720
if its title is going to change and now
42473
35:37:13,440 --> 35:37:17,440
all of a sudden you see that it's
42474
35:37:14,720 --> 35:37:20,479
displaying the english title so it's
42475
35:37:17,440 --> 35:37:23,440
working very very well on android i'm
42476
35:37:20,479 --> 35:37:25,440
gonna get rid of the scr cpy on the
42477
35:37:27,039 --> 35:37:33,591
device which i've created with um
42478
35:37:30,639 --> 35:37:35,592
so it's an iphone 12 pro that is sitting
42479
35:37:33,592 --> 35:37:38,480
on my desk right here and i have
42480
35:37:35,592 --> 35:37:41,040
quicktime which is mirroring that iphone
42481
35:37:38,479 --> 35:37:43,271
screen here so let's go ahead and in
42482
35:37:41,039 --> 35:37:45,511
here stop the process on android and
42483
35:37:43,271 --> 35:37:46,959
then command shift b on macintosh to
42484
35:37:45,512 --> 35:37:48,479
select the device or control should be
42485
35:37:46,960 --> 35:37:50,872
on windows and linux and say select
42486
35:37:48,479 --> 35:37:53,271
device and then i'm going to choose that
42487
35:37:50,872 --> 35:37:55,192
iphone 12 pro and i'm going to go to the
42488
35:37:53,271 --> 35:37:56,800
main dart file because that's how we
42489
35:37:55,191 --> 35:37:58,231
should run the application because if
42490
35:37:56,800 --> 35:37:59,680
you try to run the application when
42491
35:37:58,232 --> 35:38:01,360
you're on this file it's just going to
42492
35:37:59,679 --> 35:38:04,399
give you an error telling you hey i
42493
35:38:01,360 --> 35:38:05,759
don't know how to run an arb file so
42494
35:38:04,399 --> 35:38:08,231
that's the reason you always have to go
42495
35:38:08,232 --> 35:38:11,911
in your application so that visual
42496
35:38:10,232 --> 35:38:13,911
studio code at least knows how to run
42497
35:38:19,679 --> 35:38:24,959
quicktime here and let's wait basically
42498
35:38:22,551 --> 35:38:25,831
for this running xcode build process to
42499
35:38:25,831 --> 35:38:29,039
and as i've mentioned before sometimes
42500
35:38:29,039 --> 35:38:34,719
much slower than building with gradle so
42501
35:38:32,232 --> 35:38:37,120
that is quite annoying um so i'm just
42502
35:38:34,720 --> 35:38:39,680
gonna wait here until this process is
42503
35:38:37,119 --> 35:38:41,271
done let's see how long it takes
42504
35:38:39,679 --> 35:38:43,511
oh it's installing that so i don't
42505
35:38:41,271 --> 35:38:45,440
actually have to do anything so
42506
35:38:43,512 --> 35:38:46,800
installing and launching it says at the
42507
35:38:48,872 --> 35:38:52,320
let's see how long that takes and i can
42508
35:38:50,800 --> 35:38:53,760
see now that it's going to install the
42509
35:38:52,320 --> 35:38:55,440
application right here we should see
42510
35:39:03,831 --> 35:39:07,911
now it is launching the application and
42511
35:39:06,080 --> 35:39:12,160
we can see that at the moment the user
42512
35:39:07,911 --> 35:39:13,512
and face is english and um so i'm gonna
42513
35:39:13,512 --> 35:39:18,479
and then bring visual studio code here
42514
35:39:15,831 --> 35:39:20,799
as well all right fantastic so um
42515
35:39:20,800 --> 35:39:25,512
an iphone a real iphone on your computer
42516
35:39:23,440 --> 35:39:27,680
screen with quicktime isn't going to
42517
35:39:25,512 --> 35:39:30,639
allow you to interact with that iphone
42518
35:39:27,679 --> 35:39:33,119
at all and scr cpy is very special in
42519
35:39:30,639 --> 35:39:34,720
that it connects with adb and at the low
42520
35:39:33,119 --> 35:39:35,759
level it allows you to interact with the
42521
35:39:35,759 --> 35:39:38,959
however the same thing isn't true when
42522
35:39:37,512 --> 35:39:41,191
you're mirroring an iphone screen so
42523
35:39:38,960 --> 35:39:43,120
right now i have to go and interact with
42524
35:39:43,119 --> 35:39:46,639
i'm going to grab this phone
42525
35:39:46,872 --> 35:39:52,080
and it is right here i don't know if the
42526
35:39:49,679 --> 35:39:55,439
cable is long enough for me to show you
42527
35:39:52,080 --> 35:39:58,320
so here is the phone right there
42528
35:39:55,440 --> 35:39:59,911
and i'm going to then go to system
42529
35:39:59,911 --> 35:40:04,872
and i'm then going to go to general
42530
35:40:04,872 --> 35:40:10,000
and then let's go to language and region
42531
35:40:07,360 --> 35:40:11,831
and in there i'm going to choose swedish
42532
35:40:11,831 --> 35:40:15,191
the the thing that is a bit
42533
35:40:13,679 --> 35:40:17,119
disappointing in ios is that the
42534
35:40:15,191 --> 35:40:18,871
language that you choose for your system
42535
35:40:17,119 --> 35:40:21,271
is for the entire system and when you do
42536
35:40:18,872 --> 35:40:24,320
that it's going to kill all the running
42537
35:40:21,271 --> 35:40:25,759
applications because ios applications
42538
35:40:24,320 --> 35:40:27,680
don't have the possibility to change
42539
35:40:25,759 --> 35:40:28,799
their language on the fly that's
42540
35:40:28,800 --> 35:40:32,551
like android does very very well in that
42541
35:40:31,191 --> 35:40:34,720
you can change the language of the
42542
35:40:32,551 --> 35:40:36,872
entire system and nothing has to restart
42543
35:40:34,720 --> 35:40:38,720
the applications keep running you could
42544
35:40:36,872 --> 35:40:42,080
even see when we changed the language
42545
35:40:38,720 --> 35:40:43,831
the um like here we couldn't we didn't
42546
35:40:42,080 --> 35:40:46,160
basically see the application
42547
35:40:46,160 --> 35:40:51,120
what we need to do now is to ensure that
42548
35:40:49,360 --> 35:40:53,191
we don't change the entire system's
42549
35:40:51,119 --> 35:40:56,231
language instead i'm going to show you a
42550
35:40:53,191 --> 35:40:58,000
way that you can choose to do in ios
42551
35:40:56,232 --> 35:41:00,160
that changes only your applications
42552
35:40:58,000 --> 35:41:02,551
language so let's go back in here and
42553
35:41:00,160 --> 35:41:05,440
let's go and find our application which
42554
35:41:02,551 --> 35:41:07,119
is called my notes i believe somewhere
42555
35:41:05,440 --> 35:41:09,360
and let's see if you can find it and
42556
35:41:07,119 --> 35:41:10,639
it's right there my notes and now you
42557
35:41:09,360 --> 35:41:12,320
can see that there's a menu at the
42558
35:41:10,639 --> 35:41:13,679
bottom of the screen that says language
42559
35:41:12,320 --> 35:41:16,000
and then i'm going to tap on that and
42560
35:41:13,679 --> 35:41:17,359
then i'm going to choose swedish and the
42561
35:41:16,000 --> 35:41:18,872
reason that you're seeing these two
42562
35:41:17,360 --> 35:41:22,080
options in here because the change we
42563
35:41:18,872 --> 35:41:23,832
made in our info p list so if i say main
42564
35:41:23,831 --> 35:41:27,271
we can see that we said english and
42565
35:41:25,440 --> 35:41:29,271
swedish in this order and that's why
42566
35:41:27,271 --> 35:41:31,512
they are displayed here also in that
42567
35:41:29,271 --> 35:41:33,271
order so i'm going to then choose
42568
35:41:31,512 --> 35:41:35,592
swedish and as soon as i do this you'll
42569
35:41:33,271 --> 35:41:38,080
see up here that our application will
42570
35:41:35,592 --> 35:41:39,120
terminate because ios can't handle that
42571
35:41:39,119 --> 35:41:42,871
and there we go the application's
42572
35:41:42,872 --> 35:41:46,232
but that's okay so i'm gonna go back
42573
35:41:44,639 --> 35:41:48,639
here and then open the application on
42574
35:41:46,232 --> 35:41:50,400
ios oh now we have to debug it as well
42575
35:41:48,639 --> 35:41:51,911
okay because we're in debug mode so
42576
35:41:50,399 --> 35:41:54,479
let's go ahead and main dark file and
42577
35:41:51,911 --> 35:41:56,232
then run the application again
42578
35:41:54,479 --> 35:41:58,080
and you can see it says in ios 14 plus
42579
35:41:56,232 --> 35:41:59,832
debug mode flatter apps can only be
42580
35:41:58,080 --> 35:42:02,551
launched from flutter tooling ids with
42581
35:41:59,831 --> 35:42:04,871
flutter plugins or from xcode
42582
35:42:02,551 --> 35:42:06,872
so this is a little bit unfortunate as
42583
35:42:06,872 --> 35:42:09,680
because then you have to basically run
42584
35:42:10,720 --> 35:42:14,800
over and over again just while you're
42585
35:42:14,800 --> 35:42:19,271
i would say it's one of the shortcomings
42586
35:42:16,639 --> 35:42:20,720
of running applications on ios as well
42587
35:42:19,271 --> 35:42:23,191
like there are so many things i feel
42588
35:42:20,720 --> 35:42:24,960
like android is ahead of ios
42589
35:42:23,191 --> 35:42:27,512
that it's just android is a little bit
42590
35:42:24,960 --> 35:42:28,960
more developer friendly i would say
42591
35:42:28,960 --> 35:42:33,832
the whole operating system is a little
42592
35:42:31,119 --> 35:42:35,759
bit more friendly so let's see
42593
35:42:33,831 --> 35:42:38,319
um i can see now at the bottom of the
42594
35:42:35,759 --> 35:42:40,319
screen it says installing and launching
42595
35:42:38,320 --> 35:42:44,080
so let's have a look here now our user
42596
35:42:40,320 --> 35:42:47,680
interface should be in swedish
42597
35:42:44,080 --> 35:42:48,551
if everything goes well of course
42598
35:42:48,551 --> 35:42:52,159
if things are going well then on ios we
42599
35:42:50,720 --> 35:42:54,551
don't have to do this process over and
42600
35:42:52,160 --> 35:42:56,080
over again so it's just just to make
42601
35:42:54,551 --> 35:42:58,080
sure that it's working for the first
42602
35:42:56,080 --> 35:43:00,479
time as you can see now after changing
42603
35:42:58,080 --> 35:43:02,400
our applications into language to
42604
35:43:00,479 --> 35:43:04,399
swedish now we can see the swedish title
42605
35:43:02,399 --> 35:43:05,759
being displayed on top all right
42606
35:43:04,399 --> 35:43:07,511
so i'm going to close the widget
42607
35:43:07,512 --> 35:43:12,551
and i'm going to stop this process and
42608
35:43:09,759 --> 35:43:14,551
i'm going to get rid of this and now we
42609
35:43:12,551 --> 35:43:16,319
should be focusing only then on
42610
35:43:14,551 --> 35:43:18,399
deploying on android because it's just
42611
35:43:18,399 --> 35:43:22,871
so let's go and do a flaster select and
42612
35:43:20,639 --> 35:43:25,759
then i'm going to say i'm choosing to
42613
35:43:22,872 --> 35:43:28,160
run my application on my android device
42614
35:43:25,759 --> 35:43:29,191
then i'm gonna put away my iphone
42615
35:43:29,191 --> 35:43:34,080
so that is that and and the thing that
42616
35:43:32,080 --> 35:43:37,360
we need to talk about now is at the
42617
35:43:34,080 --> 35:43:40,080
optionality of this app localizations so
42618
35:43:37,360 --> 35:43:40,831
if you go back to our login view you saw
42619
35:43:40,831 --> 35:43:44,799
applicalizations of context is an
42620
35:43:43,191 --> 35:43:47,360
optional value because this function
42621
35:43:44,800 --> 35:43:48,960
returns an optional app localizations
42622
35:43:47,360 --> 35:43:50,800
and there is a way to make this better
42623
35:43:48,960 --> 35:43:53,512
it's one of my favorite ways it's like
42624
35:43:50,800 --> 35:43:56,232
the shortest extension that we can write
42625
35:43:53,512 --> 35:43:58,080
in our flutter career progress
42626
35:43:56,232 --> 35:43:59,440
but it's one of the most powerful as
42627
35:43:59,440 --> 35:44:04,000
in order not to have to repeat this code
42628
35:44:02,000 --> 35:44:07,039
what we could do is to create an
42629
35:44:04,000 --> 35:44:09,759
extension on build context that grabs
42630
35:44:07,039 --> 35:44:12,439
its applicalizations and returns it as a
42631
35:44:09,759 --> 35:44:14,799
non-optional value so here we have
42632
35:44:12,440 --> 35:44:17,040
applicalizations being returned by
42633
35:44:14,800 --> 35:44:19,360
passing the context in but what we are
42634
35:44:17,039 --> 35:44:23,039
going to do is to grab the applications
42635
35:44:19,360 --> 35:44:25,831
from the context itself all right
42636
35:44:25,831 --> 35:44:30,231
how we can actually do that in order in
42637
35:44:28,160 --> 35:44:31,760
order to get started let's leave this
42638
35:44:30,232 --> 35:44:33,680
code as it is right there we don't have
42639
35:44:31,759 --> 35:44:35,360
to do anything special but what we're
42640
35:44:33,679 --> 35:44:36,871
going to do is to go as you can see at
42641
35:44:35,360 --> 35:44:38,800
the bottom of the screen we have to go
42642
35:44:36,872 --> 35:44:40,400
and create a new file under lib
42643
35:44:38,800 --> 35:44:42,320
extensions and then we're going to
42644
35:44:40,399 --> 35:44:45,360
create a new folder as well called build
42645
35:44:42,320 --> 35:44:47,192
context lock dot dart and lock as in
42646
35:44:45,360 --> 35:44:49,512
localization in this file we're going to
42647
35:44:47,191 --> 35:44:51,831
create our extension on build contacts
42648
35:44:51,831 --> 35:44:56,399
return our localizations to the caller
42649
35:44:56,399 --> 35:45:00,959
so let's go ahead and do that
42650
35:44:58,320 --> 35:45:03,272
i'm going to go to lib in here and then
42651
35:45:00,960 --> 35:45:04,872
we have um as the bottom at the bottom
42652
35:45:03,271 --> 35:45:07,119
of the screen says extensions we already
42653
35:45:04,872 --> 35:45:09,832
have the extensions folder but we only
42654
35:45:07,119 --> 35:45:11,759
have list folder in there with a filter
42655
35:45:09,831 --> 35:45:14,000
file so in extensions i'm just going to
42656
35:45:11,759 --> 35:45:17,439
right click and say new file then let's
42657
35:45:14,000 --> 35:45:19,271
go ahead and create build context slash
42658
35:45:19,271 --> 35:45:22,479
and in here what we're going to do is to
42659
35:45:28,160 --> 35:45:34,000
after gen as we did in the other places
42660
35:45:30,551 --> 35:45:36,080
and then gen l10n applicalization starts
42661
35:45:36,080 --> 35:45:42,080
so that's the first import and in here
42662
35:45:39,119 --> 35:45:43,360
we don't we only need a few symbols or
42663
35:45:42,080 --> 35:45:44,960
actually one symbol which is the
42664
35:45:43,360 --> 35:45:47,191
applicalizations but we'll talk about
42665
35:45:44,960 --> 35:45:49,192
that soon so let's go ahead and say
42666
35:45:47,191 --> 35:45:52,399
extension um and we're gonna say
42667
35:45:49,191 --> 35:45:54,399
localization on build context as you'll
42668
35:45:52,399 --> 35:45:55,911
see it says i have to also import this
42669
35:45:54,399 --> 35:45:57,831
because it is in material so i'm gonna
42670
35:45:57,831 --> 35:46:01,679
and i really don't like as if as you
42671
35:46:00,232 --> 35:46:03,760
follow along with this course i don't
42672
35:46:01,679 --> 35:46:06,399
like to import everything in material
42673
35:46:03,759 --> 35:46:08,159
like if i only need build context i only
42674
35:46:06,399 --> 35:46:09,759
need build context so i'm not going to
42675
35:46:08,160 --> 35:46:11,760
import everything so let's just go ahead
42676
35:46:11,759 --> 35:46:15,831
and that only brings build context in
42677
35:46:18,000 --> 35:46:21,592
what we need to do in here we're going
42678
35:46:19,592 --> 35:46:25,320
to create basically a getter which
42679
35:46:26,831 --> 35:46:30,799
applocalizations we're going to say this
42680
35:46:28,720 --> 35:46:32,960
is a getter and it's called lock
42681
35:46:30,800 --> 35:46:34,720
and what it does is is returns
42682
35:46:38,639 --> 35:46:42,800
an exclamation mark at the end of it so
42683
35:46:41,191 --> 35:46:45,512
and also you'll see that we've imported
42684
35:46:42,800 --> 35:46:47,760
applications as a whole but we only need
42685
35:46:45,512 --> 35:46:50,400
app localizations from that file so i'm
42686
35:46:47,759 --> 35:46:53,039
just gonna say show this okay
42687
35:46:50,399 --> 35:46:55,911
so that's that file now it's created and
42688
35:46:53,039 --> 35:46:59,511
and while this all is going on i'm gonna
42689
35:46:55,911 --> 35:47:01,039
select that and also i'm gonna say run
42690
35:46:59,512 --> 35:47:03,040
because it is always good to have the
42691
35:47:01,039 --> 35:47:04,871
application running as we're doing hot
42692
35:47:03,039 --> 35:47:06,959
restarts and hot reload so we can see
42693
35:47:04,872 --> 35:47:08,639
the results on the screen so with this
42694
35:47:06,960 --> 35:47:10,639
extension now you're soon gonna be able
42695
35:47:11,679 --> 35:47:16,959
and then you can get your localizations
42696
35:47:14,000 --> 35:47:19,271
so let's go back now to this login view
42697
35:47:16,960 --> 35:47:21,272
what we wrote here as you can see is
42698
35:47:19,271 --> 35:47:24,000
this syntax at the moment but what you
42699
35:47:21,271 --> 35:47:26,000
can replace the syntax with is if we
42700
35:47:24,000 --> 35:47:28,232
remove this and we just say context
42701
35:47:26,000 --> 35:47:30,720
which is our build context and then you
42702
35:47:28,232 --> 35:47:32,480
say dot lock and you'll see here it says
42703
35:47:30,720 --> 35:47:34,000
oh i don't know what lock is and that's
42704
35:47:32,479 --> 35:47:35,271
correct it doesn't know what lock is
42705
35:47:34,000 --> 35:47:36,720
because we haven't imported that
42706
35:47:36,720 --> 35:47:39,831
sorry about that i'll just close the
42707
35:47:39,831 --> 35:47:43,039
so it doesn't know what that is so i'm
42708
35:47:41,271 --> 35:47:45,679
just going to say command dot and it's
42709
35:47:43,039 --> 35:47:48,231
going to auto import it for me great and
42710
35:47:45,679 --> 35:47:50,551
now we can just say my title
42711
35:47:48,232 --> 35:47:52,552
i mean tell me this isn't better this is
42712
35:47:50,551 --> 35:47:55,039
for me 100 times better like if you
42713
35:47:52,551 --> 35:47:57,512
compare this with what we had before
42714
35:47:55,039 --> 35:47:59,679
which was this i mean come on
42715
35:47:57,512 --> 35:48:02,800
it's a lot shorter a lot more is the
42716
35:47:59,679 --> 35:48:05,039
same and i personally think it is it is
42717
35:48:05,039 --> 35:48:09,911
let me go back all right so let's leave
42718
35:48:07,271 --> 35:48:12,080
this here for now okay just my title
42719
35:48:09,911 --> 35:48:14,080
let's leave it there and let's go to our
42720
35:48:12,080 --> 35:48:15,592
android application which is scrcpy in
42721
35:48:14,080 --> 35:48:17,119
here and we can see that it's displaying
42722
35:48:15,592 --> 35:48:19,512
the correct title so if i do a hot
42723
35:48:17,119 --> 35:48:22,799
restart as well it's still going to work
42724
35:48:19,512 --> 35:48:24,080
and display the string from our
42725
35:48:29,191 --> 35:48:34,871
we actually have to talk about
42726
35:48:31,911 --> 35:48:36,872
all right how are we going to go about
42727
35:48:36,872 --> 35:48:42,960
well this is the important part you see
42728
35:48:39,512 --> 35:48:44,479
localizing is in a lot of places quite a
42729
35:48:42,960 --> 35:48:46,720
boring work in that you have to
42730
35:48:44,479 --> 35:48:48,720
literally go for instance if if you're i
42731
35:48:46,720 --> 35:48:50,232
mean it is boring if you're doing it the
42732
35:48:48,720 --> 35:48:52,232
way we are doing it in this chapter and
42733
35:48:50,232 --> 35:48:53,512
that you have to go and collect all
42734
35:48:53,512 --> 35:48:57,760
excuse me and then you have to go and
42735
35:48:55,360 --> 35:48:59,119
place them in your arb files and then
42736
35:48:57,759 --> 35:49:00,959
you have to also place them in the
42737
35:48:59,119 --> 35:49:02,399
swedish arab file and then you have to
42738
35:49:02,399 --> 35:49:05,360
etc so you have to create keys for all
42739
35:49:05,360 --> 35:49:09,759
this is quite a boring work and it is
42740
35:49:08,160 --> 35:49:11,512
not something that we're gonna do in
42741
35:49:09,759 --> 35:49:13,439
this chapter because i've already
42742
35:49:11,512 --> 35:49:15,119
prepared all those for you so you don't
42743
35:49:13,440 --> 35:49:16,639
have to go and write them by your by
42744
35:49:16,639 --> 35:49:20,872
what i'm going to do here is i'm going
42745
35:49:18,639 --> 35:49:22,800
to literally go and bring all those
42746
35:49:20,872 --> 35:49:25,120
strings that i've prepared for you
42747
35:49:22,800 --> 35:49:26,551
and let me see if i can find them
42748
35:49:28,479 --> 35:49:32,639
okay i found them right here
42749
35:49:30,800 --> 35:49:35,592
and what i'm going to do then is i'm
42750
35:49:32,639 --> 35:49:37,191
going to just bring all those strings
42751
35:49:40,320 --> 35:49:45,592
arabi file so here you see at the moment
42752
35:49:42,800 --> 35:49:47,360
we have my title and i'm just going to
42753
35:49:45,592 --> 35:49:49,120
leave my title in there because we're
42754
35:49:47,360 --> 35:49:51,680
using it right now but we're going to
42755
35:49:51,679 --> 35:49:56,639
and i'm going to paste all these strings
42756
35:49:54,551 --> 35:49:59,360
that i've prepared for us okay so there
42757
35:49:56,639 --> 35:50:02,000
we go all of those are here now and
42758
35:49:59,360 --> 35:50:03,440
there is a github repository for this uh
42759
35:50:03,440 --> 35:50:06,872
uh course of course and you can go after
42760
35:50:06,872 --> 35:50:10,160
chapter is done you can go to that
42761
35:50:08,232 --> 35:50:11,512
github repository and retrieve all these
42762
35:50:10,160 --> 35:50:13,120
strings so you don't have to type them
42763
35:50:13,119 --> 35:50:18,799
it is nothing n nothing at all special
42764
35:50:16,800 --> 35:50:20,720
going on about this as you can see we
42765
35:50:18,800 --> 35:50:23,760
have just a logout button that says log
42766
35:50:20,720 --> 35:50:26,232
out we have versus a cancel button we
42767
35:50:23,759 --> 35:50:27,511
have the verify email which is something
42768
35:50:26,232 --> 35:50:29,592
that we're using in the verify email
42769
35:50:27,512 --> 35:50:31,360
screen for instance we have the register
42770
35:50:29,592 --> 35:50:33,512
button we have the restart button let's
42771
35:50:31,360 --> 35:50:35,592
see where the restart is used
42772
35:50:35,592 --> 35:50:40,720
oh restart i believe it is inside the
42773
35:50:38,000 --> 35:50:42,160
verify email screen so if i created for
42774
35:50:42,160 --> 35:50:46,720
if i say pixel to a b gmail foo bar
42775
35:50:46,720 --> 35:50:51,680
um oh sorry to register screen so let's
42776
35:50:51,679 --> 35:50:56,719
gmail.com foo barbaz i'm gonna register
42777
35:50:54,639 --> 35:50:58,399
this user and then we're gonna go into
42778
35:50:56,720 --> 35:51:00,960
this screen at the moment it says
42779
35:50:58,399 --> 35:51:03,591
restart and that's this key restart okay
42780
35:51:00,960 --> 35:51:06,080
so i literally gone to through all our
42781
35:51:03,592 --> 35:51:08,320
screens all our dialogues as well and
42782
35:51:06,080 --> 35:51:09,911
collected all those strings and placed
42783
35:51:09,911 --> 35:51:14,232
international internationalization enarb
42784
35:51:12,800 --> 35:51:16,720
file and i've also done the same thing
42785
35:51:14,232 --> 35:51:18,960
for swedish so i'm going to go and bring
42786
35:51:16,720 --> 35:51:21,271
those files i'm sorry bring those keys
42787
35:51:18,960 --> 35:51:23,440
in here so i've done the translation to
42788
35:51:21,271 --> 35:51:25,440
swedish and i'm not my mother tongue
42789
35:51:23,440 --> 35:51:28,000
isn't swedish so but i've lived in
42790
35:51:25,440 --> 35:51:30,000
sweden for a long time so um i can't
42791
35:51:30,000 --> 35:51:34,399
actually enough i can speak enough and
42792
35:51:32,320 --> 35:51:35,680
i'm gonna paste those string in strings
42793
35:51:34,399 --> 35:51:38,079
in here as you can see they're
42794
35:51:35,679 --> 35:51:39,759
completely in swedish okay so what i've
42795
35:51:38,080 --> 35:51:41,512
done is literally we have the english
42796
35:51:39,759 --> 35:51:44,159
ones you can see here and we have the
42797
35:51:41,512 --> 35:51:45,680
swedish ones so it's the same keys but
42798
35:51:45,679 --> 35:51:48,799
and again don't worry i understand if
42799
35:51:47,592 --> 35:51:50,639
you're watching this course you're like
42800
35:51:48,800 --> 35:51:52,639
oh but how am i going to get all these
42801
35:51:50,639 --> 35:51:54,399
just please go to the github repository
42802
35:51:52,639 --> 35:51:56,479
and you can extract these values you
42803
35:51:54,399 --> 35:51:57,591
don't have to type them by hand
42804
35:51:59,512 --> 35:52:04,400
so now we have these in order for our
42805
35:52:02,479 --> 35:52:06,639
localizations to be generated in these
42806
35:52:06,639 --> 35:52:09,679
flutter jan and have a look at this gen
42807
35:52:09,679 --> 35:52:15,119
gen l10n you can see those strings
42808
35:52:12,479 --> 35:52:18,080
aren't here at the moment because only
42809
35:52:15,119 --> 35:52:20,720
my title should be here somewhere let's
42810
35:52:22,399 --> 35:52:28,079
locale should reload my title you see
42811
35:52:25,360 --> 35:52:30,320
nothing else is in here but if we
42812
35:52:28,080 --> 35:52:32,232
do a hot restart all those strings
42813
35:52:30,320 --> 35:52:34,232
should get generated and then we should
42814
35:52:32,232 --> 35:52:36,080
have them all here you can see login
42815
35:52:34,232 --> 35:52:37,592
verify email all these are provided
42816
35:52:38,479 --> 35:52:43,119
that's that part so now we have all our
42817
35:52:40,720 --> 35:52:45,512
strings and we should just be able to do
42818
35:52:43,119 --> 35:52:47,512
the coding part which is the fun part so
42819
35:52:45,512 --> 35:52:49,680
let's go ahead and take care of that i'm
42820
35:52:47,512 --> 35:52:51,680
going to close all these files that are
42821
35:52:49,679 --> 35:52:54,231
there at the moment so we have a clean
42822
35:52:54,232 --> 35:52:59,271
the first thing that we're going to do
42823
35:52:55,831 --> 35:53:01,911
is to localize our um what is it called
42824
35:52:59,271 --> 35:53:03,759
cannot share empty note dialogue so
42825
35:53:01,911 --> 35:53:05,591
let's go ahead in there and then i'm
42826
35:53:03,759 --> 35:53:08,080
going to say command shift p and go to
42827
35:53:05,592 --> 35:53:09,760
cannot share empty now dialog
42828
35:53:08,080 --> 35:53:12,080
if you remember if you're if the user is
42829
35:53:09,759 --> 35:53:14,399
trying to share a dial sharing note that
42830
35:53:14,399 --> 35:53:19,039
so sharing in this case we have a key
42831
35:53:17,679 --> 35:53:21,359
for it so we're just going to say
42832
35:53:23,039 --> 35:53:26,719
this lock is an extension that we've
42833
35:53:24,720 --> 35:53:28,160
created we don't have access to it
42834
35:53:26,720 --> 35:53:29,759
unless we import it so i'm just going to
42835
35:53:28,160 --> 35:53:31,120
say command dot in visual studio code
42836
35:53:29,759 --> 35:53:32,319
and it's going to also import that file
42837
35:53:32,320 --> 35:53:35,592
just right here as you can see
42838
35:53:34,080 --> 35:53:37,360
and now we have access to all our
42839
35:53:35,592 --> 35:53:38,720
strings okay so in here we're just going
42840
35:53:38,720 --> 35:53:43,512
which is a key i've created remember all
42841
35:53:41,039 --> 35:53:45,679
these keys are in the arb file
42842
35:53:43,512 --> 35:53:49,040
and you cannot share an empty note so
42843
35:53:45,679 --> 35:53:51,511
we're going to say context.log
42844
35:53:49,039 --> 35:53:53,439
cannot share empty node prompt
42845
35:53:51,512 --> 35:53:55,760
which is a key again i've called an okay
42846
35:53:59,440 --> 35:54:04,872
so and now we've localized our show
42847
35:54:02,399 --> 35:54:07,271
cannot share empty notes dialog
42848
35:54:09,592 --> 35:54:12,720
localize our delete dialogue so i'm
42849
35:54:11,440 --> 35:54:14,960
going to say command shift p visual
42850
35:54:12,720 --> 35:54:16,872
studio code on mac or control should be
42851
35:54:14,960 --> 35:54:19,912
usually code for windows and linux and
42852
35:54:16,872 --> 35:54:22,551
this and let's say delete dialog
42853
35:54:22,551 --> 35:54:28,231
little uh title in here so let's just
42854
35:54:25,360 --> 35:54:29,680
say um context dot lock and remember
42855
35:54:28,232 --> 35:54:31,512
we're in a new file we don't have access
42856
35:54:31,512 --> 35:54:35,832
and in here i'm just gonna say delete
42857
35:54:35,831 --> 35:54:41,271
and prompt we're going to say context
42858
35:54:38,000 --> 35:54:44,399
unlock and delete nodes prompt
42859
35:54:41,271 --> 35:54:47,831
cancel context dot log cancel
42860
35:54:44,399 --> 35:54:50,231
and here context.lock and was it okay or
42861
35:54:47,831 --> 35:54:52,799
it's yes so let's just say yes all right
42862
35:54:50,232 --> 35:54:55,120
so that's the localization of this file
42863
35:54:52,800 --> 35:54:57,360
as well i'm going to say command command
42864
35:54:55,119 --> 35:54:59,831
s or just hot restart the whole thing
42865
35:54:57,360 --> 35:55:01,440
maybe it's better and i can see a crcy
42866
35:54:59,831 --> 35:55:03,119
crashed unfortunately and that's the
42867
35:55:01,440 --> 35:55:05,119
problem i've had with this cr cpy for a
42868
35:55:03,119 --> 35:55:06,720
long time that's okay it's an open
42869
35:55:05,119 --> 35:55:08,231
source software i'm just gonna say
42870
35:55:08,232 --> 35:55:11,680
and this and i'm gonna run the
42871
35:55:10,160 --> 35:55:13,271
application so we have it running in the
42872
35:55:15,039 --> 35:55:18,799
so uh that's the delete dialog now i
42873
35:55:17,831 --> 35:55:20,231
have to capture at the bottom of the
42874
35:55:18,800 --> 35:55:22,000
screen in case we have to go and
42875
35:55:20,232 --> 35:55:24,480
localize pretty much everything in our
42876
35:55:22,000 --> 35:55:26,160
application up to this point and now the
42877
35:55:24,479 --> 35:55:29,512
next step is to localize the error
42878
35:55:26,160 --> 35:55:31,440
dialog so let's say error dialog
42879
35:55:29,512 --> 35:55:34,160
and in here let's just you can see it
42880
35:55:31,440 --> 35:55:37,360
says an error occurred and we've called
42881
35:55:34,160 --> 35:55:38,552
a generic error prompt in our arb file
42882
35:55:38,551 --> 35:55:42,720
generic error progresses and error
42883
35:55:42,720 --> 35:55:48,551
so let's go ahead and use that here so
42884
35:55:45,512 --> 35:55:50,400
i'm just going to say context.lock
42885
35:55:48,551 --> 35:55:52,639
auto import i don't have to explain that
42886
35:55:50,399 --> 35:55:54,000
anymore and then we say generic error
42887
35:55:54,000 --> 35:55:58,639
we have an ok as well so context lock
42888
35:56:01,592 --> 35:56:06,480
then we have to go and localize our log
42889
35:56:04,080 --> 35:56:09,512
out dialog so let's go to log out dialog
42890
35:56:10,479 --> 35:56:14,639
and we're going to do the same thing in
42891
35:56:12,232 --> 35:56:16,232
here so let's just go ahead and say that
42892
35:56:14,639 --> 35:56:19,039
we're going to use the log out button in
42893
35:56:16,232 --> 35:56:20,960
here and you see we have log out in a
42894
35:56:19,039 --> 35:56:23,591
few places like if you remember in the
42895
35:56:20,960 --> 35:56:25,912
main application interface when you're
42896
35:56:23,592 --> 35:56:27,680
logged in with an actual user i'm going
42897
35:56:25,911 --> 35:56:29,911
to bring in crcpy so you know what i'm
42898
35:56:29,911 --> 35:56:34,720
if you look at this screen if i say
42899
35:56:31,831 --> 35:56:37,591
restart and if i log in with a user and
42900
35:56:40,551 --> 35:56:44,159
when you log in with an actual user then
42901
35:56:42,399 --> 35:56:46,319
you have this little log out in here and
42902
35:56:44,160 --> 35:56:47,832
it says log out and at the same time
42903
35:56:46,320 --> 35:56:50,080
when you tap on it then there's this
42904
35:56:47,831 --> 35:56:52,159
dialog that says logout so we have a
42905
35:56:50,080 --> 35:56:54,479
choice in here either you go and define
42906
35:56:52,160 --> 35:56:57,271
two log out strings with different keys
42907
35:56:54,479 --> 35:56:59,512
in your arb file or you just define one
42908
35:56:57,271 --> 35:57:01,119
and that's exactly what i've done so
42909
35:56:59,512 --> 35:57:04,872
we're in here i'm just going to say
42910
35:57:01,119 --> 35:57:06,871
context.lock that's how to import
42911
35:57:04,872 --> 35:57:08,800
and in here we're just going to say log
42912
35:57:08,800 --> 35:57:12,800
and it says log out button i understand
42913
35:57:11,271 --> 35:57:14,399
it's the title of a dialogue and we're
42914
35:57:12,800 --> 35:57:16,720
calling the log out button you may just
42915
35:57:14,399 --> 35:57:18,720
go ahead and call this key log out if
42916
35:57:16,720 --> 35:57:20,639
you want to i'll just call the log that
42917
35:57:18,720 --> 35:57:24,080
logout button remember these are just
42918
35:57:20,639 --> 35:57:28,080
keys you can change them easily okay
42919
35:57:24,080 --> 35:57:29,592
now that's that's for our title and then
42920
35:57:28,080 --> 35:57:31,759
for the content we're going to say
42921
35:57:31,759 --> 35:57:36,551
log out and dialog prompt and we have a
42922
35:57:34,551 --> 35:57:39,440
cancel button here so let's say let's
42923
35:57:36,551 --> 35:57:41,512
just say context log cancel
42924
35:57:39,440 --> 35:57:43,592
and again we have another log out button
42925
35:57:41,512 --> 35:57:45,440
you can see here so log out here log out
42926
35:57:43,592 --> 35:57:48,000
here and then log out in here so there
42927
35:57:45,440 --> 35:57:50,720
are three places using the same thing or
42928
35:57:50,720 --> 35:57:55,831
log and then we're going to say log out
42929
35:57:56,399 --> 35:58:00,399
so that's great so that's that part as
42930
35:57:58,160 --> 35:58:02,872
well i'm just gonna do command s to hot
42931
35:58:03,119 --> 35:58:05,759
the next thing that we have to do at the
42932
35:58:04,399 --> 35:58:08,159
bottom of the screen in the case in the
42933
35:58:05,759 --> 35:58:10,319
caption we have to go and localize our
42934
35:58:08,160 --> 35:58:12,320
password reset dialogue so i'm going to
42935
35:58:10,320 --> 35:58:15,512
remove log out dialog here and close the
42936
35:58:12,320 --> 35:58:17,360
tab and let's go to password reset
42937
35:58:17,360 --> 35:58:22,551
and in here we have this password reset
42938
35:58:20,479 --> 35:58:25,271
and i'm going to go to my notes as well
42939
35:58:22,551 --> 35:58:27,191
so let's go in here for the title and
42940
35:58:29,360 --> 35:58:33,512
and we're going to call it password
42941
35:58:31,119 --> 35:58:35,512
reset it's one of the keys i define and
42942
35:58:33,512 --> 35:58:38,160
in here we're going to say context lock
42943
35:58:35,512 --> 35:58:40,800
password reset dialog prompt okay
42944
35:58:38,160 --> 35:58:42,552
and we have an ok button so you now by
42945
35:58:40,800 --> 35:58:44,479
this point that we have an ok key as
42946
35:58:46,800 --> 35:58:51,271
so now we've done basically we're done
42947
35:58:49,440 --> 35:58:54,639
uh localizing the show password recent
42948
35:58:51,271 --> 35:58:57,039
dialogue uh uh show password reset sends
42949
35:58:57,119 --> 35:59:03,591
okay the next uh dialog is um
42950
35:59:00,551 --> 35:59:04,800
forgot password so let's go to
42951
35:59:04,800 --> 35:59:08,080
that sorry this is not a dialogue this
42952
35:59:06,479 --> 35:59:11,039
is actually a view so we're going to go
42953
35:59:11,039 --> 35:59:14,871
here i mean when it comes to views our
42954
35:59:13,191 --> 35:59:16,959
job is a little bit more difficult
42955
35:59:14,872 --> 35:59:18,400
because up until this point we've pretty
42956
35:59:18,399 --> 35:59:22,639
used constants like if you look at this
42957
35:59:20,479 --> 35:59:23,512
is a constant string here's a constant
42958
35:59:23,512 --> 35:59:28,720
here is constant so everywhere that
42959
35:59:26,399 --> 35:59:31,271
we're going to localize our strings and
42960
35:59:28,720 --> 35:59:33,191
we were using const before we have to
42961
35:59:31,271 --> 35:59:35,512
remove that cons now because our
42962
35:59:33,191 --> 35:59:38,720
localized properties inside arv funds
42963
35:59:35,512 --> 35:59:40,720
are unfortunately not defined as const
42964
35:59:38,720 --> 35:59:42,479
and i don't really know the reasoning
42965
35:59:40,720 --> 35:59:43,271
behind that simply maybe because there
42966
35:59:43,271 --> 35:59:47,271
getters and maybe getters can't be
42967
35:59:45,271 --> 35:59:51,039
constant or there are some
42968
35:59:47,271 --> 35:59:53,191
other problems with the generation maybe
42969
35:59:51,039 --> 35:59:55,511
that um the flutter team decided that
42970
35:59:53,191 --> 35:59:56,799
well these can't be constants but that's
42971
35:59:55,512 --> 35:59:59,360
something that's the truth that we have
42972
35:59:56,800 --> 36:00:01,440
to live with at the moment so
42973
35:59:59,360 --> 36:00:03,512
let's go ahead and find all our strings
42974
36:00:01,440 --> 36:00:06,232
and we're going to start localizing them
42975
36:00:03,512 --> 36:00:09,191
one at a time before i got password view
42976
36:00:06,232 --> 36:00:11,360
so here in this show error dialog and
42977
36:00:09,191 --> 36:00:13,831
i've called this key forgot password
42978
36:00:11,360 --> 36:00:15,911
view generic error so let's remove this
42979
36:00:19,831 --> 36:00:24,159
and we say forgot password
42980
36:00:25,271 --> 36:00:29,039
view generic error and i'm going to put
42981
36:00:27,039 --> 36:00:31,119
a comma at the end so it's formatted
42982
36:00:29,039 --> 36:00:33,831
nicely so let's go to this forgot
42983
36:00:31,119 --> 36:00:35,360
password title itself so i'm gonna
42984
36:00:33,831 --> 36:00:36,720
remove the const remember i just
42985
36:00:35,360 --> 36:00:38,800
explained that so we're gonna say
42986
36:00:36,720 --> 36:00:41,040
context log and we're gonna say forgot
42987
36:00:38,800 --> 36:00:43,512
password that's the key i've defined
42988
36:00:41,039 --> 36:00:45,360
and you can also see its description
42989
36:00:43,512 --> 36:00:47,271
here and you can see it says forgot
42990
36:00:47,271 --> 36:00:51,759
in english this message translates to
42991
36:00:51,759 --> 36:00:56,479
so this thing i've called it forgot
42992
36:00:54,320 --> 36:00:59,360
password view prompt so let's remove the
42993
36:00:56,479 --> 36:01:01,831
const remove the string itself and we're
42994
36:01:01,911 --> 36:01:07,271
context log forgot password prompt
42995
36:01:05,440 --> 36:01:09,119
forgot password view prompt and put a
42996
36:01:07,271 --> 36:01:10,551
comma at the end and let's have a look
42997
36:01:09,119 --> 36:01:12,000
at the documentation for this as you can
42998
36:01:10,551 --> 36:01:13,360
see it says if you forgot your password
42999
36:01:12,000 --> 36:01:15,512
simply enter your email and we'll send
43000
36:01:13,360 --> 36:01:17,592
you a password recent link okay
43001
36:01:15,512 --> 36:01:19,760
so that's one thing and then in your
43002
36:01:19,759 --> 36:01:23,119
it says input decoration your email
43003
36:01:21,360 --> 36:01:24,479
address because that's a forgot password
43004
36:01:23,119 --> 36:01:26,871
screen let's go here and have a look at
43005
36:01:26,872 --> 36:01:31,760
here i forgot my password so here's that
43006
36:01:32,639 --> 36:01:37,039
i can see i've called it email text
43007
36:01:34,720 --> 36:01:38,800
field placeholder so let's remove this
43008
36:01:37,039 --> 36:01:42,231
const and in here we're going to say
43009
36:01:38,800 --> 36:01:43,271
context log email placeholder text field
43010
36:01:43,271 --> 36:01:47,831
let's go ahead and have a look at this
43011
36:01:45,360 --> 36:01:50,720
one so let's remove the const it says
43012
36:01:47,831 --> 36:01:53,759
send me password recent link and i can
43013
36:01:53,759 --> 36:02:01,911
forgot password view send me link so
43014
36:01:57,759 --> 36:02:04,551
context log for god password forgot
43015
36:02:01,911 --> 36:02:06,479
send me link here and put a comma at the
43016
36:02:06,479 --> 36:02:11,191
gets busy with formatting the code and
43017
36:02:11,191 --> 36:02:15,759
i can see that i've called it forgot
43018
36:02:13,039 --> 36:02:17,911
password view back to login so
43019
36:02:21,360 --> 36:02:25,592
back okay so and this is this is a
43020
36:02:23,831 --> 36:02:26,959
technique that you can also use like if
43021
36:02:25,592 --> 36:02:28,552
you want to get like a property like
43022
36:02:26,960 --> 36:02:30,800
this that's quite long name and you want
43023
36:02:28,551 --> 36:02:33,039
to get the name immediately right you
43024
36:02:30,800 --> 36:02:35,360
could just write a few keywords of that
43025
36:02:33,039 --> 36:02:37,271
name for instance i know that for god
43026
36:02:35,360 --> 36:02:39,831
and back are quite unique names so if i
43027
36:02:37,271 --> 36:02:41,271
say forgot back it it's gonna show me
43028
36:02:41,271 --> 36:02:45,440
it has this like partial search kind of
43029
36:02:43,440 --> 36:02:47,592
in its intelligence which is very very
43030
36:02:47,592 --> 36:02:51,680
the next thing that we have to do is to
43031
36:02:49,360 --> 36:02:53,360
go ahead and localize our login view so
43032
36:02:51,679 --> 36:02:55,679
i'm going to close the screen forgot
43033
36:02:53,360 --> 36:02:57,680
password view and go to login view
43034
36:02:55,679 --> 36:02:59,039
login view right here and we're going to
43035
36:02:57,679 --> 36:03:00,479
start at the bottom at the top of the
43036
36:03:00,479 --> 36:03:04,479
we'll remove this unused import right
43037
36:03:04,479 --> 36:03:09,512
and let's go ahead and start by uh
43038
36:03:07,191 --> 36:03:11,119
localizing our dialogs so the first one
43039
36:03:09,512 --> 36:03:13,040
is cannot find a user with the entered
43040
36:03:11,119 --> 36:03:14,551
credentials and i've called it cannot
43041
36:03:14,551 --> 36:03:18,720
or login view cannot find user so i'm
43042
36:03:16,320 --> 36:03:21,272
just going to say context.log let's auto
43043
36:03:22,960 --> 36:03:27,440
or it was already imported okay that's
43044
36:03:24,720 --> 36:03:30,080
great and let's just say it is called
43045
36:03:27,440 --> 36:03:31,832
login error cannot find user cannot find
43046
36:03:31,831 --> 36:03:35,360
the next one i'm going to put some
43047
36:03:33,271 --> 36:03:36,959
commas in here get dark formatter to do
43048
36:03:35,360 --> 36:03:38,800
its job correctly and i'm going to press
43049
36:03:36,960 --> 36:03:40,720
command s to save the file and that's
43050
36:03:38,800 --> 36:03:42,551
going to format the file for me for
43051
36:03:40,720 --> 36:03:46,080
wrong credentials i've called it login
43052
36:03:42,551 --> 36:03:48,479
error wrong credentials so context log
43053
36:03:48,479 --> 36:03:52,639
next one is authentication error and we
43054
36:03:50,399 --> 36:03:56,079
just call it login error author so
43055
36:03:52,639 --> 36:03:59,679
context lock author okay so that's that
43056
36:03:56,080 --> 36:04:01,191
one as well now at the top of the login
43057
36:03:59,679 --> 36:04:02,639
login view we have this little text that
43058
36:04:01,191 --> 36:04:04,871
says please log in your account in order
43059
36:04:02,639 --> 36:04:07,039
to interact with and create notes
43060
36:04:08,800 --> 36:04:14,479
a login view prompt but i wonder what
43061
36:04:11,831 --> 36:04:16,720
happened to our title as you can see we
43062
36:04:14,479 --> 36:04:18,231
have this my title now that we're in the
43063
36:04:16,720 --> 36:04:20,080
login view it is a good time to actually
43064
36:04:18,232 --> 36:04:22,639
go and get rid of that okay so i'm going
43065
36:04:25,119 --> 36:04:30,871
and i'm going to kill this basically my
43066
36:04:27,512 --> 36:04:33,760
title and i suggest that you also go to
43067
36:04:30,872 --> 36:04:35,832
the swedish file which is intel sv and
43068
36:04:33,759 --> 36:04:37,759
kill this title as well okay so we've
43069
36:04:35,831 --> 36:04:39,591
removed that and i'm gonna get rid of
43070
36:04:39,592 --> 36:04:43,592
hot restart so that the code generation
43071
36:04:41,592 --> 36:04:46,552
kicks in and as you can see in here my
43072
36:04:43,592 --> 36:04:49,040
title isn't valid anymore and in this i
43073
36:04:46,551 --> 36:04:50,479
mean this title is called now login if
43074
36:04:49,039 --> 36:04:52,159
you can look at the documentation in
43075
36:04:50,479 --> 36:04:54,551
here you can see in english it just says
43076
36:04:54,551 --> 36:04:59,440
so let's remove this constant here from
43077
36:04:56,960 --> 36:05:02,480
the prompt as well and we're just going
43078
36:04:59,440 --> 36:05:04,479
to say context lock and let's just say
43079
36:05:02,479 --> 36:05:06,080
login prompt so i'm going to do a prompt
43080
36:05:09,679 --> 36:05:14,000
text field placeholder here enter your
43081
36:05:11,592 --> 36:05:16,720
email here we're gonna remove the const
43082
36:05:14,000 --> 36:05:19,911
and let's just say context lock
43083
36:05:16,720 --> 36:05:20,960
and we're gonna say email placeholder
43084
36:05:20,960 --> 36:05:24,720
and we also have an enter your password
43085
36:05:22,960 --> 36:05:26,800
here placeholder so let's remove the
43086
36:05:24,720 --> 36:05:27,911
cons in here i'm just gonna say context
43087
36:05:30,399 --> 36:05:35,039
placeholder okay password field password
43088
36:05:33,271 --> 36:05:36,872
text field placeholder that's the full
43089
36:05:36,872 --> 36:05:42,000
and we have this uh login in here so
43090
36:05:40,000 --> 36:05:44,080
what we need to do is just to change
43091
36:05:42,000 --> 36:05:46,479
this text as well so let's remove the
43092
36:05:44,080 --> 36:05:49,360
content here i'm just gonna say context
43093
36:05:50,960 --> 36:05:56,480
and i forgot my password so i'm going to
43094
36:05:53,911 --> 36:05:59,831
say context lock and i believe it's
43095
36:05:59,831 --> 36:06:04,639
login view forgot password okay
43096
36:06:02,720 --> 36:06:06,080
it's not a constant anymore and put a
43097
36:06:04,639 --> 36:06:07,831
comma here it's just good practice to
43098
36:06:06,080 --> 36:06:10,080
put comma at the end of your parameters
43099
36:06:07,831 --> 36:06:12,000
even if it's just one argument that
43100
36:06:10,080 --> 36:06:13,360
you're passing to a function i mean my
43101
36:06:12,000 --> 36:06:15,679
reason this is a little bit of a side
43102
36:06:13,360 --> 36:06:17,440
though but my reasoning is that any time
43103
36:06:15,679 --> 36:06:20,231
in the future anybody anybody wants to
43104
36:06:17,440 --> 36:06:22,320
add new parameters to this text widget
43105
36:06:20,232 --> 36:06:23,680
then they will have to go and put that
43106
36:06:22,320 --> 36:06:25,440
comma in there but if you as a
43107
36:06:23,679 --> 36:06:27,191
programmer who wrote this code in the
43108
36:06:25,440 --> 36:06:28,551
beginning you put the comma in there
43109
36:06:27,191 --> 36:06:30,799
you're kind of like acknowledging the
43110
36:06:28,551 --> 36:06:33,119
fact that hey i appreciate your time you
43111
36:06:30,800 --> 36:06:34,800
may be wanting to add now you may be
43112
36:06:33,119 --> 36:06:36,799
wanting to add new parameters to this
43113
36:06:34,800 --> 36:06:39,360
and i've already prepared this for you
43114
36:06:36,800 --> 36:06:41,040
so if you don't do this if i want to as
43115
36:06:39,360 --> 36:06:43,119
a programmer add new parameters in here
43116
36:06:41,039 --> 36:06:45,439
i have to go and say oh well okay comma
43117
36:06:43,119 --> 36:06:46,871
commandments go here blah blah
43118
36:06:45,440 --> 36:06:48,551
but if you'd added that already i'll
43119
36:06:46,872 --> 36:06:51,120
just say enter and then write my
43120
36:06:53,831 --> 36:06:59,191
okay great so what we can do now is to
43121
36:06:56,479 --> 36:07:01,512
scroll forward here and localize the
43122
36:06:59,191 --> 36:07:02,871
rest of these properties and it can't i
43123
36:07:01,512 --> 36:07:04,872
can just see here that we have one
43124
36:07:02,872 --> 36:07:07,271
property left here which at the moment
43125
36:07:04,872 --> 36:07:09,360
says not registered yet registered here
43126
36:07:07,271 --> 36:07:11,512
so let's go ahead and remove the const
43127
36:07:09,360 --> 36:07:12,720
as we usually do then and say contacts
43128
36:07:12,720 --> 36:07:17,831
and i can see it's called not registered
43129
36:07:15,759 --> 36:07:19,759
so let's use that and a comma here so we
43130
36:07:17,831 --> 36:07:20,639
prepared for the next programmer so to
43131
36:07:20,639 --> 36:07:25,831
and we could just say now that we have
43132
36:07:23,271 --> 36:07:27,592
successfully localized our login view at
43133
36:07:25,831 --> 36:07:29,759
the moment so we could just close this
43134
36:07:29,759 --> 36:07:34,639
the next step is to localize our
43135
36:07:31,911 --> 36:07:36,872
register view so the register view also
43136
36:07:34,639 --> 36:07:38,872
has quite a few things that we have to
43137
36:07:36,872 --> 36:07:40,400
localize so let's go ahead and go to
43138
36:07:40,399 --> 36:07:44,399
and while we're here i mean this is what
43139
36:07:44,399 --> 36:07:47,679
when i started this course i wanted you
43140
36:07:45,911 --> 36:07:48,720
to become a software engineer even if
43141
36:07:48,720 --> 36:07:53,680
a designer a ux or whatever or project
43142
36:07:51,512 --> 36:07:55,760
manager and you have to put yourself and
43143
36:07:53,679 --> 36:07:57,591
your yourself in the shoes of a software
43144
36:07:55,759 --> 36:08:00,159
developer software developer you're
43145
36:07:57,592 --> 36:08:02,400
always in like time constraint usually
43146
36:08:00,160 --> 36:08:03,512
our time concern to deliver but at the
43147
36:08:03,512 --> 36:08:08,479
when you stumble upon something that is
43148
36:08:05,831 --> 36:08:10,551
quickly fixed please do it on
43149
36:08:08,479 --> 36:08:11,911
right there uh at that point because if
43150
36:08:10,551 --> 36:08:12,959
you leave these things they're gonna
43151
36:08:12,960 --> 36:08:17,760
and many small things that could be
43152
36:08:15,512 --> 36:08:19,592
corrected on the fly if you just leave
43153
36:08:17,759 --> 36:08:21,511
them they're gonna become a big pile and
43154
36:08:19,592 --> 36:08:23,360
then you're not gonna be able to have
43155
36:08:21,512 --> 36:08:25,119
enough time to fix them all so while
43156
36:08:23,360 --> 36:08:26,639
we're here we have two unused imports
43157
36:08:25,119 --> 36:08:28,551
let's just remove them because that's
43158
36:08:26,639 --> 36:08:30,479
just good practice not to have unused
43159
36:08:30,479 --> 36:08:33,759
now let's go to our register view here
43160
36:08:32,160 --> 36:08:35,271
we can see there's quite a lot of errors
43161
36:08:33,759 --> 36:08:37,911
there are four errors so the first thing
43162
36:08:35,271 --> 36:08:39,440
i'm gonna do is to put commas at the end
43163
36:08:39,440 --> 36:08:43,191
right there and i'm going to press
43164
36:08:40,551 --> 36:08:44,720
command s on macintosh or control s on
43165
36:08:43,191 --> 36:08:46,000
windows linux and that's going to do the
43166
36:08:46,000 --> 36:08:50,080
the first one is called weak password so
43167
36:08:53,191 --> 36:08:58,399
and this message is register error weak
43168
36:09:00,320 --> 36:09:07,592
the next one is called context log and
43169
36:09:02,800 --> 36:09:10,479
it's called an email already in use okay
43170
36:09:07,592 --> 36:09:11,592
fail to register i've called register
43171
36:09:16,399 --> 36:09:22,319
here it's register error generic and
43172
36:09:19,440 --> 36:09:26,000
this invalid email is called context
43173
36:09:22,320 --> 36:09:27,440
lock and register invalid email okay
43174
36:09:26,000 --> 36:09:29,119
so those are our errors we didn't have
43175
36:09:27,440 --> 36:09:30,960
to change anything with constant because
43176
36:09:29,119 --> 36:09:32,871
these messages weren't constant when
43177
36:09:34,872 --> 36:09:39,512
then we have to fix this register's
43178
36:09:37,360 --> 36:09:42,080
title and it's just called a register so
43179
36:09:39,512 --> 36:09:44,320
i'm going to remove the con const
43180
36:09:42,080 --> 36:09:45,191
i'm going to say context log register
43181
36:09:45,191 --> 36:09:49,759
and then we have enter your email and
43182
36:09:47,759 --> 36:09:52,720
password to see your notes and i've
43183
36:09:49,759 --> 36:09:57,439
called that the register view prompt
43184
36:09:52,720 --> 36:09:58,960
so context lock register view prompt
43185
36:09:57,440 --> 36:10:00,551
we have this input declaration again
43186
36:09:58,960 --> 36:10:03,272
we've done this before with the email
43187
36:10:00,551 --> 36:10:05,440
and password so it's nothing surprising
43188
36:10:05,440 --> 36:10:10,000
block email placeholder and this one is
43189
36:10:08,320 --> 36:10:11,912
a password placeholder so let's remove
43190
36:10:15,831 --> 36:10:21,271
placeholder all right so that's that
43191
36:10:18,960 --> 36:10:22,800
then we have the register button that we
43192
36:10:22,800 --> 36:10:27,512
localize and let's remove the constant
43193
36:10:29,191 --> 36:10:34,479
and already registered is called already
43194
36:10:31,759 --> 36:10:35,911
registered so let's remove the constant
43195
36:10:35,911 --> 36:10:39,591
and we say context lock already
43196
36:10:39,592 --> 36:10:43,040
all right and a comma at the end as well
43197
36:10:41,592 --> 36:10:44,639
and we could do the same thing in here
43198
36:10:43,039 --> 36:10:46,551
with a comma at the end just to do the
43199
36:10:46,551 --> 36:10:51,440
so this seems to be ready we've now
43200
36:10:51,440 --> 36:10:55,680
and the next step is to localize the
43201
36:10:53,512 --> 36:10:58,639
verify email view so i'm going to close
43202
36:10:55,679 --> 36:11:00,000
this file and let's go ahead to verify
43203
36:11:00,000 --> 36:11:04,800
and again we have two unused imports
43204
36:11:01,911 --> 36:11:07,119
let's remove those and let's go ahead to
43205
36:11:04,800 --> 36:11:08,960
verify email in here and we've just
43206
36:11:07,119 --> 36:11:12,720
called it verify email so i'm removing
43207
36:11:08,960 --> 36:11:14,080
removing const saying context of lock
43208
36:11:14,080 --> 36:11:18,960
let's say verify email okay and this is
43209
36:11:17,039 --> 36:11:21,119
one thing that i've also fixed and you
43210
36:11:18,960 --> 36:11:23,120
could see that in how we've developed
43211
36:11:21,119 --> 36:11:25,831
the application so far we have two
43212
36:11:23,119 --> 36:11:27,191
texts on top of the verify email view
43213
36:11:25,831 --> 36:11:28,720
and they kind of look like this if i
43214
36:11:30,160 --> 36:11:33,440
try to log in with a user who hasn't
43215
36:11:36,872 --> 36:11:39,760
and you can see we end up here we've
43216
36:11:38,399 --> 36:11:41,679
sent you an email verification please
43217
36:11:39,759 --> 36:11:43,511
open it to verify your account
43218
36:11:41,679 --> 36:11:45,591
and this is like there are two text
43219
36:11:43,512 --> 36:11:48,639
fields but what i've done is i've made
43220
36:11:45,592 --> 36:11:51,360
it one text prompt so let's just remove
43221
36:11:48,639 --> 36:11:54,639
the second text field and the way i've
43222
36:11:51,360 --> 36:11:58,232
created this it's um if we go to our
43223
36:11:54,639 --> 36:11:59,679
intel en rb and if you look at the
43224
36:11:59,679 --> 36:12:03,191
prompt you can see i've written we've
43225
36:12:01,679 --> 36:12:04,479
sent you an email verification please
43226
36:12:04,479 --> 36:12:08,000
open it to verify your account and then
43227
36:12:06,232 --> 36:12:11,040
the rest of the string it just follows
43228
36:12:08,000 --> 36:12:12,872
along so it's just one paragraph
43229
36:12:11,039 --> 36:12:15,191
and so that's why we're removing the
43230
36:12:15,191 --> 36:12:19,440
so and we're gonna remove this const i'm
43231
36:12:20,800 --> 36:12:25,832
then we're going to say context lock
43232
36:12:28,399 --> 36:12:32,720
we have this a little text button in
43233
36:12:30,551 --> 36:12:35,119
here that says send email verification
43234
36:12:35,119 --> 36:12:40,159
let's change that as well and here we're
43235
36:12:44,720 --> 36:12:48,479
send email verification put a comma here
43236
36:12:48,479 --> 36:12:51,679
and for the restart button we have a
43237
36:12:50,160 --> 36:12:54,480
restart text so we're just going to say
43238
36:12:54,479 --> 36:12:59,360
and a comma at the end all right
43239
36:12:57,191 --> 36:13:01,512
so that's the localization of this
43240
36:12:59,360 --> 36:13:04,080
screen as well so we could say we're
43241
36:13:01,512 --> 36:13:06,720
pretty much done with the verify email
43242
36:13:06,720 --> 36:13:09,831
and while we're here to be honest with
43243
36:13:08,232 --> 36:13:12,232
you we could also clean up a little bit
43244
36:13:09,831 --> 36:13:15,119
here in this verify email while we're
43245
36:13:12,232 --> 36:13:16,800
basically cleaning up the view itself
43246
36:13:15,119 --> 36:13:19,119
you can see that this text doesn't have
43247
36:13:16,800 --> 36:13:21,832
any padding what we could do is to in
43248
36:13:21,831 --> 36:13:26,231
maybe pad this text so we're going to
43249
36:13:23,592 --> 36:13:27,832
say this text is padded wrap it with a
43250
36:13:26,232 --> 36:13:29,832
padding okay and we could just say
43251
36:13:29,831 --> 36:13:33,831
you can see now it is a little bit
43252
36:13:31,512 --> 36:13:36,080
cleaner it's just a very little uh
43253
36:13:33,831 --> 36:13:37,831
effort to make the the ui look a lot
43254
36:13:37,831 --> 36:13:42,639
so we're done with that screen and what
43255
36:13:40,320 --> 36:13:44,872
we need to do um we need to actually
43256
36:13:42,639 --> 36:13:46,720
localize the create update node view so
43257
36:13:44,872 --> 36:13:47,512
let's go ahead to create update note
43258
36:13:47,512 --> 36:13:53,360
another unused import let's remove that
43259
36:13:50,960 --> 36:13:54,320
and let's have a look at what exactly we
43260
36:13:54,320 --> 36:13:58,720
localize in here it's probably the the
43261
36:13:56,160 --> 36:14:00,720
views title so if we scroll down to
43262
36:13:58,720 --> 36:14:02,479
where we're displaying the new note so
43263
36:14:00,720 --> 36:14:04,800
if i log in with the user who has
43264
36:14:07,759 --> 36:14:11,511
horrible password please don't use that
43265
36:14:09,271 --> 36:14:12,399
password at the moment you can see in
43266
36:14:12,399 --> 36:14:17,039
we're basically saying um sorry
43267
36:14:17,039 --> 36:14:21,911
we're saying new note and that's this
43268
36:14:19,592 --> 36:14:23,760
thing so let's just change that and say
43269
36:14:23,759 --> 36:14:28,799
dot lock auto import disk oops how to
43270
36:14:26,639 --> 36:14:30,639
import this and then we're just going to
43271
36:14:31,679 --> 36:14:35,439
and you can see in the documentation it
43272
36:14:33,440 --> 36:14:37,440
says it just in the english one says
43273
36:14:35,440 --> 36:14:39,191
note so here we're not saying new notes
43274
36:14:37,440 --> 36:14:40,551
and the reason behind that is that up
43275
36:14:39,191 --> 36:14:43,191
until this point our application is
43276
36:14:40,551 --> 36:14:45,360
being say new notes but what happens if
43277
36:14:45,360 --> 36:14:48,872
it still says new note so that's the
43278
36:14:47,191 --> 36:14:51,191
reason i've decided to basically change
43279
36:14:48,872 --> 36:14:52,800
this text just to say note
43280
36:14:51,191 --> 36:14:54,479
and put a comma in here to prepare for
43281
36:14:54,479 --> 36:14:58,639
and what we're going to do and is also
43282
36:14:56,320 --> 36:15:01,440
to change this text decoration and which
43283
36:14:58,639 --> 36:15:04,399
is here it says start typing your note
43284
36:15:04,399 --> 36:15:10,159
and then in here we call it start typing
43285
36:15:06,720 --> 36:15:11,512
your note so context log start typing
43286
36:15:12,800 --> 36:15:17,360
so we're going to save that as well
43287
36:15:17,360 --> 36:15:22,080
now we're going to go to localizing our
43288
36:15:20,320 --> 36:15:24,080
notes view and this is i would say this
43289
36:15:22,080 --> 36:15:25,680
is like the most exciting localization
43290
36:15:25,679 --> 36:15:30,319
we need to do some more coding it's not
43291
36:15:30,320 --> 36:15:34,320
for just two just to because remember in
43292
36:15:33,119 --> 36:15:37,360
the beginning of this chapter i
43293
36:15:34,320 --> 36:15:39,272
mentioned that arb files are more than
43294
36:15:37,360 --> 36:15:41,680
just normal json in that they can have
43295
36:15:39,271 --> 36:15:44,160
logic in them and at the moment if we go
43296
36:15:44,160 --> 36:15:48,400
let's see if i bring scr cpy here at the
43297
36:15:46,960 --> 36:15:49,592
moment you can see it just says your
43298
36:15:49,592 --> 36:15:53,592
and i wanted to kind of demonstrate how
43299
36:15:51,592 --> 36:15:55,040
arb files can be quite dynamic and can
43300
36:15:53,592 --> 36:15:57,271
have logic in them and i thought okay
43301
36:15:55,039 --> 36:15:59,360
how do i demonstrate that to you and
43302
36:16:02,479 --> 36:16:06,720
land in this page and you have no notes
43303
36:16:04,639 --> 36:16:08,872
like in this case at the moment it says
43304
36:16:06,720 --> 36:16:12,160
your notes but what we're gonna do is to
43305
36:16:08,872 --> 36:16:14,479
say okay we have some some key in our
43306
36:16:12,160 --> 36:16:17,271
localization file that is called your
43307
36:16:14,479 --> 36:16:18,399
notes okay or sorry it's called notes
43308
36:16:18,399 --> 36:16:22,959
is a key but this key is going to have
43309
36:16:20,551 --> 36:16:25,159
some value that has actual logic in it
43310
36:16:22,960 --> 36:16:28,872
and this logic has to do with the plural
43311
36:16:25,160 --> 36:16:29,832
pluralization of this key if you have no
43312
36:16:29,831 --> 36:16:33,759
in english we're going to say no notes
43313
36:16:33,759 --> 36:16:38,799
if you have one note it's just gonna say
43314
36:16:40,551 --> 36:16:45,759
other number of notes such as two three
43315
36:16:43,191 --> 36:16:46,831
four then it's going to say
43316
36:16:46,831 --> 36:16:51,191
notes for instance x being three notes
43317
36:16:49,831 --> 36:16:52,479
four notes so it's just gonna say four
43318
36:16:52,479 --> 36:16:59,591
so no notes yet one note or x notes
43319
36:16:56,639 --> 36:17:02,000
so it has pluralization built into it
43320
36:16:59,592 --> 36:17:04,480
and how we have to do that is to use
43321
36:17:02,000 --> 36:17:07,360
something in arb called placeholders and
43322
36:17:04,479 --> 36:17:11,440
i'll show you how to do that right now
43323
36:17:07,360 --> 36:17:13,191
so let's go ahead first into our
43324
36:17:13,191 --> 36:17:16,159
and at the bottom of the screen here
43325
36:17:14,960 --> 36:17:17,440
what we're going to do is to first
43326
36:17:16,160 --> 36:17:18,552
create our key so that's the most
43327
36:17:17,440 --> 36:17:20,160
important one okay so we're going to
43328
36:17:20,160 --> 36:17:23,760
and in here we know that we're going to
43329
36:17:21,512 --> 36:17:27,911
have some value and let's see we have
43330
36:17:23,759 --> 36:17:30,959
also a semi sorry a colon there okay
43331
36:17:27,911 --> 36:17:33,039
so we have notes title how do we put our
43332
36:17:34,551 --> 36:17:40,551
we need to have some sort of a
43333
36:17:40,551 --> 36:17:44,319
your localization arb file doesn't know
43334
36:17:42,479 --> 36:17:46,319
anything about the count because it's
43335
36:17:44,320 --> 36:17:48,320
the application that knows how many
43336
36:17:46,320 --> 36:17:50,000
nodes are available in the in the fire
43337
36:17:50,000 --> 36:17:54,232
somehow we need to pass this count to
43338
36:17:54,232 --> 36:17:59,192
sorry to our arb file and you do that
43339
36:17:56,720 --> 36:18:01,271
with parameterization so you go ahead
43340
36:17:59,191 --> 36:18:03,039
and create curly brackets in here and
43341
36:18:01,271 --> 36:18:06,080
you would say okay hey i want to have a
43342
36:18:03,039 --> 36:18:08,551
parameter called count this count needs
43343
36:18:09,679 --> 36:18:13,911
notes title in order for it to be able
43344
36:18:12,000 --> 36:18:15,592
to calculate exactly what it has to
43345
36:18:15,592 --> 36:18:20,800
saying that hey application if you want
43346
36:18:18,320 --> 36:18:22,800
to get the notes title localized string
43347
36:18:20,800 --> 36:18:24,720
you have to pass a parameter to me call
43348
36:18:24,720 --> 36:18:29,360
now what we're going to do is to go and
43349
36:18:26,800 --> 36:18:31,192
call and basically and create discount
43350
36:18:29,360 --> 36:18:33,680
as a parameter so what you have to do is
43351
36:18:31,191 --> 36:18:36,799
to go to the next line and just say adds
43352
36:18:33,679 --> 36:18:38,319
notes title this is how you tell arb
43353
36:18:38,320 --> 36:18:43,512
this notes title key has some extra
43354
36:18:43,512 --> 36:18:46,872
then there is a key in here called
43355
36:18:46,872 --> 36:18:51,760
so you have to write placeholders okay
43356
36:18:49,679 --> 36:18:55,039
and in here basically you say
43357
36:18:51,759 --> 36:18:57,759
placeholders and then every key is the
43358
36:18:55,039 --> 36:19:00,000
name of the parameter itself so account
43359
36:18:57,759 --> 36:19:02,000
all right and then you basically start
43360
36:19:00,000 --> 36:19:03,911
that and then what you have to do is you
43361
36:19:02,000 --> 36:19:04,960
have to define two keys in here one is a
43362
36:19:06,960 --> 36:19:11,680
type and then the other one is an
43363
36:19:11,911 --> 36:19:16,080
like this so let's have a look at how
43364
36:19:16,800 --> 36:19:21,512
basically what we're telling and
43365
36:19:19,119 --> 36:19:24,959
arb is that or dart in this case we're
43366
36:19:21,512 --> 36:19:27,760
saying that hey this notes title key in
43367
36:19:24,960 --> 36:19:31,040
our arab has a parameter called count
43368
36:19:27,759 --> 36:19:32,720
and in in here we're saying hey
43369
36:19:31,039 --> 36:19:34,159
these are the placeholders the name it's
43370
36:19:32,720 --> 36:19:35,592
count and it's type now you have to
43371
36:19:34,160 --> 36:19:36,800
define a type you have to actually tell
43372
36:19:36,800 --> 36:19:40,232
what data type is this using is it a
43373
36:19:38,720 --> 36:19:42,160
string is it's an integer is it a
43374
36:19:40,232 --> 36:19:44,320
boolean what is it so in here you just
43375
36:19:42,160 --> 36:19:46,800
say it's an integer and then as you'll
43376
36:19:44,320 --> 36:19:49,680
see soon the code generation then has a
43377
36:19:46,800 --> 36:19:51,360
look at this and says okay i expect you
43378
36:19:49,679 --> 36:19:53,679
to send an integer and it's going to
43379
36:19:51,360 --> 36:19:56,872
create a function called node's title
43380
36:19:53,679 --> 36:19:58,479
with account a parameter of type integer
43381
36:19:56,872 --> 36:20:01,360
so this is very important it's the data
43382
36:19:58,479 --> 36:20:03,512
type of that count parameter okay
43383
36:20:01,360 --> 36:20:05,360
and an example is just for you to know
43384
36:20:03,512 --> 36:20:07,592
okay how is this going to be used so an
43385
36:20:05,360 --> 36:20:08,720
example is for instance three nodes okay
43386
36:20:07,592 --> 36:20:10,400
so we're just going to say here's an
43387
36:20:08,720 --> 36:20:12,232
example of how the result of this thing
43388
36:20:13,831 --> 36:20:20,080
so what we need to do now is to tell
43389
36:20:16,479 --> 36:20:23,191
this um erb and dart code generator here
43390
36:20:20,080 --> 36:20:25,592
that this count actually has a logic
43391
36:20:23,191 --> 36:20:27,759
about it being plural so it has
43392
36:20:25,592 --> 36:20:29,440
pluralization logic and the way to do
43393
36:20:27,759 --> 36:20:31,759
that is you put a comma here and you say
43394
36:20:29,440 --> 36:20:33,592
plural and a comma after that because
43395
36:20:31,759 --> 36:20:35,439
then you have to specify the logic for
43396
36:20:36,639 --> 36:20:41,271
as a side note i completely understand
43397
36:20:38,872 --> 36:20:43,760
that this is so weird i mean it is a
43398
36:20:41,271 --> 36:20:46,479
strange syntax i don't feel comfortable
43399
36:20:43,759 --> 36:20:47,591
with it i sometimes use i sometimes look
43400
36:20:46,479 --> 36:20:49,119
at the documentation just to be a
43401
36:20:49,119 --> 36:20:52,959
logic but the way i look at it is that
43402
36:20:50,872 --> 36:20:54,720
it's the best thing we have let's not
43403
36:20:52,960 --> 36:20:57,272
hate on it let's just use it let's
43404
36:20:54,720 --> 36:21:00,080
understand that it has power there are
43405
36:20:57,271 --> 36:21:02,399
reasons for it being the way it is and
43406
36:21:04,232 --> 36:21:07,192
in we weren't involved in the reasoning
43407
36:21:06,160 --> 36:21:08,960
of this we don't even know what the
43408
36:21:07,191 --> 36:21:10,319
reasoning is but this is what the format
43409
36:21:08,960 --> 36:21:12,480
is and this is what we have to basically
43410
36:21:12,479 --> 36:21:17,271
so the way to create this is for you to
43411
36:21:17,271 --> 36:21:22,319
have your logic in here so we're going
43412
36:21:22,320 --> 36:21:27,912
and let's just do it like this and then
43413
36:21:25,360 --> 36:21:30,080
we're gonna say equal to one and then
43414
36:21:32,080 --> 36:21:36,232
so this is how you create it so you're
43415
36:21:33,440 --> 36:21:37,592
saying that if the value of this count
43416
36:21:37,592 --> 36:21:42,800
then we are going to do something here
43417
36:21:40,960 --> 36:21:44,480
if the value of that count is one we're
43418
36:21:42,800 --> 36:21:46,800
gonna do something here and if it's
43419
36:21:44,479 --> 36:21:49,039
anything else denoted by other we're
43420
36:21:46,800 --> 36:21:50,960
gonna do something in here so let's say
43421
36:21:49,039 --> 36:21:52,000
when it's equal to zero we're gonna say
43422
36:21:52,000 --> 36:21:57,191
notes yet okay so that's the string
43423
36:21:54,160 --> 36:21:58,872
we're gonna display if the count is zero
43424
36:21:57,191 --> 36:22:01,039
if it's equal to one we're just going to
43425
36:22:01,039 --> 36:22:05,439
and then the important thing is if we
43426
36:22:03,191 --> 36:22:07,360
end up in this situation if it's other
43427
36:22:05,440 --> 36:22:09,191
then we want to say in this case we
43428
36:22:07,360 --> 36:22:11,592
actually want to get the count so if you
43429
36:22:09,191 --> 36:22:14,080
pass the value of three we want to say
43430
36:22:11,592 --> 36:22:16,400
three notes so the way to get that count
43431
36:22:14,080 --> 36:22:18,639
is with another curly bracket pair and
43432
36:22:16,399 --> 36:22:20,000
you say count and then you say notes
43433
36:22:20,000 --> 36:22:25,679
so that's how you create these things so
43434
36:22:22,831 --> 36:22:28,720
um and i think we're actually missing a
43435
36:22:28,720 --> 36:22:33,680
the the curly bracket at the end yes
43436
36:22:31,119 --> 36:22:34,799
this curly bracket which belongs to like
43437
36:22:40,232 --> 36:22:43,832
the other has two curly brackets
43438
36:22:43,831 --> 36:22:49,591
it's two curly brackets and here
43439
36:22:47,191 --> 36:22:52,799
other one curly bracket there one curly
43440
36:22:49,592 --> 36:22:55,440
bracket here one ends here and one ends
43441
36:22:52,800 --> 36:22:57,832
here so this last curly bracket here is
43442
36:22:55,440 --> 36:23:00,400
for the curly bracket that started here
43443
36:22:57,831 --> 36:23:02,551
so again i i don't know what to say this
43444
36:23:00,399 --> 36:23:04,959
is the format the way it is we just have
43445
36:23:02,551 --> 36:23:06,551
to live with it okay so we've created
43446
36:23:04,960 --> 36:23:08,639
the notes title and what we're going to
43447
36:23:06,551 --> 36:23:10,720
do is to go ahead and do the same thing
43448
36:23:08,639 --> 36:23:12,479
but for swedish and i've already
43449
36:23:10,720 --> 36:23:14,479
prepared that so i'm just going to go
43450
36:23:12,479 --> 36:23:16,231
ahead and grab that string from the
43451
36:23:16,232 --> 36:23:20,552
already made so we don't have to type
43452
36:23:20,551 --> 36:23:23,591
so let me go and grab that and bring it
43453
36:23:25,440 --> 36:23:29,911
sv which is for swedish and then bring
43454
36:23:27,592 --> 36:23:32,080
it at the bottom of the screen
43455
36:23:29,911 --> 36:23:34,000
and paste it right there and with a
43456
36:23:32,080 --> 36:23:37,680
comma at the end of that line so you can
43457
36:23:34,000 --> 36:23:40,320
see plural and it says no notes yet
43458
36:23:37,679 --> 36:23:42,079
for one it says one note and for other
43459
36:23:45,271 --> 36:23:48,959
so i'm gonna save this i'm gonna save
43460
36:23:47,271 --> 36:23:50,800
this and i'm gonna do a hot restart
43461
36:23:48,960 --> 36:23:52,800
let's just hope that scr cpy doesn't
43462
36:23:52,800 --> 36:23:57,271
so what we're gonna do now is i was as
43463
36:23:55,271 --> 36:23:58,720
it was planned we're gonna go to our
43464
36:23:58,720 --> 36:24:03,271
and i'm gonna go to my notes as well
43465
36:24:00,160 --> 36:24:05,911
here let's go to notes view
43466
36:24:03,271 --> 36:24:07,440
and have a look at our title in here
43467
36:24:05,911 --> 36:24:09,831
and you see we at the moment we're
43468
36:24:07,440 --> 36:24:11,832
seeing your notes but what we really
43469
36:24:09,831 --> 36:24:14,080
want is to be able to display the number
43470
36:24:17,360 --> 36:24:21,512
inside the nodes provider so if we have
43471
36:24:20,000 --> 36:24:23,119
a look at how we're reading the num and
43472
36:24:21,512 --> 36:24:24,639
the notes you can see we're using the
43473
36:24:23,119 --> 36:24:27,191
note service and then we're saying all
43474
36:24:27,191 --> 36:24:32,231
of an i triple of cloud nodes so we kind
43475
36:24:30,479 --> 36:24:34,872
of wanted stream builder we want a
43476
36:24:32,231 --> 36:24:36,559
stream builder to create our title our
43477
36:24:34,872 --> 36:24:38,080
app bar and we're going to exactly do
43478
36:24:36,559 --> 36:24:40,079
the same thing so we're going to have a
43479
36:24:38,079 --> 36:24:41,111
stream builder that creates our app bar
43480
36:24:42,000 --> 36:24:46,799
or actually it's going to create the
43481
36:24:43,279 --> 36:24:49,032
text but how do we get the count of
43482
36:24:46,799 --> 36:24:50,639
the notes and the way to do that is with
43483
36:24:49,032 --> 36:24:53,512
a little handy extension that i'm going
43484
36:24:50,640 --> 36:24:56,232
to show you how to create so
43485
36:24:53,511 --> 36:24:58,079
let's go in here in our notes view and
43486
36:24:56,231 --> 36:25:00,231
we're going to say extension and we're
43487
36:25:00,231 --> 36:25:04,720
and we want to create it on a stream so
43488
36:25:02,488 --> 36:25:06,952
we're going to say any stream has to be
43489
36:25:04,720 --> 36:25:08,559
able to like any stream that has an
43490
36:25:08,559 --> 36:25:12,951
that its values are iterable
43491
36:25:12,951 --> 36:25:17,111
property called length for instance that
43492
36:25:17,111 --> 36:25:22,079
let's go in here and say okay this
43493
36:25:19,440 --> 36:25:23,671
stream has some value but we want that
43494
36:25:24,872 --> 36:25:30,640
okay so here we're basically saying that
43495
36:25:27,511 --> 36:25:33,671
we're extending any stream that contains
43496
36:25:30,640 --> 36:25:35,440
uh i troubles as its value is gonna have
43497
36:25:35,440 --> 36:25:38,872
then we're gonna say okay the value of
43498
36:25:38,872 --> 36:25:43,279
and we're going to call it get links
43499
36:25:43,279 --> 36:25:46,000
and what this is basically going to do
43500
36:25:46,000 --> 36:25:51,440
say it maps the stream's values so let's
43501
36:25:51,440 --> 36:25:55,671
and in here we just say it returns the
43502
36:25:53,359 --> 36:25:57,111
event's length so i understand this may
43503
36:25:55,671 --> 36:25:59,031
be a little bit cryptic for you to
43504
36:25:59,032 --> 36:26:04,640
you have to know that every stream
43505
36:26:02,312 --> 36:26:06,160
is a generic function like if you sorry
43506
36:26:04,640 --> 36:26:08,800
it's a generic class you can see it's
43507
36:26:06,160 --> 36:26:12,080
abstract class it's it has a parameter
43508
36:26:08,799 --> 36:26:13,839
called t which is it's generic type so
43509
36:26:12,079 --> 36:26:15,751
what we're saying here we're saying that
43510
36:26:13,839 --> 36:26:18,872
okay we're creating an extension on any
43511
36:26:15,752 --> 36:26:21,440
stream whose parameters or whose types
43512
36:26:18,872 --> 36:26:22,391
are and i treble and iterable has a
43513
36:26:22,391 --> 36:26:26,487
and that means that we can then extend
43514
36:26:24,488 --> 36:26:28,160
and extend any stream that has an i
43515
36:26:26,488 --> 36:26:30,800
treble and then we return its property
43516
36:26:30,799 --> 36:26:37,199
so what we need to do now is to go ahead
43517
36:26:33,111 --> 36:26:39,440
and inside the app bar in here
43518
36:26:37,200 --> 36:26:41,920
we have a const text when we need to
43519
36:26:39,440 --> 36:26:44,231
remove this const first actually let's
43520
36:26:44,231 --> 36:26:48,559
see if we can wrap this with a stream
43521
36:26:46,231 --> 36:26:50,799
builder now okay so in here what we're
43522
36:26:48,559 --> 36:26:53,032
gonna do is we're saying here's a stream
43523
36:26:50,799 --> 36:26:55,199
builder and we don't yet know what it is
43524
36:26:57,839 --> 36:27:03,919
like this and we have all notes
43525
36:27:01,279 --> 36:27:08,160
and the owner user id is our user id
43526
36:27:03,920 --> 36:27:10,312
okay as exactly as we have it here
43527
36:27:08,160 --> 36:27:11,671
okay but here the stream we don't
43528
36:27:10,312 --> 36:27:13,440
actually want the notes we want the
43529
36:27:11,671 --> 36:27:14,951
length of notes so let's just say get
43530
36:27:14,951 --> 36:27:21,031
where is it here get length okay
43531
36:27:18,488 --> 36:27:24,232
and now we know that snapshot can then
43532
36:27:21,032 --> 36:27:26,872
return that uh value for us so
43533
36:27:24,231 --> 36:27:29,671
if i press command s in here let's put a
43534
36:27:29,671 --> 36:27:32,231
you can see nothing has changed it just
43535
36:27:31,032 --> 36:27:34,000
says your notes because we're still
43536
36:27:32,231 --> 36:27:36,720
seeing your notes in here okay but what
43537
36:27:34,000 --> 36:27:39,032
we want is to grab the data out of our
43538
36:27:36,720 --> 36:27:40,312
snapshot and this snapshot is an async
43539
36:27:42,640 --> 36:27:47,920
let's see undefined class it's called
43540
36:27:44,951 --> 36:27:49,511
async snapshots yeah just like that all
43541
36:27:49,511 --> 36:27:52,720
so you either could tell a stream
43542
36:27:52,720 --> 36:27:56,872
and then your snapshot i believe
43543
36:27:56,872 --> 36:28:00,800
as facing snatch out of it or you could
43544
36:27:59,111 --> 36:28:02,799
just say stream builder normal stream
43545
36:28:00,799 --> 36:28:04,159
builder and an async snapshot of it so
43546
36:28:02,799 --> 36:28:06,311
you could type it in two different ways
43547
36:28:04,160 --> 36:28:07,592
and i've just chosen to do it this way
43548
36:28:07,592 --> 36:28:12,391
what we need to do in here is to see as
43549
36:28:09,920 --> 36:28:14,640
soon as snapshot has data then we grab
43550
36:28:12,391 --> 36:28:17,279
that data which means it has the length
43551
36:28:17,279 --> 36:28:22,559
so we're going to say if snapshot has
43552
36:28:19,752 --> 36:28:24,160
data which means it has length
43553
36:28:22,559 --> 36:28:26,951
otherwise we're just going to return
43554
36:28:24,160 --> 36:28:29,111
const of text nothing meaning that well
43555
36:28:26,951 --> 36:28:30,487
well we don't have anything to display
43556
36:28:29,111 --> 36:28:32,639
at the top of the screen if this
43557
36:28:30,488 --> 36:28:34,392
snapshot has no text all right
43558
36:28:32,640 --> 36:28:36,488
and then in here we're going to say it's
43559
36:28:34,391 --> 36:28:39,032
going to say final note count
43560
36:28:40,312 --> 36:28:44,640
or zero because it just says yeah i may
43561
36:28:44,640 --> 36:28:47,440
just strange because you're actually
43562
36:28:45,839 --> 36:28:48,799
saying has data but these two properties
43563
36:28:48,799 --> 36:28:51,359
they're different from you i mean
43564
36:28:50,000 --> 36:28:53,032
they're not different but they're
43565
36:28:51,359 --> 36:28:54,487
separated from each other just because
43566
36:28:53,032 --> 36:28:56,312
you're checking something has data
43567
36:28:54,488 --> 36:28:58,232
doesn't mean necessarily that the next
43568
36:28:56,312 --> 36:29:00,000
line should understand that it has data
43569
36:29:00,000 --> 36:29:04,799
of this data property is still final t
43570
36:29:03,111 --> 36:29:07,511
so you can't change that okay and that's
43571
36:29:04,799 --> 36:29:08,391
why we have this um elvis sign kind of
43572
36:29:08,391 --> 36:29:12,000
or a question mark question mark just to
43573
36:29:10,312 --> 36:29:13,671
say if this doesn't have any value just
43574
36:29:13,671 --> 36:29:17,839
now that we have node count we have to
43575
36:29:18,872 --> 36:29:23,111
and we oh we don't have log let's import
43576
36:29:23,111 --> 36:29:28,799
and remember the key that we used intel
43577
36:29:26,160 --> 36:29:30,872
me and it's called notes title let's say
43578
36:29:28,799 --> 36:29:33,440
notes title and now all of a sudden you
43579
36:29:30,872 --> 36:29:36,000
can see it is a function that takes in
43580
36:29:33,440 --> 36:29:38,160
an integer hello that's the count
43581
36:29:36,000 --> 36:29:40,312
integer that we built into our arb and
43582
36:29:38,160 --> 36:29:42,080
it returns a string you can see here
43583
36:29:40,312 --> 36:29:43,752
that's perfect because then we can pass
43584
36:29:52,559 --> 36:29:56,391
a text widget with that text in it just
43585
36:29:57,511 --> 36:30:00,951
and then we can save this and as you can
43586
36:29:59,279 --> 36:30:03,359
see now as soon as i hit command s it
43587
36:30:03,359 --> 36:30:07,839
if i say and if i press the plus button
43588
36:30:05,279 --> 36:30:10,391
here you can see i can type something in
43589
36:30:07,839 --> 36:30:12,079
here and i go back it says onenote
43590
36:30:12,079 --> 36:30:16,000
on top of the screen it says two notes
43591
36:30:14,312 --> 36:30:17,512
and that's it pretty much that's the
43592
36:30:16,000 --> 36:30:19,592
logic that we built into it so now it
43593
36:30:17,511 --> 36:30:22,000
says onenote delete that note and it
43594
36:30:19,592 --> 36:30:24,312
says no notes yet perfect so that logic
43595
36:30:22,000 --> 36:30:26,391
seems to be working fine for us
43596
36:30:24,312 --> 36:30:27,920
so that's that part and we also have
43597
36:30:26,391 --> 36:30:30,639
another string at the bottom of this
43598
36:30:30,640 --> 36:30:36,720
and we have to change this as well so
43599
36:30:39,359 --> 36:30:44,639
and this error is because we it says
43600
36:30:42,391 --> 36:30:46,951
invalid constant but you're like oh but
43601
36:30:44,640 --> 36:30:48,800
this is not a constant well the problem
43602
36:30:46,951 --> 36:30:50,487
is a little bit higher up in that when
43603
36:30:48,799 --> 36:30:52,079
we created this array of pop-up menu
43604
36:30:50,488 --> 36:30:54,952
items we said that is a constant so
43605
36:30:54,951 --> 36:30:59,592
so that's fantastic and that is i mean
43606
36:30:57,752 --> 36:31:01,360
now we're pretty much done
43607
36:30:59,592 --> 36:31:03,512
in the entire application we don't have
43608
36:31:01,359 --> 36:31:05,439
anything any string that is hard coded
43609
36:31:03,511 --> 36:31:07,279
and if you look at our problems
43610
36:31:05,440 --> 36:31:09,511
section there are no problems to fix for
43611
36:31:07,279 --> 36:31:11,592
instance no unused imports so we've
43612
36:31:09,511 --> 36:31:13,279
taken care of those as well and just to
43613
36:31:11,592 --> 36:31:14,800
test this what we could do is just to go
43614
36:31:13,279 --> 36:31:16,639
to the settings screen here and i'm
43615
36:31:16,640 --> 36:31:20,312
and let's go back to our application
43616
36:31:18,231 --> 36:31:22,000
here and have a look and it says no
43617
36:31:20,312 --> 36:31:24,000
notes yet i'm going to press the plus
43618
36:31:22,000 --> 36:31:24,872
button and i'm going to write some
43619
36:31:24,872 --> 36:31:30,559
go back here it says one note
43620
36:31:27,200 --> 36:31:33,032
create a new one and it says two notes
43621
36:31:30,559 --> 36:31:35,839
delete this one and all the you see all
43622
36:31:33,032 --> 36:31:37,279
the dialogues are now in swedish yes
43623
36:31:37,279 --> 36:31:41,359
yes let's try to log out now and it says
43624
36:31:41,359 --> 36:31:44,311
and it says look go to add a second by
43625
36:31:43,032 --> 36:31:46,312
the way look at it are you sure you want
43626
36:31:44,312 --> 36:31:49,200
to log out yes log out and you can see
43627
36:31:46,312 --> 36:31:50,312
all our strings here basically are also
43628
36:31:50,312 --> 36:31:55,200
everything in this screen is also
43629
36:31:52,000 --> 36:31:57,359
localized so that's fantastic
43630
36:31:57,359 --> 36:32:02,391
were supposed to do and what we promised
43631
36:31:58,799 --> 36:32:04,311
to do and that is great congratulations
43632
36:32:02,391 --> 36:32:06,079
if you then and do what we usually do at
43633
36:32:04,312 --> 36:32:08,080
the end of every chapter we
43634
36:32:06,079 --> 36:32:10,159
commit our work so i'm gonna have a look
43635
36:32:08,079 --> 36:32:11,511
at this and let's have a look at our
43636
36:32:11,511 --> 36:32:15,511
and have a look at our git log as well
43637
36:32:13,440 --> 36:32:17,032
i'm gonna change the screen layout a
43638
36:32:15,511 --> 36:32:18,871
little bit sorry about that so you see
43639
36:32:18,872 --> 36:32:24,488
remove scr cpy make this full screen
43640
36:32:24,488 --> 36:32:30,559
make this a lot larger so you see better
43641
36:32:28,079 --> 36:32:32,799
and have a look at git log again and you
43642
36:32:30,559 --> 36:32:37,919
can see the last one we did git step
43643
36:32:32,799 --> 36:32:37,919
sorry step 31 so let's just say git add
43644
36:32:45,279 --> 36:32:49,752
great and then we're also going to get
43645
36:32:49,752 --> 36:32:55,200
and let's tag it as well get tagged
43646
36:32:58,231 --> 36:33:03,919
all our tags we can see 20 blah blah
43647
36:33:01,111 --> 36:33:06,079
let's see if we have 31 30 31 and 32
43648
36:33:03,920 --> 36:33:08,640
great and then we have to push our tags
43649
36:33:11,592 --> 36:33:15,752
what we've done so far is i mean we've
43650
36:33:13,671 --> 36:33:17,440
done a lot of work and in this chapter
43651
36:33:15,752 --> 36:33:18,392
even more we've localized our
43652
36:33:17,440 --> 36:33:20,160
application we looked at how
43653
36:33:18,391 --> 36:33:22,079
localization works how code generation
43654
36:33:20,160 --> 36:33:23,200
for localization works and also we had a
43655
36:33:23,200 --> 36:33:26,559
important extensions that you can create
43656
36:33:24,799 --> 36:33:30,079
in order to make your localizations even
43657
36:33:26,559 --> 36:33:32,231
work better for flutter and we also had
43658
36:33:30,079 --> 36:33:34,720
a look at adding some logic to our arb
43659
36:33:34,720 --> 36:33:37,511
congratulations for going through this
43660
36:33:36,312 --> 36:33:38,559
chapter i believe personally that is
43661
36:33:37,511 --> 36:33:40,720
very important to localize your
43662
36:33:38,559 --> 36:33:42,160
applications you're going to reach a lot
43663
36:33:40,720 --> 36:33:44,559
more users if you localize your
43664
36:33:42,160 --> 36:33:47,200
applications correctly for your
43665
36:33:44,559 --> 36:33:49,511
for like your target markets
43666
36:33:47,200 --> 36:33:51,279
and um it should help your users also
43667
36:33:49,511 --> 36:33:52,311
feel more connected to your application
43668
36:33:52,312 --> 36:33:58,160
um with that said i may actually then
43669
36:33:58,160 --> 36:34:02,391
hello everyone i can't say welcome to
43670
36:34:00,640 --> 36:34:04,560
this chapter now because this is not
43671
36:34:02,391 --> 36:34:07,032
really a chapter on its own rather it is
43672
36:34:04,559 --> 36:34:08,951
the outro to this course and i don't
43673
36:34:07,032 --> 36:34:11,752
know it's a kind of a bittersweet moment
43674
36:34:08,951 --> 36:34:13,671
because uh i've had so much fun putting
43675
36:34:11,752 --> 36:34:15,592
this course together for you and now i
43676
36:34:16,559 --> 36:34:22,231
i don't want to get emotional but it is
43677
36:34:18,312 --> 36:34:23,200
kind of sad uh as it is a great moment
43678
36:34:23,200 --> 36:34:27,360
appreciation for you having gone through
43679
36:34:25,111 --> 36:34:29,511
this course and also i want to really
43680
36:34:30,312 --> 36:34:35,032
congratulate you for having gone through
43681
36:34:32,559 --> 36:34:37,592
this course and having learned as
43682
36:34:35,032 --> 36:34:40,391
as you've learned because it's it's not
43683
36:34:37,592 --> 36:34:42,391
an easy thing to do to go through such a
43684
36:34:40,391 --> 36:34:44,799
lengthy course but as i mentioned in the
43685
36:34:44,799 --> 36:34:49,111
course if you remember in the
43686
36:34:46,079 --> 36:34:51,439
introduction i mentioned that um
43687
36:34:49,111 --> 36:34:53,359
a lot of videos basically jump over
43688
36:34:51,440 --> 36:34:54,872
quite a lot of information and i didn't
43689
36:34:53,359 --> 36:34:57,591
want to do that in this course and
43690
36:34:54,872 --> 36:34:58,720
that's why this course has become
43691
36:35:03,111 --> 36:35:07,199
we've gone through a lot we've talked
43692
36:35:07,200 --> 36:35:11,592
flutter development but we've also
43693
36:35:09,440 --> 36:35:13,671
got our hands dirty with some
43694
36:35:11,592 --> 36:35:15,440
native ios and not really development
43695
36:35:13,671 --> 36:35:17,111
but all actually going to xcode and
43696
36:35:15,440 --> 36:35:19,839
fiddling around with some properties in
43697
36:35:17,111 --> 36:35:22,160
info plus an excel project we've also
43698
36:35:19,839 --> 36:35:26,231
had to open android studio to create our
43699
36:35:22,160 --> 36:35:28,872
virtual devices we've worked with
43700
36:35:26,231 --> 36:35:31,511
figma and design tool we work with app
43701
36:35:28,872 --> 36:35:33,592
store connect and google play store
43702
36:35:33,592 --> 36:35:38,391
we've gone through a lot so and i want
43703
36:35:36,312 --> 36:35:41,360
to congratulate you for sticking
43704
36:35:38,391 --> 36:35:45,751
throughout all this with me and
43705
36:35:41,359 --> 36:35:47,591
um hopefully you've also learned a lot
43706
36:35:45,752 --> 36:35:49,592
now while designing this course i also
43707
36:35:47,592 --> 36:35:51,440
knew that it has to be a living material
43708
36:35:49,592 --> 36:35:53,920
it can't just be something that i drop
43709
36:35:51,440 --> 36:35:55,671
out on the internet so i'm very much
43710
36:35:53,920 --> 36:35:58,232
planning to keep everything up to date
43711
36:35:55,671 --> 36:36:00,000
but there's lots and lots that i've
43712
36:36:00,000 --> 36:36:04,559
more to be added to this course so
43713
36:36:02,799 --> 36:36:06,311
i can't really go into details about
43714
36:36:04,559 --> 36:36:08,160
what they are i haven't finalized them
43715
36:36:06,312 --> 36:36:10,559
but just as i did with this course i
43716
36:36:08,160 --> 36:36:12,080
need to plan them correctly write all my
43717
36:36:10,559 --> 36:36:14,639
scripts to know what i'm going to talk
43718
36:36:12,079 --> 36:36:17,359
about and plan even the code that i need
43719
36:36:14,640 --> 36:36:19,672
to write to tell you all about so
43720
36:36:17,359 --> 36:36:21,199
just know that there's a lot more to
43721
36:36:22,559 --> 36:36:27,200
you can just subscribe to my youtube
43722
36:36:24,160 --> 36:36:29,592
channel if you want to keep up to date
43723
36:36:29,592 --> 36:36:33,440
things are moving all the time we've
43724
36:36:31,839 --> 36:36:35,279
been working with firebase for instance
43725
36:36:33,440 --> 36:36:38,872
and firebase in itself is a moving
43726
36:36:35,279 --> 36:36:41,200
product so it's an update like ever
43727
36:36:38,872 --> 36:36:42,720
it's just always updating so new
43728
36:36:41,200 --> 36:36:44,488
versions come out new versions of
43729
36:36:42,720 --> 36:36:46,799
flutter might come up come out and new
43730
36:36:44,488 --> 36:36:48,312
versions of dart might come out so even
43731
36:36:46,799 --> 36:36:49,919
figma for instance that we've been using
43732
36:36:48,312 --> 36:36:51,839
a lot the interface might change
43733
36:36:51,839 --> 36:36:56,312
since i put so much effort into creating
43734
36:36:53,920 --> 36:36:58,232
this course i don't want it to die and
43735
36:36:56,312 --> 36:37:00,232
i'm not going to let it die so it's
43736
36:36:58,231 --> 36:37:02,000
always going to be updating every now
43737
36:37:00,231 --> 36:37:04,160
and then i will be putting
43738
36:37:02,000 --> 36:37:06,488
and not only updated content out like
43739
36:37:04,160 --> 36:37:08,872
maybe i need to replace some old content
43740
36:37:06,488 --> 36:37:11,200
with some new but i'm also planning on
43741
36:37:11,200 --> 36:37:16,720
let's just say that this course is gonna
43742
36:37:13,671 --> 36:37:18,799
hopefully always be up to date
43743
36:37:16,720 --> 36:37:21,032
as i mentioned in the introduction of
43744
36:37:18,799 --> 36:37:23,440
this course i have zero dollars
43745
36:37:23,440 --> 36:37:28,000
marketing this course and marketing is
43746
36:37:25,752 --> 36:37:30,488
probably the wrong word because i don't
43747
36:37:28,000 --> 36:37:32,312
actually earn any money by having this
43748
36:37:30,488 --> 36:37:33,200
course the only thing i earn is joy of
43749
36:37:33,200 --> 36:37:37,592
um like people like you going through
43750
36:37:35,671 --> 36:37:39,751
this course and telling me on social
43751
36:37:37,592 --> 36:37:41,032
media perhaps about oh hey i did this
43752
36:37:39,752 --> 36:37:42,160
course and i learned this and this and
43753
36:37:41,032 --> 36:37:43,440
this and i've released my first
43754
36:37:43,440 --> 36:37:47,592
since i have um no budget for that i
43755
36:37:46,079 --> 36:37:49,591
would really appreciate it if you could
43756
36:37:47,592 --> 36:37:51,440
spread the word about it and tell like
43757
36:37:49,592 --> 36:37:53,032
if someone asked okay i need a course
43758
36:37:53,032 --> 36:37:56,488
uh it would be lovely and i would really
43759
36:37:55,111 --> 36:37:59,032
appreciate it if you could just tell
43760
36:37:59,032 --> 36:38:02,952
and um i've mentioned this also in the
43761
36:38:01,111 --> 36:38:05,111
introduction but i would really
43762
36:38:02,951 --> 36:38:08,951
appreciate it if you could follow me on
43763
36:38:05,111 --> 36:38:10,799
social media twitter at van.np and also
43764
36:38:08,951 --> 36:38:12,231
on linkedin because i produce quite a
43765
36:38:12,231 --> 36:38:16,487
and as infographics for instance also
43766
36:38:14,312 --> 36:38:19,440
adds videos related to flutter
43767
36:38:16,488 --> 36:38:22,952
javascript python django react native
43768
36:38:19,440 --> 36:38:24,160
swift you name it so even typescript now
43769
36:38:24,160 --> 36:38:28,640
uh i would really appreciate it if you
43770
36:38:25,839 --> 36:38:31,359
could follow me on social media
43771
36:38:28,640 --> 36:38:34,720
and uh i've been told in some places
43772
36:38:31,359 --> 36:38:36,719
that um by some some of you that
43773
36:38:34,720 --> 36:38:38,488
maybe some people can actually support
43774
36:38:36,720 --> 36:38:40,640
me and if you want to do that this is
43775
36:38:38,488 --> 36:38:41,720
the way to do it just going to
43776
36:38:41,720 --> 36:38:49,920
coffee.com but remember it is completely
43777
36:38:45,511 --> 36:38:51,751
optional it's only if you can afford it
43778
36:38:49,920 --> 36:38:54,488
so with all that said i don't want to
43779
36:38:51,752 --> 36:38:57,200
drag on this outro i just want to say
43780
36:38:54,488 --> 36:38:59,592
again a huge congratulations to you for
43781
36:38:57,200 --> 36:39:02,872
going through this course with me and
43782
36:38:59,592 --> 36:39:05,440
spending your life during these so many
43783
36:39:02,872 --> 36:39:08,640
hours together with me and i've had a
43784
36:39:05,440 --> 36:39:11,279
blast recording all these videos and uh
43785
36:39:08,640 --> 36:39:14,312
i'm sure this is not a good buy but
43786
36:39:11,279 --> 36:39:16,639
rather an official end basically to this
43787
36:39:14,312 --> 36:39:19,279
course and keep an eye out for more
43788
36:39:16,640 --> 36:39:23,232
content and i'm sure we'll talk to each
3273574
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.