0
# iOS Integration
1

2
iOS-specific integration patterns and UIKit interoperability for Material3 components in Compose Multiplatform iOS UIKit x64 applications.
3

4
## Capabilities
5

6
### UIViewController Integration
7

8
Core integration between Compose Material3 content and iOS UIKit through UIViewController.
9

10
```kotlin { .api }
11
/**
12
 * Creates a UIViewController that hosts Compose content with Material3 theming
13
 * @param configure configuration block for the UIViewController
14
 * @param content Compose content with Material3 components
15
 * @return UIViewController that can be integrated with iOS UIKit
16
 */
17
fun ComposeUIViewController(
18
    configure: ComposeUIViewControllerConfiguration.() -> Unit = {},
19
    content: @Composable () -> Unit
20
): UIViewController
21

22
/**
23
 * Configuration for ComposeUIViewController
24
 */
25
class ComposeUIViewControllerConfiguration {
26
    /**
27
     * Whether the UIViewController should respect iOS safe areas
28
     */
29
    var enforceStrictPlistSanityCheck: Boolean
30
    
31
    /**
32
     * Opaque background configuration
33
     */
34
    var opaque: Boolean
35
}
36
```
37

38
**Usage Examples:**
39

40
```kotlin
41
// Basic integration
42
fun MainViewController() = ComposeUIViewController {
43
    MaterialTheme {
44
        MyApp()
45
    }
46
}
47

48
// Advanced configuration
49
fun MainViewController() = ComposeUIViewController(
50
    configure = {
51
        opaque = false
52
        enforceStrictPlistSanityCheck = false
53
    }
54
) {
55
    MaterialTheme(
56
        colorScheme = if (isSystemInDarkTheme()) {
57
            darkColorScheme()
58
        } else {
59
            lightColorScheme()
60
        }
61
    ) {
62
        MyApp()
63
    }
64
}
65
```
66

67
### System Theme Integration
68

69
iOS system theme detection and integration with Material3 theming.
70

71
```kotlin { .api }
72
/**
73
 * Detects if the iOS system is currently in dark theme mode
74
 * @return true if system is in dark mode, false otherwise
75
 */
76
@Composable
77
expect fun isSystemInDarkTheme(): Boolean
78
```
79

80
**Usage Examples:**
81

82
```kotlin
83
@Composable
84
fun AppTheme(
85
    content: @Composable () -> Unit
86
) {
87
    val darkTheme = isSystemInDarkTheme()
88
    
89
    val colorScheme = when {
90
        darkTheme -> darkColorScheme(
91
            primary = Color(0xFFBB86FC),
92
            onPrimary = Color(0xFF000000),
93
            primaryContainer = Color(0xFF3700B3),
94
            onPrimaryContainer = Color(0xFFFFFFFF),
95
            secondary = Color(0xFF03DAC6),
96
            onSecondary = Color(0xFF000000),
97
            surface = Color(0xFF121212),
98
            onSurface = Color(0xFFFFFFFF),
99
            background = Color(0xFF121212),
100
            onBackground = Color(0xFFFFFFFF)
101
        )
102
        else -> lightColorScheme(
103
            primary = Color(0xFF6200EE),
104
            onPrimary = Color(0xFFFFFFFF),
105
            primaryContainer = Color(0xFFBB86FC),
106
            onPrimaryContainer = Color(0xFF000000),
107
            secondary = Color(0xFF03DAC6),
108
            onSecondary = Color(0xFF000000),
109
            surface = Color(0xFFFFFFFF),
110
            onSurface = Color(0xFF000000),
111
            background = Color(0xFFFFFFFF),
112
            onBackground = Color(0xFF000000)
113
        )
114
    }
115
    
116
    MaterialTheme(
117
        colorScheme = colorScheme,
118
        content = content
119
    )
120
}
121

122
// Usage in iOS app
123
fun MainViewController() = ComposeUIViewController {
124
    AppTheme {
125
        Scaffold(
126
            topBar = {
127
                TopAppBar(
128
                    title = { Text("iOS Material App") },
129
                    colors = TopAppBarDefaults.topAppBarColors(
130
                        containerColor = MaterialTheme.colorScheme.primaryContainer,
131
                        titleContentColor = MaterialTheme.colorScheme.onPrimaryContainer
132
                    )
133
                )
134
            }
135
        ) { paddingValues ->
136
            // App content automatically adapts to iOS light/dark theme
137
            Surface(
138
                modifier = Modifier
139
                    .fillMaxSize()
140
                    .padding(paddingValues),
141
                color = MaterialTheme.colorScheme.background
142
            ) {
143
                // Your Material3 content here
144
            }
145
        }
146
    }
147
}
148
```
149

