Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,830 --> 00:00:05,810
In the last section, we started splitting our app into two separate classes in order to refactor it
2
00:00:05,810 --> 00:00:07,260
to be a stateful widget.
3
00:00:07,640 --> 00:00:12,320
I know this stuff is a little bit crazy right now, but just bear with me for a little bit longer after
4
00:00:12,320 --> 00:00:14,080
we covered just a little bit more content.
5
00:00:14,090 --> 00:00:19,220
I'll give you a really good overview on all this stateful stuff and I'll show you the exact steps you
6
00:00:19,220 --> 00:00:21,990
can use to create stateful widgets on your own projects.
7
00:00:22,520 --> 00:00:28,370
For now, I want to cover one last little confusing thing, specifically the syntax we used right here.
8
00:00:28,890 --> 00:00:34,040
So we wrote out this little bit of code at the very end of the section we wrote State the less than
9
00:00:34,040 --> 00:00:37,790
sign, greater than Sine, and then we put our app class in between.
10
00:00:38,690 --> 00:00:42,800
So we're going to flip on over to darte pad very quickly and we're going to write out a little bit of
11
00:00:42,800 --> 00:00:46,280
code to give you a better idea of what's going on with the syntax.
12
00:00:47,570 --> 00:00:52,430
All right, so back inside my browser, I've got a dart pad open right here, so we're going to write
13
00:00:52,430 --> 00:00:55,850
out some code to simulate a very classic game.
14
00:00:56,960 --> 00:01:00,510
A game of putting a square peg into a round hole.
15
00:01:01,010 --> 00:01:04,540
Now, as you might guess, we cannot put a square peg into a round hole.
16
00:01:04,550 --> 00:01:05,940
It just does not fit.
17
00:01:06,650 --> 00:01:08,900
I want to try to create three classes.
18
00:01:09,110 --> 00:01:12,400
I want to make one class to represent the slot right here.
19
00:01:12,860 --> 00:01:16,760
I want to create another class to represent this square peg.
20
00:01:17,000 --> 00:01:20,870
And I want to make a third class to represent a circular peg as well.
21
00:01:21,200 --> 00:01:21,530
All right.
22
00:01:21,530 --> 00:01:22,910
So let's write these out and start, Pat.
23
00:01:23,210 --> 00:01:26,000
And I know this might seem confusing right now, but don't worry.
24
00:01:26,000 --> 00:01:28,160
You'll see where I'm going with this in just a moment.
25
00:01:28,990 --> 00:01:31,220
So back over here, I'll put my main function.
26
00:01:32,540 --> 00:01:39,530
Underneath that, I'll do a class of circle, I'll do a class of square, and I'll do a class of slot.
27
00:01:40,340 --> 00:01:45,680
Now, the slot class might have a method tied to it called something like insert.
28
00:01:46,490 --> 00:01:53,030
Whenever we create an instance of slots, we would probably need to somehow say whether this is a slot
29
00:01:53,030 --> 00:01:59,720
meant for a circle or for a square, because when it comes time to call insert right here, we definitely
30
00:01:59,720 --> 00:02:03,610
would want to annotate the argument type that comes into this method.
31
00:02:04,040 --> 00:02:11,780
So I would really want to be able to write out something like Circle my circle or like Circle Circle
32
00:02:11,810 --> 00:02:13,130
Peg or something like that.
33
00:02:13,860 --> 00:02:21,050
So when I create my slot class instance, I really need to know if this is a slot made for a circle
34
00:02:21,380 --> 00:02:26,900
or if it's a slot made for a square, you might be thinking, well, Stephen, let's make like, you
35
00:02:26,900 --> 00:02:29,930
know, a square slot and a circle slot.
36
00:02:30,380 --> 00:02:31,010
But you know what?
37
00:02:31,010 --> 00:02:37,880
Everything about this slot class between these two shapes would be probably completely identical except
38
00:02:37,880 --> 00:02:41,560
for the circle that or the shape that it accepts.
39
00:02:42,290 --> 00:02:48,950
So in order to solve this problem, darte includes the idea of something called generics, a generic
40
00:02:48,950 --> 00:02:55,220
allows us to write much more, suffice it lack of a better term, a much more generic code that's reuseable
41
00:02:55,220 --> 00:02:58,090
between different types that we might create inside of our application.
42
00:02:58,820 --> 00:03:05,210
So in order to solve this issue of insert meaning to accept either a circle or a square.
43
00:03:06,370 --> 00:03:13,180
I'm going to turn this class into a generic class to do so, I'm going to put that less than sign,
44
00:03:13,190 --> 00:03:14,380
greater than sign like.
45
00:03:14,380 --> 00:03:18,190
So I'm going to put a capital T inside there.
46
00:03:19,600 --> 00:03:22,780
And then down here inside of insert, I'm going to put a T.
47
00:03:23,720 --> 00:03:26,330
Shape, and I'll just leave it like that.
48
00:03:27,140 --> 00:03:32,270
OK, so let's now go up to our main function up here and you'll see where this less than greater sign
49
00:03:32,270 --> 00:03:33,030
comes into play.
50
00:03:33,620 --> 00:03:35,300
So I'm going to first create a slot.
51
00:03:35,870 --> 00:03:39,950
So an instance of slot right here that is meant to accept only circles.
52
00:03:40,310 --> 00:03:42,200
So to do so, I might write out.
53
00:03:43,340 --> 00:03:51,830
Circle slot is new slot, and then here's where it gets interesting, I'm going to put my less than
54
00:03:51,830 --> 00:03:57,860
greater than sign and I'm going to say that I am making a slot class instance that expects to receive
55
00:03:58,340 --> 00:04:01,070
the circle type like so.
56
00:04:02,710 --> 00:04:09,160
So you can almost think of this as being like a type or a function invocation for types, that's almost
57
00:04:09,160 --> 00:04:09,720
what it is.
58
00:04:10,030 --> 00:04:16,450
This is saying create a new instance of -- and anywhere that the class definition down here has a
59
00:04:16,450 --> 00:04:19,720
T substitute the circle type for T.
60
00:04:20,230 --> 00:04:26,020
So now we can imagine that our insert method down here is expecting to receive a shape of type circle,
61
00:04:26,740 --> 00:04:31,240
specifically because we created our slot instance with the circle type right here.
62
00:04:31,960 --> 00:04:39,520
So now I can call circle slot, dot insert and I can try to put a circle in there and there's going
63
00:04:39,520 --> 00:04:41,380
to be no issue with that whatsoever.
64
00:04:42,040 --> 00:04:48,400
But if I instead try to put a square in there, well, now all the sudden everything's going to be complaining.
65
00:04:48,550 --> 00:04:52,630
It says the argument type square because that's what I'm trying to pass in there, cannot be assigned
66
00:04:52,630 --> 00:04:54,220
to parameter type circle.
67
00:04:54,850 --> 00:05:00,880
So when you see these less than greater than signs with a type in between, that's our ability to write.
68
00:05:00,880 --> 00:05:07,720
A generic class in a generic class is all about writing some logic that we want to be reuseable between
69
00:05:07,720 --> 00:05:08,650
different types.
70
00:05:09,100 --> 00:05:14,470
But for all the methods inside of our given class, we want them all to respect that one type.
71
00:05:15,700 --> 00:05:17,270
So that's what's going on over here.
72
00:05:17,740 --> 00:05:24,190
We're saying that we want to create an app state class, it's going to borrow a ton of functionality
73
00:05:24,220 --> 00:05:28,230
from the base class of states inside of that base class.
74
00:05:28,240 --> 00:05:33,340
There's a bunch of methods that are only supposed to work with one specific type.
75
00:05:33,910 --> 00:05:39,340
And so by putting inside of here the app class that we just put together, we're saying we want to create
76
00:05:39,340 --> 00:05:45,280
any copy of that state class that is customized to work specifically with the app type.
77
00:05:46,420 --> 00:05:50,440
OK, so that's what's going on now we're not going to talk too much about, like what the state class
78
00:05:50,440 --> 00:05:55,060
is actually doing internally, everything we just spoke about, about kind of like accepting these different
79
00:05:55,060 --> 00:05:55,530
types.
80
00:05:55,570 --> 00:06:00,340
That's really all we need to know right now about the fact that we're using a generic right here.
81
00:06:00,340 --> 00:06:03,760
So I wanted to do was kind of expound on the syntax.
82
00:06:03,760 --> 00:06:08,500
I don't really want to talk anything about just yet about what the state class is really doing for us.
83
00:06:09,100 --> 00:06:09,460
All right.
84
00:06:09,460 --> 00:06:13,270
So now that we've got a better idea of what's going on right here, we're going to continue in the next
85
00:06:13,270 --> 00:06:13,750
section.
86
00:06:14,090 --> 00:06:19,210
We're going to add in a little bit of state to our project and we're going to get that number to increment
87
00:06:19,210 --> 00:06:20,620
every time we press that button.
88
00:06:20,950 --> 00:06:24,730
And then right after that, we'll do a big review on the stateful widget stuff.
89
00:06:24,820 --> 00:06:29,530
And I'll give you a very clear series of steps that you can go through to create stateful widgets on
90
00:06:29,530 --> 00:06:30,520
your own project.
91
00:06:30,790 --> 00:06:32,910
So quick break and I'll see you in just a minute.
9375
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.