MDC-103 Flutter: रंग, आकार, ऊंचाई, और टाइप के साथ मटीरियल थीमिंग

1. परिचय

मटीरियल कॉम्पोनेंट (एमडीसी) की मदद से, डेवलपर मटीरियल डिज़ाइन लागू कर सकते हैं. MDC को Google के इंजीनियरों और यूज़र एक्सपीरियंस (यूएक्स) डिज़ाइनर की टीम ने बनाया है. इसमें कई शानदार और काम के यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट शामिल हैं. यह Android, iOS, वेब, और Flutter.material.io/develop के लिए उपलब्ध है

अब Material Flutter का इस्तेमाल करके, अपने ऐप्लिकेशन की स्टाइल को पहले से ज़्यादा पसंद के मुताबिक बनाया जा सकता है. Material Design के हाल ही में हुए अपडेट के बाद, डिज़ाइनर और डेवलपर को अपने प्रॉडक्ट के ब्रैंड को बेहतर तरीके से दिखाने का विकल्प मिला है.

आपने कोडलैब MDC-101 और MDC-102 में,Material Flutter का इस्तेमाल करके Shrine नाम का ऐप्लिकेशन बनाया था. यह एक ई-कॉमर्स ऐप्लिकेशन है, जो कपड़े और घर के सामान बेचता है. इस ऐप्लिकेशन में उपयोगकर्ता फ़्लो शामिल है. यह फ़्लो, लॉगिन स्क्रीन से शुरू होता है. इसके बाद, उपयोगकर्ता को होम स्क्रीन पर ले जाता है, जहां प्रॉडक्ट दिखाए जाते हैं.

आपको क्या बनाने को मिलेगा

इस कोडलैब में, Shrine ऐप्लिकेशन को अपनी पसंद के मुताबिक बनाने के लिए, इनका इस्तेमाल किया जाएगा:

• रंग
• मुद्रण कला
• ऊंचाई
• आकार
• लेआउट

Android	iOS

यह चार कोडलैब में से तीसरा कोडलैब है. इसमें Shrine नाम के प्रॉडक्ट के लिए ऐप्लिकेशन बनाने के बारे में बताया गया है. हमारा सुझाव है कि आप सभी कोडलैब को क्रम से करें, क्योंकि इनमें टास्क को सिलसिलेवार तरीके से पूरा करने का तरीका बताया गया है.इससे जुड़े कोडलैब यहां देखे जा सकते हैं: MDC-101 Flutter: Material Components की बुनियादी बातें MDC-102 Flutter: Material Structure and Layout MDC-104 Flutter: Material Advanced Components

इस कोडलैब में Material Flutter कॉम्पोनेंट और सबसिस्टम

• थीम
• मुद्रण कला
• ऊंचाई
• चित्र सूची

Flutter डेवलपमेंट के लिए, आपके अनुभव के हिसाब से आपकी रेटिंग क्या होगी?

शुरुआती सामान्य एडवांस

2. Flutter डेवलपमेंट एनवायरमेंट सेट अप करना

इस लैब को पूरा करने के लिए, आपको दो सॉफ़्टवेयर की ज़रूरत होगी— Flutter SDK और एडिटर.

इनमें से किसी भी डिवाइस पर कोडलैब चलाया जा सकता है:

• आपके पास Android या iOS डिवाइस होना चाहिए. यह डिवाइस आपके कंप्यूटर से कनेक्ट होना चाहिए और डेवलपर मोड पर सेट होना चाहिए.
• iOS सिम्युलेटर (इसके लिए, Xcode टूल इंस्टॉल करना ज़रूरी है).
• Android Emulator (इसे Android Studio में सेट अप करना ज़रूरी है).
• कोई ब्राउज़र (डीबग करने के लिए Chrome ज़रूरी है).
• Windows, Linux या macOS के डेस्कटॉप ऐप्लिकेशन के तौर पर. आपको उसी प्लैटफ़ॉर्म पर डेवलपमेंट करना होगा जहां आपको ऐप्लिकेशन डिप्लॉय करना है. इसलिए, अगर आपको Windows डेस्कटॉप ऐप्लिकेशन डेवलप करना है, तो आपको Windows पर ही डेवलप करना होगा, ताकि सही बिल्ड चेन को ऐक्सेस किया जा सके. ऑपरेटिंग सिस्टम के हिसाब से कुछ ज़रूरी शर्तें होती हैं. इनके बारे में docs.flutter.dev/desktop पर पूरी जानकारी दी गई है.

