একটি ফ্লাটার প্রকল্প সেট আপ করুন

আপনি একটি Flutter প্রকল্প সেট আপ করার আগে নিশ্চিত হন যে আপনি শুরু করার আগে এর অধীনে পূর্বশর্ত পদক্ষেপগুলি সম্পূর্ণ করেছেন। আপনি বিলিং সক্ষম করার পরে এবং একটি API কী তৈরি করার পরে, আপনি ফ্লাটার প্রকল্প সেট আপ করতে পারেন যা আপনি আপনার অ্যাপ বিকাশ করতে ব্যবহার করেন৷

ধাপ 1: প্রয়োজনীয় সফ্টওয়্যার ইনস্টল করুন

Google Maps for Flutter প্যাকেজ ব্যবহার করে একটি প্রকল্প তৈরি করতে, আপনাকে অবশ্যই Flutter SDK ইনস্টল করতে হবে এবং আপনার লক্ষ্য প্ল্যাটফর্মের জন্য আপনার উন্নয়ন পরিবেশ সেটআপ করতে হবে। বিস্তারিত জানার জন্য ফ্লটার ইনস্টল গাইড দেখুন।

ধাপ 2: একটি নতুন প্রকল্পে Flutter প্যাকেজের জন্য Google Maps ইনস্টল করুন

Flutter একটি Flutter প্লাগইন হিসাবে Flutter প্যাকেজের জন্য Google মানচিত্র অফার করে।

Flutter প্রকল্প তৈরি করুন এবং মানচিত্র প্লাগইন যোগ করুন।

1. `flutter create` ব্যবহার করে একটি নতুন 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

   এই অ্যাপ্লিকেশনটি আইওএস, অ্যান্ড্রয়েড এবং ওয়েবকে লক্ষ্য করে। Google মানচিত্র SDK এই সময়ে একটি ব্রাউজারের বাইরে ডেস্কটপ অ্যাপ্লিকেশন সমর্থন করে না৷
2. এই প্রজেক্টে Google Maps for Flutter প্যাকেজ প্লাগইন যোগ করুন।

   flutter pub add google_maps_flutter
     
     Resolving dependencies...
     [Listing of dependencies elided]
   
     Changed 14 dependencies!

ধাপ 3: প্ল্যাটফর্ম সংস্করণ সেট করুন

দ্রষ্টব্য: iOS, 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'

ধাপ 4: প্রকল্পে আপনার API কী যোগ করুন

আপনি শুরু করার আগে , আপনি আপনার অ্যাপের জন্য একটি API কী তৈরি করেছেন। এখন আপনার ফ্লটার প্রকল্পে সেই কী যোগ করুন। ফ্লটারের জন্য, আপনার এই API কীটি সমস্ত লক্ষ্য প্ল্যাটফর্মে যোগ করা উচিত: iOS, Android এবং Web।

নিম্নলিখিত উদাহরণগুলিতে, আপনার API কী দিয়ে YOUR_API_KEY প্রতিস্থাপন করুন।

দ্রষ্টব্য: এটি আলাদা API কীগুলি ব্যবহার করার এবং Android, iOS এবং ওয়েবের জন্য অ্যাপ্লিকেশন সীমাবদ্ধতাগুলি ব্যবহার করার পরামর্শ দেওয়া হয়৷

অ্যান্ড্রয়েড

এই কাজটি স্ট্রীমলাইন করতে, আমরা আপনাকে Android এর জন্য সিক্রেটস গ্রেডল প্লাগইন ব্যবহার করার পরামর্শ দিই।

দ্রষ্টব্য: সর্বশেষ সিস্টেম প্রয়োজনীয়তা এবং ইনস্টলেশন নির্দেশাবলীর জন্য GitHub-এ Android ডকুমেন্টেশনের জন্য সিক্রেটস গ্রেডল প্লাগইন দেখুন।

আপনার Google মানচিত্র প্রকল্পে Android এর জন্য Secrets Gradle Plugin ইনস্টল করতে:

1. অ্যান্ড্রয়েড স্টুডিওতে, আপনার শীর্ষ-স্তরের build.gradle.kts বা build.gradle ফাইল খুলুন এবং buildscript অধীনে dependencies উপাদানে নিম্নলিখিত কোডটি যোগ করুন।

   কোটলিন

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

   গ্রোভি

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

2. আপনার মডিউল-স্তরের build.gradle.kts বা build.gradle ফাইল খুলুন এবং plugins উপাদানে নিম্নলিখিত কোড যোগ করুন।

   কোটলিন

   plugins {
       // ...
       id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin")
   }

   গ্রোভি

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

