All language subtitles for 21. Connecting Widgets & Managing Data State

To receive our transactions in the transaction list file in the transaction list widget here, we can

first of all add a new final property here which is a list of transactions,

so this doesn't change, which I'll name transactions, of course you can use a different name here.

So we have that final list of transactions and that should be set

with the help of the constructor now because the constructor is how we can pass data from the parent

widget into a child widget, so into this widget here. For that, I'll use the shortcut and expect to get

the transactions as my first and only positional argument.

So now incoming transactions are saved here and instead of _userTransactions, we again now use

just transactions here, referring to this list. Now in user transactions where I do instantiate that transaction

list widget,

we now have to pass our list of transactions and that here simply is _userTransactions.

So thus far, we just did a lot of reorganization without actually getting closer to the point where we

can add a new transaction

but this will change now.

Now in the user transaction file where we manage our list of transactions, we can add a new method, a method

that doesn't need to return anything and therefore will have a return tab of void and which I will

then name add new transaction.

The name is up to you, though it should start with an underscore to mark this as part or as private and

as part of that private class here. In here,

I expect to get two pieces of information, I expect to get my title which will be a string and I expect

to get my amount which actually should not be a string but a double let's say. So here I get my title

and my amount and I then want to create a new transaction here. So I'll create a new variable which

I'll call newTx maybe, it's final because here I create it with the values that are passed into this

method,

so it is create based on values which I don't know at the point of time I'm writing the code,

hence const can't be used here but I can use final because once that transaction has been created with

these dynamic values, it will not change again.

So here, I will create a new transaction by using the transaction constructor and for my title, I pass

the title. Now to avoid confusion,

I'll name this txTitle here, you don't have to rename it, you can use the same argument name here as

you expect here but to avoid confusion on what's what,

txTitle is what I pass as a value because I get it here as an input to this method and I pass this

as a value for the named title argument on my transaction constructor. For the amount argument, I pass

txAmount. Again

you could have named txTitle just title and txAmount just amount, that would have been okay.

Now we also need to pass an ID and a date. For the moment, we have no way of selecting the date,

we have no date picker

the user could use,

so why don't we again use datetime now to use the current date? And now for the ID,

I want to have a value which is kind of generated automatically and unique and therefore I'll also use

datetime

now to string here.

It's not perfectly unique,

theoretically we could add two transactions at the exact same timestamp

but here for this app, it will do for now

and it will be a string

and it is generated automatically so we can treat this as a kind of unique ID for now.

This is the new transaction

and this new transaction should now be added to the user transactions list.

For that, since I also want to update the user interface because build should run again to rebuild our

transaction list and then also rebuild new transaction, that's the side effect, since I want to update

that,

I have to call set state now which I can call because we're inside of a state class, extending state,

so we can call set state in here and inside of that function you pass to set state,

I will use my user transactions which is that property up here and now, I want to add a new transaction.

Now of course, that is marked as final

but remember what I explained earlier when we talked about final and const? I mentioned that Dart stores

objects in memory and only stores the pointer at these objects, the address in your variables.

So _userTransactions holds a pointer at this list, the pointer, the address itself is final,

we can't do user transactions equals something, that would not be allowed because then we would try to

assign a new value to user transactions and user transactions is a final variable.

What we can do however is we can interact with that list because that doesn't change the pointer,

the object stays the same,

we just manipulate the object and that can be done with the help of add. Add is a method we can call on

a list to add a new element to that list, so that will change the existing list but it will not generate

a new pointer or a new address and therefore we don't violate this being final,

we just added the object that's stored in this final variable.

So here, I add a value and that value of course is my new transaction.

Now thanks to set state, that should be reflected on the user interface and a new transaction should

be added to our list. To now see that all come together,

let's go back to the main.dart file and there,

let's now add our user transactions widget, on which we worked, below our chart container here and for that,

as always, you need to add an import which should be ./widgets/user_transaction.dart, then that's

added here below the container.

Now last but not least, we have to make sure that when a user now presses this button, the add transaction

but we don't just print the text of that transaction but that we actually trigger that add transaction,

that add new transaction function in user transactions.

Here's your chance to wire that up on your own,

we'll of course do it together in the next lecture.