Original subtitles

1 1

To have a text 2

2

and below that text a couple of buttons, 3

3

we now need an invisible, a layout widget. 4

4

And there we can use the Column widget. 5

5

Column, as the name suggests, 6

6

is there to render widgets in a column 7

7

because difference to text and so on 8

8

is that this has a children named argument, 9

9

which actually takes a list of widgets. 10

10

Now, there are a couple of new things. 11

11

This thing here between the angled brackets, that's new. 12

12

And the square brackets here are also new. 13

13

What does this all mean? 14

14

Let's start with the square brackets. 15

15

Dart, like many other programming languages, 16

16

has the concept of lists. 17

17

Thus far, we learned about strings, 18

18

about integers, doubles and objects 19

19

and everything is an object in the end. 20

20

Now, lists are another type of data. 21

21

A list is basically a group of data. 22

22

So you can have a list of strings. 23

23

For example, here we could add a variable, questions, 24

24

and that could now be a list of text, 25

25

a list of text questions, 26

26

like what is your favorite color? 27

27

By the way, if you would want to write what's here, 28

28

and you use single quotes to enclose the string, 29

29

then this single quote would quit the string, 30

30

which is an error, 31

31

and you can escape this by adding a backwards slash 32

32

in front of this. 33

33

Now what happens is that this single quote here 34

34

is not treated as a quote that ends the string 35

35

but instead as the quote character 36

36

that should be part of the string. 37

37

So that backward slash in front of it achieves that. 38

38

So now we would have a question what's your favorite color? 39

39

And also, what's 40

40

your favorite animal, for example. 41

41

Let's also add a trialing comma here. 42

42

And now questions actually would be a list of string data. 43

43

Now, the idea behind lists 44

44

is simply that we can group related data together 45

45

because in so many scenarios of programming 46

46

but also in real-life actually, 47

47

you work with lists of data. 48

48

You have on your phone, on your real phone, 49

49

if we take a real-life example, 50

50

you have a list of contacts. 51

51

Your friends, that's a list of persons, a list of people. 52

52

And therefore, lists are also something 53

53

that exist in programming 54

54

and basically in any programming language, 55

55

you can find and of course, also in Dart therefore. 56

56

Lists are created with square brackets. 57

57

What's also what I did up here. 58

58

I created it with square brackets 59

59

and therefore, lists are also created down there 60

60

where we have a list of widgets 61

61

and that's the angle bracket widget thing. 62

62

This is a so-called generic type 63

63

and so a little annotation, 64

64

which we could also drop here 65

65

because of type inference, 66

66

this tells Dart that this list here 67

67

will hold a list of widgets 68

68

because a list can, of course, hold anything. 69

69

This, for example, is a list of strings. 70

70

If I hover over questions, 71

71

we see that Dart was able 72

72

to automatically infer this. 73

73

List, and then again, this angle bracket thing 74

74

but here with string. 75

75

A generic type is basically an annotation, 76

76

which you can have on some types 77

77

that allow Dart to understand that this is not just a list 78

78

but a list of a specific data type here, for example. 79

79

It's the same thing down there. 80

80

This is a list of widgets. 81

81

Now, because of type inference, 82

82

we can remove that as soon as we start adding widgets here. 83

83

And there, I would want to have my text widget 84

84

with the question, 85

85

and I'll add some real text soon, 86

86

and below that, a couple of buttons. 87

87

Now, there are different kinds of buttons in Flutter. 88

88

One of them is the RaisedButton, 89

89

which is a button with a background color 90

90

and a little hover effect. 91

91

Now, depending on the Flutter version you're using, 92

92

the RaisedButton might have this strike through effect here 93

93

as it does here for me in this example. 94

94

The reason for this is that the RaisedButton 95

95

has been deprecated with Flutter version two. 96

96

Now, that sounds big, but it doesn't mean that much. 97

97

You can still use RaisedButton. 98

98

It's not insecure, not bad to use it. 99

99

You can stick to it 100

100

and to follow along smoothly with this course, 101

101

I do recommended that you stick to RaisedButton. 102

102

Alternatively, you could switch to ElevatedButton, 103

103

