All language subtitles for 37. Deriving Recent Transactions

To wire up the chart widget, we need to include it in the place where we want to display it

and that would be in the main.dart file instead of our chart placeholder.

So here, we have that chart placeholder,

let's replace that entire container now with our chart widget. The chart widget is only available

if we import it,

so here we need to import ./widgets/chart

and let me also bring that import here next to the other widgets imports, not required but good from

a stylistic perspective.

So we're importing the chart widget, we're using it down there,

chart however needs our recent transactions and that's important,

it does not need all transactions.

We could have more transactions here but I only want to transactions from the last week,

so we should make sure that we only add those. For that in the main.dart file,

I will also add a getter.

I have my list of transactions here and below that,

I'll add another list of transactions but this is now a getter, so a dynamically calculated property

which I'll name _recentTransactions.

Now just as all getters, this has no argument lists but it has a body and it needs to return here

a list of transactions and for that, we of course take all our transactions

but now we want to filter out transactions that didn't happen in the last week.

We could again do this with the help of a for loop,

we could build a new list in here and return that new list after running over all transactions with

a for loop and finding all transactions that have a date that is younger than today minus 7 days but

to mix things up and to show an alternative to using for loops everywhere,

you can also use another method which exists on every list which is a default method

Dart offers on lists and that's the where method. Where allows you to run a function on every item in

a list

and if that function returns true, the item is kept in a newly returned list,

otherwise it's not included in that newly returned list.

So here, I pass in an anonymous function and that function gets the element of our list because it executes

on every element in this list and therefore it gets the element it's currently looking at as an input

and here I get my transaction which I'll name tx,

you can name it whatever you want and I want to return true

if that happened within the last week and false if it's older than a week. And for this, I'll check if

tx date and the good thing is that's a datetime object and there, Dart gives us an isAfter method and

now all we have to pass here is another datetime

and only if this date is after this date, this here will return true and only then this transaction

will be included in our recent transactions. So the date I want to pass here is of course today minus

7 days.

So here, I create datetime now and I subtract a duration, you already saw all of that earlier, a duration

where days is equal to 7 and this subtracts 7 days from today and hence makes sure that we check that

this date here is after today minus 7 days. Only transactions that are younger than 7 days are included

here and now we can pass recent transactions, like a property because it is a property, just a dynamically

generated one, to chart. So let's save this and we get an error, the error here is if you scroll up, let

me increase that, if you scroll up, you see that the error is that it has something to do with an iterable which means

something with a list and it's not of subtype list transaction instead it's a where iterable transaction.

A bit cryptic but it has to do with with where and iterables and since it appeared after writing this code

for the recent transactions, it probably has something to do with that.

Indeed, where returns an iterable, not a list but we expect a list here.

So what we need to do here is on the value we generate here with where, we need to call to list and you

might remember we had to do this with map as well earlier.

So now if we save this, now our app restarts and now let's add a transaction here, new shoes 99.99

and if we save that,

nothing happens in our console,

so is our chart logic not working here for the grouped

transaction values?

Well we can't tell because we're simply not using that.

It's a getter and we're never using the grouped transaction values.

So in order to find out whether that works, we need to use it

and for a start, I will simply print grouped transaction values here in the build method of my chart.

And with that, it crashes,

let's see what's wrong here,

the problem is type datetime time is not a subtype of type string, caused by line 26 in our chart file.

Yes, the problem is little mistake on my side,

we shouldn't pass weekday here to this E constructor but instead call format on the object that constructor

gives us and pass weekday to that format function,

also down there of course. So with that

let's now save this

and if we now scroll down, that looks better and indeed what we see here is a couple of things.

This is the overall list that was generated and this looks good, it has a list of days with the different

weekdays and we see 99.99 which is the value I added today on Thursday and

today indeed is Thursday.

So this is working and it's generating this correctly as it seems, let's validate it by adding one other transaction,

groceries

9.69, this will also be added today because right now we have no way of targeting different

days

and with that,

yes,

our amount today increased. That strange number here by the way,

why it's looking that strange,

this is not a bug,

this is a default Dart behavior,

you actually have that behavior in every programming language. When you do calculations with numbers

with floating point values,

so with decimal places, then that's hard for computers and you will therefore, when adding various decimal

places, sometimes end up with long expressions like this, with a lot of decimal places.

Doesn't really matter for us here however, it's not a bug, it's a default behavior which you have in any

programming language, more information about that can be found attached in a document to this lecture

if you want to learn more. For the moment, let's leave that as it is and let's make sure that we now also

don't just see our data here in the debug log with the help of these print statements but that we instead

really output something on the screen for our transactions.