Voice Download

In this guide, you will learn how to list the voice downloads available on the server, how to download a voice, and track the download progress.

Setup

First, get an API key token, see the Getting Started guide.

Prerequisites

Make sure you completed the Environment Setup - Flutter Examples guide before starting this guide.

Build and Run

Start a terminal/command prompt and navigate to the voice_download directory, within the Flutter examples directory - that is the name of this example project.

Note - the gem_kit directory containing the Maps SDK for Flutter should be in the plugins directory of the example, e.g. example_pathname/plugins/gem_kit - see the environment setup guide above.

Run: flutter pub get

Configure the native parts:

Android

First, verify that the ANDROID_SDK_ROOT environment variable is set to the root path of your android SDK.

In android/build.gradle add the maven block as shown, within the allprojects block, for both debug and release builds:

    allprojects {
        repositories {
            google()
            mavenCentral()
            maven {
               url "${rootDir}/../plugins/gem_kit/android/build"
            }
        }
    }

in android/app/build.gradle within the android block, in the defaultConfig block, the android SDK version minSdk must be set as shown below.

Additionally, for release builds, in android/app/build.gradle, within the android block, add the buildTypes block as shown:

Replace example_pathname with the actual project pathname

android {
    defaultConfig {
        applicationId "com.magiclane.gem_kit.examples.example_pathname"
        minSdk 21
        targetSdk flutter.targetSdk
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
    buildTypes {
        release {
            minifyEnabled false
            shrinkResources false

            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
        }
    }
}

iOS

In the ios/Podfile configuration file, at the top, set the minimum ios platform version to 14 like this:

platform :ios, '14.0'

We recommend you to run these commands after you copy the gem_kit into your project: flutter clean flutter pub get and cd ios pod install

Then run the project:

flutter run --debug

or

flutter run --release

How It Works

The example app demonstrates the following features:

• Get a list of available voices

• Download a voice

Import Necessary Packages

The Dart material package and required gem_kit packages are imported. The map is rendered within the root widget of the application.

import 'package:gem_kit/core.dart';
import 'package:gem_kit/map.dart';
import 'package:flutter/material.dart';

Future<void> main() async {
  const projectApiToken = String.fromEnvironment('GEM_TOKEN');
  await GemKit.initialize(appAuthorization: projectApiToken);
  runApp(const MyApp());
}

Initialize the Map

This callback function is called when the interactive map is initialized and ready to use. Allows mobile data usage for content downloads.

void _onMapCreated(GemMapController controller) async {
  SdkSettings.setAllowOffboardServiceOnExtraChargedNetwork(ServiceGroupType.contentService, true);
}

Navigate to Voices Page

A tap on the voice icon in the app bar calls this method to navigate to the voice download screen.

// Method to navigate to the Voices Page.
void _onVoicesButtonTap(BuildContext context) async {
  Navigator.of(context).push(MaterialPageRoute<dynamic>(
    builder: (context) => const VoicesPage(),
  ));
}

Retrieve List of Voices

The list of voices available for download is obtained from the server using ContentStore.asyncGetStoreContentList(ContentType.voice).

Future<List<ContentStoreItem>> _getVoices() async {
  Completer<List<ContentStoreItem>> voicesList = Completer<List<ContentStoreItem>>();
  ContentStore.asyncGetStoreContentList(ContentType.voice, (err, items, isCached) {
    if (err == GemError.success && items != null) {
      voicesList.complete(items);
    }
  });
  return voicesList.future;
}

Display Voices

The voices are displayed in a list, and a CircularProgressIndicator is shown while the voices are being loaded.

body: FutureBuilder<List<ContentStoreItem>>(
    future: _getVoices(),
    builder: (context, snapshot) {
      if (!snapshot.hasData || snapshot.data == null) {
        return const Center(child: CircularProgressIndicator());
      }
      return Scrollbar(
        child: ListView.separated(
          padding: EdgeInsets.zero,
          itemCount: snapshot.data!.length,
          separatorBuilder: (context, index) => const Divider(indent: 50, height: 0),
          itemBuilder: (context, index) {
            final voice = snapshot.data!.elementAt(index);
            return VoicesItem(voice: voice);
          },
        ),
      );
    }),

Download Voice

This method initiates the voice download.

void _downloadVoice() {
  widget.voice.asyncDownload(_onVoiceDownloadFinished,
      onProgressCallback: _onVoiceDownloadProgressUpdated, allowChargedNetworks: true);
}

Retrieve Country Flag

This method retrieves the flag image for each voice.

Uint8List _getCountryImage(ContentStoreItem voice) {
  final countryCodes = voice.countryCodes;
  return MapDetails.getCountryFlag(countryCode: countryCodes[0], size: const Size(100, 100));
}

Flutter Examples

Maps SDK for Flutter Examples can be downloaded or cloned with Git