# थीम्स और स्टाइलिंग
## परिचय
आप थीम्स का उपयोग करके अपने एप्लिकेशन की UI स्टाइल्स मैनेज कर सकते हैं। थीम्स हमें बदलने की अनुमति देते हैं जैसे टेक्स्ट का फ़ॉन्ट साइज़, बटन कैसे दिखते हैं और हमारे एप्लिकेशन की सामान्य उपस्थिति।
यदि आप थीम्स में नए हैं, तो Flutter वेबसाइट पर उदाहरण आपको शुरू करने में मदद करेंगे यहाँ।
Nylo में `Light mode` और `Dark mode` के लिए पहले से कॉन्फ़िगर्ड थीम्स शामिल हैं।
यदि डिवाइस 'लाइट/डार्क' मोड में प्रवेश करता है तो थीम भी अपडेट होगी।
## लाइट और डार्क थीम्स
- लाइट थीम - `lib/resources/themes/light_theme.dart`
- डार्क थीम - `lib/resources/themes/dark_theme.dart`
इन फ़ाइलों के अंदर, आपको ThemeData और ThemeStyle पहले से परिभाषित मिलेंगे।
## थीम बनाना
यदि आप अपने ऐप के लिए एकाधिक थीम्स रखना चाहते हैं, तो हमारे पास इसके लिए एक आसान तरीका है। यदि आप थीम्स में नए हैं, तो साथ चलें।
सबसे पहले, टर्मिनल से नीचे दिया गया कमांड चलाएँ
``` bash
metro make:theme bright_theme
```
नोट: **bright_theme** को अपनी नई थीम के नाम से बदलें।
यह आपकी `/resources/themes/` डायरेक्टरी में एक नई थीम बनाता है और `/resources/themes/styles/` में एक थीम कलर्स फ़ाइल भी बनाता है।
``` dart
// App Themes
final List> appThemes = [
BaseThemeConfig(
id: getEnv('LIGHT_THEME_ID'),
description: "Light theme",
theme: lightTheme,
colors: LightThemeColors(),
),
BaseThemeConfig(
id: getEnv('DARK_THEME_ID'),
description: "Dark theme",
theme: darkTheme,
colors: DarkThemeColors(),
),
BaseThemeConfig( // new theme automatically added
id: 'Bright Theme',
description: "Bright Theme",
theme: brightTheme,
colors: BrightThemeColors(),
),
];
```
आप **/resources/themes/styles/bright_theme_colors.dart** फ़ाइल में अपनी नई थीम के कलर्स संशोधित कर सकते हैं।
## थीम कलर्स
अपने प्रोजेक्ट में थीम कलर्स मैनेज करने के लिए, `lib/resources/themes/styles` डायरेक्टरी देखें।
इस डायरेक्टरी में light_theme_colors.dart और dark_theme_colors.dart के लिए स्टाइल कलर्स हैं।
इस फ़ाइल में, आपके पास नीचे दिए गए जैसा कुछ होना चाहिए।
``` dart
// e.g Light Theme colors
class LightThemeColors implements ColorStyles {
// general
@override
Color get background => const Color(0xFFFFFFFF);
@override
Color get content => const Color(0xFF000000);
@override
Color get primaryAccent => const Color(0xFF0045a0);
@override
Color get surfaceBackground => Colors.white;
@override
Color get surfaceContent => Colors.black;
// app bar
@override
Color get appBarBackground => Colors.blue;
@override
Color get appBarPrimaryContent => Colors.white;
// buttons
@override
Color get buttonBackground => Colors.blue;
@override
Color get buttonContent => Colors.white;
@override
Color get buttonSecondaryBackground => const Color(0xff151925);
@override
Color get buttonSecondaryContent => Colors.white.withAlpha((255.0 * 0.9).round());
// bottom tab bar
@override
Color get bottomTabBarBackground => Colors.white;
// bottom tab bar - icons
@override
Color get bottomTabBarIconSelected => Colors.blue;
@override
Color get bottomTabBarIconUnselected => Colors.black54;
// bottom tab bar - label
@override
Color get bottomTabBarLabelUnselected => Colors.black45;
@override
Color get bottomTabBarLabelSelected => Colors.black;
// toast notification
@override
Color get toastNotificationBackground => Colors.white;
}
```
## विजेट्स में कलर्स का उपयोग
``` dart
import 'package:flutter_app/config/theme.dart';
...
// gets the light/dark background colour depending on the theme
ThemeColor.get(context).background
// e.g. of using the "ThemeColor" class
Text(
"Hello World",
style: TextStyle(
color: ThemeColor.get(context).content // Color - content
),
),
// or
Text(
"Hello World",
style: TextStyle(
color: ThemeConfig.light().colors.content // Light theme colors - primary content
),
),
```
## बेस स्टाइल्स
बेस स्टाइल्स आपको अपने कोड में एक जगह से विभिन्न विजेट कलर्स को कस्टमाइज़ करने की अनुमति देती हैं।
Nylo आपके प्रोजेक्ट के लिए `lib/resources/themes/styles/color_styles.dart` में पहले से कॉन्फ़िगर्ड बेस स्टाइल्स के साथ आता है।
ये स्टाइल्स `light_theme_colors.dart` और `dart_theme_colors.dart` में आपके थीम कलर्स के लिए एक इंटरफ़ेस प्रदान करती हैं।
फ़ाइल `lib/resources/themes/styles/color_styles.dart`
``` dart
abstract class ColorStyles {
// general
@override
Color get background;
@override
Color get content;
@override
Color get primaryAccent;
@override
Color get surfaceBackground;
@override
Color get surfaceContent;
// app bar
@override
Color get appBarBackground;
@override
Color get appBarPrimaryContent;
@override
Color get buttonBackground;
@override
Color get buttonContent;
@override
Color get buttonSecondaryBackground;
@override
Color get buttonSecondaryContent;
// bottom tab bar
@override
Color get bottomTabBarBackground;
// bottom tab bar - icons
@override
Color get bottomTabBarIconSelected;
@override
Color get bottomTabBarIconUnselected;
// bottom tab bar - label
@override
Color get bottomTabBarLabelUnselected;
@override
Color get bottomTabBarLabelSelected;
// toast notification
Color get toastNotificationBackground;
}
```
आप यहाँ अतिरिक्त स्टाइल्स जोड़ सकते हैं और फिर अपनी थीम में कलर्स लागू कर सकते हैं।
## थीम स्विच करना
Nylo तुरंत थीम स्विच करने की क्षमता का समर्थन करता है।
उदा. यदि आपको "डार्क थीम" सक्रिय करने के लिए यूज़र द्वारा बटन टैप करने पर थीम स्विच करने की आवश्यकता है।
आप नीचे दिए गए तरीके से इसे सपोर्ट कर सकते हैं:
``` dart
import 'package:nylo_framework/theme/helper/ny_theme.dart';
...
TextButton(onPressed: () {
// set theme to use the "dark theme"
NyTheme.set(context, id: "dark_theme");
setState(() { });
}, child: Text("Dark Theme")
),
// or
TextButton(onPressed: () {
// set theme to use the "light theme"
NyTheme.set(context, id: "light_theme");
setState(() { });
}, child: Text("Light Theme")
),
```
## फ़ॉन्ट्स
Nylo में पूरे ऐप में अपना प्राइमरी फ़ॉन्ट अपडेट करना आसान है। `lib/config/design.dart` फ़ाइल खोलें और नीचे दिए गए को अपडेट करें।
``` dart
final TextStyle appThemeFont = GoogleFonts.lato();
```
हम रिपॉज़िटरी में GoogleFonts लाइब्रेरी शामिल करते हैं, ताकि आप कम मेहनत में सभी फ़ॉन्ट्स का उपयोग शुरू कर सकें।
फ़ॉन्ट को किसी और में अपडेट करने के लिए, आप निम्नलिखित कर सकते हैं:
``` dart
// OLD
// final TextStyle appThemeFont = GoogleFonts.lato();
// NEW
final TextStyle appThemeFont = GoogleFonts.montserrat();
```
अधिक समझने के लिए आधिकारिक Google Fonts लाइब्रेरी पर फ़ॉन्ट्स देखें
कस्टम फ़ॉन्ट उपयोग करना चाहते हैं? यह गाइड देखें - https://flutter.dev/docs/cookbook/design/fonts
अपना फ़ॉन्ट जोड़ने के बाद, नीचे दिए गए उदाहरण की तरह वेरिएबल बदलें।
``` dart
final TextStyle appThemeFont = TextStyle(fontFamily: "ZenTokyoZoo"); // ZenTokyoZoo used as an example for the custom font
```
## डिज़ाइन
**config/design.dart** फ़ाइल का उपयोग आपके ऐप के डिज़ाइन एलिमेंट्स मैनेज करने के लिए किया जाता है।
`appFont` वेरिएबल में आपके ऐप का फ़ॉन्ट होता है।
`logo` वेरिएबल का उपयोग आपके ऐप का लोगो प्रदर्शित करने के लिए किया जाता है।
आप **resources/widgets/logo_widget.dart** को संशोधित करके अपना लोगो कैसे प्रदर्शित करना चाहते हैं इसे कस्टमाइज़ कर सकते हैं।
`loader` वेरिएबल का उपयोग लोडर प्रदर्शित करने के लिए किया जाता है। Nylo इस वेरिएबल का उपयोग कुछ हेल्पर मेथड्स में डिफ़ॉल्ट लोडर विजेट के रूप में करेगा।
आप **resources/widgets/loader_widget.dart** को संशोधित करके अपना लोडर कैसे प्रदर्शित करना चाहते हैं इसे कस्टमाइज़ कर सकते हैं।
## टेक्स्ट एक्सटेंशन्स
यहाँ उपलब्ध टेक्स्ट एक्सटेंशन्स हैं जिनका आप Nylo में उपयोग कर सकते हैं।
| नियम का नाम | उपयोग | जानकारी |
|---|---|---|
| डिस्प्ले लार्ज | displayLarge() | **displayLarge** textTheme लागू करता है |
| डिस्प्ले मीडियम | displayMedium() | **displayMedium** textTheme लागू करता है |
| डिस्प्ले स्मॉल | displaySmall() | **displaySmall** textTheme लागू करता है |
| हेडिंग लार्ज | headingLarge() | **headingLarge** textTheme लागू करता है |
| हेडिंग मीडियम | headingMedium() | **headingMedium** textTheme लागू करता है |
| हेडिंग स्मॉल | headingSmall() | **headingSmall** textTheme लागू करता है |
| टाइटल लार्ज | titleLarge() | **titleLarge** textTheme लागू करता है |
| टाइटल मीडियम | titleMedium() | **titleMedium** textTheme लागू करता है |
| टाइटल स्मॉल | titleSmall() | **titleSmall** textTheme लागू करता है |
| बॉडी लार्ज | bodyLarge() | **bodyLarge** textTheme लागू करता है |
| बॉडी मीडियम | bodyMedium() | **bodyMedium** textTheme लागू करता है |
| बॉडी स्मॉल | bodySmall() | **bodySmall** textTheme लागू करता है |
| लेबल लार्ज | labelLarge() | **labelLarge** textTheme लागू करता है |
| लेबल मीडियम | labelMedium() | **labelMedium** textTheme लागू करता है |
| लेबल स्मॉल | labelSmall() | **labelSmall** textTheme लागू करता है |
| फ़ॉन्ट वेट बोल्ड | fontWeightBold | Text विजेट पर फ़ॉन्ट वेट बोल्ड लागू करता है |
| फ़ॉन्ट वेट लाइट | fontWeightLight | Text विजेट पर फ़ॉन्ट वेट लाइट लागू करता है |
| कलर सेट करें | setColor(context, (color) => colors.primaryAccent) | Text विजेट पर अलग टेक्स्ट कलर सेट करें |
| बाएँ संरेखित | alignLeft | फ़ॉन्ट को बाईं ओर संरेखित करें |
| दाएँ संरेखित | alignRight | फ़ॉन्ट को दाईं ओर संरेखित करें |
| केंद्र संरेखित | alignCenter | फ़ॉन्ट को केंद्र में संरेखित करें |
| अधिकतम पंक्तियाँ सेट करें | setMaxLines(int maxLines) | टेक्स्ट विजेट के लिए अधिकतम पंक्तियाँ सेट करें |
#### डिस्प्ले लार्ज
``` dart
Text("Hello World").displayLarge()
```
#### डिस्प्ले मीडियम
``` dart
Text("Hello World").displayMedium()
```
#### डिस्प्ले स्मॉल
``` dart
Text("Hello World").displaySmall()
```
#### हेडिंग लार्ज
``` dart
Text("Hello World").headingLarge()
```
#### हेडिंग मीडियम
``` dart
Text("Hello World").headingMedium()
```
#### हेडिंग स्मॉल
``` dart
Text("Hello World").headingSmall()
```
#### टाइटल लार्ज
``` dart
Text("Hello World").titleLarge()
```
#### टाइटल मीडियम
``` dart
Text("Hello World").titleMedium()
```
#### टाइटल स्मॉल
``` dart
Text("Hello World").titleSmall()
```
#### बॉडी लार्ज
``` dart
Text("Hello World").bodyLarge()
```
#### बॉडी मीडियम
``` dart
Text("Hello World").bodyMedium()
```
#### बॉडी स्मॉल
``` dart
Text("Hello World").bodySmall()
```
#### लेबल लार्ज
``` dart
Text("Hello World").labelLarge()
```
#### लेबल मीडियम
``` dart
Text("Hello World").labelMedium()
```
#### लेबल स्मॉल
``` dart
Text("Hello World").labelSmall()
```
#### फ़ॉन्ट वेट बोल्ड
``` dart
Text("Hello World").fontWeightBold()
```
#### फ़ॉन्ट वेट लाइट
``` dart
Text("Hello World").fontWeightLight()
```
#### कलर सेट करें
``` dart
Text("Hello World").setColor(context, (color) => colors.content)
// Color from your colorStyles
```
#### बाएँ संरेखित
``` dart
Text("Hello World").alignLeft()
```
#### दाएँ संरेखित
``` dart
Text("Hello World").alignRight()
```
#### केंद्र संरेखित
``` dart
Text("Hello World").alignCenter()
```
#### अधिकतम पंक्तियाँ सेट करें
``` dart
Text("Hello World").setMaxLines(5)
```