Jetpack Compose — Order of modifiers does not matter | by Saqib | July 2023

How does the order of modification have an effect on the end result?

To know, we have to see Underneath The Hood how Compose UI is derived from Composable features.

Compose Remodel Knowledge into UI via three levels as proven beneath

• Composition —What to show?: Compose The runtime goes via the Composable features, see what should be displayed, and construct a tree construction representing the consumer interface. Every node in that construction is a Format Node which accommodates info for the subsequent stage within the course of.
• Format — The place to indicate?: This section takes the tree construction as enter, traverses it, traversing every node and its youngsters to measure width, peak And x/y coordinates of its baby nodes and eventually its personal node in 2D Area.
• Drawing — How to render?: This goes via the node-by-node tree construction and plots every node on the 2D display pixel by pixel.

Format and drawing levels

The format section determines the placement x&y and dimension width & peak of every format and its youngsters utilizing modifiers And constraints.

Drawing Part draw format and apply modifiers to be utilized within the Drawing section.

some modifiers have an effect in Drawing stage like border , clip modifiers are associated to drawings and they’re relevant solely in Drawing Part section. These modifiers are utilized within the string modifiers from Proper ARRIVE Left .

Much like some modifiers have an effect in Format stage. All of that generally modifiers could have an effect on the dimensions and placement of UI parts utilized in Format stage like dimension , padding , fillMaxSize , sizeIn , wrapContentSize , requiredSize and so forth. These modifiers are utilized within the string modifiers from Left ARRIVE Proper.

So to know how the total image modifiers utilized collectively, we’ll have a look at these two levels collectively.

Earlier than persevering with, yet another level to understand that in Format stage constraints And modifiers utilized collectively for the ultimate resolution dimension And placement of every consumer interface component.

For instance in Format stage every node passes it constraints to its baby nodes limiting them from exceeding the boundary amongst them constraints then the kid nodes determine its dimension in these nodes constraints and go the up to date constraints to their youngsters and so forth and eventually, the dad or mum node decides its dimension and place in spite of everything its youngsters have been determined.

Now let’s have a look at how modifiers utilized via a diagram, We are going to take the code instance as proven above within the first instance.

The diagram beneath reveals how modifiers is utilized.

Within the diagram, every arrow is labeled with the number one, 2, 3, and so forth. displaying the order of modifiers apply.

Format Part: Represented with the main arrow going from Left ARRIVE Proper

Drawing Part: Represented with the underside arrow going from Proper ARRIVE Left

As talked about earlier than modifiers impacts the dimensions and place of the UI component utilized from Left ARRIVE Proper talked about within the diagram with the highest arrows going from Left ARRIVE Proper numbered 1, 2 and three like this modifiers impacts dimension and place.

Backside arrows 4 and 6 present modifiers utilized in time Drawing levels for them to be utilized from Proper ARRIVE Left talked about with backside arrows going from Proper ARRIVE Left .

Every prime arrow in Format Phases labeled 1, 2 and three have constraints transmitted from Left ARRIVE Proper maintain subsequent modifier don’t exceed the laws constraints come from earlier than modifier. On each step constraints up to date by modifiers and replace constraints then be moved to the subsequent modifiers and such.

See the diagram for the 2nd code instance.

Within the instance we have now swapped padding modifiers and border modifier so how does it have an effect on modifiers utilized and finally the results of the consumer interface.

Within the subsequent instance we’re exchanging padding And dimension modified as beneath.

Let’s examine how the UI is drawn.

We are able to see the ultimate dimension of Field accomplished to 40dp and the dimensions of the inexperienced field inside is now lowered 30dp as a result of 10dp padding apply later dimension modifier.