WEBVTT

00:00.080 --> 00:00.880
Welcome back.

00:01.240 --> 00:07.520
Let's create a user interface to allow the user to enter those parameters and store them inside this

00:07.520 --> 00:08.240
data class.

00:08.240 --> 00:12.920
So here inside the screens, create a new Kotlin file.

00:12.960 --> 00:17.440
Name it as Car Features forum.

00:17.480 --> 00:24.400
This forum will allow the user to enter the input and the features of his car.

00:24.440 --> 00:28.960
It's of type composable function car features form inside it.

00:29.000 --> 00:36.560
Let's pass car features instance on value change or on features change.

00:36.560 --> 00:39.200
You can name it like this.

00:39.400 --> 00:45.080
Or it looks into the parameters car features and return nothing.

00:45.200 --> 00:47.640
So it's a lambda expression.

00:47.640 --> 00:49.800
Validation errors.

00:50.000 --> 00:53.120
Don't worry, we're gonna handle the errors later on.

00:53.160 --> 00:55.120
Okay so this is the string.

00:55.240 --> 00:58.960
And here let me start building our form.

00:59.000 --> 01:09.280
Start with card modifier fill maximum width elevation card default card elevation.

01:09.440 --> 01:18.950
For inside this card we need to create another layout, which is the column and inside this column create

01:18.990 --> 01:22.270
the first composable, which is text.

01:22.310 --> 01:24.110
Okay, this is the first text.

01:24.150 --> 01:25.630
Car specifications.

01:25.830 --> 01:31.390
Now let's scroll down to that feature text field.

01:31.390 --> 01:35.310
We need to create text fields and custom text fields.

01:35.310 --> 01:43.430
So instead of creating every time the same field, same text field specifications and composable, we're

01:43.430 --> 01:48.590
gonna create a new composable function called feature text field.

01:48.710 --> 01:56.150
In order to set the all text fields in the same position and the same design.

01:56.390 --> 01:59.230
Okay, so here are the text fields.

01:59.390 --> 02:02.390
Create a new composable file.

02:02.990 --> 02:03.750
New file.

02:03.750 --> 02:12.270
Inside this file we're going to create a new composable called feature text field inside it.

02:12.270 --> 02:16.350
Let's start by new composable feature text field.

02:16.390 --> 02:21.670
It takes a label value on value changed which is a lambda expression.

02:21.670 --> 02:28.230
Also, we can make a placeholder which is a string inside this composable.

02:28.390 --> 02:33.430
Let's start by creating the layout column inside the column.

02:33.590 --> 02:43.030
Specify the modifier and inside this column start with text, label style, typography, label medium.

02:43.030 --> 02:46.590
Or you can set it like body medium modifier.

02:46.790 --> 02:50.150
Remove it, set it to the color on surface.

02:50.150 --> 02:52.270
Now set the text field.

02:52.350 --> 02:54.470
Design the text field here.

02:54.510 --> 02:55.150
Value.

02:55.150 --> 02:56.190
Set it to value.

02:56.510 --> 03:01.110
Value changed on value change modifier equals to field.

03:01.110 --> 03:02.670
Maximum width.

03:02.710 --> 03:04.150
Single line true.

03:04.510 --> 03:10.670
The placeholder text, which is the placeholder parameter that we passed for this function.

03:10.710 --> 03:12.550
Keyboard options.

03:12.710 --> 03:23.390
Set the keyboard type to number colors equals to text field defaults dot colors okay, this is the text

03:23.390 --> 03:24.870
field feature.

03:24.870 --> 03:27.230
TextField composable function.

03:27.230 --> 03:31.630
It's a column containing a text and a text field.

03:31.630 --> 03:40.670
We're going to use this composable function inside this card in order to create the nine parameters

03:41.190 --> 03:41.870
text field.