पहला Flutter App बनाएं – Step-by-Step Guide

अब तक आप Flutter और Dart के बुनियादी concepts से परिचित हो चुके हैं। इस अध्याय में हम सीखेंगे कि कैसे एक साधारण Flutter ऐप बनाया जाए। हम आपको Flutter SDK इंस्टॉल करने से लेकर आपके पहले ऐप को रन करने तक के सारे स्टेप्स बताएंगे।
आप इस गाइड में जानेंगे:

• Flutter प्रोजेक्ट कैसे बनाएं
• Flutter Widgets का उपयोग
• Android और iOS पर ऐप को रन करना

यह Flutter ऐप “Hello World” के बेसिक लेवल से शुरू होगा, ताकि आप Flutter प्रोजेक्ट का structure और उसमें काम करने के तरीके को समझ सकें। यह पहला कदम है आपकी Flutter डेवलपमेंट यात्रा की ओर।

नया Flutter Project कैसे बनाएं

Flutter का उपयोग करके एक नया प्रोजेक्ट बनाना बहुत ही सरल है। नीचे दिए गए स्टेप्स को फॉलो करके आप आसानी से एक नया Flutter प्रोजेक्ट बना सकते हैं:

Step-by-Step Guide:

Step 1: Flutter SDK Install करें

अगर आपने Flutter SDK को पहले से इंस्टॉल नहीं किया है, तो Flutter की ऑफिशियल वेबसाइट से इसे डाउनलोड और इंस्टॉल करें। इंस्टॉलेशन की पूरी प्रक्रिया Chapter 2 में विस्तार से दी गई है।

Step 2: IDE (Android Studio या VS Code) इंस्टॉल करें

आपको Android Studio या Visual Studio Code जैसे एक Integrated Development Environment (IDE) की आवश्यकता होगी। इन दोनों IDEs में Flutter और Dart के लिए आवश्यक plugins इंस्टॉल करें:

• Android Studio: Flutter और Dart Plugins को Preferences > Plugins से इंस्टॉल करें।
• VS Code: Extensions में Flutter और Dart Plugins इंस्टॉल करें।

Step 3: Flutter Project Create करें

अब आप Flutter का उपयोग करके एक नया प्रोजेक्ट बना सकते हैं। इसके लिए आप Android Studio, VS Code या कमांड लाइन का उपयोग कर सकते हैं।

Option 1: Android Studio का उपयोग करके नया Flutter प्रोजेक्ट बनाएँ

1. Android Studio खोलें।
2. Start a new Flutter project पर क्लिक करें।
3. Flutter Application चुनें और Next पर क्लिक करें।
4. Project Name डालें (जैसे “my_first_app”) और लोकेशन चुनें जहाँ आप प्रोजेक्ट को सेव करना चाहते हैं।
5. Flutter SDK path को वेरिफाई करें (अगर पहले से सेट है)।
6. Project Description और अन्य ऑप्शन (जैसे AndroidX या Kotlin/Swift सपोर्ट) भरें।
7. Finish पर क्लिक करें। Android Studio आपका प्रोजेक्ट बनाएगा और सभी dependencies को डाउनलोड करेगा।

Option 2: VS Code का उपयोग करके नया Flutter प्रोजेक्ट बनाएँ

1. VS Code में View मेनू से Command Palette खोलें।
2. Command Palette में Flutter: New Project टाइप करें और एंटर करें।
3. प्रोजेक्ट का नाम (जैसे “my_first_app”) दर्ज करें और फ़ोल्डर चुनें जहाँ प्रोजेक्ट सेव करना है।
4. इसके बाद VS Code स्वतः प्रोजेक्ट बनाएगा और डिपेंडेंसी इंस्टॉल करेगा।

Option 3: कमांड लाइन का उपयोग करके नया Flutter प्रोजेक्ट बनाएँ

1. टर्मिनल या कमांड प्रॉम्प्ट खोलें।
2. Flutter की कमांड चलाएं:

   flutter create my_first_app
   

   इस कमांड से my_first_app नाम का नया प्रोजेक्ट बन जाएगा।

3. cd my_first_app कमांड का उपयोग करके उस प्रोजेक्ट डायरेक्टरी में जाएँ:

   cd my_first_app
   

    

