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

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),