Initial project import and stabilization baseline
This commit is contained in:
dwindown
202
lib/features/home/khutbah_screen.dart
Normal file
202
lib/features/home/khutbah_screen.dart
Normal file
@@ -0,0 +1,202 @@
|
||||
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';
|
||||
|
||||
/// Screen displayed uniquely during the Friday Khutbah.
|
||||
/// It acts like a black (shalat) screen to avoid distraction,
|
||||
/// but features the active Khatib and Muadzin information and a pulsing indicator.
|
||||
/// NO COUNTDOWNS are displayed.
|
||||
class KhutbahScreen extends ConsumerWidget {
|
||||
const KhutbahScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final settings = ref.watch(settingsProvider);
|
||||
final size = MediaQuery.of(context).size;
|
||||
final s = size.width / 1920;
|
||||
|
||||
return Container(
|
||||
color: Colors.black,
|
||||
child: Stack(
|
||||
children: [
|
||||
// Absolute center elements
|
||||
Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Animated Pulsing Status Pill
|
||||
Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 40 * s, vertical: 16 * s),
|
||||
decoration: BoxDecoration(
|
||||
color: SacredColors.background,
|
||||
borderRadius: BorderRadius.circular(SacredRadii.full),
|
||||
border: Border.all(color: SacredColors.outlineVariant.withValues(alpha: 0.3)),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
_PulsingMic(size: 24 * s, color: SacredColors.secondary),
|
||||
SizedBox(width: 16 * s),
|
||||
Text(
|
||||
'SEDANG KHUTBAH JUMAT',
|
||||
style: GoogleFonts.plusJakartaSans(
|
||||
fontSize: 24 * s,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: SacredColors.secondary,
|
||||
letterSpacing: 4 * s,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
SizedBox(height: 64 * s),
|
||||
|
||||
// Officer Info Cards
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
_buildKhutbahOfficerCard(
|
||||
s: s,
|
||||
icon: Icons.person_pin,
|
||||
label: 'KHATIB',
|
||||
name: settings.khatibName.isEmpty ? 'Khatib Hari Ini' : settings.khatibName,
|
||||
color: SacredColors.primary,
|
||||
),
|
||||
SizedBox(width: 48 * s),
|
||||
_buildKhutbahOfficerCard(
|
||||
s: s,
|
||||
icon: Icons.record_voice_over,
|
||||
label: 'MUADZIN / IMAM',
|
||||
name: settings.imamName.isEmpty ? 'Muadzin Hari Ini' : settings.imamName,
|
||||
color: SacredColors.secondary,
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
SizedBox(height: 80 * s),
|
||||
|
||||
Text(
|
||||
'"Harap menjaga ketenangan dan menyimak Khutbah."',
|
||||
style: GoogleFonts.manrope(
|
||||
fontSize: 20 * s,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: SacredColors.onSurfaceVariant.withValues(alpha: 0.5),
|
||||
fontStyle: FontStyle.italic,
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Simple corner logo/name so it doesn't feel entirely dead
|
||||
Positioned(
|
||||
top: 48 * s,
|
||||
left: 48 * s,
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.mosque, color: SacredColors.onSurfaceVariant.withValues(alpha: 0.3), size: 24 * s),
|
||||
SizedBox(width: 12 * s),
|
||||
Text(
|
||||
settings.masjidName,
|
||||
style: GoogleFonts.plusJakartaSans(
|
||||
fontSize: 16 * s,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: SacredColors.onSurfaceVariant.withValues(alpha: 0.3),
|
||||
letterSpacing: 2 * s,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildKhutbahOfficerCard({
|
||||
required double s,
|
||||
required IconData icon,
|
||||
required String label,
|
||||
required String name,
|
||||
required Color color,
|
||||
}) {
|
||||
return Container(
|
||||
width: 400 * s,
|
||||
padding: EdgeInsets.all(32 * s),
|
||||
decoration: BoxDecoration(
|
||||
color: SacredColors.surfaceContainerLow.withValues(alpha: 0.4),
|
||||
borderRadius: BorderRadius.circular(SacredRadii.xl),
|
||||
border: Border.all(color: color.withValues(alpha: 0.1)),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Container(
|
||||
padding: EdgeInsets.all(20 * s),
|
||||
decoration: BoxDecoration(
|
||||
color: color.withValues(alpha: 0.1),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Icon(icon, color: color, size: 40 * s),
|
||||
),
|
||||
SizedBox(height: 24 * s),
|
||||
Text(
|
||||
label,
|
||||
style: GoogleFonts.manrope(
|
||||
fontSize: 14 * s,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: SacredColors.onSurfaceVariant,
|
||||
letterSpacing: 4 * s,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 8 * s),
|
||||
Text(
|
||||
name,
|
||||
textAlign: TextAlign.center,
|
||||
style: GoogleFonts.plusJakartaSans(
|
||||
fontSize: 28 * s,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: SacredColors.onSurface,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _PulsingMic extends StatefulWidget {
|
||||
final double size;
|
||||
final Color color;
|
||||
const _PulsingMic({required this.size, required this.color});
|
||||
|
||||
@override
|
||||
State<_PulsingMic> createState() => _PulsingMicState();
|
||||
}
|
||||
|
||||
class _PulsingMicState extends State<_PulsingMic> 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) {
|
||||
return FadeTransition(
|
||||
opacity: Tween(begin: 0.3, end: 1.0).animate(_ctrl),
|
||||
child: Icon(Icons.mic, size: widget.size, color: widget.color),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user