3. कोडलैब का स्टार्टर ऐप्लिकेशन डाउनलोड करें

क्या आपको MDC-102 से आगे बढ़ना है?

अगर आपने MDC-102 कोडलैब पूरा कर लिया है, तो आपका कोड इस कोडलैब के लिए तैयार होना चाहिए. इस चरण पर जाएं: रंग बदलना.

क्या आपको नए सिरे से शुरुआत करनी है?

स्टार्टर कोडलैब ऐप्लिकेशन डाउनलोड करना

स्टार्टर ऐप्लिकेशन डाउनलोड करें

स्टार्टर ऐप्लिकेशन, material-components-flutter-codelabs-103-starter_and_102-complete/mdc_100_series डायरेक्ट्री में मौजूद होता है.

...या इसे GitHub से क्लोन करें

इस कोडलैब को GitHub से क्लोन करने के लिए, यहां दिए गए निर्देश चलाएं:

git clone https://github.com/material-components/material-components-flutter-codelabs.git
cd material-components-flutter-codelabs/mdc_100_series
git checkout 103-starter_and_102-complete

ज़्यादा मदद पाने के लिए: GitHub से रिपॉज़िटरी का क्लोन बनाना

सही ब्रांच

MDC-101 से लेकर 104 तक के कोडलैब, एक-दूसरे पर आधारित हैं. इसलिए, जब 103 के लिए कोड पूरा हो जाता है, तो वह 104 के लिए स्टार्टर कोड बन जाता है! कोड को अलग-अलग ब्रांच में बांटा जाता है. इस कमांड का इस्तेमाल करके, उन सभी को लिस्ट किया जा सकता है:

git branch --list

पूरा कोड देखने के लिए, 104-starter_and_103-complete ब्रांच देखें.

प्रोजेक्ट खोलें और ऐप्लिकेशन चलाएं

1. अपनी पसंद के एडिटर में प्रोजेक्ट खोलें.
2. अपने चुने गए एडिटर के लिए, शुरू करें: बिना शुल्क आज़माएं में दिए गए "ऐप्लिकेशन चलाएं" निर्देशों का पालन करें.

हो गया! आपको अपने डिवाइस पर, पिछले कोडलैब का Shrine लॉगिन पेज दिखेगा.

Android	iOS

प्रॉडक्ट पेज देखने के लिए, "आगे बढ़ें" पर क्लिक करें.

Android	iOS

4. रंग बदलना

Shrine ब्रैंड को दिखाने वाली कलर स्कीम बनाई गई है. डिज़ाइनर चाहता है कि आप उस कलर स्कीम को Shrine ऐप्लिकेशन पर लागू करें

शुरू करने के लिए, उन रंगों को अपने प्रोजेक्ट में इंपोर्ट करें.

बनाएं colors.dart

lib में colors.dart नाम की एक नई डार्ट फ़ाइल बनाओ. material.dart इंपोर्ट करें और const Color वैल्यू जोड़ें:

import 'package:flutter/material.dart';

const kShrinePink50 = Color(0xFFFEEAE6);
const kShrinePink100 = Color(0xFFFEDBD0);
const kShrinePink300 = Color(0xFFFBB8AC);
const kShrinePink400 = Color(0xFFEAA4A4);

const kShrineBrown900 = Color(0xFF442B2D);

const kShrineErrorRed = Color(0xFFC5032B);

const kShrineSurfaceWhite = Color(0xFFFFFBFA);
const kShrineBackgroundWhite = Colors.white;

पसंद के मुताबिक रंग पटल

इस कलर थीम को एक डिज़ाइनर ने बनाया है. इसमें कस्टम कलर का इस्तेमाल किया गया है. ये कलर नीचे दी गई इमेज में दिखाए गए हैं. इसमें ऐसे रंग शामिल हैं जिन्हें Shrine के ब्रैंड से चुना गया है. साथ ही, इन्हें Material Theme Editor पर लागू किया गया है. Material Theme Editor ने इन्हें बड़ा करके, पूरा पैलेट बनाया है. (ये रंग, 2014 के मटीरियल कलर पैलेट से नहीं लिए गए हैं.)

Material Theme Editor में, इन्हें संख्या के हिसाब से लेबल किए गए शेड में व्यवस्थित किया गया है. इसमें हर रंग के लिए 50, 100, 200, .... से लेकर 900 तक के लेबल शामिल हैं. Shrine, गुलाबी रंग के स्वैच से सिर्फ़ 50, 100, और 300 शेड का इस्तेमाल करता है. साथ ही, भूरे रंग के स्वैच से 900 शेड का इस्तेमाल करता है.

विजेट के हर रंगीन पैरामीटर को इन स्कीम के किसी रंग से मैप किया जाता है. उदाहरण के लिए, जब टेक्स्ट फ़ील्ड में इनपुट दिया जा रहा हो, तब उसके डेकोरेशन का रंग थीम का प्राइमरी कलर होना चाहिए. अगर वह रंग, बैकग्राउंड के हिसाब से सही नहीं है, तो किसी दूसरे रंग का इस्तेमाल करें.

रंग

kShrineBackgroundWhite की वैल्यू, Colors क्लास से ली गई है.

अपनी थीम

अगर आपके ब्रैंड के हिसाब से कुछ खास रंग हैं, तो किसी भी टूल का इस्तेमाल करके, अपने हिसाब से मिलती-जुलती थीम जनरेट की जा सकती हैं. उदाहरण के लिए, मटीरियल थीम बिल्डर.

अब हमारे पास वे रंग हैं जिनका हमें इस्तेमाल करना है. इसलिए, हम उन्हें यूज़र इंटरफ़ेस (यूआई) पर लागू कर सकते हैं. इसके लिए, हम ThemeData विजेट की वैल्यू सेट करेंगे. इस विजेट को हम अपने विजेट के क्रम में सबसे ऊपर मौजूद MaterialApp इंस्टेंस पर लागू करते हैं.

ThemeData.light() को पसंद के मुताबिक बनाएं

Flutter में कुछ बिल्ट-इन थीम शामिल होती हैं. हल्के रंग वाली थीम उनमें से एक है. हम शुरू से ThemeData विजेट बनाने के बजाय, लाइट थीम को कॉपी करेंगे और अपने ऐप्लिकेशन के हिसाब से उसे पसंद के मुताबिक बनाने के लिए, वैल्यू में बदलाव करेंगे.

आइए, app.dart. में colors.dart इंपोर्ट करें

import 'colors.dart';

इसके बाद, ShrineApp क्लास के स्कोप से बाहर app.dart में यह कोड जोड़ें:

// TODO: Build a Shrine Theme (103)
final ThemeData _kShrineTheme = _buildShrineTheme();

ThemeData _buildShrineTheme() {
  final ThemeData base = ThemeData.light(useMaterial3: true);
  return base.copyWith(
    colorScheme: base.colorScheme.copyWith(
      primary: kShrinePink100,
      onPrimary: kShrineBrown900,
      secondary: kShrineBrown900,
      error: kShrineErrorRed,
    ),
    // TODO: Add the text themes (103)
    // TODO: Decorate the inputs (103)
  );
}

अब, ShrineApp के build() फ़ंक्शन (MaterialApp विजेट में) के आखिर में theme: को सेट करें, ताकि यह हमारा नया थीम बन जाए:

  // TODO: Customize the theme (103)
  theme: _kShrineTheme, // New code

ThemeData इंस्टेंस को कॉपी करना

हमने डिफ़ॉल्ट लाइट ThemeData पर copyWith() को कॉल किया. इसके बाद, कुछ कस्टम प्रॉपर्टी वैल्यू पास कीं. copyWith() एक सामान्य तरीका है, जो आपको Flutter में कई क्लास और विजेट पर मिलेगा. यह कमांड, विजेट का ऐसा इंस्टेंस दिखाती है जो उस इंस्टेंस से मेल खाता है जिस पर इसे कॉल किया गया है. हालांकि, इसमें दी गई वैल्यू बदली हुई होती हैं.

सिर्फ़ ThemeData इंस्टेंस को इंस्टैंशिएट करके, उसकी प्रॉपर्टी सेट क्यों नहीं की जाती? हमने कर दिखाया! अगर हमें अपना ऐप्लिकेशन बनाना है, तो ऐसा करना सही होगा. ThemeData में कई प्रॉपर्टी होती हैं. इसलिए, समय बचाने के लिए हम एक आकर्षक थीम से शुरुआत करेंगे और उन वैल्यू को बदलेंगे जिन्हें हम कोडलैब में देख सकते हैं. बाद में, जब हम कोई दूसरी थीम आज़माएंगे, तो हम Material Flutter में शामिल किसी दूसरे ThemeData से शुरुआत करेंगे.

ThemeData के बारे में ज़्यादा जानने के लिए, Flutter का दस्तावेज़ पढ़ें.

अपना प्रोजेक्ट सेव करें. अब आपकी लॉगिन स्क्रीन ऐसी दिखनी चाहिए:

Android	iOS

5. टाइपोग्राफ़ी और लेबल स्टाइल में बदलाव करना

रंगों में बदलाव के अलावा, डिज़ाइनर ने हमें इस्तेमाल करने के लिए खास टाइपोग्राफ़ी भी दी है. Flutter के ThemeData में तीन टेक्स्ट थीम शामिल होती हैं. हर टेक्स्ट थीम, टेक्स्ट स्टाइल का कलेक्शन होती है. जैसे, "हेडलाइन" और "टाइटल". हम अपने ऐप्लिकेशन के लिए कुछ स्टाइल इस्तेमाल करेंगे और कुछ वैल्यू में बदलाव करेंगे.

टेक्स्ट थीम को पसंद के मुताबिक बनाना

प्रोजेक्ट में फ़ॉन्ट इंपोर्ट करने के लिए, उन्हें pubspec.yaml फ़ाइल में जोड़ना होगा.

pubspec.yaml में, flutter: टैग के तुरंत बाद यह कोड जोड़ें:

  # TODO: Insert Fonts (103)
  fonts:
    - family: Rubik
      fonts:
        - asset: fonts/Rubik-Regular.ttf
        - asset: fonts/Rubik-Medium.ttf
          weight: 500

अब Rubik फ़ॉन्ट को ऐक्सेस और इस्तेमाल किया जा सकता है.

pubspec फ़ाइल से जुड़ी समस्या हल करना

ऊपर दिए गए एलान को कट करके चिपकाने पर, आपको pub get चलाने में गड़बड़ियां मिल सकती हैं. अगर आपको गड़बड़ियां मिलती हैं, तो सबसे पहले लाइन की शुरुआत में मौजूद खाली जगह को हटाएं. इसके बाद, दो स्पेस इंडेंटेशन का इस्तेमाल करके, उसकी जगह स्पेस डालें. (दो स्पेस पहले

fonts:

, चार स्पेस पहले

family: Rubik

, और इसी तरह आगे भी.)

अगर आपको यहां वैल्यू मैप करने की अनुमति नहीं है मैसेज दिखता है, तो उस लाइन के इंडेंटेशन की जांच करें जिसमें समस्या है. साथ ही, उससे ऊपर की लाइनों के इंडेंटेशन की जांच करें.

login.dart में, Column() के अंदर मौजूद इन वैल्यू को बदलें:

Column(
  children: <Widget>[
    Image.asset('assets/diamond.png'),
    const SizedBox(height: 16.0),
    Text(
      'SHRINE',
      style: Theme.of(context).textTheme.headlineSmall,
    ),
  ],
)

app.dart में, _buildShrineTheme() के बाद यह जोड़ें:

// TODO: Build a Shrine Text Theme (103)
TextTheme _buildShrineTextTheme(TextTheme base) {
  return base
      .copyWith(
        headlineSmall: base.headlineSmall!.copyWith(
          fontWeight: FontWeight.w500,
        ),
        titleLarge: base.titleLarge!.copyWith(
          fontSize: 18.0,
        ),
        bodySmall: base.bodySmall!.copyWith(
          fontWeight: FontWeight.w400,
          fontSize: 14.0,
        ),
        bodyLarge: base.bodyLarge!.copyWith(
          fontWeight: FontWeight.w500,
          fontSize: 16.0,
        ),
      )
      .apply(
        fontFamily: 'Rubik',
        displayColor: kShrineBrown900,
        bodyColor: kShrineBrown900,
      );
}

यह TextTheme लेता है और इससे हेडलाइन, टाइटल, और कैप्शन के दिखने का तरीका बदल जाता है.

इस तरह से fontFamily लागू करने पर, बदलाव सिर्फ़ copyWith() में बताई गई टाइपोग्राफ़ी स्केल वैल्यू (हेडलाइन, टाइटल, कैप्शन) पर लागू होते हैं.

