थीम्स और स्टाइलिंग

परिचय

आप थीम्स का उपयोग करके अपने एप्लिकेशन की UI स्टाइल्स मैनेज कर सकते हैं। थीम्स हमें बदलने की अनुमति देते हैं जैसे टेक्स्ट का फ़ॉन्ट साइज़, बटन कैसे दिखते हैं और हमारे एप्लिकेशन की सामान्य उपस्थिति।

यदि आप थीम्स में नए हैं, तो Flutter वेबसाइट पर उदाहरण आपको शुरू करने में मदद करेंगे यहाँ।

Nylo Website में Light mode और Dark mode के लिए पहले से कॉन्फ़िगर्ड थीम्स शामिल हैं।

यदि डिवाइस 'लाइट/डार्क' मोड में प्रवेश करता है तो थीम भी अपडेट होगी।

लाइट और डार्क थीम्स

• लाइट थीम - lib/resources/themes/light_theme.dart
• डार्क थीम - lib/resources/themes/dark_theme.dart

इन फ़ाइलों के अंदर, आपको ThemeData और ThemeStyle पहले से परिभाषित मिलेंगे।

थीम बनाना

यदि आप अपने ऐप के लिए एकाधिक थीम्स रखना चाहते हैं, तो हमारे पास इसके लिए एक आसान तरीका है। यदि आप थीम्स में नए हैं, तो साथ चलें।

सबसे पहले, टर्मिनल से नीचे दिया गया कमांड चलाएँ

metro make:theme bright_theme

नोट: bright_theme को अपनी नई थीम के नाम से बदलें।

यह आपकी /resources/themes/ डायरेक्टरी में एक नई थीम बनाता है और /resources/themes/styles/ में एक थीम कलर्स फ़ाइल भी बनाता है।

// App Themes
final List<BaseThemeConfig<ColorStyles>> appThemes = [
  BaseThemeConfig<ColorStyles>(
    id: getEnv('LIGHT_THEME_ID'),
    description: "Light theme",
    theme: lightTheme,
    colors: LightThemeColors(),
  ),
  BaseThemeConfig<ColorStyles>(
    id: getEnv('DARK_THEME_ID'),
    description: "Dark theme",
    theme: darkTheme,
    colors: DarkThemeColors(),
  ),

  BaseThemeConfig<ColorStyles>( // 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 के लिए स्टाइल कलर्स हैं।

इस फ़ाइल में, आपके पास नीचे दिए गए जैसा कुछ होना चाहिए।

// 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;
}

विजेट्स में कलर्स का उपयोग

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 Website आपके प्रोजेक्ट के लिए lib/resources/themes/styles/color_styles.dart में पहले से कॉन्फ़िगर्ड बेस स्टाइल्स के साथ आता है।

ये स्टाइल्स light_theme_colors.dart और dart_theme_colors.dart में आपके थीम कलर्स के लिए एक इंटरफ़ेस प्रदान करती हैं।

फ़ाइल lib/resources/themes/styles/color_styles.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 Website तुरंत थीम स्विच करने की क्षमता का समर्थन करता है।

उदा. यदि आपको "डार्क थीम" सक्रिय करने के लिए यूज़र द्वारा बटन टैप करने पर थीम स्विच करने की आवश्यकता है।

आप नीचे दिए गए तरीके से इसे सपोर्ट कर सकते हैं:

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 Website में पूरे ऐप में अपना प्राइमरी फ़ॉन्ट अपडेट करना आसान है। lib/config/design.dart फ़ाइल खोलें और नीचे दिए गए को अपडेट करें।

final TextStyle appThemeFont = GoogleFonts.lato();

हम रिपॉज़िटरी में GoogleFonts लाइब्रेरी शामिल करते हैं, ताकि आप कम मेहनत में सभी फ़ॉन्ट्स का उपयोग शुरू कर सकें। फ़ॉन्ट को किसी और में अपडेट करने के लिए, आप निम्नलिखित कर सकते हैं:

// OLD
// final TextStyle appThemeFont = GoogleFonts.lato();

// NEW
final TextStyle appThemeFont = GoogleFonts.montserrat();

अधिक समझने के लिए आधिकारिक Google Fonts लाइब्रेरी पर फ़ॉन्ट्स देखें

कस्टम फ़ॉन्ट उपयोग करना चाहते हैं? यह गाइड देखें - https://flutter.dev/docs/cookbook/design/fonts

अपना फ़ॉन्ट जोड़ने के बाद, नीचे दिए गए उदाहरण की तरह वेरिएबल बदलें।

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 Website इस वेरिएबल का उपयोग कुछ हेल्पर मेथड्स में डिफ़ॉल्ट लोडर विजेट के रूप में करेगा।

आप resources/widgets/loader_widget.dart को संशोधित करके अपना लोडर कैसे प्रदर्शित करना चाहते हैं इसे कस्टमाइज़ कर सकते हैं।

टेक्स्ट एक्सटेंशन्स

यहाँ उपलब्ध टेक्स्ट एक्सटेंशन्स हैं जिनका आप Nylo Website में उपयोग कर सकते हैं।

डिस्प्ले लार्ज

Text("Hello World").displayLarge()

डिस्प्ले मीडियम

Text("Hello World").displayMedium()

डिस्प्ले स्मॉल

Text("Hello World").displaySmall()

हेडिंग लार्ज

Text("Hello World").headingLarge()

हेडिंग मीडियम

Text("Hello World").headingMedium()

हेडिंग स्मॉल

Text("Hello World").headingSmall()

टाइटल लार्ज

Text("Hello World").titleLarge()

टाइटल मीडियम

Text("Hello World").titleMedium()

टाइटल स्मॉल

Text("Hello World").titleSmall()

बॉडी लार्ज

Text("Hello World").bodyLarge()

बॉडी मीडियम

Text("Hello World").bodyMedium()

बॉडी स्मॉल

Text("Hello World").bodySmall()

लेबल लार्ज

Text("Hello World").labelLarge()

लेबल मीडियम

Text("Hello World").labelMedium()

लेबल स्मॉल

Text("Hello World").labelSmall()

फ़ॉन्ट वेट बोल्ड

Text("Hello World").fontWeightBold()

फ़ॉन्ट वेट लाइट

Text("Hello World").fontWeightLight()

कलर सेट करें

Text("Hello World").setColor(context, (color) => colors.content)
// Color from your colorStyles

बाएँ संरेखित

Text("Hello World").alignLeft()

दाएँ संरेखित

Text("Hello World").alignRight()

केंद्र संरेखित

Text("Hello World").alignCenter()

अधिकतम पंक्तियाँ सेट करें

Text("Hello World").setMaxLines(5)