Flutter古兰经客户端插件alquran_client的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter古兰经客户端插件alquran_client的使用

使用

初始化

AlQuranClient client = AlQuranClient();

版本

所有版本

client.getEditions();

按格式(文本或音频)

client.getEditions(
    format: EditionFormat.audio // 获取音频格式的版本
);

按类型(注解、翻译、音译、古兰经、逐节)

client.getEditions(
    type: EditionType.tafsir // 获取注解类型的版本
);

按语言

client.getEditions(
    language: EditionLanguage.en // 获取英文语言的版本
);

按文本方向(仅限文本格式)

client.getEditions(
    direction: EditionDirection.ltr // 获取从左到右文本方向的版本
);

更多关于Flutter古兰经客户端插件alquran_client的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter古兰经客户端插件alquran_client的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用alquran_client插件的示例代码。alquran_client是一个用于访问和显示古兰经内容的Flutter插件。为了演示如何使用它,我们将创建一个简单的Flutter应用程序,展示古兰经的一个章节。

首先,确保你已经在你的pubspec.yaml文件中添加了alquran_client依赖:

dependencies:
  flutter:
    sdk: flutter
  alquran_client: ^最新版本号  # 请替换为实际可用的最新版本号

然后,运行flutter pub get来安装依赖。

接下来,创建一个简单的Flutter应用来展示古兰经的内容。以下是一个完整的示例代码:

import 'package:flutter/material.dart';
import 'package:alquran_client/alquran_client.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Quran Client Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: QuranViewer(),
    );
  }
}

class QuranViewer extends StatefulWidget {
  @override
  _QuranViewerState createState() => _QuranViewerState();
}

class _QuranViewerState extends State<QuranViewer> {
  late QuranClient quranClient;
  late List<Surah> surahs;
  late String? chapterText;
  late int selectedSurahIndex = 0;
  late int selectedAyahIndex = 0;

  @override
  void initState() {
    super.initState();
    quranClient = QuranClient();
    loadSurahs();
  }

  Future<void> loadSurahs() async {
    surahs = await quranClient.getSurahs();
    if (surahs.isNotEmpty) {
      // Load the first surah's ayahs by default
      loadChapter(selectedSurahIndex);
    }
    setState(() {});
  }

  Future<void> loadChapter(int surahIndex) async {
    List<Ayah> ayahs = await quranClient.getAyahs(surahIndex + 1); // Surah indices are 1-based
    if (ayahs.isNotEmpty) {
      chapterText = ayahs[selectedAyahIndex].text;
    }
    setState(() {});
  }

  void selectSurah(int index) {
    setState(() {
      selectedSurahIndex = index;
      loadChapter(selectedSurahIndex);
    });
  }

  void selectAyah(int index) {
    setState(() {
      selectedAyahIndex = index;
      List<Ayah> ayahs = surahs[selectedSurahIndex].ayahs!;
      chapterText = ayahs[selectedAyahIndex].text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Quran Viewer'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Select Surah:',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            DropdownButton<int>(
              value: selectedSurahIndex,
              hint: Text('Choose a surah'),
              onChanged: selectSurah,
              items: surahs.map((surah) {
                return DropdownMenuItem<int>(
                  value: surah.index - 1, // Convert 1-based index to 0-based
                  child: Text(surah.name),
                );
              }).toList(),
            ),
            SizedBox(height: 20),
            Text(
              'Select Ayah:',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            if (surahs.isNotEmpty && surahs[selectedSurahIndex].ayahs!.isNotEmpty) {
              ListView.builder(
                shrinkWrap: true,
                itemCount: surahs[selectedSurahIndex].ayahs!.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(
                      '${index + 1}: ${surahs[selectedSurahIndex].ayahs![index].text.substring(0, 50)}...', // Truncate text for demo
                      style: TextStyle(fontSize: 16),
                    ),
                    onTap: () => selectAyah(index),
                  );
                },
              ),
            },
            SizedBox(height: 20),
            if (chapterText != null) {
              Text(
                'Ayah Text:',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              Text(
                chapterText!,
                style: TextStyle(fontSize: 18),
              ),
            } else {
              Text('Loading...'),
            },
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们做了以下几件事:

  1. 初始化QuranClient实例。
  2. QuranClient加载所有章节(Surah)。
  3. 提供一个下拉菜单让用户选择一个章节。
  4. 根据选择的章节,加载该章节的所有经文(Ayah)。
  5. 提供一个列表视图显示所有经文,并允许用户点击选择一个经文来查看其文本。

请注意,由于alquran_client插件的具体API和实现细节可能会随版本变化,因此上述代码可能需要根据实际使用的插件版本进行调整。此外,由于网络请求和数据处理可能需要时间,实际应用中可能需要添加适当的错误处理和加载状态提示。

回到顶部