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

Flutter प्रोजेक्ट सेट अप करने से पहले, पक्का करें कि आपने ज़रूरी शर्तें पूरी कर ली हैं शुरू करने से पहलेमें जाने के चरण में देखें. चालू करने के बाद बिलिंग एपीआई पासकोड बनाने के साथ-साथ, वह Flutter प्रोजेक्ट सेट अप किया जा सकता है जिसका इस्तेमाल अपना ऐप्लिकेशन डेवलप करें.

पहला चरण: ज़रूरी सॉफ़्टवेयर इंस्टॉल करना

Google Maps for Flutter पैकेज का इस्तेमाल करके प्रोजेक्ट बनाने के लिए, आपको Flutter SDK टूल इस्तेमाल करें और अपने टारगेट प्लैटफ़ॉर्म के लिए डेवलपमेंट एनवायरमेंट को सेटअप करें. Flutter का ऐप्लिकेशन इंस्टॉल है या नहीं, इसके बारे में जानें गाइड पढ़ें.

दूसरा चरण: नए प्रोजेक्ट में Google Maps for Flutter पैकेज इंस्टॉल करना

Flutter, Google Maps for Flutter पैकेज को Flutter प्लगिन के रूप में ऑफ़र करता है.

Flutter प्रोजेक्ट बनाएं और Maps प्लगिन जोड़ें.

  1. `फ़्लटर बनाएं` का इस्तेमाल करके, नया Flutter प्रोजेक्ट बनाएं:
      flutter create google_maps_in_flutter --platforms=android,ios,web
      
      Creating project google_maps_in_flutter...
      [Listing of created files elided]
      Wrote 127 files.
    
      All done!
    आपका ऐप्लिकेशन कोड google_maps_in_flutter/lib/main.dart में है. अपना ऐप्लिकेशन चलाने के लिए, यह टाइप करें:
      cd google_maps_in_flutter
      flutter run
    यह ऐप्लिकेशन iOS, Android, और वेब को टारगेट करता है. Google Maps SDK फ़िलहाल ब्राउज़र के बाहर के डेस्कटॉप ऐप्लिकेशन पर काम नहीं करता.
  2. इस प्रोजेक्ट में Google Maps for Flutter पैकेज प्लगिन जोड़ें.
    flutter pub add google_maps_flutter
      
      Resolving dependencies...
      [Listing of dependencies elided]
    
      Changed 14 dependencies!

तीसरा चरण: प्लैटफ़ॉर्म वर्शन सेट करना

Android

Android के लिए, SDK टूल का कम से कम वर्शन सेट करें.

  1. अपने पसंदीदा IDE में android/app/build.gradle कॉन्फ़िगरेशन फ़ाइल खोलें.
  2. android.defaultConfig.minSdkVersion की वैल्यू को 21 में बदलें:
      android {
        //...
        defaultConfig {
            applicationId "com.example.google_maps_in_flutter"
            minSdkVersion 21     // Set to 21
            targetSdkVersion flutter.targetSdkVersion
            versionCode flutterVersionCode.toInteger()
            versionName flutterVersionName
        }
        //...
      }
  3. defaultConfig को कॉन्फ़िगर करते समय, अपना यूनीक ApplicationID डालें.
  4. फ़ाइल सेव करे��� और अपने प्रोजेक्ट में हुए बदलावों को Gradle के साथ सिंक करें.

iOS

iOS प्लैटफ़ॉर्म का सबसे कम वर्शन सेट करें.

  1. अपने पसंदीदा IDE में ios/Podfile कॉन्फ़िगरेशन फ़ाइल खोलें.
  2. इस Podfile की शुरुआत में ये लाइनें जोड़ें:
      # Set platform to 14.0 to enable latest Google Maps SDK
      platform :ios, '14.0'

चौथा चरण: प्रोजेक्ट में एपीआई पासकोड जोड़ना

शुरू करने से पहले, आपने अपने ऐप्लिकेशन के लिए एक एपीआई पासकोड जनरेट किया था. अब जोड़ें आपके Flutter प्रोजेक्ट की कुंजी है. Flutter के लिए आपको यह एपीआई पासकोड जोड़ना चाहिए टारगेट किए गए सभी प्लैटफ़ॉर्म: iOS, Android, और वेब.

