In this tutorial you will learn how to overlap components over one another. So, let’s keep it short here and get straight to the point
Components
For this tutorial, I’m using the components listed below, but you can change them as per your needs.
Horizontal_Arrangement1(Color: Default)
Button1
Button2
Horizontal_Arrangement2(Color: Translucent pink)
Space1
Checkbox1
Snackbar1
Animation_Util1
Blocks
So, first of all, we will trigger the when Checkbox1.Changed event. If it’s checked we will call the Overshoot Vertical method from the Animation Util component for overlapping HVA2 (Horizontal Arrangement2) over HVA1 (Horizontal Arrangement1) or else we will remove them from each other.
because here we want the HVA2 to move vertically and overlap the HVA1 completely.
For example: If Y position of HVA1 is 406 and that of HVA2 is 596 then the result will be -190. And so HA2 will move 190 units vertically above (above because it is negative) from its original position, overlapping the HVA1. Note: You can play with the blocks to define how much one arrangement will overlap with other.
The blocks in the else socket are just for testing purpose and hence, are redundant, so, I’m not going to explain it (but if you understood the above blocks you would understand this too).
Yes, I know it and that’s why instead of hard-coding the values of start and end position, I have used these blocks
so that the HVA2 overlaps HVA1 everytime, irrespective of the screen size.
PS: This is just an example showing how animation utilities component can be used to overlap components. If you want to achieve different results, say instead of overlapping components fully you want to overlap a fraction of it, these blocks need to be changed.
it wont work on mine, does it affect because da componets im trying to overlap, is visible to false and everytime i just set it to visible true… or it must be visible on da first place?
Horizontal_Arrangement1(Color: Default)
Button1
Space1
Checkbox1
Snackbar1
Animation_Util1
