The Widget-to-Compose Map

The Rosetta Stone for Flutter developers moving to Jetpack Compose.

Container / SizedBox

Box / Modifier.size

Compose uses Box and Modifiers instead of a dedicated Container widget.

Flutter

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Text('Hi'),
)

Compose

Box(
  modifier = Modifier
    .size(100.dp)
    .background(Color.Blue)
) { Text("Hi") }

Column / Row

Same mental model. Use Arrangement and Alignment to control spacing.

Flutter

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [Text('A'), Text('B')],
)

Compose

Column(
  verticalArrangement = Arrangement.Center,
) {
  Text("A")
  Text("B")
}

Stack

Box + align

Compose uses Box with modifiers to layer children.

Flutter

Stack(
  children: [
    Image.asset('bg'),
    Text('Overlay'),
  ],
)

Compose

Box {
  Image(painterResource(R.drawable.bg), null)
  Text("Overlay", modifier = Modifier.align(Alignment.Center))
}

ListView.builder

LazyColumn

LazyColumn is the Compose equivalent for efficient lists.

Flutter

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, i) => Text(items[i]),
)

Compose

LazyColumn {
  items(items) { item ->
    Text(item)
  }
}

StatefulWidget / setState

remember / mutableStateOf

State in Compose is held via remember and state delegates.

Flutter

int counter = 0;

setState(() => counter++);

Compose

var counter by remember { mutableStateOf(0) }

counter += 1 // UI updates auto

Expanded / Flexible

Modifier.weight

Use weight inside Row/Column to expand a child.

Flutter

Expanded(
  child: Container(color: Colors.red),
)

Compose

Box(
  modifier = Modifier
    .weight(1f)
    .background(Color.Red)
)

Padding widget

Modifier.padding

Padding is a modifier chained directly on the Composable.

Flutter

Padding(
  padding: EdgeInsets.all(8.0),
  child: Text('Hello'),
)

Compose

Text("Hello", modifier = Modifier.padding(8.dp))

Unlock the detailed implementation, source code, and senior interview questions.

One-time payment. Lifetime access.

This is just 1% of the knowledge required to become a Senior Android Engineer. Unlock the professional playbook.