MDC-101 Flutter: मटीरियल कॉम्पोनेंट से जुड़ी बुनियादी बातें

1. परिचय

मटीरियल डिज़ाइन और मटीरियल फ़्लटर लाइब्रेरी क्या हैं?

मटीरियल डिज़ाइन एक ऐसा सिस्टम है जो अच्छे और आकर्षक डिजिटल प्रॉडक्ट बनाता है. सिद्धांतों और कॉम्पोनेंट के एक जैसे सेट के तहत स्टाइल, ब्रैंडिंग, इंटरैक्शन, और मोशन की सुविधा इस्तेमाल करके, प्रॉडक्ट टीम अपने डिज़ाइन की क्षमता को पहचान सकती हैं.

Material Flutter लाइब्रेरी में Flutter विजेट शामिल हैं. ये मटीरियल डिज़ाइन कॉम्पोनेंट के डिज़ाइन लागू करते हैं. इन्हें MDC कहा जाता है. इससे सभी ऐप्लिकेशन और प्लैटफ़ॉर्म पर एक जैसा उपयोगकर्ता अनुभव मिलता है. मटीरियल डिज़ाइन सिस्टम के बेहतर होने के साथ-साथ, इन कॉम्पोनेंट को अपडेट किया जाता है, ताकि Google के फ़्रंट-एंड डेवलपमेंट स्टैंडर्ड के हिसाब से, पिक्सल-परफ़ेक्ट लागू करने का एक जैसा तरीका तय किया जा सके.

इस कोडलैब में, Material Flutter के कई कॉम्पोनेंट का इस्तेमाल करके लॉगिन पेज बनाया जा सकता है.

आपको क्या बनाना होगा

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

इस कोडलैब में, आप श्राइन के लिए एक लॉगिन पेज बनाएंगे, जिसमें यह जानकारी होगी:

  • मंदिर के लोगो की इमेज
  • ऐप्लिकेशन का नाम (Shरीन)
  • दो टेक्स्ट फ़ील्ड, एक उपयोगकर्ता नाम डालने के लिए और दूसरा पासवर्ड डालने के लिए
  • दो बटन

Android

iOS

Android पर श्राइन का लॉगिन पेज

iOS पर काट-छांट करने का लॉगिन पेज

इस कोडलैब में मौजूद मटीरियल 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. कोडलैब स्टार्टर ऐप्लिकेशन डाउनलोड करें

स्टार्टर प्रोजेक्ट, material-components-flutter-codelabs-101-starter/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 101-starter

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

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

हो गया! आपके डिवाइस पर श्राइन के लॉगिन पेज का स्टार्टर कोड काम करना चाहिए. आपको श्राइन का लोगो और "श्रीन" नाम दिखना चाहिए के ठीक नीचे.

Android

iOS

मंदिर का लोगो

मंदिर का लोगो

आइए कोड को देखें.

login.dart में विजेट

login.dart खोलें. इसमें यह जानकारी होनी चाहिए:

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // TODO: Add text editing controllers (101)
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            const SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                const SizedBox(height: 16.0),
                const Text('SHRINE'),
              ],
            ),
            const SizedBox(height: 120.0),
            // TODO: Remove filled: true values (103)
            // TODO: Add TextField widgets (101)
            // TODO: Add button bar (101)
          ],
        ),
      ),
    );
  }
}

ध्यान दें कि इसमें एक import स्टेटमेंट और दो नई क्लास शामिल हैं:

  • import स्टेटमेंट, इस फ़ाइल में मटीरियल लाइब्रेरी का इस्तेमाल करने की अनुमति देता है.
  • LoginPage क्लास, सिम्युलेटर में दिखाया गया पूरा पेज दिखाती है.
  • _LoginPageState क्लास का build() फ़ंक्शन, यह कंट्रोल करता है कि हमारे यूज़र इंटरफ़ेस (यूआई) में सभी विजेट कैसे बनाए जाएं.

4. TextField विजेट जोड़ें

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

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

TextField विजेट जोड़ना

