All language subtitles for 42. Adding a ListTile Widget

I'm quite happy with our current state but in the transaction list as I mentioned, of course you can

keep your custom list item here which we built

if you prefer that, I want to show you an alternative though and that alternative, here instead of using

a card with our custom stylings and our custom setup, that alternative is a widget built into Flutter

which you often use in conjunction with lists but you don't have to use it in conjunction

and that would be a ListTile widget. Again, that's built into Flutter and that's a nicely preconfigured

and styled widget with a certain layout that fits particularly well into lists. On your list

tile, you can set up a couple of things,

for example you can set up a leading widget which means a widget that is positioned at the beginning

of that ListTile

and there, we could use yet another built-in widget,

the CircleAvatar, which is a rounded widget that can hold a content often, it's used to hold images but

here we'll use it to hold our amount spent

and it simply looks nice.

So here, we can assign a radius of let's say 30, that defines how rounded it is and give it a child and

that child here can be our text with our transaction amount.

So again, here using a dollar sign which we want to output and therefore which we escape and then a dollar

sign for our string interpolation where I use transactions for the given index and there, the amount

and if we save that, now our list items look like this. For very long numbers, it's not looking that great

and therefore, you learned what we can do,

we can wrap this with a new widget and that could be our FittedBox here

and if we wrap that with a FittedBox, now longer items shrink a bit.

Now still some spacing would be nice and therefore we can then also wrap our FittedBox here with

another widget, with a padding widget and give it a padding of let's say EdgeInsets.all 10 maybe,

a bit too much,

let's go with 6

and yes, super big numbers really don't look that good but it's unrealistically huge number for

this app,

so this should be fine.

So that's our leading part but of course that's not all that should be output on the ListTile.

Besides the leading element, we can also have a title, which is an element in the middle and there, I'd

like to have my text with my transaction title. Now we can also set a style and again, I'll get that style

here from my theme.

So here I want to get my text theme and there,

the title theme and it's not i but index.

If we add this here, this title assignment with our text widget using the title theme, then we have

the title again. Besides the title,

you can also add a subtitle to the list tile which is basically some text shown below the title.

So here again I want to show some text and there, I'll refer to transactions index and then my date.

Date of course is a datetime,

I want to have a human readable date and therefore here, I'll use date format for this formatted with a year,

a long month and then a day and then I call format and pass that date as a value to generate a string

based on that date and with this adjustment, we now have the date below that and you're hopefully seeing

how this is taking shape.

Now we could even add a trailing element, so an element at the end of that ListTile and often there you

have buttons, icon buttons like a trash icon for deleting the item and so on

but for here, the only thing I want to do here, I want to wrap this into a card

actually and on that card, I'll set up some margin in all directions,

actually not in all directions but symmetrically in the vertical direction 8 and in the horizontal direction,

maybe 5, a bit less, so there is some spacing between the list items as well and a little background color

and I'll also add an elevation of 5 here to every card.

And now with that, this is how the transactions look like, not too shabby and up there,

we have our chart. Now of course, feel free to fine tune this a bit more if you prefer a different look,

I will also revisit the general layout, for example that we have this empty space down there, I'm not

too happy about that. We'll fix this later once we learned how to work with the device size and how to

find out how big the device is we're running on. For the moment, let's leave it as it is and let's indeed

have a look at how we can adjust our app to different device sizes and also to different operating systems,

namely Android and iOS.