quran_kit 0.2.0 copy "quran_kit: ^0.2.0" to clipboard
quran_kit: ^0.2.0 copied to clipboard

Complete Quran toolkit for Flutter — rendering (QFC4 fonts with tajweed), audio playback (22 reciters, 3 quality levels, offline download), tafsir (14 books), word-by-word data, embedded Arabic text ( [...]

example/main.dart

// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';
import 'package:quran_kit/kit.dart';
import 'package:quran_kit/screens.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Initialize all services with your configuration.
  await QuranKit.initialize(QuranKitConfig(
    fontBaseUrl: 'https://github.com/MoeEyani/quran-data/releases/download/v1.0.0',
    enableAudio: true,
    enableTafsir: true,
    enableWordByWord: true,
    showTajweed: true,
    readingGoal: 20,
  ));

  runApp(const QuranKitExample());
}

class QuranKitExample extends StatelessWidget {
  const QuranKitExample({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Quran Kit Pro Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorSchemeSeed: const Color(0xFF1B5E20),
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        colorSchemeSeed: const Color(0xFF1B5E20),
        brightness: Brightness.dark,
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _controller = QuranReaderController();

  @override
  void initState() {
    super.initState();
    _controller.init();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: QuranReaderScreen(
        controller: _controller,
        enableZoom: true,
        // Customize the app bar
        appBarBuilder: (context, info) => AppBar(
          title: Text(info.surahName),
          actions: [
            IconButton(
              icon: const Icon(Icons.search),
              onPressed: () => _openSearch(context),
            ),
            IconButton(
              icon: const Icon(Icons.settings),
              onPressed: () => _openSettings(context),
            ),
          ],
        ),
        // Navigate to ayah details on tap
        onAyahTap: (surah, ayah) {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (_) => AyahDetailsScreen(
                surah: surah,
                ayah: ayah,
                onPlayAyah: () => _controller.playAyah(surah, ayah),
              ),
            ),
          );
        },
      ),
    );
  }

  void _openSearch(BuildContext context) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => QuranSearchScreen(
          onResultTap: (surah, ayah) {
            Navigator.pop(context);
            _controller.goToSurah(surah);
          },
        ),
      ),
    );
  }

  void _openSettings(BuildContext context) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => QuranSettingsScreen(),
      ),
    );
  }
}
2
likes
140
points
15
downloads

Documentation

API reference

Publisher

unverified uploader

Weekly Downloads

Complete Quran toolkit for Flutter — rendering (QFC4 fonts with tajweed), audio playback (22 reciters, 3 quality levels, offline download), tafsir (14 books), word-by-word data, embedded Arabic text (Uthmani + Simple), asbab al-nuzul, reading tracker, search (voice-ready), and 20+ ready-made UI widgets. Import only what you need.

Repository (GitHub)
View/report issues

Topics

#quran #islam #tajweed #tafsir #arabic

License

MIT (license)

Dependencies

archive, flutter, flutter_svg, http, just_audio, path_provider

More

Packages that depend on quran_kit