tessl/maven-org-jetbrains-compose-material3--material3-uikitx64
Material Design 3 components for Compose Multiplatform iOS UIKit x64 target
—
Pending
ios-integration.mddocs/
iOS Integration
iOS-specific integration patterns and UIKit interoperability for Material3 components in Compose Multiplatform iOS UIKit x64 applications.
Capabilities
UIViewController Integration
Core integration between Compose Material3 content and iOS UIKit through UIViewController.
/**
* Creates a UIViewController that hosts Compose content with Material3 theming
* @param configure configuration block for the UIViewController
* @param content Compose content with Material3 components
* @return UIViewController that can be integrated with iOS UIKit
*/
fun ComposeUIViewController(
configure: ComposeUIViewControllerConfiguration.() -> Unit = {},
content: @Composable () -> Unit
): UIViewController
/**
* Configuration for ComposeUIViewController
*/
class ComposeUIViewControllerConfiguration {
/**
* Whether the UIViewController should respect iOS safe areas
*/
var enforceStrictPlistSanityCheck: Boolean
/**
* Opaque background configuration
*/
var opaque: Boolean
}Usage Examples:
// Basic integration
fun MainViewController() = ComposeUIViewController {
MaterialTheme {
MyApp()
}
}
// Advanced configuration
fun MainViewController() = ComposeUIViewController(
configure = {
opaque = false
enforceStrictPlistSanityCheck = false
}
) {
MaterialTheme(
colorScheme = if (isSystemInDarkTheme()) {
darkColorScheme()
} else {
lightColorScheme()
}
) {
MyApp()
}
}System Theme Integration
iOS system theme detection and integration with Material3 theming.
/**
* Detects if the iOS system is currently in dark theme mode
* @return true if system is in dark mode, false otherwise
*/
@Composable
expect fun isSystemInDarkTheme(): BooleanUsage Examples:
@Composable
fun AppTheme(
content: @Composable () -> Unit
) {
val darkTheme = isSystemInDarkTheme()
val colorScheme = when {
darkTheme -> darkColorScheme(
primary = Color(0xFFBB86FC),
onPrimary = Color(0xFF000000),
primaryContainer = Color(0xFF3700B3),
onPrimaryContainer = Color(0xFFFFFFFF),
secondary = Color(0xFF03DAC6),
onSecondary = Color(0xFF000000),
surface = Color(0xFF121212),
onSurface = Color(0xFFFFFFFF),
background = Color(0xFF121212),
onBackground = Color(0xFFFFFFFF)
)
else -> lightColorScheme(
primary = Color(0xFF6200EE),
onPrimary = Color(0xFFFFFFFF),
primaryContainer = Color(0xFFBB86FC),
onPrimaryContainer = Color(0xFF000000),
secondary = Color(0xFF03DAC6),
onSecondary = Color(0xFF000000),
surface = Color(0xFFFFFFFF),
onSurface = Color(0xFF000000),
background = Color(0xFFFFFFFF),
onBackground = Color(0xFF000000)
)
}
MaterialTheme(
colorScheme = colorScheme,
content = content
)
}
// Usage in iOS app
fun MainViewController() = ComposeUIViewController {
AppTheme {
Scaffold(
topBar = {
TopAppBar(
title = { Text("iOS Material App") },
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.onPrimaryContainer
)
)
}
) { paddingValues ->
// App content automatically adapts to iOS light/dark theme
Surface(
modifier = Modifier
.fillMaxSize()
.padding(paddingValues),
color = MaterialTheme.colorScheme.background
) {
// Your Material3 content here
}
}
}
}iOS App Structure Integration
Common patterns for integrating Material3 components into iOS app structure.
Usage Examples:
Complete iOS app with Material3 navigation:
@Composable
fun IOSMaterialApp() {
val navController = rememberNavController()
AppTheme {
Scaffold(
topBar = {
TopAppBar(
title = { Text("Material iOS App") },
navigationIcon = {
IconButton(onClick = {
// Handle iOS-style back navigation
navController.popBackStack()
}) {
Icon(
Icons.AutoMirrored.Filled.ArrowBack,
contentDescription = "Back"
)
}
}
)
},
bottomBar = {
NavigationBar {
val currentDestination = navController.currentBackStackEntryAsState().value?.destination
listOf(
"home" to Icons.Default.Home,
"search" to Icons.Default.Search,
"profile" to Icons.Default.Person
).forEach { (route, icon) ->
NavigationBarItem(
selected = currentDestination?.route == route,
onClick = {
navController.navigate(route) {
// iOS-style navigation behavior
popUpTo(navController.graph.findStartDestination().id) {
saveState = true
}
launchSingleTop = true
restoreState = true
}
},
icon = { Icon(icon, contentDescription = route) },
label = { Text(route.capitalize()) }
)
}
}
}
) { paddingValues ->
NavHost(
navController = navController,
startDestination = "home",
modifier = Modifier.padding(paddingValues)
) {
composable("home") { HomeScreen() }
composable("search") { SearchScreen() }
composable("profile") { ProfileScreen() }
}
}
}
}
// iOS Entry Point
fun MainViewController() = ComposeUIViewController {
IOSMaterialApp()
}iOS-Specific Material3 Patterns
Material3 components adapted for iOS interaction patterns and design expectations.
iOS-Style Cards with Material3:
@Composable
fun IOSStyleCardList() {
LazyColumn(
contentPadding = PaddingValues(16.dp),
verticalArrangement = Arrangement.spacedBy(12.dp)
) {
items(dataItems) { item ->
Card(
modifier = Modifier.fillMaxWidth(),
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.surface,
contentColor = MaterialTheme.colorScheme.onSurface
),
elevation = CardDefaults.cardElevation(
defaultElevation = 2.dp // Subtle elevation for iOS
),
onClick = {
// iOS-style navigation
navigateToDetail(item)
}
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
verticalAlignment = Alignment.CenterVertically
) {
Surface(
modifier = Modifier.size(40.dp),
shape = CircleShape,
color = MaterialTheme.colorScheme.primaryContainer
) {
Icon(
Icons.Default.Star,
contentDescription = null,
tint = MaterialTheme.colorScheme.onPrimaryContainer,
modifier = Modifier.padding(8.dp)
)
}
Spacer(modifier = Modifier.width(16.dp))
Column(modifier = Modifier.weight(1f)) {
Text(
text = item.title,
style = MaterialTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.onSurface
)
Text(
text = item.subtitle,
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant
)
}
Icon(
Icons.AutoMirrored.Filled.KeyboardArrowRight,
contentDescription = "Navigate",
tint = MaterialTheme.colorScheme.onSurfaceVariant
)
}
}
}
}
}iOS-Style Forms with Material3:
@Composable
fun IOSStyleSettingsForm() {
LazyColumn(
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(16.dp),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
item {
Card(
modifier = Modifier.fillMaxWidth(),
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.surface
)
) {
Column(modifier = Modifier.padding(16.dp)) {
Text(
"Notifications",
style = MaterialTheme.typography.titleMedium,
modifier = Modifier.padding(bottom = 16.dp)
)
settingsOptions.forEach { (title, isEnabled) ->
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(
title,
style = MaterialTheme.typography.bodyLarge
)
Switch(
checked = isEnabled.value,
onCheckedChange = { isEnabled.value = it },
colors = SwitchDefaults.colors(
checkedThumbColor = MaterialTheme.colorScheme.primary,
checkedTrackColor = MaterialTheme.colorScheme.primaryContainer
)
)
}
if (title != settingsOptions.last().first) {
HorizontalDivider(
modifier = Modifier.padding(vertical = 8.dp),
color = MaterialTheme.colorScheme.outline.copy(alpha = 0.2f)
)
}
}
}
}
}
}
}Build Configuration for iOS x64
Required build configuration for using Material3 with iOS UIKit x64 target.
build.gradle.kts Configuration:
plugins {
kotlin("multiplatform")
id("org.jetbrains.compose") version "1.8.2"
id("org.jetbrains.kotlin.plugin.compose") version "2.1.0"
}
kotlin {
// iOS x64 target for Intel-based simulators
iosX64 {
binaries {
framework {
baseName = "shared"
isStatic = true
// Export Compose and Material3 for iOS
export(compose.runtime)
export(compose.foundation)
export(compose.material3)
}
}
}
sourceSets {
commonMain.dependencies {
implementation(compose.runtime)
implementation(compose.foundation)
implementation(compose.material3)
implementation(compose.components.resources)
}
iosMain.dependencies {
// iOS-specific dependencies if needed
}
}
}
compose.experimental {
// Enable experimental features for iOS
uiKitIntegration {}
}iOS Project Integration:
In your iOS Xcode project, import and use the generated framework:
import SwiftUI
import shared // Your Kotlin framework
struct ContentView: View {
var body: some View {
ComposeView()
.ignoresSafeArea(.all) // Let Material3 handle safe areas
}
}
struct ComposeView: UIViewControllerRepresentable {
func makeUIViewController(context: Context) -> UIViewController {
return MainViewControllerKt.MainViewController()
}
func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
// Updates handled by Compose
}
}This integration provides seamless Material3 component usage within iOS applications while maintaining native iOS performance and platform integration capabilities.
Install with Tessl CLI
npx tessl i tessl/maven-org-jetbrains-compose-material3--material3-uikitx64