The Widget-to-Swift Map

The interactive Rosetta Stone for Flutter Developers moving to SwiftUI.

Container / SizedBox

VStack / HStack / Color / .frame()

En SwiftUI, un Container no existe como tal. Usamos Layout Stacks o modificadores de frame sobre cualquier vista.

Flutter

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

SwiftUI

Text('Hi')
  .frame(width: 100, height: 100)
  .background(Color.blue)

Column / Row

VStack / HStack

La alineación y distribución funcionan igual, pero SwiftUI usa Spacers explícitos en lugar de MainAxisAlignment.spaceBetween.

Flutter

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

SwiftUI

VStack(alignment: .center) {
  Text('A')
  Text('B')
}

Stack

ZStack

Ambos apilan elementos en el eje Z. En SwiftUI, el último elemento de la lista es el que queda arriba.

Flutter

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

SwiftUI

ZStack {
  Image('bg')
  Text('Overlay')
}

ListView.builder

List / ForEach

SwiftUI List maneja automáticamente el scroll y el reciclaje de celdas. Es mucho más declarativo.

Flutter

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

SwiftUI

List(items) { item in
  Text(item)
}

StatefulWidget / setState

@State / View body

En SwiftUI no llamas a un método para redibujar. Al cambiar una propiedad marcada con @State, la vista se invalida y se recalcula automáticamente.

Flutter

int counter = 0;

setState(() => counter++);

SwiftUI

@State private var counter = 0

counter += 1 // UI updates auto

Expanded / Flexible

Spacer() / .frame(maxWidth: .infinity)

Para ocupar todo el espacio disponible, SwiftUI usa Spacers dentro de Stacks o modificadores de frame.

Flutter

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

SwiftUI

Color.red
  .frame(maxWidth: .infinity)

Padding widget

.padding() modifier

En SwiftUI el padding es un modificador, no un widget envolvente. El orden de los modificadores importa.

Flutter

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

SwiftUI

Text('Hello')
  .padding(8)

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