All language subtitles for 35. Looping Through Lists

So the child of my card here should be that row with all the information in it.

So let's add a row here

and in that row, I want to have my bars with the label, with the weekday label and with the amount

and of course with the partially filled background. So we'll have some children in here and we'll always

have exactly seven bars,

that's something I know, nonetheless,

I want to generate these seven bars dynamically and not hardcode seven bars which it's in here.

So therefore, let's add a new method here in our chart widget or a new getter to be precise.

You might remember, getters are these properties which are calculated dynamically and there, I want to

have a getter which I'll name groupedTransactions or transactionValues because these

are the transaction values grouped by weekday

and what this actually returns, what this yields should be a list because I need multiple bars, I need

seven bars and the item, the list item in there, the list items should be maps.

You could also build your own objects, that would be perfectly fine

but I will use a map here and in that map, we'll have mixed content, we'll have keys that are strings

and the values will be of type object because we'll have mixed value there

and it will become clearer what's in there

as we progress here.

So as a getter, this needs a body where we return that list.

Now first of all, we can use list and then generate which is a utility constructor on the list class,

list is a core Dart object or core Dart class

and it has a generate constructor which generates us a new list. We define the length and generate makes

a lot of sense here because I know that I went a length of seven, I want seven weekdays and then we

have a function which will be called for every element.

So here, we pass in a function and that function will receive the index, so 0, 1, all the way up to 6

because the index is always one lower than the length.

So it will give us a list with seven elements and first list element has an index of 0,

so it executes this function for every generated list element with index being 0, 1, 2, 3, 4, 5, 6. In here,

in this function here we pass as a second argument to generate, I return my map in the end right because

I have a list of maps. So we can return something with curly braces to create a map

and now in that map which I return here, I need a couple of pieces of information. I need to get the label

for the weekday and I'll just name this key here day

but it should hold a label like M for Monday, T for Tuesday and so on,

so we'll replace this later, we'll not hardcode this,

no worries. Then I will also need the amount for that day and that amount should be something like 9.99

of course,

so the total spendings for that given day.

Now we need to calculate that amount for that day and for that, we need to know which transactions we

have overall.

So the chart will need our list of transactions

otherwise we can't derive to values for the chart of course. Hence I'll add a final property which should

be a list

full of transactions and transaction is my own class,

so we should import that from the models folder,

the transaction.dart file and I'll name that recent transactions because actually we should only receive

a list of the

recent transactions that happened over the last two days or over the last seven days to be precise.

I'll add a constructor where I expect these recent transactions and store them here in that list.

Now let's continue with the logic for grouping our transactions by weekday. To group these recent transactions

here inside of our generate method or in the function we pass to generate here,

I first of all want to find out which weekday we're currently generating and we can do this with

the help of index.

So I'll create a weekday variable and I mark it as final,

you could use var here but if you don't intend on changing this variable ever, you can also mark it as

final and then this is considered to be better because you're clear about what you're planning and being

clear about your intentions is always good in programming.

So instead of var, I use final to mark that this is a final variable which kind of doesn't really make

it a variable I guess

and then we set this equal to datetime now which is the current date,

so today and now of course we know that since we generate data for the last seven weekdays, when this here

has an index of zero, then we could say we deduct zero days from today and hence we have today

and we can get the weekday of today. For the next item in the list,

this will be one,

so that would be yesterday if we deduct it from datetime now and then we can get the weekday of that

and so on all the way up to one week ago.

Thankfully, the datetime object in Dart has a subtract method where we can conveniently subtract the duration

to get a new date. Duration has to be a duration object and duration is also built into Dart so we can

use it like this

and duration in its constructor takes some arguments that allow us to define the duration

and here we could say the duration should be index days.

So for the first round, when this is zero, we have a duration of zero days,

so we subtract zero days which means we have still datetime now. In the next round, for the next list item

which is generated, index is one,

so we subtract one day,

so that means now, we generate a date which is yesterday and so on.

So with that, we generate these different days

but of course, I'm not really interested in the date, I want to get my weekday shortcut, my identifier

and we can do that with the help of a package we installed earlier with the intl package.

So here you can add the intl package again, the intl.dart file and here when we assign a weekday

