Capturing User Input with Jetpack Compose (EditText)

in this video i'm going to show you how to capture input using jetpack compose and this is a little different than what you're used to you're going to want to pay attention to this so just to be clear when i say capturing input i mean you know clicking on any kind of a text field or an edit text field a classic edit text field and just inputting some values so how do you do that with jetpack compose so let's go into our recipe list fragment and let's uh let's explore an example so let's let's add a widget here that we can use to capture input first of all so first i'll add a column at the top and inside of this column i'm going to add that list of recipes that we have currently using that lazy column that we have so when capturing input you use something known as a text field and as you can see here there's a bunch of different types basically the the thing to remember is they're all text fields but they're just different types of text fields so like an outline text field would have an outline around it a basic text field has some different styling to it core text field again different styling they're all just the same they're essentially a text field and we're going to be using the standard kind of text field class so those two required arguments as you can see when you add this text field to your composable there's the value so that's like what is displayed so i'm going to write chicken in here for now and then all that on value changed with which this is kind of the thing that makes it a little tricky you know if you're used to standard android development with xml and widgets and stuff this will be a little a little weird for you so i definitely wanted to make sure i made a individual video just covering this so let's add this and i'll add a spacer here just to add a little space between our list and our text field so i'll do modifier.padding and just do you know 10dp just to kind of space these things out so it looks a little bit better even though this isn't what it's going to look like at the end this is just kind of a demonstration video so let me run this and let's see what happens all right so here's the app running there's our text field at the top and then there's that list so if i click in this text field and i try to type stuff so here let me click on the keyboard so you can see notice nothing's happening notice that i can't change this text i can't delete anything i can't enter anything i can't do anything and the reason for that is because this text field i've hard coded in the value parameter and this value parameter cannot be hard coded or else it never changes as you saw so really what we need to do is actually create a some kind of a mutable data structure that we can change and then you pass it you pass the value here when you want it to be changed now that sounded a little confusing so let me just do it and it'll make sense to you now this is also very important this is a special compose thing just write this out stay with me and don't worry i am going to explain this so first let's talk about what is in the center here so here we have that this mutable state of constructor you should be familiar with this we use this in the view model already to build a mutable state object and it's holding a default string of beef but what is this remember keyword well this is actually mentioned in the jetpack compose documentation so let me actually open that up so if you go to developer.android.com jetpack compose state and then scroll down to the section state incomposables so you can get there by clicking on the right hand side over here so let me make this a little bigger and that was very big maybe a little smaller here we go stating composables so let's just read this paragraph composable functions can store a single object in memory by using the remember composable so that's that remember thing that we're using a value computed by remember is stored in the composition during initial composition and the stored value is returned during recomposition remember can be used to store both mutable and immutable objects so what you need to remember about this is that if you want to store an object any object you know just like in your class if you were up here and you want to do like you know private value query and set that equal to some blank string or if you wanted to save a uh immutable object you do private var query and save that as a mutable string so just like you would do that in your fragments or your activity or whatever this is the equivalent in compose you need to use this remember keyword or it's just not going to work properly and it's good it's a good idea actually i think you have to use a mutable state in the middle or some kind of a immutable object in here like you can't just have a string like if i just if i put a string here i think that will work but when it comes to changing it which you'll see in a second here it's going to cause issues so a good policy is just to remember this kind of pattern you have your value you use the remember keyword and then in the middle you have mutable state of and you declare whatever your default value is if it's an integer you know then you put an integer if it's a string then you put a string and so on and so on so let's explore this remember kind of function a bit a bit further so now that we have our variable defined up at the top here i'm going to write query.value for the value here and then when we want to change that value i want to do query.value and set it equal to the value that the user enters into that text field and that's what this is right here so like if you wanted to you could do you could write you know new value here just to make it a little bit more clear and then pass that as the as the variable all right let's run this and take a look all right so there's that default value it says beef so that's good that looks like what i actually entered now let's try and type something so there we go it's actually accepting my input so this is working as expected now so this is a pattern that you need to remember you need to use the remember keyword you pass mutable state of and then whatever your default value type is for the value parameter you do query.value and then whenever you want to change it you know if it's a text field you have this on value changed function but not all widgets will have an all on value changed i don't think basically you just need to remember that when you want to change the value you just do queried up value and then set it to the new value so again this is a pattern that you should remember because this is how you know input capturing is done with jetpack compose now this remember function is not perfect it's not without flaw because watch what happens when i come over to our app here and i rotate the screen so if i rotate it let's look up in our input notice that the input is lost so whatever i type here if i now rotate the screen that is lost and it gets set back to the default value so obviously this is no good so rotating the screen and losing the value is no good so what's what's the solution to that well we can go inside of our view model and define this value inside of our view model and then it will persist across configuration changes that is what the view model is for so let's go into our view model and let's set this up so let's create a new value up here so value query equals a mutable state of mutable state of and we can set that default value to whatever we want i can do chicken doesn't really matter or you can do an empty string now we need to define a function to be able to change this value because well if i come over here into our composable i could do view model dot whoops view model dot query dot value and then that will get the value so i could pass this query up here but then what happens when i want to change it how can i change that value so here if i do you know query i can't just set it equal to the new value that doesn't work if you hover over this it says value cannot be reassigned so what can we do well typically the the classic pattern to use with jetpack compose is create a function inside of your view model that will change that value so i'll go function you know on query changed we'll call it pass the query as a string and then do this dot query dot value equals that new query so this dot query obviously refers to this value up here and i'm just changing it to whatever is passed as the argument so now i can go into my fragments and i instead of calling query and setting it equal to the value i can do view model dot on query changed and set that equal to that new value and that will solve pretty much all of our problems so now let me run that and let's take a look alright so showing a default value of chicken now let's change this to i'll just type whatever it doesn't really matter now let's rotate the screen let's see if that value persists yes it does it's still up in our text field so that looks like all of our boxes are checked everything is working as we expect now before we move on i should mention that there is another way to save values in your composables and it will actually persist across configuration changes so you could do let's do let's do query underscore and set it equal to i believe it's saved instant state or it's something like that remember saved instant state is that the one uh yeah it's it's something like this i'm having trouble remembering maybe it's buy saved instant state open this up get that import i think i think this is the one save yeah that was the one saved ends in state mutable state of and then you could pass that query and say that it's beef this one will persist across so let's try that let's do underscore let's do then dot value and set that equal to it or set that equal to the new value and then this will be query dot value i believe this will do the same thing looks like it's giving me a warning though oh i think that's because with the saved instance state you actually don't need the mutable state you just pass the string yeah so i think that will do the same thing let's just run it and quickly take a look so coming into the text field let's write something in here rotate this and see if it persists yes it does so if you want to save your value and you want to persist across configuration changes you can use this saved instance state function and pass you know whatever your default value is to here this seems to be totally fine if you want to keep everything in the view model which is generally the approach that i take you can use the same sort of pattern we've been looking at so i'll delete this underscore let's just pass this query past this and uh then refer this back to view model view model dot on query change to pass that new value and then pass that this is typically how i do it you know you could save it to the instant state but you know both work both are fine i guess actually the only kind of leg up that using the view model instead of the saved instance state function would be that typically in your view model there's some kind of logic that you're doing some kind of business logic like for us we're going to be doing pagination later so we need access to the query in the view model we're going to need like the page in the view model it's better to have those things in the view model generally speaking now remember if you want to know more about maintaining state using jetpack compose just go to the documentation developer.android.com jetpack compose and then state all the stuff that i was talking about in this video is in this document um probably actually there's much more in here than i even talked about in this video so now in the next video we're going to start building this search bar so this is the finished version of the app notice we have this nice kind of search toolbar at the top here we got these these chips down here for doing searches we're going to start building this in the next video and don't go anywhere before you leave some engagement go down there leave a like again you guys have been doing a great job thank you very much you gotta you gotta like the videos you gotta tell youtube that you like the videos otherwise my videos just get lost in youtube abyss and you don't want that you want this to spread like a virus get it out there leave engagement leave a like thanks for watching

Channel: CodingWithMitch

Views: 14,472

Keywords: TextInput Jetpack compose, text input jetpack compose, input jetpack compose, mutable state, mutable state of android, remember jetpack compose, state jetpack compose, capture user input jetpack compose

Id: O_MmOP5fjUg

Length: 11min 10sec (670 seconds)

Published: Tue Dec 22 2020