Flutter如何调用API获取数据？新手求古兰经、Qibla类API推荐及集成方法

一、古兰经内容API推荐 #

• Al Quran API：免费无密钥，支持获取古兰经章节文本（多语言翻译）、音频链接，返回标准JSON格式，适合基础需求。
• Quran.com API：提供经文注释、多版本翻译，数据结构更细致，适合需要丰富内容的应用。

二、礼拜方向（Qibla）API推荐 #

• Qibla Finder API：通过用户经纬度计算礼拜方向角度，返回JSON响应，无需API密钥。
• Islamic Finder API：除Qibla方向外，还支持礼拜时间查询，附带完整的伊斯兰宗教功能。

三、Flutter集成步骤与代码示例 #

1. 添加依赖 #

在项目的pubspec.yaml中添加必要的依赖包：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0

执行flutter pub get安装依赖。

2. 编写API请求函数 #

获取古兰经章节内容

import 'dart:convert';
import 'package:http/http.dart' as http;

// 获取指定章节的古兰经内容（示例：第1章，英文翻译）
Future<Map<String, dynamic>> fetchQuranSurah(int surahId) async {
  final apiUrl = "https://api.alquran.cloud/v1/surah/$surahId/en.asad";
  final response = await http.get(Uri.parse(apiUrl));

  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('加载古兰经章节失败');
  }
}

计算礼拜方向

// 根据经纬度获取Qibla方向角度
Future<double> fetchQiblaDirection(double userLat, double userLon) async {
  final apiUrl = "https://api.qiblafinder.api/api/v1/qibla?lat=$userLat&lon=$userLon";
  final response = await http.get(Uri.parse(apiUrl));

  if (response.statusCode == 200) {
    final data = json.decode(response.body);
    return data['data']['direction'] as double;
  } else {
    throw Exception('获取礼拜方向失败');
  }
}

3. 在UI中使用API数据 #

通过FutureBuilder在Widget中异步加载并展示数据：

// 示例：展示古兰经章节名称
FutureBuilder<Map<String, dynamic>>(
  future: fetchQuranSurah(1),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      if (snapshot.hasData) {
        final surahData = snapshot.data!['data'];
        return Text('章节名称：${surahData['name']}');
      } else if (snapshot.hasError) {
        return Text('错误：${snapshot.error}');
      }
    }
    return const CircularProgressIndicator();
  },
)

内容的提问来源于stack exchange，提问作者MUHAMMAD ABDULLAH