Skip to content

Integrating Yandex Map Kit in Flutter: A Comprehensive Guide

Hello everyone! In today’s post, we will delve into using Yandex Map Kit to add dynamic maps to your Flutter applications. We’ll cover everything from setting up a test project to configuring it for both debug and release builds, and how to work with map objects. Let’s get started!

Getting Started with Yandex Map Kit

Yandex Map Kit is a versatile tool that allows developers to integrate maps into their mobile applications. This can be especially useful for location-based services, route planning, and more. Here’s how you can get started.

Creating a Test Project

First, create a new Flutter project:

flutter create yandex_map_example

Navigate to the project directory:

cd yandex_map_example

Open the project in your preferred editor:

code .

Adding Yandex Map Kit Dependency

Open pubspec.yaml and add the yandex_mapkit dependency:

dependencies:
  flutter:
    sdk: flutter
  yandex_mapkit: ^0.11.0

Run flutter pub get to install the dependencies.

Configuring the Project for Android and iOS

To use Yandex Map Kit, you need to configure your project properly for both Android and iOS.

Android Configuration

  1. Add Permissions: Open android/app/src/main/AndroidManifest.xml and add the necessary permissions:

    
    
  2. API Key: Create a custom application class to initialize Yandex Map Kit with your API key. In android/app/src/main/java/com/yourcompany/yandexmapexample, create MainApplication.java:

    package com.yourcompany.yandexmapexample;
    
    import android.app.Application;
    import com.yandex.mapkit.MapKitFactory;
    
    public class MainApplication extends Application {
        @Override
        public void onCreate() {
            super.onCreate();
            MapKitFactory.setLocale("en_US");
            MapKitFactory.setApiKey("YOUR_API_KEY"); // Replace with your API key
        }
    }

    Update android/app/src/main/AndroidManifest.xml to use this application class:

    
    
  3. Gradle Configuration: Open android/gradle.properties and add:

    yandexMapkit.variant=full

    Then, in android/app/build.gradle, add the Yandex Map Kit dependency:

    dependencies {
        implementation 'com.yandex.android:maps.mobile:4.6.1-full'
    }

iOS Configuration

  1. Podfile: Open ios/Podfile and ensure the platform is set to iOS 12.0 or higher:

    platform :ios, '12.0'
  2. AppDelegate: Open ios/Runner/AppDelegate.swift and add the Yandex Map Kit initialization:

    import UIKit
    import Flutter
    import YandexMapsMobile
    
    @UIApplicationMain
    @objc class AppDelegate: FlutterAppDelegate {
      override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
      ) -> Bool {
        YMKMapKit.setLocale("en_US")
        YMKMapKit.setApiKey("YOUR_API_KEY") // Replace with your API key
        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
      }
    }

Building the Map Interface

Now let’s build a basic map interface using Yandex Map Kit.

1. Creating the Map Page

In the lib directory, create map_page.dart and add the following code:

import 'package:flutter/material.dart';
import 'package:yandex_mapkit/yandex_mapkit.dart';

class MapPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Yandex Map Example'),
      ),
      body: YandexMap(
        onMapCreated: (YandexMapController controller) {
          controller.addPlacemark(Placemark(
            point: Point(latitude: 55.751244, longitude: 37.618423),
            style: PlacemarkStyle(
              iconName: 'assets/icon.png', // Ensure you have an icon at this path
              scale: 2,
            ),
          ));
        },
      ),
    );
  }
}

2. Updating main.dart

Open lib/main.dart and update it to include the new map page:

import 'package:flutter/material.dart';
import 'map_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapPage(),
    );
  }
}

Testing the Debug and Release Builds

With everything set up, you can now test your application in both debug and release modes.

Debug Build

Run the following command to start the debug build:

flutter run

Check the debug build to ensure the map loads correctly and your points are displayed as expected.

Release Build

Run the following command to build the release version:

flutter build apk --release

Then install and run the APK on your device:

flutter install

Verify that the release build works as expected, with all points and map objects displaying correctly.

Updating Map Objects

Let’s explore how to update map objects dynamically.

  1. Define a List of Points:

    List mapPoints = [
      Point(latitude: 55.751244, longitude: 37.618423),
      Point(latitude: 55.7558, longitude: 37.6173),
    ];
  2. Create Placemark Objects:

    List placemarks = [];
    for (var point in mapPoints) {
      placemarks.add(Placemark(
        point: point,
        style: PlacemarkStyle(
          iconName: 'assets/icon.png',
          scale: 2,
        ),
      ));
    }
  3. Add Placemarks to the Map:

    controller.addPlacemarks(placemarks);

Conclusion

Integrating Yandex Map Kit in your Flutter application provides a rich set of features to build interactive and user-friendly maps. From adding custom markers to enabling geolocation and route planning, Yandex Map Kit is a powerful tool for any map-based Flutter app.

For more detailed information and examples, refer to the official Yandex Map Kit documentation.

Stay tuned for more Flutter tutorials and happy coding! Don’t forget to subscribe to my channel and hit the like button if you found this guide helpful. See you in the next lesson!

Leave a Reply

Your email address will not be published. Required fields are marked *