3. আপনার মডিউল-স্তরের build.gradle.kts বা build.gradle ফাইলে, নিশ্চিত করুন যে targetSdk এবং compileSdk 34-এ সেট করা আছে।
4. ফাইলটি সংরক্ষণ করুন এবং Gradle এর সাথে আপনার প্রকল্প সিঙ্ক করুন ।
5. আপনার শীর্ষ-স্তরের ডিরেক্টরিতে secrets.properties ফাইলটি খুলুন এবং তারপরে নিম্নলিখিত কোডটি যোগ করুন। আপনার API কী দিয়ে YOUR_API_KEY প্রতিস্থাপন করুন। এই ফাইলে আপনার কী সংরক্ষণ করুন কারণ secrets.properties একটি সংস্করণ নিয়ন্ত্রণ সিস্টেমে চেক করা থেকে বাদ দেওয়া হয়েছে৷
   দ্রষ্টব্য: যদি secrets.properties ফাইলটি বিদ্যমান না থাকে, তাহলে local.properties ফাইলের মতো একই ফোল্ডারে এটি তৈরি করুন।

   MAPS_API_KEY=YOUR_API_KEY

6. ফাইলটি সংরক্ষণ করুন।

7. আপনার শীর্ষ-স্তরের ডিরেক্টরিতে local.defaults.properties ফাইল তৈরি করুন, secrets.properties ফাইলের মতো একই ফোল্ডার, এবং তারপরে নিম্নলিখিত কোডটি যোগ করুন।

   দ্রষ্টব্য: দেখানো হিসাবে কোড লিখুন. আপনার API কী দিয়ে DEFAULT_API_KEY প্রতিস্থাপন করবেন না।

   MAPS_API_KEY=DEFAULT_API_KEY

   এই ফাইলটির উদ্দেশ্য হল API কীটির জন্য একটি ব্যাকআপ অবস্থান প্রদান করা যদি secrets.properties ফাইলটি না পাওয়া যায় যাতে বিল্ডগুলি ব্যর্থ না হয়৷ এটি ঘটতে পারে যদি আপনি একটি সংস্করণ নিয়ন্ত্রণ সিস্টেম থেকে অ্যাপটিকে ক্লোন করেন যা secrets.properties বাদ দেয় এবং আপনি এখনও আপনার API কী প্রদান করার জন্য স্থানীয়ভাবে একটি 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}" />

   দ্রষ্টব্য: com.google.android.geo.API_KEY হল API কী-এর জন্য প্রস্তাবিত মেটাডেটা নাম। Flutter SDK সহ Android প্ল্যাটফর্মে একাধিক Google Maps-ভিত্তিক API-এ প্রমাণীকরণ করতে এই নামের একটি কী ব্যবহার করা যেতে পারে। পিছনের সামঞ্জস্যের জন্য, API com.google.android.maps.v2.API_KEY নামটিকেও সমর্থন করে। এই লিগ্যাসি নামটি শুধুমাত্র Android Maps API v2 তে প্রমাণীকরণের অনুমতি দেয়। একটি অ্যাপ্লিকেশন শুধুমাত্র API কী মেটাডেটা নামের একটি নির্দিষ্ট করতে পারে। উভয় নির্দিষ্ট করা থাকলে, API একটি ব্যতিক্রম নিক্ষেপ করে।

