0
# Material3 for iOS UIKit x64
1
2
Material Design 3 components for Compose Multiplatform iOS UIKit x64 target. This package provides the complete Material3 component library from AndroidX Compose Material3 1.3.1, compiled for iOS x64 architecture (Intel-based iOS simulators and Mac Catalyst apps).
3
4
## Package Information
5
6
- **Package Name**: org.jetbrains.compose.material3:material3-uikitx64
7
- **Package Type**: maven
8
- **Language**: Kotlin
9
- **Platform**: iOS UIKit x64
10
- **Base Version**: Material3 1.3.1 (AndroidX Compose)
11
- **Installation**: Add to your `build.gradle.kts`:
12
13
```kotlin
14
plugins {
15
kotlin("multiplatform")
16
id("org.jetbrains.compose") version "1.8.2"
17
id("org.jetbrains.kotlin.plugin.compose") version "2.1.0"
18
}
19
20
kotlin {
21
iosX64()
22
23
sourceSets {
24
commonMain.dependencies {
25
implementation(compose.material3)
26
}
27
}
28
}
29
```
30
31
## Core Imports
32
33
Import Material3 components for Compose Multiplatform:
34
35
```kotlin
36
import androidx.compose.material3.*
37
import androidx.compose.material3.MaterialTheme
38
import androidx.compose.material3.Button
39
import androidx.compose.material3.Text
40
import androidx.compose.material3.Surface
41
```
42
43
## Basic Usage
44
45
Create a Material themed iOS app:
46
47
```kotlin
48
import androidx.compose.material3.*
49
import androidx.compose.foundation.layout.*
50
import androidx.compose.ui.window.ComposeUIViewController
51
52
fun MainViewController() = ComposeUIViewController {
53
MaterialTheme(
54
colorScheme = lightColorScheme(
55
primary = Color(0xFF6750A4),
56
onPrimary = Color(0xFFFFFFFF),
57
primaryContainer = Color(0xFFEADDFF),
58
onPrimaryContainer = Color(0xFF21005D)
59
)
60
) {
61
Scaffold(
62
topBar = {
63
TopAppBar(
64
title = { Text("Material3 App") }
65
)
66
}
67
) { paddingValues ->
68
Surface(
69
modifier = Modifier
70
.fillMaxSize()
71
.padding(paddingValues),
72
color = MaterialTheme.colorScheme.background
73
) {
74
Column(
75
modifier = Modifier.padding(16.dp),
76
verticalArrangement = Arrangement.spacedBy(8.dp)
77
) {
78
Button(onClick = { }) {
79
Text("Material Button")
80
}
81
OutlinedButton(onClick = { }) {
82
Text("Outlined Button")
83
}
84
}
85
}
86
}
87
}
88
}
89
```
90
91
## Architecture
92
93
Material3 for iOS UIKit x64 provides:
94
95
- **Complete Material3 Component Library**: All standard Material Design 3 components
96
- **iOS UIKit Integration**: Seamless integration with iOS UIKit through ComposeUIViewController
97
- **Cross-Platform Consistency**: Identical API and behavior across all Compose Multiplatform targets
98
- **Material Theming**: Full Material3 color schemes, typography, and shapes
99
- **iOS-Specific Features**: Native iOS system theme detection and platform integration
100
101
## Capabilities
102
103
### Material Theming
104
105
Core theming system with Material3 color schemes, typography, and shapes.
106
107
```kotlin { .api }
108
@Composable
109
fun MaterialTheme(
110
colorScheme: ColorScheme = lightColorScheme(),
111
typography: Typography = Typography(),
112
shapes: Shapes = Shapes(),
113
content: @Composable () -> Unit
114
)
115
116
fun lightColorScheme(
117
primary: Color = ColorLightTokens.Primary,
118
onPrimary: Color = ColorLightTokens.OnPrimary,
119
primaryContainer: Color = ColorLightTokens.PrimaryContainer,
120
onPrimaryContainer: Color = ColorLightTokens.OnPrimaryContainer
121
// ... additional color parameters
122
): ColorScheme
123
124
fun darkColorScheme(
125
primary: Color = ColorDarkTokens.Primary,
126
onPrimary: Color = ColorDarkTokens.OnPrimary,
127
primaryContainer: Color = ColorDarkTokens.PrimaryContainer,
128
onPrimaryContainer: Color = ColorDarkTokens.OnPrimaryContainer
129
// ... additional color parameters
130
): ColorScheme
131
```
132
133
[Material3 Components](./material3-components.md)
134
135
### UI Components
136
137
Core Material3 UI components including buttons, text, cards, and navigation elements.
138
139
```kotlin { .api }
140
@Composable
141
fun Button(
142
onClick: () -> Unit,
143
modifier: Modifier = Modifier,
144
enabled: Boolean = true,
145
shape: Shape = ButtonDefaults.shape,
146
colors: ButtonColors = ButtonDefaults.buttonColors(),
147
elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
148
border: BorderStroke? = null,
149
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
150
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
151
content: @Composable RowScope.() -> Unit
152
)
153
154
@Composable
155
fun Text(
156
text: String,
157
modifier: Modifier = Modifier,
158
color: Color = Color.Unspecified,
159
fontSize: TextUnit = TextUnit.Unspecified,
160
fontStyle: FontStyle? = null,
161
fontWeight: FontWeight? = null,
162
fontFamily: FontFamily? = null,
163
letterSpacing: TextUnit = TextUnit.Unspecified,
164
textDecoration: TextDecoration? = null,
165
textAlign: TextAlign? = null,
166
lineHeight: TextUnit = TextUnit.Unspecified,
167
overflow: TextOverflow = TextOverflow.Clip,
168
softWrap: Boolean = true,
169
maxLines: Int = Int.MAX_VALUE,
170
minLines: Int = 1,
171
onTextLayout: (TextLayoutResult) -> Unit = {},
172
style: TextStyle = MaterialTheme.typography.bodyLarge
173
)
174
175
@Composable
176
fun Scaffold(
177
modifier: Modifier = Modifier,
178
topBar: @Composable () -> Unit = {},
179
bottomBar: @Composable () -> Unit = {},
180
floatingActionButton: @Composable () -> Unit = {},
181
floatingActionButtonPosition: FabPosition = FabPosition.End,
182
containerColor: Color = MaterialTheme.colorScheme.background,
183
contentColor: Color = contentColorFor(containerColor),
184
contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
185
content: @Composable (PaddingValues) -> Unit
186
)
187
```
188
189
[Material3 Components](./material3-components.md)
190
191
### iOS Integration
192
193
iOS-specific integration patterns and UIKit interoperability.
194
195
```kotlin { .api }
196
fun ComposeUIViewController(
197
configure: ComposeUIViewControllerConfiguration.() -> Unit = {},
198
content: @Composable () -> Unit
199
): UIViewController
200
201
@Composable
202
expect fun isSystemInDarkTheme(): Boolean
203
```
204
205
[iOS Integration](./ios-integration.md)
206
207
## Types
208
209
```kotlin { .api }
210
data class ColorScheme(
211
val primary: Color,
212
val onPrimary: Color,
213
val primaryContainer: Color,
214
val onPrimaryContainer: Color,
215
val inversePrimary: Color,
216
val secondary: Color,
217
val onSecondary: Color,
218
val secondaryContainer: Color,
219
val onSecondaryContainer: Color,
220
val tertiary: Color,
221
val onTertiary: Color,
222
val tertiaryContainer: Color,
223
val onTertiaryContainer: Color,
224
val background: Color,
225
val onBackground: Color,
226
val surface: Color,
227
val onSurface: Color,
228
val surfaceVariant: Color,
229
val onSurfaceVariant: Color,
230
val surfaceTint: Color,
231
val inverseSurface: Color,
232
val inverseOnSurface: Color,
233
val error: Color,
234
val onError: Color,
235
val errorContainer: Color,
236
val onErrorContainer: Color,
237
val outline: Color,
238
val outlineVariant: Color,
239
val scrim: Color
240
)
241
242
data class Typography(
243
val displayLarge: TextStyle,
244
val displayMedium: TextStyle,
245
val displaySmall: TextStyle,
246
val headlineLarge: TextStyle,
247
val headlineMedium: TextStyle,
248
val headlineSmall: TextStyle,
249
val titleLarge: TextStyle,
250
val titleMedium: TextStyle,
251
val titleSmall: TextStyle,
252
val bodyLarge: TextStyle,
253
val bodyMedium: TextStyle,
254
val bodySmall: TextStyle,
255
val labelLarge: TextStyle,
256
val labelMedium: TextStyle,
257
val labelSmall: TextStyle
258
)
259
260
interface ButtonColors {
261
fun containerColor(enabled: Boolean): Color
262
fun contentColor(enabled: Boolean): Color
263
}
264
265
interface ButtonElevation {
266
fun shadowElevation(enabled: Boolean, interactionSource: InteractionSource): State<Dp>
267
fun tonalElevation(enabled: Boolean, interactionSource: InteractionSource): State<Dp>
268
}
269
```