Original subtitles

1 1

Now, to finish this up 2

2

and make sure we can restart the quiz 3

3

from inside that results screen, 4

4

let's make sure that in the results screen, 5

5

we always have a button we can press 6

6

to reset our question progress. 7

7

And for that, we need to add a button below our text. 8

8

How do we do that? 9

9

How do we add things below other things? 10

10

Widgets below other widgets. 11

11

Well, we need a column. 12

12

So, let's wrap our text in a column. 13

13

And previously I did this manually, 14

14

but actually with the Flutter 15

15

extension installed in the IDE, 16

16

we can do some automatic refactoring. 17

17

For this, use the refactoring shortcut, 18

18

which you can find in your key bindings 19

19

if you're not sure which shortcut that was, 20

20

and position your cursor. 21

21

So, click on the text here and then press that shortcut. 22

22

And you should now get a couple of options here. 23

23

And normally, one of them is wrap with column. 24

24

If you don't have that, 25

25

you can at least wrap it with a new widget 26

26

and manually create a column. 27

27

I do have it here however, so I will press enter. 28

28

And now we automatically have this wrapped in a column 29

29

and text is now already in the children array here. 30

30

If we save that, now we see the centering is lost. 31

31

That is the default behavior because the column by default 32

32

takes all the available height of the view port, 33

33

so of the screen, 34

34

and for the moment we'll ignore that. 35

35

We'll dive deeper into the depths 36

36

of columns and rows and layouting in a separate section. 37

37

So for now, let's live with that. 38

38

Let's instead focus on adding 39

39

an extra button below the text. 40

40

We could add another RaisedButton here, 41

41

but I will add a FlatButton. 42

42

FlatButton is basically a button without a background color. 43

43

Other than that, it's a normal button. 44

44

And now, here's Max from the future again. 45

45

The FlatButton which we use here can be used. 46

46

There's nothing wrong with it 47

47

and you therefore can stick to it. 48

48

I will also stick to it in this lecture 49

49

because this lecture was recorded with Flutter version one. 50

50

Flutter version two, however, deprecated this FlatButton 51

51

which is why you might see this strike through effect 52

52

here in Visual Studio Code. 53

53

This deprecation does not mean 54

54

that you can't use the button anymore. 55

55

You can, and there's nothing wrong with it. 56

56

It just means that there is a replacement 57

57

which you could switch to. 58

58

And that's the TextButton 59

59

which you can use instead of the FlatButton. 60

60

Now, if you do switch, you do use the text button 61

61

just as I do use the FlatButton over the next minutes. 62

62

So you will add the same arguments 63

63

to the constructor here. 64

64

Nonetheless, to follow along smoothly, 65

65

you can also stick to the FlatButton 66

66

but you can also switch to the TextButton here. 67

67

It needs a child, which is basically 68

68

the content displayed on the button, 69

69

and here a text will do 70

70

and I will say, "Restart quiz!" 71

71

We also, just like on the RaisedButton, 72

72

you need an onPressed handler. 73

73

Now, you know that onPressed needs a function reference, 74

74

the address of a function. 75

75

And restarting actually is some logic 76

76

that probably has to be done in the main dart file 77

77

because that is where we manage our current question index 78

78

and the total score 79

79

and both needs to be reset to zero in order to restart. 80

80

So, in the main dart file, in the my app state class, 81

81

we can add a new method, 82

82

reset quiz or whatever you want to call it, 83

83

and the goal here is to set both question index 84

84

as well as total score back to zero. 85

85

Because if we do reset that to zero, 86

86

especially when we reset the question index, 87

87

when we do that inside of set state, 88

88

which you of course have to do, 89

89

so inside of that function which we pass to set state, 90

90

if we do that, then you know that the build method 91

91

of this my app state class will be re-triggered. 92

92

It will rebuilt that tree 93

93

and there for all the reevaluate that condition 94

94

and find out that now our question index is smaller 95

95

than our question length again 96

96

and hence not rendered the result anymore but the quiz. 97

97

That's exactly what we want. 98

98

So, now we have a reset function that should do the trick. 99

99

Well we need it here in main dart, 100

100

in our my app state class, 101

101

but we want to trigger it from inside the result widget. 102

102

However, that is something we did before as well. 103

103

We simply need to pass a pointer to that function, 104

104

to the result widget. 105

105

So, I pass reset quiz 106

106

without parentheses to the result widget, 107

107

and in the result widget, we now need to accept this. 108

108

So, add another property, a function, 109

109

which is my reset handler or whatever you want to call it, 110

110

and I will accept this as a second argument. 111

111

So here, whatever I receive as a second argument 112

112

is now stored in reset handler. 113

113

And that is now what I bind to on pressed. 114

114

So here we can bind resetHandler 115

115

and with that, if we now save this, we see restart quiz. 116

116

If I press that, indeed, we restart. 117

117

Now, to make this stand out a little bit more, 118

118

we can add some colors, 119

119

some text color here to the flat button 120

120

and maybe use blue here 121

121

so that we can see that button a bit better. 122

122

So, now if I press that, we can dive in again. 123

123

Now again, max from the future here, 124

124

if you're not using flat button but text button, 125

125

this newer alternative which I mentioned earlier, 126

126

if you're using that, 127

127

then this text color argument is not supported. 128

128

Instead, when using text button instead of flat button 129

129

or elevated button instead of erased button, 130

130

you style those buttons a bit differently. 131

131

That's why I do recommend 132

132

that you stick to raised button and flat button 133

133

to follow along smoothly. 134

134

Nonetheless, I'll show you here, how you would style it 135

135

if you do switch to this text button. 136

136

Then, instead of adding the text color argument here, 137

137

there is a style argument, which you can add. 138

138

And that one's button style object, 139

139

which you instantiate 140

140

with the button style widget class here, 141

141

and there, you can set the different 142

142

style properties of this button. 143

143

Now here, we still don't have a text color 144

144

just a text style property, 145

145

which would allow us to turn it 146

146

into an underlined text or anything like this. 147

147

But we do have this foreground color property, 148

148

which as we can see in the tool tip on the left, 149

149

allows us to control the color 150

150

for the button's text and therefore here, 151

151

we can set foreground color to a color. 152

152

But unfortunately, it's now no longer, color's not blue 153

153

which was straight forward, 154

154

but instead it's material, state, property, all, 155

155

and then their color's blue. 156

156

Yeah, that is a bit longer, I would argue. 157

157

One of the reasons why I would recommend 158

158

that you stick to flat button for the moment, 159

159

but if you do switch, then you do set the color like this, 160

160

by adding style button style foreground color, 161

161

material state property, all, 162

162

and pass colors blue to this all method, 163

163

which is called here. 164

164

And with that, if we go through that quiz, 165

165

we again got this button here with the blue color. 166

166

Now, set on this new text button instead of the flat button 167

167

to which you can switch if you want to. 168

168

This is all looking good. 169

169

We cannot reset this. 170

170

I won't argue, 171

171

the user interface itself 172

172

is not the most beautiful one I've ever seen, 173

173

but we'll learn more about building user interfaces, 174

174

styling your applications, and also layouting, 175

175

so that we can also center vertically 176

176

when we're using a column, 177

177

something we lost for now. 178

178

We'll dive into all of that later throughout the course. 179

179

For the moment, we had an extensive look 180

180

at all the core basics you need to know about Flutter.