Written by Federico Zanetello

Description: Widgets are bite-sized pieces of information from your app that someone can choose to place on their home screen or Today view. Discover the process of building the views for a widget from scratch using SwiftUI. Brush up on the syntax that you’ll need for widget-specific construction and learn how to incorporate those commands and customize your widget’s interface for a great glanceable experience. To learn more about widgets, be sure to check out "Meet WidgetKit" and "Widgets Code-along".

• Widgets are self-contained: we can adapt them while also supporting older versions of our macOS/iOS's.
• Use .previewContent(WidgetPreviewContext(family: .system..)) on SwiftUI previews to display the widget layout.
• Do not define your own corner radius in a widget, use ContainerRelativeShape instead:

struct PillView : View {
    var title: Text
    var color: Color

    var body: some View {
        Text(title)
            .background(ContainerRelativeShape().fill(color))
    }
}

• ContainerRelativeShape is a new shape type that will take on the path of the nearest container shape specified by a parent with an appropriate corner radius based on the position of the shape.
• use the .isPlaceholder(true) modifier on a preview to display the widget preview (note: .isPlaceholder is not available on Xcode 12b1)
• if something should not be replaced by a placeholder, we need to mark it with .isPlaceholder(false)
• if we want the same view to support multiple widget families/sizes, we can to so by adding an environment variable for the widget family: @Environment(\.widgetFamily) var widgetFamily
• To display a live countdown or similar, use the new Date API:

// +2 hours
// -3 months
Text(event.startDate, style: .offset)

// 2 hours, 23 minutes – Automatically updating as time pass
Text(event.startDate, style: .relative)

// 36:59:01 – Automatically updating as time pass
Text(event.startDate, style: .timer)

• These date formats will automatically update the view as time passes (without the need of redrawing it): it's a great way to make your widgets feel alive on the home screen.