Elements

Everyone of the frameworks has similar basic building blocks

Text

Text is really powerful in every framework, it is also one of the simplest building blocks. It displays the string that is passed to it.

SwiftUI

Text(“Sample Text”)

Docs

Flutter

Text(‘Sample Text’);

Docs

Jetpack Compose

Text(“Sample Text”)

Docs

Button

SwiftUI

Button(“Displayed text”) {
    print(“Button was pressed”)
}

Docs

Flutter

TextButton(
  onPressed: () { print(‘Button was pressed’); },
  child: Text(‘Displayed text’),
);

Docs

Jetpack Compose

Button(
    onClick = { print(“Button was pressed”) }
) {
    Text(“Displayed Text”)
}

Docs

Image

SwiftUI

Image(“AssetName”)

Docs

Flutter

Image.asset(’pathTo/AssetName.png‘)

Docs

Jetpack Compose

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)

Docs

Shapes

SwiftUI

Rectangle()
    .fill(Color.red)
    .frame(width: 100, height: 100)

Circle()
    .fill(Color.red)
    .frame(width: 100, height: 100)
    

Docs

Flutter

Jetpack Compose

Box(
    modifier = Modifier.size(100.dp).clip(RectangleShape).background(Color.Red)
)

Box(
    modifier = Modifier.size(100.dp).clip(CircleShape).background(Color.Red)
)

TextField

SwiftUI

struct SimpleTextField: View {
    @State var enteredText = “Default Text”
    
    var body: some View {
        TextField($enteredText)
    }
}

Docs

Jetpack Compose

@Composable
fun SimpleTextField() {
    var enteredText by remember { mutableStateOf(TextFieldValue("Default Text")) }

    TextField(
        value = text,
        onValueChange = { newText ->
            enteredText = newText
        }
    )
}

Docs

Sheet

SwiftUI

@State var isSheetPresented = false

Button(“Present Sheet”) {
  isSheetPresented = true
}.sheet(isPresented: $isSheetPresented, onDismiss: { /* Executed when the sheet is dismissed */ }) {
  Text(“Sheet is presented”)
}

Docs

Jetpack Compose

var isSheetPresented by remember { mutableStateOf(false) }

Button(
    onClick = { isSheetPresented = true }
) {
    Text(“Present Sheet”)
}
if (isSheetPresented) {
    ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
        Text(”Sheet is presented”)
    }
}

Docs