const SizedBox(height: 120.0) के बाद दो नए टेक्स्ट फ़ील्ड और स्पेसर जोड़ें.

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// spacer
const SizedBox(height: 120.0),
// [Password]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),

हर टेक्स्ट फ़ील्ड में एक decoration: फ़ील्ड होता है, जो InputDecoration विजेट का इस्तेमाल करता है. filled: फ़ील्ड का मतलब है कि टेक्स्ट फ़ील्ड का बैकग्राउंड हल्के से भरा हुआ है. इससे लोगों को टेक्स्ट फ़ील्ड में टैप या टच टारगेट वाली जगह को पहचानने में आसानी होती है. दूसरे टेक्स्ट फ़ील्ड की obscureText: true वैल्यू अपने-आप उस इनपुट को बदल देती है जिसे उपयोगकर्ता, बुलेट से टाइप करता है. यह पासवर्ड के लिए सही होता है.

अपने प्रोजेक्ट को (keyस्ट्रोक: command + s के साथ) सेव करें, जो हॉट रीलोड करता है.

अब आपको एक पेज दिखेगा, जिसमें उपयोगकर्ता नाम और पासवर्ड के लिए दो टेक्स्ट फ़ील्ड होंगे! फ़्लोटिंग लेबल ऐनिमेशन देखें:

Android

iOS

उपयोगकर्ता नाम और पासवर्ड फ़ील्ड के साथ श्राइन का लोगो

5. बटन जोड़ना

इसके बाद, हम अपने लॉगिन पेज पर दो बटन जोड़ देंगे: "रद्द करें" और "आगे बढ़ें." हम दो तरह के बटन विजेट का इस्तेमाल करेंगे: TextButton और EdivatedButton.

ओवरफ़्लोबार जोड़ें

टेक्स्ट फ़ील्ड के बाद, ListView के चाइल्ड एंट्री में OverflowBar जोड़ें:

// TODO: Add button bar (101)
OverflowBar(
  alignment: MainAxisAlignment.end,
  // TODO: Add a beveled rectangular border to CANCEL (103)
  children: <Widget>[
    // TODO: Add buttons (101)
  ],
),

OverflowBar अपने चाइल्ड एंट्री को एक लाइन में व्यवस्थित करता है.

बटन जोड़ना

फिर OverflowBar की children की सूची में दो बटन जोड़ें:

    // TODO: Add buttons (101)
    TextButton(
      child: const Text('CANCEL'),
      onPressed: () {
        // TODO: Clear the text fields (101)
      },
    ),
    // TODO: Add an elevation to NEXT (103)
    // TODO: Add a beveled rectangular border to NEXT (103)
    ElevatedButton(
      child: const Text('NEXT'),
      onPressed: () {
    // TODO: Show the next page (101) 
      },
    ),

अपना प्रोजेक्ट सेव करें. आखिरी टेक्स्ट फ़ील्ड में, आपको दो बटन दिखेंगे:

Android

iOS

श्राइन का लोगो, जिसमें उपयोगकर्ता नाम और पासवर्ड फ़ील्ड मौजूद है. इसमें &#39;रद्द करें&#39; और &#39;आगे बढ़ें&#39; बटन भी हैं

श्राइन का लोगो, जिसमें उपयोगकर्ता नाम और पासवर्ड फ़ील्ड मौजूद है. इसमें &#39;रद्द करें&#39; और &#39;आगे बढ़ें&#39; बटन भी हैं

OverflowBar आपके लिए लेआउट का काम संभालता है. यह बटनों को हॉरिज़ॉन्टल तौर पर इस तरह सेट करता है कि वे साथ-साथ दिखते हैं.

किसी बटन को स्पर्श करने से स्याही रिपल ऐनिमेशन शुरू हो जाता है, जिसके कारण कुछ और नहीं होता. चलिए, बिना नाम वाले onPressed: फ़ंक्शन में फ़ंक्शन जोड़ते हैं, ताकि 'रद्द करें' बटन से टेक्स्ट फ़ील्ड साफ़ हो जाएं और 'आगे बढ़ें' बटन स्क्रीन को खारिज कर सके:

