dzikr 0.1.3 icon indicating copy to clipboard operation
dzikr: ^0.1.3 copied to clipboard

Islamic feature tool collection package

Introduction #

Bismillah, Alhamdulillah, Washalatu Wasalam 'Ala Rasulillah.
Praise to Allah, may the peace and blessing always be upon to our Prophet Muhammad Shallallahu 'alaihi wasalam.

Today, technology is developing quickly. As we know Technology can be a tool that really helps us in our daily task and work. Also if we used it properly, it can support our ibadah to Allah.

Supporting tools such as prayer schedules, Al Quran and a collection of adzkar can be accessed easily through technology such as our phone.

The tools mentioned are very basic and are often used nowdays, you will find various applications that require or at least use tools that mentioned above. So, it inspires us to make it easier for developers to bring these features to people quickly and easily.

introduces Dzikr, a collection of worship support tools for the powerful cross-platform framework, Flutter. What is Dhikr and what can you do with it, insyaallah that will be explained further below.

Dzikr #

Dzikr is a collection of islamic features tools for Flutter app development, Dzikr collect many dependecy and APIS, organize and process it to be ready used feature in your app.

Tool List #

the following is a list of Dzikr main tools :

Current Version Information #

Dzikr is currently on beta version. Some features are still on best practice research and may feel buggy, major changes may happen in future version releases.

Installation #

Install using pub

flutter pub add dzikr

There is requirement things todo in every specific tools in Dzikr, you can read it in each tool section

Quick hint : Prayer Tools will require you to adding location premission on both Android Manifest and iOS info.plist as the tool contain geolocator, Quran tool wil required you static quran .json file, also with Book tool.

Use Dzikr in your dart file by importing it

import 'package:dzikr/dzikr.dart';

Prayer Time Tool #

Prayer Time Tool is tool for showing prayer schedule based on user location, this package contain geolocator and need premission for using gps, the Tool is returning today and monthly prayer schedule, also device location info that can be showed to user.

Requirement #

This package include Geocoding that need user premission for process device location.

  1. Please following official Geocoding Usage Guide for adding permission both in Android and iOS.

after that all done Insyaallah, the tool is ready for use.

Usage #

  1. Init the Tool
QuranTool quranTool = QuranTool.init();
  1. Get the prayer time
getPrayerTime() async {
  try {
      PrayerTimeTool prayerTimeTool = await PrayerTimeTool.init();
      PrayerTime prayer = prayerTimeTool.prayer;
    } on DzikrErrorConfig catch (error) {
      // error
  1. Show the data to your user
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
        style: ThemeConfig.textTheme(context)
        style: ThemeConfig.textTheme(context)
        Text("${PrayerTimeTool.findClosestPrayerTime(prayer).todaySchedule.closestPrayer.durationToClosestPrayer.inMinutes} Minute to ${prayer.todaySchedule.closestPrayer.closestPrayer}"),

Awesome ✨ Masyaallah.

Quran Tool #

Quran is one of the most feature that we hope can provide with well in this package. This feature is still under development, there is minor in the code but it works!

This tool provide Quran both in page mode and list mode. And the cool part Quran Tool provide instant Quran render widget, we will show the detail of it bellow insyaallah.

Requirement #

Quran Tool is using static Quran data, you need to downloaded the data first, put it into assets/quran directory, register the asset path into pubspec.yaml the you'll be able to use the tool insyaallah.

  1. You can download the tool hare : (its not provided yet)
  2. Put quran directory on ./assets folder of your project
  3. register the asset in pubspec.yaml, as below
  - assets/quran/

then the tool is ready to use insyaallah.

Usage #

The easy wasy to show Quran to your app user is using [QuranPageReader]. as easy as bellow instruction.

  1. return the Quran page in your page/widget.
class QuranPage extends StatelessWidget {
  const QuranPage({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return QuranPageReader(
      config: QuranPageReaderConfig(),

if there is no mistake, Quran data will be processed and showed to user 👍

  1. via parameter you can set the intial Quran page that want to be showed, you even able put appbar on your [QuranPageReader] or listen when user change the Quran Page.
  2. And with [QuranPageReaderConfig] you able to set colors and theming for your [QuranPageReader], also to choose is using page mode or list mode, and to show bottom page indicator or not.

then, how to show list of surah and juzs? Quran Tool will provide the data for you.

  1. Init Quran Tool
QuranTool quranTool = QuranTool.init();
  1. get the data
QuranJuzs juzs = await quranTool.getQuranJuzs();
QuranChapters surah = await quranTool.getQuranChapter();

you even able to get whole Quran data, if you want to manually process it without [QuranPageReader].

List<QuranPage> pages = await quranTool.getQuranPages();

Book Tool #

Book tool actually is tool for showing adzkar and du'a, we named it book because we imagining a collection of du'as or dzikr as a book that contain list of prayer and book, not only that, in the future we also hope to present hadith books.

Same with Quran Tool, you need to download the Book data first, as this following.

Requirement #

  1. You can download the tool hare : (its not provided yet)
  2. Put quran directory on ./assets folder of your project
  3. register the asset in pubspec.yaml, as below
  - assets/book/

Usage #

  1. Init the tool
BookTool bookTool = BookTool.init();
  1. Get the data
List<Book> duaBook = await bookTool.getDuaBook();
List<Book> dzikrBook = await bookTool.getDzikrBook();
  1. Show doa and dzikr to your user, you can use ListView to render every item.
  2. You can process book detail by your own, or easily with [DzikrReader] as use it as following
class DzikrDetailPage extends StatelessWidget {
  const DzikrDetailPage({Key? key, required}) : super(key: key);

  final Book book;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBarWidget.getAppBar(context, title: book.title!),
      body: DzikrReader(book: book),

Hope the package and the explanation above can be useful and beneficial for many people. May Allah help and guide us always.