Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,300 --> 00:00:08,840
To use this space more efficiently, we need to inform these child elements in our chart because this
2
00:00:08,840 --> 00:00:11,260
chart bar is a child element of the row,
3
00:00:11,320 --> 00:00:16,040
how they should spread out. Now in the row of course, we can say
4
00:00:16,040 --> 00:00:18,140
main axis alignment
5
00:00:18,140 --> 00:00:25,990
because in a row the main axis alignment is left to right should be main axis alignment space around maybe.
6
00:00:26,990 --> 00:00:28,150
If we do that,
7
00:00:28,280 --> 00:00:37,350
that looks way better already. I also however want to make sure that my items here, if I add a really
8
00:00:37,350 --> 00:00:41,050
large amount here, don't change their size,
9
00:00:41,070 --> 00:00:45,290
Instead they should stay in their size and should rather shrink the label here and
10
00:00:45,690 --> 00:00:52,120
that can be achieved by going to the chart bar and then by wrapping this column here with another widget.
11
00:00:52,410 --> 00:00:56,980
I'm wrapping this column here because my chart bar is the child of the row here and I could therefore
12
00:00:56,980 --> 00:00:59,100
also wrap the chart bar here if we wanted to,
13
00:00:59,290 --> 00:01:00,680
let's actually do it here.
14
00:01:00,730 --> 00:01:05,740
So whatever you do, you should wrap the widget which in the end is a direct child of the row
15
00:01:06,950 --> 00:01:18,190
and I'll wrap this widget here with a new widget, with the flexible widget. Now flexible takes a fit argument
16
00:01:19,120 --> 00:01:27,660
and there, you pass a Flexfit value to enum where you have two values.
17
00:01:27,690 --> 00:01:36,180
Now let's try loose and now you see already, we have a line break here because with loose, we already restrict
18
00:01:36,180 --> 00:01:38,300
how much space this may take a bit
19
00:01:39,630 --> 00:01:48,730
but it's better with tight. Now we force the child as the text here says to use its available space
20
00:01:49,150 --> 00:01:56,090
and the available space here by default is the same space for every item in our row.
21
00:01:56,090 --> 00:02:01,790
You can change this with the flex attribute here on flexible if you would wrap every child individually,
22
00:02:01,940 --> 00:02:05,320
which is not possible here because here we're generating all the childs,
23
00:02:05,360 --> 00:02:09,800
so every child I generate has the same flexible setting
24
00:02:09,800 --> 00:02:17,030
but if you set flex here to two on one child and one on another child, then the child with two will get
25
00:02:17,030 --> 00:02:20,530
twice as much space in the row as the child with one.
26
00:02:20,540 --> 00:02:26,480
So with flex and the values you assigned there, you can distribute the available space in a row or
27
00:02:26,480 --> 00:02:33,110
column between the children and you do this by assigning a number to the flex value and then these numbers
28
00:02:33,110 --> 00:02:39,230
are added up and each child then receives its share of the total sum based on the value you added.
29
00:02:39,230 --> 00:02:43,190
However the default is that every item has exactly the same space and that's perfect,
30
00:02:43,190 --> 00:02:45,770
that's what I want here. With FlexFit.tight,
31
00:02:45,770 --> 00:02:52,130
we then ensure that the child also can't grow because by default every child has the same space but
32
00:02:52,340 --> 00:02:57,310
child can grow and take some space away from other children if they need to.
33
00:02:57,350 --> 00:03:05,060
With tight, we force a child into its assigned width or into its assigned size and it can't grow
34
00:03:05,060 --> 00:03:07,070
and that's exactly what I want here.
35
00:03:07,190 --> 00:03:11,210
Since it can't grow, now the label wraps here which of course also is ugly
36
00:03:11,210 --> 00:03:14,210
but our chart looks better. Now to avoid
37
00:03:14,210 --> 00:03:21,560
the line wrapping here, we can go into our chart bar and we have to make sure that this text here basically
38
00:03:21,560 --> 00:03:27,760
shrinks if we are running out of space and that can be achieved by wrapping the text with another widget
39
00:03:27,760 --> 00:03:37,120
that's built into Flutter and that's the FittedBox widget. The FittedBox widget forces its child
40
00:03:38,270 --> 00:03:39,640
into the available space
41
00:03:39,680 --> 00:03:45,680
and if that child is a text, it even shrinks the text. So it creates a widget that scales and positions
42
00:03:45,680 --> 00:03:47,240
its child within itself.
43
00:03:47,390 --> 00:03:49,480
So the FittedBox prevents that
44
00:03:49,490 --> 00:03:57,740
this text keeps its original size and adds a line wrap, instead it says no you will not grow in any way,
45
00:03:57,890 --> 00:04:04,550
rather you should instead shrink so that you fit into the box. And therefore now with FittedBox, our label
46
00:04:04,550 --> 00:04:09,810
shrank, which is in my opinion better than having a strange line breaks here.
47
00:04:10,870 --> 00:04:13,070
And with that, I'm very happy with the chart,
48
00:04:13,070 --> 00:04:18,920
the only remaining thing I want to do is I want to add some padding around my bars here so they're not
49
00:04:18,920 --> 00:04:24,920
sitting on the edges of my card and that can be done in the chart widget of course. Here on the row which
50
00:04:24,920 --> 00:04:34,830
is the child of the card, let's surround it with a container to add some padding like this, with
51
00:04:34,840 --> 00:04:42,500
EdgeInsets.all of 10 maybe and now we have some spacing here, which looks way better.
52
00:04:42,580 --> 00:04:44,150
Now a little side note here,
53
00:04:44,470 --> 00:04:52,270
if you find yourself creating a container only to add padding, then there is a replacement,
54
00:04:52,270 --> 00:04:58,060
you can then just use the padding widget and they're basically simpler containers which can only be
55
00:04:58,060 --> 00:04:58,920
used to add padding.
56
00:04:58,930 --> 00:05:03,030
So if you only need that, you can consider using padding widgets instead of a container,
57
00:05:03,070 --> 00:05:07,690
you still of course need to set the padding property to tell the widget how much padding you want to
58
00:05:07,690 --> 00:05:08,690
add.
59
00:05:09,160 --> 00:05:11,770
And with that, this is the final chart,
60
00:05:11,770 --> 00:05:18,010
now I want to fine tune the list items a bit more and once we're done with that, let's have a look
61
00:05:18,010 --> 00:05:23,620
at responsiveness and also how we can use different styles for iOS and Android devices.
6915
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.