Support Me

If you enjoy my work and want to support me, you can contribute via Patreon, PayPal, or Buy me a coffee.
Your support helps me keep creating and improving my projects!

Quran Pages with Ayah Detector

A Flutter package that displays high-quality Quran pages and provides precise ayah-level detection.
It enables developers to create rich, interactive Quran experiences such as ayah tapping, highlighting, long-press effects, and more.

This package is lightweight, fast, and optimized for both Quran reading apps and advanced memorization or Tafsir apps.

---

Features

• High-resolution Quran pages (Hafs Madani Mushaf).
• Accurate ayah bounding-box detection.
• Detect taps on specific ayahs.
• Customizable highlight colors and splash effects.
• Scroll mode & page view mode support.
• Built-in CLI tool for automatic assets installation.
• Ready to integrate into any Flutter project with minimal setup.

---

Installation

1. Make sure you're using flutter_lints v6

dev_dependencies:
  flutter_lints: ^6.0.0

2. Add to pubspec.yaml

dependencies:
  quran_pages_with_ayah_detector: ^1.0.5

or use

flutter pub add quran_pages_with_ayah_detector

3. Fetch required assets

dart run quran_pages_with_ayah_detector:quran_assets_cli fetch-assets

---

Preview

Should look like that in your project after installing the package & required assets:

Usage Example

Here's so examples for package usage in your code

Simple Usage

QuranPageView(
  onAyahTap: (sura, ayah, page) { // Optional Parameter
    // Handle tap
  },
)

Full Example With Custom UI

QuranPageView(
  pathImagePath: "assets/pages/", // Default value | Can be modified based on images path

  themeModeAdaption: false,
  textColor: Colors.black,
  highlightColor: Colors.greenAccent,
  highlightDuration: Duration(milliseconds: 100),

  onAyahTap: (sura, ayah, page) {
    print("Tapped Surah $sura, Ayah $ayah on Page $page"); // Put your own logic here
  },

  onSuraNameTap: () {
    print("Navigate to Sura List page"); // Navigate to an actual Sura list screen
  },

  onJuzNumberTap: () {
    print("Navigate to Juz List page");  // Navigate to an actual Juz list screen
  },
)