Flutter Quran

Need anything Flutter related? Reach out on LinkedIn

flutter_quran

This Package allows you integrate Quran offline in your app and it will work without the need for any other resources.

Note that the json used in the package to provide all quran details is from مجمع الملك فهد لطباعة المصحف الشريف

Features

  • View all Quran Pages like Madina's Quran.

  • Save user's last opened page.

  • Search for any text in Quran.

  • Get a list of all Jozzs and navigate to any Jozz.

  • Get a list of all hizbs and navigate to any hizb.

  • Get a list of all Surahs and navigate to any Surah.

  • Adding, removing and navigating to bookmarks .

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  flutter_quran: ^0.0.1

Import it:

import 'package:flutter_quran/flutter_quran.dart';

Initialize it:

FlutterQuran().init();

Usage Example

Basic Quran Screen

/// You can just add it to your code:
Scaffold(body: FlutterQuranScreen());
/// or give it some options:
FlutterQuranScreen(
appBar: AppBar(
actions: [
Padding(
padding: const EdgeInsetsDirectional.only(end: 22.0),
child: GestureDetector(
onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (ctx) => SearchScreen())),
child: Icon(Icons.search)),
),
],
),
onPageChanged: (int pageIndex) => print("Page changed: $pageIndex"),
),
  • You can find more in the examples

The package provides a lot of utils like

/// Getting all Quran's Jozzs, Hizbs, and Surahs
final jozzs = FlutterQuran().getAllJozzs();
final hizbs = FlutterQuran().getAllHizbs();
final surahs = FlutterQuran().getAllSurahs();

/// Adding, setting, removing, getting and navigating to bookmarks
// In init function
FlutterQuran().init(userBookmarks: [Bookmark(id: 0, colorCode: Colors.red.value, name: "Red Bookmark")]);
final usedBookmarks = FlutterQuran().getUsedBookmarks();
FlutterQuran().setBookmark(ayahId: 24, page: 4, bookmarkId: 0);
FlutterQuran().removeBookmark(bookmarkId: 0);
FlutterQuran().navigateToBookmark(bookmark);

/// searching for a word
TextField(
  onChanged: (txt) {
    final _ayahs = FlutterQuran().search(txt);
      setState(() {
        ayahs = [..._ayahs];
      });
  },
  decoration: InputDecoration(
    border:  OutlineInputBorder(borderSide: BorderSide(color: Colors.black),),
    hintText: 'بحث',
  ),
),
/// Navigating through Quran
FlutterQuran().navigateToAyah(ayah);
FlutterQuran().navigateToPage(1);
FlutterQuran().navigateToJozz(1);
FlutterQuran().navigateToHizb(1);
FlutterQuran().navigateToSurah(1);
FlutterQuran().navigateToBookmark(bookmark);
/// You can use Quran's style if you needed it
FlutterQuran().hafsStyle;

Feel free to ask a question or open an issue if needed on the Github repo

Libraries

flutter_quran