0
# Compose Material Design for iOS UIKit ARM64
1

2
Compose Material Design provides comprehensive Material Design components for Compose Multiplatform applications, specifically optimized for iOS devices running on ARM64 architecture. This package enables developers to build native iOS applications using declarative Compose APIs while maintaining Material Design consistency across platforms.
3

4
## Package Information
5

6
- **Package Name**: org.jetbrains.compose.material:material-uikitarm64
7
- **Package Type**: maven
8
- **Language**: Kotlin
9
- **Platform**: iOS UIKit ARM64
10
- **Installation**: Add to your `build.gradle.kts`:
11

12
```kotlin
13
repositories {
14
    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
15
}
16

17
dependencies {
18
    implementation("org.jetbrains.compose.material:material-uikitarm64:1.8.2")
19
}
20
```
21

22
## Core Imports
23

24
```kotlin
25
import androidx.compose.material.*
26
import androidx.compose.material.icons.Icons
27
import androidx.compose.material.icons.filled.*
28
import androidx.compose.material3.*  // For Material 3 components
29
```
30

31
## Basic Usage
32

33
```kotlin
34
import androidx.compose.material.*
35
import androidx.compose.runtime.*
36

37
@Composable
38
fun MyApp() {
39
    MaterialTheme(
40
        colors = lightColors(
41
            primary = Color(0xFF1976D2),
42
            secondary = Color(0xFF03DAC6)
43
        )
44
    ) {
45
        Scaffold(
46
            topBar = {
47
                TopAppBar(
48
                    title = { Text("My App") }
49
                )
50
            },
51
            floatingActionButton = {
52
                FloatingActionButton(
53
                    onClick = { /* Handle click */ }
54
                ) {
55
                    Icon(Icons.Default.Add, contentDescription = "Add")
56
                }
57
            }
58
        ) { paddingValues ->
59
            Column(
60
                modifier = Modifier.padding(paddingValues).padding(16.dp)
61
            ) {
62
                Button(
63
                    onClick = { /* Handle click */ }
64
                ) {
65
                    Text("Material Button")
66
                }
67
                
68
                TextField(
69
                    value = "Example text",
70
                    onValueChange = { },
71
                    label = { Text("Label") }
72
                )
73
            }
74
        }
75
    }
76
}
77
```
78

79
## Architecture
80

81
Compose Material Design is built around several key components:
82

83
- **Material Theme System**: Comprehensive theming with colors, typography, and shapes that adapt to iOS visual guidelines
84
- **UI Components**: Complete set of Material Design components optimized for iOS performance and native behavior
85
- **Icon System**: Extensive Material icon library with automatic RTL support and iOS-specific adaptations
86
- **Layout Components**: Scaffold, Surface, and container components that integrate seamlessly with iOS navigation patterns
87
- **Platform Integration**: Deep integration with UIKit components and native iOS APIs through UIKitView and UIKitViewController
88

89
## Capabilities
90

91
### Core UI Components
92

93
Essential Material Design components for building iOS interfaces with consistent Material Design styling.
94

95
```kotlin { .api }
96
@Composable
97
fun Text(
98
    text: String,
99
    modifier: Modifier = Modifier,
100
    color: Color = Color.Unspecified,
101
    fontSize: TextUnit = TextUnit.Unspecified,
102
    fontStyle: FontStyle? = null,
103
    fontWeight: FontWeight? = null,
104
    fontFamily: FontFamily? = null,
105
    letterSpacing: TextUnit = TextUnit.Unspecified,
106
    textDecoration: TextDecoration? = null,
107
    textAlign: TextAlign? = null,
108
    lineHeight: TextUnit = TextUnit.Unspecified,
109
    overflow: TextOverflow = TextOverflow.Clip,
110
    softWrap: Boolean = true,
111
    maxLines: Int = Int.MAX_VALUE,
112
    style: TextStyle = LocalTextStyle.current
113
)
114

115
@Composable
116
fun Button(
117
    onClick: () -> Unit,
118
    modifier: Modifier = Modifier,
119
    enabled: Boolean = true,
120
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
121
    shape: Shape = MaterialTheme.shapes.small,
122
    border: BorderStroke? = null,
123
    colors: ButtonColors = ButtonDefaults.buttonColors(),
124
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
125
    content: @Composable RowScope.() -> Unit
126
)
127
```
128

129
[Core Components](./core-components.md)
130

131
### Progress Indicators
132

133
Material Design progress indicators for showing loading states with iOS-optimized animations.
134

135
```kotlin { .api }
136
@Composable
137
fun CircularProgressIndicator(
138
    progress: Float,
139
    modifier: Modifier = Modifier,
140
    color: Color = MaterialTheme.colors.primary,
141
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth
142
)
143

144
@Composable
145
fun LinearProgressIndicator(
146
    progress: Float,
147
    modifier: Modifier = Modifier,
148
    color: Color = MaterialTheme.colors.primary,
149
    backgroundColor: Color = color.copy(alpha = ProgressIndicatorDefaults.IndicatorBackgroundOpacity)
150
)
151
```
152

153
### Feedback Components
154

155
Snackbars and other feedback components with iOS safe area integration.
156

157
```kotlin { .api }
158
@Composable
159
fun Snackbar(
160
    snackbarData: SnackbarData,
161
    modifier: Modifier = Modifier,
162
    actionOnNewLine: Boolean = false,
163
    shape: Shape = MaterialTheme.shapes.small,
164
    backgroundColor: Color = SnackbarDefaults.backgroundColor,
165
    contentColor: Color = MaterialTheme.colors.surface,
166
    actionColor: Color = SnackbarDefaults.primaryActionColor,
167
    elevation: Dp = 6.dp
168
)
169

170
@Composable
171
fun SnackbarHost(
172
    hostState: SnackbarHostState,
173
    modifier: Modifier = Modifier,
174
    snackbar: @Composable (SnackbarData) -> Unit = { Snackbar(it) }
175
)
176
```
177

178
### Material Theming
179

180
Comprehensive theming system that adapts Material Design principles to iOS platform conventions.
181

182
```kotlin { .api }
183
@Composable
184
fun MaterialTheme(
185
    colors: Colors = MaterialTheme.colors,
186
    typography: Typography = MaterialTheme.typography,
187
    shapes: Shapes = MaterialTheme.shapes,
188
    content: @Composable () -> Unit
189
)
190

191
@Stable
192
class Colors(
193
    primary: Color,
194
    primaryVariant: Color,
195
    secondary: Color,
196
    secondaryVariant: Color,
197
    background: Color,
198
    surface: Color,
199
    error: Color,
200
    onPrimary: Color,
201
    onSecondary: Color,
202
    onBackground: Color,
203
    onSurface: Color,
204
    onError: Color,
205
    isLight: Boolean
206
)
207

208
fun lightColors(
209
    primary: Color = Color(0xFF6200EE),
210
    primaryVariant: Color = Color(0xFF3700B3),
211
    secondary: Color = Color(0xFF03DAC6),
212
    // ... other color parameters
213
): Colors
214

215
fun darkColors(
216
    primary: Color = Color(0xFFBB86FC),
217
    primaryVariant: Color = Color(0xFF3700B3),
218
    secondary: Color = Color(0xFF03DAC6),
219
    // ... other color parameters
220
): Colors
221
```
222

223
[Material Theming](./theming.md)
224

225
### Input Components
226

227
Material Design input components optimized for iOS touch interactions and keyboard behavior.
228

229
```kotlin { .api }
230
@Composable
231
fun TextField(
232
    value: String,
233
    onValueChange: (String) -> Unit,
234
    modifier: Modifier = Modifier,
235
    enabled: Boolean = true,
236
    readOnly: Boolean = false,
237
    textStyle: TextStyle = LocalTextStyle.current,
238
    label: @Composable (() -> Unit)? = null,
239
    placeholder: @Composable (() -> Unit)? = null,
240
    leadingIcon: @Composable (() -> Unit)? = null,
241
    trailingIcon: @Composable (() -> Unit)? = null,
242
    isError: Boolean = false,
243
    visualTransformation: VisualTransformation = VisualTransformation.None,
244
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
245
    keyboardActions: KeyboardActions = KeyboardActions.Default,
246
    singleLine: Boolean = false,
247
    maxLines: Int = Int.MAX_VALUE,
248
    colors: TextFieldColors = TextFieldDefaults.textFieldColors()
249
)
250
```
251

252
[Input Components](./input-components.md)
253

254
### Navigation Components
255

256
Material Design navigation components that integrate with iOS navigation patterns and UIKit.
257

258
```kotlin { .api }
259
@Composable
260
fun Scaffold(
261
    modifier: Modifier = Modifier,
262
    scaffoldState: ScaffoldState = rememberScaffoldState(),
263
    topBar: @Composable () -> Unit = {},
264
    bottomBar: @Composable () -> Unit = {},
265
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
266
    floatingActionButton: @Composable () -> Unit = {},
267
    floatingActionButtonPosition: FabPosition = FabPosition.End,
268
    isFloatingActionButtonDocked: Boolean = false,
269
    drawerContent: @Composable (ColumnScope.() -> Unit)? = null,
270
    drawerGesturesEnabled: Boolean = true,
271
    drawerShape: Shape = MaterialTheme.shapes.large,
272
    drawerElevation: Dp = DrawerDefaults.Elevation,
273
    drawerBackgroundColor: Color = MaterialTheme.colors.surface,
274
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
275
    drawerScrimColor: Color = DrawerDefaults.scrimColor,
276
    backgroundColor: Color = MaterialTheme.colors.background,
277
    contentColor: Color = contentColorFor(backgroundColor),
278
    content: @Composable (PaddingValues) -> Unit
279
)
280
```
281

282
[Navigation Components](./navigation.md)
283

284
### Material Icons
285

286
Comprehensive icon system with iOS-specific optimizations and automatic RTL support.
287

288
```kotlin { .api }
289
@Composable
290
fun Icon(
291
    imageVector: ImageVector,
292
    contentDescription: String?,
293
    modifier: Modifier = Modifier,
294
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
295
)
296

297
object Icons {
298
    object Default {
299
        val Add: ImageVector
300
        val ArrowBack: ImageVector
301
        val Close: ImageVector
302
        val Delete: ImageVector
303
        val Edit: ImageVector
304
        val Home: ImageVector
305
        val Menu: ImageVector
306
        val MoreHoriz: ImageVector
307
        val Search: ImageVector
308
        val Settings: ImageVector
309
        // ... additional icons
310
    }
311
    
312
    object Outlined {
313
        // Outlined variants of icons
314
    }
315
    
316
    object AutoMirrored {
317
        // RTL-aware icons
318
    }
319
}
320
```
321

322
[Material Icons](./icons.md)
323

324
### iOS Platform Integration
325

326
Seamless integration with native iOS UIKit components and platform-specific behaviors.
327

328
```kotlin { .api }
329
@Composable
330
fun UIKitView<T : UIView>(
331
    factory: () -> T,
332
    modifier: Modifier = Modifier,
333
    update: (T) -> Unit = {}
334
)
335

336
@Composable
337
fun UIKitViewController<T : UIViewController>(
338
    factory: () -> T,
339
    modifier: Modifier = Modifier,
340
    update: (T) -> Unit = {}
341
)
342
```
343

344
[iOS Integration](./ios-integration.md)
345

346
## Types
347

348
```kotlin { .api }
349
// Core modifier for all components
350
interface Modifier
351

352
// Composable function type
353
@Target(AnnotationTarget.FUNCTION)
354
@Retention(AnnotationRetention.BINARY)
355
@MustBeDocumented
356
annotation class Composable
357

358
// Material theme colors
359
@Stable
360
class Colors(
361
    val primary: Color,
362
    val primaryVariant: Color,
363
    val secondary: Color,
364
    val secondaryVariant: Color,
365
    val background: Color,
366
    val surface: Color,
367
    val error: Color,
368
    val onPrimary: Color,
369
    val onSecondary: Color,
370
    val onBackground: Color,
371
    val onSurface: Color,
372
    val onError: Color,
373
    val isLight: Boolean
374
)
375

376
// Typography system
377
@Immutable
378
class Typography(
379
    val h1: TextStyle,
380
    val h2: TextStyle,
381
    val h3: TextStyle,
382
    val h4: TextStyle,
383
    val h5: TextStyle,
384
    val h6: TextStyle,
385
    val subtitle1: TextStyle,
386
    val subtitle2: TextStyle,
387
    val body1: TextStyle,
388
    val body2: TextStyle,
389
    val button: TextStyle,
390
    val caption: TextStyle,
391
    val overline: TextStyle
392
)
393

394
// Shape system
395
@Immutable
396
class Shapes(
397
    val small: CornerBasedShape,
398
    val medium: CornerBasedShape,
399
    val large: CornerBasedShape
400
)
401

402
// Layout and container types
403
@Stable
404
interface RowScope
405

406
@Stable  
407
interface ColumnScope
408

409
@Immutable
410
data class PaddingValues(
411
    val start: Dp = 0.dp,
412
    val top: Dp = 0.dp,
413
    val end: Dp = 0.dp,
414
    val bottom: Dp = 0.dp
415
)
416

417
// Shape and border types
418
interface Shape
419

420
interface CornerBasedShape : Shape
421

422
@Immutable
423
data class BorderStroke(
424
    val width: Dp,
425
    val brush: Brush
426
)
427

428
// Interaction types
429
interface InteractionSource
430

431
@Stable
432
interface State<out T> {
433
    val value: T
434
}
435

436
// Progress indicator types
437
object ProgressIndicatorDefaults {
438
    val StrokeWidth: Dp = 4.dp
439
    const val IndicatorBackgroundOpacity: Float = 0.24f
440
}
441

442
// Snackbar types
443
@Stable
444
class SnackbarHostState {
445
    suspend fun showSnackbar(
446
        message: String,
447
        actionLabel: String? = null,
448
        duration: SnackbarDuration = SnackbarDuration.Short
449
    ): SnackbarResult
450
}
451

452
interface SnackbarData {
453
    val message: String
454
    val actionLabel: String?
455
    fun performAction()
456
    fun dismiss()
457
}
458

459
enum class SnackbarDuration { Short, Long, Indefinite }
460
enum class SnackbarResult { Dismissed, ActionPerformed }
461
```