flutter_quran 0.0.4

A Quran Package you can put in your app and it will work without the need for any other resources.

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.

• Navigate to any page 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.2

copied to clipboard

Import it:

import 'package:flutter_quran/flutter_quran.dart';

copied to clipboard

Initialize it:

FlutterQuran().init();

copied to clipboard

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

copied to clipboard

• 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();

/// And you can get a specific Surah's full data
final surah = FlutterQuran().getSurah(1);

copied to clipboard

/// 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);

copied to clipboard

/// 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: 'بحث',
  ),
),

copied to clipboard

/// Navigating through Quran
FlutterQuran().navigateToAyah(ayah);
FlutterQuran().navigateToPage(1);
FlutterQuran().navigateToJozz(1);
FlutterQuran().navigateToHizb(1);
FlutterQuran().navigateToSurah(1);
FlutterQuran().navigateToBookmark(bookmark);

copied to clipboard

/// You can use Quran's style if you needed it
FlutterQuran().hafsStyle;

copied to clipboard

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