lib/features/shell/extras_drawer.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 '../../services/settings_service.dart';
import '../favorites/favorites_page.dart';
import '../learning/learning_home_page.dart';
import '../learning/new_in_weimar_page.dart';
import '../offline/offline_downloads_page.dart';
import '../partners/sponsor_locations_page.dart';
import '../settings/settings_page.dart';
class ExtrasDrawer extends StatefulWidget {
const ExtrasDrawer({super.key, required this.settings});
final SettingsService settings;
@override
State<ExtrasDrawer> createState() => _ExtrasDrawerState();
}
class _ExtrasDrawerState extends State<ExtrasDrawer> {
bool _learningMenu = false;
void _open(Widget page) {
Navigator.of(context).pop();
Navigator.of(context).push(MaterialPageRoute(builder: (_) => page));
}
@override
Widget build(BuildContext context) {
final width = MediaQuery.sizeOf(context).width;
return Drawer(
width: width < 430 ? width * .88 : 360,
child: SafeArea(
child: Padding(
padding: const EdgeInsets.fromLTRB(18, 14, 18, 24),
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 220),
switchInCurve: Curves.easeOutCubic,
switchOutCurve: Curves.easeInCubic,
child: _learningMenu
? _LearningMenu(
key: const ValueKey('learning-menu'),
onBack: () => setState(() => _learningMenu = false),
onOpen: _open,
)
: _MainExtrasMenu(
key: const ValueKey('main-menu'),
settings: widget.settings,
onOpen: _open,
onLearning: () => setState(() => _learningMenu = true),
),
),
),
),
);
}
}
class _MainExtrasMenu extends StatelessWidget {
const _MainExtrasMenu({
super.key,
required this.settings,
required this.onOpen,
required this.onLearning,
});
final SettingsService settings;
final ValueChanged<Widget> onOpen;
final VoidCallback onLearning;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final sponsor = AppDataScope.of(context).campaignFor(AdPlacement.sideMenu);
return ListView(
children: [
_DrawerHeader(title: l10n.t('moreMenuTitle')),
const SizedBox(height: 6),
Text(l10n.t('moreMenuTeaser'),
style: const TextStyle(color: AppColors.mutedInk)),
const SizedBox(height: 22),
_ExtraButton(
icon: Icons.favorite_border_rounded,
title: l10n.t('favoritesTitle'),
subtitle: l10n.t('favoritesSubtitle'),
onTap: () => onOpen(const FavoritesPage()),
),
const SizedBox(height: 12),
_ExtraButton(
icon: Icons.download_for_offline_outlined,
title: l10n.t('offlineDownloadsTitle'),
subtitle: l10n.t('offlineDownloadsSubtitle'),
onTap: () => onOpen(const OfflineDownloadsPage()),
),
const SizedBox(height: 12),
_ExtraButton(
icon: Icons.school_outlined,
title: l10n.t('learnGermanMenuTitle'),
subtitle: l10n.t('learnGermanMenuSubtitle'),
onTap: onLearning,
),
const SizedBox(height: 12),
_ExtraButton(
icon: Icons.settings_outlined,
title: l10n.t('extrasSettingsTitle'),
subtitle: l10n.t('extrasSettingsSubtitle'),
onTap: () => onOpen(SettingsPage(settings: settings)),
),
if (sponsor != null) ...[
const SizedBox(height: 24),
const Divider(),
const SizedBox(height: 10),
SponsoredBanner(
campaign: sponsor,
compact: true,
placement: 'side_menu',
onTapOverride: sponsor.locationsEnabled
? () => onOpen(SponsorLocationsPage(campaign: sponsor))
: null,
),
],
],
);
}
}
class _LearningMenu extends StatelessWidget {
const _LearningMenu({
super.key,
required this.onBack,
required this.onOpen,
});
final VoidCallback onBack;
final ValueChanged<Widget> onOpen;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
return ListView(
children: [
Row(
children: [
IconButton(
tooltip: MaterialLocalizations.of(context).backButtonTooltip,
onPressed: onBack,
icon: const Icon(Icons.arrow_back_rounded),
),
Expanded(
child: Text(
l10n.t('learnGermanMenuTitle'),
style: Theme.of(context)
.textTheme
.headlineSmall
?.copyWith(fontWeight: FontWeight.w900),
),
),
IconButton(
tooltip: MaterialLocalizations.of(context).closeButtonTooltip,
onPressed: () => Navigator.of(context).pop(),
icon: const Icon(Icons.close_rounded),
),
],
),
const SizedBox(height: 6),
Text(l10n.t('learnGermanMenuIntro'),
style: const TextStyle(color: AppColors.mutedInk)),
const SizedBox(height: 22),
_ExtraButton(
icon: Icons.translate_rounded,
title: l10n.t('extrasLanguageGuideTitle'),
subtitle: l10n.t('extrasLanguageGuideSubtitle'),
onTap: () => onOpen(const LearningHomePage()),
),
const SizedBox(height: 12),
_ExtraButton(
icon: Icons.flight_land_rounded,
title: l10n.t('extrasNewInWeimarTitle'),
subtitle: l10n.t('extrasNewInWeimarSubtitle'),
onTap: () => onOpen(const NewInWeimarPage()),
),
],
);
}
}
class _DrawerHeader extends StatelessWidget {
const _DrawerHeader({required this.title});
final String title;
@override
Widget build(BuildContext context) => Row(
children: [
Expanded(
child: Text(
title,
style: Theme.of(context)
.textTheme
.headlineSmall
?.copyWith(fontWeight: FontWeight.w900),
),
),
IconButton(
tooltip: MaterialLocalizations.of(context).closeButtonTooltip,
onPressed: () => Navigator.of(context).pop(),
icon: const Icon(Icons.close_rounded),
),
],
);
}
class _ExtraButton extends StatelessWidget {
const _ExtraButton({
required this.icon,
required this.title,
required this.subtitle,
required this.onTap,
});
final IconData icon;
final String title;
final String subtitle;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
return Material(
color: AppColors.surface,
borderRadius: BorderRadius.circular(20),
child: InkWell(
borderRadius: BorderRadius.circular(20),
onTap: onTap,
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: AppColors.line),
borderRadius: BorderRadius.circular(20),
),
child: Row(
children: [
CircleAvatar(
radius: 23,
backgroundColor: AppColors.softRed,
child: Icon(icon, color: AppColors.heartRed),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title,
style: const TextStyle(
fontSize: 16, fontWeight: FontWeight.w900)),
const SizedBox(height: 4),
Text(subtitle,
style: const TextStyle(
color: AppColors.mutedInk, height: 1.25)),
],
),
),
const SizedBox(width: 8),
const Icon(Icons.chevron_right_rounded),
],
),
),
),
);
}
}