Introduction:
In this Lecture we will talk about the most used Modifier Function.
Modifier.Background():
First, some function has overload function like this one has 2 overloads function.
1/
fun Modifier.background(
color: Color,
shape: Shape = RectangleShape
): Modifier
2/
fun Modifier.background(
brush: Brush,
shape: Shape = RectangleShape,
alpha: Float = 1.0f
): Modifier
color:
we can choose color by one of the following method.
1/ By choose from default color like this:
.background(Color.Green)
2/ Or by choose red, green, blue alpha as Float number [0f, 1f] like this:
.background(Color(red = 0.5f, green = 0.2f, blue = 0.7f, alpha = 1.0f))
3/ Or by choose red, green, blue alpha as Int number [0, 255] like this:
.background(Color(red = 50, green = 100, blue = 200, alpha = 255))
4/ Or by choose Hex-Format like this:
.background(Color(0xFFaa9911))
Shape:
Can be RectangleShape or CircleShape or more advanced Shape that you need to use advanced function to do it. Here an example of CircleShape:
.background(Color(0xFFaa9911), shape = CircleShape,)
brush:
1/
horizontalGradient(
colors: List<Color>,
startX: Float = 0.0f,
endX: Float = Float.POSITIVE_INFINITY,
tileMode: TileMode = TileMode.Clamp)
Creates a horizontal gradient with the given colors evenly dispersed within the gradient.
Example:
.background(brush=
Brush.horizontalGradient(
colors = listOf(Color.Red, Color.Blue, Color.Green),
startX = 100.5f,
endX = Float.POSITIVE_INFINITY,
tileMode = TileMode.Mirror,)
)
2/
horizontalGradient(vararg colorStops: Pair<Float, Color>,
startX: Float = 0.0f,
endX: Float = Float.POSITIVE_INFINITY,
tileMode: TileMode = TileMode.Clamp)
Creates a horizontal gradient with the given colors dispersed at the provided offset defined in the colorstop pair.
Example:
.background(brush=
Brush.horizontalGradient(
(0.2f to Color.Red),
(0.4f to Color.Blue),
(0.9f to Color.Green),
startX = 0.0f,
endX = Float.POSITIVE_INFINITY,
tileMode = TileMode.Clamp,)
)
3/
linearGradient(vararg colorStops: Pair<Float, Color>,
start: Offset = Offset.Zero,
end: Offset = Offset.Infinite,
tileMode: TileMode = TileMode.Clamp)
Creates a linear gradient with the provided colors along the given start and end coordinates.
Example:
.background(brush=
Brush.linearGradient(
(0.2f to Color.Red),
(0.4f to Color.Blue),
(0.9f to Color.Green),
tileMode= TileMode.Clamp,)
)
4/
linearGradient(colors: List<Color>,
start: Offset = Offset.Zero,
end: Offset = Offset.Infinite,
tileMode: TileMode = TileMode.Clamp)
Creates a linear gradient with the provided colors along the given start and end coordinates.
5/
radialGradient(colors: List<Color>,
center: Offset = Offset.Unspecified,
radius: Float = Float.POSITIVE_INFINITY,
tileMode: TileMode = TileMode.Clamp)
Creates a radial gradient with the given colors evenly dispersed within the gradient.
Example:
.background(brush=
Brush.radialGradient(
colors= listOf(Color.Green, Color.Blue, Color.Yellow),
center= Offset.Unspecified,
radius= Float.POSITIVE_INFINITY,
tileMode= TileMode.Clamp),
)
6/
radialGradient(vararg colorStops: Pair<Float, Color>,
center: Offset = Offset.Unspecified,
radius: Float = Float.POSITIVE_INFINITY,
tileMode: TileMode = TileMode.Clamp)
Creates a radial gradient with the given colors at the provided offset defined in the colorstop pair.
7/
sweepGradient(colors: List<Color>,
center: Offset = Offset.Unspecified)
Creates a sweep gradient with the given colors dispersed evenly around the center.
Example:
.background(brush=
Brush.sweepGradient(
colors= listOf(Color.Green, Color.Blue, Color.Yellow),
center= Offset.Unspecified,
),
)
8/
sweepGradient(vararg colorStops: Pair<Float, Color>,
center: Offset = Offset.Unspecified)
Creates a sweep gradient with the given colors dispersed around the center with offsets defined in each colorstop pair.
9/
verticalGradient(colors: List<Color>,
startY: Float = 0.0f,
endY: Float = Float.POSITIVE_INFINITY,
tileMode: TileMode = TileMode.Clamp)
Creates a vertical gradient with the given colors evenly dispersed within the gradient.
Example:
.background(brush=
Brush.verticalGradient(
colors= listOf(Color.Green, Color.Blue, Color.Yellow),
),
)
10/
verticalGradient(vararg colorStops: Pair<Float, Color>,
startY: Float = 0f,
endY: Float = Float.POSITIVE_INFINITY,
tileMode: TileMode = TileMode.Clamp)
Creates a vertical gradient with the given colors at the provided offset defined in the PairFloat,Color.
Modifier.fillMaxSize(fraction: Float = 1f)
It make the Box() or the widget as big as the available to it. For example if we apply it to our Box(), the box will take the whole screen:
@Composable
fun MyBox()
{
Box(
contentAlignment = Alignment.TopEnd,
modifier = Modifier
.background(color = Color.Yellow)
.fillMaxSize()
.padding(all = 30.dp)
)
{
Text(text = "Hello Box 1")
}
}
We notice that contentAlignment
is Alignment the Child of the Box inside the Box.
We can also make it to fill some percent of max size like this:
.fillMaxSize(fraction = 0.5f)
Bact to the Box():
Box can have more than one Child but children will be stacked one on top of the other.
A box with no content that can participate in layout, drawing, pointer input due to the modifier applied to it. For example:
Box {
Box(Modifier.fillMaxSize().background(Color.Cyan))
Box(
Modifier.matchParentSize()
.padding(top = 20.dp, bottom = 20.dp)
.background(Color.Yellow)
)
Box(
Modifier.matchParentSize()
.padding(40.dp)
.background(Color.Magenta)
)
Box(
Modifier.align(Alignment.Center)
.size(300.dp, 300.dp)
.background(Color.Green)
)
Box(
Modifier.align(Alignment.TopStart)
.size(150.dp, 150.dp)
.background(Color.Red)
)
Box(
Modifier.align(Alignment.BottomEnd)
.size(150.dp, 150.dp)
.background(Color.Blue)
)
}
Finally:
We will continue discover more Modifier Functions because most those functions can be applied to most widgets (Composable function).
See you 😄
================================================
You can join us in the discord server
https://discord.gg/TWnnBmS
and ask me any questions in (#kotlin-and-compose) channel.
Top comments (1)
No body write a comment :( ☹