10. অ্যান্ড্রয়েড স্টুডিওতে, আপনার মডিউল-স্তরের build.gradle.kts বা build.gradle ফাইল খুলুন এবং secrets সম্পত্তি সম্পাদনা করুন। secrets সম্পত্তি বিদ্যমান না থাকলে, এটি যোগ করুন।

    secrets.properties এ propertiesFileName সেট করতে প্লাগইনের বৈশিষ্ট্যগুলি সম্পাদনা করুন, defaultPropertiesFileName to local.defaults.properties সেট করুন এবং অন্য কোনো বৈশিষ্ট্য সেট করুন।

    কোটলিন

    secrets {
        // To add your Maps API key to this project:
        // 1. If the secrets.properties file does not exist, create it in the same folder as the local.properties file.
        // 2. Add this line, where YOUR_API_KEY is your API key:
        //        MAPS_API_KEY=YOUR_API_KEY
        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.*"
    }
            

    গ্রোভি

    secrets {
        // To add your Maps API key to this project:
        // 1. If the secrets.properties file does not exist, create it in the same folder as the local.properties file.
        // 2. Add this line, where YOUR_API_KEY is your API key:
        //        MAPS_API_KEY=YOUR_API_KEY
        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 হল API কী-এর জন্য প্রস্তাবিত মেটাডেটা নাম। Flutter SDK সহ Android প্ল্যাটফর্মে একাধিক Google Maps-ভিত্তিক API-এ প্রমাণীকরণ করতে এই নামের একটি কী ব্যবহার করা যেতে পারে। পিছনের সামঞ্জস্যের জন্য, API com.google.android.maps.v2.API_KEY নামটিকেও সমর্থন করে। এই লিগ্যাসি নামটি শুধুমাত্র Android Maps API v2 তে প্রমাণীকরণের অনুমতি দেয়। একটি অ্যাপ্লিকেশন শুধুমাত্র API কী মেটাডেটা নামের একটি নির্দিষ্ট করতে পারে। উভয় নির্দিষ্ট করা থাকলে, API একটি ব্যতিক্রম নিক্ষেপ করে।

iOS

আপনার AppDelegate.swift ফাইলে আপনার API কী যোগ করুন।

1. আপনার পছন্দের IDE দিয়ে আপনার Flutter প্রকল্পে ios/Runner/AppDelegate.swift ফাইলটি খুলুন।
2. আপনার অ্যাপে Google Maps for Flutter প্যাকেজ যোগ করতে নিম্নলিখিত আমদানি বিবৃতি যোগ করুন:

import GoogleMaps

3. YOUR_API_KEY এর জন্য আপনার API কী প্রতিস্থাপন করে আপনার application(_:didFinishLaunchingWithOptions:) পদ্ধতিতে আপনার API যোগ করুন :

   GMSServices.provideAPIKey("YOUR_API_KEY")

4. 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 অ্যাপ্লিকেশন ফাইলে আপনার API কী যোগ করুন।

1. আপনার পছন্দের IDE দিয়ে আপনার Flutter প্রকল্পে web/index.html ফাইলটি খুলুন।
2. YOUR_API_KEY এর জন্য আপনার API কী প্রতিস্থাপন করে, <head> ট্যাগের ভিতরে নিম্নলিখিত স্ক্রিপ্ট ট্যাগটি যোগ করুন।

   <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>

ধাপ 5: একটি মানচিত্র যোগ করুন

নিম্নলিখিত কোডটি দেখায় কিভাবে একটি নতুন ফ্লাটার অ্যাপে একটি সাধারণ মানচিত্র যোগ করতে হয়।

দ্রষ্টব্য: পূর্ববর্তী পদক্ষেপগুলি সফলভাবে সম্পন্ন হয়েছে বলে ধরে নিলে, নিম্নলিখিত প্রধান ডার্ট ফাংশনটি Android, iOS এবং ওয়েব সহ সমস্ত প্ল্যাটফর্মে কাজ করা উচিত।

1. আপনার পছন্দের IDE দিয়ে আপনার Flutter প্রকল্পে lib/main.dart ফাইলটি খুলুন।
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 আহ্বান করবেন, ফ্লাটার আপনাকে এই পছন্দগুলির সাথে উপস্থাপন করবে। যদি আপনার ডেভেলপমেন্ট সিস্টেমে কোনো এমুলেটর চলমান বা সংযুক্ত টেস্ট ডিভাইস না থাকে, তাহলে ফ্লাটারকে Chrome খুলতে বেছে নেওয়া উচিত।

   প্রতিটি প্ল্যাটফর্ম সিডনি, অস্ট্রেলিয়াকে কেন্দ্র করে একটি মানচিত্র প্রদর্শন করা উচিত। আপনি যদি মানচিত্রটি না দেখে থাকেন তবে পরীক্ষা করুন যে আপনি উপযুক্ত লক্ষ্য প্রকল্পে আপনার API কী যোগ করেছেন।

পরবর্তী পদক্ষেপ

এখন যেহেতু আপনার কাছে একটি এপিআই কী এবং একটি ফ্লাটার প্রজেক্ট আছে, আপনি অ্যাপ তৈরি করতে এবং চালাতে পারেন। Google Maps for Flutter প্যাকেজ অনেক টিউটোরিয়াল এবং নমুনা অ্যাপ প্রদান করে যা আপনাকে শুরু করতে সাহায্য করতে পারে। আরও জানতে, নিম্নলিখিত সংস্থানগুলি দেখুন:

• একটি মার্কার টিউটোরিয়াল সহ একটি মানচিত্র যোগ করা হচ্ছে
• Google মানচিত্র প্ল্যাটফর্মের সাথে ফ্লটারের জন্য কোডল্যাব
• GitHub-এ কোড নমুনা