Jetpack Compose Academy · पाठ

Custom Design System बनाना

अपने tokens की सहायता से theme का विस्तार कीजिए।

पाठ 4, कुल 4 में से13 चरण

Custom Design System बनाना, CoddyKit पर Jetpack Compose Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Jetpack Compose Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Jetpack Compose Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

डिफ़ॉल्ट से आगे

वास्तविक ब्रांड को Material में पहले से मौजूद चीज़ों से अधिक की ज़रूरत होती है। design system आपके रंग, टाइप, आकार और अतिरिक्त टोकन को एक पुनः उपयोग योग्य थीम में जोड़ता है। 🏗️

MaterialTheme को लपेटें

सबसे पहले अपना AppTheme Composable लिखें, जो MaterialTheme को कॉन्फ़िगर करे और पूरे ऐप को एक नामित प्रवेश-बिंदु दे।

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

अपने टोकन भेजें

AppTheme के अंदर MaterialTheme को अपना कस्टम colorScheme, typography और shapes दें, ताकि हर स्क्रीन अपने-आप आपके brand को अपनाए।

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

Material में कुछ टोकन नहीं होते

कुछ ब्रांड मानों, जैसे सफलता का हरा रंग या कस्टम अंतराल इकाई, की Material में कोई भूमिका नहीं होती। इन्हें अपने अतिरिक्त टोकन के रूप में जोड़ें।

अतिरिक्त रंग सँभालें

अतिरिक्त रंगों को एक छोटी डेटा क्लास में समूहित करें—यह उन ब्रांड मानों के लिए व्यवस्थित स्थान है जो Material में पहले से उपलब्ध नहीं हैं।

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

CompositionLocal

पैरामीटर पास किए बिना ट्री में कस्टम टोकन साझा करने के लिए आप CompositionLocal का उपयोग करते हैं। यह Compose का अंतर्निहित एम्बिएंट वैल्यू तंत्र है।

लोकल बनाएँ

आप डिफ़ॉल्ट मान के साथ staticCompositionLocalOf घोषित करते हैं। इससे एक ऐसा चैनल बनता है, जिससे कोई भी कंपोज़ेबल आपके ब्रांड के रंग पढ़ सकता है।

val LocalBrand = staticCompositionLocalOf { defaultBrand }

मान उपलब्ध कराएँ

AppTheme में आप सामग्री को CompositionLocalProvider के अंदर रखते हैं और MaterialTheme के साथ अपने ब्रांड टोकन ट्री में उपलब्ध कराते हैं।

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

कस्टम टोकन पढ़ें

नीचे कहीं भी कोई कंपोज़ेबल अपने कस्टम मान पाने के लिए LocalBrand.current पढ़ सकता है। यह उसी तरह है, जैसे MaterialTheme अपने मान उपलब्ध कराता है।

val success = LocalBrand.current.success

स्वच्छ API उपलब्ध कराएँ

कई टीमें एक ऑब्जेक्ट उपलब्ध कराती हैं, ताकि कॉल AppTheme.brand.success जैसी दिखें। यह अंदर मौजूद CompositionLocal के ऊपर एक सुविधाजनक आवरण होता है।

सत्य का एक ही स्रोत

अब रंग, टाइप, आकार और कस्टम टोकन सभी एक ही थीम से आते हैं। इससे ऐप एकसार रहता है और उसमें बदलाव करना आसान होता है। ✨

त्वरित जाँच

आपको पूरे ऐप में साझा किया गया ऐसा ब्रांड रंग चाहिए, जिसकी Material में कोई भूमिका नहीं है। आप किसका उपयोग करेंगे?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: आपकी अपनी थीम

आपने MaterialTheme को AppTheme में रखा, CompositionLocal के ज़रिए अतिरिक्त टोकन जोड़े और अपने ऐप को ब्रांड के लिए सत्य का एक ही स्रोत दिया। 🎉

शुरुआत निःशुल्क

एआई शिक्षक के साथ Kotlin सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Custom Design System बनाना” पाठ निःशुल्क है?

हाँ—“Custom Design System बनाना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Jetpack Compose Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Jetpack Compose Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Custom Design System बनाना” में मैं क्या सीखूँगा?

अपने tokens की सहायता से theme का विस्तार कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Jetpack Compose Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Jetpack Compose Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Jetpack Compose Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“Custom Design System बनाना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Jetpack Compose Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Jetpack Compose Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Jetpack Compose Academy पर वापस जाएँ