DEV Community: Michael Otieno Olang

Apple Watch & iMessage Integration in Flutter

Michael Otieno Olang — Thu, 09 Jul 2026 09:01:50 +0000

A Complete Developer Guide

App Bundle ID: com.example.demoapp
App Group: group.com.example.demoapp
Targets: Runner (iPhone) · DemoWatch Watch App · DemoMessages MessagesExtension

Architecture Overview
Dependencies Added
Xcode Setup (One-Time)
Apple Watch Integration
- 4.1 Flutter Side — WatchService
- 4.2 Syncing Data to the Watch
- 4.3 Listening for Watch Actions in Flutter
- 4.4 Native Watch UI (SwiftUI)
- 4.5 Watch Face Complications
iMessage Integration
- 5.1 Flutter Side — IMessageSyncService
- 5.2 Syncing Trip Data for iMessage
- 5.3 Native iMessage UI (UIKit/Swift)
Data Flow Diagrams
Publishing to the App Store
Build & Archive Checklist
Troubleshooting & Challenges Experienced

1. Architecture Overview

Flutter cannot run its UI engine on Apple Watch or inside iMessage extensions. Instead, we use two communication bridges:

Extension	Bridge Technology	Direction
Apple Watch	`WatchConnectivity` framework via `watch_connectivity` Flutter package	iPhone ↔ Watch (two-way, real-time)
iMessage	`App Groups` shared `UserDefaults` container via `shared_preference_app_group` package	Flutter → iMessage (one-way, cached)

┌─────────────────────┐         WatchConnectivity          ┌─────────────────────┐
│   Flutter App        │  ◄──────────────────────────────►  │  DemoWatch App   │
│   (iPhone)           │                                     │  (Apple Watch)      │
└─────────────────────┘                                     └─────────────────────┘
          │
          │  App Groups (UserDefaults)
          │  group.com.example.demoapp
          ▼
┌─────────────────────┐
│  iMessage Extension  │
│  DemoMessages      │
└─────────────────────┘

2. Dependencies Added

The following packages were added to pubspec.yaml:

dependencies:
  watch_connectivity: ^0.2.8        # Apple Watch two-way communication
  shared_preference_app_group: ^2.1.0  # Shared container for iMessage

Install with:

flutter pub get

3. Xcode Setup (One-Time)

3.1 App Groups Capability

App Groups allow all three targets to share a single data container (group.com.example.demoapp).

You must add this capability to each target in Xcode:

Open ios/Runner.xcworkspace in Xcode.
In the Project Navigator (left panel), select Runner target.
Go to Signing & Capabilities tab.
Click + Capability → App Groups.
Add: group.com.example.demoapp
Repeat steps 2–5 for DemoWatch Watch App target.
Repeat steps 2–5 for DemoMessages MessagesExtension target.

✅ Confirmation: Check the entitlements file at
ios/DemoWatch Watch App/DemoWatch Watch App.entitlements — it should contain:
<key>com.apple.security.application-groups</key>
<array>
    <string>group.com.example.demoapp</string>
</array>

3.2 Complication Data Source (Apple Watch only)

To enable watch face complications:

Select the DemoWatch Watch App target in Xcode.
Go to the Info tab.
Add a new row with key: CLKComplicationDataSource
Set value to: ComplicationController

3.3 Watch Target Platform Settings

The Watch target must resolve as a watchOS target during archive. If Xcode resolves it as iphoneos, the Watch asset catalog will be compiled as an iOS asset catalog and the archive will fail with:

Assets.xcassets: The stickers icon set, app icon set, or icon stack named "AppIcon" did not have any applicable content.

For the DemoWatch Watch App target, confirm these build settings in Debug, Release, and Profile:

Setting	Required value
`SDKROOT`	`watchos`
`SUPPORTED_PLATFORMS`	`watchos watchsimulator`
`TARGETED_DEVICE_FAMILY`	`4`
`ASSETCATALOG_COMPILER_APPICON_NAME`	`AppIcon`
`ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME`	`AccentColor`

The current project pins these in ios/Runner.xcodeproj/project.pbxproj. This matters because the project-level Flutter/iOS configuration sets SDKROOT = iphoneos and SUPPORTED_PLATFORMS = iphoneos; the Watch target must explicitly override that inherited iOS platform.

You can verify the resolved target settings with:

xcodebuild -showBuildSettings \
  -project ios/Runner.xcodeproj \
  -scheme "DemoWatch Watch App" \
  -configuration Release \
  -destination "generic/platform=watchOS" \
  -derivedDataPath /tmp/travler-derived-data \
  | rg "PLATFORM_NAME|SDKROOT|SUPPORTED_PLATFORMS|TARGETED_DEVICE_FAMILY|BUILT_PRODUCTS_DIR"

Expected output should include:

BUILT_PRODUCTS_DIR = .../Release-watchos
PLATFORM_NAME = watchos
SDKROOT = .../WatchOS.platform/.../WatchOS*.sdk
SUPPORTED_PLATFORMS = watchos watchsimulator
TARGETED_DEVICE_FAMILY = 4

3.4 Watch AppIcon Asset Catalog

The Watch app icon set lives at:

ios/DemoWatch Watch App/Assets.xcassets/AppIcon.appiconset

