Voice Download¶
Setup¶
Prerequisites¶
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}
Then run the project:
flutter run --debug
orflutter 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 }),
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}