Как интегрировать карты Google в приложения Flutter?

Опубликовано: 10 Января, 2023

Мы все видели, что Карты Google используются многими приложениями, такими как Ola, Uber, Swiggy и другими. Мы должны настроить проект API с платформой Google Maps, чтобы интегрировать Google Maps в наше приложение Flutter. В этой статье мы рассмотрим, как интегрировать Google Maps в приложения Flutter?

Поэтапная реализация

Шаг 1. Создайте новый проект в Android Studio.

Чтобы настроить Flutter Development в Android Studio, обратитесь к разделу «Настройка Android Studio для разработки Flutter», а затем создайте новый проект в Android Studio, пожалуйста, обратитесь к разделу «Создание простого приложения во Flutter».

Шаг 2. Генерация ключа API для использования Google Maps

Ознакомьтесь со статьей ниже о том, как сгенерировать ключ API для использования Google Maps. После разработки этого ключа мы должны использовать его в нашем проекте для интеграции Google Maps.

Теперь следуйте инструкциям по внедрению Google Maps в приложение Flutter.

Шаг 3. Добавление зависимости в файл pubspec.yaml

dependencies:
    flutter: 
    google_maps_flutter: ^2.1.8

Теперь нажмите на pub.get для настройки.

Шаг 4: Обновите файл build.gradle .

Перейдите к файлу android>app>build.gradle и обновите код в строке ниже.

Изменить версию SDK для компиляции

android {
    compileSdkVersion 31

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

Изменить минимальную версию SDK

defaultConfig {
    // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
    applicationId "com.example.google_maps"
    minSdkVersion 20
    targetSdkVersion 30
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

Шаг 5. Добавьте ключ API в файл манифеста Android

Перейдите к файлу android > app > src > main > AndrodManifest.xml и добавьте приведенный ниже код в тег манифеста. Обязательно добавьте свой ключ API Карт Google в значение.

<meta-data android:name="com.google.android.geo.API_KEY"
        android:value="Enter your API key here"/>

Шаг 6: Работа с файлом main.dart.

Перейдите к файлу lib > main.dart и добавьте в него приведенный ниже код. В код добавлены комментарии для более подробного ознакомления.

Dart

void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // in the below line, we are specifying title of our app. 
      title: "GFG",
      // in the below line, we are hiding our debug banner. 
      debugShowCheckedModeBanner: false,
      // in the below line, we are specifying theme. 
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // First Screen of our App
      home: const HomePage(),
    );
  }
}

Шаг 7: Создание нового файла Dart для домашней страницы.

Перейдите к lib > Щелкните правой кнопкой мыши > New > Dart File и назовите его HomePage.dart . После создания этого файла добавьте в него приведенный ниже код. В код добавлены комментарии для более подробного ознакомления.

Dart

import "dart:async";
import "package:flutter/material.dart";
import "package:google_maps_flutter/google_maps_flutter.dart";
  
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State<HomePage> {
      
  // in the below line, we are initializing our controller for google maps. 
  Completer<GoogleMapController> _controller = Completer();
  
  // in the below line, we are specifying our camera position
  static final CameraPosition _kGoogle = const CameraPosition(
      target: LatLng(37.42796133580664, -122.885749655962),
    zoom: 14.4746,
  );
    
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // in the below line, we are specifying our app bar.
      appBar: AppBar(
        // setting background color for app bar 
        backgroundColor: Color(0xFF0F9D58),
        // setting title for app bar. 
        title: Text("Google Maps"),
      ),
      body: Container(
        // in the below line, creating google maps. 
        child: GoogleMap(
          // in the below line, setting camera position 
            initialCameraPosition: _kGoogle,
          // in the below line, specifying map type. 
          mapType: MapType.normal,
          // in the below line, setting user location enabled.
          myLocationEnabled: true,
          // in the below line, setting compass enabled. 
          compassEnabled: true,
          // in the below line, specifying controller on map complete. 
          onMapCreated: (GoogleMapController controller){
              _controller.complete(controller);
          },
        ),
      )
    );
  }
}

Выход :

Flutter Dart

Как интегрировать карты Google в приложения Flutter?

Поэтапная реализация

Шаг 1. Создайте новый проект в Android Studio.

Шаг 2. Генерация ключа API для использования Google Maps

Теперь следуйте инструкциям по внедрению Google Maps в приложение Flutter.

Шаг 3. Добавление зависимости в файл pubspec.yaml

Шаг 4: Обновите файл build.gradle .

Изменить версию SDK для компиляции

Изменить минимальную версию SDK

Шаг 5. Добавьте ключ API в файл манифеста Android

Шаг 6: Работа с файлом main.dart.

Dart

Шаг 7: Создание нового файла Dart для домашней страницы.

Dart

Выход :

РЕКОМЕНДУЕМЫЕ СТАТЬИ