150
### iOS App Structure Integration
151

152
Common patterns for integrating Material3 components into iOS app structure.
153

154
**Usage Examples:**
155

156
Complete iOS app with Material3 navigation:
157

158
```kotlin
159
@Composable
160
fun IOSMaterialApp() {
161
    val navController = rememberNavController()
162
    
163
    AppTheme {
164
        Scaffold(
165
            topBar = {
166
                TopAppBar(
167
                    title = { Text("Material iOS App") },
168
                    navigationIcon = {
169
                        IconButton(onClick = { 
170
                            // Handle iOS-style back navigation
171
                            navController.popBackStack()
172
                        }) {
173
                            Icon(
174
                                Icons.AutoMirrored.Filled.ArrowBack,
175
                                contentDescription = "Back"
176
                            )
177
                        }
178
                    }
179
                )
180
            },
181
            bottomBar = {
182
                NavigationBar {
183
                    val currentDestination = navController.currentBackStackEntryAsState().value?.destination
184
                    
185
                    listOf(
186
                        "home" to Icons.Default.Home,
187
                        "search" to Icons.Default.Search,
188
                        "profile" to Icons.Default.Person
189
                    ).forEach { (route, icon) ->
190
                        NavigationBarItem(
191
                            selected = currentDestination?.route == route,
192
                            onClick = {
193
                                navController.navigate(route) {
194
                                    // iOS-style navigation behavior
195
                                    popUpTo(navController.graph.findStartDestination().id) {
196
                                        saveState = true
197
                                    }
198
                                    launchSingleTop = true
199
                                    restoreState = true
200
                                }
201
                            },
202
                            icon = { Icon(icon, contentDescription = route) },
203
                            label = { Text(route.capitalize()) }
204
                        )
205
                    }
206
                }
207
            }
208
        ) { paddingValues ->
209
            NavHost(
210
                navController = navController,
211
                startDestination = "home",
212
                modifier = Modifier.padding(paddingValues)
213
            ) {
214
                composable("home") { HomeScreen() }
215
                composable("search") { SearchScreen() }
216
                composable("profile") { ProfileScreen() }
217
            }
218
        }
219
    }
220
}
221

222
// iOS Entry Point
223
fun MainViewController() = ComposeUIViewController {
224
    IOSMaterialApp()
225
}
226
```
227

228
### iOS-Specific Material3 Patterns
229

230
Material3 components adapted for iOS interaction patterns and design expectations.
231

232
**iOS-Style Cards with Material3:**
233

234
```kotlin
235
@Composable
236
fun IOSStyleCardList() {
237
    LazyColumn(
238
        contentPadding = PaddingValues(16.dp),
239
        verticalArrangement = Arrangement.spacedBy(12.dp)
240
    ) {
241
        items(dataItems) { item ->
242
            Card(
243
                modifier = Modifier.fillMaxWidth(),
244
                colors = CardDefaults.cardColors(
245
                    containerColor = MaterialTheme.colorScheme.surface,
246
                    contentColor = MaterialTheme.colorScheme.onSurface
247
                ),
248
                elevation = CardDefaults.cardElevation(
249
                    defaultElevation = 2.dp // Subtle elevation for iOS
250
                ),
251
                onClick = {
252
                    // iOS-style navigation
253
                    navigateToDetail(item)
254
                }
255
            ) {
256
                Row(
257
                    modifier = Modifier
258
                        .fillMaxWidth()
259
                        .padding(16.dp),
260
                    verticalAlignment = Alignment.CenterVertically
261
                ) {
262
                    Surface(
263
                        modifier = Modifier.size(40.dp),
264
                        shape = CircleShape,
265
                        color = MaterialTheme.colorScheme.primaryContainer
266
                    ) {
267
                        Icon(
268
                            Icons.Default.Star,
269
                            contentDescription = null,
270
                            tint = MaterialTheme.colorScheme.onPrimaryContainer,
271
                            modifier = Modifier.padding(8.dp)
272
                        )
273
                    }
274
                    
275
                    Spacer(modifier = Modifier.width(16.dp))
276
                    
277
                    Column(modifier = Modifier.weight(1f)) {
278
                        Text(
279
                            text = item.title,
280
                            style = MaterialTheme.typography.titleMedium,
281
                            color = MaterialTheme.colorScheme.onSurface
282
                        )
283
                        Text(
284
                            text = item.subtitle,
285
                            style = MaterialTheme.typography.bodyMedium,
286
                            color = MaterialTheme.colorScheme.onSurfaceVariant
287
                        )
288
                    }
289
                    
290
                    Icon(
291
                        Icons.AutoMirrored.Filled.KeyboardArrowRight,
292
                        contentDescription = "Navigate",
293
                        tint = MaterialTheme.colorScheme.onSurfaceVariant
294
                    )
295
                }
296
            }
297
        }
298
    }
299
}
300
```
301

