Heart Monitor App with SwiftUI

Design, Features, and Implementation

In today’s fast-paced world, keeping track of your heart’s performance is more important than ever. Whether you’re managing a health condition or simply seeking peace of mind, a dedicated Heart Monitor App can empower you with real‑time insights and historical data about your cardiovascular health. In this article, we’ll walk through the process of designing and developing a heart monitor app using SwiftUI 2 and iOS 18+, with special attention to the use of SF Symbols, Swift Charts, and gradient backgrounds to create a modern and engaging interface.

RxDigita

Overview

The Heart Monitor App is designed to provide users with:

Real-time monitoring: Instantaneous updates of the current heart rate, trend indicators, and quick alerts if an abnormal pattern is detected.

Historical insights: Detailed charts and statistics that track heart rate trends over time.

Event logging and analysis: Tools for logging symptomatic events (such as palpitations or dizziness) and reviewing historical heart data.

Customization and integration: Seamless integration with health platforms (like Apple Health) and customizable settings for alerts, notifications, and data privacy.

By leveraging SwiftUI 2’s declarative interface paradigm, the app offers an intuitive, modern design that scales beautifully across various device sizes while taking full advantage of iOS 18+ capabilities.

All Screens

User Interface Design Philosophy

The UI design of the Heart Monitor App focuses on clarity, ease of use, and a consistent aesthetic that instills trust and reliability. Key design elements include:

Edge-to-edge gradient backgrounds: Gradients are used across different screens (from subtle light grays and blues for dashboards to vibrant oranges and purples for alerts) to create visual interest and set the mood.

SF Symbols: These system icons provide crisp, consistent iconography that enhances navigation and reinforces key features (e.g., using a “heart.fill” symbol for heart rate displays or a “gearshape” for settings).

Modular components: Reusable views (such as stat tiles and quick action buttons) ensure consistency across screens and streamline future updates.

Data visualization with Swift Charts: Integrating charts to display heart rate trends, historical data, and predictions, provides users with meaningful insights at a glance.

Key Features and Screens. Below are some of the main screens and features that form the Heart Monitor App:

Dashboard Screen

Provide a snapshot of the current heart rate, trend indicators, and key statistics.

Features

• A prominent display showing the current heart rate (e.g., “72 BPM”) along with a trend arrow.
• A mini waveform icon (using SF Symbol "waveform.path.ecg") to suggest real‑time heart activity.
• Key stats tiles (e.g., Average Heart Rate, Resting Heart Rate, HRV) rendered as modular components.
• A sparkline chart visualizing recent heart rate trends.
• Quick action buttons for navigation to history, logging events, workouts, and settings.

Design Elements

A clean, modern layout with a scrollable view and a consistent color scheme that contrasts with a gradient background for a modern, data‑driven feel.

History Screen

Allow users to review historical heart data and trends over selected time ranges.

Features

• A segmented control for choosing between day, week, month, or custom time ranges.
• A detailed line chart (built with Swift Charts) that plots heart rate over time.
• Statistical summaries below the chart (average, maximum, and minimum heart rates).
• A scrollable list of events with detailed information on each heart rate measurement.
• An export/share button for generating reports in CSV or PDF formats.

Event Logging Screen

Enable users to log symptomatic events manually along with contextual details (e.g., time, notes, symptoms).

Features

• Compact date/time pickers to log the event time.
• Toggle switches for common symptoms (e.g., chest pain, dizziness).
• A text field for additional notes.
• A “Save” button that validates and records the event.

Workout & Activity Screen

Provide insights into heart rate behavior during physical activity.

Features

• A live heart rate display with zone indicators (e.g., Fat Burn, Cardio, Peak).
• A breakdown of time spent in different heart rate zones using horizontal bars.
• Controls for starting and ending a workout session.
• Real‑time updates on workout stats (average heart rate, maximum heart rate, calories burned).

Alerts & Notifications Screen

Allow users to customize alert thresholds and notification preferences.

Features

• Toggles for enabling/disabling high/low heart rate alerts.
• Input fields for setting threshold values (e.g., high alert above 100 BPM).
• Options for irregular rhythm alerts.
• A segmented control for choosing notification styles (banner, sound, vibrate).
• Settings for “Do Not Disturb” times.

