All language subtitles for 9. Building a Custom List Item

Our transaction cards don't really look that impressive

and we should certainly change this. To change this,

let's consider how a single transaction might look like here.

So we have our app here and up there,

we have the chart and down there, we have our list of transactions.

Now how should a single transaction look like? Now

obviously, there are dozens of ways of building this and structuring this but one possible way I could

come up with is that for each transaction, we maybe have the price here in a box on the left, almost like

an image,

so our price would be in here,

obviously not a dollar sign but a concrete amount, then next to it, we might have the title, maybe in

a fat bold text and below that, smaller and maybe like light grayish,

we have the date. Not too complex but should be pretty helpful.

Now how could we build this however? How do we build this thing here,

this container? The surrounding piece here, that can probably stay a card, we might want that slight

drop shadow here, we can even increase that with the help of the elevation argument. Inside of that card

and that's really how you should think about building user interfaces in Flutter, what's inside of that

card?

You might say we have three elements in there and that's correct

but how what's actually happening in there?

Well actually, we have two main elements here

sit next to each other,

we have two items here next to each other, so that here should actually be a row in there so that we

have two items next to each other because there is no other way of positioning three items like this

in Flutter other than with a row and in that row, we then have this first item here which could just

be a container,

so let me note this here, that thing here, that purple thing, that's a row, then this thing here might be

a container

and then last but not least, we're running out of colors here,

last but not least if I take that rows color here.

Last but at least, that thing here

so title and date, that of course is another column in there, right?

It's a column inside of our row because we have two items above each other. Columns are not just there

to position items on the overall page but also inside of other widgets, columns do nothing else than

take two or more widgets and position them above each other, no matter how much vertical space there

is.

Here, it's almost no vertical space but still, items above each other means a column. Items next to

each other, like here means a row.

That is how you should think about building user interfaces in Flutter

and that's what I want to build together with you

now. We will build this transaction card together with rows, containers and columns and text and so on. So

back in code,

let's build this.

We have our card and as we just saw when I sketched this, inside that card, we need a row because we

want to have two items next to each other.

So let's replace the text here with a row

and now the row just as a column takes children, two or more widgets which are now placed next to each

other and that's the difference to the column of course,

there items are placed on top of each other or above each other.

Now in that row, we wanted to have that first item which we said could be a container that holds the

price,

so here why don't we add a child which is our text which is tx.price and therefore not price,

tx.amount and therefore the amount of our transaction

and here, I'm getting an error because that's a double

but text actually expects a string here,

so we need to convert the double to a string and we do this by calling to string there. On every double,

you can call to string, on every number you can call to string, actually on every object in Dart,

you can call to string to get a string version of it. Of course for some objects,

that makes more sense, like doubles or numbers in general and for other objects like your own transaction,

to string might just give you some unusable output. Here however we'll get the number as a string which

is really useful and therefore, we already have that container.

Now next to that container in our row here, I want to have that column here,

so that column where we can have the title on top and below that, the date. So let's use column

and then here, again we might have two texts,

so we have the text for the title and then we can copy that to also have the text for the date.

Now date is of type datetime, which also is not a string but we can use to string here to convert this

to a string and see what that gives us. Let's save that and see what we get.

Okay, the rough layout is there, obviously super ugly but we'll get there.

We see the price,

we see the title and below the title, we see the date. The date of course is not nicely formatted,

it's not human readable but we will change that.