Flutter टिप कैलकुलेटर बनाएं: चरण-दर-चरण गाइड

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

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

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

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

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

Flutter प्रोजेक्ट कैसे सेट करें

एक नया Flutter प्रोजेक्ट बनाने के लिए, आपके सिस्टम पर Flutter SDK इंस्टॉल होना चाहिए। सरल और त्वरित इंस्टॉलेशन प्रक्रिया के लिए, आप आधिकारिक Flutter डॉक्यूमेंटेशन का पालन कर सकते हैं।

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

डॉक्यूमेंटेशन का पालन करके सब कुछ सफलतापूर्वक सेट हो जाने के बाद, आप टर्मिनल में निम्नलिखित Flutter कमांड चला सकते हैं:

flutter create tipCalculator

यह कमांड स्वचालित रूप से आपके स्टार्टर Flutter प्रोजेक्ट को डाउनलोड और सेट कर देगा। अब आप प्रोजेक्ट को Visual Studio Code IDE में खोल सकते हैं।

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

flutter run

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

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

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

अब आपके पास Flutter ऐप चालू हालत में होना चाहिए।

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

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

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

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

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

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

इसे क्लियर करने के बाद, हम build फ़ंक्शन के अंदर से एक साधारण 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 विजेट के साथ title प्रॉपर्टी का उपयोग करके appBar जोड़ने के बाद बिल्ड और रन करें। आपको अपने एमुलेटर स्क्रीन पर निम्नलिखित परिणाम मिलेगा:

चरण 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: स्कैफोल्ड बॉडी डिज़ाइन करें

इस बिंदु तक, हमारे पास body प्रॉपर्टी में केवल एक खाली Container विजेट था। अब, हम नीचे दिए गए कोड स्निपेट में निर्देशित अनुसार 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 विजेट को चाइल्ड विजेट के रूप में जोड़ा है जो बॉडी में पूरे UI को केंद्रीकृत करेगा।

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

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

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

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

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

// यह डिफ़ॉल्ट बिल राशि है static const defaultBillAmount = 0.0; // यह डिफ़ॉल्ट टिप प्रतिशत है static const defaultTipPercentage = 15; // यह TextEditingController है जिसका उपयोग बिल राशि में परिवर्तन को ट्रैक करने के लिए किया जाता है final _billAmountController = TextEditingController(text: defaultBillAmount.toString()); // यह TextEditingController है जिसका उपयोग टिप प्रतिशत में परिवर्तन को ट्रैक करने के लिए किया जाता है final _tipPercentageController = TextEditingController(text: defaultTipPercentage.toString()); // यह गणना की गई बिल राशि का नवीनतम मान संग्रहीत करता है double _billAmount = defaultBillAmount; // यह गणना की गई टिप प्रतिशत का नवीनतम मान संग्रहीत करता है 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: 'बिल राशि दर्ज करें', labelText: 'बिल राशि', 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: 'टिप प्रतिशत दर्ज करें', labelText: 'टिप प्रतिशत', 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 विजेट्स पर। हम इनपुट फील्ड्स के ठीक नीचे Column विजेट के अंदर राशि सेक्शन जोड़ने जा रहे हैं।

यहां, हम 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)), ); } }

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

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

हम विजेट को पहले परिभाषित Column विजेट के अंदर जोड़ने जा रहे हैं जिसमें साधारण Text विजेट्स थे। हमें बस 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 मेथड्स को कॉल करने की आवश्यकता है। यह कंट्रोलर को इनपुट फील्ड्स में परिवर्तनों को सुनने से रोकेगा।

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

@override void dispose() { // यह सुनिश्चित करने के लिए कि हम कुछ भी लीक नहीं कर रहे हैं, जब यह विजेट मेमोरी से क्लियर हो जाता है तो किसी भी उपयोग किए गए TextEditingController को डिस्पोज़ करें _billAmountController.dispose(); _tipPercentageController.dispose(); super.dispose(); }

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

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

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

आगे कहां जाएं?

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

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

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

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

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

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

आप उन अन्य Flutter ऐप्स से प्रेरणा प्राप्त कर सकते हैं जो पहले से मौजूद हैं।

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