Flexbox-Compose

A Jetpack Compose layout that places its children in a way that CSS Flexible Box Layout Module does.

Installation

Flexbox-Compose is available in the mavenCentral(), so you just need to add it as a dependency (Module gradle)

implementation("io.github.aghajari:Flexbox-Compose:1.0.0")

Usage

Flexbox Row

Flexbox(
    flexDirection = FlexDirection.Row,
    horizontalArrangement = Arrangement.spacedBy(16.dp),
    verticalArrangement = Arrangement.spacedBy(16.dp),
) {
    // Add items
    items(list) {
        RemovableItem(it)
    }
    item {
        AddIcon()
    }
}

Flexbox Column

Flexbox(
    flexDirection = FlexDirection.Column,
    horizontalArrangement = Arrangement.spacedBy(16.dp),
    verticalArrangement = Arrangement.spacedBy(16.dp),
) {
    // Add items
}

Arrangements

You can customize the arrangement of both axis in Flexbox.

  • Row: horizontalArrangement defines the arrangement of Placeables on the line and verticalArrangement defines the arrangement of lines.
  • Column: verticalArrangement defines the arrangement of Placeables on the line and horizontalArrangement defines the arrangement of lines.

Examples:

  • SpaceEvenly

Flexbox(
    flexDirection = FlexDirection.Row,
    horizontalArrangement = Arrangement.SpaceEvenly,
    verticalArrangement = Arrangement.spacedBy(16.dp),
) {
    // Add items
}
  • Center

Flexbox(
    flexDirection = FlexDirection.Row,
    horizontalArrangement =
        Arrangement.spacedBy(16.dp, Alignment.CenterHorizontally),
    verticalArrangement = Arrangement.spacedBy(16.dp),
) {
    // Add items
}
  • End

Flexbox(
    flexDirection = FlexDirection.Row,
    horizontalArrangement =
        Arrangement.spacedBy(16.dp, Alignment.End),
    verticalArrangement = Arrangement.spacedBy(16.dp),
) {
    // Add items
}

MaxLines

You can set an optional maximum number of lines.

  • SingleLine

Flexbox(
    flexDirection = FlexDirection.Row,
    maxLines = 1,
    ...
) {
    // Add items
}

Item Inline Alignment

You can set the default alignment of Placeables inside a FlexboxLine.

  • Center

Flexbox(
    flexDirection = FlexDirection.Row,
    maxLines = 1,
    itemInlineAlignment = Alignment.Center,
) {
    // Add items
}
  • Top

Flexbox(
    flexDirection = FlexDirection.Row,
    maxLines = 1,
    itemInlineAlignment = Alignment.TopCenter,
) {
    // Add items
}

Flexbox Animation

Customize the animation of item movements. A spring spec will be used for the animation by default.

You can pass null to disable the animation.

val myAnimation = object : FlexboxAnimation {
    override val visibilityThreshold = 0.01f
    override val animationSpec = tween<Float>(
        durationMillis = 600,
        easing = FastOutSlowInEasing
    )
}

Flexbox(
    flexDirection = FlexDirection.Row,
    animation = myAnimation,
) {
    // Add items
}

Key Identifier

You can set a factory of stable and unique keys representing the item. Using the same key for multiple items in the list is not allowed.

If you have fixed amount you can use enums as keys, or if you have a list of items maybe an index in the list or some other unique key can work.

If null is passed the position in the list will represent the key.

Flexbox(...) {
    items(
        list,
        key = { list[it].key }
    ) {
        Content(it)
    }

    item(MY_KEY) {
        SingleItem()
    }
}

Author

Amir Hossein Aghajari

License

Copyright 2023 Amir Hossein Aghajari
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

GitHub

View Github