Compose Multiplatform Kotlin : guide complet avec exemples

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Compose Multiplatform pour Kotlin : Guide complet

Bienvenue dans le guide le plus détaillé sur Compose Multiplatform (CMP) — la technologie moderne de JetBrains qui permet de créer des interfaces utilisateur natives pour Android, iOS, Desktop (Windows, macOS, Linux) et le Web, en utilisant un code unique en langage Kotlin. Dans cet article, nous allons tout détailler : de l'installation aux techniques avancées et aux bonnes pratiques.

1. Qu'est-ce que Compose Multiplatform et pourquoi l'utiliser ?

Compose Multiplatform est un framework déclaratif pour la construction d'interfaces utilisateur, basé sur Jetpack Compose de Google, mais étendu pour fonctionner sur plusieurs plateformes. Contrairement aux approches traditionnelles (comme des layouts XML séparés pour Android et SwiftUI pour iOS), CMP permet d'écrire la logique UI une seule fois et de la compiler en code natif pour chaque plateforme cible.

Pourquoi l'utiliser ? Premièrement, c'est une réduction radicale du temps de développement : au lieu de maintenir deux bases de code ou plus, vous travaillez avec une seule. Deuxièmement, la cohérence de l'interface utilisateur : la logique métier et l'apparence de l'application sont identiques sur toutes les plateformes, ce qui simplifie les tests et la maintenance. Troisièmement, l'accès aux API natives : vous pouvez utiliser du code spécifique à une plateforme (comme l'appareil photo ou la géolocalisation) via le mécanisme expect/actual, sans quitter l'écosystème Kotlin.

Compose Multiplatform est idéal pour les startups, les équipes produit et les développeurs qui souhaitent toucher un maximum d'utilisateurs sans dupliquer leurs efforts. La bibliothèque est activement développée par JetBrains et la communauté, et en 2025, elle est l'une des solutions les plus prometteuses dans le monde du développement multiplateforme.

2. Installation

Comme Compose Multiplatform n'est pas une bibliothèque au sens traditionnel (comme un package pip), mais plutôt un ensemble de plugins et de configurations pour Gradle, l'installation se fait via le système de build Kotlin Multiplatform. Voici la procédure exacte pour créer un nouveau projet :

Étape 1 : Création du projet via IntelliJ IDEA (recommandé)

Ouvrez IntelliJ IDEA (Community ou Ultimate), sélectionnez File → New → Project. Dans l'assistant, choisissez le modèle Compose Multiplatform. Donnez un nom à votre projet et cliquez sur "Finish". L'IDE générera automatiquement la structure et toutes les dépendances nécessaires.

Étape 2 : Configuration manuelle (pour les projets existants)

Ajoutez le code suivant dans votre fichier build.gradle.kts racine :

plugins {
    kotlin("multiplatform") version "2.0.21"
    id("org.jetbrains.compose") version "1.7.1"
    id("org.jetbrains.kotlin.plugin.compose") version "2.0.21"
}

kotlin {
    androidTarget()
    listOf(
        iosX64(),
        iosArm64(),
        iosSimulatorArm64()
    ).forEach { iosTarget ->
        iosTarget.binaries.framework {
            baseName = "ComposeApp"
            isStatic = true
        }
    }

    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation(compose.runtime)
                implementation(compose.foundation)
                implementation(compose.material3)
                implementation(compose.ui)
            }
        }
        val androidMain by getting {
            dependencies {
                implementation("androidx.activity:activity-compose:1.9.3")
            }
        }
    }
}

Important : Les versions des plugins et de Kotlin doivent être compatibles. Les versions actuelles sont toujours disponibles sur le dépôt GitHub de Compose Multiplatform.

3. Démarrage rapide — exemple fonctionnel minimal

Après avoir créé le projet, ouvrez le fichier commonMain/kotlin/App.kt et remplacez son contenu par le code suivant :

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
i                    

Recommendations