Flight Status Widget (2)
by dockui
A production-ready SwiftUI Flight Status Widget (2) design exported from DesignUI.
- Platform
- SwiftUI
- Code
- Native Swift
- Format
- Screen
- Access
- Free
Code Snippet
import SwiftUI
import MapKit
struct FlightStatusWidget2View: View {
var body: some View {
VStack(spacing: 0) {
ZStack(alignment: .topLeading) {
Map(initialPosition: .region(MKCoordinateRegion(
center: CLLocationCoordinate2D(latitude: 37.3346, longitude: -122.009),
span: MKCoordinateSpan(latitudeDelta: 0.018, longitudeDelta: 0.018)
)), interactionModes: .all) {
Marker("Pickup", coordinate: CLLocationCoordinate2D(latitude: 40.8447, longitude: -73.9143))
.tint(Color.white.opacity(1))
Marker("Destination", coordinate: CLLocationCoordinate2D(latitude: 40.8457, longitude: -73.8868))
.tint(Color.white.opacity(1))
}
.mapStyle(.standard(elevation: .realistic, showsTraffic: true))
.mapControls {
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
VStack(alignment: .leading, spacing: 16) {
HStack(alignment: .center, spacing: 0) {
Spacer()
}
.frame(maxWidth: .infinity)
HStack(alignment: .center, spacing: 18) {
ZStack(alignment: .center) {
Image(systemName: "chevron.left")
.padding(.horizontal, 1)
.font(.system(size: 22, weight: .semibold))
}
Spacer()
VStack(alignment: .center, spacing: 4) {
Text("365 Broadway Ave")
.foregroundStyle(Color.white.opacity(0.72))
}
.padding(.horizontal, 14)
.padding(.vertical, 12)
.cornerRadius(26)
.glassEffect(.regular.interactive(), in: RoundedRectangle(cornerRadius: 30))
Spacer()
Spacer()
}
.frame(maxWidth: .infinity)
.padding(.vertical, 12)
Spacer()
}
.frame(maxWidth: .infinity)
.padding(.horizontal, 24)
.padding(.top, 12)
VStack(alignment: .leading, spacing: 0) {
Spacer()
VStack(alignment: .leading, spacing: 0) {
VStack(alignment: .center, spacing: 14) {
Text("Choose a ride")
.font(.system(size: 22, weight: .bold))
}
.frame(maxWidth: .infinity)
.padding(.top, 12)
.padding(.horizontal, 18)
.padding(.bottom, 18)
Divider()
ScrollView(.vertical, showsIndicators: false) {
VStack(alignment: .leading, spacing: 12) {
VStack(alignment: .leading, spacing: 12) {
HStack(alignment: .center, spacing: 12) {
ZStack(alignment: .center) {
RoundedRectangle(cornerRadius: 10)
.foregroundStyle(Color.white.opacity(0.1))
.frame(width: 74, height: 44)
Image(systemName: "car.fill")
.font(.system(size: 28, weight: .regular))
}
VStack(alignment: .leading, spacing: 4) {
HStack(alignment: .center, spacing: 6) {
Text("Taxi")
.font(.system(size: 22, weight: .semibold))
Image(systemName: "person.fill")
.foregroundStyle(Color.white.opacity(0.72))
.font(.caption)
Text("4")
.foregroundStyle(Color.white.opacity(0.72))
.font(.system(size: 14, weight: .semibold))
Spacer()
Text("$22.93")
.font(.system(size: 20, weight: .semibold))
}
.frame(maxWidth: .infinity)
Text("10:09 PM · 2 min")
.foregroundStyle(Color.white.opacity(0.72))
}
.frame(maxWidth: .infinity)
}
.frame(maxWidth: .infinity)
}
.frame(maxWidth: .infinity)
.padding(.horizontal, 14)
.padding(.vertical, 14)
.background(Color.primary.opacity(0.6).opacity(0.1))
.overlay(
RoundedRectangle(cornerRadius: 24)
.stroke(Color.primary.opacity(0.85), lineWidth: 5)
)
.cornerRadius(24)
VStack(alignment: .leading, spacing: 12) {
HStack(alignment: .center, spacing: 12) {
ZStack(alignment: .center) {
RoundedRectangle(cornerRadius: 10)
.foregroundStyle(Color(red: 1.0, green: 1.0, blue: 1.0, opacity: 1.0).opacity(0.1))
.frame(width: 74, height: 44)
Image(systemName: "suv.side.rear.open.fill")
.font(.system(size: 28, weight: .regular))
}
VStack(alignment: .leading, spacing: 4) {
HStack(alignment: .center, spacing: 6) {
Text("Suv")
.font(.system(size: 22, weight: .semibold))
Image(systemName: "person.fill")
.foregroundStyle(Color.white.opacity(0.72))
.font(.caption)
Text("6")
.foregroundStyle(Color.white.opacity(0.72))
.font(.system(size: 14, weight: .semibold))
Spacer()
Text("$28.53")
.font(.system(size: 20, weight: .semibold))
}
.frame(maxWidth: .infinity)
Text("10:09 PM · 2 min")
.foregroundStyle(Color.white.opacity(0.72))
}
.frame(maxWidth: .infinity)
}
.frame(maxWidth: .infinity)
}
.frame(maxWidth: .infinity)
.padding(.horizontal, 14)
.padding(.vertical, 14)
.background(Color.primary.opacity(0.6).opacity(0.1))
.cornerRadius(24)
HStack(alignment: .center, spacing: 12) {
Circle()
.foregroundStyle(Color.orange.opacity(0.9))
.frame(width: 20, height: 20)
Text("Earn 5% back with TaxiOne")
Spacer()
}
.frame(maxWidth: .infinity)
.padding(.horizontal, 14)
.padding(.vertical, 14)
.background(Color.primary.opacity(0.6).opacity(0.1))
.cornerRadius(16)
HStack(alignment: .center, spacing: 12) {
ZStack(alignment: .center) {
RoundedRectangle(cornerRadius: 8)
.foregroundStyle(Color.white.opacity(0.1))
.frame(width: 44, height: 44)
Image(systemName: "apple.logo")
.font(.system(size: 22, weight: .regular))
}
Text("Apple Pay")
.font(.system(size: 20, weight: .semibold))
Spacer()
Image(systemName: "chevron.right")
.foregroundStyle(Color.white.opacity(0.72))
.font(.system(.body, weight: .semibold))
}
.frame(maxWidth: .infinity)
.padding(.vertical, 8)
.padding(.horizontal, 12)
HStack(alignment: .center, spacing: 14) {
Text("Choose Taxi")
.foregroundStyle(Color.black)
.frame(maxWidth: .infinity)
.padding(.horizontal, 14)
.padding(.vertical, 14)
.background(Color.white.opacity(0.82))
.font(.system(size: 22, weight: .medium))
.multilineTextAlignment(.center)
.cornerRadius(12)
}
.frame(maxWidth: .infinity)
.padding(.top, 6)
}
.frame(maxWidth: .infinity)
.padding(.horizontal, 18)
.padding(.vertical, 18)
}
.frame(height: 420)
.frame(maxWidth: .infinity)
}
.frame(maxWidth: .infinity)
.glassEffect(.regular.interactive(), in: RoundedRectangle(cornerRadius: 22))
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
.ignoresSafeArea(.container, edges: .top)
#if os(iOS)
.statusBarHidden(true)
#endif
.preferredColorScheme(.dark)
}
}
#Preview {
FlightStatusWidget2View()
}More Templates
More Templates
View All TemplatesSimilar Blogs
View All Articles
How to Translate Xcode String Catalogs with AI
Learn how to efficiently translate Xcode string catalogs using AI fast, streamlining localization for your iOS and SwiftUI applications.
by dockui
May 4
How to optimize your SwiftUI app in 2026
Discover top strategies to optimize your SwiftUI app in 2026, enhancing performance, responsiveness, and maintainability with modern concurrency.
by dockui
Apr 29
SwiftUI: iOS Confirmation Alert (Confirm + Cancel)
SwiftUI iOS confirmation alert with Confirm and Cancel buttons. Beginners guide to building safe actions, destructive deletes, and commit dialogs.
by dockui
Nov 11
SwiftUI: IOS Haptic Feedback Guide 2026
Add click to vibrate haptic feedback in SwiftUI. Full guide to UIImpactFeedbackgenerator, success, error, selection, and tap vibration patterns with code.
by dockui
Nov 11Code copied to clipboard!