All language subtitles for 8. Mapping Data Into Widgets

With that list of transactions available, let's output these transactions and for that here, instead of that

second card, which is a placeholder for that list of transactions,

I want to have the actual list of transactions.

So since we have more than one transaction, we need a widget that can hold more than one widget because

each transaction

here in our list of transactions should be mapped into a widget that outputs the data of that transaction.

No one which widget can we use if we have more than one widget column?

So here in the column, we add the children key and again now we can output our different transactions.

Now each transaction might now be a card,

so therefore we could add a card here and now populate it with data for the first transaction and then

add a second card and populate that with the data of the second transaction

but this approach would have a flaw.

Do you know which?

Well we as a developer would have to hardcode as many cards as we have transactions

and whilst we know how many transactions we have at the moment because the transactions are hardcoded

too, later the transactions will be dynamic because the users of our application will add them,

so we don't know in advance how many cards we need

So in the end, our goal should be to take our transactions list and map that into a list of widgets and

we did this earlier

So here,

children will now not be an array like this but instead here I'll point at transactions which is my list

of transaction objects and there, we can use the map method to transform this list of objects into a

list of widgets, widgets technically also are objects but you get my point.

Keep in mind you need to call to list here at the end because map will always give you an iterable

which you need to transform to a list

but right now there is nothing to transform, map doesn't do anything. You might remember that map takes

a function, a function which automatically gets executed on every element in that list,

so in this case on every transaction.

So what we get here is a single transaction and I'll name it tx here just as an abbreviation.

So we get a transaction here as an input to this function we pass to map and this function again executes

on every transaction in here and we need to return a new element here and that new element of course should

be a widget that represents our transaction and there, we could use a card with a child

and for now, let's simply output the title of the transaction and we'll output the rest later.

So here we get our card with our text in there and the text of course should be drawn from the transaction

we have and in there,

I want to access the title. That's by the way the convenient thing of using a custom class and object

instead of a map for our transactions,

here I get nice auto completion

as soon as I type a dot to access the different properties of this object, I don't have to use title

as we did it for a map.

So here I output my title

and with that, we actually already transform our list of transactions to a list of cards where each card

outputs the title of the transaction. If we save that, our application is taking shape and we see the

two titles here.

Now of course, a transaction should be more than a tiny card with no spacing at all inside of it

and then the title,

so let's work on how we output a single transaction in the next lecture.