Step 4: प्रोजेक्ट फोल्डर की संरचना को समझें

जब आप नया Flutter प्रोजेक्ट बनाते हैं, तो आपको एक organized folder structure मिलता है:

• lib/main.dart: यह मुख्य फ़ाइल है जहाँ से आपका ऐप शुरू होता है।
• android/: Android-specific configuration और कोड के लिए फ़ोल्डर।
• ios/: iOS-specific configuration और कोड के लिए फ़ोल्डर।
• pubspec.yaml: यह फ़ाइल आपके प्रोजेक्ट की dependencies को मैनेज करती है।

Step 5: Main.dart फ़ाइल को समझें और मॉडिफाई करें

1. lib/main.dart को खोलें। यह फ़ाइल आपके Flutter ऐप का entry point होती है।
2. इस फ़ाइल में पहले से एक बेसिक “Hello World” ऐप कोड मौजूद होगा:

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('My First Flutter App'),
           ),
           body: Center(
             child: Text('Hello, World!'),
           ),
         ),
       );
     }
   }
   

    

यह एक साधारण ऐप है जो एक स्क्रीन पर “Hello, World!” टेक्स्ट दिखाता है।

Step 6: Flutter Emulator या Physical Device पर ऐप रन करें

आप Android या iOS emulator का उपयोग करके या फ़िज़िकल डिवाइस पर अपने ऐप को टेस्ट कर सकते हैं:

Option 1: Android Studio में ऐप रन करें

1. Android Studio में Run बटन पर क्लिक करें (या Shift + F10)।
2. ऐप को emulator या कनेक्टेड फ़िज़िकल डिवाइस पर चलाएँ।

Option 2: VS Code में ऐप रन करें

1. VS Code में Debug सेक्शन में जाकर Run without Debugging विकल्प चुनें या Ctrl + F5 दबाएं।
2. ऐप emulator या कनेक्टेड डिवाइस पर चलने लगेगा।

Option 3: कमांड लाइन से ऐप रन करें

1. टर्मिनल में प्रोजेक्ट की डायरेक्टरी पर जाएं:

   cd my_first_app
   

    

2. फिर ऐप को रन करें:

   flutter run
   

    

3. यह कमांड आपके कनेक्टेड डिवाइस या emulator पर ऐप को रन करेगी।

Flutter Project का Directory Structure

जब आप Flutter का उपयोग करके एक नया प्रोजेक्ट बनाते हैं, तो आपको एक व्यवस्थित directory structure मिलता है। यह स्ट्रक्चर विभिन्न प्लेटफ़ॉर्म्स के लिए आवश्यक फाइलों और फ़ोल्डर्स को अलग-अलग रखता है, जिससे कोडिंग और प्रोजेक्ट मैनेजमेंट आसान हो जाता है। आइए इस directory structure को विस्तार से समझें:

1. lib/

• यह lib फ़ोल्डर Flutter प्रोजेक्ट का सबसे महत्वपूर्ण हिस्सा है। इसमें आपके ऐप का मुख्य कोड होता है।
• main.dart फ़ाइल, जो आपके ऐप का entry point है, इसी फ़ोल्डर में होती है।

मुख्य फ़ाइलें:

• lib/main.dart: यह वह फ़ाइल है जहाँ से आपका Flutter ऐप शुरू होता है। इसमें ऐप के UI और logic का मुख्य हिस्सा होता है।

आपकी अधिकांश कोडिंग lib/ फ़ोल्डर के अंदर होती है। जैसे-जैसे आपका प्रोजेक्ट बढ़ता है, आप इस फ़ोल्डर के अंदर अतिरिक्त directories बना सकते हैं, जैसे screens/, models/, widgets/ इत्यादि, ताकि आपका कोड ऑर्गनाइज़ रहे।

2. android/

• यह फ़ोल्डर Android-specific files और configurations को संभालता है। जब आप Flutter से Android ऐप बनाते हैं, तो यह फ़ोल्डर उस ऐप की native फ़ाइलों को contain करता है।

मुख्य फ़ाइलें:

