lib/features/learning/learning_unit_page.dartDart
import 'package:flutter/material.dart';
import '../../core/localization/app_localizations.dart';
import '../../core/theme/app_colors.dart';
import '../../data/app_data_scope.dart';
import '../../models/learning_unit.dart';
import '../../services/guide_audio_service.dart';
import '../../services/learning_progress_service.dart';
import '../../services/analytics_service.dart';
import '../poi/poi_detail_page.dart';
class LearningUnitPage extends StatefulWidget {
const LearningUnitPage({super.key, required this.unit});
final LearningUnit unit;
@override
State<LearningUnitPage> createState() => _LearningUnitPageState();
}
class _LearningUnitPageState extends State<LearningUnitPage> {
final _progress = LearningProgressService();
final _audio = GuideAudioService();
bool _showAnswer = false;
bool _completed = false;
bool _audioBusy = false;
@override
void initState() {
super.initState();
AnalyticsService.instance.track('learning_unit_view', properties: {
'unit_id': widget.unit.id,
'course_id': widget.unit.courseId
});
WidgetsBinding.instance.addPostFrameCallback((_) => _prewarmPrimaryAudio());
}
Future<void> _prewarmPrimaryAudio() async {
final phraseAudio = widget.unit.audio?.targetPhrase;
final request = phraseAudio?.requestFor('normal') ??
LearningTtsRequest(
text: widget.unit.phraseDe,
languageCode: 'de',
variant: 'normal',
);
await _audio.prewarm(
text: request.text,
languageCode: request.languageCode,
cloudVariant: request.variant,
);
}
Future<void> _complete() async {
await _progress.complete(widget.unit.id);
await AnalyticsService.instance.track('learning_unit_complete',
properties: {
'unit_id': widget.unit.id,
'course_id': widget.unit.courseId
});
if (mounted) setState(() => _completed = true);
}
Future<void> _speakRequest(LearningTtsRequest request) async {
if (request.text.trim().isEmpty || _audioBusy) return;
setState(() => _audioBusy = true);
await AnalyticsService.instance.track('learning_tts_start', properties: {
'unit_id': widget.unit.id,
'course_id': widget.unit.courseId,
'variant': request.variant,
'tts_language': request.languageCode
});
try {
await _audio.speak(
text: request.text,
languageCode: request.languageCode,
cloudVariant: request.variant,
deviceSpeechRate: request.variant == 'slow' ? 0.34 : 0.45,
);
} finally {
if (mounted) setState(() => _audioBusy = false);
}
}
LearningTtsRequest _requestFor(
LearningAudioItem? item,
String variant, {
required String fallbackText,
required String fallbackLanguage,
}) {
if (item != null) return item.requestFor(variant);
return LearningTtsRequest(
text: fallbackText,
languageCode: fallbackLanguage,
variant: variant,
);
}
@override
void dispose() {
_audio.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final u = widget.unit;
final l10n = AppLocalizations.of(context);
final uiLang = Localizations.localeOf(context).languageCode;
final phraseAudio = u.audio?.targetPhrase;
final helpAudio = u.audio?.help;
final explanationAudio = u.audio?.explanation;
final hasSlow = phraseAudio?.variants.contains('slow') ?? true;
final phraseNormal = _requestFor(
phraseAudio,
'normal',
fallbackText: u.phraseDe,
fallbackLanguage: 'de',
);
final phraseSlow = _requestFor(
phraseAudio,
'slow',
fallbackText: u.phraseDe,
fallbackLanguage: 'de',
);
final helpNormal = _requestFor(
helpAudio,
'normal',
fallbackText: u.help,
fallbackLanguage: u.resolvedLanguage ?? u.language ?? uiLang,
);
final explanationNormal = _requestFor(
explanationAudio,
'normal',
fallbackText: u.explanation,
fallbackLanguage: u.resolvedLanguage ?? u.language ?? uiLang,
);
return Scaffold(
appBar: AppBar(title: Text(u.title)),
body: ListView(
padding: const EdgeInsets.all(20),
children: [
Wrap(spacing: 8, runSpacing: 8, children: [
Chip(label: Text(u.level)),
Chip(label: Text(u.kind))
]),
const SizedBox(height: 18),
Text(
u.phraseDe,
style: Theme.of(context)
.textTheme
.headlineMedium
?.copyWith(fontWeight: FontWeight.w900),
),
const SizedBox(height: 10),
Wrap(
spacing: 8,
runSpacing: 8,
children: [
FilledButton.tonalIcon(
onPressed:
_audioBusy ? null : () => _speakRequest(phraseNormal),
icon: const Icon(Icons.volume_up_rounded),
label: Text(l10n.t('learningHearGerman')),
),
if (hasSlow)
OutlinedButton.icon(
onPressed:
_audioBusy ? null : () => _speakRequest(phraseSlow),
icon: const Icon(Icons.slow_motion_video_rounded),
label: Text(l10n.t('learningHearSlow')),
),
if (_audioBusy)
OutlinedButton.icon(
onPressed: () async {
await _audio.stop();
if (mounted) setState(() => _audioBusy = false);
},
icon: const Icon(Icons.stop_rounded),
label: Text(l10n.t('learningStopAudio')),
),
],
),
const SizedBox(height: 14),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Text(
u.help,
style: Theme.of(context)
.textTheme
.titleMedium
?.copyWith(color: AppColors.mutedInk),
),
),
if (u.help.trim().isNotEmpty)
IconButton(
tooltip: l10n.t('learningHearHelp'),
onPressed:
_audioBusy ? null : () => _speakRequest(helpNormal),
icon: const Icon(Icons.record_voice_over_rounded),
),
],
),
if (u.pronunciation.isNotEmpty) ...[
const SizedBox(height: 8),
Text(u.pronunciation,
style: const TextStyle(fontStyle: FontStyle.italic)),
],
const SizedBox(height: 22),
_Section(title: l10n.t('learningWhyThisHelps'), body: u.explanation),
if (u.explanation.trim().isNotEmpty) ...[
const SizedBox(height: 8),
Align(
alignment: Alignment.centerLeft,
child: TextButton.icon(
onPressed:
_audioBusy ? null : () => _speakRequest(explanationNormal),
icon: const Icon(Icons.record_voice_over_rounded),
label: Text(l10n.t('learningHearExplanation')),
),
),
],
const SizedBox(height: 14),
_Section(
title: l10n.t('learningChallenge'),
body: u.challenge,
icon: Icons.flag_rounded),
if (u.quizQuestion != null) ...[
const SizedBox(height: 14),
Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(l10n.t('learningQuickCheck'),
style: const TextStyle(fontWeight: FontWeight.w900)),
const SizedBox(height: 8),
Text(u.quizQuestion!),
const SizedBox(height: 10),
if (_showAnswer)
Text(u.quizAnswer ?? '',
style: const TextStyle(fontWeight: FontWeight.w800))
else
TextButton(
onPressed: () {
AnalyticsService.instance
.track('learning_quiz_reveal', properties: {
'unit_id': widget.unit.id,
'course_id': widget.unit.courseId
});
setState(() => _showAnswer = true);
},
child: Text(l10n.t('learningShowAnswer')),
),
],
),
),
),
],
if (u.location?.poiId != null) ...[
const SizedBox(height: 14),
OutlinedButton.icon(
icon: const Icon(Icons.place_outlined),
label: Text(u.location?.poiTitle ?? l10n.t('learningOpenPlace')),
onPressed: () {
final store = AppDataScope.of(context);
final id = u.location!.poiId!;
final matches = store.pois.where((p) => p.id == id);
if (matches.isNotEmpty) {
Navigator.of(context).push(MaterialPageRoute(
builder: (_) => PoiDetailPage(poi: matches.first)));
}
},
),
],
const SizedBox(height: 26),
FilledButton.icon(
onPressed: _completed ? null : _complete,
icon: Icon(_completed ? Icons.check : Icons.done_rounded),
label: Text(_completed
? l10n.t('learningCompleted')
: l10n.t('learningMarkCompleted')),
),
],
),
);
}
}
class _Section extends StatelessWidget {
const _Section(
{required this.title,
required this.body,
this.icon = Icons.lightbulb_outline});
final String title;
final String body;
final IconData icon;
@override
Widget build(BuildContext context) => Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColors.softRed, borderRadius: BorderRadius.circular(18)),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
Icon(icon, color: AppColors.heartRed),
const SizedBox(width: 8),
Expanded(
child: Text(title,
style: const TextStyle(fontWeight: FontWeight.w900))),
]),
const SizedBox(height: 8),
Text(body),
]),
);
}