टिप कैलकुलेटर बनाने के लिए स्पंदन का उपयोग कैसे करें

जैसे-जैसे फ़्लटर मोबाइल ऐप डेवलपमेंट फ्रेमवर्क अधिक से अधिक लोकप्रिय होता जा रहा है, कई व्यवसाय अपनी परियोजनाओं के लिए इसका उपयोग करना चुन रहे हैं।

कई डेवलपर विजेट्स की सरल संरचना का उपयोग करके पिक्सेल परफेक्ट UI के साथ ऐप्स विकसित करने की इसकी क्षमता की सराहना करते हैं। मुझे लगता है कि फ़्लटर मोबाइल ऐप के विकास का भविष्य है क्योंकि UI को विकसित करने में इसकी सादगी और डार्ट प्रोग्रामिंग भाषा का उपयोग करके फीचर लॉजिक को पावर करने की क्षमता है।

यह ट्यूटोरियल मुख्य रूप से एक साधारण टिप कैलकुलेटर ऐप बनाकर आपको फ़्लटर फ्रेमवर्क की मूल बातें सिखाने पर केंद्रित है। हम स्टेटफुल और स्टेटलेस विजेट कक्षाओं सहित मानक कोडिंग पैटर्न को कवर करेंगे और कुछ ऐसे विजेट जिनका आप फ़्लटर ऐप डेवलपमेंट के दौरान सबसे अधिक उपयोग करेंगे।

यहाँ विचार एक स्टार्टर फ़्लटर प्रोजेक्ट स्थापित करके शुरू करना है। फिर, हम समग्र UI और बुनियादी कार्यक्षमता को लागू करने के लिए आगे बढ़ेंगे।

तो, चलिए शुरू करते हैं!

अपना फ़्लटर प्रोजेक्ट कैसे सेट करें

एक नया फ़्लटर प्रोजेक्ट बनाने के लिए, आपके सिस्टम पर फ़्लटर एसडीके स्थापित होना चाहिए। एक सरल और त्वरित स्थापना प्रक्रिया के लिए, आप आधिकारिक स्पंदन प्रलेखन का पालन कर सकते हैं।

याद रखें कि अगर आप एंड्रॉइड प्लेटफॉर्म के लिए ऐप विकसित कर रहे हैं तो इसके लिए एंड्रॉइड स्टूडियो और एंड्रॉइड एसडीके की भी आवश्यकता होती है।

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

flutter create tipCalculator

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

यदि आपके पास डिवाइस सिम्युलेटर या वास्तविक स्मार्टफोन डिवाइस जुड़ा हुआ है, तो आप ऐप लॉन्च करने के लिए बस निम्न आदेश चला सकते हैं:

flutter run

वैकल्पिक रूप से, आप अपने कीबोर्ड पर 'F5' दबा सकते हैं जो VSCode में एक मेनू विकल्प को ट्रिगर करेगा। उस मेनू से, आप उस डिवाइस का चयन कर सकते हैं जिसमें आप ऐप लॉन्च करना चाहते हैं।

ध्यान दें कि, आपको .dart एक्सटेंशन वाली फ़ाइल के अंदर होना चाहिए इस कमांड को सफलतापूर्वक चलाने के लिए।

ऊपर दिए गए कमांड या F5 . का उपयोग करके इसे बनाएं और चलाएं अपने एमुलेटर/वास्तविक डिवाइस में निम्नलिखित स्टार्टर टेम्प्लेट प्राप्त करने के लिए:

अब आपका फ़्लटर ऐप चालू और चालू होना चाहिए।

आइए इस बारे में थोड़ा और विस्तार से देखें कि मुख्य प्रोजेक्ट फ़ाइल main.dart में क्या हो रहा है। ।

main.dart . में फ़ाइल में, हमारे पास दो वर्ग वस्तुएं हैं। एक स्टेटफुल विजेट्स तक और दूसरा स्टेटलेस विजेट्स तक फैला हुआ है। तो इसका क्या मतलब है?

• स्टेटफुल विजेट:वह वर्ग जिसमें ऐप की स्थितियाँ होती हैं। राज्य इस स्टेटफुल विजेट क्लास में विजेट्स के रेंडर को बदल सकते हैं और ट्रिगर कर सकते हैं। यह गतिशील राज्य परिवर्तनों में योगदान देता है।
• स्टेटलेस विजेट:इस वर्ग में कोई राज्य नहीं है। यह विजेट दृश्य का प्रतिनिधित्व करता है जो नहीं बदलता है। यह किसी भी गतिशील राज्य परिवर्तन में योगदान नहीं देता है।

main.dart फ़ाइल में main() भी होता है फ़ंक्शन जो MyApp . को कॉल करता है runApp . के अंदर वर्ग डिवाइस में फ़्लटर ऐप के लॉन्च को ट्रिगर करने के लिए विधि।

टिप कैलकुलेटर का UI कैसे बनाएं

हमारे UI को लागू करना शुरू करने के लिए, हमें MyHomePageState . के अंदर मौजूद सभी चीज़ों को साफ़ करना होगा डिफ़ॉल्ट रूप से कक्षा।

इसे साफ़ करने के बाद, हम एक साधारण Scaffold . लौटाने जा रहे हैं बिल्ड फ़ंक्शन के अंदर से विजेट।

Scaffold विजेट appBar . जोड़ने के लिए गुण प्रदान करता है साथ ही body . अभी के लिए, हम एक साधारण ऐप बार जोड़ने जा रहे हैं। आप नीचे दिए गए कोड स्निपेट में समग्र कार्यान्वयन देख सकते हैं:

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text('Tip Calculator', style: TextStyle(color: Colors.black87),),
      ),
      body: Container()
    );
  }
}

appBar . जोड़ने के बाद इसे बनाएं और चलाएं AppBar . का उपयोग करके विजेट के साथ title संपत्ति। आपको अपनी एम्यूलेटर स्क्रीन में निम्न परिणाम प्राप्त होंगे:

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

चरण 1:ऐप बार डिज़ाइन करें

यहां, हम AppBar . को संशोधित करने जा रहे हैं विभिन्न गुणों का उपयोग करके विजेट जो इसे प्रदान करता है। आप नीचे दिए गए स्निपेट में संशोधित कोड देख सकते हैं:

appBar: AppBar(
  title: Text('Tip Calculator', style: TextStyle(color: Colors.black87),),
  centerTitle: true,
  elevation: 0.0,
  backgroundColor: Colors.white70,
),

इसे बनाएं और चलाएं, और आपको एमुलेटर स्क्रीन में निम्नलिखित परिणाम मिलेंगे:

यहाँ, हमने कुछ बुनियादी AppBar . का उपयोग किया है विजेट गुण जैसे

• elevation , जो हमें z-index के समान ऐप बार में छाया प्रभाव को नियंत्रित करने में सक्षम बनाता है,
• centerTitle शीर्षक को केंद्रीकृत करने के लिए,
• और हमने पृष्ठभूमि का रंग भी सफेद में बदल दिया है।

चरण 2:स्कैफोल्ड बॉडी डिजाइन करें

इस बिंदु तक, हमारे पास केवल एक खाली Container है body . में विजेट संपत्ति। अब, हम Container . में कुछ गुण और चाइल्ड विजेट जोड़ने जा रहे हैं नीचे दिए गए कोड स्निपेट में बताए अनुसार विजेट:

body: Container(
  color: Colors.white70,
  padding: const EdgeInsets.all(16.0),
  child: Center(
    child: Form(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
        ],
      ),
    ),
  ),

इसे बनाएं और चलाएं, और आपको एमुलेटर स्क्रीन में निम्नलिखित परिणाम मिलेंगे:

जैसा कि आप ऊपर स्क्रीनशॉट में देख सकते हैं, हमने बॉडी बैकग्राउंड का रंग बदलकर सफेद कर दिया है। साथ ही, हमने कुछ padding जोड़ा है Center . के साथ एक बाल विजेट के रूप में विजेट जो पूरे यूआई को शरीर में केंद्रीकृत करेगा।

Center विजेट में एक Form है विजेट (इसके बच्चों में से एक) जिसके लिए हम टेक्स्ट फ़ील्ड के साथ एक साधारण फॉर्म बनाने जा रहे हैं।

और सबसे महत्वपूर्ण बात यह है कि हमारे पास Column है Form . के चाइल्ड विजेट के रूप में विजेट . Column विजेट हमें children प्रदान करता है विजेट सरणी संपत्ति जिसमें हम स्क्रीन पर लंबवत रूप से दिखाई देने वाले किसी भी विजेट को एकीकृत कर सकते हैं।

