Skip to content

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.

Voice Download - example Flutter screenshot

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:

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:

1    allprojects {
2        repositories {
3            google()
4            mavenCentral()
5            maven {
6               url "${rootDir}/../plugins/gem_kit/android/build"
7            }
8        }
9    }

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

 1android {
 2    defaultConfig {
 3        applicationId "com.magiclane.gem_kit.examples.example_pathname"
 4        minSdk 21
 5        targetSdk flutter.targetSdk
 6        versionCode flutterVersionCode.toInteger()
 7        versionName flutterVersionName
 8    }
 9    buildTypes {
10        release {
11            minifyEnabled false
12            shrinkResources false
13
14            // TODO: Add your own signing config for the release build.
15            // Signing with the debug keys for now, so `flutter run --release` works.
16            signingConfig signingConfigs.debug
17        }
18    }
19}

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.

1import 'package:gem_kit/core.dart';
2import 'package:gem_kit/map.dart';
3import 'package:flutter/material.dart';
4
5Future<void> main() async {
6  const projectApiToken = String.fromEnvironment('GEM_TOKEN');
7  await GemKit.initialize(appAuthorization: projectApiToken);
8  runApp(const MyApp());
9}

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.

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

Retrieve List of Voices

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

1Future<List<ContentStoreItem>> _getVoices() async {
2  Completer<List<ContentStoreItem>> voicesList = Completer<List<ContentStoreItem>>();
3  ContentStore.asyncGetStoreContentList(ContentType.voice, (err, items, isCached) {
4    if (err == GemError.success && items != null) {
5      voicesList.complete(items);
6    }
7  });
8  return voicesList.future;
9}

Display Voices

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

 1body: FutureBuilder<List<ContentStoreItem>>(
 2    future: _getVoices(),
 3    builder: (context, snapshot) {
 4      if (!snapshot.hasData || snapshot.data == null) {
 5        return const Center(child: CircularProgressIndicator());
 6      }
 7      return Scrollbar(
 8        child: ListView.separated(
 9          padding: EdgeInsets.zero,
10          itemCount: snapshot.data!.length,
11          separatorBuilder: (context, index) => const Divider(indent: 50, height: 0),
12          itemBuilder: (context, index) {
13            final voice = snapshot.data!.elementAt(index);
14            return VoicesItem(voice: voice);
15          },
16        ),
17      );
18    }),

Voice Download - example Flutter screenshot

Download Voice

This method initiates the voice download.

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

Retrieve Country Flag

This method retrieves the flag image for each voice.

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

Flutter Examples

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