All language subtitles for 38. Creating Bars for our Chart

To get the grouped and summed up transactions on the screen, here in the chart.dart file, in the row where

I output my bars or where I plan on outputting my bars,

the goal now is to generate the children here for that row based on the grouped transaction values because

that will be exactly seven items, since we generate seven items and we need these seven bars with all

the information about the transactions for that day and so on. Hence down here, we can refer to grouped

transaction values which is a list and map this into a list of widgets

and as always, on map, you need to call to list in the end.

Now here we have a function that executes on every item in that grouped

transaction values list and that will receive the data or whatever you want to name it, that name is

up to you for every element here.

In there, we need to return a widget and we have no widget for that bar yet, we haven't created a widget

that could be a bar in our chart.

So for the moment, we can return some text here, so start and simply output data day here, which

should be the shortcut for the weekday, plus a colon,

plus data amount to string.

Now of course as you learned, concatenating data like this is not really necessary, shortcut is that you have

a string here,

then you use dollar sign and then here, data day.

However since it's more than just a single variable, you need to wrap that in curly braces and then we

have a colon,

this is now normal text and after that, we have again another string interpolation here where we access

data amount and this will automatically be converted to a string then. If we save this, I get an error

here,

let's ignore it for now, it's just some overflow here because we're entering too much data.

The important thing is that theoretically, it works though, super ugly but we see our weekday and then

we also see our value. A small correction from my side, the weekday here is not yet a single digit, a

single character. To turn it into a single character

however, we can go here, to the place where we generate that formatted weekday and use the substring method,

a default method you can use on any string in Dart, start at the first character which has the index

of 0 and end after the first character, so before the second character

and if you do that, now indeed you have TWT and so on.

So it's a tiny fix but of course, the more important fix is that we render real bar charts here, real bars

and not ugly text like this.

So let's build the bars for our chart and therefore, I'll add a new file in the widgets folder,

chart_bar.dart, that will simply hold the bars for my chart,

it'll be a stateless widget because we don't need to change any data in a single bar.

I'll name it

chart_bar, you can of course name your widgets whatever you prefer and in there as always, we import the

material.dart file, so that we unlock stateless widget and so on. Now in the chart bar,

I expect some information,

I of course want to have my label, so it detects the weekday.

I also expect a double, which is my spending and there,

I want to have the spending amount but I also and that's new, need a double which is my spending percentage

of total

if you want to name it like this. You could use a shorter name

but I want to be really clear what this is.

I need that, so that I know inside of that bar how I should colour the background because only a percentage

of the bar should have the background colour,

right?

So these are the three pieces of information I need

and here on my chart bar constructor, you could use named arguments,

I will go for positional arguments and I'll get the label,

the spending amount and the spending percentage of total. With that information, we can now work on the

bar and that will be a column here because we have three items on top of each other or above each other,

so let's add children here and the topmost item is, let's say the amount we spent on that day. So therefore

here, that can be some text and the text I want to have in here should have a dollar sign and we need

to escape that

as you learned, so \$ and then a string interpolation with $

where I use my spending amount but there I want to call toString as fixed to remove all

decimal places by setting them to zero so that I have no decimal places here and I only show the

rounded integer value so to say. So that's the topmost element, the text with the dollar signs.

Then let's say we have a sized box to add some spacing, maybe 4 pixels and thereafter, a container, that's

our main bar. This container might have a height of let's say 60 pixels and a width of maybe 10 and then

the child should be a background that is filled to different amounts,

we can fill that background fractionally so to say. Let's take care about the child in a second,

for now let's add null here. After the container,

I'll have another sized box here with let's say a height of 4 to add some spacing and below

that, a text with my label, which holds the weekday. So now back to that container,

how can we give this a background that's partially filled? For that

let's use a new widget which I mentioned earlier on a slide but which we haven't used yet and

that's the stack widget. The stack widget allows you to place elements on top of each other and with

top, I mean in like a three dimensional space,

so not on top of each other like a column but really overlapping each other.

It also takes a children argument which takes a list of widgets and now the first widget you add here

will be the bottommost widget.

This should be a container with a decoration which is a box decoration object

where I want to assign a border, let's say with border

all in all directions of a gray color

and here I'm not using the theme because this is really the only widget where I want this and the width

of one pixel,

I should also target my color here with colors gray.

Besides that, the decoration for this container should be that I have a background color, which maybe

is a light gray color.

I'll also select this manually here and I'll not use gray from colors because that's too dark, instead

here I'll use color and then that has a constructor from RGBO

and that means it's allowing us to mix a color with red, green, blue and opacity values and here if

you pass 220, 220, 220 and then 1, you should get a light gray color.

So this is basically RGBA values being used,

each value here can be between 0 and 255 and you can simply play around with that or use some color

mixers on the Internet to generate your favorite color in our RGBA code.

Last but not least, I want a border radius for some rounded corners

and here we need a border radius geometry, we create that however with the border radius class and there,

you can use the circular constructor to give that a border radius of let's say 20 pixels.

You can play around with that,

what fits your or what suits your needs,

maybe let's use 10. With that, we have the overall container,

that will be the main container

and now I want to overlay, hence the stack, another container which is smaller, which has less height

than 60 and which has a different background color

so that we have the effect of that container here being partially filled.

So therefore inside of the stack, above of that container because the elements here are from at the bottom

to at the top ordered,

so on top of that container, I'll add another container where I could manually set height differently

or I use a special widget Flutter has, the fractionally sized box and

this allows me to create a box that is sized as a fraction of another value.

There you need to add a height factor and that height factor should be a value between 0 and 1 where

one is 100% of the surrounding container,

so in this case, this is the surrounding container,

so one would give us a height of 60, zero would be zero and my percentage is of course my spending

percentage of total here,

I expect this to be a value between 0 and 1,

so I pass this here as a value to height factor. Now since I can't set a decoration on the fractionally

sized box but I can set a child, I'll add a container as a child here and that container now will have

the background color I want.

So I'll give it a declaration here, which is a box decoration, where I set the color, by the way you could set the

color directly on the container too with the color argument but I want to use the decoration because

I want to set more than just the color. So I'll set the color here and the color should be based on the theme

so let's select it from our context and there, our primary color maybe, of course it's up to you which

color you want to use and then set the same border radius as for the other border so that the two containers

which are placed on top of each other are matching up regarding their borders and their edges and with

that, we should have a bar that works.

Let's now try it and let's make sure we pass in a value for spending percentage of total.