Flutter Templates
Comment créer une application de traduction vocale IA en utilisant Flutter et Back4App

30min
Introduction
Dans ce tutoriel, vous apprendrez à créer une application de traduction vocale AI en utilisant Flutter comme framework frontend et Back4App comme service backend. L'application permettra aux utilisateurs de traduire la parole, le texte et les images dans plusieurs langues. Elle comportera des fonctionnalités de traduction alimentées par l'IA, de reconnaissance optique de caractères (OCR) et de reconnaissance vocale. À la fin de ce tutoriel, vous aurez construit une application capable de gérer des traductions en temps réel et de stocker l'historique sur Back4App pour une utilisation future.
Prérequis
Pour compléter ce tutoriel, vous aurez besoin de :
Un compte Back4App. Inscrivez-vous pour un compte gratuit sur Back4App.
Flutter SDK installé sur votre machine locale. Suivez le guide d'installation de Flutter.
Connaissances de base en Dart et Flutter. Si vous êtes nouveau sur Flutter, consultez la documentation de Flutter avant de continuer.
Un compte avec un fournisseur d'API de traduction comme Google Cloud Translation ou DeepL.
Familiarité avec les API REST et la programmation asynchrone en Dart.
Étape 1 — Configuration de votre backend Back4App
Dans cette étape, vous allez configurer une application Back4App, définir les modèles de données et configurer le backend pour stocker l'historique des traductions, les langues et les données des utilisateurs.
1.1. Créer une nouvelle application sur Back4App
Connectez-vous à votre tableau de bord Back4App.
Cliquez sur "Créer une nouvelle application".
Entrez un nom d'application (par exemple, "Traducteur Vocal IA") et sélectionnez votre icône d'application.
Choisissez votre emplacement de serveur si cela vous est demandé.
Cliquez sur "Créer".
1.2. Récupérer les clés de l'application
Accédez à Paramètres de l'application > Sécurité et clés dans le tableau de bord de votre application.
Notez l'ID de l'application et la clé client. Ceux-ci seront nécessaires pour la configuration de l'application Flutter.
1.3. Définir vos modèles de données
Nous allons créer les classes suivantes dans Back4App :
Utilisateur (par défaut)
Traduction
Langue
Phrase
EntréeDuDictionnaire
1.3.1. Créer la classe de traduction
Allez à Base de données > Navigateur.
Cliquez sur "Créer une classe".
Choisissez "Personnalisé" et nommez-le Traduction.
Cliquez sur "Créer une classe".
Ajoutez les colonnes suivantes à Traduction:
utilisateur (Pointer<_User>): Pointe vers l'objet Utilisateur.
langueSource (String): Code de la langue source.
langueCible (String): Code de la langue cible.
texteSource (String): Le texte original à traduire.
texteTraduit (String): Le texte traduit.
typeDeTraduction (String): Type de traduction (voix, texte, image).
horodatage (DateTime).
1.3.2. Créer la classe Langue
Répétez les étapes pour créer une nouvelle classe nommée Langue.
Ajoutez les colonnes suivantes à Langue:
nom (String): Le nom de la langue (par exemple, "Anglais").
code (String): Code ISO de la langue (par exemple, "en").
flagIconUrl (String): URL de l'image du drapeau représentant la langue.
1.3.3. Créer la classe Phrase
Créez une classe nommée Phrase.
Ajoutez les colonnes suivantes à Phrase:
catégorie (Chaîne) : La catégorie de la phrase (par exemple, "Salutations").
langueSource (Chaîne) : Code de la langue source.
langueCible (Chaîne) : Code de la langue cible.
texteSource (Chaîne) : La phrase originale.
texteTraduit (Chaîne) : La phrase traduite.
1.3.4. Créer la classe DictionaryEntry
Créer une classe nommée DictionaryEntry.
Ajoutez les colonnes suivantes à DictionaryEntry:
mot (Chaîne) : Le mot étant défini.
langue (Chaîne) : La langue du mot.
définition (Chaîne) : La définition du mot.
exemples (Tableau) : Phrases d'exemple utilisant le mot.
1.4. Définir les autorisations au niveau de la classe
Assurez-vous que seuls les utilisateurs authentifiés peuvent accéder à leurs propres données :
Pour chaque classe, allez à Sécurité > Autorisations au niveau de la classe (CLP).
Définissez le CLP pour permettre l'accès en lecture/écriture uniquement aux utilisateurs authentifiés.
Étape 2 — Initialiser votre projet Flutter
Dans cette étape, vous allez configurer un projet Flutter et le configurer pour se connecter à Back4App.
2.1. Créer un nouveau projet Flutter
Ouvrez votre terminal et exécutez :
Bash
flutter create ai_voice_translator
flutter create ai_voice_translator
﻿
Naviguez vers le répertoire du projet :
Bash
cd ai_voice_translator
cd ai_voice_translator
﻿
2.2. Ajouter les dépendances requises
Ouvrez pubspec.yaml et ajoutez les dépendances suivantes :
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
﻿
Exécutez flutter pub get pour installer les paquets.
2.3. Initialiser Parse dans votre application Flutter
Créez un nouveau fichier 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';
﻿
Remplacez 'VOTRE_ID_APPLICATION' et 'VOTRE_CLE_CLIENT' par les clés de Back4App.
In lib/main.dart, initialize 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());
}
﻿
Create 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(),
    );
  }
}
﻿
Step 3 — Implementing Text Translation
The first feature to implement is basic text translation.
3.1. Configure Translation Service
Create lib/services/translation_service.dart to manage interactions with a translation API (Google Cloud Translation API or DeepL).
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. Implement Language Model
Create lib/models/language.dart to represent supported languages.
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. Créer l'écran de traduction de texte
Créer lib/screens/text_translation_screen.dart pour gérer l'entrée de texte et la traduction :
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),
          ],
        ),
      ),
    );
  }
}
﻿
Étape 4 — Mise en œuvre de la traduction vocale
Dans cette étape, vous ajouterez la traduction vocale en intégrant la reconnaissance vocale et la synthèse vocale fonctionnalités.
4.1. Configurer la reconnaissance vocale
Créer lib/services/speech_recognition_service.dart en utilisant le speech_to_text paquet :
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. Ajouter la synthèse vocale (TTS)
Créer lib/services/tts_service.dart en utilisant le flutter_tts paquet :
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. Créer l'écran de traduction vocale
Créer lib/screens/voice_translation_screen.dart pour gérer la traduction vocale :
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')),
          ],
        ),
      ),
    );
  }
}
﻿
Étape 5 — Mise en œuvre de la Traduction d'Image (OCR)
5.1. Configurer le Service OCR
Créer lib/services/ocr_service.dart en utilisant le google_ml_kit paquet :
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. Créer l'écran de traduction d'image
Créer lib/screens/image_translation_screen.dart pour gérer l'entrée d'image et l'OCR :
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')),
          ],
        ),
      ),
    );
  }
}
﻿
Étape 6 — Historique des traductions et livre de phrases
Dans cette étape, vous allez implémenter la sauvegarde de l'historique des traductions et la gestion d'un livre de phrases.
6.1. Sauvegarder l'historique des traductions
Mettre à jour lib/services/translation_service.dart pour enregistrer l'historique des traductions dans Back4App:
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. Implémenter le carnet de phrases
Créer lib/screens/phrase_book_screen.dart pour gérer les phrases courantes:
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}'),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
Conclusion
En suivant ce tutoriel, vous avez construit une application AI Voice Translator App riche en fonctionnalités avec Flutter et Back4App. Vous avez implémenté :
Traduction de texte de base et avancée.
Traduction voix à voix utilisant speech recognition et text-to-speech.
Traduction image à texte utilisant OCR.
Gestion de l'historique des traductions et un livre de phrases pour les expressions courantes.
Prochaines étapes
Améliorer l'UI/UX: Améliorer l'interface de l'application pour une expérience utilisateur plus fluide.
Améliorer la gestion des erreurs: Ajouter une gestion des erreurs et des mécanismes de secours pour les échecs d'API.
Implémenter le mode hors ligne: Mettre en cache les traductions, phrases et historiques courants pour un accès hors ligne.
Déployer l'application: Préparer l'application pour le déploiement sur les plateformes iOS et Android.
﻿
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Créer une application de commerce électronique avec Flutter, Back4App et intégration de Stripe via Cloud Code
Créer une application de réseau social avec Flutter et Back4App