TextEditingControllers जोड़ें

टेक्स्ट फ़ील्ड को मिटाने के लिए' वैल्यू सेट करते हैं, तो हम उनके टेक्स्ट को कंट्रोल करने के लिए TextEditingControllers जोड़ेंगे.

_LoginPageState क्लास के एलान के ठीक नीचे, कंट्रोलर को final वैरिएबल के तौर पर जोड़ें.

  // TODO: Add text editing controllers (101)
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

पहले टेक्स्ट फ़ील्ड के controller: फ़ील्ड पर, _usernameController सेट करें:

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  controller: _usernameController,

दूसरे टेक्स्ट फ़ील्ड के controller: फ़ील्ड पर, अब _passwordController सेट करें:

// TODO: Add TextField widgets (101)
// [Password]
TextField(
  controller: _passwordController,

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

TextButton के onPressed: फ़ंक्शन में मौजूद हर कंट्रोलर को हटाने के लिए कोई निर्देश जोड़ें:

    // TODO: Clear the text fields (101)
    _usernameController.clear();
    _passwordController.clear();

अपना प्रोजेक्ट सेव करें. अब जब आप टेक्स्ट फ़ील्ड में कुछ लिखेंगे, तो रद्द करने पर हर फ़ील्ड फिर से हट जाएगा.

यह लॉगिन फ़ॉर्म अच्छी स्थिति में है! आइए, अपने उपयोगकर्ताओं को शेष श्राइन ऐप्लिकेशन पर आगे बढ़ाएं.

पॉप

इस व्यू को खारिज करने के लिए, हमें इस पेज (जिसे Flutter को रूट कहा जाता है) को नेविगेशन स्टैक से पॉप (या हटाना) करना है.

EevatedButton के onPressed: फ़ंक्शन में, Navigator से सबसे हाल के रूट को पॉप करें:

        // TODO: Show the next page (101) 
        Navigator.pop(context);

आखिर में, home.dart खोलें और Scaffold में resizeToAvoidBottomInset को false पर सेट करें:

    return Scaffold(
      // TODO: Add app bar (102)
      // TODO: Add a grid view (102)
      body: Center(
        child: Text('You did it!'),
      ),
      // TODO: Set resizeToAvoidBottomInset (101)
      resizeToAvoidBottomInset: false,
    );

ऐसा करने से यह पक्का हो जाएगा कि कीबोर्ड के दिखने से, होम पेज या इसके विजेट के साइज़ में कोई बदलाव नहीं होगा.

हो गया! अपना प्रोजेक्ट सेव करें. आगे बढ़ें और "आगे बढ़ें" पर क्लिक करें.

आपने कर दिखाया!

Android

iOS

स्क्रीन जिस पर लिखा है &#39;आपने कर लिया&#39;

स्क्रीन जिस पर लिखा है &#39;आपने कर लिया&#39;

यह स्क्रीन हमारे अगले कोडलैब का शुरुआती पॉइंट है जिस पर MDC-102 में काम किया जाएगा.

6. बधाई हो!

हमने टेक्स्ट फ़ील्ड और बटन जोड़ दिए और हमें लेआउट कोड को ध्यान में नहीं रखना पड़ा. Flutter में मौजूद मटीरियल कॉम्पोनेंट अलग-अलग स्टाइल में उपलब्ध होते हैं. इन्हें आसानी से स्क्रीन पर लगाया जा सकता है.

अगले चरण

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

इसके अलावा, MDC-102: मटीरियल डिज़ाइन स्ट्रक्चर और लेआउट पर जाकर भी Flutter के लिए MDC-102 में कवर किए गए कॉम्पोनेंट के बारे में जानें.

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

पूरी तरह सहमत सहमत कोई फ़र्क़ नहीं पड़ता असहमत पूरी तरह असहमत

मुझे आने वाले समय में मटीरियल कॉम्पोनेंट इस्तेमाल करते रहना है

पूरी तरह सहमत सहमत कोई फ़र्क़ नहीं पड़ता असहमत पूरी तरह असहमत