lib/features/learning/language_learning_tours_page.dartDart
import 'package:flutter/material.dart';
import '../../core/localization/app_localizations.dart';
import '../../core/theme/app_colors.dart';
import '../../models/language_learning_tour.dart';
import '../../models/learning_unit.dart';
import '../../repositories/learning_repository.dart';
import '../../services/analytics_service.dart';
import 'language_learning_tour_detail_page.dart';
class LanguageLearningToursPage extends StatefulWidget {
const LanguageLearningToursPage({super.key});
@override
State<LanguageLearningToursPage> createState() =>
_LanguageLearningToursPageState();
}
class _LanguageLearningToursPageState extends State<LanguageLearningToursPage> {
@override
void initState() {
super.initState();
AnalyticsService.instance.screenView('learning_tours');
}
final _repo = LearningRepository();
Future<List<LanguageLearningTour>>? _future;
String? _lang;
static const _definitions = <LanguageLearningTourDefinition>[
LanguageLearningTourDefinition(
id: 'arrival-to-center',
titleKey: 'learningTourArrivalTitle',
subtitleKey: 'learningTourArrivalSubtitle',
durationMinutes: 55,
iconName: 'arrival',
stopGroups: [
['sg-welcome', 'sg-bus-stop', 'sg-one-ticket'],
['sg-my-name-is', 'sg-little-german'],
['sg-excuse-me', 'sg-where-is', 'sg-left-right'],
],
),
LanguageLearningTourDefinition(
id: 'everyday-center',
titleKey: 'learningTourEverydayTitle',
subtitleKey: 'learningTourEverydaySubtitle',
durationMinutes: 70,
iconName: 'coffee',
stopGroups: [
['sg-bakery-order', 'sg-menu-please', 'sg-vegetarian'],
['sg-coffee-order', 'sg-with-milk', 'sg-card-cash'],
['sg-weekend'],
['sg-culture'],
],
),
LanguageLearningTourDefinition(
id: 'student-weimar',
titleKey: 'learningTourStudentTitle',
subtitleKey: 'learningTourStudentSubtitle',
durationMinutes: 80,
iconName: 'study',
stopGroups: [
['sg-university', 'sg-where-room', 'sg-mensa', 'sg-wifi'],
['sg-library'],
['sg-meet-people', 'sg-plans-today', 'sg-want-to'],
],
),
];
@override
void didChangeDependencies() {
super.didChangeDependencies();
final lang = Localizations.localeOf(context).languageCode;
if (_future == null || lang != _lang) {
_lang = lang;
_future = _load(lang);
}
}
Future<List<LanguageLearningTour>> _load(String lang) async {
final details = await Future.wait([
_repo.fetchCourse('952', languageCode: lang),
_repo.fetchCourse('953', languageCode: lang),
]);
final bySlug = <String, LearningUnit>{
for (final detail in details)
for (final unit in detail.units) unit.slug: unit,
};
return _definitions
.map((definition) {
final stops = <LanguageLearningTourStop>[];
for (final slugs in definition.stopGroups) {
final units = slugs
.map((slug) => bySlug[slug])
.whereType<LearningUnit>()
.toList();
if (units.isNotEmpty) {
stops.add(LanguageLearningTourStop(units: units));
}
}
return LanguageLearningTour(definition: definition, stops: stops);
})
.where((tour) => tour.stops.length >= 2)
.toList();
}
@override
void dispose() {
_repo.dispose();
super.dispose();
}
IconData _icon(String value) => switch (value) {
'arrival' => Icons.directions_walk_rounded,
'coffee' => Icons.local_cafe_outlined,
'study' => Icons.school_outlined,
_ => Icons.route_rounded,
};
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
return Scaffold(
appBar: AppBar(title: Text(l10n.t('learningToursTitle'))),
body: FutureBuilder<List<LanguageLearningTour>>(
future: _future,
builder: (context, snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
return const Center(child: CircularProgressIndicator());
}
if (snapshot.hasError) {
return Center(
child: Padding(
padding: const EdgeInsets.all(24),
child: Text(l10n.t('learningToursLoadError'),
textAlign: TextAlign.center),
));
}
final tours = snapshot.data ?? const [];
return ListView(
padding: const EdgeInsets.fromLTRB(20, 8, 20, 30),
children: [
Text(l10n.t('learningToursIntro'),
style:
const TextStyle(color: AppColors.mutedInk, height: 1.35)),
const SizedBox(height: 18),
for (final tour in tours) ...[
_TourCard(
tour: tour,
icon: _icon(tour.definition.iconName),
onTap: () => Navigator.of(context).push(MaterialPageRoute(
builder: (_) => LanguageLearningTourDetailPage(tour: tour),
)),
),
const SizedBox(height: 12),
],
],
);
},
),
);
}
}
class _TourCard extends StatelessWidget {
const _TourCard(
{required this.tour, required this.icon, required this.onTap});
final LanguageLearningTour tour;
final IconData icon;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
return Material(
color: Colors.white,
borderRadius: BorderRadius.circular(22),
child: InkWell(
borderRadius: BorderRadius.circular(22),
onTap: onTap,
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: AppColors.line),
borderRadius: BorderRadius.circular(22),
),
child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
CircleAvatar(
radius: 25,
backgroundColor: AppColors.softRed,
child: Icon(icon, color: AppColors.heartRed)),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(l10n.t(tour.definition.titleKey),
style: const TextStyle(
fontSize: 17, fontWeight: FontWeight.w900)),
const SizedBox(height: 5),
Text(l10n.t(tour.definition.subtitleKey),
style: const TextStyle(
color: AppColors.mutedInk, height: 1.3)),
const SizedBox(height: 10),
Wrap(spacing: 8, runSpacing: 6, children: [
_Meta(
icon: Icons.place_outlined,
label: l10n.tf('learningTourStops',
{'n': '${tour.stops.length}'})),
_Meta(
icon: Icons.translate_rounded,
label: l10n.tf('learningTourLessons',
{'n': '${tour.lessonCount}'})),
_Meta(
icon: Icons.schedule_rounded,
label: l10n.tf('learningTourMinutes',
{'n': '${tour.definition.durationMinutes}'})),
]),
])),
const SizedBox(width: 6),
const Padding(
padding: EdgeInsets.only(top: 4),
child: Icon(Icons.chevron_right_rounded)),
]),
),
),
);
}
}
class _Meta extends StatelessWidget {
const _Meta({required this.icon, required this.label});
final IconData icon;
final String label;
@override
Widget build(BuildContext context) =>
Row(mainAxisSize: MainAxisSize.min, children: [
Icon(icon, size: 15, color: AppColors.mutedInk),
const SizedBox(width: 4),
Text(label,
style: const TextStyle(fontSize: 12, color: AppColors.mutedInk)),
]);
}