הגדרה של פרויקט Flutter

לפני ההגדרה של פרויקט Flutter, צריך לוודא שהשלמת את הדרישות המוקדמות בקטע לפני שמתחילים. אחרי הפעלה חיוב וליצור מפתח API, אפשר להגדיר את פרויקט Flutter שבו משתמשים לפתח את האפליקציה.

שלב 1: מתקינים את התוכנה הנדרשת

כדי לבנות פרויקט באמצעות חבילת מפות Google ל-Flutter, צריך להתקין את Flutter SDK והגדרה של סביבת הפיתוח לפלטפורמת היעד. כדאי לנסות את התקנת Flutter מדריך לפרטים.

שלב 2: מתקינים את החבילה של מפות Google ל-Flutter בפרויקט חדש

Flutter מציעה את חבילת מפות Google for Flutter.

יוצרים את הפרויקט של Flutter ומוסיפים את הפלאגין של מפות Google.

  1. יוצרים פרויקט חדש ב-Flutter באמצעות 'flutter create':
      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 ולאינטרנט. בשלב זה, ה-SDK של מפות Google אינו תומך באפליקציות לשולחן העבודה מחוץ לדפדפן.
  2. הוספת הפלאגין של חבילת Flutter של מפות Google לפרויקט הזה.
    flutter pub add google_maps_flutter
      
      Resolving dependencies...
      [Listing of dependencies elided]
    
      Changed 14 dependencies!

שלב 3: הגדרה של גרסת הפלטפורמה

Android

מגדירים את גרסת ה-SDK המינימלית ל-Android.

  1. פותחים את קובץ התצורה android/app/build.gradle בסביבת הפיתוח המשולבת המועדפת (IDE).
  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. פותחים את קובץ התצורה ios/Podfile בסביבת הפיתוח המשולבת המועדפת (IDE).
  2. צריך להוסיף את השורות הבאות בתחילת ה-Podfile:
      # Set platform to 14.0 to enable latest Google Maps SDK
      platform :ios, '14.0'

שלב 4: מוסיפים את מפתח ה-API לפרויקט

בקטע לפני שמתחילים, יצרתם מפתח API לאפליקציה. עכשיו מוסיפים המפתח לפרויקט Flutter שלכם. ל-Flutter, להוסיף את מפתח ה-API הזה אל כל פלטפורמות היעד: iOS , Android ואינטרנט.

בדוגמאות הבאות, מחליפים את YOUR_API_KEY במפתח ה-API שלכם.

Android

כדי לייעל את המשימה הזו, מומלץ פלאגין של Secrets Gradle ל-Android.

כדי להתקין את הפלאגין Secrets Gradle ל-Android בפרויקט במפות Google:

  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. שומרים את הקובץ ואז לסנכרן את הפרויקט עם Gradle
  5. פותחים את הקובץ secrets.properties בספרייה שברמה העליונה, ואז מוסיפים את באמצעות הקוד הבא. מחליפים את YOUR_API_KEY במפתח ה-API שלכם. אחסון המפתח בקובץ הזה כי secrets.properties לא נכלל בבדיקה לניהול גרסאות המערכת.
    MAPS_API_KEY=YOUR_API_KEY
  6. שומרים את הקובץ.
  7. יוצרים את הקובץ local.defaults.properties בספרייה שברמה העליונה, אותה לתיקייה בתור הקובץ secrets.properties, ואז מוסיפים את הקוד הבא.

    MAPS_API_KEY=DEFAULT_API_KEY

    מטרת הקובץ הזה היא לספק מיקום לגיבוי של מפתח ה-API אם קובץ secrets.properties לא נמצא כדי שגרסאות ה-build לא ייכשלו. הדבר יכול להתרחש אם משכפלים את האפליקציה ממערכת לניהול גרסאות שמושמטת מ-secrets.properties עדיין לא יצרת קובץ secrets.properties באופן מקומי כדי לספק את מפתח API.

  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 הוא השם המומלץ של מטא-נתונים למפתח ה-API. ניתן להשתמש במפתח עם השם הזה כדי לבצע אימות למספר ממשקי API מבוססי מפות Google בפלטפורמת Android, כולל Flutter SDK. בתאימות לאחור, ה-API גם יש תמיכה בשם com.google.android.maps.v2.API_KEY. המורשת הזו מאפשר אימות רק ��-Android Maps API גרס�� 2. האפליקציה יכולה לציין רק אחד משמות המטא-נתונים של מפתח ה-API. אם מציינים את שניהם, ה-API גורם לחריגה.

iOS

מוסיפים את מפתח ה-API לקובץ AppDelegate.swift.

  1. פותחים את הקובץ ios/Runner/AppDelegate.swift בפרויקט Flutter עם סביבת הפיתוח המשולבת המועדפת עליכם.
  2. יש להוסיף את הצהרת הייבוא הבאה כדי להוסיף לאפליקציה את חבילת מפות Google עבור Flutter:
  3. import GoogleMaps
  4. מוסיפים את ה-API ל-method application(_:didFinishLaunchingWithOptions:), תוך החלפת מפתח ה-API ב-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)
  }
}

פיתוח אתרים

מוסיפים את מפתח ה-API לקובץ האפליקציה index.html.

  1. פותחים את הקובץ web/index.html בפרויקט Flutter עם סביבת הפיתוח המשולבת המועדפת עליכם.
  2. מוסיפים את תג הסקריפט הבא בתוך התג <head>, תוך החלפת מפתח ה-API ב-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.

    הקטע head המלא של index.html אמור להיראות כך:

        <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: הוספת מפה

הקוד הבא מדגים איך להוסיף מפה פשוטה לאפליקציית Flutter חדשה.

  1. פותחים את הקובץ lib/main.dart בפרויקט Flutter עם סביבת הפיתוח המשולבת המועדפת עליכם.
  2. כדי ליצור ולהפעיל מופע של mapController, צריך להוסיף או לעדכן methods בשיטה הראשית של האפליקציה שמוגדרת כברירת מחדל.
          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.

    כל פלטפורמה צריכה להציג מפה במרכזה של סידני שבאוסטרליה. אם לא ראיתם את המפה, עליכם לבדוק שהוספתם את מפתח ה-API לפרויקט היעד המתאים.

השלבים הבאים

עכשיו, אחרי שיש לכם מפתח API ופרויקט Flutter, אתם יכולים ליצור ולהפעיל אפליקציות. חבילת מפות Google ל-Flutter מספקת מדריכים רבים ואפליקציות לדוגמה הוא יכול לעזור לך להתחיל. מידע נוסף זמין במקורות המידע הבאים: