Jetpack Compose Academy · Ders

Özel Tasarım Sistemi Oluşturma

Temayı kendi belirteçlerinizle genişletin.

Özel Tasarım Sistemi Oluşturma, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Jetpack Compose Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Beyond the Defaults

Real brands need more than Material's built-ins. A design system bundles your colors, type, shapes, and extra tokens into one reusable theme. 🏗️

Wrap MaterialTheme

You start by writing your own AppTheme Composable that configures MaterialTheme, giving the whole app a single, named entry point.

@Composable
fun AppTheme(content: @Composable () -> Unit) { /* ... */ }

Pass Your Tokens In

Inside AppTheme you hand MaterialTheme your custom colorScheme, typography, and shapes, so every screen inherits your brand automatically.

MaterialTheme(
  colorScheme = brandColors,
  typography = brandType,
  shapes = brandShapes
) { content() }

Material Misses Some Tokens

Some brand values, like a success green or a custom spacing unit, have no Material role. You add these as your own extra tokens.

Hold Extra Colors

You group extra colors in a small data class, a tidy home for brand values Material does not provide out of the box.

data class BrandColors(
  val success: Color,
  val warning: Color
)

CompositionLocal

To share custom tokens down the tree without passing parameters, you use a CompositionLocal, Compose's built-in ambient value mechanism.

Create the Local

You declare a staticCompositionLocalOf with a default, creating a channel any Composable can read your brand colors from.

val LocalBrand = staticCompositionLocalOf { defaultBrand }

Provide the Values

In AppTheme you wrap content in a CompositionLocalProvider, feeding your brand tokens into the tree alongside MaterialTheme.

CompositionLocalProvider(LocalBrand provides brand) {
  MaterialTheme(/* ... */) { content() }
}

Read Custom Tokens

Anywhere below, a Composable reads LocalBrand.current to grab your custom values, mirroring how MaterialTheme exposes its own.

val success = LocalBrand.current.success

Offer a Clean API

Many teams expose an object so calls read like AppTheme.brand.success, a friendly facade over the CompositionLocal underneath.

One Source of Truth

Now colors, type, shapes, and custom tokens all flow from a single theme, so the app stays consistent and effortless to evolve. ✨

Quick Check

You need a brand color Material has no role for, shared app-wide. What do you reach for?

Recap: Your Own Theme

You wrapped MaterialTheme in an AppTheme, added extra tokens via CompositionLocal, and gave your app one branded source of truth. 🎉

Sıkça Sorulan Sorular

“Özel Tasarım Sistemi Oluşturma” dersi ücretsiz mi?

Evet — “Özel Tasarım Sistemi Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Jetpack Compose Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.

“Özel Tasarım Sistemi Oluşturma” dersinde ne öğreneceğim?

Temayı kendi belirteçlerinizle genişletin. Jetpack Compose Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Jetpack Compose Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Jetpack Compose Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Özel Tasarım Sistemi Oluşturma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Jetpack Compose Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Jetpack Compose Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Jetpack Compose Academy Sayfasına Dön