EasyApp

Home Screen Widgets

Learn how EasyAppSwiftUI implements Home Screen widgets

Overview

EasyAppWidget delivers consistent brand presence and quick entry points on the iOS Home Screen. This guide focuses on the four system families supported on the Home Screen (Small, Medium, Large, Extra Large) and explains how to extend the EasyApp experience on the Home Screen.

Feature Highlights

  • EasyAppWidgetEntryView selects SmallWidgetView, MediumWidgetView, LargeWidgetView, or ExtraLargeWidgetView according to the active WidgetFamily.
  • Provider leverages AppIntentTimelineProvider to supply SimpleEntry data shared across all Home Screen families.
  • Each size uses Link with the easyapp:// URL scheme to launch in-app features such as the microphone and camera.
  • .containerBackground(for: .widget) adopts the system background to maintain the glassmorphism look and dark-mode compatibility.

Directory Map

  • EasyAppWidget.swift — entry point that registers the widget configuration and supported families.
  • EasyAppWidgetControl.swift — defines SimpleEntry and the ConfigurationAppIntent used only for timeline data.
  • WidgetsComponents/ — hosts Home Screen SwiftUI views: SmallWidgetView.swift, MediumWidgetView.swift, LargeWidgetView.swift, ExtraLargeWidgetView.swift.
  • Other documents cover Lock Screen, Dynamic Island, and Control Center implementations.

Getting Started

  1. Run the EasyAppWidgetExtension scheme in Xcode to install the extension onto a simulator or device.
  2. Long press the Home Screen, tap the + button, search for EasyApp Widget.
  3. Choose the desired size (Small, Medium, Large, Extra Large) and place it on the Home Screen.

Key Code Snippet

EasyAppWidget.swift defines the Home Screen widget configuration:

struct EasyAppWidget: Widget {
    let kind: String = "EasyAppWidget"

    var body: some WidgetConfiguration {
        AppIntentConfiguration(
            kind: kind,
            intent: ConfigurationAppIntent.self,
            provider: Provider()
        ) { entry in
            EasyAppWidgetEntryView(entry: entry)
                .containerBackground(for: .widget) {
                    Color(UIColor.systemBackground)
                }
        }
        .configurationDisplayName("EasyApp Widget")
        .description("A customizable widget for quick actions and time display.")
        .supportedFamilies([
            .systemSmall,
            .systemMedium,
            .systemLarge,
            .systemExtraLarge
        ])
    }
}

Adjust supportedFamilies to limit the widget to specific sizes. When introducing a new size, add the corresponding SwiftUI view under WidgetsComponents/.

Size Guidelines

  • Small (SmallWidgetView) presents the brand emoji and current time in a vertical stack for concise messaging.
  • Medium (MediumWidgetView) shows time and date on the left with two quick actions on the right. Update Link destinations to point at any in-app deep link.
  • Large (LargeWidgetView) provides sectional layout space for quick actions or data cards.
  • Extra Large (ExtraLargeWidgetView) targets iPad Home Screens; display multiple data sets or charts while preserving spacing and corner styling.

Reuse existing RoundedRectangle, Circle, and .quaternary/.secondary color treatments to keep visuals consistent.

Preview & Debug

  • #Preview(as: ...) blocks at the bottom of each view file let you inspect every size in the Xcode Canvas.
  • Verify both light and dark mode to ensure Color(UIColor.systemBackground) and system colors remain legible.
  • When adjusting Provider.timeline, generate future entryDate values and call WidgetCenter.shared.reloadAllTimelines() during debugging to force reloads.

Troubleshooting

  • Widget missing: confirm the extension ships with the app and the target toggles "Include in Application Bundle".
  • Incorrect time/date: rely on the TimelineEntry.date provided by the timeline or regenerate entries with Date.now.
  • Quick actions not working: ensure the main app registers the easyapp:// scheme and handles incoming URLs.
  • Visual inconsistencies: avoid opaque backgrounds; prefer system materials and existing styling helpers.

Last updated on