• android/app/src/main/AndroidManifest.xml: यह Android ऐप की configuration फ़ाइल है, जहाँ ऐप permissions, app name, और अन्य details सेट की जाती हैं।
• android/gradle/: इसमें Gradle build configuration फ़ाइलें होती हैं, जो Android ऐप को build करने के लिए आवश्यक होती हैं।

यदि आप Flutter ऐप में Android-specific features (जैसे Native Code) जोड़ना चाहते हैं, तो आप इस फ़ोल्डर में काम करेंगे।

3. ios/

• यह फ़ोल्डर iOS-specific files और configurations को संभालता है। Flutter प्रोजेक्ट को iOS डिवाइसेज़ पर चलाने के लिए यह जरूरी होता है।

मुख्य फ़ाइलें:

• ios/Runner.xcodeproj: यह Xcode प्रोजेक्ट फ़ाइल है, जो iOS ऐप को manage करती है।
• ios/Runner/Info.plist: यह iOS ऐप की configuration फ़ाइल है, जिसमें ऐप permissions, display name, और other settings होती हैं।

अगर आप iOS-specific features जोड़ना चाहते हैं, तो आप इस फ़ोल्डर में काम करेंगे।

4. build/

• यह फ़ोल्डर automatically generate होता है जब आप प्रोजेक्ट को build करते हैं। इसमें compiled और generated files होती हैं। आम तौर पर आपको इस फ़ोल्डर में किसी बदलाव की आवश्यकता नहीं होती है।

5. test/

• यह फ़ोल्डर आपके ऐप के टेस्टिंग के लिए होता है। Flutter में टेस्टिंग को आसान बनाने के लिए यह फ़ोल्डर default रूप से मिलता है।

मुख्य फ़ाइलें:

• test/widget_test.dart: यह एक उदाहरण फ़ाइल होती है, जो आपको दिखाती है कि कैसे आप widget tests लिख सकते हैं। आप इस फ़ोल्डर में नए टेस्ट केस लिख सकते हैं।

6. web/

• यह फ़ोल्डर Flutter web एप्लिकेशन के लिए होता है। इसमें वेब से संबंधित configuration files होती हैं।

मुख्य फ़ाइलें:

• web/index.html: यह HTML फ़ाइल Flutter web एप्लिकेशन के लिए एंट्री पॉइंट है।

7. pubspec.yaml

• यह सबसे महत्वपूर्ण configuration फ़ाइल है। इसमें आपके प्रोजेक्ट की डिपेंडेंसी, जैसे कि पॅकेज, प्लगइन और अन्य assets (इमेज, फॉन्ट्स, आदि) शामिल होते हैं।

मुख्य सेटिंग्स:

• dependencies: इसमें Flutter SDK और अन्य पॅकेजेज की जानकारी दी जाती है जिनकी ज़रूरत आपके प्रोजेक्ट को होती है।
• dev_dependencies: इसमें development समय के दौरान उपयोग किए जाने वाले पॅकेजेज होते हैं।
• assets: यहाँ आप इमेजेज, फॉन्ट्स और अन्य फ़ाइलों को लोड कर सकते हैं, जिनका उपयोग ऐप में किया जाएगा।

8. .gitignore

• यह फ़ाइल उन फ़ाइलों और फ़ोल्डर्स की लिस्ट देती है, जिन्हें version control (जैसे Git) में track नहीं किया जाना चाहिए। आमतौर पर इसमें build फ़ोल्डर, IDE-specific फाइलें, और sensitive information होती हैं।

9. README.md

• यह फ़ाइल आपके प्रोजेक्ट का documentation होती है। आप इसमें प्रोजेक्ट के बारे में जानकारी लिख सकते हैं, जैसे कि इसका उपयोग कैसे करें, requirements, और अन्य details। जब आप अपने प्रोजेक्ट को GitHub या किसी अन्य repository में साझा करते हैं, तो यह फ़ाइल उपयोगी होती है।

10. .metadata और .packages

• ये फ़ाइलें आपके प्रोजेक्ट के पैकेज और डिपेंडेंसी की internal configuration को संभालती हैं। आमतौर पर इन्हें edit करने की ज़रूरत नहीं होती है।

“Hello World” Flutter App को Modify करना

