Flutter Templates
Wie man eine AI-Sprachübersetzer-App mit Flutter und Back4App erstellt

31min
Einführung
In diesem Tutorial lernen Sie, wie Sie eine AI Voice Translator-App mit Flutter als Frontend-Framework und Back4App als Backend-Service erstellen. Die App ermöglicht es Benutzern, Sprache, Text und Bilder in mehrere Sprachen zu übersetzen. Sie wird über KI-gestützte Übersetzungen, optische Zeichenerkennung (OCR) und Spracherkennungsfunktionen verfügen. Am Ende dieses Tutorials haben Sie eine App erstellt, die Echtzeitübersetzungen verarbeiten und die Historie auf Back4App für zukünftige Verwendung speichern kann.
Voraussetzungen
Um dieses Tutorial abzuschließen, benötigen Sie:
Ein Back4App-Konto. Melden Sie sich für ein kostenloses Konto bei Back4App an.
Flutter SDK auf Ihrem lokalen Computer installiert. Befolgen Sie die offizielle Flutter-Installationsanleitung.
Grundkenntnisse in Dart und Flutter. Wenn Sie neu bei Flutter sind, lesen Sie die Flutter-Dokumentation durch, bevor Sie fortfahren.
Ein Konto bei einem Übersetzungs-API-Anbieter wie Google Cloud Translation oder DeepL.
Vertrautheit mit REST-APIs und asynchroner Programmierung in Dart.
Schritt 1 — Einrichten Ihres Back4App-Backends
In diesem Schritt richten Sie eine Back4App-Anwendung ein, definieren die Datenmodelle und konfigurieren das Backend, um Übersetzungshistorie, Sprachen und Benutzerdaten zu speichern.
1.1. Erstellen Sie eine neue Anwendung auf Back4App
Melden Sie sich bei Ihrem Back4App-Dashboard an.
Klicken Sie auf "Neue App erstellen".
Geben Sie einen App-Namen (z. B. "AI Voice Translator") ein und wählen Sie Ihr App-Symbol aus.
Wählen Sie Ihren Serverstandort, falls Sie dazu aufgefordert werden.
Klicken Sie auf "Erstellen".
1.2. Abrufen der Anwendungs-Schlüssel
Navigieren Sie zu App-Einstellungen > Sicherheit & Schlüssel im Dashboard Ihrer App.
Notieren Sie sich die Anwendungs-ID und den Client-Schlüssel. Diese werden für die Konfiguration der Flutter-App benötigt.
1.3. Definieren Sie Ihre Datenmodelle
Wir werden die folgenden Klassen in Back4App erstellen:
Benutzer (Standard)
Übersetzung
Sprache
Phrase
WörterbuchEintrag
1.3.1. Erstellen Sie die Übersetzungsklasse
Gehe zu Datenbank > Browser.
Klicke auf "Klasse erstellen".
Wähle "Benutzerdefiniert" und nenne es Übersetzung.
Klicke auf "Klasse erstellen".
Füge die folgenden Spalten zu Übersetzung:
Benutzer (Pointer<_User>): Zeigt auf das Benutzer-Objekt.
Quellsprache (String): Quellsprache-Code.
Zielsprache (String): Zielsprachencode.
Quelltext (String): Der originale Text zur Übersetzung.
übersetzterText (String): Der übersetzte Text.
Übersetzungsart (String): Art der Übersetzung (Sprache, Text, Bild).
Zeitstempel (Datum/Uhrzeit).
1.3.2. Erstellen Sie die Sprachklasse
Wiederholen Sie die Schritte, um eine neue Klasse mit dem Namen Sprache zu erstellen.
Fügen Sie die folgenden Spalten zu Sprache:
name (String): Der Name der Sprache (z.B. "Englisch").
code (String): ISO-Code der Sprache (z.B. "en").
flagIconUrl (String): URL des Flaggenbildes, das die Sprache darstellt.
1.3.3. Erstellen Sie die Phrasenklasse
Erstellen Sie eine Klasse mit dem Namen Phrase.
Fügen Sie die folgenden Spalten hinzu Phrase:
Kategorie (String): Die Kategorie der Phrase (z.B. "Grüße").
Quellsprache (String): Quellsprache Code.
Zielsprache (String): Zielsprachencode.
Quelltext (String): Die ursprüngliche Phrase.
übersetzterText (String): Die übersetzte Phrase.
1.3.4. Erstellen Sie die DictionaryEntry-Klasse
Erstellen Sie eine Klasse mit dem Namen DictionaryEntry.
Fügen Sie die folgenden Spalten hinzu DictionaryEntry:
Wort (String): Das definierte Wort.
Sprache (String): Die Sprache des Wortes.
Definition (String): Die Definition des Wortes.
Beispiele (Array): Beispielsätze mit dem Wort.
1.4. Klassenebene Berechtigungen festlegen
Stellen Sie sicher, dass nur authentifizierte Benutzer auf ihre eigenen Daten zugreifen können:
Für jede Klasse gehen Sie zu Sicherheit > Klassenebene Berechtigungen (CLP).
Setzen Sie die CLP, um Lese-/Schreibzugriff nur für authentifizierte Benutzer zu erlauben.
Schritt 2 — Einrichten Ihres Flutter-Projekts
In diesem Schritt richten Sie ein Flutter-Projekt ein und konfigurieren es, um eine Verbindung zu Back4App herzustellen.
2.1. Erstellen Sie ein neues Flutter-Projekt
Öffnen Sie Ihr Terminal und führen Sie aus:
Bash
flutter create ai_voice_translator
flutter create ai_voice_translator
﻿
Navigieren Sie zum Projektverzeichnis:
Bash
cd ai_voice_translator
cd ai_voice_translator
﻿
2.2. Fügen Sie erforderliche Abhängigkeiten hinzu
Öffnen Sie pubspec.yaml und fügen Sie die folgenden Abhängigkeiten hinzu:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  flutter_tts: ^3.3.1
  speech_to_text: ^5.3.0
  google_ml_kit: ^0.7.3
  provider: ^6.0.2
  http: ^0.13.4
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  flutter_tts: ^3.3.1
  speech_to_text: ^5.3.0
  google_ml_kit: ^0.7.3
  provider: ^6.0.2
  http: ^0.13.4
﻿
Führen Sie flutter pub get aus, um die Pakete zu installieren.
2.3. Initialisieren Sie Parse in Ihrer Flutter-App
Erstellen Sie eine neue Datei lib/config/back4app_config.dart:
Dart
// lib/config/back4app_config.dart
const String keyApplicationId = 'YOUR_APPLICATION_ID';
const String keyClientKey = 'YOUR_CLIENT_KEY';
const String keyParseServerUrl = 'https://parseapi.back4app.com';
// lib/config/back4app_config.dart
const String keyApplicationId = 'YOUR_APPLICATION_ID';
const String keyClientKey = 'YOUR_CLIENT_KEY';
const String keyParseServerUrl = 'https://parseapi.back4app.com';
﻿
Ersetzen Sie 'YOUR_APPLICATION_ID' und 'YOUR_CLIENT_KEY' mit den Schlüsseln von Back4App.
In lib/main.dart, initialisiere Parse:
Dart
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'config/back4app_config.dart';
import 'app.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'config/back4app_config.dart';
import 'app.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}
﻿
Erstelle lib/app.dart:
Dart
// lib/app.dart
import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AI Voice Translator',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeScreen(),
    );
  }
}
// lib/app.dart
import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AI Voice Translator',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeScreen(),
    );
  }
}
﻿
Schritt 3 — Implementierung der Textübersetzung
Die erste Funktion, die implementiert werden soll, ist die grundlegende Textübersetzung.
3.1. Übersetzungsdienst konfigurieren
Erstelle lib/services/translation_service.dart um Interaktionen mit einer Übersetzungs-API (Google Cloud Translation API oder DeepL) zu verwalten.
Dart
// lib/services/translation_service.dart
import 'dart:convert';
import 'package:http/http.dart' as http;

class TranslationService {
  final String apiKey = 'YOUR_TRANSLATION_API_KEY';
  final String apiUrl = 'https://translation.googleapis.com/language/translate/v2';

  Future<String> translateText(String text, String sourceLang, String targetLang) async {
    final response = await http.post(
      Uri.parse(apiUrl),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer $apiKey',
      },
      body: jsonEncode({
        'q': text,
        'source': sourceLang,
        'target': targetLang,
        'format': 'text',
      }),
    );

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      return data['data']['translations'][0]['translatedText'];
    } else {
      throw Exception('Translation failed');
    }
  }
}
// lib/services/translation_service.dart
import 'dart:convert';
import 'package:http/http.dart' as http;

class TranslationService {
  final String apiKey = 'YOUR_TRANSLATION_API_KEY';
  final String apiUrl = 'https://translation.googleapis.com/language/translate/v2';

  Future<String> translateText(String text, String sourceLang, String targetLang) async {
    final response = await http.post(
      Uri.parse(apiUrl),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer $apiKey',
      },
      body: jsonEncode({
        'q': text,
        'source': sourceLang,
        'target': targetLang,
        'format': 'text',
      }),
    );

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      return data['data']['translations'][0]['translatedText'];
    } else {
      throw Exception('Translation failed');
    }
  }
}
﻿
3.2. Sprachmodell implementieren
Erstelle lib/models/language.dart um unterstützte Sprachen darzustellen.
Dart
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
﻿
3.3. Erstellen Sie den Bildschirm für die Textübersetzung
Erstellen Sie lib/screens/text_translation_screen.dart um die Texteingabe und Übersetzung zu verarbeiten:
Dart
// lib/screens/text_translation_screen.dart
import 'package:flutter/material.dart';
import '../services/translation_service.dart';
import '../models/language.dart';

class TextTranslationScreen extends StatefulWidget {
  @override
  _TextTranslationScreenState createState() => _TextTranslationScreenState();
}

class _TextTranslationScreenState extends State<TextTranslationScreen> {
  final TranslationService translationService = TranslationService();
  final TextEditingController textController = TextEditingController();
  String translatedText = '';
  Language? sourceLanguage;
  Language? targetLanguage;

  Future<void> translate() async {
    if (sourceLanguage != null && targetLanguage != null) {
      final translation = await translationService.translateText(
        textController.text,
        sourceLanguage!.code,
        targetLanguage!.code,
      );
      setState(() {
        translatedText =

 translation;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Translation'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: textController,
              decoration: InputDecoration(labelText: 'Enter text to translate'),
            ),
            SizedBox(height: 10),
            // Implement language selectors here
            ElevatedButton(onPressed: translate, child: Text('Translate')),
            SizedBox(height: 20),
            Text(translatedText),
          ],
        ),
      ),
    );
  }
}
// lib/screens/text_translation_screen.dart
import 'package:flutter/material.dart';
import '../services/translation_service.dart';
import '../models/language.dart';

class TextTranslationScreen extends StatefulWidget {
  @override
  _TextTranslationScreenState createState() => _TextTranslationScreenState();
}

class _TextTranslationScreenState extends State<TextTranslationScreen> {
  final TranslationService translationService = TranslationService();
  final TextEditingController textController = TextEditingController();
  String translatedText = '';
  Language? sourceLanguage;
  Language? targetLanguage;

  Future<void> translate() async {
    if (sourceLanguage != null && targetLanguage != null) {
      final translation = await translationService.translateText(
        textController.text,
        sourceLanguage!.code,
        targetLanguage!.code,
      );
      setState(() {
        translatedText =

 translation;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Translation'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: textController,
              decoration: InputDecoration(labelText: 'Enter text to translate'),
            ),
            SizedBox(height: 10),
            // Implement language selectors here
            ElevatedButton(onPressed: translate, child: Text('Translate')),
            SizedBox(height: 20),
            Text(translatedText),
          ],
        ),
      ),
    );
  }
}
﻿
Schritt 4 — Implementierung der Sprachübersetzung
In diesem Schritt fügen Sie die Sprachübersetzung hinzu, indem Sie Spracherkennung und Text-zu-Sprache Funktionen integrieren.
4.1. Sprachsteuerung einrichten
Erstellen Sie lib/services/speech_recognition_service.dart mit dem speech_to_text Paket:
Dart
// lib/services/speech_recognition_service.dart
import 'package:speech_to_text/speech_to_text.dart' as stt;

class SpeechRecognitionService {
  final stt.SpeechToText _speech = stt.SpeechToText();

  Future<String?> listenForSpeech() async {
    bool available = await _speech.initialize();
    if (available) {
      await _speech.listen();
      return await Future.delayed(Duration(seconds: 5), () {
        _speech.stop();
        return _speech.lastRecognizedWords;
      });
    }
    return null;
  }
}
// lib/services/speech_recognition_service.dart
import 'package:speech_to_text/speech_to_text.dart' as stt;

class SpeechRecognitionService {
  final stt.SpeechToText _speech = stt.SpeechToText();

  Future<String?> listenForSpeech() async {
    bool available = await _speech.initialize();
    if (available) {
      await _speech.listen();
      return await Future.delayed(Duration(seconds: 5), () {
        _speech.stop();
        return _speech.lastRecognizedWords;
      });
    }
    return null;
  }
}
﻿
4.2. Text-to-Speech (TTS) hinzufügen
Erstellen Sie lib/services/tts_service.dart mit dem flutter_tts Paket:
Dart
// lib/services/tts_service.dart
import 'package:flutter_tts/flutter_tts.dart';

class TtsService {
  final FlutterTts _flutterTts = FlutterTts();

  Future<void> speak(String text, String languageCode) async {
    await _flutterTts.setLanguage(languageCode);
    await _flutterTts.speak(text);
  }
}
// lib/services/tts_service.dart
import 'package:flutter_tts/flutter_tts.dart';

class TtsService {
  final FlutterTts _flutterTts = FlutterTts();

  Future<void> speak(String text, String languageCode) async {
    await _flutterTts.setLanguage(languageCode);
    await _flutterTts.speak(text);
  }
}
﻿
4.3. Erstellen Sie den Sprachübersetzungsbildschirm
Erstellen Sie lib/screens/voice_translation_screen.dart um die Sprachübersetzung zu behandeln:
Dart
// lib/screens/voice_translation_screen.dart
import 'package:flutter/material.dart';
import '../services/speech_recognition_service.dart';
import '../services/translation_service.dart';
import '../services/tts_service.dart';

class VoiceTranslationScreen extends StatefulWidget {
  @override
  _VoiceTranslationScreenState createState() => _VoiceTranslationScreenState();
}

class _VoiceTranslationScreenState extends State<VoiceTranslationScreen> {
  final SpeechRecognitionService speechRecognitionService = SpeechRecognitionService();
  final TranslationService translationService = TranslationService();
  final TtsService ttsService = TtsService();

  String? recognizedText;
  String? translatedText;

  Future<void> translateSpeech() async {
    recognizedText = await speechRecognitionService.listenForSpeech();
    if (recognizedText != null) {
      translatedText = await translationService.translateText(
        recognizedText!,
        'en', // Hardcoded source language (English)
        'es', // Hardcoded target language (Spanish)
      );
      setState(() {});
      ttsService.speak(translatedText!, 'es');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Voice Translation'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (recognizedText != null) Text('Recognized: $recognizedText'),
            if (translatedText != null) Text('Translated: $translatedText'),
            SizedBox(height: 20),
            ElevatedButton(onPressed: translateSpeech, child: Text('Start Voice Translation')),
          ],
        ),
      ),
    );
  }
}
// lib/screens/voice_translation_screen.dart
import 'package:flutter/material.dart';
import '../services/speech_recognition_service.dart';
import '../services/translation_service.dart';
import '../services/tts_service.dart';

class VoiceTranslationScreen extends StatefulWidget {
  @override
  _VoiceTranslationScreenState createState() => _VoiceTranslationScreenState();
}

class _VoiceTranslationScreenState extends State<VoiceTranslationScreen> {
  final SpeechRecognitionService speechRecognitionService = SpeechRecognitionService();
  final TranslationService translationService = TranslationService();
  final TtsService ttsService = TtsService();

  String? recognizedText;
  String? translatedText;

  Future<void> translateSpeech() async {
    recognizedText = await speechRecognitionService.listenForSpeech();
    if (recognizedText != null) {
      translatedText = await translationService.translateText(
        recognizedText!,
        'en', // Hardcoded source language (English)
        'es', // Hardcoded target language (Spanish)
      );
      setState(() {});
      ttsService.speak(translatedText!, 'es');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Voice Translation'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (recognizedText != null) Text('Recognized: $recognizedText'),
            if (translatedText != null) Text('Translated: $translatedText'),
            SizedBox(height: 20),
            ElevatedButton(onPressed: translateSpeech, child: Text('Start Voice Translation')),
          ],
        ),
      ),
    );
  }
}
﻿
Schritt 5 — Implementierung der Bildübersetzung (OCR)
5.1. OCR-Dienst einrichten
Erstellen Sie lib/services/ocr_service.dart mit dem google_ml_kit Paket:
Dart
// lib/services/ocr_service.dart
import 'package:google_ml_kit/google_ml_kit.dart';

class OcrService {
  final textRecognizer = GoogleMlKit.vision.textRecognizer();

  Future<String?> extractTextFromImage(String imagePath) async {
    final inputImage = InputImage.fromFilePath(imagePath);
    final recognizedText = await textRecognizer.processImage(inputImage);
    return recognizedText.text;
  }
}
// lib/services/ocr_service.dart
import 'package:google_ml_kit/google_ml_kit.dart';

class OcrService {
  final textRecognizer = GoogleMlKit.vision.textRecognizer();

  Future<String?> extractTextFromImage(String imagePath) async {
    final inputImage = InputImage.fromFilePath(imagePath);
    final recognizedText = await textRecognizer.processImage(inputImage);
    return recognizedText.text;
  }
}
﻿
5.2. Erstellen Sie den Bildschirm für die Bildübersetzung
Erstellen Sie lib/screens/image_translation_screen.dart um die Bildeingabe und OCR zu verarbeiten:
Dart
// lib/screens/image_translation_screen.dart
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import '../services/ocr_service.dart';
import '../services/translation_service.dart';

class ImageTranslationScreen extends StatefulWidget {
  @override
  _ImageTranslationScreenState createState() => _ImageTranslationScreenState();
}

class _ImageTranslationScreenState extends State<ImageTranslationScreen> {
  final OcrService ocrService = OcrService();
  final TranslationService translationService = TranslationService();
  String? extractedText;
  String? translatedText;

  Future<void> pickAndTranslateImage() async {
    final picker = ImagePicker();
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      extractedText = await ocrService.extractTextFromImage(pickedFile.path);
      if (extractedText != null) {
        translatedText = await translationService.translateText(extractedText!, 'en', 'es');
        setState(() {});
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Translation'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (extractedText != null) Text('Extracted: $extractedText'),
            if (translatedText != null) Text('Translated: $translatedText'),
            SizedBox(height: 20),
            ElevatedButton(onPressed: pickAndTranslateImage, child: Text('Pick Image for Translation')),
          ],
        ),
      ),
    );
  }
}
// lib/screens/image_translation_screen.dart
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import '../services/ocr_service.dart';
import '../services/translation_service.dart';

class ImageTranslationScreen extends StatefulWidget {
  @override
  _ImageTranslationScreenState createState() => _ImageTranslationScreenState();
}

class _ImageTranslationScreenState extends State<ImageTranslationScreen> {
  final OcrService ocrService = OcrService();
  final TranslationService translationService = TranslationService();
  String? extractedText;
  String? translatedText;

  Future<void> pickAndTranslateImage() async {
    final picker = ImagePicker();
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      extractedText = await ocrService.extractTextFromImage(pickedFile.path);
      if (extractedText != null) {
        translatedText = await translationService.translateText(extractedText!, 'en', 'es');
        setState(() {});
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Translation'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (extractedText != null) Text('Extracted: $extractedText'),
            if (translatedText != null) Text('Translated: $translatedText'),
            SizedBox(height: 20),
            ElevatedButton(onPressed: pickAndTranslateImage, child: Text('Pick Image for Translation')),
          ],
        ),
      ),
    );
  }
}
﻿
Schritt 6 — Übersetzungshistorie und Phrasebuch
In diesem Schritt implementieren Sie das Speichern der Übersetzungshistorie und das Verwalten eines Phrasebuchs.
6.1. Übersetzungshistorie speichern
Aktualisieren Sie lib/services/translation_service.dart um die Übersetzungshistorie in Back4App zu speichern:
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/translation.dart';