Contents.json must declare watch-specific icon slots, not only the 1024 marketing icon. The catalog should include these families:

Role	Sizes currently covered
`notificationCenter`	24x24, 27.5x27.5, 33x33
`companionSettings`	29x29 at 2x and 3x
`appLauncher`	40x40, 44x44, 46x46, 50x50, 51x51, 54x54
`quickLook`	86x86, 98x98, 108x108, 117x117, 129x129
`watch-marketing`	1024x1024

If new icon artwork is generated, preserve the filenames declared in Contents.json or update the JSON and PNGs together. A missing filename, wrong idiom, or iOS-only icon set will break archive.

4. Apple Watch Integration

4.1 Flutter Side — WatchService

File: lib/services/watch_service.dart

This service is the bridge between your Flutter app and the Apple Watch.

import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:watch_connectivity/watch_connectivity.dart';

class WatchService {
  final WatchConnectivity _watch = WatchConnectivity();
  StreamSubscription<Map<String, dynamic>>? _messageSubscription;

  // All raw messages from the Watch
  final _messageController = StreamController<Map<String, dynamic>>.broadcast();
  Stream<Map<String, dynamic>> get messageStream => _messageController.stream;

  // Only action commands from the Watch (e.g., quick_book, cancel_booking)
  final _actionController = StreamController<Map<String, dynamic>>.broadcast();
  Stream<Map<String, dynamic>> get actionStream => _actionController.stream;

  WatchService() {
    _messageSubscription = _watch.messageStream.listen((message) {
      _messageController.add(message);
      if (message.containsKey('action')) {
        _actionController.add(message);
      }
    });
  }

  Future<bool> isSupported() async => await _watch.isSupported;
  Future<bool> isReachable() async => await _watch.isReachable;

  void dispose() {
    _messageSubscription?.cancel();
    _messageController.close();
    _actionController.close();
  }
}

4.2 Syncing Data to the Watch

Call syncTravelData() whenever the user's data changes — after login, booking, or wallet top-up. The data is sent using Application Context, which means the Watch receives the latest state even if it was not connected at the time.

final watchService = WatchService();

await watchService.syncTravelData(
  walletBalance: 125.50,
  walletCurrency: 'Ksh',
  nextTripDestination: 'Nairobi → Mombasa',
  nextTripDate: 'Aug 12, 2026',
  nextTripTime: '08:30 AM',
  nextTripSeat: '14B',
  qrCodeData: 'TICKET-XYZ-12345',  // the raw ticket/QR string
  activeBookingsCount: 2,
  unreadNotifications: 3,
);

Best places to call this:

After a successful booking API response
After the user tops up their wallet
In your home screen initState() when the app opens

4.3 Listening for Watch Actions in Flutter

When the user presses Quick Book or Cancel on the Apple Watch, the Watch sends a message to Flutter via actionStream. Listen to this in your BLoC, provider, or main widget tree:

final watchService = WatchService();

watchService.actionStream.listen((actionData) {
  final action = actionData['action'] as String?;

  switch (action) {
    case 'quick_book':
      // Trigger your booking flow / open the booking screen
      NavigationKeys.mainNav.currentState?.pushNamed('/booking');
      break;

    case 'cancel_booking':
      final destination = actionData['destination'] as String?;
      // Call your cancel API
      context.read<BookingBloc>().add(CancelBookingEvent(destination: destination));
      break;
  }
});

4.4 Native Watch UI (SwiftUI)

File: ios/DemoWatch Watch App/ContentView.swift

The Watch app has a 4-tab swipeable interface. Each tab is a SwiftUI view powered by WatchViewModel:

Tab	View	Content
1	`TripDashboardView`	Next trip destination, date, time, seat + Quick Book & Cancel buttons
2	`TicketQRView`	Auto-generated QR code scannable at the boarding point
3	`WalletView`	Wallet balance + active bookings count
4	`SupportNotificationsView`	Call Support button + unread notification count

File: ios/DemoWatch Watch App/WatchViewModel.swift

The WatchViewModel is the native Swift equivalent of WatchService. It implements WCSessionDelegate to receive data from Flutter and manages all published state for the SwiftUI views.

// How the Watch receives data from Flutter:
func session(_ session: WCSession, didReceiveApplicationContext applicationContext: [String : Any]) {
    DispatchQueue.main.async {
        self.parseData(applicationContext)
    }
}

// How the Watch sends actions back to Flutter:
func sendActionToFlutter(action: String, payload: [String: Any] = [:]) {
    var message = payload
    message["action"] = action
    if session.isReachable {
        session.sendMessage(message, replyHandler: nil, errorHandler: nil)
    }
}

4.5 Watch Face Complications

File: ios/DemoWatch Watch App/ComplicationController.swift

Complications display DemoTravel info right on the Apple Watch clock face — without the user needing to open the app.

Supported complication families:

Family	Watch Face	What's Shown
`graphicCorner`	Infograph	`🚌 Mombasa` + departure time
`graphicCircular`	Infograph Modular	Bus icon + time
`graphicBezel`	Infograph	Circle with full destination curved around it
`modularLarge`	Modular	3-row table: Trip / Time / Seat
`utilitarianLarge`	Utility	`🚌 Nairobi → Mombasa · 08:30`
`utilitarianSmall`	Utility	`🚌 08:30`
`modularSmall`	Modular	`Bus` + time
`circularSmall`	Color / Chronograph	`Bus` + time

