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

1. परिचय

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

Material Design, डिजिटल प्रॉडक्ट को बेहतर और खूबसूरत बनाने का एक सिस्टम है. स्टाइल, ब्रैंडिंग, इंटरैक्शन, और मोशन को सिद्धांतों और कॉम्पोनेंट के एक जैसे सेट के तहत लाकर, प्रॉडक्ट टीमें डिज़ाइन की अपनी पूरी क्षमता का इस्तेमाल कर सकती हैं.

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

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

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

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

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

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

Android

iOS

Android पर Shrine का लॉगिन पेज

iOS पर Shrine का लॉगिन पेज

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

स्टार्टर प्रोजेक्ट, 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. अपने चुने गए एडिटर के लिए, शुरू करें: बिना शुल्क आज़माएं में दिए गए "ऐप्लिकेशन चलाएं" निर्देशों का पालन करें.

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

Android

iOS

Shrine का लोगो

Shrine का लोगो

आइए, कोड देखते हैं.

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 स्टेटमेंट की मदद से, इस फ़ाइल में Material लाइब्रेरी का इस्तेमाल किया जा सकता है.
  • 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 वैल्यू, उपयोगकर्ता के टाइप किए गए इनपुट को अपने-आप बुलेट से बदल देती है. यह पासवर्ड के लिए सही है.

अपने प्रोजेक्ट को सेव करें. इसके लिए, कीस्ट्रोक: command + s का इस्तेमाल करें. इससे हॉट रिलोड होता है.

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

Android

iOS

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

5. बटन जोड़ना

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

OverflowBar जोड़ना

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

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

Shrine का लोगो, उपयोगकर्ता नाम और पासवर्ड फ़ील्ड, रद्द करें और आगे बढ़ें बटन

Shrine का लोगो, उपयोगकर्ता नाम और पासवर्ड फ़ील्ड, रद्द करें और आगे बढ़ें बटन

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

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

Add 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,

Edit onPressed

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

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

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

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

पॉप

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

ElevatedButton के onPressed: फ़ंक्शन में, नेविगेटर से सबसे हाल का रूट हटाएं:

        // 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 के लिए उपलब्ध Material Components में कई स्टाइल होती हैं. इन्हें स्क्रीन पर आसानी से रखा जा सकता है.

अगले चरण

टेक्स्ट फ़ील्ड और बटन, Material System के दो मुख्य कॉम्पोनेंट हैं. हालांकि, इसके अलावा भी कई कॉम्पोनेंट हैं! बाकी कॉम्पोनेंट के बारे में जानने के लिए, Material Components widgets catalog पर जाएं.

इसके अलावा, Flutter के लिए MDC-102 में शामिल कॉम्पोनेंट के बारे में जानने के लिए, MDC-102: Material Design Structure and Layout पर जाएं.

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

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

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

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