302
**iOS-Style Forms with Material3:**
303

304
```kotlin
305
@Composable
306
fun IOSStyleSettingsForm() {
307
    LazyColumn(
308
        modifier = Modifier.fillMaxSize(),
309
        contentPadding = PaddingValues(16.dp),
310
        verticalArrangement = Arrangement.spacedBy(16.dp)
311
    ) {
312
        item {
313
            Card(
314
                modifier = Modifier.fillMaxWidth(),
315
                colors = CardDefaults.cardColors(
316
                    containerColor = MaterialTheme.colorScheme.surface
317
                )
318
            ) {
319
                Column(modifier = Modifier.padding(16.dp)) {
320
                    Text(
321
                        "Notifications",
322
                        style = MaterialTheme.typography.titleMedium,
323
                        modifier = Modifier.padding(bottom = 16.dp)
324
                    )
325
                    
326
                    settingsOptions.forEach { (title, isEnabled) ->
327
                        Row(
328
                            modifier = Modifier
329
                                .fillMaxWidth()
330
                                .padding(vertical = 8.dp),
331
                            horizontalArrangement = Arrangement.SpaceBetween,
332
                            verticalAlignment = Alignment.CenterVertically
333
                        ) {
334
                            Text(
335
                                title,
336
                                style = MaterialTheme.typography.bodyLarge
337
                            )
338
                            Switch(
339
                                checked = isEnabled.value,
340
                                onCheckedChange = { isEnabled.value = it },
341
                                colors = SwitchDefaults.colors(
342
                                    checkedThumbColor = MaterialTheme.colorScheme.primary,
343
                                    checkedTrackColor = MaterialTheme.colorScheme.primaryContainer
344
                                )
345
                            )
346
                        }
347
                        
348
                        if (title != settingsOptions.last().first) {
349
                            HorizontalDivider(
350
                                modifier = Modifier.padding(vertical = 8.dp),
351
                                color = MaterialTheme.colorScheme.outline.copy(alpha = 0.2f)
352
                            )
353
                        }
354
                    }
355
                }
356
            }
357
        }
358
    }
359
}
360
```
361

362
### Build Configuration for iOS x64
363

364
Required build configuration for using Material3 with iOS UIKit x64 target.
365

366
**build.gradle.kts Configuration:**
367

368
```kotlin
369
plugins {
370
    kotlin("multiplatform")
371
    id("org.jetbrains.compose") version "1.8.2"
372
    id("org.jetbrains.kotlin.plugin.compose") version "2.1.0"
373
}
374

375
kotlin {
376
    // iOS x64 target for Intel-based simulators
377
    iosX64 {
378
        binaries {
379
            framework {
380
                baseName = "shared"
381
                isStatic = true
382
                
383
                // Export Compose and Material3 for iOS
384
                export(compose.runtime)
385
                export(compose.foundation)
386
                export(compose.material3)
387
            }
388
        }
389
    }
390
    
391
    sourceSets {
392
        commonMain.dependencies {
393
            implementation(compose.runtime)
394
            implementation(compose.foundation)
395
            implementation(compose.material3)
396
            implementation(compose.components.resources)
397
        }
398
        
399
        iosMain.dependencies {
400
            // iOS-specific dependencies if needed
401
        }
402
    }
403
}
404

405
compose.experimental {
406
    // Enable experimental features for iOS
407
    uiKitIntegration {}
408
}
409
```
410

411
**iOS Project Integration:**
412

413
In your iOS Xcode project, import and use the generated framework:
414

415
```swift
416
import SwiftUI
417
import shared // Your Kotlin framework
418

419
struct ContentView: View {
420
    var body: some View {
421
        ComposeView()
422
            .ignoresSafeArea(.all) // Let Material3 handle safe areas
423
    }
424
}
425

426
struct ComposeView: UIViewControllerRepresentable {
427
    func makeUIViewController(context: Context) -> UIViewController {
428
        return MainViewControllerKt.MainViewController()
429
    }
430
    
431
    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
432
        // Updates handled by Compose
433
    }
434
}
435
```
436

437
This integration provides seamless Material3 component usage within iOS applications while maintaining native iOS performance and platform integration capabilities.