368 lines
12 KiB
Dart
368 lines
12 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
|
|
import '../../core/sacred_tokens.dart';
|
|
import '../../providers.dart';
|
|
|
|
/// FORMAT HELPER: Duration → "MM:SS"
|
|
String _fmtCountdown(Duration d) {
|
|
final m = d.inMinutes.toString().padLeft(2, '0');
|
|
final s = (d.inSeconds % 60).toString().padLeft(2, '0');
|
|
return '$m:$s';
|
|
}
|
|
|
|
/// Iqomah countdown screen — and Friday Khutbah info override.
|
|
class IqomahScreen extends ConsumerWidget {
|
|
const IqomahScreen({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final screenData = ref.watch(screenStateProvider);
|
|
final settings = ref.watch(settingsProvider);
|
|
final size = MediaQuery.of(context).size;
|
|
final s = size.width / 1920;
|
|
|
|
final prayerLabel = screenData.activePrayer
|
|
?.displayLabel(isFriday: screenData.isFriday) ??
|
|
'';
|
|
final countdown = screenData.iqomahRemaining ?? Duration.zero;
|
|
final isFridayDzuhur =
|
|
screenData.isFriday && screenData.activePrayer?.id == 'dzuhur';
|
|
|
|
return Container(
|
|
color: SacredColors.background,
|
|
child: Stack(
|
|
children: [
|
|
// Subtle radial glow
|
|
Positioned.fill(
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
gradient: RadialGradient(
|
|
center: Alignment.center,
|
|
radius: 0.7,
|
|
colors: [
|
|
SacredColors.primary.withValues(alpha: 0.08),
|
|
SacredColors.background,
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
// ── Content ──
|
|
Padding(
|
|
padding: EdgeInsets.all(64 * s),
|
|
child: Column(
|
|
children: [
|
|
// Header
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
settings.masjidName.toUpperCase(),
|
|
style: GoogleFonts.plusJakartaSans(
|
|
fontSize: 36 * s,
|
|
fontWeight: FontWeight.w800,
|
|
color: SacredColors.primary,
|
|
letterSpacing: -1 * s,
|
|
),
|
|
),
|
|
Text(
|
|
settings.masjidAddress,
|
|
style: GoogleFonts.manrope(
|
|
fontSize: 12 * s,
|
|
color: SacredColors.onSurface.withValues(alpha: 0.6),
|
|
letterSpacing: 4 * s,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
|
|
// ── Center: Countdown ──
|
|
Expanded(
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
// Prayer name pill
|
|
Text(
|
|
'SHALAT SAAT INI',
|
|
style: GoogleFonts.manrope(
|
|
fontSize: 16 * s,
|
|
fontWeight: FontWeight.w500,
|
|
color: SacredColors.onSurface.withValues(alpha: 0.5),
|
|
letterSpacing: 8 * s,
|
|
),
|
|
),
|
|
SizedBox(height: 12 * s),
|
|
Container(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: 48 * s, vertical: 16 * s),
|
|
decoration: BoxDecoration(
|
|
color: SacredColors.surfaceContainerHighest,
|
|
borderRadius:
|
|
BorderRadius.circular(SacredRadii.full),
|
|
border: Border.all(
|
|
color: SacredColors.primary.withValues(alpha: 0.1),
|
|
),
|
|
),
|
|
child: Text(
|
|
prayerLabel.toUpperCase(),
|
|
style: GoogleFonts.plusJakartaSans(
|
|
fontSize: 56 * s,
|
|
fontWeight: FontWeight.w800,
|
|
color: SacredColors.primary,
|
|
letterSpacing: 2 * s,
|
|
),
|
|
),
|
|
),
|
|
|
|
SizedBox(height: 32 * s),
|
|
|
|
// Title
|
|
Text(
|
|
isFridayDzuhur
|
|
? 'PERSIAPAN KHUTBAH'
|
|
: 'MENUJU IQOMAH',
|
|
style: GoogleFonts.plusJakartaSans(
|
|
fontSize: 36 * s,
|
|
fontWeight: FontWeight.w700,
|
|
color: SacredColors.secondary,
|
|
letterSpacing: 4 * s,
|
|
),
|
|
),
|
|
|
|
SizedBox(height: 16 * s),
|
|
|
|
// Giant timer
|
|
Text(
|
|
_fmtCountdown(countdown),
|
|
style: GoogleFonts.plusJakartaSans(
|
|
fontSize: 280 * s,
|
|
fontWeight: FontWeight.w800,
|
|
color: SacredColors.onSurface,
|
|
letterSpacing: -8 * s,
|
|
height: 1.0,
|
|
shadows: [
|
|
Shadow(
|
|
blurRadius: 40 * s,
|
|
color:
|
|
SacredColors.primary.withValues(alpha: 0.3),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
// Pulsing status pill
|
|
_StatusPill(
|
|
label: 'SIAPKAN DIRI ANDA',
|
|
scale: s,
|
|
),
|
|
|
|
// Friday officers info
|
|
if (isFridayDzuhur) ...[
|
|
SizedBox(height: 32 * s),
|
|
_FridayOfficers(settings: settings, scale: s),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
// Hadith reminder
|
|
Container(
|
|
padding: EdgeInsets.all(32 * s),
|
|
decoration: BoxDecoration(
|
|
color: SacredColors.surfaceContainerLow.withValues(alpha: 0.5),
|
|
borderRadius: BorderRadius.circular(SacredRadii.xl),
|
|
border: Border(
|
|
left: BorderSide(
|
|
color: SacredColors.secondary, width: 4 * s),
|
|
),
|
|
),
|
|
child: Text(
|
|
'"Luruskan dan Rapatkan Shaf, Sesungguhnya lurusnya shaf termasuk kesempurnaan shalat."',
|
|
style: GoogleFonts.plusJakartaSans(
|
|
fontSize: 28 * s,
|
|
fontWeight: FontWeight.w500,
|
|
color: SacredColors.onSurface,
|
|
fontStyle: FontStyle.italic,
|
|
height: 1.5,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _StatusPill extends StatefulWidget {
|
|
final String label;
|
|
final double scale;
|
|
const _StatusPill({required this.label, required this.scale});
|
|
|
|
@override
|
|
State<_StatusPill> createState() => _StatusPillState();
|
|
}
|
|
|
|
class _StatusPillState extends State<_StatusPill>
|
|
with SingleTickerProviderStateMixin {
|
|
late AnimationController _ctrl;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_ctrl = AnimationController(
|
|
vsync: this, duration: const Duration(seconds: 2))
|
|
..repeat(reverse: true);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_ctrl.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final s = widget.scale;
|
|
return FadeTransition(
|
|
opacity: Tween(begin: 0.5, end: 1.0).animate(_ctrl),
|
|
child: Container(
|
|
margin: EdgeInsets.only(top: 16 * s),
|
|
padding:
|
|
EdgeInsets.symmetric(horizontal: 32 * s, vertical: 12 * s),
|
|
decoration: BoxDecoration(
|
|
color: SacredColors.secondary.withValues(alpha: 0.1),
|
|
borderRadius: BorderRadius.circular(SacredRadii.full),
|
|
border: Border.all(
|
|
color: SacredColors.secondary.withValues(alpha: 0.2),
|
|
),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(Icons.notifications_active,
|
|
color: SacredColors.secondary, size: 20 * s),
|
|
SizedBox(width: 8 * s),
|
|
Text(
|
|
widget.label,
|
|
style: GoogleFonts.plusJakartaSans(
|
|
fontSize: 16 * s,
|
|
fontWeight: FontWeight.w700,
|
|
color: SacredColors.secondary,
|
|
letterSpacing: 3 * s,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _FridayOfficers extends StatelessWidget {
|
|
final dynamic settings;
|
|
final double scale;
|
|
const _FridayOfficers({required this.settings, required this.scale});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final s = scale;
|
|
return Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
_OfficerCard(
|
|
icon: Icons.person_pin,
|
|
label: 'KHATIB',
|
|
name: settings.khatibName,
|
|
color: SacredColors.primary,
|
|
scale: s,
|
|
),
|
|
SizedBox(width: 24 * s),
|
|
_OfficerCard(
|
|
icon: Icons.timer,
|
|
label: 'IMAM',
|
|
name: settings.imamName,
|
|
color: SacredColors.secondary,
|
|
scale: s,
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _OfficerCard extends StatelessWidget {
|
|
final IconData icon;
|
|
final String label;
|
|
final String name;
|
|
final Color color;
|
|
final double scale;
|
|
|
|
const _OfficerCard({
|
|
required this.icon,
|
|
required this.label,
|
|
required this.name,
|
|
required this.color,
|
|
required this.scale,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final s = scale;
|
|
return Container(
|
|
padding: EdgeInsets.all(24 * s),
|
|
decoration: BoxDecoration(
|
|
color: SacredColors.surfaceContainerHigh.withValues(alpha: 0.4),
|
|
borderRadius: BorderRadius.circular(SacredRadii.xl),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(
|
|
padding: EdgeInsets.all(12 * s),
|
|
decoration: BoxDecoration(
|
|
color: color.withValues(alpha: 0.2),
|
|
borderRadius: BorderRadius.circular(SacredRadii.lg),
|
|
),
|
|
child: Icon(icon, color: color, size: 24 * s),
|
|
),
|
|
SizedBox(width: 16 * s),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
label,
|
|
style: GoogleFonts.manrope(
|
|
fontSize: 10 * s,
|
|
fontWeight: FontWeight.w700,
|
|
color: SacredColors.onSurface.withValues(alpha: 0.4),
|
|
letterSpacing: 3 * s,
|
|
),
|
|
),
|
|
Text(
|
|
name,
|
|
style: GoogleFonts.plusJakartaSans(
|
|
fontSize: 20 * s,
|
|
fontWeight: FontWeight.w700,
|
|
color: SacredColors.onSurface,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|