Composing Views

The goal of all these UI-frameworks is to structure the app in small reusable pieces that are easy to maintain and understand. Every langauge has it’s own way of defining such a piece. In SwiftUI everything is a view, in Flutter everything is a widget and in Jetpack Compose everything is a composable function

Overview

Components

SwiftUI

struct SampleView: View {
  var body: some View {
    // Parts of the view
  }
}

// Using this view as part of another view
SampleView()

Docs

Flutter

class SampleView extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return // Parts of the view
  }
}

// Using this view as part of another view
SampleView();

Jetpack Compose

@Composable
fun SampleView() {
    // Parts of the view
}

// Using this view as part of another view
SampleView()

Docs

Passing data into a view

Passing data allows to paramterize each component

SwiftUI

struct SampleView: View {
  let title: String

  var body: some View {
    Text(title)
  }
}

// Using this view as part of another view
SampleView(title: „Sample“)

Docs

Flutter

class SampleView extends StatelessWidget {

  final String title;
  
  SampleView({
      required this.title
  })

  @override
  Widget build(BuildContext context) {
    return Text(title);
  }
}

// Using this view as part of another view
SampleView(‚Sample‘);

Jetpack Compose

@Composable
fun SampleView(title: String) {
    Text(title)
}

// Using this view as part of another view
SampleView(“Sample“)

Default Values

SwiftUI

struct SampleView {

  var title = “Default Title”

  var body: some View {
    Text(title)
  }
}

// title is “Default Title”
SampleView()

// title is “Other Title”
SampleView(title: “Other Title”)

Docs

Flutter

class SampleView extends StatelessWidget {

  final String title;
  
  SampleView({
      this.title = ‘Default Title’
  })

  @override
  Widget build(BuildContext context) {
    return Text(title);
  }
}

// title is ‘Default Title’
SampleView();

// title is ‘Other Title’
SampleView(‘Other Title‘);

Jetpack Compose

@Composable
fun SampleView(title: String = “Default Title”) {
    Text(title)
}

// Using this view as part of another view
SampleView(“Sample“)

Docs

Passing Actions

SwiftUI

struct SampleButton: View {

  let action: () -> Void
  
  var body: some View {
    Button(“Sample”) {
      action()
    }
  }
}

SampleButton {
  print(“SampleButton pressed”)
}

SampleButton(action: { print(“SampleButton pressed”) }

struct ReturnDateButton: View {

  let action: (Date) -> Void
  
  var body: some View {
    Button(“Return Date”) {
      action(Date.now)
    }
  }
}

ReturnDateButton { returnedDate in
  print(returnedDate)
}

struct PassDateButton: View {

  let getDate: () -> Date
  
  var body: some View {
    Button(“Get Date”) {
      print(getDate())
    } 
  }
}

PassDateButton {
  return Date.now
}

Flutter

Jetpack Compose

Wrapping Components

SwiftUI

struct ConsoleButton<Label: View>: View {

  var label: () -> Label

  var body: some View {
    Button {
      print(“Button pressed”)
    } label: {
      label()
    }
  }
}