How complications stay up to date:

When WatchViewModel.parseData() receives new data from Flutter, it automatically:

Writes the data to UserDefaults(suiteName: "group.com.example.demoapp")
Calls CLKComplicationServer.sharedInstance().reloadTimeline(for:) on all active complications

This means the watch face updates instantly every time you call syncTravelData() from Flutter.

The ComplicationController reads from UserDefaults:

let defaults = UserDefaults(suiteName: "group.com.example.demoapp")
let destination = defaults?.string(forKey: "nextTripDestination") ?? "No Trip"
let time        = defaults?.string(forKey: "nextTripTime") ?? "--"
let seat        = defaults?.string(forKey: "nextTripSeat") ?? "--"

5. iMessage Integration

5.1 Flutter Side — IMessageSyncService

File: lib/services/imessage_sync_service.dart

This service writes trip and wallet data into the shared App Group container so the iMessage extension can read them in Swift.

import 'dart:convert';
import 'package:shared_preference_app_group/shared_preference_app_group.dart';

const String _kAppGroup = 'group.com.example.demoapp';

class DemoTrip {
  final String id;
  final String destination;
  final String origin;
  final String date;
  final String time;
  final String seat;
  final String qrCodeData;

  DemoTrip({
    required this.id,
    required this.destination,
    required this.origin,
    required this.date,
    required this.time,
    required this.seat,
    required this.qrCodeData,
  });

  Map<String, dynamic> toJson() => {
    'id': id,
    'destination': destination,
    'origin': origin,
    'date': date,
    'time': time,
    'seat': seat,
    'qrCodeData': qrCodeData,
  };
}

class IMessageSyncService {
  static const String _tripsKey  = 'demo_imessage_trips';
  static const String _walletKey = 'demo_imessage_wallet';

  // Call once at app startup (e.g. in main.dart)
  Future<void> init() async {
    await SharedPreferenceAppGroup.setAppGroup(_kAppGroup);
  }

  Future<void> syncAll({
    required List<DemoTrip> trips,
    required double walletBalance,
    required String walletCurrency,
  }) async {
    await syncTrips(trips);
    await syncWalletBalance(walletBalance, walletCurrency);
  }

  Future<void> syncTrips(List<DemoTrip> trips) async {
    final encoded = jsonEncode(trips.map((t) => t.toJson()).toList());
    await SharedPreferenceAppGroup.setString(_tripsKey, encoded);
  }

  Future<void> syncWalletBalance(double balance, String currency) async {
    await SharedPreferenceAppGroup.setString(
      _walletKey,
      jsonEncode({'balance': balance, 'currency': currency}),
    );
  }
}

5.2 Syncing Trip Data for iMessage

Step 1 — Initialise once at app startup (e.g., in main.dart before runApp):

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // ... existing initialisation ...

  // Initialise iMessage sync
  final iMessageSync = IMessageSyncService();
  await iMessageSync.init();

  runApp(const MyApp());
}

Step 2 — Sync whenever data changes:

final iMessageSync = IMessageSyncService();

await iMessageSync.syncAll(
  walletBalance: 125.50,
  walletCurrency: 'Ksh',
  trips: [
    DemoTrip(
      id: 'booking-001',
      origin: 'Nairobi',
      destination: 'Mombasa',
      date: 'Aug 12, 2026',
      time: '08:30 AM',
      seat: '14B',
      qrCodeData: 'TICKET-XYZ-12345',
    ),
    DemoTrip(
      id: 'booking-002',
      origin: 'Mombasa',
      destination: 'Nairobi',
      date: 'Aug 15, 2026',
      time: '02:00 PM',
      seat: '7A',
      qrCodeData: 'TICKET-ABC-67890',
    ),
  ],
);

5.3 Native iMessage UI (UIKit/Swift)

File: ios/DemoMessages MessagesExtension/MessagesViewController.swift

The iMessage extension is built with UIKit. It:

Reads trip and wallet data from UserDefaults(suiteName: "group.com.example.demoapp")
Displays a scrollable list of upcoming trips
When a trip is tapped, inserts a rich MSMessage bubble into the chat

Reading from the shared container in Swift:

let defaults = UserDefaults(suiteName: "group.com.example.demoapp")

// Read trips
if let tripsString = defaults?.string(forKey: "demo_imessage_trips"),
   let data = tripsString.data(using: .utf8),
   let rawList = try? JSONSerialization.jsonObject(with: data) as? [[String: Any]] {
    trips = rawList.compactMap { DemoTrip(dict: $0) }
}

// Read wallet
if let walletString = defaults?.string(forKey: "demo_imessage_wallet"),
   let data = walletString.data(using: .utf8),
   let dict = try? JSONSerialization.jsonObject(with: data) as? [String: Any] {
    walletBalance  = dict["balance"]  as? Double ?? 0
    walletCurrency = dict["currency"] as? String ?? "Ksh"
}

Sending a rich iMessage bubble:

func sendTrip(_ trip: DemoTrip) {
    guard let conversation = currentConversation else { return }

    let message = MSMessage(session: conversation.selectedMessage?.session ?? MSSession())
    let layout  = MSMessageTemplateLayout()

    layout.caption             = "🚌 \(trip.origin) → \(trip.destination)"
    layout.subcaption          = "\(trip.date) at \(trip.time)"
    layout.trailingCaption     = "Seat \(trip.seat)"
    layout.trailingSubcaption  = "Trip Booking"
    layout.image               = generateQRImage(from: trip.qrCodeData)  // QR code

    message.layout = layout
    message.url    = URL(string: "https://example.com")!

    conversation.insert(message, completionHandler: nil)
}

Important: do not name your stored conversation property activeConversation. MSMessagesAppViewController already exposes an inherited activeConversation property. Use a separate name such as:

private var currentConversation: MSConversation?

override func willBecomeActive(with conversation: MSConversation) {
    currentConversation = conversation
    loadData()
}

What the recipient sees:

The recipient sees a custom rich bubble in their chat containing:

🚌 Nairobi → Mombasa (caption)
Aug 12, 2026 at 08:30 AM (subcaption)
Seat 14B (trailing)
QR code image embedded in the bubble

6. Data Flow Diagrams

Apple Watch — Data Flow

Flutter (Dart)                        Apple Watch (Swift)
─────────────────                     ────────────────────
WatchService.syncTravelData()
        │
        │  WatchConnectivity
        │  updateApplicationContext()
        │ ─────────────────────────►  WatchViewModel.didReceiveApplicationContext()
        │                                      │
        │                                      ├──► Updates @Published UI state
        │                                      ├──► Persists to UserDefaults (App Group)
        │                                      └──► Reloads watch face complications
        │
        │  WCSession.sendMessage()
        │ ◄─────────────────────────  WatchViewModel.sendActionToFlutter()
        │           (user taps Quick Book / Cancel on Watch)
        │
WatchService.actionStream emits
        │
        └──► Your BLoC / Provider handles the action

iMessage — Data Flow

Flutter (Dart)                        iMessage Extension (Swift)
─────────────────                     ──────────────────────────
IMessageSyncService.syncAll()
        │
        │  UserDefaults
        │  (suiteName: group.com.example.demoapp)
        │ ─────────────────────────►  MessagesViewController.loadData()
        │                                      │
        │                                      ├──► Renders trip list
        │                                      └──► User taps trip → sends MSMessage bubble
        │
        │  (No return path — iMessage is one-way)

7. Publishing to the App Store

✅ Good news: The Apple Watch and iMessage extensions are bundled inside your main iOS app. You do not submit them separately. When users download DemoTravel from the App Store, the Watch app automatically installs on their paired Apple Watch.

Step-by-step publishing process:

Step 1 — Archive the app:

flutter build ipa

Or in Xcode: Product → Archive (with "Any iOS Device" selected as the destination).

Step 2 — Open Xcode Organizer:
After archiving, Xcode Organizer opens automatically. Select your archive and click Distribute App.

Step 3 — Upload to App Store Connect:
Choose App Store Connect → Upload. Follow the prompts. The Watch and iMessage extensions are included automatically.

Step 4 — Add Apple Watch Screenshots:
In App Store Connect, navigate to your app listing. You will now see a section for Apple Watch Screenshots. Take screenshots from the Watch Simulator in Xcode and upload them here. Apple requires these before the app can be reviewed.

Required Watch screenshot sizes:

40mm: 394 × 324 px
41mm: 352 × 430 px (Series 7/8/9)
44mm: 368 × 448 px
45mm: 396 × 484 px

Step 5 — Submit for Review:
Once screenshots are uploaded and everything looks good, click Submit for Review. Apple reviews the Watch and iMessage extensions as part of the same review process.

8. Build & Archive Checklist

Use this checklist before creating an App Store or TestFlight archive that includes Apple Watch and iMessage targets.

8.1 Before archiving

Open ios/Runner.xcworkspace, not ios/Runner.xcodeproj, when using Xcode manually.
Confirm the Runner scheme includes dependencies on:
- DemoWatch Watch App
- DemoMessages MessagesExtension
Confirm DemoWatch Watch App resolves as watchOS:
- PLATFORM_NAME = watchos
- BUILT_PRODUCTS_DIR contains Release-watchos
- SUPPORTED_PLATFORMS = watchos watchsimulator
Confirm DemoMessages MessagesExtension resolves as iPhoneOS:
- PLATFORM_NAME = iphoneos
- PRODUCT_TYPE = com.apple.product-type.app-extension.messages
Confirm all targets share the App Group:
- Runner
- DemoWatch Watch App
- DemoMessages MessagesExtension

8.2 Useful build-only verification

This command checks the Watch and iMessage target build path without running tests or static analysis:

xcodebuild build \
  -project ios/Runner.xcodeproj \
  -scheme "DemoWatch Watch App" \
  -configuration Release \
  -destination "generic/platform=watchOS" \
  -derivedDataPath /tmp/travler-derived-data \
  CODE_SIGNING_ALLOWED=NO

Successful Watch asset catalog output looks like:

