Flow Row Example

An Android application demonstrating the usage of Jetpack Compose FlowRow for adaptive, wrapping layout arrangements with interactive Material 3 filter chips.

Author

• GitHub Profile: @Starchild13
• Repository: Flow-Row-example

---

Screenshots

Here is how the application looks in both portrait and landscape orientations:

Portrait View	Landscape View

---

Features

• Jetpack Compose FlowRow: Demonstrates horizontal wrapping layout behavior for items of dynamic width, automatically wrapping content to new lines when horizontal space runs out.
• Material 3 Design: Built with modern Material 3 components (FilterChip, MaterialTheme, dynamic color support).
• Interactive State Management: Clickable chips that toggle selection state, applying custom accent backgrounds and text color styling.
• System Bar Insets: Uses .statusBarsPadding() to ensure proper clearance below the device status bar.
• Modern Android Stack: Upgraded to compile SDK 35 (Android 15), Android Gradle Plugin 8.5.0, Kotlin 1.9.24, and Compose BOM 2024.06.00.

---

Architecture & Code Overview

Main UI Layout (MainActivity.kt)

The core layout uses Jetpack Compose's FlowRow combined with status bar padding:

@OptIn(ExperimentalLayoutApi::class)
@Composable
private fun FlowRowExample() {
    val textChipRememberOneState = remember { mutableStateOf("") }

    FlowRow(
        Modifier
            .statusBarsPadding()
            .padding(top = 16.dp, start = 8.dp, end = 8.dp, bottom = 8.dp)
    ) {
        ChipItem("Team: Arsenal", textChipRememberOneState)
        ChipItem("Position: Goal Keeper", textChipRememberOneState)
        ChipItem("T-shirt number: 13", textChipRememberOneState)
        ChipItem("Players Name: Aaron Ramsdale", textChipRememberOneState)
        ChipItem("Your bet that your team wins: $100 ", textChipRememberOneState)
    }
}

Project Structure

• app/src/main/java/com/starchild13/flowrowexample/MainActivity.kt: Main Activity and Composable UI layout containing FlowRow and ChipItem.
• app/src/main/java/com/starchild13/flowrowexample/ui/theme/: Material 3 theme configuration (Color.kt, Theme.kt, Type.kt).
• app/src/main/AndroidManifest.xml: Android application manifest.
• app/build.gradle: Module-level Gradle build configuration.

---

Requirements

• Android Studio Koala / Ladybug or newer
• JDK 17
• Android SDK 35 (compileSdk/targetSdk) with minSdk 26

Building and Running

1. Clone or open the project in Android Studio.
2. Sync project with Gradle files.
3. Run the :app module on an emulator or physical Android device.

License

This project is licensed under the MIT License.