Jetpack Compose Navigation: The Complete Beginner's Course

hello everyone today we will talk about jetpack compose navigation so let's go into the build.gradle from the app module and paste this dependency and now let's go back to the main activity and here we will create a nav controller because remember live controller and this basically helps us to navigate between the screens and this should be attached to a nav host so let's attach that control to it and say start destination and this is on empty string for now okay so the nav host basically contains all of the screens of the app and here we can Define some routes like composable it's a route and we pass the name of the route and open a block and here we will have our screen so let's create the screen first so screen one um let's say a colon that fill the next size so modifier dot field Max size we want that the content should be in the center so we align horizontally and vertically in the center and now we need to pass the name of the screen so screen one let's say one and a button that that says navigate to next screen and let's uh create the screen tool change the name of the composable let's say screen two navigate to next screen and let's also add the button that says navigate back let's create the last screen copy the composable and paste it this will be the screen 3 change the name um let's remove this button or let's let it here and let's say navigate back and navigate back to screen one now let's add the Callback to screen one and this is called navigate to screen two and now let's add two callbacks to the screen too so this will be navigate to screen three and navigate oops navigate back and now let's also add the two callbacks here one uh should be called navigate back and the second one navigate back to screen one I'm using callbacks because if I pass the nav controller directly as a parameter like this nav controller and call the let's say navigate oops nav controller dot navigate and we pass the route here this can be called the on each composition So to avoid this we just pass a callback and let's also Define some routes so let's create an object called route and here we will have our screen one equals equals screen one screen two and the screen 3. now we can go into the nav host and replace the start destination with route dot screen one let's format the code and the first composable is Route dot screen one and now let's pass the screen one I need to make it uh as a parameter on navigate to screen tool let's say navcontroller dot navigate Route oops route object dot screen tool now let's create another route in our navigation graph and this is the second screen tool open the block and say screen to let's um remove this block and say navigate back and this will be enough control dot pop backstack and this will navigate back to the first screen and we want to navigate to the third screen so on F controller dot navigate Route dot screen three and the last screen is the route equals route dot screen and open the block and we are passing the composable we are doing the same thing nav navigate back to screen one let's start with navigate back so on navcontroller.pop backstack but now we want to navigate to screen one so we can say navcontroller dot pop backstack and now we can order an additional argument call the route and we pass the route that if we want to get back to and we also need to say inclusive and we set it to false because if we set this to True we'll remove the screen wall from the back stack and it will be an empty screen now let's go to the screens and replace the on click function with the one that we passed navigate to next screen is navigate to screen three navigate back it's navigate back oops navigate back the same thing here navigate back and this is navigate back to screen one let's run the app and see how it looks so let's try to navigate to the next screen now let's try to navigate back now let's go to the main through the third screen and we can navigate back and now we can navigate back to screen one and if I'm doing this this should close yeah it's closed okay now we can also say that we can navigate from screen one to screen three and remove the screen one from the back Stacks so let's say screen three and we open a block and say pop-up tool and we pass the route and the route is screen one so this is pop-up pops the screen out of the back stack navigation backstack and we need to add add inclusive equals true so let's try to navigate to the screen three and this worked and uh navigate back won't work because we don't have any screens behind of this one in the back stack I think this is it and if you want to learn more about it by compose navigation like passing objects to other screens I have a video about that and I also have a post written on my blog so make sure to check it out and you also have the repository in the description of this video and see you soon

Channel: Daniel Atitienei

Views: 2,509

Keywords: Jetpack Compose, Kotlin, Android

Id: jt5sJEnDsSQ

Length: 8min 16sec (496 seconds)

Published: Fri Mar 31 2023