CompileAssetCatalogVariant ... DemoWatch Watch App/Assets.xcassets
... --app-icon AppIcon --target-device watch --platform watchos
/* com.apple.actool.compilation-results */
.../Assets.car
LinkAssetCatalog ... DemoWatch Watch App/Assets.xcassets
note: Emplaced .../DemoWatch Watch App.app/Assets.car

8.3 What not to run for this workflow

For fast archive debugging, skip:

flutter test
flutter analyze
dart analyze

The archive blockers here are Xcode target configuration, asset catalogs, and native Swift extension compilation. Unit/widget tests and Dart static analysis do not diagnose those issues.

9. Troubleshooting & Challenges Experienced

Watch data not updating?

Make sure syncTravelData() is being called after a booking or login.
Confirm the Watch app is installed on a paired Watch.
On a physical device, both the iPhone and Watch must be connected.
Check that the App Group group.com.example.demoapp is listed in both the Runner and Watch targets in Xcode.

iMessage extension shows "No upcoming trips"?

Make sure IMessageSyncService.init() is called at app startup before any sync calls.
Confirm syncAll() has been called at least once.
Verify the App Group identifier group.com.example.demoapp is set on both Runner and DemoMessages targets.
Double check the key names in Swift (demo_imessage_trips, demo_imessage_wallet) match the constants in Dart.

Watch face complications not appearing?

Confirm CLKComplicationDataSource = ComplicationController is set in the Watch target's Info.plist in Xcode.
Long-press your watch face → Edit → browse Complications for "DemoTravel".
After calling syncTravelData() in Flutter, the complication should update within seconds.

Build error: `No such module 'CoreImage.CIFilterBuiltins'`

This module does not exist on watchOS. Use plain import CoreImage instead.
Use CIFilter(name: "CIQRCodeGenerator") instead of CIFilter.qrCodeGenerator().
Use Image(cgImage:, scale:, label:) in SwiftUI instead of Image(uiImage:).

`pod install` fails with xcodeproj compatibility error?

This is a known CocoaPods issue with Xcode 26+. Run flutter run from the command line instead of pod install directly — Flutter's tooling handles the pod installation correctly.

Archive error: `AppIcon did not have any applicable content`

Symptom:

/ios/DemoWatch Watch App/Assets.xcassets:
The stickers icon set, app icon set, or icon stack named "AppIcon" did not have any applicable content.

Root causes seen in this project:

The Watch target was resolving as iphoneos, so Xcode was trying to compile watch-only icon slots as iOS icons.
The Watch AppIcon.appiconset/Contents.json only exposed watch-marketing content or incomplete watch slots.

Fix:

In ios/Runner.xcodeproj/project.pbxproj, ensure the DemoWatch Watch App target has:

SDKROOT = watchos;
SUPPORTED_PLATFORMS = "watchos watchsimulator";
TARGETED_DEVICE_FAMILY = 4;
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;

In ios/DemoWatch Watch App/Assets.xcassets/AppIcon.appiconset/Contents.json, declare actual idiom: watch entries for notificationCenter, companionSettings, appLauncher, and quickLook, plus watch-marketing.
Confirm every filename referenced by Contents.json exists and has the expected pixel dimensions.

Verification:

jq empty "ios/DemoWatch Watch App/Assets.xcassets/AppIcon.appiconset/Contents.json"
sips -g pixelWidth -g pixelHeight "ios/DemoWatch Watch App/Assets.xcassets/AppIcon.appiconset/"*.png

Then confirm the target is not resolving as iPhoneOS:

xcodebuild -showBuildSettings \
  -project ios/Runner.xcodeproj \
  -scheme "DemoWatch Watch App" \
  -configuration Release \
  -destination "generic/platform=watchOS" \
  -derivedDataPath /tmp/travler-derived-data \
  | rg "PLATFORM_NAME|SDKROOT|SUPPORTED_PLATFORMS|BUILT_PRODUCTS_DIR"

Build error: `No available simulator runtimes for platform watchsimulator`

This can happen when actool runs in a restricted environment or Xcode cannot access simulator runtime services.

Symptoms:

No available simulator runtimes for platform watchsimulator.
SimServiceContext supportedRuntimes=[]

Fix:

Run the build from normal Terminal or Xcode, not a restricted sandbox.
Open Xcode once and let it finish installing components.
Check Xcode → Settings → Platforms and install the required watchOS simulator runtime if missing.
Use a device/generic watchOS destination for archive:

xcodebuild build \
  -project ios/Runner.xcodeproj \
  -scheme "DemoWatch Watch App" \
  -configuration Release \
  -destination "generic/platform=watchOS" \
  -derivedDataPath /tmp/travler-derived-data \
  CODE_SIGNING_ALLOWED=NO

Build error: `activeConversation` override in iMessage extension

Symptom:

overriding property must be as accessible as its enclosing type
cannot override with a stored property 'activeConversation'
ambiguous use of 'activeConversation'

Cause:

MSMessagesAppViewController already has an inherited activeConversation property. A stored property with the same name in MessagesViewController conflicts with it.

Fix:

Rename the custom property:

private var currentConversation: MSConversation?

override func willBecomeActive(with conversation: MSConversation) {
    currentConversation = conversation
    loadData()
}

private func sendTrip(_ trip: DemoTrip) {
    guard let conversation = currentConversation else { return }
    // insert MSMessage...
}

Build reaches `Run Script` and appears stuck