Settings & Profile Screen

Let users configure personal details, target ranges, data integrations, and security options.

Features

• Profile editing (name, photo, email).
• Customizable target heart rate zones.
• Integration toggles for health platforms (Apple Health, Google Fit).
• Options for data backup and privacy (e.g., PIN lock or Face ID).

Technical Implementation

The Heart Monitor App is built entirely using SwiftUI 2, which allows for a declarative and highly modular approach. Key technical highlights include:

Navigation and Layout: The app uses NavigationView and ScrollView extensively to ensure a smooth, intuitive navigation experience. Each screen is encapsulated in its own SwiftUI view, making the code modular and easier to maintain.

Swift Charts: For data visualization, Swift Charts is used to create interactive line charts and bar charts. These charts are configured to hide axes when necessary for a cleaner sparkline look or to show detailed axes for historical data.

Reusable Components: Custom views like StatTileView and QuickActionButtonView are designed to be reused across multiple screens. This not only reduces code duplication but also guarantees a consistent look and feel.

Edge-to-Edge Backgrounds with Gradients: By using LinearGradient and RadialGradient with the .ignoresSafeArea() modifier, the app creates modern, immersive backgrounds that enhance the overall aesthetic without interfering with content readability.

Data Models and State Management: The app defines simple data models (e.g., for heart rate data, events, and sleep cycles) that conform to Identifiable, making them easy to use with SwiftUI’s list and ForEach views. State variables (@State) are used to manage user input and dynamic data across different screens.

Code Insight: A Peek Under the Hood

One key component of the app is the Dashboard screen. For example, a simplified snippet from the Dashboard might look like this:

struct HeartDashboardView: View {
    let heartRateData: [HeartRateData] = [
        HeartRateData(time: "6 AM", rate: 65),
        HeartRateData(time: "7 AM", rate: 70),
        // ... more dummy data
    ]
    var body: some View {
            NavigationView {
                ZStack {
                    LinearGradient(
                        gradient: Gradient(colors: [Color("LightBlue"), Color.orange.opacity(0.4)]),
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                    .ignoresSafeArea()
                    ScrollView {
                        VStack(spacing: 24) {
                            // Current heart rate display
                            VStack(spacing: 8) {
                                Text("72 BPM")
                                    .font(.system(size: 48, weight: .bold))
                                    .foregroundColor(.primary)
                                Image(systemName: "arrow.up")
                                    .foregroundColor(.green)
                            }
                            // ... additional views for stats and charts
                        }
                        .padding(.vertical)
                    }
                }
                .navigationTitle("Heart Monitor")
            }
        }
    }

This snippet highlights the use of gradient backgrounds, modular views, and navigation structure that are consistent throughout the app.

Integration with iOS and Future Scalability

Built for iOS 18+ using SwiftUI 2, the Heart Monitor App takes full advantage of modern iOS capabilities. Some future scalability considerations include:

Data Synchronization: Integrating with cloud-based data services ensures that users’ heart data is backed up and synchronized across devices.

HealthKit Integration: With HealthKit, the app can pull in additional data (like activity levels or historical ECG data) to provide more comprehensive insights.

Accessibility and Localization: SwiftUI’s support for dynamic type, accessibility labels, and localization makes it easier to adapt the app for a broader audience.

Modular Architecture: The separation of concerns (each screen and feature in its own view and model) makes it easier to extend the app, whether adding new features like advanced analytics or integrating additional health metrics (such as sleep or fitness tracking).

Conclusion

The Heart Monitor App exemplifies how modern development techniques — such as SwiftUI’s declarative UI framework, Swift Charts for data visualization, and modular design principles — can be harnessed to create an elegant, functional health monitoring tool. Whether you’re a developer looking to learn best practices for building health apps on iOS, or a health technology enthusiast seeking a reliable heart monitoring solution, this project offers valuable insights into designing intuitive, user-centered apps.

By following the design philosophy and code structure outlined in this article, you can build an app that not only meets modern user expectations but also lays the foundation for future enhancements and integrations.

Git Repo coming soon …

~Ash