# Integrating Supertonic with Flutter for Cross-Platform TTS Apps

> Integrate Supertonic with Flutter for powerful cross-platform TTS apps. Achieve on-device speech synthesis on macOS, Windows, Linux, Android, and iOS without network dependencies.

- Repository: [Supertone Inc./supertonic](https://github.com/supertone-inc/supertonic)
- Tags: how-to-guide
- Published: 2026-05-14

---

**Supertonic’s Flutter example provides a complete on-device TTS integration using ONNX Runtime to synthesize speech locally across macOS, Windows, Linux, Android, and iOS without network dependencies.**

The **supertone-inc/supertonic** repository delivers a production-ready Flutter implementation that embeds a neural text-to-speech engine directly into mobile and desktop applications. By leveraging the `flutter_onnxruntime` package and bundling pre-converted ONNX models, you can generate high-quality speech in 31 languages while processing all data on-device for maximum privacy and offline functionality.

## Architecture Overview

The Supertonic Flutter integration follows a clean three-layer architecture that separates UI concerns from heavy inference logic.

### UI Layer (Flutter Widgets)

Located in `flutter/lib/main.dart`, the `SupertonicApp` widget constructs the interface using standard Flutter components. It manages a text input field, a language dropdown supporting 31 language codes, sliders for denoising steps and speech speed, and action buttons for generation, playback, and downloads. The UI listens to model loading states via `_loadModels` and disables controls during inference to prevent conflicting operations.

### TTS Service Layer (`helper.dart`)

All neural processing resides in `flutter/lib/helper.dart`. The `loadTextToSpeech` function initializes four ONNX sessions from `assets/onnx/` for the duration predictor, text encoder, vector estimator, and vocoder models. The `loadVoiceStyle` function parses JSON configurations from `assets/voice_styles/` to apply specific speaker characteristics.

When synthesizing, `TextToSpeech.call` executes the full inference pipeline: tokenizing input through `preprocessText` (which applies NFKD-like Unicode decomposition and emoji removal), predicting durations via `dpOrt`, encoding text through `textEncOrt`, performing iterative denoising using `vectorEstOrt` for the configured number of steps, and finally generating audio waveforms through `vocoderOrt`.

### Asset Layer

Pre-trained models live in `flutter/assets/onnx/` and voice configurations in `flutter/assets/voice_styles/`. The [`flutter/pubspec.yaml`](https://github.com/supertone-inc/supertonic/blob/main/flutter/pubspec.yaml) declares these directories under the `flutter` assets section, ensuring ONNX Runtime can access them at runtime. The helper methods use `copyModelToFile` to stream bundled resources into temporary files accessible by the native runtime.

## Implementation Walkthrough

### Initializing the Engine

During app startup, call `_loadModels` to prepare the inference environment:

```dart
final tts = await loadTextToSpeech('assets/onnx', useGpu: false);
final style = await loadVoiceStyle(['assets/voice_styles/M1.json']);

```

This loads the four required ONNX models—`duration_predictor.onnx`, `text_encoder.onnx`, `vector_estimator.onnx`, and `vocoder.onnx`—and initializes the voice style parameters. The `useGpu` parameter controls whether inference runs on GPU or CPU hardware.

### Generating Speech

When the user triggers synthesis, the app executes `_generateSpeech`:

1. **Preprocess input**: `preprocessText` normalizes punctuation, removes emojis, and wraps the string in language tags.
2. **Run inference**: `tts.call` chunks the text and executes the ONNX sessions sequentially, sampling a noisy latent and denoising it for the configured number of steps.
3. **Export audio**: `writeWavFile` converts the float waveform to 16-bit PCM WAV format.
4. **Playback**: The UI streams the temporary file using `just_audio` for immediate audio playback.

### Handling File Operations

The `_downloadFile` method copies the generated WAV from temporary storage to the user's Downloads folder, enabling permanent offline access to synthesized content.

## Code Examples

### Minimal TTS Integration

For quick integration into existing Flutter widgets:

```dart
import 'package:just_audio/just_audio.dart';
import 'package:path_provider/path_provider.dart';
import 'helper.dart';

Future<void> synthesizeSpeech(String text) async {
  // Load models (typically done at app startup)
  final tts = await loadTextToSpeech('assets/onnx', useGpu: false);
  final style = await loadVoiceStyle(['assets/voice_styles/M1.json']);
  
  // Process and generate
  final processed = preprocessText(text, 'en');
  final result = await tts.call(processed, 'en', style, 8); // 8 denoising steps
  
  // Extract waveform data
  final wav = result['wav'] as List<double>;
  final sampleRate = tts.sampleRate;
  
  // Write to temporary file and play
  final dir = await getTemporaryDirectory();
  final path = '${dir.path}/demo.wav';
  writeWavFile(path, wav, sampleRate);
  
  await AudioPlayer().setAudioSource(AudioSource.uri(Uri.file(path)));
  await AudioPlayer().play();
}

```

### UI Orchestration

The complete implementation in `main.dart` wires these components together:

- **App initialization**: `_loadModels` validates asset availability before enabling UI controls.
- **Generation trigger**: `_generateSpeech` coordinates preprocessing, inference, and audio routing.
- **Download handler**: `_downloadFile` persists temporary outputs to permanent storage.
- **Parameter binding**: Slider widgets update `_totalSteps` (denoising iterations) and `_speed` (speech rate) that get passed to `tts.call`.

## Key Configuration Files

**[`flutter/pubspec.yaml`](https://github.com/supertone-inc/supertonic/blob/main/flutter/pubspec.yaml)** declares the ONNX dependencies and asset bundles:

```yaml
dependencies:
  flutter_onnxruntime: ^[version]
  just_audio: ^[version]
  
flutter:
  assets:
    - assets/onnx/
    - assets/voice_styles/

```

The `assets/onnx/` directory must contain the four model files exported from the Supertonic training pipeline, while `assets/voice_styles/` holds JSON definitions such as [`M1.json`](https://github.com/supertone-inc/supertonic/blob/main/M1.json) that specify speaker characteristics for the vector estimator.

## Summary

- **Supertonic enables fully offline TTS** in Flutter apps by running ONNX Runtime inference on-device across all supported platforms.
- **Three-layer architecture** separates UI (`main.dart`), inference logic (`helper.dart`), and model assets (`assets/`).
- **Key integration points** include `loadTextToSpeech` for initialization, `preprocessText` for input normalization, and `TextToSpeech.call` for the neural synthesis pipeline.
- **Audio output** converts float waveforms to standard WAV files via `writeWavFile`, playable through `just_audio` or similar plugins.
- **No network requirements** make this suitable for privacy-sensitive applications requiring 31-language support.

## Frequently Asked Questions

### Does Supertonic support GPU acceleration on Flutter?

Yes. Pass `useGpu: true` to `loadTextToSpeech` in `helper.dart` to enable GPU inference via ONNX Runtime, though availability depends on the target platform's GPU drivers and the `flutter_onnxruntime` package implementation.

### How many languages does the Flutter implementation support?

The Supertonic Flutter example supports **31 languages** through ISO language codes passed to `preprocessText` and `tts.call`, with built-in text normalization for Hangul Jamo decomposition and Latin accent handling.

### What are the system requirements for running Supertonic in Flutter?

The app requires sufficient RAM to load the four ONNX models (approximately several hundred MB) and temporary disk space for asset extraction. The `flutter_onnxruntime` package handles platform-specific bindings for macOS, Windows, Linux, Android, and iOS.

### Can I use custom voice styles with the Flutter integration?

Yes. Place your custom JSON voice style files in `assets/voice_styles/` and reference them via `loadVoiceStyle`. The [`M1.json`](https://github.com/supertone-inc/supertonic/blob/main/M1.json) format defines speaker characteristics that the vector estimator uses during the denoising diffusion process.