All language subtitles for 34. Mapping Lists to Widgetsf

With the questions now being re-added as maps, in order to pass down our questionText here, it's not

enough to select a question by index, instead

now in there we of course have our questionText key which we're now interested in. So we're interested

in the value of course but we do access this value through its key.

Now how do you tell Dart that you want to get the value for a specific key? Down here,

I'm selecting a specific question in my questions list and that's important,

this list here is still a list.

It's a list which now holds maps

and in this map, we have a combination of string keys and then various objects and Dart is inferring

that we have a map with object values here because we have a mixture of values,

here we have a string value

and here we have a list value and therefore, Dart goes back to the generic parent type which every object

has in Dart and that would be object because everything is an object.

So we have a list of maps where every map has a string key and different kinds of values.

How do we get access to the value now?

Here we're accessing a specific question through its index and therefore now, this here yields us

a map, for index 0,

it yields us the first map, for index one, it yields us the second map.

If we now want to get access to a specific key, we again use square brackets here,

so not curly braces but square brackets,

we use square brackets to access a key in a map and there we simply use the key name in here, inside of the square

brackets.

So on all the questions, I'm accessing the question with index 0, 1, 2 and so on

and then here for the chosen question map, I access the value with the key, questionText.

So that means I access this value,

this value or this value and it's this string which then gets forwarded to the question, awesome. We can

forward our value to the question and

that's of course pretty neat.

Now how can we create our answers dynamically based on the selected question?

We always have four answers, so we could hardcode our answers here

but of course, we could also have one question with four answers and another question with only three

answers.

So it would be nice if we could create these answer widgets dynamically based on the current question

and that of course can be done with Dart. Instead of hardcoding the answer widgets here, what you can

do is you can access your questions here, so access questions which is a list

and now

and that's really nice, map

that list into something else.

That means transform that list into something else so that instead of a list of maps, we have a list

of widgets and that list of widgets could then be added here and merged into our list of widgets in

that column.

For that, you have the map method.

Again, questions is a list and a list is a class, an object in Dart and that class defines a map method.

The map method executes a function which you have to pass as an argument to map on every element in

the list on which you're calling map,

so in this case on every element in the questions list. So we have to pass a function to map and you

could use a named function which you could create up here

or you use an anonymous function since we really only need that function here and in no other place

of our file.

So here, I'll define a function and that function automatically receives an argument itself which will be

passed in by Dart and that's the current element we're looking at because this function will be executed

for every element in the questions list and the current element for the current function execution, that

is received as an argument inside of this function which is applied to every element.

So here, we get the question, single question we're looking at and now in here, we have to return a new

value because map returns us basically a new list where we don't have to keep the old structure,

so it doesn't have to be a list of maps, it can be a list of widgets and that could be something we merge

here into the column.

Now for that, we want to return a widget here because we want to, for every element in questions, we want

to return a new element which basically replaces it

and that should be a widget

now. So here, I want to create a new answer widget

and to that answer widget, I want to forward question, however we're actually calling map on the wrong

thing now because questions is a list of maps, right?

Actually I want to go through all my answers for the question we're currently looking at.

So we should fine tune this a little bit

and here we access questions for the currently selected question index and there, we now select a key

and that key now should be answers

and that will then give us a list of answers and that's actually what I'm interested in here.

So map now takes a function which runs on all our answers and hence in here, I get answer and I forward

that answer to my answer widget.

Now here I'm getting an error that map isn't defined on the class object and the problem we're having

here is that Dart fails to infer that the answers key always holds a list.

It does here but Dart simply doesn't see that, it simply is something Dart can't detect.

Now to fix that, we can tell Dart that answers is a list by wrapping this part all the way up to after

this answers

key we're accessing here into parentheses and adding the as keyword which allows us to tell Dart hey,

this will have a specific type,

I know it and we know that this will be of type list full of strings, string should have a capital

S.

So now we tell Dart that answer here, answers which we access, will actually be a list of strings and the

error we're now getting is a different error which we'll fix later,

no worries.

This however will work now, we can map a list of strings. Answer here therefore is a string and to answer,

we forward that string.

Now of course at the moment, answer doesn't take a string, it only takes this function handler,

so we should accept a second argument here in the answer widget which is the answer text one output

and I also want to store this in a property here,

answer text and therefore actually here in the constructor list, let's use this answer text which then

automatically assigns the incoming value to this property

and the answer text is then what we can use down there in our answer widget. So now, we're accepting

answer text but still here when we create the widget, the answer text which is inside of an answer is

not the first value we should pass to

the answer widget but the second one, the first value should be our handler for the chosen answer and

for that, we of course still want to pass a pointer to our _answerQuestion function here.

So let's forward this for every answer which we're creating.

That was a lot of work and I know that this can be a confusing setup here,

mapping a list into a list of widgets,

what's the idea here?

Well the idea really is that now we have a list of widgets here in the end, at least almost because

map doesn't give us a list but a so-called iterable which is kind of a parent class for all the different

iterables,

a map would also be an iterable and to really tell Dart that we want a list here and not a map or anything

else, we can add a dot after this whole operation and call to list

and now this converts the value map gives us to a list.

Also please note that map does not change the original questions list,

it does not change this variable or the value in there,

it generates a new list instead based on the old list and then the transformation we do in the body

of that function will be passed to map.

The remaining problem now is that we have a list here and here, column also takes a list of widgets but

with that, we would have a nested list,

we would add a list in a list. Actually, we want to have a couple of individual items in that list of

children and to get that, we can use another operator that's available in Dart, it's a so-called spread operator.

You can add three dots in front of this and now I get a warning because it's a relatively new operator

but it is supported in the recent versions of Dart and what this spread operator does,

what these three dots do here is they take a list which is exactly what we have here and they pull all

the values in the list out of it and add them to the surrounding list as individual values, so that we

don't add a list to a list

but the values of a list to a list, having only one list without a nested list.

So this is what we're doing here

and with that, we're having a transformation where we transform every answer into an answer widget.

We then make sure that this is a list and then we take these generated answer widgets and we add it to

this list here.

That was a lot of work of course but with that if we save this, we indeed see four values here for our

four answers

and if I choose one and we go to the next question, you'll see that these answers change and if I click again

since I already was on the second question,

now I get an error because now I try to advance to a question which we don't have.

Of course, we could implement checks that avoids that we can go to a question which we don't have

but for the moment, I'm happy with the current state.