Flutter में जब आप नया प्रोजेक्ट बनाते हैं, तो डिफ़ॉल्ट रूप से एक बेसिक “Hello World” ऐप मिलता है। हम इस ऐप को modify करेंगे और कुछ नए widgets और फीचर्स जोड़ेंगे, ताकि आप Flutter के साथ काम करना अच्छे से समझ सकें।

1. “Hello World” App का डिफ़ॉल्ट कोड

जब आप Flutter प्रोजेक्ट बनाते हैं, तो lib/main.dart में डिफ़ॉल्ट कोड कुछ इस तरह होता है:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First Flutter App'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

यह कोड एक साधारण ऐप बनाता है, जिसमें “Hello, World!” टेक्स्ट स्क्रीन के सेंटर में दिखाई देता है।

2. “Hello World” ऐप को Modify करना

अब हम इस ऐप को modify करेंगे और इसमें कुछ नए widgets और स्टाइलिंग जोड़ेंगे।

Step 1: नए Widgets जोड़ना

हम “Hello, World!” टेक्स्ट को बदलकर एक बटन और कुछ स्टाइलिंग जोड़ेंगे।

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My Modified Flutter App'),
          backgroundColor: Colors.blueGrey,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Welcome to Flutter!',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 20), // कुछ space जोड़ने के लिए
              ElevatedButton(
                onPressed: () {
                  print('Button Pressed!');
                },
                child: Text('Click Me!'),
                style: ElevatedButton.styleFrom(
                  primary: Colors.blue, // बटन का रंग
                  padding: EdgeInsets.symmetric(horizontal: 30, vertical: 10),
                  textStyle: TextStyle(fontSize: 18),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Modified Code का Output:

• अब ऐप में एक AppBar है, जिसमें “My Modified Flutter App” नाम का title है।
• स्क्रीन के सेंटर में “Welcome to Flutter!” टेक्स्ट है, जो bold और थोड़ा बड़ा है।
• इसके नीचे एक बटन है, जिसे “Click Me!” कहा जाता है। इस बटन पर क्लिक करने से console में “Button Pressed!” का message print होगा।

Explanation:

• Column Widget: हम एक Column widget का उपयोग कर रहे हैं ताकि “Welcome to Flutter!” टेक्स्ट और बटन को vertically align किया जा सके।
• SizedBox Widget: यह widget टेक्स्ट और बटन के बीच में स्पेस जोड़ने के लिए उपयोग किया गया है।
• ElevatedButton Widget: यह Flutter का material design वाला बटन है। इसके अंदर हमने onPressed callback function जोड़ा है, जो बटन पर क्लिक होने पर execute होता है।
• TextStyle: हमने टेक्स्ट का स्टाइल modify किया है, जिससे फ़ॉन्ट साइज और वजन बढ़ाया जा सके।

3. App Theme Modify करना

अब हम ऐप की theme को modify करेंगे ताकि पूरे ऐप में एक consistent look & feel हो।

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // पूरी ऐप के लिए primary color सेट करना
        textTheme: TextTheme(
          bodyText2: TextStyle(fontSize: 20, color: Colors.black87),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Themed Flutter App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Flutter with Custom Theme!'),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {},
                child: Text('Click Me!'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Explanation:

• ThemeData: हमने एक custom theme सेट किया है, जो ऐप के primary color को green में बदल देता है।
• textTheme: इसमें हमने body text के लिए default font size को 20px और color को black87 में सेट किया है।
• अब आप देखेंगे कि AppBar का color green हो गया है, और सभी text elements ने default styles ले लिया है।

4. FloatingActionButton जोड़ना

अब हम FloatingActionButton जोड़ेंगे, जो आमतौर पर स्क्रीन के निचले दाईं ओर दिखता है।

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter with Floating Action Button'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            print('Floating Action Button Pressed!');
          },
          child: Icon(Icons.add),
          backgroundColor: Colors.green,
        ),
      ),
    );
  }
}

Explanation:

• FloatingActionButton: हमने एक floating action button जोड़ा है, जो एक “+” आइकन दिखाता है। जब आप इसे दबाते हैं, तो console में “Floating Action Button Pressed!” print होता है।
• Icon: इस बटन के अंदर एक आइकन Icons.add इस्तेमाल किया गया है, जो “+” का संकेत देता है।