Original subtitles

Now that we had some fun with column, main axis alignment and cross axis alignment,

let's take a step back and let's continue working on our actual application that we want to have. For

that,

we of course need our chart at the top and below that, we need our list of transactions.

Right now, we have no way of adding transactions through our app, of course we'll add such a way later

but since we don't have that at the moment, let's add a dummy list of transactions, shall we?

And for this in my widget here, I will add a final list

and now the question is what is a transaction?

And we could use a map here because a transaction is certainly not just a string or a number,

it's not just that the value, the amount we spend,

it's also not just a title,

it's the combination of the title and the value we spent and we could absolutely use a map for that,

it's basically what we did in the first app in this course, there we used a map.

A map would be fine but here, I actually to take a different route and create my own class and therefore

my own object blueprint for this. For that in the lib folder,

let's add a new file and I'll name this transaction.dart because in there, I'll define how a transaction

should look like. This will be a normal class

and now this will be named transaction and it will not extend stateless or stateful widget because

this transaction class here will just be a blueprint for a normal Dart object which I want to use in

my Dart code.

I don't want to use this as a widget that should be rendered, we'll of course also add our custom widgets

throughout this module

but this here is not one of them.

Instead here, I simply want to define how a transaction should look like

and therefore here, I'll first of all define which properties or fields, which variables a transaction

has.

Now let's say each transaction has an ID which is actually a string, something like that, a unique ID

that identifies each transaction.

In addition to that add transaction, we'll certainly have a title which allows us to find out what this

amount we spend is all about and that is also a string

and of course we also need an amount,

so how much did we spend on the item we have here. Now

the amount will be a number and therefore we could use num

but I want to be more specific than that.

Is it an int or is it a double?

Well, obviously that depends on your requirements and what you want in your application

but I'd say for money that we spent, a double makes more sense because we often have amounts like

99.99,

so here I'll have my property of type double. Now last but not least, I also want to save the date on

which we did our transaction, on which we made that transaction and that will be of a special type, the

type

datetime. Now datetime is a type that's built into Dart,

it's essentially based on a predefined class Dart ships with, you could say. It's not a primitive, like string

or double or int or boolean,

it's a bit of a more complex object but it's nonetheless an object or a class that's built into Dart

so we don't have to define it ourselves

and here I'll name this date,

so that's my property name.

These are the four properties that make up a transaction.

Now to conveniently create such a transaction, let's add a constructor here so that we can use the transaction

here anywhere, this transaction class to conveniently create new objects based on it.

Now to this constructor, we of course have to pass the values for this transaction and there, it's up

to you whether you want to use positional or named arguments

but since we have four fields that need to be populated, four properties, I'll go for named arguments

because I think that makes it a bit easier to create such a transaction,

we don't have to learn by heart or find out which argument goes into which position.

So I'll wrap this into curly braces,

this is the syntax you need to add named arguments and then we accept the value for the ID and you

might remember, this is the syntax that Dart understands to automatically bind the argument for the

name ID to equally named property ID

because of this dot and then we do the same for this title,

this amount

and of course also this date.

So now we have these four named arguments which are automatically bound to their respective properties

here.

These properties should never change thereafter

and therefore, I'll all mark them as final here, which means their runtime constant, they get to their value

when this transaction is created but the value thereafter never changes.

So with that transaction class created, we can go back to the main.dart file and in the MyHomePage class,

I'll create a list of transactions.

So now we can use transaction, that class we just created, as a type here for our list and that tells

Dart that this list here which I'll name transactions, that this variable will hold a list of transactions,

that is how you should read this.

It's a list of transactions

and here, it's an empty list.

Now important, to use the transaction class as a type here or as anything here in the main.dart file,

you have to add an import and my IDE automatically added it but not in the best way,

you should simply import ./transaction.dart.

So import that newly created transaction.dart file and that unlocks every none private class and so on

which you have in that file,

so therefore now we can use the transaction class here.

Of course, having an empty list here is not that helpful though,

I want to have some transactions to start with.

So here, I'll add transaction, using my class as a constructor now by adding parentheses and now we have

to assigning an ID, a title and so on.

So my ID here could be t1,

it's up to you,

title could be new shoes and the amount should be a double, could be 69.99.

Now we haven't specified a currency here,

for this application, I'll assume it's always dollars,

you can of course assume any currency you want.

Last but not least, we need to set a date

and here, I will use datetime,

this built-in class and then now which is a constructor offered by datetime that builds a new datetime

object based on datetime class with the current timestamp which will do for now.

So now we have this transaction in here,

one tiny tweak in the transaction class, all these properties here are required and therefore, we should

add @required in front of each property.

This however is not a decorator that's built into Dart,

so in order for this to work, we need to import something from Flutter because Flutter is actually the

framework that introduces the required decorator and

we do this by importing package:flutter here in the transaction.dart file and there, foundation.dart.

You could also use material.dart because that internally is based on foundation.dart but foundation.dart

is in the end the file that exposes @required.

So now we made sure that these are required and that we would get an error if we tried to create a transaction

without one of these four properties and

with that, let's simply create one other transaction, so that we have at least 2 displayed

in our list by adding this one here and maybe here, we have our weekly groceries which we bought, maybe that

cost us 16.54 or 53 and I'll also take the current timestamp here, later of course we'll

make sure that the user is able to choose the timestamp.

So with that, we have our list of transactions.