यहां दिए गए उदाहरणों में, YOUR_API_KEY को अपने एपीआई पासकोड से बदलें.

Android

इस टास्क को आसान बनाने के लिए, हमारा सुझाव है कि आप Android के लिए सीक्रेट ग्रेडल प्लग इन.

अपने Google Maps प्रोजेक्ट में Android के लिए Secrets Gradle प्लग इन इंस्टॉल करने के लिए:

  1. Android Studio में, अपना टॉप-लेवल build.gradle या build.gradle.kts खोलें फ़ाइल और निम्न कोड को dependencies तत्व में जोड़ें buildscript.

    ग्रूवी

    buildscript {
        dependencies {
            classpath "com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1"
        }
    }

    Kotlin

    buildscript {
        dependencies {
            classpath("com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1")
        }
    }
    
  2. अपनी मॉड्यूल-लेवल build.gradle फ़ाइल खोलें और नीचे दिए गए कोड को plugins एलिमेंट.

    ग्रूवी

    plugins {
        // ...
        id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin'
    }

    Kotlin

    plugins {
        id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin")
    }
  3. अपनी मॉड्यूल-लेवल build.gradle फ़ाइल में, पक्का करें कि targetSdk और compileSdk को 34 पर सेट किया गया.
  4. फ़ाइल सेव करें और Gredle के ��ा�� प्रोजेक्ट सिंक करते हैं.
  5. अपनी शीर्ष-स्तरीय डायरेक्ट्री में secrets.properties फ़ाइल खोलें, और फिर जोड़ें . YOUR_API_KEY को अपनी एपीआई पासकोड से बदलें. अपनी कुंजी इस फ़ाइल में सेव करें क्योंकि वर्शन कंट्रोल में secrets.properties की जांच नहीं की गई है सिस्टम.
    MAPS_API_KEY=YOUR_API_KEY
  6. फ़ाइल सेव करें.
  7. अपनी टॉप-लेवल डायरेक्ट्री में local.defaults.properties फ़ाइल बनाएं. फ़ोल्डर को secrets.properties फ़ाइल के रूप में चुनकर यह कोड जोड़ें.

    MAPS_API_KEY=DEFAULT_API_KEY

    इस फ़ाइल का मकसद, एपीआई पासकोड के लिए बैकअप जगह की जानकारी देना है, अगर secrets.properties फ़ाइल नहीं मिली है, ताकि बिल्ड विफल न हो. ऐसा तब हो सकता है, जब आपने वर्शन कंट्रोल सिस्टम से ऐप्लिकेशन का क्लोन बनाया है. इसमें secrets.properties और आपने अभी तक स्थानीय भाषा में secrets.properties फ़ाइल नहीं बनाई है. एपीआई पासकोड.

  8. फ़ाइल सेव करें.
  9. अपनी AndroidManifest.xml फ़ाइल में, इस पर जाएं com.google.android.geo.API_KEY और android:value attribute अपडेट करें. अगर <meta-data> टैग मौजूद नहीं है, तो उसे <application> टैग.
    <meta-data
        android:name="com.google.android.geo.API_KEY"
        android:value="${MAPS_API_KEY}" />

    Note: com.google.android.geo.API_KEY is the recommended metadata name for the API key. A key with this name can be used to authenticate to multiple Google Maps-based APIs on the Android platform, including the Flutter SDK. For backwards compatibility, the API also supports the name com.google.android.maps.v2.API_KEY. This legacy name allows authentication to the Android Maps API v2 only. An application can specify only one of the API key metadata names. If both are specified, the API throws an exception.

  10. In Android Studio, open your module-level build.gradle or build.gradle.kts file and edit the secrets property. If the secrets property does not exist, add it.

    Edit the properties of the plugin to set propertiesFileName to secrets.properties, set defaultPropertiesFileName to local.defaults.properties, and set any other properties.

    Groovy

    secrets {
        // Optionally specify a different file name containing your secrets.
        // The plugin defaults to "local.properties"
        propertiesFileName = "secrets.properties"
    
        // A properties file containing default secret values. This file can be
        // checked in version control.
        defaultPropertiesFileName = "local.defaults.properties"
    
        // Configure which keys should be ignored by the plugin by providing regular expressions.
        // "sdk.dir" is ignored by default.
        ignoreList.add("keyToIgnore") // Ignore the key "keyToIgnore"
        ignoreList.add("sdk.*")       // Ignore all keys matching the regexp "sdk.*"
    }
            

