Initial project import and stabilization baseline
This commit is contained in:
dwindown
330
lib/features/home/adzan_screen.dart
Normal file
330
lib/features/home/adzan_screen.dart
Normal file
@@ -0,0 +1,330 @@
|
||||
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';
|
||||
|
||||
/// Full-screen Adzan alert with pulsing icon and glowing text.
|
||||
class AdzanAlertScreen extends ConsumerWidget {
|
||||
const AdzanAlertScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final screenData = ref.watch(screenStateProvider);
|
||||
final clock = ref.watch(clockProvider).valueOrNull ?? DateTime.now();
|
||||
final schedule = ref.watch(todayScheduleProvider);
|
||||
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 timeStr =
|
||||
'${clock.hour.toString().padLeft(2, '0')}:${clock.minute.toString().padLeft(2, '0')}';
|
||||
final secStr = clock.second.toString().padLeft(2, '0');
|
||||
final fs = s * ref.watch(textScaleProvider);
|
||||
|
||||
return Container(
|
||||
color: SacredColors.background,
|
||||
child: Stack(
|
||||
children: [
|
||||
// Background gradient
|
||||
Positioned.fill(
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: RadialGradient(
|
||||
center: Alignment.center,
|
||||
radius: 0.8,
|
||||
colors: [
|
||||
SacredColors.background,
|
||||
SacredColors.background,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Ghost mosque icon
|
||||
Positioned(
|
||||
left: 40 * s,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
child: Center(
|
||||
child: Opacity(
|
||||
opacity: 0.03,
|
||||
child: Icon(Icons.mosque, size: 500 * s,
|
||||
color: SacredColors.onSurface),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// ── Header ──
|
||||
Positioned(
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: Container(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: 64 * s, vertical: 24 * s),
|
||||
color: SacredColors.background,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
settings.masjidName,
|
||||
style: GoogleFonts.plusJakartaSans(
|
||||
fontSize: 32 * s,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: SacredColors.primary,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
settings.masjidAddress,
|
||||
style: GoogleFonts.manrope(
|
||||
fontSize: 14 * fs,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: SacredColors.secondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// ── Central Alert Content ──
|
||||
Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Pulsing bell icon with glow
|
||||
_PulsingIcon(scale: s),
|
||||
|
||||
SizedBox(height: 40 * s),
|
||||
|
||||
// "WAKTU ADZAN [PRAYER]"
|
||||
Text(
|
||||
'WAKTU ADZAN $prayerLabel',
|
||||
style: GoogleFonts.plusJakartaSans(
|
||||
fontSize: 80 * s,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: SacredColors.secondary,
|
||||
letterSpacing: -2 * s,
|
||||
shadows: [
|
||||
Shadow(
|
||||
blurRadius: 40 * s,
|
||||
color: SacredColors.secondary.withValues(alpha: 0.4),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
SizedBox(height: 32 * s),
|
||||
|
||||
// Clock in pill
|
||||
Container(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: 48 * s, vertical: 20 * s),
|
||||
decoration: BoxDecoration(
|
||||
color: SacredColors.surfaceContainerHighest
|
||||
.withValues(alpha: 0.4),
|
||||
borderRadius: BorderRadius.circular(SacredRadii.full),
|
||||
border: Border.all(
|
||||
color: SacredColors.outlineVariant.withValues(alpha: 0.15),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
timeStr,
|
||||
style: GoogleFonts.plusJakartaSans(
|
||||
fontSize: 120 * s,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: SacredColors.primary,
|
||||
letterSpacing: -3 * s,
|
||||
height: 1.0,
|
||||
shadows: [
|
||||
Shadow(
|
||||
blurRadius: 30 * s,
|
||||
color:
|
||||
SacredColors.primary.withValues(alpha: 0.3),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
SizedBox(width: 12 * s),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
secStr,
|
||||
style: GoogleFonts.plusJakartaSans(
|
||||
fontSize: 48 * s,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: SacredColors.onSurface
|
||||
.withValues(alpha: 0.5),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'WIB',
|
||||
style: GoogleFonts.manrope(
|
||||
fontSize: 20 * s,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: SacredColors.primary,
|
||||
letterSpacing: 4 * s,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
SizedBox(height: 40 * s),
|
||||
|
||||
// Sub-message
|
||||
Text(
|
||||
'Telah masuk waktu shalat $prayerLabel.\nSegera persiapkan diri menuju masjid.',
|
||||
textAlign: TextAlign.center,
|
||||
style: GoogleFonts.manrope(
|
||||
fontSize: 24 * fs,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: SacredColors.onSurface.withValues(alpha: 0.8),
|
||||
height: 1.5,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// ── Footer: Prayer times strip ──
|
||||
if (schedule != null)
|
||||
Positioned(
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
child: _buildFooterStrip(s, fs, schedule, screenData),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildFooterStrip(
|
||||
double s, double fs, dynamic schedule, dynamic screenData) {
|
||||
final prayers = {
|
||||
'Subuh': schedule.subuh,
|
||||
'Dzuhur': schedule.dzuhur,
|
||||
'Ashar': schedule.ashar,
|
||||
'Maghrib': schedule.maghrib,
|
||||
'Isya': schedule.isya,
|
||||
};
|
||||
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 64 * s, vertical: 28 * s),
|
||||
color: SacredColors.surfaceContainerLow.withValues(alpha: 0.8),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: prayers.entries.map((e) {
|
||||
final isActive = screenData.activePrayer?.id == e.key.toLowerCase();
|
||||
return Column(
|
||||
children: [
|
||||
Text(
|
||||
e.key.toUpperCase(),
|
||||
style: GoogleFonts.manrope(
|
||||
fontSize: 12 * fs,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: isActive
|
||||
? SacredColors.primary
|
||||
: SacredColors.onSurface.withValues(alpha: 0.4),
|
||||
letterSpacing: 2 * s,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 4 * s),
|
||||
Text(
|
||||
e.value,
|
||||
style: GoogleFonts.plusJakartaSans(
|
||||
fontSize: isActive ? 32 * fs : 28 * fs,
|
||||
fontWeight: isActive ? FontWeight.w700 : FontWeight.w600,
|
||||
color: isActive
|
||||
? SacredColors.primary
|
||||
: SacredColors.onSurface,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _PulsingIcon extends StatefulWidget {
|
||||
final double scale;
|
||||
const _PulsingIcon({required this.scale});
|
||||
|
||||
@override
|
||||
State<_PulsingIcon> createState() => _PulsingIconState();
|
||||
}
|
||||
|
||||
class _PulsingIconState extends State<_PulsingIcon>
|
||||
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 AnimatedBuilder(
|
||||
animation: _ctrl,
|
||||
builder: (context, child) {
|
||||
return Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
Container(
|
||||
width: 200 * s,
|
||||
height: 200 * s,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: SacredColors.secondary
|
||||
.withValues(alpha: 0.1 * _ctrl.value),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
blurRadius: 60 * s * _ctrl.value,
|
||||
color: SacredColors.secondary.withValues(alpha: 0.1),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Icon(
|
||||
Icons.notifications_active,
|
||||
size: 120 * s,
|
||||
color: SacredColors.secondary,
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user