Core Compose Multiplatform Concepts: Build Dynamic Cross-Platform UIs

---

1. Composables: The Foundation of UI

What are Composables?
Composables are reusable UI components marked with @Composable that update automatically when data changes.

@Composable
fun Greeting(name: String) {
    Text("Hello, $name!") // Updates when 'name' changes
}

Key Features:

• Lightweight & efficient recomposition
• Nestable components for complex layouts
• Platform-agnostic (works on all targets)

---

2. State Management: Data-Driven UI

State = Dynamic UI
State changes trigger automatic UI updates through recomposition.

Basic State Example

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Count: $count") // Updates on click
    }
}

State Hoisting Pattern (Recommended)

// Stateless reusable component
@Composable
fun CounterDisplay(count: Int, onIncrement: () -> Unit) {
    Button(onClick = onIncrement) {
        Text("Count: $count")
    }
}

// Stateful parent
@Composable 
fun CounterApp() {
    var count by remember { mutableStateOf(0) }
    CounterDisplay(count) { count++ }
}

Why State Hoisting?
✅ Better testability
✅ Component reusability
✅ Clear separation of concerns

---

3. Layout Systems: Structure Your UI

Layout	Purpose	Code Example
Column	Vertical stacking	Column { Text("A"); Text("B") }
Row	Horizontal arrangement	Row { Text("Left"); Text("Right") }
Box	Element overlapping	Box { Image(); Text() }
LazyColumn	Optimized scrolling list	LazyColumn { items(100) { Item() }}

Responsive Layout Example

@Composable
fun ProfileCard() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        Image(/*...*/)
        Text("User Name", style = MaterialTheme.typography.headlineMedium)
        Button(onClick = { /*...*/ }) {
            Text("Follow")
        }
    }
}

---

4. Modifiers: Supercharge Styling

What Can Modifiers Do?

• Adjust sizing, padding, margins
• Add click handlers
• Apply shapes & shadows
• Create responsive layouts

Common Modifiers Table

Modifier	Effect	Example Usage
.padding(16.dp)	Adds spacing around element	Text(...).padding(16.dp)
.fillMaxWidth()	Full-width element	Button(...).fillMaxWidth()
.clickable { }	Adds click interaction	Box(...).clickable { onClick() }
.background()	Applies color/shape background	Text(...).background(Color.Blue)

Custom Modifier Example

fun Modifier.cardStyle() = this
    .background(Color.White, RoundedCornerShape(8.dp))
    .shadow(4.dp)

// Usage
Card(modifier = Modifier.cardStyle()) {
    // Content
}

---

Key Takeaways

1. Composables are reusable UI building blocks
2. State hoisting improves component reusability
3. Choose layouts based on content structure needs
4. Modifiers unlock powerful styling combinations
5. LazyColumn/LazyRow optimize list performance

Internal Link: Kotlin Multiplatform: A Comprehensive Guide to Cross-Platform Development.

External Link: Dive deeper with the official Kotlin Multiplatform docs.