All language subtitles for 34. Planning the Chart Widget

Now with the application taking a lot of shape, it's time to finally work on a chart because that's the

ugly piece that really doesn't fit into our application at all.

Now for that, let's add a new widget and I'll name it

chart.dart file because it will in the end display a chart about our recent transactions and that

can actually be a stateless widget because we won't need to change any data in there, it'll just output

some visual data about the transactions we added to our app.

I'll name the widget chart because in the end that is what it is

and of course just as a side note, there are official charting packages or third-party charting packages

you could add to Flutter projects if you need more complex charts

but that basic chart which we'll build here or that basic output we'll build here won't need such a package

but you can bring in such packages if you need more complex charting functionalities.

Now what do we need in here or how do we build this chart now?

I want to have that chart wrapped in a card and I'll give this card an elevation level of let's

say 6 to have a nice drop shadow

and on that card I also want to have a margin around so that there is some space around our chart. We

can add that with EdgeInsets as you learned

and I'll add a margin in all directions of let's say 20,

we can always shrink that down if it's too much.

Now of course we need a child and that will be our actual chart

and for that, let's again analyze how such a chart should look like. It's time for my awesome drawing

skills again.

So in our application here right, we'll have that chart area here at the top

and my idea here is that we have a couple of bars let's say for the last seven days,

so let's see if I can squeeze seven bars in here,

yes almost.

So we have seven bars here, one for each day in the last week, with some labels for the weekdays, so Monday,

Tuesday, Wednesday and so on,

so a single character for the weekday below that and above the amount of dollars that we spend on the

day, which can be zero if we spend nothing or

a different amount

if we spend something and then in that chart, I want to have or in that bar, I want to have some indication

of how much that amount that we spent on that day is of the total amount we spent on the overall week.

So if we spend 50 on Monday and 30 on Tuesday and 0 on all other days, then we had a total spending of

80, 50 plus 30

and here we have $50 of $80,

so we might have something like this, a significant amount above 50% of the bar

and here we might have $30 of $80 total spending,

so we're around a third of that bar.

That's my idea of how this should be structured.

Now what will we need here? This here, the red part,

that's our card,

we already have that.

Let me pick a different color, blue.

Now in that,

we'll certainly need a row and of course, that row does not go beyond the boundaries of the card,

I'm just drawing it like this so that you can see it,

so we need a row here for our different bars. Each bar,

so each bar here is then a column because we have the dollar sign, then the bar itself and then the label

and the bar inside of the bar so to say,

so that part here where we have that yellow filling, that of course again will be a container with a

partial background,

we'll see how we can draw, how we can fix this, how we can build this in Flutter.

So that's the rough layout,

let's now build that.