All language subtitles for 48. Deleting Transactions & Usingf IconButtons

The application is really taking shape,

besides some styling or layout things like that keyboard thing here or maybe on different device sizes

where we might want to change the look and feel of our app a little bit,

besides that, the app is really looking and working good and decent

and the missing feature I want to add here is a feature that allows us to delete transactions. For that,

LEt's go to our ListTile here in the transaction_list.dart file and there on the ListTile,

I did mention that on the ListTile, you can add a trailing widget as well. So if you add trailing here,

you can add a widget there which you want to show at the end of the ListTile and the trailing widget

I want to show here is an icon button with an icon of

delete, which is a trashcan trash icon.

So I'm creating that

icon button because when we press this button, the element on which we triggered it should be removed.

I'll give this a color, that icon and the color here will be received or taken from my theme and there,

I'll take the error color.

Now we haven't set the error color and of course you could do that in your theme, there in the main.dart

file, besides setting a primary swatch and accent color, you can also set an error color but the

default here is red already, so you don't need to set that but you could if you wanted to and especially

if you want a different color than red of course

and then onPressed, I of course want to trigger a method that removes that element. Now for the moment,

let's do nothing so that we can see whether it's displayed and that's looking good,

we have that

icon here, we can press it,

so let's now also make sure that when we press it, we do delete this transaction. Since we managed the

transactions in main.dart, here in our MyHomePage state class where we also have the add new transaction

method,

this is also where we should have the delete transaction method.

So let's add delete transaction here, doesn't need to return anything because the place where we call

it doesn't really need a return value

and now the question of course is, how can we delete a transaction? How do we identify a transaction?

Now of course you could identify a transaction by its name, by its title

but the problem is the title here is not necessarily unique,

so is the amount and the date, all of that could be duplicated.

We could have the same transaction twice on the same day with the exact same amount,

that would be valid.

So rather than doing it like this and trying to delete the transaction by name, we can use another trait

of our transaction. If we have a look at the model, we see that we have an ID there and the ID should

be unique

and indeed, it is, at least almost, of course in our app here in the main.dart file when we create a new

transaction, we do generate the ID based on the current timestamp

and in theory, we could have the same transaction added twice at the exact same time

but in reality in this app that won't really happen.

So it's a good enough ID for now and therefore we can use this ID as an identifier.

So when this method here gets called, delete transaction, I expect to get that ID as an argument by

whoever is calling that,

so whoever calls this method needs to provide the ID of the transaction that should be deleted

and then in here, we can delete this transaction by that ID.

For that, we will call set state because we certainly will need to rebuild our UI thereafter and inside

of that function you pass to set state, we can reach out to our user transactions, to our list of transactions

and there as you learned,

since this is a list, we have multiple methods that allow you to manipulate that list and generate a

new list

and I want to use remove where. This manipulates the existing list, just like add manipulates the existing

list and it removes an item where a certain condition is met.

Therefore we parse in a function and that function gets the element, each element of the list because

this runs this function on every element in the list

just like where did, so we get our transaction in here

and we have to return true if it is the element we want to remove

and that of course is the case if the ID of the element I'm looking at is the same ID as I'm getting

here.

So if tx.id is equal to ID, then I know this is the element I want to get rid of

and since we only have one expression here which value we return, you could also use the shortcut of

using that arrow without the curly braces and without the return statement and use this inline notation,

also without the semicolon and have this shorter syntax here, that's optional but you can use it here

because we have only one expression and we want to return the value and use that value of that expression.

So this allows us to remove an item with that ID,

now we need to call delete transaction and that happens from inside the transaction list.

So let's pass delete transaction to the transaction list

now here as a second argument maybe

and of course we now need to tweak the constructor of transaction list

now to accept that.

So here I now expect to get a function, delete tx, whatever you want to name it and I bind the second

argument I'm getting to this delete tx property here in the transaction list widget. And now delete

tx is a pointer at that delete function,

so in our transaction list we can now use it here

on that icon button to trigger that deletion.

Now important, binding it like this won't work because delete tx actually points at our delete transaction

method here and that requires an argument,

the ID of the transaction that should be deleted. The onPressed method by default doesn't pass any arguments,

so we would be missing that argument which we need. The solution is to wrap this into an anonymous function

so that we pass a reference to this function, to this anonymous function, to onPressed

and then when this anonymous function is executed in there,

we have our own function which we call and there we can now pass our own argument and the argument I

want to pass here is my transaction ID, so I can use transactions and then for the given index.id

and forward that. With that, let's give it a try.

Let's save it all and

let's try deleting the new shoes here and that works and you see the chart also updates.

So now, we have a set up where we can not only add transactions but where we can also delete them.