Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,220 --> 00:00:07,620
Now that we had some fun with column, main axis alignment and cross axis alignment,
2
00:00:07,620 --> 00:00:14,160
let's take a step back and let's continue working on our actual application that we want to have. For
3
00:00:14,160 --> 00:00:14,370
that,
4
00:00:14,370 --> 00:00:21,610
we of course need our chart at the top and below that, we need our list of transactions.
5
00:00:21,630 --> 00:00:27,300
Right now, we have no way of adding transactions through our app, of course we'll add such a way later
6
00:00:27,870 --> 00:00:33,300
but since we don't have that at the moment, let's add a dummy list of transactions, shall we?
7
00:00:33,300 --> 00:00:40,350
And for this in my widget here, I will add a final list
8
00:00:40,710 --> 00:00:43,410
and now the question is what is a transaction?
9
00:00:43,500 --> 00:00:48,000
And we could use a map here because a transaction is certainly not just a string or a number,
10
00:00:48,000 --> 00:00:51,240
it's not just that the value, the amount we spend,
11
00:00:51,300 --> 00:00:52,830
it's also not just a title,
12
00:00:52,860 --> 00:00:58,710
it's the combination of the title and the value we spent and we could absolutely use a map for that,
13
00:00:58,720 --> 00:01:02,810
it's basically what we did in the first app in this course, there we used a map.
14
00:01:03,030 --> 00:01:08,520
A map would be fine but here, I actually to take a different route and create my own class and therefore
15
00:01:08,610 --> 00:01:13,560
my own object blueprint for this. For that in the lib folder,
16
00:01:13,560 --> 00:01:20,010
let's add a new file and I'll name this transaction.dart because in there, I'll define how a transaction
17
00:01:20,010 --> 00:01:22,530
should look like. This will be a normal class
18
00:01:22,530 --> 00:01:28,920
and now this will be named transaction and it will not extend stateless or stateful widget because
19
00:01:28,920 --> 00:01:34,800
this transaction class here will just be a blueprint for a normal Dart object which I want to use in
20
00:01:34,800 --> 00:01:36,120
my Dart code.
21
00:01:36,120 --> 00:01:41,980
I don't want to use this as a widget that should be rendered, we'll of course also add our custom widgets
22
00:01:41,980 --> 00:01:42,880
throughout this module
23
00:01:42,900 --> 00:01:45,010
but this here is not one of them.
24
00:01:45,090 --> 00:01:48,380
Instead here, I simply want to define how a transaction should look like
25
00:01:48,540 --> 00:01:54,930
and therefore here, I'll first of all define which properties or fields, which variables a transaction
26
00:01:54,930 --> 00:01:55,980
has.
27
00:01:56,070 --> 00:02:02,190
Now let's say each transaction has an ID which is actually a string, something like that, a unique ID
28
00:02:02,220 --> 00:02:04,710
that identifies each transaction.
29
00:02:04,710 --> 00:02:12,480
In addition to that add transaction, we'll certainly have a title which allows us to find out what this
30
00:02:12,630 --> 00:02:15,900
amount we spend is all about and that is also a string
31
00:02:15,900 --> 00:02:17,710
and of course we also need an amount,
32
00:02:17,760 --> 00:02:21,280
so how much did we spend on the item we have here. Now
33
00:02:21,300 --> 00:02:24,420
the amount will be a number and therefore we could use num
34
00:02:24,420 --> 00:02:26,750
but I want to be more specific than that.
35
00:02:26,760 --> 00:02:28,410
Is it an int or is it a double?
36
00:02:28,410 --> 00:02:35,160
Well, obviously that depends on your requirements and what you want in your application
37
00:02:35,230 --> 00:02:41,860
but I'd say for money that we spent, a double makes more sense because we often have amounts like
38
00:02:41,860 --> 00:02:43,760
99.99,
39
00:02:43,840 --> 00:02:54,100
so here I'll have my property of type double. Now last but not least, I also want to save the date on
40
00:02:54,100 --> 00:03:02,050
which we did our transaction, on which we made that transaction and that will be of a special type, the
41
00:03:02,080 --> 00:03:02,530
type
42
00:03:02,530 --> 00:03:08,110
datetime. Now datetime is a type that's built into Dart,
43
00:03:08,110 --> 00:03:15,400
it's essentially based on a predefined class Dart ships with, you could say. It's not a primitive, like string
44
00:03:15,400 --> 00:03:17,260
or double or int or boolean,
45
00:03:17,260 --> 00:03:22,460
it's a bit of a more complex object but it's nonetheless an object or a class that's built into Dart
46
00:03:22,480 --> 00:03:24,850
so we don't have to define it ourselves
47
00:03:25,210 --> 00:03:27,130
and here I'll name this date,
48
00:03:27,220 --> 00:03:28,800
so that's my property name.
49
00:03:28,840 --> 00:03:32,630
These are the four properties that make up a transaction.
50
00:03:33,010 --> 00:03:39,470
Now to conveniently create such a transaction, let's add a constructor here so that we can use the transaction
51
00:03:39,520 --> 00:03:44,730
here anywhere, this transaction class to conveniently create new objects based on it.
52
00:03:44,740 --> 00:03:51,040
Now to this constructor, we of course have to pass the values for this transaction and there, it's up
53
00:03:51,040 --> 00:03:54,520
to you whether you want to use positional or named arguments
54
00:03:54,520 --> 00:04:00,190
but since we have four fields that need to be populated, four properties, I'll go for named arguments
55
00:04:00,370 --> 00:04:03,870
because I think that makes it a bit easier to create such a transaction,
56
00:04:03,940 --> 00:04:10,230
we don't have to learn by heart or find out which argument goes into which position.
57
00:04:10,390 --> 00:04:12,380
So I'll wrap this into curly braces,
58
00:04:12,380 --> 00:04:18,580
this is the syntax you need to add named arguments and then we accept the value for the ID and you
59
00:04:18,580 --> 00:04:25,510
might remember, this is the syntax that Dart understands to automatically bind the argument for the
60
00:04:25,510 --> 00:04:29,460
name ID to equally named property ID
61
00:04:29,890 --> 00:04:34,460
because of this dot and then we do the same for this title,
62
00:04:34,460 --> 00:04:36,380
this amount
63
00:04:36,380 --> 00:04:39,420
and of course also this date.
64
00:04:39,540 --> 00:04:44,840
So now we have these four named arguments which are automatically bound to their respective properties
65
00:04:44,840 --> 00:04:45,630
here.
66
00:04:45,680 --> 00:04:48,760
These properties should never change thereafter
67
00:04:48,890 --> 00:04:55,700
and therefore, I'll all mark them as final here, which means their runtime constant, they get to their value
68
00:04:55,700 --> 00:05:01,220
when this transaction is created but the value thereafter never changes.
69
00:05:01,220 --> 00:05:07,370
So with that transaction class created, we can go back to the main.dart file and in the MyHomePage class,
70
00:05:07,850 --> 00:05:11,840
I'll create a list of transactions.
71
00:05:11,840 --> 00:05:19,200
So now we can use transaction, that class we just created, as a type here for our list and that tells
72
00:05:19,200 --> 00:05:27,970
Dart that this list here which I'll name transactions, that this variable will hold a list of transactions,
73
00:05:27,980 --> 00:05:29,580
that is how you should read this.
74
00:05:29,600 --> 00:05:31,670
It's a list of transactions
75
00:05:31,730 --> 00:05:33,140
and here, it's an empty list.
76
00:05:34,150 --> 00:05:40,950
Now important, to use the transaction class as a type here or as anything here in the main.dart file,
77
00:05:40,960 --> 00:05:47,530
you have to add an import and my IDE automatically added it but not in the best way,
78
00:05:47,530 --> 00:05:50,890
you should simply import ./transaction.dart.
79
00:05:50,890 --> 00:05:57,940
So import that newly created transaction.dart file and that unlocks every none private class and so on
80
00:05:58,060 --> 00:05:59,440
which you have in that file,
81
00:05:59,440 --> 00:06:02,620
so therefore now we can use the transaction class here.
82
00:06:03,010 --> 00:06:07,030
Of course, having an empty list here is not that helpful though,
83
00:06:07,210 --> 00:06:10,450
I want to have some transactions to start with.
84
00:06:10,450 --> 00:06:18,310
So here, I'll add transaction, using my class as a constructor now by adding parentheses and now we have
85
00:06:18,310 --> 00:06:21,140
to assigning an ID, a title and so on.
86
00:06:21,160 --> 00:06:22,950
So my ID here could be t1,
87
00:06:22,960 --> 00:06:24,050
it's up to you,
88
00:06:24,160 --> 00:06:34,070
title could be new shoes and the amount should be a double, could be 69.99.
89
00:06:34,070 --> 00:06:36,100
Now we haven't specified a currency here,
90
00:06:37,150 --> 00:06:40,480
for this application, I'll assume it's always dollars,
91
00:06:40,480 --> 00:06:43,990
you can of course assume any currency you want.
92
00:06:43,990 --> 00:06:46,260
Last but not least, we need to set a date
93
00:06:46,360 --> 00:06:49,030
and here, I will use datetime,
94
00:06:49,120 --> 00:06:55,810
this built-in class and then now which is a constructor offered by datetime that builds a new datetime
95
00:06:55,840 --> 00:07:02,190
object based on datetime class with the current timestamp which will do for now.
96
00:07:02,460 --> 00:07:04,310
So now we have this transaction in here,
97
00:07:04,500 --> 00:07:11,250
one tiny tweak in the transaction class, all these properties here are required and therefore, we should
98
00:07:11,250 --> 00:07:15,270
add @required in front of each property.
99
00:07:15,270 --> 00:07:18,620
This however is not a decorator that's built into Dart,
100
00:07:18,840 --> 00:07:24,840
so in order for this to work, we need to import something from Flutter because Flutter is actually the
101
00:07:24,840 --> 00:07:28,070
framework that introduces the required decorator and
102
00:07:28,080 --> 00:07:36,780
we do this by importing package:flutter here in the transaction.dart file and there, foundation.dart.
103
00:07:36,790 --> 00:07:43,000
You could also use material.dart because that internally is based on foundation.dart but foundation.dart
104
00:07:43,000 --> 00:07:46,110
is in the end the file that exposes @required.
105
00:07:46,750 --> 00:07:53,110
So now we made sure that these are required and that we would get an error if we tried to create a transaction
106
00:07:53,290 --> 00:07:55,750
without one of these four properties and
107
00:07:55,750 --> 00:08:00,940
with that, let's simply create one other transaction, so that we have at least 2 displayed
108
00:08:00,970 --> 00:08:11,180
in our list by adding this one here and maybe here, we have our weekly groceries which we bought, maybe that
109
00:08:11,180 --> 00:08:20,240
cost us 16.54 or 53 and I'll also take the current timestamp here, later of course we'll
110
00:08:20,240 --> 00:08:23,340
make sure that the user is able to choose the timestamp.
111
00:08:23,390 --> 00:08:25,760
So with that, we have our list of transactions.
11586
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.