lib/features/learning/learning_home_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/ad_campaign.dart';
import '../../widgets/sponsored_banner.dart';
import '../../models/learning_course.dart';
import '../../repositories/learning_repository.dart';
import '../../services/learning_progress_service.dart';
import '../../services/analytics_service.dart';
import 'language_learning_tours_page.dart';
import 'learning_course_page.dart';
class LearningHomePage extends StatefulWidget {
const LearningHomePage({super.key});
@override
State<LearningHomePage> createState() => _LearningHomePageState();
}
class _LearningHomePageState extends State<LearningHomePage> {
final _repository = LearningRepository();
final _progress = LearningProgressService();
Future<List<LearningCourse>>? _future;
String? _lang;
@override
void initState() {
super.initState();
AnalyticsService.instance.screenView('learning_home');
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
final lang = Localizations.localeOf(context).languageCode;
if (_future == null || lang != _lang) {
_lang = lang;
_future = _repository.fetchCourses(languageCode: lang);
}
}
Future<void> _refresh() async {
final lang = Localizations.localeOf(context).languageCode;
final future = _repository.fetchCourses(languageCode: lang);
setState(() => _future = future);
await future;
}
@override
void dispose() {
_repository.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final appAd = AppDataScope.of(context).campaignFor(AdPlacement.appBanner);
final learningAd = appAd?.supportsScreen('learning') == true ? appAd : null;
return Scaffold(
appBar: AppBar(title: Text(l10n.t('extrasLanguageGuideTitle'))),
body: RefreshIndicator(
onRefresh: _refresh,
child: ListView(
padding: const EdgeInsets.fromLTRB(20, 8, 20, 30),
children: [
Container(
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
color: AppColors.ink,
borderRadius: BorderRadius.circular(24)),
child:
Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
const CircleAvatar(
radius: 25,
backgroundColor: Colors.white,
child: Icon(Icons.translate_rounded, color: AppColors.ink)),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(l10n.t('learnGerman'),
style: const TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.w900)),
const SizedBox(height: 5),
Text(l10n.t('learnGermanTeaser'),
style: const TextStyle(
color: Colors.white70, height: 1.35)),
])),
]),
),
const SizedBox(height: 14),
if (learningAd != null) ...[
SponsoredBanner(
campaign: learningAd,
compact: true,
placement: 'app_banner_learning'),
const SizedBox(height: 16),
],
FutureBuilder<int>(
future: _progress.streak(),
builder: (context, snapshot) => Row(children: [
const Icon(Icons.local_fire_department_rounded,
color: AppColors.heartRed, size: 20),
const SizedBox(width: 6),
Text(l10n.tf('learningStreak', {'n': '${snapshot.data ?? 0}'}),
style: const TextStyle(fontWeight: FontWeight.w800)),
]),
),
const SizedBox(height: 24),
Text(l10n.t('learningToursTitle'),
style: Theme.of(context)
.textTheme
.titleLarge
?.copyWith(fontWeight: FontWeight.w900)),
const SizedBox(height: 6),
Text(l10n.t('learningToursHomeTeaser'),
style: const TextStyle(color: AppColors.mutedInk)),
const SizedBox(height: 12),
Material(
color: AppColors.softRed,
borderRadius: BorderRadius.circular(22),
child: InkWell(
borderRadius: BorderRadius.circular(22),
onTap: () {
AnalyticsService.instance.track('learning_tours_open');
Navigator.of(context).push(MaterialPageRoute(
builder: (_) => const LanguageLearningToursPage()));
},
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(children: [
const CircleAvatar(
radius: 24,
backgroundColor: AppColors.heartRed,
child: Icon(Icons.route_rounded, color: Colors.white)),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(l10n.t('learningToursCta'),
style: const TextStyle(
fontSize: 17, fontWeight: FontWeight.w900)),
const SizedBox(height: 4),
Text(l10n.t('learningToursCtaSubtitle'),
style: const TextStyle(
color: AppColors.mutedInk, height: 1.3)),
])),
const Icon(Icons.chevron_right_rounded),
]),
),
),
),
const SizedBox(height: 28),
Text(l10n.t('learningCourses'),
style: Theme.of(context)
.textTheme
.titleLarge
?.copyWith(fontWeight: FontWeight.w900)),
const SizedBox(height: 12),
FutureBuilder<List<LearningCourse>>(
future: _future,
builder: (context, snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
return const Center(
child: Padding(
padding: EdgeInsets.all(30),
child: CircularProgressIndicator()));
}
if (snapshot.hasError) return _ErrorCard(onRetry: _refresh);
final courses = snapshot.data ?? const [];
if (courses.isEmpty) return Text(l10n.t('learningComingSoon'));
return Column(children: [
for (final course in courses)
Padding(
padding: const EdgeInsets.only(bottom: 12),
child: _CourseCard(
course: course,
onTap: () {
AnalyticsService.instance.track(
'learning_course_open',
properties: {'course_id': course.id});
Navigator.of(context).push(MaterialPageRoute(
builder: (_) =>
LearningCoursePage(courseId: course.id)));
},
),
),
]);
},
),
],
),
),
);
}
}
class _CourseCard extends StatelessWidget {
const _CourseCard({required this.course, required this.onTap});
final LearningCourse course;
final VoidCallback onTap;
@override
Widget build(BuildContext context) => Card(
child: InkWell(
borderRadius: BorderRadius.circular(18),
onTap: onTap,
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
CircleAvatar(
child:
Text(course.levels.isEmpty ? 'DE' : course.levels.first)),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(course.title,
style: const TextStyle(
fontWeight: FontWeight.w900, fontSize: 16)),
const SizedBox(height: 4),
Text(course.description,
maxLines: 3, overflow: TextOverflow.ellipsis),
const SizedBox(height: 7),
Text(
AppLocalizations.of(context).tf('learningUnitsMinutes', {
'units': '${course.unitCount}',
'minutes': '${course.durationMinutes}'
}),
style: const TextStyle(
color: AppColors.mutedInk, fontSize: 12),
),
])),
const SizedBox(width: 6),
const Padding(
padding: EdgeInsets.only(top: 2),
child: Icon(Icons.chevron_right_rounded)),
]),
),
),
);
}
class _ErrorCard extends StatelessWidget {
const _ErrorCard({required this.onRetry});
final Future<void> Function() onRetry;
@override
Widget build(BuildContext context) => Card(
child: Padding(
padding: const EdgeInsets.all(18),
child: Column(children: [
Text(AppLocalizations.of(context).t('learningLoadError')),
TextButton(
onPressed: () => onRetry(),
child: Text(AppLocalizations.of(context).t('retry'))),
]),
),
);
}