Kotlin

secrets {
    // Optionally specify a different file name containing your secrets.
    // The plugin defaults to "local.properties"
    propertiesFileName = "secrets.properties"

    // A properties file containing default secret values. This file can be
    // checked in version control.
    defaultPropertiesFileName = "local.defaults.properties"

    // Configure which keys should be ignored by the plugin by providing regular expressions.
    // "sdk.dir" is ignored by default.
    ignoreList.add("keyToIgnore") // Ignore the key "keyToIgnore"
    ignoreList.add("sdk.*")       // Ignore all keys matching the regexp "sdk.*"
}
        

ध्यान दें: जैसा कि ऊपर दिखाया गया है, com.google.android.geo.API_KEY सुझाया गया मेटाडेटा नाम है एपीआई पासकोड के लिए. इस नाम वाली कुंजी का उपयोग एकाधिक को प्रमाणित करने के लिए किया जा सकता है Android प्लैटफ़ॉर्म पर Google Maps-आधारित एपीआई, जिनमें Flutter SDK टूल. पुराने सिस्टम के साथ काम करने की सुविधा के लिए, एपीआई com.google.android.maps.v2.API_KEY नाम का समर्थन करता है. यह लेगसी name सिर्फ़ Android Maps API v2 पर पुष्टि करने की अनुमति देता है. एक ऐप्लिकेशन ये काम कर सकता है: API कुंजी मेटाडेटा नामों में से केवल एक को दर्ज करें. अगर दोनों के बारे में बताया गया हो, तो एपीआई एक अपवाद देता है.

iOS

अपनी AppDelegate.swift फ़ाइल में एपीआई पासकोड जोड़ें.

  1. ios/Runner/AppDelegate.swift फ़ाइल को अपने पसंदीदा IDE के साथ Flutter प्रोजेक्ट में खोलें.
  2. Google Maps for Flutter पैकेज को अपने ऐप्लिकेशन में जोड़ने के लिए, यह इंपोर्ट स्टेटमेंट जोड़ें:
  3. import GoogleMaps
  4. अपने एपीआई को application(_:didFinishLaunchingWithOptions:) तरीके में जोड़ें. साथ ही, YOUR_API_KEY के लिए एपीआई पासकोड बदलें:
    GMSServices.provideAPIKey("YOUR_API_KEY")
  5. AppDelegate.swift फ़ाइल को सेव करें और बंद करें.

पूरी की गई AppDelegate.swift फ़ाइल इस तरह की होनी चाहिए:

import UIKit
import Flutter
import GoogleMaps  // Add this import

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    // TODO: Add your Google Maps API key
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

वेब

अपनी index.html ऐप्लिकेशन फ़ाइल में अपनी एपीआई कुंजी जोड़ें.

  1. web/index.html फ़ाइल को अपने पसंदीदा IDE के साथ Flutter प्रोजेक्ट में खोलें.
  2. <head> टैग में, इस स्क्रिप्ट टैग को जोड़ें और अपनी एपीआई पासकोड को YOUR_API_KEY से बदलें.
    <script>
      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
        key: "YOUR_API_KEY",
        v: "weekly",
        // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
        // Add other bootstrap parameters as needed, using camel case.
      });
    </script>
    
  3. index.html फ़ाइल को सेव करें और बंद करें.

    index.html का पूरा head सेक्शन इससे मिलता-जुलता होना चाहिए:

        <head>
          <base href="/">
          
          <meta charset="UTF-8">
          <meta content="IE=Edge" http-equiv="X-UA-Compatible">
          <meta name="description" content="A new Flutter project.">
          
          <!-- iOS meta tags & icons -->
          <meta name="apple-mobile-web-app-capable" content="yes">
          <meta name="apple-mobile-web-app-status-bar-style" content="black">
          <meta name="apple-mobile-web-app-title" content="google_maps_in_flutter">
          <link rel="apple-touch-icon" href="icons/Icon-192.png">
          
          <script>
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
              key: "YOUR_API_KEY",
              v: "weekly",
              // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
              // Add other bootstrap parameters as needed, using camel case.
              });
          </script>
          
          <title>google_maps_in_flutter</title>
          <link rel="manifest" href="manifest.json">
        </head>