class TranslationService {
  // Existing translation logic

  Future<void> saveTranslation(Translation translation) async {
    final translationObject = ParseObject('Translation')
      ..set('user', ParseUser.currentUser)
      ..set('sourceLanguage', translation.sourceLanguage)
      ..set('targetLanguage', translation.targetLanguage)
      ..set('sourceText', translation.sourceText)
      ..set('translatedText', translation.translatedText)
      ..set('translationType', translation.type);
    await translationObject.save();
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/translation.dart';

class TranslationService {
  // Existing translation logic

  Future<void> saveTranslation(Translation translation) async {
    final translationObject = ParseObject('Translation')
      ..set('user', ParseUser.currentUser)
      ..set('sourceLanguage', translation.sourceLanguage)
      ..set('targetLanguage', translation.targetLanguage)
      ..set('sourceText', translation.sourceText)
      ..set('translatedText', translation.translatedText)
      ..set('translationType', translation.type);
    await translationObject.save();
  }
}
﻿
6.2. Implementierung des Phrasebuchs
Erstellen Sie lib/screens/phrase_book_screen.dart um gängige Phrasen zu verwalten:
Dart
// lib/screens/phrase_book_screen.dart
import 'package:flutter/material.dart';
import '../models/phrase.dart';
import '../services/phrase_service.dart';

class PhraseBookScreen extends StatelessWidget {
  final PhraseService phraseService = PhraseService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phrase Book'),
      ),
      body: FutureBuilder<List<Phrase>>(
        future: phraseService.fetchPhrases(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          }

          if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return Center(child: Text('No phrases found.'));
          }

          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              final phrase = snapshot.data![index];
              return ListTile(
                title: Text('${phrase.sourceText} → ${phrase.translatedText}'),
                subtitle: Text('Category: ${phrase.category}'),
              );
            },
          );
        },
      ),
    );
  }
}
// lib/screens/phrase_book_screen.dart
import 'package:flutter/material.dart';
import '../models/phrase.dart';
import '../services/phrase_service.dart';

class PhraseBookScreen extends StatelessWidget {
  final PhraseService phraseService = PhraseService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phrase Book'),
      ),
      body: FutureBuilder<List<Phrase>>(
        future: phraseService.fetchPhrases(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          }

          if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return Center(child: Text('No phrases found.'));
          }

          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              final phrase = snapshot.data![index];
              return ListTile(
                title: Text('${phrase.sourceText} → ${phrase.translatedText}'),
                subtitle: Text('Category: ${phrase.category}'),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
Fazit
Indem Sie dieses Tutorial befolgen, haben Sie eine funktionsreiche AI Voice Translator App mit Flutter und Back4App. Sie haben implementiert:
Grundlegende und erweiterte Textübersetzung.
Sprach-zu-Sprach-Übersetzung mit Spracherkennung und Text-zu-Sprache.
Bild-zu-Text-Übersetzung mit OCR.
Verwaltung der Übersetzungshistorie und ein Wörterbuch für gängige Ausdrücke.
Nächste Schritte
UI/UX verbessern: Verbessern Sie die Benutzeroberfläche der App für ein reibungsloseres Benutzererlebnis.
Fehlerbehandlung verbessern: Fügen Sie Fehlerbehandlung und Fallback-Mechanismen für API-Fehler hinzu.
Offline-Modus implementieren: Cachen Sie gängige Übersetzungen, Phrasen und die Historie für den Offline-Zugriff.
Die App bereitstellen: Bereiten Sie die App für die Bereitstellung auf iOS- und Android-Plattformen vor.
﻿
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Erstellung einer E-Commerce-App mit Flutter, Back4App und Stripe-Integration über Cloud Code
ALS NÄCHSTES
Erstellen einer sozialen Netzwerk-App mit Flutter und Back4App