चरण 3:स्थिरांक और चर परिभाषित करें

प्रपत्र तत्वों (पाठ फ़ील्ड सहित) को लागू करने से पहले, हमें इनपुट फ़ील्ड से इनपुट को संभालने के लिए कुछ स्थिरांक को परिभाषित करने की आवश्यकता है।

आप नीचे दिए गए कोड स्निपेट में आवश्यक स्थिरांक और चर देख सकते हैं:

// This is the default bill amount
  static const defaultBillAmount = 0.0;

  // This is the default tip percentage
  static const defaultTipPercentage = 15;

  // This is the TextEditingController which is used to keep track of the change in bill amount
  final _billAmountController =
      TextEditingController(text: defaultBillAmount.toString());

  // This is the TextEditingController which is used to keep track of the change in tip percentage
  final _tipPercentageController =
      TextEditingController(text: defaultTipPercentage.toString());

  // This stores the latest value of bill amount calculated
  double _billAmount = defaultBillAmount;

  // This stores the latest value of tip percentage calculated
  int _tipPercentage = defaultTipPercentage;

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

चरण 4:इनपुट फ़ॉर्म फ़ील्ड जोड़ें

अब, हम TextFormField . का उपयोग करके दो इनपुट फॉर्म फ़ील्ड जोड़ने जा रहे हैं विजेट।

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

