Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,330 --> 00:00:06,760
Our first little dummy application which is still missing a lot of features,
2
00:00:06,770 --> 00:00:13,940
no worries but our first little dummy application is slowly taking shape. At the moment,
3
00:00:13,940 --> 00:00:15,380
we have a problem though,
4
00:00:15,530 --> 00:00:21,980
once we're done going through our questions, we get an error and that's not really the kind of user experience
5
00:00:21,980 --> 00:00:24,650
you typically would want to deliver.
6
00:00:24,650 --> 00:00:30,430
Instead it would be nicer if we show our column here with questions and answers
7
00:00:30,470 --> 00:00:32,620
as long as we do have questions
8
00:00:32,840 --> 00:00:39,650
but as soon as we exhausted our list of questions, it would be nicer to show some other output, some message
9
00:00:39,650 --> 00:00:45,280
like you did it or a final score or anything like that.
10
00:00:45,710 --> 00:00:50,500
To achieve this, there are two things which I want to do.
11
00:00:50,570 --> 00:00:53,380
So what I want to do is I want to output different widgets
12
00:00:53,450 --> 00:00:55,580
once we exhausted our questions.
13
00:00:55,700 --> 00:01:03,200
So instead of having a column of questions and answers, I want to show let's say a centered text which
14
00:01:03,200 --> 00:01:07,570
says you did it for a start, we can change this later but for a nice start,
15
00:01:07,580 --> 00:01:09,320
why don't we use that.
16
00:01:09,440 --> 00:01:10,840
Hence we kind of need an
17
00:01:10,870 --> 00:01:14,770
if check here for the value we pass to body, right?
18
00:01:14,810 --> 00:01:20,870
Because we either pass this column here with our question and our answers as long as we do have questions
19
00:01:21,170 --> 00:01:22,870
or we show something else,
20
00:01:22,910 --> 00:01:28,550
it's a so-called ternary expression and this is also a feature which exists in other programming languages,
21
00:01:28,550 --> 00:01:30,700
it's basically a single line
22
00:01:30,770 --> 00:01:34,660
if check. Now speaking of that, we haven't really learned about
23
00:01:34,670 --> 00:01:36,640
if checks at all, right?
24
00:01:36,760 --> 00:01:45,170
So let's first of all start with what if means. The if keyword can be used in our code if we want to
25
00:01:45,470 --> 00:01:51,620
run some code conditionally, let's say here in answerQuestion, then we can add the if keyword here and
26
00:01:51,620 --> 00:01:57,620
then a condition between parentheses and then curly braces to surround the code that only should run
27
00:01:57,650 --> 00:01:59,560
if this condition is met
28
00:01:59,600 --> 00:02:07,910
and here our condition could be that we compare the question index to our list of questions or to
29
00:02:07,910 --> 00:02:19,630
the length of this list. So we could check if question index which starts at 0, is smaller than questions
30
00:02:19,900 --> 00:02:20,500
length.
31
00:02:20,650 --> 00:02:26,830
However now we have the problem that questions is a constant which is defined here in the build method
32
00:02:27,190 --> 00:02:34,150
and therefore, I already mentioned that Dart has a feature called scoping, it is scoped to this method,
33
00:02:34,480 --> 00:02:40,450
it's treated as a variable or a constant that's only available in the build method but not in the entire
34
00:02:40,450 --> 00:02:41,670
class.
35
00:02:41,680 --> 00:02:44,160
Well the solution is relatively easy though,
36
00:02:44,320 --> 00:02:52,180
you simply take that entire list and move it out of build and add it as a variable or as a constant
37
00:02:52,420 --> 00:02:57,250
to the overall MyAppState class like this.
38
00:02:57,250 --> 00:03:01,760
Now here however, we get an error that only static fields can be declared as const,
39
00:03:01,810 --> 00:03:06,000
so basically Dart doesn't allow const here on the class level.
40
00:03:06,130 --> 00:03:11,290
There are two solutions, we could add the static keyword in front of that to fix this, now Dart is happy
41
00:03:11,680 --> 00:03:17,680
or you change this to final and maybe just add const here to make it really clear that this list will
42
00:03:17,680 --> 00:03:19,710
never change, both is OK,
43
00:03:19,720 --> 00:03:26,290
I will go for final and then here my const value. Now questions is a property of this class and we can
44
00:03:26,290 --> 00:03:32,100
use it anywhere in a class, including this function. With that, back to this if check. Here,
45
00:03:32,100 --> 00:03:39,880
I'm having a boolean comparison, I'm comparing questions index to the questions length and what this
46
00:03:39,880 --> 00:03:40,570
does is
47
00:03:40,600 --> 00:03:42,270
if the length here,
48
00:03:42,370 --> 00:03:43,930
let's say that is three,
49
00:03:44,230 --> 00:03:52,420
if that is greater than the question index, then this here will return true because I am checking if
50
00:03:52,420 --> 00:03:57,590
question index is smaller than question length and this question has two possible answers,
51
00:03:57,610 --> 00:03:59,250
true or false.
52
00:03:59,620 --> 00:04:03,340
And this is another important type in Dart which I haven't mentioned before,
53
00:04:03,340 --> 00:04:12,500
a boolean. A boolean is true or a boolean is false.
54
00:04:12,640 --> 00:04:17,690
It's a specific type, bool which is built into Dart and it really only has these two values,
55
00:04:17,710 --> 00:04:25,300
true or false and therefore it's awesome for if checks. This here automatically yields a boolean,
56
00:04:25,300 --> 00:04:28,840
this expression here, thanks to this comparison operator, yields
57
00:04:28,840 --> 00:04:29,480
true
58
00:04:29,620 --> 00:04:35,480
if this condition is met and yields false otherwise and we only make it into this
59
00:04:35,890 --> 00:04:37,020
if block here
60
00:04:37,210 --> 00:04:43,930
if this here resolves to true. We could also check for if true, then this code here would always execute
61
00:04:44,020 --> 00:04:46,280
but of course, that's a bit of a meaningless check,
62
00:04:46,300 --> 00:04:50,480
the same would be true for a false, then this code here would never execute.
63
00:04:50,530 --> 00:04:56,590
Instead here, you want to have a comparison or some check that can sometimes return true and sometimes
64
00:04:56,590 --> 00:04:58,090
return false.
65
00:04:58,120 --> 00:05:04,840
Besides the smaller than operator, you also have greater than, smaller than or equal, greater than or equal
66
00:05:05,110 --> 00:05:06,290
or equal,
67
00:05:06,290 --> 00:05:09,830
so the two values have to be equal or not equal.
68
00:05:09,850 --> 00:05:15,520
These are other operators you can use here but here I want to check is the question index smaller than questions
69
00:05:15,520 --> 00:05:16,450
length.
70
00:05:16,450 --> 00:05:23,860
This means that since we have three items in questions, this here always is three because again questions
71
00:05:23,860 --> 00:05:29,470
here is a list with three maps, so questions length always is three.
72
00:05:29,590 --> 00:05:30,100
Question
73
00:05:30,100 --> 00:05:36,440
index starts at zero, then this condition would be true because zero is smaller than three,
74
00:05:36,460 --> 00:05:41,680
so for the first button click, this is true and we make it into the if block and then we change question
75
00:05:41,680 --> 00:05:43,550
index to be 1.
76
00:05:43,600 --> 00:05:46,110
So for the second time we click a button,
77
00:05:46,210 --> 00:05:49,300
this also is true because one is smaller than three,
78
00:05:49,420 --> 00:05:54,120
then we changed to two and therefore for the third time, this is also true.
79
00:05:54,160 --> 00:05:59,530
So what I actually want to do here is I want to print
80
00:05:59,530 --> 00:06:01,720
we have more questions.
81
00:06:01,780 --> 00:06:05,130
However as I just explained, this even is true
82
00:06:05,320 --> 00:06:11,200
if we have no more questions because we check before we change the index. So we should actually move
83
00:06:11,230 --> 00:06:12,810
that to the end of that
84
00:06:12,820 --> 00:06:16,340
so that we first change question index before we check
85
00:06:16,350 --> 00:06:18,440
if we then have more questions.
86
00:06:18,610 --> 00:06:24,370
But with that if we now restart the app, what should happen is that when we click a button, is that we
87
00:06:24,370 --> 00:06:30,280
see we have more questions twice for the first two button clicks but thereafter for the third button
88
00:06:30,280 --> 00:06:31,690
click, we see no output
89
00:06:34,470 --> 00:06:40,890
so if I now scroll up here above the error, we indeed see we have more questions twice but after the
90
00:06:40,890 --> 00:06:43,570
third click, we no longer see that.
91
00:06:43,630 --> 00:06:45,860
Now that's a normal if check,
92
00:06:45,900 --> 00:06:49,310
how can we now bring that down there into our widget tree?
9359
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.