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

282
lib/features/tools/presentation/tools_screen.dart
View File

@@ -1,10 +1,15 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:hive_flutter/hive_flutter.dart';
import '../../../app/icons/app_icons.dart';
import '../../../app/theme/app_colors.dart';
import '../../../core/widgets/ayat_today_card.dart';
import '../../../core/widgets/notification_bell_button.dart';
import '../../../core/widgets/tool_card.dart';
import '../../../data/services/muslim_api_service.dart';
import '../../../data/local/hive_boxes.dart';
import '../../../data/local/models/app_settings.dart';
class ToolsScreen extends ConsumerWidget {
const ToolsScreen({super.key});
@@ -12,19 +17,72 @@ class ToolsScreen extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final isSimpleMode =
Hive.box<AppSettings>(HiveBoxes.settings).get('default')?.simpleMode ??
false;
final cards = <Widget>[
if (!isSimpleMode)
ToolCard(
icon: AppIcons.quran,
title: "Al-Qur'an\nTerjemahan",
color: const Color(0xFF00B894),
isDark: isDark,
onTap: () => context.push('/tools/quran'),
),
ToolCard(
icon: AppIcons.murattal,
title: "Qur'an\nMurattal",
color: const Color(0xFF7B61FF),
isDark: isDark,
onTap: () => context.push('/tools/quran/1/murattal'),
),
ToolCard(
icon: AppIcons.qibla,
title: 'Arah\nKiblat',
color: const Color(0xFF0984E3),
isDark: isDark,
onTap: () => context.push('/tools/qibla'),
),
if (!isSimpleMode)
ToolCard(
icon: AppIcons.dzikir,
title: 'Dzikir\nHarian',
color: AppColors.primary,
isDark: isDark,
onTap: () => context.push('/tools/dzikir'),
),
ToolCard(
icon: AppIcons.doa,
title: 'Kumpulan\nDoa',
color: const Color(0xFFE17055),
isDark: isDark,
onTap: () => context.push('/tools/doa'),
),
ToolCard(
icon: AppIcons.hadits,
title: "Hadits\nArba'in",
color: const Color(0xFF6C5CE7),
isDark: isDark,
onTap: () => context.push('/tools/hadits'),
),
ToolCard(
icon: AppIcons.quranEnrichment,
title: "Pendalaman\nAl-Qur'an",
color: const Color(0xFF00CEC9),
isDark: isDark,
onTap: () => context.push('/tools/quran/enrichment'),
),
];
return Scaffold(
appBar: AppBar(
title: const Text('Alat Islami'),
centerTitle: false,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(LucideIcons.bell),
),
const NotificationBellButton(),
IconButton(
onPressed: () => context.push('/settings'),
icon: const Icon(LucideIcons.settings),
icon: const AppIcon(glyph: AppIcons.settings),
),
const SizedBox(width: 8),
],
@@ -34,7 +92,7 @@ class ToolsScreen extends ConsumerWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
const Text(
'AKSES CEPAT',
style: TextStyle(
fontSize: 11,
@@ -44,193 +102,37 @@ class ToolsScreen extends ConsumerWidget {
),
),
const SizedBox(height: 12),
Row(
children: [
Expanded(
child: ToolCard(
icon: LucideIcons.bookOpen,
title: 'Al-Quran\nTerjemahan',
color: const Color(0xFF00B894),
isDark: isDark,
onTap: () => context.push('/tools/quran'),
),
),
const SizedBox(width: 12),
Expanded(
child: ToolCard(
icon: LucideIcons.headphones,
title: 'Quran\nMurattal',
color: const Color(0xFF7B61FF),
isDark: isDark,
onTap: () => context.push('/tools/quran/1/murattal'),
),
),
],
),
const SizedBox(height: 12),
Row(
children: [
Expanded(
child: ToolCard(
icon: LucideIcons.compass,
title: 'Arah\nKiblat',
color: const Color(0xFF0984E3),
isDark: isDark,
onTap: () => context.push('/tools/qibla'),
),
),
const SizedBox(width: 12),
Expanded(
child: ToolCard(
icon: LucideIcons.sparkles,
title: 'Dzikir\nHarian',
color: AppColors.primary,
isDark: isDark,
onTap: () => context.push('/tools/dzikir'),
),
),
],
),
const SizedBox(height: 12),
Row(
children: [
Expanded(
child: ToolCard(
icon: LucideIcons.heart,
title: 'Kumpulan\nDoa',
color: const Color(0xFFE17055),
isDark: isDark,
onTap: () => context.push('/tools/doa'),
),
),
const SizedBox(width: 12),
Expanded(
child: ToolCard(
icon: LucideIcons.library,
title: "Hadits\nArba'in",
color: const Color(0xFF6C5CE7),
isDark: isDark,
onTap: () => context.push('/tools/hadits'),
),
),
],
),
const SizedBox(height: 12),
Row(
children: [
Expanded(
child: ToolCard(
icon: LucideIcons.sparkles,
title: 'Quran\nEnrichment',
color: const Color(0xFF00CEC9),
isDark: isDark,
onTap: () => context.push('/tools/quran/enrichment'),
),
),
const Expanded(child: SizedBox()),
],
),
_buildQuickActionsGrid(cards),
const SizedBox(height: 28),
FutureBuilder<Map<String, dynamic>?>(
future: MuslimApiService.instance.getDailyAyat(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: isDark
? AppColors.primary.withValues(alpha: 0.08)
: const Color(0xFFF5F9F0),
borderRadius: BorderRadius.circular(16),
),
child: const Center(child: CircularProgressIndicator()),
);
}
if (!snapshot.hasData || snapshot.data == null) {
return const SizedBox.shrink();
}
final data = snapshot.data!;
return Container(
width: double.infinity,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: isDark
? AppColors.primary.withValues(alpha: 0.08)
: const Color(0xFFF5F9F0),
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Ayat Hari Ini',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
IconButton(
icon: Icon(
LucideIcons.share2,
size: 18,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
onPressed: () {},
),
],
),
const SizedBox(height: 12),
Align(
alignment: Alignment.centerRight,
child: Text(
data['teksArab'] ?? '',
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 24,
fontWeight: FontWeight.w400,
height: 1.8,
),
textAlign: TextAlign.right,
),
),
const SizedBox(height: 12),
Text(
'"${data['teksIndonesia'] ?? ''}"',
style: TextStyle(
fontSize: 14,
fontStyle: FontStyle.italic,
height: 1.5,
color: isDark ? Colors.white : Colors.black87,
),
),
const SizedBox(height: 12),
Text(
'QS. ${data['surahName']}: ${data['nomorAyat']}',
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppColors.primary,
),
),
],
),
);
},
AyatTodayCard(
headerText: 'Ayat Hari Ini',
headerStyle: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
),
),
);
}
Widget _buildQuickActionsGrid(List<Widget> cards) {
const spacing = 12.0;
return LayoutBuilder(
builder: (context, constraints) {
final cardWidth = (constraints.maxWidth - spacing) / 2;
return Wrap(
spacing: spacing,
runSpacing: spacing,
children: [
for (final card in cards) SizedBox(width: cardWidth, child: card),
],
);
},
);
}
}