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

Polish navigation, Quran flows, and sharing UX

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-03-18 00:07:10 +07:00
parent a049129a35
commit 2d09b5b356
59 changed files with 11835 additions and 3184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

384
lib/features/quran/presentation/quran_bookmarks_screen.dart
View File

@@ -4,12 +4,18 @@ import 'package:lucide_icons/lucide_icons.dart';
import 'package:go_router/go_router.dart';
import 'package:intl/intl.dart';
import '../../../app/theme/app_colors.dart';
import '../../../core/widgets/arabic_text.dart';
import '../../../data/local/hive_boxes.dart';
import '../../../data/local/models/quran_bookmark.dart';
import '../../../data/local/models/app_settings.dart';
import '../../../data/services/muslim_api_service.dart';
class QuranBookmarksScreen extends StatefulWidget {
const QuranBookmarksScreen({super.key});
final bool isSimpleModeTab;
const QuranBookmarksScreen({
super.key,
this.isSimpleModeTab = false,
});
@override
State<QuranBookmarksScreen> createState() => _QuranBookmarksScreenState();
@@ -18,6 +24,8 @@ class QuranBookmarksScreen extends StatefulWidget {
class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
bool _showLatin = true;
bool _showTerjemahan = true;
final Map<int, Future<Map<String, dynamic>?>> _surahFutureCache = {};
final Map<dynamic, Future<_ResolvedBookmarkContent?>> _bookmarkFutureCache = {};
String _readingRoute(int surahId, int verseId) {
final isSimple =
@@ -39,13 +47,16 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
void _showDisplaySettings() {
showModalBottomSheet(
context: context,
isScrollControlled: true,
useSafeArea: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
builder: (ctx) => StatefulBuilder(
builder: (context, setModalState) {
final keyboardInset = MediaQuery.of(context).viewInsets.bottom;
return Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
padding: EdgeInsets.fromLTRB(16, 20, 16, 20 + keyboardInset),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
@@ -90,6 +101,59 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
);
}
Future<Map<String, dynamic>?> _getSurah(int surahId) {
return _surahFutureCache.putIfAbsent(
surahId,
() => MuslimApiService.instance.getSurah(surahId),
);
}
Future<_ResolvedBookmarkContent?> _loadResolvedBookmarkContent(
QuranBookmark bookmark,
) async {
final surah = await _getSurah(bookmark.surahId);
final verses = List<Map<String, dynamic>>.from(surah?['ayat'] ?? []);
final verseIndex = bookmark.verseId - 1;
if (verseIndex < 0 || verseIndex >= verses.length) return null;
final verse = verses[verseIndex];
final resolved = _ResolvedBookmarkContent(
verseText: verse['teksArab']?.toString().trim().isNotEmpty == true
? verse['teksArab'].toString().trim()
: bookmark.verseText,
verseLatin: verse['teksLatin']?.toString().trim().isNotEmpty == true
? verse['teksLatin'].toString().trim()
: bookmark.verseLatin,
verseTranslation:
verse['teksIndonesia']?.toString().trim().isNotEmpty == true
? verse['teksIndonesia'].toString().trim()
: bookmark.verseTranslation,
);
final needsUpdate = bookmark.verseText != resolved.verseText ||
bookmark.verseLatin != resolved.verseLatin ||
bookmark.verseTranslation != resolved.verseTranslation;
if (needsUpdate) {
bookmark.verseText = resolved.verseText;
bookmark.verseLatin = resolved.verseLatin;
bookmark.verseTranslation = resolved.verseTranslation;
await bookmark.save();
}
return resolved;
}
Future<_ResolvedBookmarkContent?> _getResolvedBookmarkContent(
QuranBookmark bookmark,
) {
final bookmarkKey = bookmark.key ?? '${bookmark.surahId}_${bookmark.verseId}';
return _bookmarkFutureCache.putIfAbsent(
bookmarkKey,
() => _loadResolvedBookmarkContent(bookmark),
);
}
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
@@ -105,94 +169,106 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
),
],
),
body: ValueListenableBuilder(
valueListenable: Hive.box<QuranBookmark>(HiveBoxes.bookmarks).listenable(),
builder: (context, Box<QuranBookmark> box, _) {
if (box.isEmpty) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
LucideIcons.bookmark,
size: 64,
color: AppColors.primary.withValues(alpha: 0.3),
),
const SizedBox(height: 16),
Text(
'Belum ada markah',
body: SafeArea(
top: false,
bottom: !widget.isSimpleModeTab,
child: ValueListenableBuilder(
valueListenable:
Hive.box<QuranBookmark>(HiveBoxes.bookmarks).listenable(),
builder: (context, Box<QuranBookmark> box, _) {
if (box.isEmpty) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
LucideIcons.bookmark,
size: 64,
color: AppColors.primary.withValues(alpha: 0.3),
),
const SizedBox(height: 16),
Text(
'Belum ada markah',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: isDark ? Colors.white : Colors.black87,
),
),
const SizedBox(height: 8),
Text(
'Tandai ayat saat membaca Al-Quran',
style: TextStyle(
fontSize: 14,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
textAlign: TextAlign.center,
),
],
),
);
}
// Filter bookmarks
final allBookmarks = box.values.toList();
final lastRead = allBookmarks.where((b) => b.isLastRead).toList();
final favorites = allBookmarks.where((b) => !b.isLastRead).toList()
..sort((a, b) => b.savedAt.compareTo(a.savedAt));
return ListView(
padding: const EdgeInsets.all(16),
children: [
if (lastRead.isNotEmpty) ...[
const Text(
'TERAKHIR DIBACA',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: isDark ? Colors.white : Colors.black87,
fontSize: 11,
fontWeight: FontWeight.w700,
letterSpacing: 1.5,
color: AppColors.sage,
),
),
const SizedBox(height: 8),
Text(
'Tandai ayat saat membaca Al-Quran',
style: TextStyle(
fontSize: 14,
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 12),
_buildBookmarkCard(context, lastRead.first, isDark, box,
isLastRead: true),
const SizedBox(height: 24),
],
),
if (favorites.isNotEmpty) ...[
const Text(
'AYAT FAVORIT',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w700,
letterSpacing: 1.5,
color: AppColors.sage,
),
),
const SizedBox(height: 12),
...favorites.map((fav) => Padding(
padding: const EdgeInsets.only(bottom: 12),
child: _buildBookmarkCard(context, fav, isDark, box,
isLastRead: false),
)),
],
],
);
}
// Filter bookmarks
final allBookmarks = box.values.toList();
final lastRead = allBookmarks.where((b) => b.isLastRead).toList();
final favorites = allBookmarks.where((b) => !b.isLastRead).toList()
..sort((a, b) => b.savedAt.compareTo(a.savedAt));
return ListView(
padding: const EdgeInsets.all(16),
children: [
if (lastRead.isNotEmpty) ...[
const Text(
'TERAKHIR DIBACA',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w700,
letterSpacing: 1.5,
color: AppColors.sage,
),
),
const SizedBox(height: 12),
_buildBookmarkCard(context, lastRead.first, isDark, box, isLastRead: true),
const SizedBox(height: 24),
],
if (favorites.isNotEmpty) ...[
const Text(
'AYAT FAVORIT',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w700,
letterSpacing: 1.5,
color: AppColors.sage,
),
),
const SizedBox(height: 12),
...favorites.map((fav) => Padding(
padding: const EdgeInsets.only(bottom: 12),
child: _buildBookmarkCard(context, fav, isDark, box, isLastRead: false),
)),
],
],
);
},
},
),
),
);
}
Widget _buildBookmarkCard(BuildContext context, QuranBookmark bookmark, bool isDark, Box<QuranBookmark> box, {required bool isLastRead}) {
Widget _buildBookmarkCard(BuildContext context, QuranBookmark bookmark,
bool isDark, Box<QuranBookmark> box,
{required bool isLastRead}) {
final dateStr = DateFormat('dd MMM yyyy, HH:mm').format(bookmark.savedAt);
final resolvedFuture = _getResolvedBookmarkContent(bookmark);
return InkWell(
onTap: () => context.push(_readingRoute(bookmark.surahId, bookmark.verseId)),
onTap: () =>
context.push(_readingRoute(bookmark.surahId, bookmark.verseId)),
borderRadius: BorderRadius.circular(16),
child: Container(
padding: const EdgeInsets.all(16),
@@ -200,18 +276,22 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
color: isDark ? AppColors.surfaceDark : AppColors.surfaceLight,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: isLastRead
? AppColors.primary.withValues(alpha: 0.3)
: (isDark ? AppColors.primary.withValues(alpha: 0.1) : AppColors.cream),
color: isLastRead
? AppColors.primary.withValues(alpha: 0.3)
: (isDark
? AppColors.primary.withValues(alpha: 0.1)
: AppColors.cream),
width: isLastRead ? 1.5 : 1.0,
),
boxShadow: isLastRead ? [
BoxShadow(
color: AppColors.primary.withValues(alpha: 0.05),
blurRadius: 10,
offset: const Offset(0, 4),
)
] : null,
boxShadow: isLastRead
? [
BoxShadow(
color: AppColors.primary.withValues(alpha: 0.05),
blurRadius: 10,
offset: const Offset(0, 4),
)
]
: null,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -220,7 +300,8 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: AppColors.primary.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(8),
@@ -229,7 +310,8 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
mainAxisSize: MainAxisSize.min,
children: [
if (isLastRead) ...[
const Icon(LucideIcons.pin, size: 12, color: AppColors.primary),
const Icon(LucideIcons.pin,
size: 12, color: AppColors.primary),
const SizedBox(width: 4),
],
Text(
@@ -244,7 +326,8 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
),
),
IconButton(
icon: const Icon(LucideIcons.trash2, color: Colors.red, size: 20),
icon: const Icon(LucideIcons.trash2,
color: Colors.red, size: 20),
onPressed: () => box.delete(bookmark.key),
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
@@ -252,76 +335,93 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
],
),
const SizedBox(height: 16),
Align(
alignment: Alignment.centerRight,
child: Text(
bookmark.verseText,
textAlign: TextAlign.right,
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 22,
fontWeight: FontWeight.w400,
height: 1.8,
),
),
),
if (_showLatin && bookmark.verseLatin != null) ...[
const SizedBox(height: 12),
Text(
bookmark.verseLatin!,
style: const TextStyle(
fontSize: 13,
fontStyle: FontStyle.italic,
color: AppColors.primary,
),
),
],
if (_showTerjemahan && bookmark.verseTranslation != null) ...[
const SizedBox(height: 8),
Text(
bookmark.verseTranslation!,
style: TextStyle(
fontSize: 14,
height: 1.6,
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
),
),
],
FutureBuilder<_ResolvedBookmarkContent?>(
future: resolvedFuture,
builder: (context, snapshot) {
final content = snapshot.data ??
_ResolvedBookmarkContent(
verseText: bookmark.verseText,
verseLatin: bookmark.verseLatin,
verseTranslation: bookmark.verseTranslation,
);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerRight,
child: ArabicText(
content.verseText,
textAlign: TextAlign.right,
baseFontSize: 22,
fontWeight: FontWeight.w400,
height: 1.8,
),
),
if (_showLatin && content.verseLatin != null) ...[
const SizedBox(height: 12),
Text(
content.verseLatin!,
style: const TextStyle(
fontSize: 13,
fontStyle: FontStyle.italic,
color: AppColors.primary,
),
),
],
if (_showTerjemahan &&
content.verseTranslation != null) ...[
const SizedBox(height: 8),
Text(
content.verseTranslation!,
style: TextStyle(
fontSize: 14,
height: 1.6,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
],
);
},
),
const SizedBox(height: 16),
if (isLastRead) ...[
SizedBox(
width: double.infinity,
child: FilledButton.icon(
onPressed: () =>
context.push(_readingRoute(bookmark.surahId, bookmark.verseId)),
onPressed: () => context
.push(_readingRoute(bookmark.surahId, bookmark.verseId)),
icon: const Icon(LucideIcons.bookOpen, size: 18),
label: const Text('Lanjutkan Membaca'),
style: FilledButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
),
),
),
const SizedBox(height: 12),
],
Row(
children: [
Icon(
LucideIcons.clock,
size: 12,
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
const SizedBox(width: 4),
Text(
'${isLastRead ? 'Ditandai' : 'Disimpan'}: $dateStr',
style: TextStyle(
fontSize: 10,
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
@@ -332,3 +432,15 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
);
}
}
class _ResolvedBookmarkContent {
const _ResolvedBookmarkContent({
required this.verseText,
this.verseLatin,
this.verseTranslation,
});
final String verseText;
final String? verseLatin;
final String? verseTranslation;
}

264
lib/features/quran/presentation/quran_enrichment_screen.dart
View File

@@ -1,10 +1,18 @@
import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../app/theme/app_colors.dart';
import '../../../core/widgets/arabic_text.dart';
import '../../../data/local/hive_boxes.dart';
import '../../../data/local/models/app_settings.dart';
import '../../../data/services/muslim_api_service.dart';
class QuranEnrichmentScreen extends StatefulWidget {
const QuranEnrichmentScreen({super.key});
final bool isSimpleModeTab;
const QuranEnrichmentScreen({
super.key,
this.isSimpleModeTab = false,
});
@override
State<QuranEnrichmentScreen> createState() => _QuranEnrichmentScreenState();
@@ -15,12 +23,12 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
late TabController _tabController;
final TextEditingController _searchController = TextEditingController();
final TextEditingController _pageController = TextEditingController(text: '1');
final TextEditingController _pageController =
TextEditingController(text: '1');
List<Map<String, dynamic>> _surahs = [];
List<Map<String, dynamic>> _searchResults = [];
List<Map<String, dynamic>> _tafsirItems = [];
List<Map<String, dynamic>> _asbabItems = [];
List<Map<String, dynamic>> _juzItems = [];
List<Map<String, dynamic>> _pageItems = [];
List<Map<String, dynamic>> _themeItems = [];
@@ -31,7 +39,6 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
bool _loadingInit = true;
bool _loadingSearch = false;
bool _loadingTafsir = false;
bool _loadingAsbab = false;
bool _loadingPage = false;
String? _error;
@@ -42,7 +49,7 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
@override
void initState() {
super.initState();
_tabController = TabController(length: 7, vsync: this);
_tabController = TabController(length: 6, vsync: this);
_bootstrap();
}
@@ -69,9 +76,8 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
if (!mounted) return;
setState(() {
_surahs = surahs;
_selectedSurahId = surahs.isNotEmpty
? ((surahs.first['nomor'] as int?) ?? 1)
: 1;
_selectedSurahId =
surahs.isNotEmpty ? ((surahs.first['nomor'] as int?) ?? 1) : 1;
_juzItems = juz;
_themeItems = themes;
_asmaItems = asma;
@@ -79,7 +85,6 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
});
await _loadTafsirForSelectedSurah();
await _loadAsbabForSelectedSurah();
await _loadPageAyah();
} catch (_) {
if (!mounted) return;
@@ -117,16 +122,6 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
});
}
Future<void> _loadAsbabForSelectedSurah() async {
setState(() => _loadingAsbab = true);
final result = await MuslimApiService.instance.getAsbabBySurah(_selectedSurahId);
if (!mounted) return;
setState(() {
_asbabItems = result;
_loadingAsbab = false;
});
}
Future<void> _loadPageAyah() async {
setState(() => _loadingPage = true);
final page = int.tryParse(_pageController.text.trim()) ?? _selectedPage;
@@ -181,6 +176,62 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
return 'Surah $surahId';
}
void _showArabicFontSettings() {
final settingsBox = Hive.box<AppSettings>(HiveBoxes.settings);
final settings = settingsBox.get('default') ?? AppSettings();
if (!settings.isInBox) {
settingsBox.put('default', settings);
}
double arabicFontSize = settings.arabicFontSize;
showModalBottomSheet(
context: context,
isScrollControlled: true,
useSafeArea: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
builder: (ctx) => StatefulBuilder(
builder: (context, setModalState) {
final keyboardInset = MediaQuery.of(context).viewInsets.bottom;
return Padding(
padding: EdgeInsets.fromLTRB(16, 20, 16, 20 + keyboardInset),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Pengaturan Tampilan',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
const SizedBox(height: 16),
const Text('Ukuran Font Arab'),
Slider(
value: arabicFontSize,
min: 16,
max: 40,
divisions: 12,
label: '${arabicFontSize.round()}pt',
activeColor: AppColors.primary,
onChanged: (value) {
setModalState(() => arabicFontSize = value);
settings.arabicFontSize = value;
if (settings.isInBox) {
settings.save();
} else {
settingsBox.put('default', settings);
}
},
),
const SizedBox(height: 8),
],
),
);
},
),
);
}
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
@@ -188,12 +239,18 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
return Scaffold(
appBar: AppBar(
title: const Text('Quran Enrichment'),
actionsPadding: const EdgeInsets.only(right: 8),
actions: [
IconButton(
onPressed: _bootstrap,
icon: const Icon(LucideIcons.refreshCw),
tooltip: 'Muat ulang',
),
IconButton(
onPressed: _showArabicFontSettings,
icon: const Icon(LucideIcons.settings2),
tooltip: 'Pengaturan tampilan',
),
],
bottom: TabBar(
controller: _tabController,
@@ -206,7 +263,6 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
tabs: const [
Tab(text: 'Cari'),
Tab(text: 'Tafsir'),
Tab(text: 'Asbab'),
Tab(text: 'Juz'),
Tab(text: 'Halaman'),
Tab(text: 'Tema'),
@@ -214,31 +270,34 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
],
),
),
body: _loadingInit
? const Center(child: CircularProgressIndicator())
: _error != null
? Center(
child: Text(
_error!,
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
body: SafeArea(
top: false,
bottom: !widget.isSimpleModeTab,
child: _loadingInit
? const Center(child: CircularProgressIndicator())
: _error != null
? Center(
child: Text(
_error!,
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
)
: TabBarView(
controller: _tabController,
children: [
_buildSearchTab(context, isDark),
_buildTafsirTab(context, isDark),
_buildJuzTab(context, isDark),
_buildPageTab(context, isDark),
_buildThemeTab(context, isDark),
_buildAsmaTab(context, isDark),
],
),
)
: TabBarView(
controller: _tabController,
children: [
_buildSearchTab(context, isDark),
_buildTafsirTab(context, isDark),
_buildAsbabTab(context, isDark),
_buildJuzTab(context, isDark),
_buildPageTab(context, isDark),
_buildThemeTab(context, isDark),
_buildAsmaTab(context, isDark),
],
),
),
);
}
@@ -342,15 +401,12 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
const SizedBox(height: 8),
Align(
alignment: Alignment.centerRight,
child: Text(
child: ArabicText(
ayah['arab']?.toString() ?? '',
textAlign: TextAlign.right,
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 24,
fontWeight: FontWeight.w400,
height: 1.8,
),
baseFontSize: 24,
fontWeight: FontWeight.w400,
height: 1.8,
),
),
const SizedBox(height: 8),
@@ -396,13 +452,10 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
ArabicText(
word['arab']?.toString() ?? '',
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 18,
fontWeight: FontWeight.w400,
),
baseFontSize: 18,
fontWeight: FontWeight.w400,
),
const SizedBox(height: 2),
Text(
@@ -474,41 +527,6 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
);
}
Widget _buildAsbabTab(BuildContext context, bool isDark) {
return Column(
children: [
_buildSurahSelector(
onChanged: (value) {
setState(() => _selectedSurahId = value);
_loadAsbabForSelectedSurah();
},
),
Expanded(
child: _loadingAsbab
? const Center(child: CircularProgressIndicator())
: _asbabItems.isEmpty
? _emptyText(
isDark,
'Belum ada data asbabun nuzul untuk surah ini',
)
: ListView.builder(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
itemCount: _asbabItems.length,
itemBuilder: (context, index) {
final item = _asbabItems[index];
final ayah = item['nomorAyat']?.toString() ?? '-';
return _buildCard(
isDark,
title: 'Ayat $ayah',
body: item['text']?.toString() ?? '',
);
},
),
),
],
);
}
Widget _buildJuzTab(BuildContext context, bool isDark) {
if (_juzItems.isEmpty) {
return _emptyText(isDark, 'Data juz tidak tersedia');
@@ -575,11 +593,11 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
final surahId = (item['surah'] as num?)?.toInt() ?? 0;
final ayah = item['ayah']?.toString() ?? '-';
return _buildCard(
return _buildArabicCard(
isDark,
title: '${_surahNameById(surahId)} : $ayah',
body:
'${item['arab']?.toString() ?? ''}\n\n${item['text']?.toString() ?? ''}',
arabic: item['arab']?.toString() ?? '',
translation: item['text']?.toString() ?? '',
);
},
),
@@ -652,13 +670,10 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
ArabicText(
item['arab']?.toString() ?? '',
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 22,
fontWeight: FontWeight.w400,
),
baseFontSize: 22,
fontWeight: FontWeight.w400,
),
Text(
item['latin']?.toString() ?? '',
@@ -727,7 +742,54 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
);
}
Widget _buildCard(bool isDark, {required String title, required String body}) {
Widget _buildArabicCard(
bool isDark, {
required String title,
required String arabic,
required String translation,
}) {
return Container(
margin: const EdgeInsets.only(bottom: 10),
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: isDark ? AppColors.surfaceDark : AppColors.surfaceLight,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isDark
? AppColors.primary.withValues(alpha: 0.1)
: AppColors.cream,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
fontWeight: FontWeight.w700,
color: AppColors.primary,
),
),
const SizedBox(height: 8),
Align(
alignment: Alignment.centerRight,
child: ArabicText(
arabic,
textAlign: TextAlign.right,
baseFontSize: 22,
fontWeight: FontWeight.w400,
height: 1.8,
),
),
const SizedBox(height: 8),
Text(translation, style: const TextStyle(height: 1.5)),
],
),
);
}
Widget _buildCard(bool isDark,
{required String title, required String body}) {
return Container(
margin: const EdgeInsets.only(bottom: 10),
padding: const EdgeInsets.all(14),

1102
lib/features/quran/presentation/quran_murattal_screen.dart
View File

File diff suppressed because it is too large Load Diff

1190
lib/features/quran/presentation/quran_reading_screen.dart
View File

File diff suppressed because it is too large Load Diff

252
lib/features/quran/presentation/quran_screen.dart
View File

@@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:hive_flutter/hive_flutter.dart';
import '../../../app/theme/app_colors.dart';
import '../../../core/widgets/arabic_text.dart';
import '../../../data/local/hive_boxes.dart';
import '../../../data/local/models/app_settings.dart';
import '../../../data/local/models/quran_bookmark.dart';
@@ -47,13 +48,16 @@ class _QuranScreenState extends ConsumerState<QuranScreen> {
void _showDisplaySettings() {
showModalBottomSheet(
context: context,
isScrollControlled: true,
useSafeArea: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
builder: (ctx) => StatefulBuilder(
builder: (context, setModalState) {
final keyboardInset = MediaQuery.of(context).viewInsets.bottom;
return Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
padding: EdgeInsets.fromLTRB(16, 20, 16, 20 + keyboardInset),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
@@ -134,140 +138,148 @@ class _QuranScreenState extends ConsumerState<QuranScreen> {
),
],
),
body: Column(
children: [
// Search bar
Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 12),
child: Container(
decoration: BoxDecoration(
color: isDark ? AppColors.surfaceDark : AppColors.surfaceLight,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isDark
? AppColors.primary.withValues(alpha: 0.1)
: AppColors.cream,
body: SafeArea(
top: false,
bottom: !widget.isSimpleModeTab,
child: Column(
children: [
// Search bar
Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 12),
child: Container(
decoration: BoxDecoration(
color:
isDark ? AppColors.surfaceDark : AppColors.surfaceLight,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isDark
? AppColors.primary.withValues(alpha: 0.1)
: AppColors.cream,
),
),
),
child: TextField(
onChanged: (v) => setState(() => _searchQuery = v),
decoration: InputDecoration(
hintText: 'Cari surah...',
prefixIcon: Icon(LucideIcons.search,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight),
border: InputBorder.none,
contentPadding:
const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
child: TextField(
onChanged: (v) => setState(() => _searchQuery = v),
decoration: InputDecoration(
hintText: 'Cari surah...',
prefixIcon: Icon(LucideIcons.search,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight),
border: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(
horizontal: 16, vertical: 14),
),
),
),
),
),
// Surah list
Expanded(
child: _loading
? const Center(child: CircularProgressIndicator())
: filtered.isEmpty
? Center(
child: Text(
_searchQuery.isEmpty
? 'Tidak dapat memuat data'
: 'Surah tidak ditemukan',
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
)
: ValueListenableBuilder(
valueListenable: Hive.box<QuranBookmark>(HiveBoxes.bookmarks).listenable(),
builder: (context, box, _) {
return ListView.separated(
padding: const EdgeInsets.symmetric(horizontal: 16),
itemCount: filtered.length,
separatorBuilder: (_, __) => Divider(
height: 1,
// Surah list
Expanded(
child: _loading
? const Center(child: CircularProgressIndicator())
: filtered.isEmpty
? Center(
child: Text(
_searchQuery.isEmpty
? 'Tidak dapat memuat data'
: 'Surah tidak ditemukan',
style: TextStyle(
color: isDark
? AppColors.primary.withValues(alpha: 0.08)
: AppColors.cream,
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
itemBuilder: (context, i) {
final surah = filtered[i];
final number = surah['nomor'] ?? (i + 1);
final nameLatin = surah['namaLatin'] ?? '';
final nameArabic = surah['nama'] ?? '';
final totalVerses = surah['jumlahAyat'] ?? 0;
final tempatTurun = surah['tempatTurun'] ?? '';
final arti = surah['arti'] ?? '';
final hasLastRead = box.values.any((b) => b.isLastRead && b.surahId == number);
),
)
: ValueListenableBuilder(
valueListenable:
Hive.box<QuranBookmark>(HiveBoxes.bookmarks)
.listenable(),
builder: (context, box, _) {
return ListView.separated(
padding:
const EdgeInsets.symmetric(horizontal: 16),
itemCount: filtered.length,
separatorBuilder: (_, __) => Divider(
height: 1,
color: isDark
? AppColors.primary.withValues(alpha: 0.08)
: AppColors.cream,
),
itemBuilder: (context, i) {
final surah = filtered[i];
final number = surah['nomor'] ?? (i + 1);
final nameLatin = surah['namaLatin'] ?? '';
final nameArabic = surah['nama'] ?? '';
final totalVerses = surah['jumlahAyat'] ?? 0;
final tempatTurun = surah['tempatTurun'] ?? '';
final arti = surah['arti'] ?? '';
return ListTile(
onTap: () => context.push(widget.isSimpleModeTab
? '/quran/$number'
: '/tools/quran/$number'),
contentPadding: const EdgeInsets.symmetric(
horizontal: 0, vertical: 6),
leading: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: AppColors.primary
.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text(
'$number',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primary,
final hasLastRead = box.values.any(
(b) => b.isLastRead && b.surahId == number);
return ListTile(
onTap: () => context.push(
widget.isSimpleModeTab
? '/quran/$number'
: '/tools/quran/$number'),
contentPadding: const EdgeInsets.symmetric(
horizontal: 0, vertical: 6),
leading: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: AppColors.primary
.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text(
'$number',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primary,
),
),
),
),
),
title: Row(
children: [
Text(
nameLatin,
style: const TextStyle(
fontWeight: FontWeight.w600,
fontSize: 15,
title: Row(
children: [
Text(
nameLatin,
style: const TextStyle(
fontWeight: FontWeight.w600,
fontSize: 15,
),
),
),
if (hasLastRead) ...[
const SizedBox(width: 8),
const Icon(LucideIcons.pin, size: 14, color: AppColors.primary),
if (hasLastRead) ...[
const SizedBox(width: 8),
const Icon(LucideIcons.pin,
size: 14, color: AppColors.primary),
],
],
],
),
subtitle: Text(
'$arti • $totalVerses Ayat • $tempatTurun',
style: TextStyle(
fontSize: 12,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
trailing: Text(
nameArabic,
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 18,
subtitle: Text(
'$arti • $totalVerses Ayat • $tempatTurun',
style: TextStyle(
fontSize: 12,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
trailing: ArabicText(
nameArabic,
baseFontSize: 18,
fontWeight: FontWeight.w400,
),
),
);
},
);
},
),
),
],
);
},
);
},
),
),
],
),
),
);
}