After Watch assets and iMessage compile issues are fixed, the build can spend a long time in Flutter/Xcode script phases, especially Run Script, Thin Binary, or Flutter embed steps.

What to check:

Confirm previous failures are gone before interrupting. In the log, Watch asset success looks like Emplaced .../DemoWatch Watch App.app/Assets.car.
Run from a normal Terminal when possible so script phases can access the full user environment.
If the script is silent for several minutes, rerun with Xcode's report navigator open to see the exact active phase.

Documentation generated for DemoTravel v3.5.4 — Apple Watch & iMessage Integration
This sample project is provided for educational purposes.
Bundle ID: com.example.demoapp · App Group: group.com.example.demoapp

Flutter Apps and Android's 16KB Page Size Requirement: A Complete Developer Guide

Michael Otieno Olang — Thu, 04 Sep 2025 06:44:24 +0000

Google Play Store is rolling out a significant change that every Android developer needs to know about. Starting November 1, 2025, all new apps and app updates targeting Android 15+ must be compatible with 16KB memory pages. This requirement has caught many developers off guard, especially those working with Flutter applications.
In this comprehensive guide, we'll dive deep into what this means, why it's happening, and most importantly, how to ensure your Flutter apps are ready.

Understanding Memory Page Sizes
Memory pages are fixed-size blocks of virtual memory that the operating system uses to manage RAM efficiently. Think of them as standardized containers for data that help the OS organize and access memory. For years, Android devices have predominantly used 4KB page sizes. This worked well for devices with limited RAM, but as smartphones evolved with more memory and processing power, larger page sizes became beneficial.

Why 16KB Pages?
The shift to 16KB pages isn't arbitrary.
Here's what the research shows:

Faster App Launches: Up to 30% improvement in cold start times
Better Memory Efficiency: Reduced memory fragmentation
Improved System Performance: Faster boot times and overall responsiveness
Enhanced Battery Life: More efficient memory management reduces CPU overhead

Step-by-Step Implementation Guide
1.Update Flutter SDK

# Check current version
flutter --version

# Update to latest stable
flutter upgrade

# Verify you're on the latest stable channel
flutter channel stable
flutter upgrade

Minimum recommended versions:

Flutter SDK: 3.16.0 or later
Dart SDK: 3.2.0 or later

2.Update Android Gradle Plugin (AGP)
In your android/build.gradle:

buildscript {
    ext.kotlin_version = '1.9.10'
    dependencies {
        // Update to AGP 8.5.0 or later
        classpath 'com.android.tools.build:gradle:8.1.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

3.Update Android NDK
In android/app/build.gradle:

android {
    compileSdkVersion 35
    ndkVersion "28.x.xxxxxxx" 

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

4.Dependency Audit
Check if you have the latest versions of every dependency in the pubspec.yaml file

Critical Plugins to Check

Focus on these plugin categories:
Camera/Media: camera, image_picker, video_player
Database: sqflite, hive, objectbox
Networking: diowith native interceptors
Firebase: All Firebase plugins
Maps: google_maps_flutter
Payment: stripe_android, payment gateway SDKs

Navigating the Journey: Becoming a Mobile App Developer

Michael Otieno Olang — Sun, 31 Mar 2024 15:42:25 +0000

We'll embark on a journey together into the realm of mobile app development. In today's digital age, mobile applications have become an integral part of our daily lives, from communication and entertainment to productivity and commerce. If you've ever wondered what it takes to create these innovative tools that reside in our pockets, you're in the right place. In this guide, we'll explore the steps, tools, and resources you need to kickstart your career as a mobile app developer.

Understanding the Landscape:

Before diving into the technical aspects, it's crucial to grasp the landscape of mobile app development. Mobile platforms such as iOS and Android dominate the market, each with its own set of development tools, languages, and guidelines. Additionally, cross-platform frameworks like React Native and Flutter offer the ability to build apps for multiple platforms using a single codebase. Understanding these options will help you chart your path forward.

Learning the Fundamentals:

As with any craft, mastering the fundamentals is essential for success. Start by familiarizing yourself with programming languages commonly used in mobile app development, such as Java, Kotlin, Swift, or Dart. Online platforms like Codecademy, Udemy, and Coursera offer comprehensive courses tailored to beginners.

Choosing Your Platform:

Once you've gained a solid understanding of programming fundamentals, it's time to choose your platform. Are you drawn to the sleek design and user experience of iOS apps, or do you prefer the flexibility and customization options of Android? Your decision will influence the tools and technologies you'll need to learn next.

Exploring Development Tools:

Equipped with a programming language and platform of choice, it's time to explore the development tools available to you. For iOS development, Xcode is the primary Integrated Development Environment (IDE) used by developers, while Android Studio is the go-to choice for Android development. Additionally, familiarize yourself with version control systems like Git, which are indispensable for collaborative development.

Mastering Mobile UI/UX Design:

In the competitive world of mobile apps, user interface (UI) and user experience (UX) design play a crucial role in determining the success of your app. Learn the principles of mobile UI/UX design, including navigation patterns, typography, and usability testing. Tools like Sketch, Figma, and Adobe XD can aid in prototyping and designing your app's interface.

Embracing Continuous Learning:

Mobile app development is a dynamic field that constantly evolves with new technologies and trends. Embrace a mindset of continuous learning by staying updated on the latest developments, attending conferences, and participating in online communities. Engage with fellow developers, seek mentorship, and don't be afraid to experiment with new ideas.

Building Your Portfolio:

As you gain proficiency in mobile app development, start building a portfolio of projects to showcase your skills to potential employers or clients. Whether it's a personal project, freelance work, or contributions to open-source projects, a strong portfolio demonstrates your capabilities and passion for the craft.

Excited to share insights on Android Development Testing!

Michael Otieno Olang — Mon, 11 Mar 2024 08:55:59 +0000

In the world of mobile app development, ensuring seamless user experiences is paramount. That's why Testing on Android development holds such crucial significance. 🛠️

Here are some key points I'd like to highlight:

1️⃣ Unit Testing: Building robust and reliable code starts here. Unit testing allows developers to test individual components in isolation, ensuring they function as expected.

2️⃣ Integration Testing: Assembling the pieces of your app? Integration testing ensures that these components work together seamlessly, catching any potential conflicts or issues.

3️⃣ UI Testing: Your app's interface is the user's gateway to functionality. UI testing verifies that each element behaves as intended, providing a smooth and intuitive experience.

4️⃣ Automation: Embracing automation accelerates testing cycles and enhances efficiency. Tools like Espresso and Robolectric streamline testing processes, enabling developers to focus more on innovation.

5️⃣ Device Fragmentation: Testing across various devices and OS versions is key to ensuring compatibility and performance consistency. Emulators and real-device testing help tackle this challenge effectively.

Incorporating these testing strategies into your Android development workflow not only enhances the quality of your app but also boosts user satisfaction and retention.

A Simple Dart Tutorial

Michael Otieno Olang — Wed, 11 Oct 2023 18:57:32 +0000

Dart Tutorial

Welcome to the Dart Tutorial! This tutorial is designed to help you get started with Dart programming. Whether you're a beginner or an experienced developer, you'll find valuable information here to enhance your skills in Dart.

Dart Tutorial
Table of Contents
Introduction
Prerequisites
Getting Started
Topics Covered
Dart Basics
- 1. Hello, Dart!
- 2. Variables and Data Types
- 3. Control Flow
- 4. Functions
Contributing
Happy coding!

Introduction

Dart is a modern, open-source programming language developed by Google. It's known for its speed, efficiency, and ease of learning. Dart can be used for web, mobile, server, and desktop applications.

This tutorial aims to provide a comprehensive introduction to Dart, covering the basics and gradually progressing to more advanced concepts.

Prerequisites

Before starting this tutorial, make sure you have the following prerequisites:

Basic understanding of programming concepts
Code editor (e.g., Visual Studio Code, IntelliJ IDEA)
Dart SDK installed on your system

If you haven't installed Dart SDK yet, you can download it from the official Dart website.

Getting Started

To get started with Dart, follow these steps:

Install Dart SDK on your system.
Set up your development environment by configuring a code editor (e.g., Visual Studio Code) for Dart.
Clone this repository`

Topics Covered

This tutorial covers the following topics:

Dart basics
Variables and data types
Control flow (if-else, switch, loops)
Functions and error handling

Feel free to explore the code and documentation for each topic in detail.

Dart Basics

1. Hello, Dart!

The traditional "Hello, World!" program in Dart:

dart void main() { print('Hello, Dart!'); }

2. Variables and Data Types

In Dart, you can declare variables using var, int, double, String, bool, and more. Example:
dart void main() { var name = 'John Doe'; // String int age = 30; // Integer double height = 6.2; // Double bool isStudent = true; // Boolean }
Dart is a statically typed language, meaning that variable types are known at compile time. However, you can use var to have Dart infer the type.

3. Control Flow

Dart supports common control flow structures like if, else, switch, and loops (for, while, do-while). Example:

`dart
void main() {
var age = 30;

if (age < 18) {
print('You are a minor.');
} else if (age >= 18 && age < 60) {
print('You are an adult.');
} else {
print('You are a senior citizen.');
}
}
`

4. Functions

Creating a simple function in Dart:

`dart
void main() {
print(greet('John Doe'));
}

String greet(String name) {
  return 'Hello, $name!';
}

`
Dart also supports anonymous functions (functions without a name) and arrow functions (functions with a single expression). Example:

`dart
void main() {
var numbers = [1, 2, 3, 4, 5];

// Anonymous function
numbers.forEach((number) {
print(number);
});

// Arrow function
numbers.forEach((number) => print(number));
}
`

Contributing

If you find any issues or have suggestions for improvement, please feel free to open an issue or create a pull request in my GitHub Repository. We welcome contributions from the community to make this tutorial even better!

To contribute, follow these steps:

Fork the repository.
Create a new branch for your contribution.
Make your changes and commit them.
Push the changes to your fork.
Open a pull request with a detailed description of your contribution.

Happy coding!

My Flutter Journey

Michael Otieno Olang — Thu, 02 Mar 2023 22:14:53 +0000

Flutter is a framework based on dart and developed by google for creating cross-platform applications. It can be used to create android, iOS, Windows, Mac OS, and Linux applications under one code base. It also uses Firebase as its back-end but you can also use the various back-end tech stacks for your back- end such as node js and many others.

I was introduced to flutter 4 months ago by a tech friend who by that time was using Kotlin to develop mobile applications, majorly android applications. We were to create our association's Mobile app within a week and he suggested that for ease and productivity we use the flutter framework for the app. We were both new to the framework but we really wanted to try out this new mobile development technique. We had downloaded a number of YouTube crash courses and some clone apps tutorials.

I never knew what I was doing, I never knew what was happening but I could only follow the YouTube tutor. After some two days, our UI was done and we presented the app as our project

I am still a beginner in the field but these are some of the advantages of Flutter I have noticed so far;

Flutter is easy to learn
Flutter has a great UI design which is simple to implement
Flutter uses widgets
Running Apps is relatively easy
Its beginner friendly

I would really advise you guys to try out Flutter
Thank you

Creating a simple Linked List In C programming

Michael Otieno Olang — Thu, 17 Nov 2022 14:00:57 +0000

Linked Lists are list of elements in which the various elements are linked together. Data in a linked list are stored in a linear manner. The Data are placed in nodes and the nodes are connected in a specific desired fashion.
Node is a container or a box which contains data and other information in it. In a list a node is connected to a different node forming a chain of nodes.
The first step in making a linked list is making a node which will store data into it.
C program for a Linked List
We first create a structure named node which stores an integer named data and a pointer named next to another structure (node).

struct node
{
    int data;
    struct node *next;
};

We then make two nodes (structure named node) and allocating space to them using the malloc function.

struct node *a, *b;
    a = malloc(sizeof(struct node));
    b = malloc(sizeof(struct node));

We then set the values of data of the nodes a and b.

    a->data = 10;
    b->data = 20;

We then store the address of b in the next variable of a. Thus, next of a is now storing the address of b or we can say the next of a is pointing to b.Since there is no node for the next of b, so we are making next of b null.

    a->next = b;
    b->next = NULL;

We then Print to see the output

printf("%d\n%d\n", a->data, a->next->data);

Below is the Combined Code

Shell Programming Using C Programming Language

Michael Otieno Olang — Sat, 11 Jun 2022 18:38:03 +0000

The following C_Program is used to append text from one file to the end of another file. Does any one have an Idea on how I can implement the code using the COMMANDLINE ARGUMENTS and the various FLAGS

A Must have Vs Code Extensions

Michael Otieno Olang — Sat, 28 May 2022 15:39:35 +0000

Gitlens
Better Comments
Prettier
ESLint If there are any,kindly add them comment sections.

DEV Community: Michael Otieno Olang

Apple Watch & iMessage Integration in Flutter

A Complete Developer Guide

Table of Contents

1. Architecture Overview

2. Dependencies Added

3. Xcode Setup (One-Time)

3.1 App Groups Capability

3.2 Complication Data Source (Apple Watch only)

3.3 Watch Target Platform Settings

3.4 Watch AppIcon Asset Catalog

4. Apple Watch Integration

4.1 Flutter Side — WatchService

4.2 Syncing Data to the Watch

4.3 Listening for Watch Actions in Flutter

4.4 Native Watch UI (SwiftUI)

4.5 Watch Face Complications

5. iMessage Integration

5.1 Flutter Side — IMessageSyncService

5.2 Syncing Trip Data for iMessage

5.3 Native iMessage UI (UIKit/Swift)

6. Data Flow Diagrams

Apple Watch — Data Flow

iMessage — Data Flow

7. Publishing to the App Store

Step-by-step publishing process:

8. Build & Archive Checklist

8.1 Before archiving

8.2 Useful build-only verification

8.3 What not to run for this workflow

9. Troubleshooting & Challenges Experienced

Watch data not updating?

iMessage extension shows "No upcoming trips"?

Watch face complications not appearing?

Build error: No such module 'CoreImage.CIFilterBuiltins'

pod install fails with xcodeproj compatibility error?

Archive error: AppIcon did not have any applicable content

Build error: No available simulator runtimes for platform watchsimulator

Build error: activeConversation override in iMessage extension

Build reaches Run Script and appears stuck

Flutter Apps and Android's 16KB Page Size Requirement: A Complete Developer Guide

Navigating the Journey: Becoming a Mobile App Developer

Understanding the Landscape:

Learning the Fundamentals:

Choosing Your Platform:

Exploring Development Tools:

Mastering Mobile UI/UX Design:

Embracing Continuous Learning:

Building Your Portfolio:

Excited to share insights on Android Development Testing!

A Simple Dart Tutorial

Dart Tutorial

Table of Contents

Introduction

Prerequisites

Getting Started

Topics Covered

Dart Basics

1. Hello, Dart!

2. Variables and Data Types

3. Control Flow

4. Functions

Contributing

Happy coding!

My Flutter Journey

Creating a simple Linked List In C programming

Shell Programming Using C Programming Language

A Must have Vs Code Extensions

Build error: `No such module 'CoreImage.CIFilterBuiltins'`

`pod install` fails with xcodeproj compatibility error?

Archive error: `AppIcon did not have any applicable content`

Build error: `No available simulator runtimes for platform watchsimulator`

Build error: `activeConversation` override in iMessage extension

Build reaches `Run Script` and appears stuck