Flutter और Dart: इंस्टॉलेशन और पहला प्रोजेक्ट

जानें कि Flutter और Dart क्या हैं, टूल्स इंस्टॉल करें, अपना पहला प्रोजेक्ट बनाएँ, और hot reload का जादू अनुभव करें।

8 मिनट · 3 प्रश्न

Flutter एक फ़्रेमवर्क है: तैयार-टू-यूज़ कोड का एक बड़ा टूलबॉक्स, जिसे Google ने मोबाइल एप्लिकेशन यानी वे प्रोग्राम बनाने के लिए बनाया है जिन्हें आप फ़ोन पर इंस्टॉल करते हैं। इसकी बड़ी ताकत: आप अपना कोड सिर्फ़ एक बार लिखते हैं, और यह iPhone, Android, वेब और यहाँ तक कि डेस्कटॉप पर भी चलता है। यह कोड Dart में लिखा जाता है, जो एक प्रोग्रामिंग भाषा है: शब्दों और नियमों का एक समूह जो आपको किसी मशीन को निर्देश देने की अनुमति देता है। Flutter इंस्टॉल करने के लिए, docs.flutter.dev पर आधिकारिक गाइड का पालन करें (Get started अनुभाग): वहाँ आप SDK (Software Development Kit, वह किट जिसमें सभी टूल्स होते हैं) डाउनलोड करेंगे और Visual Studio Code जैसे किसी कोड एडिटर को उसके Flutter एक्सटेंशन के साथ इंस्टॉल करेंगे। फिर आप सब कुछ टर्मिनल में जाँचते हैं: एक विंडो जिसमें आप अपने कंप्यूटर को नियंत्रित करने के लिए टेक्स्ट कमांड टाइप करते हैं।

flutter doctor

flutter doctor कमांड एक डॉक्टर की तरह काम करता है: यह आपकी मशीन की जाँच करता है और एक चेकलिस्ट दिखाता है, जो तैयार है उसके लिए हरा चेक और जो गायब है उसके लिए एक क्रॉस, साथ ही उसे ठीक करने के निर्देश भी। जब आवश्यक चीज़ें हरी हो जाएँ, तो आप अपना पहला प्रोजेक्ट बना सकते हैं: वह फ़ोल्डर जिसमें आपके ऐप का सारा कोड रहेगा। किसी Flutter प्रोजेक्ट का नाम छोटे अक्षरों में, बिना स्पेस या एक्सेंट के लिखा जाता है, और शब्दों को अलग करने के लिए अंडरस्कोर (_) का उपयोग किया जाता है।

flutter create my_first_app
cd my_first_app
flutter run

flutter create एक my_first_app फ़ोल्डर बनाता है जिसमें एक पूरा डेमो ऐप होता है। cd (change directory) उस फ़ोल्डर में ले जाता है, और flutter run ऐप को कंपाइल करके फिर उसे USB से जुड़े किसी फ़ोन पर, किसी एमुलेटर (आपकी स्क्रीन पर दिखाया गया एक वर्चुअल फ़ोन) पर, या Chrome ब्राउज़र में लॉन्च करता है। आप जो भी कोड लिखते हैं वह lib/main.dart फ़ाइल में रहता है। इसकी सामग्री को इस न्यूनतम प्रोग्राम से बदल दें:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const Scaffold(
        body: Center(
          child: Text("Hello Flutter!"),
        ),
      ),
    );
  }
}

आइए मुख्य बिंदुओं को पढ़ें, हर चीज़ में महारत हासिल करने की कोशिश किए बिना: import Flutter का ग्राफ़िकल टूलबॉक्स लोड करता है, void main() एंट्री पॉइंट है (सबसे पहला फ़ंक्शन जो चलता है), और runApp स्क्रीन के केंद्र में "Hello Flutter!" टेक्स्ट दिखाकर ऐप शुरू करता है। हर हिस्से का विवरण आने वाले पाठों में दिया जाएगा। अब hot reload के जादू की बारी: संदेश का टेक्स्ट बदलें, फ़ाइल सेव करें... और दिखाया गया ऐप बिना रीस्टार्ट किए तुरंत अपडेट हो जाता है। यह अति-छोटा चक्र Flutter की बड़ी ताकतों में से एक है।

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. Flutter क्या है?
   • Apple द्वारा बनाई गई एक प्रोग्रामिंग भाषा
   • एप्लिकेशन बनाने के लिए एक Google फ़्रेमवर्क
   • मोबाइल के लिए एक फ़ोटो-एडिटिंग टूल
2. कौन सा कमांड एक नया Flutter प्रोजेक्ट बनाता है?
   • flutter run my_app
   • flutter doctor my_app
   • flutter create my_app
3. hot reload क्या करता है?
   • यह Flutter को उसके नवीनतम संस्करण में अपडेट करता है
   • यह आपके कोड परिवर्तनों को चल रहे ऐप पर लगभग तुरंत लागू करता है
   • यह फ़ोन की मेमोरी साफ़ करने के लिए उसे रीस्टार्ट करता है