BasicTextField2 - Everything You Need to Know 💻

hey guys and welcome back to a new jetpack compos video in this video I will compare the old basic text field with the new basic text field 2 because that is exactly what we get now in the later jetpack compos versions so previously if you were building custom text fields in Jetpack compos you used the basic text field composable so all that really is in this most basic form is just a transparent composable that allows you to enter text as you can already see we also now have a basic text field to which is very new and in this video I will go over all the changes this basic text field 2 has over the old version and why you should start using it if you don't have this yet then you need to make sure that you are using the latest jetpack comp poose version you can do this in your built at grel app file and making sure that you are using at least this version here for the bill of materials if you have that synchronize and then you can follow along if you want and to get started I just want to Define two very basic text States as we know it already so Vex one by remember and in here with the find an empty string Alt Enter to import that set value and then we can just copy paste this to also have a text too for our new text field oops not that one like this then we can go ahead here and Define basic text field without two so just the normal basic text field that takes in a value and this value in this case will just be our first text so text one and we have an onal change where we update our text one with the new text so this on value change is just called whenever we type something into this text field that's probably nothing new to you let's also style these text Fields a little bit so we can see where these are with a shared modifier of let's say fill Max width give it some padding of 16 DP Alt Enter to import that and let's also say we have a background of light gray if we then assign this modifier here like this this and we then go ahead and Define the basic text field two this one you can see it pretty much has the same parameters if we go in here Define our text two in this case and an on value change we again say text two in this case is equal to it let's also pass a modifier there we go and the error here is just because we need this experimental annotation so since it's of course in a pretty early stage we again need the experimental compos API annotation so if we Now launch this then in enough itself you can see that we just have two text Fields this is the normal uh text field and this is the basic text field 2 which seem to work pretty much the same way but let me tell you there are actually quite some changes and these changes not only allow us to do more cool things in an easier way with this new text field but also they help us to avoid critical bugs the old text field variant could potentially have because it could happen with this basic text field so the old version if you type something and in the background you do some sort of asynchronous operation while typing and that again updates and synchronizes the text field with some text maybe from The View model so let's say you just have a profile screen in your app uh with a username text field you can enter a new username to update that but at the same time that username gets updated on a different device and there's some sort of real time synchronization then it can happen that that while you're typing that new username the the new safe username will actually update the device so what I mean is we could for example have a launch effect block here just true we just want to launch this once we delay this for 5 seconds and after that we change our text one to hello world if we do it like this and we launch our app and wait 5 seconds and we type something for for some reason it doesn't show the text Fields here okay now we have uh let's launch this again you just saw the text hello world but if we type something meanwhile then at some point this text suddenly gets replaced with Hello World which could come from an asynchronous operation maybe some kind of real time stream from an API or so and everything the user has previously typed will then be erased with this new string so depending on the asynchronous operation you have in your app you could either run into race conditions or just have a bad user experience like in this case for examp sample and that's also why in the past it was not recommended to actually keep a text field state in a state flow because State flows often contain flow operators they often contain asynchronous Behavior where there is a delay between typing and actually updating the text field state but if we take a look here and we update this text one to text two so we update our text of our basic text field two we relaunch our app take a look here we now type something in our second text field wait 5 Seconds you will notice that our text field actually doesn't even get updated with the hello world text and this is usually the desired Behavior and the way this works internally is that this new text field this basic text field 2 keeps new state to the text Fields value internally and only once editing is done so for example when the focus is lost for the text field then it really updates the new um value of the text field and stores that in a state and actually I've been using this basic text field to here wrong all the time well not particularly wrong but not in the ideal way because this basic text field 2 not only comes with this overload with value and on value change which we already know but this also comes with the overload that takes in a state which is a text field State and that is a new class that this basic text field to introduced and having this text field state inste is just a much more robust way to implement such text field State and also control it manipulate it so now you have much more capabilities and options to actually um build text Fields here so all we really need to do now is we need to define the state with remember text field State and then pass it here and that's pretty much all we need at this point so this remember text field state will just create such a text field state it makes sure to remember it so it also survives screen rotations and process death as you can see that itself is already enough to be able to type something here to persist the state um but very often we of course need to somehow manipulate the state or react to changes so if we something here we hit submit or so then we need to validate the input of the text field so it's often not appropriate to define the state like this in your compos code but rather Define the text field State directly in your view model or so and that's also no issue because you can just create a text field State like this text field state of course not in your compose code without remember but assuming you would be in a view model here with this line of code you could just um put this text field state in a state flow in a composed State and then just pass it directly to your basic text field true composable and you can do exactly the same things with that just that in this case you have this text field State Property directly in your view model so why should we now use this text field State over the previous overload where we were able to pass a string and an on value change Lambda well because this text field state allows us to do much more cool things with our text field on the one hand if we say state DOT you can see uh we have some more functionality here but the cool thing or one of the cool things is that that we have this added function pretty much gives us a string Builder on steroids here which gives us access to this text field buffer because that is also how this um text field State Works internally it keeps a buffer it it remembers what kind of values we actually typed into it and if we take a look what kind of functionality we have here you can see we have repl we have a list of changes so you can see from the text field buffer we have a change list so that is something um we can actually take a look at what kind of things the user maybe pasted in the text field um what what the ranges in the text field are in terms of indic and it also allows us to pretty easily Implement something like an undo functionality so if you have a text editor the user pastes something hits undo then with it with this changes list you can just find out from which starting index to which ending index the user actually pasted something and you simply remove that piece of text now you can also use this to delete a specific range in your text you can use revert all changes to just yeah re revert all these changes that have been made previously you can place the cursor at a specific character you can easily select characters in a specific text range so there's a lot you can now do to manipulate the text field state so overall this new state edit function here makes this new text field State less ER prone than the old way of managing it and just gives you an overall better idea of what changed when another thing this offers you um which is particularly interesting in a view model is that we have a state. text as flow so we can get the text changes as a flow you can see a text field bu character sequence which you can then then very easily observe in the view model combine it with other flows so whenever the text actually changes you can then I don't know react to changes map the character to something like I don't know the uppercase or so um so you can you can be very flexible with that that's pretty much just a repper um or a simple function of the snapshot flow so with snapshot flow and a state we can pretty much just get a flow that is triggered whenever a composed State changes uh but I think this state that text as flow looks a little bit cooler than that so much about the text field state but that is actually not it yet the basic text field 2 has more changes more cool things on the one hand we can pass a so-called input transformation which is new so if we want to restrict the user of only being able to enter a specific set of characters or only enter something based on a specific pattern then we can use such an input transformation for that and to give you an example let's just Define something like an Android in input transformation which is input transformation and in here we can overwrite the transform input function and this gives us access to the original value so the value of our text field before the user typed something and this is the value with the changes as a text field buffer and in this function we can now decide whether we want to let this value with changes pass and uh push it to the real buffer or whether we want to not let this pass and let's say we want to have a text field where the only word we can actually type is Android just as a little example we could do this with such an input transformation for example by going in here and checking if the string Android does not contain our changes so value with changes as a character sequence if that is not the case then we say value with changes. revert all changes so we revert all the new changes so nothing is actually saved in our real buffer after um running through this input transformation and yes we again need this experimental annotation here to get rid of these errors but if we now run this and then take a look in our second text field no matter what I enter here um actually we need to apply this transformation of course so let's go in here and say input transformation and set that to an Android input transformation and relaunch this if we now go in here in the second text field no matter what I type here it actually doesn't work unless I type exact Android because it will only let these letters pass so of course this is just a non-real world example but let's say you have some kind of numbers field and you only allow uh digits between one and four or so then you can use such an input transformation to only let these digits pass you want to let pass so that's definitely cool another Cool Change Is that the basic text field 2 now allows us to pass a scroll state so just like um a modifier in a column or so if our text field becom comes scrollable and that was possible before so if we have a multi-line text field and that has maybe 10 lines but you only allow to display three of these then that of course needs to be scrollable but what wasn't possible previously is that you can also observe that scroll behavior that you can react to these scroll events and that now changed so we can now have our very own scroll State you can of course keep this in a reference before and then also react to scroll events and for example have your very own scroll bar or have a specific slider and when you SL that then the basic text field will automatically also scroll or you could add a button and if you click that button you scroll exactly by one line or whatever you need um if you need that behavior to cons to control the scroll events in the text field uh then you can use remember scroll State here together with this basic text field 2 and one last thing I consider important that I would like to go over here is another variant of this basic text field 2 which isn't actually called basic text field 2 but basic secure text field so that is also based on text field to it also takes in this text field state but as the name says this is optimized for secure input so for passwords for credit card numbers because the the memory management behind this basic secure text field is a bit different than the normal basic text field 2 so that it really only keeps these passwords and credit card information in memory as long as really necessary but not longer and overall there are a few more little changes but I think I went over the most important ones and you now get a good grasp of why this new text field 2 is actually the better choice in future of course it's still experimental there could be bugs so use it with Care at the moment but this will become the standard very soon and if you check the first link below this video then you will find a free PDF for you which summarizes 20 of the most deadly mistakes you can make with jetpack compost these are not only mentioned these are explained um there is explained how you can fix these and there are also realistic code samples so everything you need to have a real world checklist to also keep in mind when building your own projects completely free just click the link down below and download it and then you're ready to go other than that thanks so much for watching this video I will see you back in the next one have an amazing rest of you week bye-bye

Channel: Philipp Lackner

Views: 14,564

Keywords:

Id: YFS2EfGJBJk

Length: 14min 23sec (863 seconds)

Published: Wed Feb 14 2024