dwindown/jamshalat-diary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: checkpoint API migration and dzikir UX updates

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-03-16 00:30:32 +07:00
parent c4696f2d9f
commit a049129a35
85 changed files with 4285 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

768
lib/features/dzikir/presentation/dzikir_screen.dart
View File

@@ -1,14 +1,15 @@
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:intl/intl.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../app/theme/app_colors.dart';
import '../../../data/local/hive_boxes.dart';
import '../../../data/local/models/dzikir_counter.dart';
import '../../../data/local/models/app_settings.dart';
import '../../../data/local/models/dzikir_counter.dart';
import '../../../data/services/muslim_api_service.dart';
class DzikirScreen extends ConsumerStatefulWidget {
final bool isSimpleModeTab;
@@ -21,15 +22,36 @@ class DzikirScreen extends ConsumerStatefulWidget {
class _DzikirScreenState extends ConsumerState<DzikirScreen>
with SingleTickerProviderStateMixin {
late TabController _tabController;
final Map<String, PageController> _pageControllers = {
'pagi': PageController(),
'petang': PageController(),
'solat': PageController(),
};
final Map<String, int> _focusPageIndex = {
'pagi': 0,
'petang': 0,
'solat': 0,
};
List<Map<String, dynamic>> _pagiItems = [];
List<Map<String, dynamic>> _petangItems = [];
List<Map<String, dynamic>> _sesudahSholatItems = [];
bool _loading = true;
String? _error;
late Box<DzikirCounter> _counterBox;
late String _todayKey;
@override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
_tabController = TabController(length: 3, vsync: this);
_tabController.addListener(() {
if (!mounted) return;
setState(() {});
});
_counterBox = Hive.box<DzikirCounter>(HiveBoxes.dzikirCounters);
_todayKey = DateFormat('yyyy-MM-dd').format(DateTime.now());
_loadData();
@@ -38,17 +60,68 @@ class _DzikirScreenState extends ConsumerState<DzikirScreen>
@override
void dispose() {
_tabController.dispose();
for (final controller in _pageControllers.values) {
controller.dispose();
}
super.dispose();
}
Future<void> _loadData() async {
final pagiJson =
await rootBundle.loadString('assets/dzikir/dzikir_pagi.json');
final petangJson =
await rootBundle.loadString('assets/dzikir/dzikir_petang.json');
setState(() {
_pagiItems = List<Map<String, dynamic>>.from(json.decode(pagiJson));
_petangItems = List<Map<String, dynamic>>.from(json.decode(petangJson));
_loading = true;
_error = null;
});
try {
final pagi = await MuslimApiService.instance.getDzikirByType(
'pagi',
strict: true,
);
final petang = await MuslimApiService.instance.getDzikirByType(
'petang',
strict: true,
);
final solat = await MuslimApiService.instance.getDzikirByType(
'solat',
strict: true,
);
if (!mounted) return;
setState(() {
_pagiItems = pagi;
_petangItems = petang;
_sesudahSholatItems = solat;
_loading = false;
});
_ensureValidFocusPages();
} catch (_) {
if (!mounted) return;
setState(() {
_loading = false;
_error = 'Gagal memuat dzikir dari server';
});
}
}
void _ensureValidFocusPages() {
_clampFocusPageForPrefix('pagi', _pagiItems.length);
_clampFocusPageForPrefix('petang', _petangItems.length);
_clampFocusPageForPrefix('solat', _sesudahSholatItems.length);
}
void _clampFocusPageForPrefix(String prefix, int itemLength) {
final maxIndex = itemLength > 0 ? itemLength - 1 : 0;
final current = _focusPageIndex[prefix] ?? 0;
final next = current > maxIndex ? maxIndex : current;
_focusPageIndex[prefix] = next;
final controller = _pageControllers[prefix];
if (controller == null || !controller.hasClients) return;
if (controller.page?.round() == next) return;
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted || !controller.hasClients) return;
controller.jumpToPage(next);
});
}
@@ -63,9 +136,15 @@ class _DzikirScreenState extends ConsumerState<DzikirScreen>
);
}
void _increment(String dzikirId, int target) {
bool _increment(
String dzikirId,
int target, {
required bool hapticEnabled,
}) {
final key = '${dzikirId}_$_todayKey';
var counter = _counterBox.get(key);
final wasComplete = counter != null && counter.count >= counter.target;
if (counter == null) {
counter = DzikirCounter(
dzikirId: dzikirId,
@@ -74,40 +153,42 @@ class _DzikirScreenState extends ConsumerState<DzikirScreen>
target: target,
);
_counterBox.put(key, counter);
} else {
if (counter.count < counter.target) {
counter.count++;
counter.save();
}
} else if (counter.count < counter.target) {
counter.count++;
counter.save();
}
final isCompleteNow = counter.count >= counter.target;
if (hapticEnabled) {
HapticFeedback.lightImpact();
}
setState(() {});
// Haptic feedback
HapticFeedback.lightImpact();
return !wasComplete && isCompleteNow;
}
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final box = Hive.box<AppSettings>(HiveBoxes.settings);
final isSimpleMode = box.get('default')?.simpleMode ?? false;
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: !widget.isSimpleModeTab,
title: const Text('Dzikir Pagi & Petang'),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(LucideIcons.info),
),
],
),
body: Column(
children: [
// Tabs
Container(
margin: const EdgeInsets.symmetric(horizontal: 16),
child: TabBar(
return ValueListenableBuilder<Box<AppSettings>>(
valueListenable:
Hive.box<AppSettings>(HiveBoxes.settings).listenable(keys: ['default']),
builder: (_, settingsBox, __) {
final settings = settingsBox.get('default') ?? AppSettings();
final isFocusMode = settings.dzikirDisplayMode == 'focus';
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: !widget.isSimpleModeTab,
title: const Text('Dzikir Harian'),
actions: [
IconButton(
onPressed: _loadData,
icon: const Icon(LucideIcons.refreshCw),
tooltip: 'Muat ulang',
),
],
bottom: TabBar(
controller: _tabController,
labelColor: AppColors.primary,
unselectedLabelColor: isDark
@@ -116,47 +197,151 @@ class _DzikirScreenState extends ConsumerState<DzikirScreen>
indicatorColor: AppColors.primary,
indicatorWeight: 3,
labelStyle:
const TextStyle(fontWeight: FontWeight.w700, fontSize: 14),
const TextStyle(fontWeight: FontWeight.w700, fontSize: 13),
tabs: const [
Tab(text: 'Pagi'),
Tab(text: 'Petang'),
Tab(text: 'Sesudah Sholat'),
],
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: [
_buildDzikirList(context, isDark, _pagiItems, 'pagi',
'Dzikir Pagi', 'Dibaca setelah shalat Shubuh hingga terbit matahari'),
_buildDzikirList(context, isDark, _petangItems, 'petang',
'Dzikir Petang', 'Dibaca setelah shalat Ashar hingga terbenam matahari'),
],
body: _loading
? const Center(child: CircularProgressIndicator())
: _error != null
? _buildErrorState(isDark)
: TabBarView(
controller: _tabController,
children: [
isFocusMode
? _buildFocusModeTab(
context,
isDark,
settings,
items: _pagiItems,
prefix: 'pagi',
title: 'Dzikir Pagi',
subtitle:
'Dibaca setelah shalat Subuh hingga terbit matahari.',
)
: _buildDzikirList(
context,
isDark,
settings,
_pagiItems,
'pagi',
'Dzikir Pagi',
'Dibaca setelah shalat Subuh hingga terbit matahari.',
),
isFocusMode
? _buildFocusModeTab(
context,
isDark,
settings,
items: _petangItems,
prefix: 'petang',
title: 'Dzikir Petang',
subtitle:
'Dibaca setelah Ashar hingga terbenam matahari.',
)
: _buildDzikirList(
context,
isDark,
settings,
_petangItems,
'petang',
'Dzikir Petang',
'Dibaca setelah Ashar hingga terbenam matahari.',
),
isFocusMode
? _buildFocusModeTab(
context,
isDark,
settings,
items: _sesudahSholatItems,
prefix: 'solat',
title: 'Dzikir Sesudah Sholat',
subtitle:
'Dibaca setelah shalat fardhu sesuai kebutuhan.',
)
: _buildDzikirList(
context,
isDark,
settings,
_sesudahSholatItems,
'solat',
'Dzikir Sesudah Sholat',
'Dibaca setelah shalat fardhu sesuai kebutuhan.',
),
],
),
);
},
);
}
Widget _buildErrorState(bool isDark) {
return Center(
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
LucideIcons.wifiOff,
size: 42,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
const SizedBox(height: 12),
Text(
_error!,
textAlign: TextAlign.center,
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
),
),
);
}
Widget _buildDzikirList(BuildContext context, bool isDark,
List<Map<String, dynamic>> items, String prefix, String title, String subtitle) {
Widget _buildDzikirList(
BuildContext context,
bool isDark,
AppSettings settings,
List<Map<String, dynamic>> items,
String prefix,
String title,
String subtitle,
) {
if (items.isEmpty) {
return const Center(child: CircularProgressIndicator());
return _buildEmptyState(
isDark,
title: 'Belum ada data dzikir',
subtitle: 'Data untuk tab ini belum tersedia.',
);
}
return ListView.builder(
padding: const EdgeInsets.all(16),
itemCount: items.length + 1, // +1 for header
itemCount: items.length + 1,
itemBuilder: (context, index) {
if (index == 0) {
return Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Column(
children: [
Text(title,
style: const TextStyle(
fontSize: 22, fontWeight: FontWeight.w800)),
Text(
title,
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.w800,
),
),
const SizedBox(height: 4),
Text(
subtitle,
@@ -174,8 +359,8 @@ class _DzikirScreenState extends ConsumerState<DzikirScreen>
}
final item = items[index - 1];
final dzikirId = '${prefix}_${item['id']}';
final target = (item['count'] as num?)?.toInt() ?? 1;
final dzikirId = _resolveDzikirId(item, prefix, index - 1);
final target = (item['ulang'] as num?)?.toInt() ?? 1;
final counter = _getCounter(dzikirId, target);
final isComplete = counter.count >= counter.target;
@@ -197,13 +382,14 @@ class _DzikirScreenState extends ConsumerState<DzikirScreen>
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Header row: count badge + number
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.symmetric(
horizontal: 10, vertical: 4),
horizontal: 10,
vertical: 4,
),
decoration: BoxDecoration(
color: AppColors.primary.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(50),
@@ -230,44 +416,37 @@ class _DzikirScreenState extends ConsumerState<DzikirScreen>
],
),
const SizedBox(height: 16),
// Arabic text
SizedBox(
width: double.infinity,
child: Text(
item['arabic'] ?? '',
item['arab']?.toString() ?? '',
textAlign: TextAlign.right,
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 24,
fontWeight: FontWeight.w400,
height: 2.0,
),
),
),
const SizedBox(height: 12),
// Transliteration
const SizedBox(height: 10),
Text(
item['transliteration'] ?? '',
style: TextStyle(
fontSize: 13,
fontStyle: FontStyle.italic,
color: AppColors.primary,
),
),
const SizedBox(height: 8),
// Translation
Text(
'"${item['translation'] ?? ''}"',
'"${item['indo']?.toString() ?? ''}"',
style: TextStyle(
fontSize: 13,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
height: 1.5,
),
),
const SizedBox(height: 16),
// Counter button
GestureDetector(
onTap: () => _increment(dzikirId, target),
onTap: () => _increment(
dzikirId,
target,
hapticEnabled: settings.dzikirHapticOnCount,
),
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(vertical: 14),
@@ -281,7 +460,9 @@ class _DzikirScreenState extends ConsumerState<DzikirScreen>
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
isComplete ? LucideIcons.check : LucideIcons.fingerprint,
isComplete
? LucideIcons.check
: LucideIcons.fingerprint,
size: 18,
color: isComplete
? AppColors.primary
@@ -289,7 +470,7 @@ class _DzikirScreenState extends ConsumerState<DzikirScreen>
),
const SizedBox(width: 8),
Text(
'${counter.count} / $target',
isComplete ? 'Selesai' : '${counter.count} / $target',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
@@ -309,4 +490,433 @@ class _DzikirScreenState extends ConsumerState<DzikirScreen>
},
);
}
Widget _buildFocusModeTab(
BuildContext context,
bool isDark,
AppSettings settings, {
required List<Map<String, dynamic>> items,
required String prefix,
required String title,
required String subtitle,
}) {
if (items.isEmpty) {
return _buildEmptyState(
isDark,
title: 'Belum ada data dzikir',
subtitle: 'Data untuk tab ini belum tersedia.',
);
}
final controller = _pageControllers[prefix]!;
final rawCurrent = _focusPageIndex[prefix] ?? 0;
final currentIndex = rawCurrent.clamp(0, items.length - 1);
final currentItem = items[currentIndex];
final currentId = _resolveDzikirId(currentItem, prefix, currentIndex);
final currentTarget = (currentItem['ulang'] as num?)?.toInt() ?? 1;
final currentCounter = _getCounter(currentId, currentTarget);
final isComplete = currentCounter.count >= currentCounter.target;
return Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 16),
child: Column(
children: [
Text(
title,
style: const TextStyle(fontSize: 22, fontWeight: FontWeight.w800),
),
const SizedBox(height: 4),
Text(
subtitle,
textAlign: TextAlign.center,
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
fontSize: 13,
),
),
const SizedBox(height: 12),
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: AppColors.primary.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(50),
),
child: Text(
'Item ${currentIndex + 1} dari ${items.length}',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w700,
color: AppColors.primary,
),
),
),
const SizedBox(height: 12),
Expanded(
child: Stack(
children: [
PageView.builder(
controller: controller,
itemCount: items.length,
onPageChanged: (index) {
setState(() {
_focusPageIndex[prefix] = index;
});
},
itemBuilder: (context, index) {
final item = items[index];
final dzikirId = _resolveDzikirId(item, prefix, index);
final target = (item['ulang'] as num?)?.toInt() ?? 1;
final counter = _getCounter(dzikirId, target);
final complete = counter.count >= counter.target;
return Padding(
padding: const EdgeInsets.only(bottom: 92),
child: _buildFocusCard(
isDark,
item: item,
index: index,
target: target,
counter: counter,
isComplete: complete,
),
);
},
),
if (settings.dzikirCounterButtonPosition == 'fabCircle')
Positioned(
right: 8,
bottom: 12,
child: _buildFocusCounterFab(
isDark,
isComplete: isComplete,
label: isComplete
? 'Selesai'
: '${currentCounter.count}/$currentTarget',
onTap: () => _onFocusCounterTap(
context,
settings,
prefix,
items,
),
),
)
else
Positioned(
left: 0,
right: 0,
bottom: 12,
child: _buildFocusCounterPill(
isComplete: isComplete,
label: isComplete
? 'Selesai'
: '${currentCounter.count} / $currentTarget',
onTap: () => _onFocusCounterTap(
context,
settings,
prefix,
items,
),
),
),
],
),
),
],
),
);
}
Widget _buildFocusCard(
bool isDark, {
required Map<String, dynamic> item,
required int index,
required int target,
required DzikirCounter counter,
required bool isComplete,
}) {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: isDark ? AppColors.surfaceDark : AppColors.surfaceLight,
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: isComplete
? AppColors.primary.withValues(alpha: 0.3)
: (isDark
? AppColors.primary.withValues(alpha: 0.08)
: AppColors.cream),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: AppColors.primary.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(50),
),
child: Text(
'$target KALI',
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w700,
color: AppColors.primary,
),
),
),
Text(
'${(index + 1).toString().padLeft(2, '0')}',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
),
const SizedBox(height: 20),
Expanded(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: double.infinity,
child: Text(
item['arab']?.toString() ?? '',
textAlign: TextAlign.right,
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 28,
fontWeight: FontWeight.w400,
height: 2.0,
),
),
),
const SizedBox(height: 14),
Text(
'"${item['indo']?.toString() ?? ''}"',
style: TextStyle(
fontSize: 14,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
height: 1.6,
),
),
const SizedBox(height: 12),
if (isComplete)
Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 6,
),
decoration: BoxDecoration(
color: AppColors.primary.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(50),
),
child: Text(
'Selesai (${counter.count}/$target)',
style: TextStyle(
color: AppColors.primary,
fontWeight: FontWeight.w700,
fontSize: 12,
),
),
),
],
),
),
),
],
),
);
}
Widget _buildFocusCounterPill({
required bool isComplete,
required String label,
required VoidCallback onTap,
}) {
return GestureDetector(
onTap: onTap,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 8),
padding: const EdgeInsets.symmetric(vertical: 14),
decoration: BoxDecoration(
color: isComplete
? AppColors.primary.withValues(alpha: 0.15)
: AppColors.primary,
borderRadius: BorderRadius.circular(50),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
isComplete ? LucideIcons.check : LucideIcons.fingerprint,
size: 18,
color: isComplete ? AppColors.primary : AppColors.onPrimary,
),
const SizedBox(width: 8),
Text(
label,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
color: isComplete ? AppColors.primary : AppColors.onPrimary,
),
),
],
),
),
);
}
Widget _buildFocusCounterFab(
bool isDark, {
required bool isComplete,
required String label,
required VoidCallback onTap,
}) {
return GestureDetector(
onTap: onTap,
child: Container(
width: 72,
height: 72,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: isComplete
? AppColors.primary.withValues(alpha: 0.15)
: AppColors.primary,
boxShadow: [
BoxShadow(
color: (isDark ? Colors.black : Colors.black26)
.withValues(alpha: 0.14),
blurRadius: 18,
offset: const Offset(0, 6),
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
isComplete ? LucideIcons.check : LucideIcons.fingerprint,
size: 18,
color: isComplete ? AppColors.primary : AppColors.onPrimary,
),
const SizedBox(height: 2),
Text(
label,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w700,
color: isComplete ? AppColors.primary : AppColors.onPrimary,
),
textAlign: TextAlign.center,
),
],
),
),
);
}
void _onFocusCounterTap(
BuildContext context,
AppSettings settings,
String prefix,
List<Map<String, dynamic>> items,
) {
if (items.isEmpty) return;
final currentIndex = (_focusPageIndex[prefix] ?? 0).clamp(0, items.length - 1);
final item = items[currentIndex];
final dzikirId = _resolveDzikirId(item, prefix, currentIndex);
final target = (item['ulang'] as num?)?.toInt() ?? 1;
final becameComplete = _increment(
dzikirId,
target,
hapticEnabled: settings.dzikirHapticOnCount,
);
if (!becameComplete) return;
final isLast = currentIndex == items.length - 1;
if (settings.dzikirAutoAdvance && !isLast) {
final controller = _pageControllers[prefix];
if (controller != null && controller.hasClients) {
controller.nextPage(
duration: const Duration(milliseconds: 240),
curve: Curves.easeOut,
);
}
return;
}
if (isLast) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Semua dzikir pada tab ini selesai'),
duration: Duration(seconds: 2),
),
);
}
}
String _resolveDzikirId(Map<String, dynamic> item, String prefix, int index) {
final rawId = item['id']?.toString();
if (rawId != null && rawId.isNotEmpty) {
return rawId;
}
return '${prefix}_${index + 1}';
}
Widget _buildEmptyState(
bool isDark, {
required String title,
required String subtitle,
}) {
return Center(
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
LucideIcons.inbox,
size: 42,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
const SizedBox(height: 12),
Text(
title,
style: const TextStyle(fontWeight: FontWeight.w700, fontSize: 15),
textAlign: TextAlign.center,
),
const SizedBox(height: 6),
Text(
subtitle,
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
textAlign: TextAlign.center,
),
],
),
),
);
}
}