body: Container(
        color: Colors.white70,
        padding: const EdgeInsets.all(16.0),
        child: Center(
          child: Form(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                TextFormField(
                  key: Key("billAmount"),
                  controller: _billAmountController,
                  keyboardType: TextInputType.numberWithOptions(decimal: true),
                  decoration: InputDecoration(
                      hintText: 'Enter the Bill Amount',
                      labelText: 'Bill Amount',
                      labelStyle: TextStyle(
                        fontSize: 25,
                        letterSpacing: 1,
                        fontWeight: FontWeight.bold
                      ),
                      fillColor: Colors.white,
                      border: new OutlineInputBorder(
                        borderRadius: new BorderRadius.circular(20.0),
                      ),
                    ),
                ),
                SizedBox(height: 25,),
                TextFormField(
                  key: Key("tipPercentage"),
                  controller: _tipPercentageController,
                  keyboardType: TextInputType.number,
                  decoration: InputDecoration(
                    hintText: 'Enter the Tip Percentage',
                    labelText: 'Tip Percentage',
                    labelStyle: TextStyle(
                      fontSize: 25,
                      letterSpacing: 1,
                      fontWeight: FontWeight.bold
                    ),
                    fillColor: Colors.white,
                    border: new OutlineInputBorder(
                      borderRadius: new BorderRadius.circular(20.0),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),

यहां, हमने keyboardType . असाइन किया है संपत्ति जो हमें उपयोगकर्ता द्वारा इनपुट फ़ील्ड पर टैप करने पर आवश्यक प्रकार के कीबोर्ड को दिखाने में सक्षम बनाती है।

हमारे पास सजावटी गुण भी हैं जिनके साथ हम InputDecoration . का उपयोग करके अपने इनपुट फ़ील्ड को स्टाइल कर सकते हैं विजेट।

InputDecoration में विजेट, हमारे पास कई गुण हैं जो हमें प्लेसहोल्डर टेक्स्ट के साथ-साथ इनपुट के ऊपर के लेबल को दिखाने में मदद करते हैं। हमने border . भी लागू किया है घुमावदार आउटलाइन बॉर्डर दिखाने के लिए प्रॉपर्टी.

इसे बनाएं और चलाएं, और आपको अपनी एमुलेटर स्क्रीन में निम्नलिखित परिणाम मिलेंगे:

चरण 5:ईवेंट श्रोता और कार्य जोड़ें

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

उसके लिए, हमें addListener . का उपयोग करके ईवेंट श्रोताओं को नियंत्रकों में जोड़ना होगा तरीका।

अब जैसे ही इनपुट क्षेत्र में कोई परिवर्तन होता है, हम बिल राशि और टिप प्रतिशत को अपडेट करने के लिए एक निश्चित फ़ंक्शन को भी ट्रिगर करना चाहते हैं।

उसके लिए, हम setState . के साथ आवश्यक कार्यों का उपयोग करने जा रहे हैं विधि जो कुछ परिवर्तन होते ही संपूर्ण UI को प्रस्तुत करने में हमारी सहायता करती है।

ध्यान दें कि setState विधि build के पुन:चलाने को ट्रिगर करती है विधि।

आप नीचे दिए गए कोड स्निपेट में समग्र कोडिंग कार्यान्वयन देख सकते हैं:

@override
void initState() {
  super.initState();
  _billAmountController.addListener(_onBillAmountChanged);
  _tipPercentageController.addListener(_onTipAmountChanged);
}

_onBillAmountChanged() {
  setState(() {
    _billAmount = double.tryParse(_billAmountController.text) ?? 0.0;
  });
}

_onTipAmountChanged() {
  setState(() {
    _tipPercentage = int.tryParse(_tipPercentageController.text) ?? 0;
  });
}

यहां, हमारे पास initState है विधि भी। यह तरीका ऐप के इस स्क्रीन में एंटर करते ही चलता है। इसलिए जैसे ही हम स्क्रीन में प्रवेश करते हैं, हम ईवेंट श्रोताओं को जोड़ देते हैं।

चरण 6:राशियां अनुभाग जोड़ें

अब वापस हमारे UI विजेट्स पर। हम कॉलम विजेट के अंदर इनपुट फ़ील्ड के ठीक नीचे राशि अनुभाग जोड़ने जा रहे हैं।

यहां, हम SizedBox . का भी उपयोग करेंगे विजेट जो हमें विजेट्स के बीच कुछ आवश्यक रिक्ति प्रदान करने में सक्षम बनाता है। आप नीचे दिए गए कोड स्निपेट में राशि अनुभाग का कोडिंग कार्यान्वयन देख सकते हैं:

),
SizedBox(height: 20,),
Container(
  margin: EdgeInsets.all(15),
  padding: EdgeInsets.all(15),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(
      Radius.circular(15),
    ),
    border: Border.all(color: Colors.white),
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        offset: Offset(2, 2),
        spreadRadius: 2,
        blurRadius: 1,
      ),
    ],
  ),
  child: Column(
    children: [
      Text("Tip Amount"),
      Text("Total Amount")
    ],
  ),
),

यहां, हमारे पास एक Container है कुछ आवश्यक शैली की सजावट के साथ। child संपत्ति में एक और Column होता है दो Text . के साथ विजेट विजेट लंबवत रूप से व्यवस्थित हैं।

इसे बनाएं और चलाएं, और आपको अपनी एमुलेटर स्क्रीन में निम्नलिखित परिणाम मिलेंगे:

चरण 7:राशियां दिखाने के लिए एक अलग स्टेटलेस विजेट बनाएं

चूंकि हम थोड़ी स्टाइल के साथ टिप राशि और कुल राशि दिखाना चाहते हैं। इसमें कोई राज्य नहीं होगा लेकिन यह स्टेटफुल विजेट से पारित मूल्य पर निर्भर करेगा।

आप AmountText . का समग्र कोडिंग कार्यान्वयन देख सकते हैं नीचे दिए गए कोड स्निपेट में स्टेटलेस विजेट क्लास:

class AmountText extends StatelessWidget {
  final String text;

  const AmountText(
    this.text, {
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      child: Text(text.toUpperCase(),
          style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blueAccent, fontSize: 20)),
    );
  }
}

यहां, हमने प्रदर्शित होने वाले वास्तविक टेक्स्ट का मान प्राप्त करने के लिए कंस्ट्रक्टर क्लास का उपयोग किया है। इस वर्ग की निर्माण विधि Container . लौटाती है सरल padding के साथ विजेट और Text एक बच्चे के विजेट के रूप में विजेट।

चूंकि हमारा AmountText विजेट तैयार है, अब हम स्टेटफुल विजेट में विजेट को कॉल कर सकते हैं।

हम विजेट को Column . के अंदर जोड़ने जा रहे हैं विजेट जिसे हमने पहले सरल Text . के साथ परिभाषित किया था विजेट। हमें टेक्स्ट विजेट को AmountText . से बदलने की जरूरत है विजेट और आवश्यक टेक्स्ट मान पास करें।

