Welcome back.
Now let's create the screen that links the main activity, the ViewModel and the whole UI.
This screen is called Object Detection screen.
Create a new Kotlin file.
Name it as detection screen.
Start with new composable function called object detection screen takes two parameters the modifier.
It's of type modifier equals to modifier and view model.
It's of type detection ViewModel.
Then we need to pass the val context equals to local context dot current Alt+ enter to import it.
And here val paint equals to paint alt plus enter to import it from Android graphics val path color
list equals to list of color dot green color dot yarn.
Color dot red.
Those are the colors that we're going to use to draw the boxes with.
You can add much more.
So color dot for example magenta color dot black and blue and so on.
Okay.
So those are the colors that we're going to use for detecting and drawing.
The box that show properties equals to remember mutable state of false.
This is just an optional variable.
If you're going to use this the update the update parameters, which is also an optional to detect and
control the parameters, which is the threshold of sensitivity.
Okay, for now we create the context.
Paint a path color list variable.
Set the launched effect.
Start calling the ViewModel.
So launched effect Initialize it here.
Pass the unit and ViewModel dot initialize.
Here we are initializing.
We are calling the ViewModel functions.
We started with initialize function and we use it inside the launched effect.
Let's continue with the UI.
So here create a scaffold.
If you want to use fab bottom bar, toolbar or any other things like this, we use the scaffold okay.
So content window inset equals to window insets.
Dot I am for windows okay.
It's very simple.
Set the inner padding which is and use the camera permission wrapper.
Composable function modifier equals to modifier dot fill maximum size and use dot padding.
Pass the inner padding dot consume window inset and inner padding.
Alt plus enter and here we go.
What I am doing, we are calling the composable function that we created before called camera permission
wrapper.
So this file, this composable function is being called inside this scaffold.
Now let me continue here and call the other UI composable functions.
I want from you to concentrate.
Now when we get val state equals to view model dot initialize state dot collect as state and set the
value or get the value.
What we need to do here the state is from the view model.
Let me go back to the ViewModel.
The view model we have a state mutable state flow and this state is being updated.
As I lectured before, if you are loading the model, set the state to loading.
If you finished loading, set it to success.
If you failed, go and set it as failed.
So here we are checking if the state or this is similar to if and else.
So I'm using when here.
And as I told you I love to to use different syntaxes with coatings response dot loading.
So in the response we have three states.
If it is loading what we need to do, go and display a circular progress bar circular progress indicator.
If it is success, what we need to do response dot success pass this unit and if it is failed, what
we need to do is response failed.
Go and create a text state state, dot exception, dot message or print.
An error occurred okay and unknown error occurred.
In the next video.
We're going to finish our app by creating this response dot success.