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:04,430
So this is taking shape,
2
00:00:04,430 --> 00:00:05,560
we have our input area,
3
00:00:05,570 --> 00:00:11,640
we can add transactions like new shoes for $12.
4
00:00:11,720 --> 00:00:14,390
Now there are a couple of things I want to change though,
5
00:00:14,390 --> 00:00:18,890
for example when I enter my amount here, it would be nice to have a keyboard where we can only enter
6
00:00:18,890 --> 00:00:21,460
numbers and where we can't even enter text here.
7
00:00:22,490 --> 00:00:28,120
In addition, it would be nice that when I hit this button here, this confirm button on my inputs,
8
00:00:28,280 --> 00:00:36,130
I do actually trigger add transaction if a value for title and for amount is provided. And last but not
9
00:00:36,130 --> 00:00:42,610
least, here when I output my amount, it would be nice to always see two digits, not more than that and
10
00:00:42,610 --> 00:00:49,350
not less because right now I can also enter something like this and of course that looks super ugly.
11
00:00:49,620 --> 00:00:56,010
So to fix or to change this, let's first of all go to new_transaction.dart which is where we have these
12
00:00:56,010 --> 00:01:02,360
inputs and to make sure that we can only enter numbers on the second input here and there, you can change
13
00:01:02,360 --> 00:01:11,990
the keyboard type and that takes a text input type which in the end is a class and there you have a
14
00:01:11,990 --> 00:01:13,990
couple of static properties again,
15
00:01:14,120 --> 00:01:20,060
again static properties on classes, that's a bit like enums, just having more complex values than just
16
00:01:20,060 --> 00:01:20,960
numbers
17
00:01:21,230 --> 00:01:27,470
and there you can set this to datetime which is a perfect input if user should enter date, email address
18
00:01:27,500 --> 00:01:32,450
which is great for entering email addresses because the @ sign is easily available and so on.
19
00:01:32,450 --> 00:01:33,800
But here I want number
20
00:01:36,600 --> 00:01:37,200
and with that
21
00:01:37,200 --> 00:01:44,480
if we now save this, if I tap in here, we now get a number keyboard which is of course good. In addition,
22
00:01:44,630 --> 00:01:54,340
to make sure that we also submit our form when we press the done button, we can add the onSubmitted
23
00:01:54,430 --> 00:01:55,820
listener here.
24
00:01:55,870 --> 00:02:00,390
Now I want to do the same as I do down here, so I can of course simply copy that function
25
00:02:00,520 --> 00:02:08,320
but if you find yourself copying a lot of code, it is always a good idea to refactor it into a single
26
00:02:08,410 --> 00:02:11,920
named function which you then can call from all these places
27
00:02:11,920 --> 00:02:14,290
so that when you ever change something in that function,
28
00:02:14,290 --> 00:02:18,750
you don't have to change it in three different places but only in one place.
29
00:02:19,000 --> 00:02:24,700
So let's grab this logic here where we call addTx and let's add a new function here in our new transaction
30
00:02:24,700 --> 00:02:27,730
widget, a new method to be precise.
31
00:02:27,730 --> 00:02:37,290
It will not return anything, I'll name it submit data, the name is up to you though and in there, I will
32
00:02:37,290 --> 00:02:42,270
call addTx and forward the title controller and the parsed amount.
33
00:02:42,270 --> 00:02:46,190
Now down there, I call submit data
34
00:02:46,200 --> 00:02:53,160
therefore or I point at it without parentheses because I don't want to execute it in line, I only want to
35
00:02:53,160 --> 00:02:58,050
pass a pointer at this method so that it is executed when the button is pressed.
36
00:02:58,050 --> 00:03:04,920
However here, onSubmitted actually gives us the value the user entered thus far as a value,
37
00:03:04,920 --> 00:03:10,380
so here we have to use a slightly different syntax, provide an anonymous function where we get that value
38
00:03:10,740 --> 00:03:13,690
and I don't really use it but still I need to accept it
39
00:03:13,770 --> 00:03:15,690
otherwise Flutter will complain.
40
00:03:15,690 --> 00:03:21,500
An alternative would have been to not use an anonymous function here but accept that value up here,
41
00:03:21,510 --> 00:03:22,670
then this would also be fine,
42
00:03:22,680 --> 00:03:26,600
you just need to have a function that in the end reacts to onSubmitted,
43
00:03:26,640 --> 00:03:29,470
that does take that value even if you don't use it
44
00:03:29,520 --> 00:03:35,820
but since I don't plan on using it, the approach I like more is to not take the argument up here but
45
00:03:35,820 --> 00:03:41,130
instead use an anonymous function down there and add a underscore here which is kind of a convention,
46
00:03:41,190 --> 00:03:43,920
not a hard rule but a convention to signal
47
00:03:43,920 --> 00:03:46,830
I get an argument but I don't care about it here,
48
00:03:46,860 --> 00:03:50,090
I have to accept it but I don't plan on using it,
49
00:03:50,130 --> 00:03:54,530
so instead of giving it a more meaningful name, I add an underscore here to indicate
50
00:03:54,570 --> 00:03:56,160
that yes, I don't use it.
51
00:03:57,060 --> 00:04:08,010
So now this is the code I can use for onSubmitted, on all my or on both of my text fields here and
52
00:04:08,070 --> 00:04:10,190
also when the button is pressed down there,
53
00:04:10,260 --> 00:04:18,630
I want to call submit data. Another advantage of not accepting a value in submit data is that here for
54
00:04:18,630 --> 00:04:20,130
the button, I wouldn't get one,
55
00:04:20,190 --> 00:04:25,040
so here I would have had to manually provide one
56
00:04:25,200 --> 00:04:31,620
by calling this with something like this, if we edited submit data to accept a string.
57
00:04:31,620 --> 00:04:37,650
So that's why this approach of not accepting a string in submit data but instead, dumping the value
58
00:04:37,650 --> 00:04:40,080
here is preferable.
59
00:04:40,080 --> 00:04:43,020
So now we submit that whenever one of these buttons is pressed,
60
00:04:43,050 --> 00:04:48,900
of course the button could be pressed before both a title and an amount have been entered.
61
00:04:48,900 --> 00:04:53,000
So what I'll do first is I'll extract that data, entered
62
00:04:53,010 --> 00:04:59,310
title is titleController.text and here I'll have my entered
63
00:05:01,670 --> 00:05:09,290
amount which is amountController.text and I'll do the double conversion right here already, so
64
00:05:09,290 --> 00:05:10,010
double.parse,
65
00:05:13,080 --> 00:05:16,350
I'll call it here, down there
66
00:05:16,350 --> 00:05:24,830
I will therefore just refer to my entered title and then here to the entered amount.
67
00:05:24,830 --> 00:05:28,060
But first of all I want to check whether we do have values in here,
68
00:05:28,190 --> 00:05:30,840
so I'll add if entered
69
00:05:30,860 --> 00:05:33,040
title is empty,
70
00:05:33,080 --> 00:05:42,200
so if the user did not enter anything there or if entered amount is smaller or equal to zero which also
71
00:05:42,200 --> 00:05:43,010
would be invalid,
72
00:05:43,010 --> 00:05:48,410
I also don't want negative amounts, then I'll just return here and if I just return here, then this code
73
00:05:48,410 --> 00:05:53,070
will not execute because return also stops the function execution,
74
00:05:53,090 --> 00:05:56,440
it means the code after return is not reached.
75
00:05:56,480 --> 00:05:58,340
That's also something important,
76
00:05:58,340 --> 00:06:00,380
return stops the function execution,
77
00:06:00,380 --> 00:06:01,580
this code is not reached
78
00:06:01,580 --> 00:06:09,240
if this here is called, so if we make it into the if block, we'll not try to add a new transaction. So
79
00:06:09,240 --> 00:06:13,040
therefore here if I hit add transaction with no values entered,
80
00:06:13,080 --> 00:06:18,090
I actually get an error because I try to convert something to a double which is not convertible
81
00:06:18,930 --> 00:06:26,700
but if I try to for example submit -1 here and I hit add transaction, I don't get an extra error
82
00:06:26,700 --> 00:06:28,410
but we also don't get the transaction,
83
00:06:28,560 --> 00:06:36,270
so stopping this works. The same is true if I enter a valid amount for my amount here but not for my
84
00:06:36,270 --> 00:06:37,170
transaction,
85
00:06:37,170 --> 00:06:41,390
if I hit this done button or add transaction, this also doesn't get added,
86
00:06:41,430 --> 00:06:47,550
so our little dummy validation here works. Now with that little dummy validation added here, we can almost
87
00:06:47,550 --> 00:06:52,680
test this. One mistake I just spotted is, of course here when I use this approach of using an anonymous
88
00:06:52,680 --> 00:06:58,470
function, here inside of the function body, we then have to call submit data like this,
89
00:06:58,470 --> 00:07:03,540
otherwise this will not execute because now this anonymous function is passed as a reference to onSubmitted,
90
00:07:03,540 --> 00:07:08,400
the reference to this anonymous function to be precise, inside of that anonymous function, when it
91
00:07:08,430 --> 00:07:13,590
executes, we have to manually trigger our function. Only here for onPressed where we don't have a wrapping
92
00:07:13,590 --> 00:07:14,570
anonymous function,
93
00:07:14,610 --> 00:07:21,350
we just pass the reference to our own function. And with that if we save that and we go back to our page here,
94
00:07:21,360 --> 00:07:22,670
if I enter something valid here
95
00:07:22,680 --> 00:07:26,720
but let's say I have -10 down there and I hit this button,
96
00:07:26,730 --> 00:07:31,500
you see it doesn't get added but if I enter something valid here and I use this confirm button, it
97
00:07:31,500 --> 00:07:32,250
does get added.
98
00:07:32,250 --> 00:07:34,150
So now we can use this as well
99
00:07:34,200 --> 00:07:39,900
and we have some basic validation in place. Now regarding the output of our prices here,
100
00:07:39,900 --> 00:07:45,970
for that we can go to our transaction list which is where we do output all these transactions and therefore
101
00:07:46,050 --> 00:07:47,670
the transaction amount.
102
00:07:47,670 --> 00:07:52,080
In the end what I want to do here, on amount we can call to string
103
00:07:52,080 --> 00:07:54,080
but I mentioned that we don't have to do that
104
00:07:54,150 --> 00:07:55,790
if we use this interpolation
105
00:07:56,040 --> 00:08:03,870
but there is a special kind of to string, you can use to string as fixed and then define how many decimal
106
00:08:03,870 --> 00:08:04,790
places you want to show,
107
00:08:04,790 --> 00:08:11,730
for example 2 and if you use this, if you use to string as fixed 2, then every value has exactly two
108
00:08:11,730 --> 00:08:12,810
decimal places,
109
00:08:12,810 --> 00:08:20,370
no matter if you only entered one or none or if you possibly entered a lot, then you see this gets rounded.
110
00:08:20,460 --> 00:08:25,170
So this is really convenient to have a nice user interface where we don't have too long numbers or too
111
00:08:25,170 --> 00:08:25,950
short numbers.
11744
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.