आप नीचे दिए गए कोड स्निपेट में कोडिंग कार्यान्वयन देख सकते हैं:

Container(
  margin: EdgeInsets.all(15),
  padding: EdgeInsets.all(15),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(
      Radius.circular(15),
    ),
    border: Border.all(color: Colors.white),
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        offset: Offset(2, 2),
        spreadRadius: 2,
        blurRadius: 1,
      ),
    ],
  ),
  child: Column(
    children: [
      AmountText(
        'Tip Amount: ${_getTipAmount()}',
        key: Key('tipAmount'),
      ),
      AmountText(
        'Total Amount: ${_getTotalAmount()}',
        key: Key('totalAmount'),
      ),
    ],
  ),
),

यहां, हमने AmountText . के अंदर फंक्शन पास किया है विजेट। फ़ंक्शन संबंधित टिप राशि और कुल राशि मान लौटाता है, जैसा कि आप नीचे दिए गए कोड स्निपेट में देख सकते हैं:

  _getTipAmount() => _billAmount * _tipPercentage / 100;

  _getTotalAmount() => _billAmount + _getTipAmount();

अंत में, हमें दृश्य से बाहर निकलने पर नियंत्रकों को समाप्त करने की आवश्यकता है। उसके लिए, हमें बिल्ट-इन dispose . का उपयोग करने की आवश्यकता है समारोह। यह फ़ंक्शन तब चलता है जब हम वर्तमान स्क्रीन से बाहर निकल रहे होते हैं।

इस विधि के अंदर, हमें नियंत्रकों को dispose . के साथ कॉल करने की आवश्यकता है इनपुट टेक्स्ट नियंत्रकों को समाप्त करने के तरीके। इससे नियंत्रक इनपुट फ़ील्ड में परिवर्तनों को सुनना बंद कर देगा।

आप डिस्पोज़ फ़ंक्शन को नीचे दिए गए कोड स्निपेट में देख सकते हैं:

@override
void dispose() {
  // To make sure we are not leaking anything, dispose any used TextEditingController
  // when this widget is cleared from memory.
  _billAmountController.dispose();
  _tipPercentageController.dispose();
  super.dispose();
}

टिप कैलकुलेटर के हमारे कार्यान्वयन का अंतिम परिणाम प्राप्त करने के लिए इसे बनाएं और चलाएं, जिसे आप नीचे दिए गए डेमो में देख सकते हैं:

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

अब हम इस ट्यूटोरियल के अंत में आ गए हैं। आपने फ़्लटर फ्रेमवर्क और डार्ट का उपयोग करके एक साधारण टिप कैलकुलेटर को सफलतापूर्वक कार्यान्वित किया।

यहां से कहां जाएं?

इस ट्यूटोरियल का मुख्य उद्देश्य आपको एक साधारण टिप कैलकुलेटर बनाकर फ़्लटर ऐप डेवलपमेंट फ्रेमवर्क में बुनियादी प्रोग्रामिंग पैटर्न सिखाना था।

कई और दिलचस्प विजेट और परिवर्धन हैं जिन्हें आप एक्सप्लोर कर सकते हैं। कार्यात्मक घटकों को समान रखते हुए आप अपने ऐप के UI को बदल सकते हैं।

समग्र रूप से, फ़्लटर विजेट पैटर्न के साथ जटिल UI डिज़ाइन को सरल बनाता है। आप केवल विजेट्स को उनके चाइल्ड प्रॉपर्टीज़ का उपयोग करके एक साथ स्टैक करके एक बढ़िया UI बना सकते हैं।

अगला कदम विभिन्न स्क्रीन पर नेविगेट करने के लिए फ़्लटर के नेविगेशन तंत्र का उपयोग करना हो सकता है। स्पंदन कस्टम दराज मेनू और निचले टैब को जोड़ने को भी सरल करता है।

यह स्पंदन विकास का सिर्फ शुरुआती बिंदु है। आंख से मिलने के अलावा इसमें और भी बहुत कुछ है। हमें बस खोजबीन और कोडिंग करते रहना है।

पूरे प्रोजेक्ट का डेमो कोडपेन में उपलब्ध है।

आप अपने फ़्लटर ऐप के लिए पहले से मौजूद अन्य लोगों से प्रेरणा प्राप्त कर सकते हैं।

हैप्पी कोडिंग!