Initial project import and stabilization baseline
This commit is contained in:
dwindown
367
lib/features/home/iqomah_screen.dart
Normal file
367
lib/features/home/iqomah_screen.dart
Normal file
@@ -0,0 +1,367 @@
|
||||
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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user