कुछ फ़ॉन्ट के लिए, हम fontWeight को 100 के इंक्रीमेंट में कस्टम तौर पर सेट कर रहे हैं: w500 (500 वेट) का मतलब मीडियम और w400 का मतलब रेगुलर है.

नए टेक्स्टथीमका इस्तेमाल करना

टेक्स्ट की थीम

टेक्स्ट थीम, यह पक्का करने का एक उपयोगी तरीका है कि आपके ऐप्लिकेशन में मौजूद सभी टेक्स्ट एक जैसे हों और उन्हें पढ़ा जा सके. उदाहरण के लिए, थीम के मुख्य रंग की चमक के आधार पर, टेक्स्ट थीम की स्टाइल काली या सफ़ेद हो सकती है. इससे यह पक्का होता है कि टेक्स्ट और बैकड्रॉप के बीच सही कंट्रास्ट हो, ताकि टेक्स्ट को हमेशा पढ़ा जा सके.

TextTheme के बारे में ज़्यादा जानने के लिए, Flutter का दस्तावेज़ पढ़ें.

गड़बड़ी ठीक करने के बाद, _buildShrineTheme में ये थीम जोड़ें:

// TODO: Add the text themes (103)
textTheme: _buildShrineTextTheme(base.textTheme),
textSelectionTheme: const TextSelectionThemeData(
  selectionColor: kShrinePink100,
),

अपना प्रोजेक्ट सेव करें. इस बार, ऐप्लिकेशन को भी रीस्टार्ट करें. इसे हॉट रीस्टार्ट कहा जाता है, क्योंकि हमने फ़ॉन्ट में बदलाव किया है.

टाइपोग्राफ़ी के बारे में जानकारी:

• छोटे टाइप और मुख्य टेक्स्ट के लिए इस्तेमाल किए जाने वाले टेक्स्ट फ़ॉन्ट चुनते समय, ऐसे फ़ॉन्ट चुनें जो किसी खास स्टाइल के बजाय साफ़ हों.
• डिस्प्ले फ़ॉन्ट का इस्तेमाल बड़े टाइप और टाइटल के लिए किया जाता है. इनका इस्तेमाल ब्रैंड को दिखाने या उस पर ज़ोर देने के लिए किया जाना चाहिए.

Android	iOS

लॉगिन और होम स्क्रीन पर मौजूद टेक्स्ट अलग-अलग दिख रहा है. कुछ टेक्स्ट में Rubik फ़ॉन्ट का इस्तेमाल किया गया है. वहीं, कुछ टेक्स्ट काले या सफ़ेद रंग के बजाय भूरे रंग में दिख रहा है. आइकॉन भी भूरे रंग में रेंडर होते हैं.

टेक्स्ट को छोटा करना

लेबल बहुत बड़े हैं.

home.dart में, सबसे अंदर वाले कॉलम का children: बदलें:

// TODO: Change innermost Column (103)
children: <Widget>[
// TODO: Handle overflowing labels (103)
  Text(
    product.name,
    style: theme.textTheme.button,
    softWrap: false,
    overflow: TextOverflow.ellipsis,
    maxLines: 1,
  ),
  const SizedBox(height: 4.0),
  Text(
    formatter.format(product.price),
    style: theme.textTheme.bodySmall,
  ),
  // End new code
],

टेक्स्ट को बीच में रखना और छोड़ना

हमें लेबल को बीच में अलाइन करना है. साथ ही, टेक्स्ट को हर इमेज के सबसे नीचे अलाइन करने के बजाय, हर कार्ड के सबसे नीचे अलाइन करना है.

लेबल को मुख्य ऐक्सिस के आखिर (नीचे) में ले जाएं और उन्हें बीच में अलाइन करें::

  // TODO: Align labels to the bottom and center (103)
  mainAxisAlignment: MainAxisAlignment.end,
  crossAxisAlignment: CrossAxisAlignment.center,

अपना प्रोजेक्ट सेव करें.

Android	iOS

यह पहले से बेहतर लग रहा है.

टेक्स्ट फ़ील्ड में थीम लागू करना

InputDecorationTheme का इस्तेमाल करके, टेक्स्ट फ़ील्ड में डेकोरेशन के लिए थीम भी सेट की जा सकती है.

app.dart में, _buildShrineTheme() तरीके में, inputDecorationTheme: वैल्यू डालें:

// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
  border: OutlineInputBorder(),
),

फ़िलहाल, टेक्स्ट फ़ील्ड में filled डेकोरेशन है. चलिए, इसे हटाते हैं. filled को हटाने और inputDecorationTheme को तय करने से, टेक्स्ट फ़ील्ड को आउटलाइन स्टाइल मिल जाएगी.

login.dart में, filled: true वैल्यू हटाएं:

// Remove filled: true values (103)
TextField(
  controller: _usernameController,
  decoration: const InputDecoration(
    // Removed filled: true
    labelText: 'Username',
  ),
),
const SizedBox(height: 12.0),
TextField(
  controller: _passwordController,
  decoration: const InputDecoration(
    // Removed filled: true
    labelText: 'Password',
  ),
  obscureText: true,
),

हॉट रीस्टार्ट. उपयोगकर्ता नाम फ़ील्ड चालू होने पर (जब उसमें टाइप किया जा रहा हो), आपकी लॉगिन स्क्रीन कुछ ऐसी दिखनी चाहिए:

Android	iOS

टेक्स्ट फ़ील्ड में टाइप करें—बॉर्डर और फ़्लोटिंग लेबल, मुख्य रंग में रेंडर होते हैं. हालांकि, इसे आसानी से नहीं देखा जा सकता. यह उन लोगों के लिए ऐक्सेस नहीं किया जा सकता जिन्हें ऐसे पिक्सल में अंतर करने में परेशानी होती है जिनमें रंग का कंट्रास्ट ज़्यादा नहीं होता. (ज़्यादा जानकारी के लिए, Material Guidelines का Color & Accessibility लेख पढ़ें.)

app.dart में, inputDecorationTheme: में जाकर focusedBorder: तय करें :

// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
  border: OutlineInputBorder(),
  focusedBorder: OutlineInputBorder(
    borderSide: BorderSide(
      width: 2.0,
      color: kShrineBrown900,
    ),
  ),
),

इसके बाद, inputDecorationTheme: में जाकर floatingLabelStyle: की जानकारी डालें :

// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
  border: OutlineInputBorder(),
  focusedBorder: OutlineInputBorder(
    borderSide: BorderSide(
      width: 2.0,
      color: kShrineBrown900,
    ),
  ),
  floatingLabelStyle: TextStyle(
    color: kShrineBrown900,
  ),
),

आखिर में, कंट्रास्ट बढ़ाने के लिए, 'रद्द करें' बटन के लिए प्राइमरी कलर के बजाय सेकंडरी कलर का इस्तेमाल करें.

TextButton(
  child: const Text('CANCEL'),
  onPressed: () {
    _usernameController.clear();
    _passwordController.clear();
  },
  style: TextButton.styleFrom(
    primary: Theme.of(context).colorScheme.secondary,
  ),
),

अपना प्रोजेक्ट सेव करें.

Android	iOS

6. ऊंचाई में बदलाव करना

आपने पेज को Shrine से मैच करने वाले खास रंग और टाइपोग्राफ़ी से स्टाइल कर लिया है. अब, आइए एलिवेशन को अडजस्ट करें.

'आगे बढ़ें' बटन की ऊंचाई बदलना

ElevatedButton के लिए, डिफ़ॉल्ट एलिवेशन 2 होता है. चलो, इसे और बेहतर बनाते हैं.

login.dart में, NEXT ElevatedButton में style: वैल्यू जोड़ें:

ElevatedButton(
  child: const Text('NEXT'),
  onPressed: () {
    Navigator.pop(context);
  },
  style: ElevatedButton.styleFrom(
    foregroundColor: kShrineBrown900,
    backgroundColor: kShrinePink100,
    elevation: 8.0,
  ),
),

अपना प्रोजेक्ट सेव करें.

Android	iOS

कार्ड की ऊंचाई में बदलाव करना

फ़िलहाल, कार्ड साइट के नेविगेशन के बगल में, सफ़ेद रंग की सतह पर मौजूद हैं.

home.dart में, कार्ड के लिए elevation: वैल्यू जोड़ें:

// TODO: Adjust card heights (103)
elevation: 0.0,

प्रोजेक्ट सेव करें.

Android	iOS

आपने कार्ड के नीचे मौजूद शैडो को हटा दिया है.

ऊंचाई के बारे में जानकारी:

• Material Design के सभी कॉम्पोनेंट और सर्फ़ेस में एलिवेशन वैल्यू होती हैं.
• किसी ऑब्जेक्ट की सतहों के बीच की सीमा को उसके किनारों से पहचाना जाता है.
• अलग-अलग प्लैटफ़ॉर्म के बीच एलिवेशन के अंतर को दिखाने के लिए, धुंधले बैकग्राउंड, ज़्यादा रोशनी वाले बैकग्राउंड या शैडो का इस्तेमाल किया जा सकता है.
• आम तौर पर, अन्य प्लैटफ़ॉर्म के मुकाबले सबसे ऊपर दिखने वाले प्लैटफ़ॉर्म पर ज़्यादा ज़रूरी कॉन्टेंट होता है.

7. आकार जोड़ें

मंदिर में जियोमेट्रिक स्टाइल का इस्तेमाल किया गया है. इसमें अष्टकोणीय या आयताकार शेप का इस्तेमाल किया गया है. आइए, होम स्क्रीन पर मौजूद कार्ड, लॉगिन स्क्रीन पर मौजूद टेक्स्ट फ़ील्ड, और बटन में इस शेप स्टाइल को लागू करें.

लॉगिन स्क्रीन पर, टेक्स्ट फ़ील्ड के आकार बदलना

app.dart में, यह फ़ाइल इंपोर्ट करें:

import 'supplemental/cut_corners_border.dart';

अब भी app.dart में, टेक्स्ट फ़ील्ड डेकोरेशन थीम में बदलाव करके, कटे हुए कोनों वाली बॉर्डर का इस्तेमाल करें:

// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
  border: CutCornersBorder(),
  focusedBorder: CutCornersBorder(
    borderSide: BorderSide(
      width: 2.0,
      color: kShrineBrown900,
    ),
  ), 
  floatingLabelStyle: TextStyle(
    color: kShrineBrown900,
  ),
),

लॉगिन स्क्रीन पर बटन के आकार बदलना

login.dart में, रद्द करें बटन में बेवल वाला रेक्टैंगल बॉर्डर जोड़ें:

TextButton(
  child: const Text('CANCEL'),
  onPressed: () {
    _usernameController.clear();
    _passwordController.clear();
  },
  style: TextButton.styleFrom(
    foregroundColor: kShrineBrown900,
    shape: const BeveledRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(7.0)),
    ),
  ),
),

TextButton का कोई आकार नहीं दिखता, इसलिए बॉर्डर का आकार क्यों जोड़ें? इसलिए, छूने पर रिपल ऐनिमेशन उसी शेप में दिखता है.

अब 'आगे बढ़ें' बटन में भी वही शेप जोड़ें:

ElevatedButton(
  child: const Text('NEXT'),
  onPressed: () {
    Navigator.pop(context);
  },
  style: ElevatedButton.styleFrom(
    foregroundColor: kShrineBrown900,
    backgroundColor: kShrinePink100,
    elevation: 8.0,
    shape: const BeveledRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(7.0)),
    ),
  ),
),

सभी बटन के आकार बदलने के लिए, हम app.dart में elevatedButtonTheme या textButtonTheme का इस्तेमाल भी कर सकते हैं. यह सीखने वाले के लिए एक चुनौती है!

आकार के बारे में जानकारी:

• आकृतियां, किसी ब्रैंड के विज़ुअल एक्सप्रेशन में अहम भूमिका निभा सकती हैं.
• आकृतियों में, अडजस्ट किए जा सकने वाले कर्व और कोने के एंगल, कर्व और किनारे के एंगल, और कोनों की कुल संख्या होती है.
• किसी कॉम्पोनेंट का आकार ऐसा नहीं होना चाहिए जिससे उसके इस्तेमाल में कोई समस्या आए!

हॉट रीस्टार्ट.

Android	iOS

8. लेआउट बदलना

इसके बाद, लेआउट को बदलकर कार्ड को अलग-अलग आसपेक्ट रेशियो और साइज़ में दिखाते हैं, ताकि हर कार्ड दूसरे कार्ड से अलग दिखे.

GridView को AsymmetricView से बदलना

हमने पहले ही एसिमेट्रिकल लेआउट के लिए फ़ाइलें लिख दी हैं.

home.dart में, यह इंपोर्ट जोड़ें:

import 'supplemental/asymmetric_view.dart';

_buildGridCards को मिटाएं और body को बदलें:

body: AsymmetricView(
  products: ProductsRepository.loadProducts(Category.all),
),

प्रोजेक्ट सेव करें.

Android	iOS

अब प्रॉडक्ट, बुने हुए पैटर्न में हॉरिज़ॉन्टल तरीके से स्क्रोल होते हैं.

9. कोई दूसरी थीम आज़माएं (ज़रूरी नहीं)

रंग, अपने ब्रैंड को दिखाने का एक असरदार तरीका है. रंग में थोड़ा सा बदलाव करने से, उपयोगकर्ता अनुभव पर काफ़ी असर पड़ सकता है. इसे आज़माने के लिए, आइए देखते हैं कि अगर ब्रैंड की कलर स्कीम थोड़ी अलग हो, तो Shrine कैसा दिखेगा.

रंगों में बदलाव करना

colors.dart में, यह रंग जोड़ें:

const kShrinePurple = Color(0xFF5D1049);

app.dart में, _buildShrineTheme() फ़ंक्शन को इनमें से किसी एक में बदलें:

ThemeData _buildShrineTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
    colorScheme: base.colorScheme.copyWith(
      primary: kShrinePurple,
      secondary: kShrinePurple,
      error: kShrineErrorRed,
    ),
    scaffoldBackgroundColor: kShrineSurfaceWhite,
    textSelectionTheme: const TextSelectionThemeData(
      selectionColor: kShrinePurple,
    ),
    appBarTheme: const AppBarTheme(
      foregroundColor: kShrineBrown900,
      backgroundColor: kShrinePink100,
    ),

    inputDecorationTheme: const InputDecorationTheme(
      border: CutCornersBorder(),
      focusedBorder: CutCornersBorder(
        borderSide: BorderSide(
          width: 2.0,
          color: kShrinePurple,
        ),
      ),
      floatingLabelStyle: TextStyle(
        color: kShrinePurple,
      ),
    ),
  );
}

हॉट रीस्टार्ट. अब आपको नई थीम दिखने लगेगी.

Android	iOS

Android	iOS

नतीजा बहुत अलग है! आइए, app.dart's _buildShrineTheme को इस चरण से पहले वाली स्थिति में वापस लाते हैं. इसके अलावा, 104 के स्टार्टर कोड को डाउनलोड करें.

MDC-104 का स्टार्टर कोड डाउनलोड करें

10. बधाई हो!

अब तक, आपने एक ऐसा ऐप्लिकेशन बना लिया है जो आपके डिज़ाइनर की डिज़ाइन से जुड़ी खास बातों के मुताबिक है.

MDC-103 ऐप्लिकेशन, 104-starter_and_103-complete ब्रांच में उपलब्ध है.

उस ब्रांच में मौजूद ऐप्लिकेशन के साथ, पेज के अपने वर्शन की जांच की जा सकती है.

अगले चरण

आपने अब Material Flutter की इन सुविधाओं का इस्तेमाल किया है: थीम, टाइपोग्राफ़ी, एलिवेशन, और शेप. Material Flutter लाइब्रेरी में, ज़्यादा कॉम्पोनेंट और सबसिस्टम देखे जा सकते हैं.

supplemental डायरेक्ट्री में मौजूद फ़ाइलों को देखें. इससे आपको यह पता चलेगा कि हमने हॉरिज़ॉन्टल स्क्रोलिंग वाली, एसिमेट्रिक लेआउट ग्रिड कैसे बनाई.

अगर आपके प्लान किए गए ऐप्लिकेशन के डिज़ाइन में ऐसे एलिमेंट शामिल हैं जिनके कॉम्पोनेंट लाइब्रेरी में मौजूद नहीं हैं, तो क्या होगा? MDC-104: Material Advanced Components में, हमने बताया है कि मनमुताबिक लुक पाने के लिए, Material Flutter लाइब्रेरी का इस्तेमाल करके कस्टम कॉम्पोनेंट कैसे बनाए जाते हैं.

अगला कोडलैब

मैंने इस कोडलैब को कम समय और कम मेहनत में पूरा कर लिया

पूरी तरह सहमत सहमत न तो सहमत, न ही असहमत असहमत पूरी तरह असहमत

मुझे आने वाले समय में, Material Components का इस्तेमाल जारी रखना है

पूरी तरह सहमत सहमत न तो सहमत, न ही असहमत असहमत पूरी तरह असहमत