which in the end is the alternative to RaisedButton, 104

104

the replacement for RaisedButton. 105

105

And for the moment, for the next minutes, 106

106

you would use ElevatedButton 107

107

just as I use RaisedButton here. 108

108

So you add the same arguments 109

109

to the constructor then. 110

110

Nonetheless, as mentioned, 111

111

I would recommend that you stick 112

112

to RaisedButton for now for the moment 113

113

to follow along smoothly. 114

114

I will migrate to the newer buttons 115

115

in future Flutter upgrades 116

116

but since you will find a lot of projects out there, 117

117

which use these deprecated buttons 118

118

and since these deprecated buttons 119

119

will stay around for quite a long time, 120

120

I do recommend that you follow along with them for now. 121

121

However, attached, you also find a link 122

122

with more information about the new buttons 123

123

replacing those old buttons, 124

124

why they exist and what they do. 125

125

But here, I will stick to RaisedButton for now. 126

126

If you wanna get rid of that strike through effect, 127

127

you can do that in your settings here 128

128

in the Visual Studio Code settings. 129

129

There if you search for deprecated, 130

130

you can disable this Show Deprecated setting here 131

131

and if it is disabled, 132

132

you will not have this strike through effect here anymore. 133

133

Now, the RaisedButton here is again a widget, 134

134

which we create by instantiating our class here 135

135

and it typically has a child, 136

136

which is basically the content inside of the button 137

137

that could be an image, that could be an icon 138

138

but often it's also just some text. 139

139

So the text which is displayed on the button. 140

140

Again, this is a widget, not just some string. 141

141

The child here is a widget instead 142

142

and therefore, here we could have Answer 1. 143

143

And then I can copy that line and add it again 144

144

so that we also have Answer 2 145

145

and maybe also Answer 3. 146

146

Now, each button, besides having a child 147

147

also needs an onPressed argument 148

148

and onPressed will be a function that should be executed 149

149

when this button is well, pressed. 150

150

For the moment, since we haven't really learned 151

151

how to wire that up, 152

152

let's add null here. 153

153

Null is a special value in Dart. 154

154

It basically means nothing. 155

155

The difference to void is that void is a type. 156

156

So here we say the type of data main returns 157

157

is empty, it's nothing. 158

158

And null is not a type but a concrete value, 159

159

just like one is a value, the number one, 160

160

or like this here is a value, null is a value, 161

161

which says nothing. 162

162

But we need to add that to avoid errors. 163

163

So here I add onPressed to all my buttons 164

164

and for all buttons, I then add null. 165

165

And with that again, I hit my code formatting shortcut 166

166

so that this gets formatted in a bit of a nicer way. 167

167

And again, if we add trailing commas, like here, 168

168

after null in my first button, 169

169

then this gets formatted in a bit 170

170

of a more readable way. 171

171

So now I added my Column widget, 172

172

which has a couple of child widgets 173

173

where we have the Text widget and then the RaisedButton. 174

174

And if we save that, 175

175

now we see our text up here 176

176

and then we see the three buttons 177

177

and they are currently all disabled 178

178

because onPressed is null 179

179

and that means if we press this button right now, 180

180

nothing happens and Flutter automatically detects this 181

181

and then disables the button, 182

182

which sometimes can be nice 183

183

if you have a user input form 184

184

where you gather the email address 185

185

and the password of the user. 186

186

Then you would want to disable the button 187

187

as long as nothing valid has been entered. 188

188

Here, however, of course, I want to enable them. 189

189

And for that, we have to understand 190

190

how we wire up the button here 191

191

to some function that does something 192

192

or how we make sure that something happens 193

193

when the button is tapped. 194

194

Of course, we can also improve the styling 195

195

and how this is laid out here on the screen 196

196

but we'll do this in a second step. 197

197

For now, it was important to understand 198

198

how we can have more than one widget next to each other 199

199

with the help of Column for ordering widgets 200

200

from top to bottom. 201

201

If you would want to say have them sit next 202

202

to each other left to right, 203

203

you would have used Row instead 204

204

but we'll see Column and Row 205

205

and all these other invisible 206

206

and visible widgets throughout the course.