पांचवां चरण: मैप जोड़ना

नीचे दिया गया कोड, नए Flutter ऐप्लिकेशन में आसान मैप जोड़ने का तरीका बताता है.

  1. lib/main.dart फ़ाइल को अपने पसंदीदा IDE के साथ Flutter प्रोजेक्ट में खोलें.
  2. mapController का इंस्टेंस बनाने और शुरू करने के लिए, अपने ऐप्लिकेशन के डिफ़ॉल्ट मुख्य तरीके में तरीके जोड़ें या अपडेट करें.
          import 'package:flutter/material.dart';
          import 'package:google_maps_flutter/google_maps_flutter.dart';
          
          void main() => runApp(const MyApp());
          
          class MyApp extends StatefulWidget {
            const MyApp({super.key});
          
            @override
            State<MyApp> createState() => _MyAppState();
          }
          
          class _MyAppState extends State<MyApp> {
            late GoogleMapController mapController;
          
            final LatLng _center = const LatLng(-33.86, 151.20);
          
            void _onMapCreated(GoogleMapController controller) {
              mapController = controller;
            }
          
            @override
            Widget build(BuildContext context) {
              return MaterialApp(
                home: Scaffold(
                  appBar: AppBar(
                    title: const Text('Maps Sample App'),
                    backgroundColor: Colors.green[700],
                  ),
                  body: GoogleMap(
                    onMapCreated: _onMapCreated,
                    initialCameraPosition: CameraPosition(
                      target: _center,
                      zoom: 11.0,
                    ),
                  ),
                ),
              );
            }
          }
  3. ऐसे किसी भी एम्युलेटर या डिवाइस को चालू करें जिस पर आपको अपना ऐप्लिकेशन चलाना है.
  4. अपना ऐप्लिकेशन चलाएं. आपको इससे मिलता-जुलता आउटपुट दिखेगा:
      flutter run
    
       
        Multiple devices found:
        Android phone (mobile) • emulator-5554 • android-arm64  • Android 13 (API 33) (emulator)
        iPhone (mobile)  • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-2 (simulator)
        Chrome (web) • chrome • web-javascript • Google Chrome 108.0.5359.124
        [1]: Android phone
        [2]: iPhone
        [3]: Chrome
        
        Please choose one (To quit, press "q/Q"): 

    जिस प्लैटफ़ॉर्म को चलाना है उसका नंबर लिखें. हर बार flutter run को शुरू करने पर, Flutter आपको इन विकल्पों के बारे में बताएगा. अगर आपके डेवलपमेंट सिस्टम में कोई एम्युलेटर नहीं चल रहा है या कोई टेस्ट डिवाइस कनेक्ट नहीं है, तो Flutter को Chrome खोलने का विकल्प चुनना चाहिए.

    हर प्लैटफ़ॉर्म को एक मैप दिखाना चाहिए, जो सिडनी, ऑस्ट्रेलिया के बीच में हो. अगर आपको मैप नहीं दिखता, तो पक्का करें कि आपने एपीआई पासकोड को सही टारगेट प्रोजेक्ट में जोड़ा हो.

अगले चरण

अब आपके पास एपीआई पासकोड और Flutter प्रोजेक्ट है. इसलिए, ऐप्लिकेशन बनाए और चलाए जा सकते हैं. Flutter के लिए Google Maps पैकेज कई ट्यूटोरियल और सैंपल ऐप्लिकेशन उपलब्ध कराता है. से आपको शुरुआत करने में मदद मिल सकती है. ज़्यादा जानकारी के लिए, ये संसाधन देखें: