Swift UI for Fluter Developers

Swift UI is a declarative UI toolkit. Therefore, Swift UI shares many characteristics with Flutter. However, Swift UI also includes a number of details that will be foreign to a Flutter developer. Such differences include syntax, paradigm, and available resources.

This guide provides a rapid introduction to Swift UI details that may not be immediately evident to a Flutter developer.

View structs instead of Widgets

Swift UI doesn't use Widget subclasses to declare pieces of a UI. Instead, Swift UI uses View subclasses to declare pieces of a UI. And technically they aren't "subclasses" - they're structs that conform to the View protocol. But you can think of Swift UI Views as the equivalent of Flutter's Widgets.

struct MyView: View {
  // TODO: implement the View, AKA widget.
}

body property instead of build() method

Instead of defining a build() method within a Widget, Swift UI developers define a body property within a View.

struct MyView: View {
  var body: some View {
    // TODO: build the body of this View, AKA the build() of the widget.
  }
}

Closures {} instead of child properties

In Flutter, Widgets are typically composed within other Widgets by using a property called child or children.

ContextMenu(
  children: [
    Text("Cut"),
    Text("Copy"),
    Text("Paste"),
    if (isSymbol)
      Text("Jump to Definition"),
  ],
);

In Swift UI, a special language feature is used to make it seem like no property is used at all to compose Views within Views. Swift UI uses trailing closures, which are expected to produce one or more Views. These closures are called ViewBuilders.

ContextMenu() {
    Text("Cut")
    Text("Copy")
    Text("Paste")
    if isSymbol {
        Text("Jump to Definition")
    }
}

The ability to pass a closure as an argument, while declaring the closure AFTER the invocation, is a Swift language feature. It's called Escaping Closures

System Icons

Many Swift UI examples include string references to system icons, e.g., "tray.and.arrow.down.fill". You might wonder where you can find a list of all such icons.

Swift UI calls these icons "symbols" and there is no simple web directory of available symbols. Instead, you must download the SF Symbols app for Mac, which browses all available symbols.