04 Compose - Layout – Box and Modifier

Introduction:

Composable Functions are the basic building block of Compose. A composable function is a function emitting Unit that describes some part of your UI. The function takes some input and generates what's shown on the screen.
So now, we will talk about Standard layout Composable Functions (or Widget in Flutter) that you will use it and compose it to produce your own Composable Function.

Box:

It is near to Container in Flutter but it has some different. Lets see a simple example of Box():

Example 1:

@Composable
fun MyBox()
{
    Box(
        contentAlignment = Alignment.TopEnd,
        modifier = Modifier.background(Color.Green)
       )
    {
        Text(text = "Hello Box 1")
    }
}

We notice that the default size of Box() if we not specify, is the size of its children. In this example the size of the Box() is the size of Text(). Moreover, we notice that Box() takes 2 parameters are contentAlignment and modifier. Lets talk first about modifier.

Modifier:

Modifiers allow you to decorate or augment a composable. Modifiers let you do these sorts of things:
• Change the composable's size, layout, behavior, and appearance
• Add information, like accessibility labels
• Process user input
• Add high-level interactions, like making an element clickable, scrollable, draggable, or zoomable
In Other words, Modifier is an ordered, immutable collection of modifier elements that decorate or add behavior to Compose UI elements. For example, backgrounds, padding and click event listeners decorate or add behavior to rows, text or buttons.
You can chain Modifier functions together to compose them but the order of modifier functions is significant. Since each function makes changes to the Modifier returned by the previous function, the sequence affects the final result.
Let's see an example of this:

Example 2:

@Composable
fun MyBox()
{
    Box(
        contentAlignment = Alignment.TopEnd,
        modifier = Modifier.background(Color.Green)
            .padding(all = 30.dp)

       )
    {
        Text(text = "Hello Box 1")
    }
}

We notice that the Modifier function background(Color.Green) call first to give the box background color then we call Modifier function padding(all = 30.dp) to give padding to the box from all side with 30 dp. Now we will reverse the code to see what will happen?!!

Example 3:

@Composable
fun MyBox()
{
    Box(
        contentAlignment = Alignment.TopEnd,
        modifier = Modifier.padding(all = 30.dp)
            .background(Color.Green)
       )
    {
        Text(text = "Hello Box 1")
    }
}

See now the padding is white and background color start after the padding.
Next Class we will talk about Modifier function in more details. So see yah 😄

================================================

You can join us in the discord server
https://discord.gg/TWnnBmS
and ask me any questions in (#kotlin-and-compose) channel.

Table of Contents

Previous Class

Next Class