WEBVTT 00:00.080 --> 00:01.120 Welcome back! 00:01.160 --> 00:07.440 We created this feature TextField composable containing text and textfield. 00:07.640 --> 00:13.280 Now let's use this composable inside car features four. 00:13.440 --> 00:21.440 So here under the text Car specifications we're gonna add the text fields. 00:21.560 --> 00:25.560 So let's start by the first one for the cylinders. 00:25.560 --> 00:30.680 So feature text field set the label to cylinders. 00:30.960 --> 00:38.920 The value car features dot cylinders dot to string and set the on value changed. 00:38.960 --> 00:44.000 You can create like this as a Gemini suggests for us. 00:44.200 --> 00:51.040 But I can use a lambda expression which is the value here and set on features. 00:51.080 --> 00:52.960 Changed car features. 00:52.960 --> 01:00.640 Dot copy the number of cylinders equals to value the new value dot two float or null. 01:00.640 --> 01:05.320 So let me make it like a new value in order to distinguish it. 01:05.360 --> 01:13.640 New value equals to new value, dot to float or make it as default as four cylinders. 01:13.640 --> 01:21.200 And the placeholder here would be four, 6 or 8. 01:21.240 --> 01:28.160 Let me explain this one time in order to because we're going to use it in the next parameters. 01:28.360 --> 01:35.120 So here on value change a callback that gets triggered when a value changed user selects from a drop 01:35.160 --> 01:45.160 down menu a slider, or actually, if the user enters any number in the text field, the new value, 01:45.200 --> 01:54.520 the new value that was selected or changed or entered, the on features and on features changed. 01:54.600 --> 01:58.800 This is a callback function with the updated car features. 01:58.920 --> 02:05.400 The value to float or null safely converts the value to a float. 02:05.400 --> 02:16.320 Returns null If conversion fails and this is the Elvis operator provides a default value or of a for 02:16.360 --> 02:19.640 F if the conversion result is null. 02:19.760 --> 02:28.440 So here we are trying to convert the user input, since the text field will the. 02:28.800 --> 02:36.200 The result of text field is a string, we need to convert it to an integer or a float. 02:36.400 --> 02:41.040 And here we're going to get the cylinders in a float. 02:41.240 --> 02:46.360 So we can't get cylinders in a string uh, a string. 02:46.480 --> 02:51.720 Because if we go back to car features the cylinders is of type float. 02:51.920 --> 02:57.680 If the user enters any data it would be of type string. 02:57.720 --> 03:00.680 And here the value would be in type string. 03:00.960 --> 03:05.560 Now we need to convert the value to a new value. 03:05.560 --> 03:09.680 But this time the new value is of type float okay. 03:09.720 --> 03:14.080 So we're going to copy the newvalue dot to float. 03:14.080 --> 03:17.160 We are converting it to a float. 03:17.160 --> 03:27.320 So this is just converting the data, the input that entered by the user as a string to a float. 03:27.480 --> 03:34.000 If it is converted successfully, go and and preserve the result. 03:34.000 --> 03:39.680 If not, go and return for f as a default value. 03:39.720 --> 03:41.760 Okay, this is very simple guys. 03:41.800 --> 03:46.960 We talked about it in the in the previous sections and we see it in many videos. 03:46.960 --> 03:54.280 But I should mention it here in order to make everything clear this is the first text field. 03:54.520 --> 03:57.040 Let's continue with the other parameters. 03:57.040 --> 04:00.280 So here feature text fields text field. 04:00.320 --> 04:09.200 Set the label displacement cc value displacement dot to string on value changed the similar to what 04:09.200 --> 04:10.320 we've done here. 04:10.600 --> 04:14.990 We need to do here on features changed. 04:15.030 --> 04:24.710 Set the car features dot copy displacement new value to float or set a default value to 150. 04:24.750 --> 04:26.470 Okay, it's very simple. 04:26.510 --> 04:31.190 Placeholder 100, 150, 200, and so on. 04:31.230 --> 04:32.950 This is the second text field. 04:33.070 --> 04:36.870 The third text field is about the horsepower. 04:37.190 --> 04:44.030 So label horsepower on value changed car features dot horsepower dot string. 04:44.030 --> 04:47.990 We are getting them from this data class. 04:48.030 --> 04:49.030 The horsepower. 04:49.030 --> 04:54.830 And also we're going to set the on value changed new value on features changed. 04:54.830 --> 04:57.870 Similar to what we've done before car features. 04:57.990 --> 05:04.350 We are converting the entered value of the horsepower into a float. 05:04.550 --> 05:09.830 If the conversion is successfully, go and set that to a new value. 05:09.830 --> 05:14.550 If not, go and make it as default as 100. 05:14.710 --> 05:17.790 Uh F, which is for the horsepower. 05:17.830 --> 05:19.510 Okay, this is the logic. 05:19.510 --> 05:24.630 And this is how we keep our application safe from any errors. 05:24.670 --> 05:32.710 I'll continue with other features like the weight, the other feature acceleration 0 to 60. 05:32.750 --> 05:40.910 Get the acceleration from car features, set the on value changed and make it 15 F, which is the default 05:40.910 --> 05:41.550 value. 05:41.710 --> 05:45.590 Set the placeholder to five, 10 or 15, and so on. 05:45.630 --> 05:49.950 You can make it, uh, for example 515. 05:49.950 --> 05:50.950 So okay. 05:50.990 --> 05:57.350 Now the other feature is the model year value changed new value set. 05:57.350 --> 05:59.990 The default is to 76 f. 06:00.150 --> 06:03.030 And here specify the placeholder. 06:03.070 --> 06:05.630 This is the feature text field set. 06:05.630 --> 06:14.390 The model year range is from 70 to 82 okay this is good. 06:14.430 --> 06:20.750 Now we're going to create a text for the origin material theme dot typography. 06:20.750 --> 06:27.950 I'm gonna create a drop down menu or a selection, a selection, a bunch of buttons you can select from 06:27.950 --> 06:31.430 them, or a drop down menu for the origin. 06:31.430 --> 06:34.230 So we have American, European and Japanese. 06:34.230 --> 06:39.750 We're going to create uh, we're going to allow the user to select one of them. 06:39.870 --> 06:47.030 I'm not going to allow it to allow the user to enter one, 2 or 3 because he didn't know. 06:47.190 --> 06:54.790 Or you can make like hints like one represents American, two represents, uh, European, three represents 06:54.830 --> 06:55.590 Japanese. 06:55.710 --> 07:02.950 But for making our application more, more professional, we're going to create a drop down menu. 07:02.950 --> 07:10.110 Or you can make a selection of radio buttons or a group of buttons to allow the user to select one of 07:10.110 --> 07:11.590 those artisans. 07:11.630 --> 07:12.110 Okay. 07:12.270 --> 07:13.590 So don't worry. 07:13.710 --> 07:16.790 Please follow me and I'll lecture everything. 07:16.830 --> 07:22.390 Modifier modifier dot padding ADP from top and bottom.