value to the day field in our map here, to the day key, we can use DateFormat.E,

that's a special constructor that simply gives us the shortcut for the weekday,

so M for Monday, T for Tuesday and so on,

that's built into that date format class which is of course extremely convenient

and then all we have to do is pass our weekday in here and that will then retrieve the shortcut for

that weekday as a string and store it in this map. So that's the weekday,

what about the total amount for that day?

That of course means that we need to sum up all transactions that happened on this day.

Now we got the recent transactions which are all transactions for the last week,

so now we need to find all transactions that happened on this day and then sum them up.

We can do that with the help of a for loop, so I'll create a variable here, to be precise

I'll create a variable with the double keyword, totalSum and I use double here instead of var because

since I don't initialize this variable, it's unclear which type it will have

and then it's a good practice to clearly define the type it will have

and now we can use a for loop.

We haven't used a for loop before, a for loop allows you to repeat code multiple times.

You do that by typing for and then you pass some instructions here between these parentheses, to be precise

a for loop needs three things; it needs an internal variable which changes with every iteration in the

for loop,

so with every execution of your code and that's created with the var keyword, it's often named i but

you can use any name you want but i for iteration and you assign an initial value, typically that's zero

but you can assign any value, then you add a semicolon and next you define your exit condition,

so how long should this loop keep on running

and here it should keep on running as long as we have transactions in our recent transactions list because

I want to go through all transactions to then filter out the ones that happened today.

So our keep it running condition here, which is a better name than exit,

so our keep it running condition is that i, this index here, is smaller then recent transactions length.

So let's say recent transactions is a list of five elements,

then this loop will keep on running as long as i is smaller than five.

The problem with that is that we never change i,

that's the third element you need in the for loop.

You change i with every iteration,

typically by simply adding one and that's a shortcut for i equals i plus one, which you could also

write,

the shortcut is i++ which means after every round, important, after every round, one gets added

to i. So after the first round,

i is one if you have five elements in here,

it keeps on running and after the last round, i if we have five elements will get a value of five,

that is the not smaller than five anymore and hence it will stop running the loop.

So with that, we're running through all our transactions and inside of the for loop, we can now add an if

statement to check if that transaction

we're now looking at happened today. So that means that now inside the loop in the if statement, I use

recent transactions and access the element at the index i and i will of course change with every iteration.

So we go through all elements in recent transactions and here, I access each element and then I can check

if that element here, if the date of that element is equal to this date.

However this would be wrong because this is a datetime object which means it does not only contain

the date but also the time, the timestamp and this simply means that comparing dates will never succeed

because we'll never have the exact same timestamp,

instead I want to make sure that the day, the month and the year is equal because these are my three

things that make up the date.

So I compare the day and thankfully, there is a day property on every datetime object, I check if day is

equal to and with two equal signs,

as you learned, you can check for value equality, if that is equal to weekday.day.

Now I also need to make sure that we're in the same year and month, so I will also check if recent transactions

for the element i, if there on the date, the month is equal to weekday, month

and

one additional condition which I want to add here and you can split conditions across multiple lines

to keep it simple and I want to check if recent transactions date year is equal to weekday year.

With that, we have a condition that checks

are we looking at a transaction that happened on the weekday,

we're considering for this iteration in our list generation here. If we identified a transaction that

happened on that day,

we want to add it to our total sum

and now actually I want to initialize my total sum with a value, with 0.0 and therefore we can

change double to var because if we initialize it with a value, Dart is able to infer the type.

So in the if check here, I now want to use total sum and add, with the shortcut here,

my recent transaction for the given index amount because I need to add that amount to the total sum

and with that, we go through all transactions and we add the sum of each transaction,

the amount of each transaction that happened on that weekday we're looking at to the total sum for that

weekday and now down there when we generate the map, we just have to replace 9.99 with the total sum

and now we should be returning a map with the weekday shortcut and the amount. That was a lot of work

but I hope the logic here is clear which allows us to find out which amount of transactions, which total

sum was generated on a given weekday. To see whether that worked, I'll actually print these two pieces

of information here,

so here, right before we return the map, I'll print the weekday identifier and the total sum

but now of course to see that, we also need to wire up our chart widget.