Mastering Jetpack Compose: A Deep Dive into Data and Event Flow in Your Android UI

hi everyone hope you're doing well so in this video we will learn how we can send data from top to bottom and how we can send event from bottom to top okay so before going to the topic let's understand why we need to have this requirement so if we see the current implementation where we basically use activity or fragment to create our UI so we keep our view and other related code in a activity or in a fragment so those activity and fragment are our single source of Truth okay now in case of compost we create our UI with the composable functions so if we don't keep our data at a single place then if the data got changed from any other function so it is difficult to debug and fix the issue if there are so much dependency so it's always better to have a one single function as a single source of Truth and mostly it is the top element or the first composable functions okay so let's see how we can achieve this uh if you follow my channel so you notice that we have this UI uh where we have column text row okay now what we'll do we will keep this function as a single source of Truth and move these component to a lower functions okay now I create one function here header UI and move this code from here to this one next one is I want to create this button so maybe I say action UI okay now I move this code from here to this block okay now if you see for this compos function we need to send a data and data will be this count State okay so what we will do we go to this header UI and we will send this data as a parameter to this function okay and here what we will do okay here we will observe it as a state now next thing is for this function we need to send event back to the parent function okay so to send event back to the parent function so we need to use Lambda Expressions so here what we need to do we need to expect a value from this function okay so we will create uh Lambda expression here uh we have a function which will give us a bullan value and it will return nothing so we will use unit and we will name it as action okay now change this one so why we give it as a buan because we are sending either true or false okay so we will change it to action and this will also change to action okay now we have sent event back to this function so basically we are just calling this function and this function body will be written here okay now here what we need to do we need to get this value and set it to view model so main view model dot change account and we'll pass this value okay now if you see here for first composable function we are sending a value and the second composable function give us a callback of event okay now see okay now let's see if it works correctly or not if you see I click on this button C change when I sub click on subtract the state C change and when I rotate the device state is still maintained okay so this way we can send our data to a lower functions and send back events to the top functions so that much for this video so in the next video we will learn about how we can figure out the recompositions and how we can fix uh the recomposition account so stay tuned for further updates

Channel: Let's Finish this APP - Kotlin and Swift Tutorials

Views: 68

Keywords: JetpackCompose, AndroidUI, LazyVerticalGrid, LazyStaggeredGrid, AndroidDev, UIDevelopment, CodeTutorial, AndroidDevelopment, TechTalk, MobileAppDevelopment, Programming, CodeOptimization, GridLayout, ComposableFunctions, DeveloperCommunity, TechExplained, CodingTips, AndroidStudio, KotlinProgramming, UIUX, LearnProgramming, OpenSource, TechInnovation, data flow, event, state, action, android, fresher

Id: Tq3-WvalP0E

Length: 5min 3sec (303 seconds)

Published: Thu Jan 11 2024