Flutter中如何根据下拉选择调用对应ID的API数据

1. 定义课程数据模型类 #

先创建一个模型类来序列化API返回的课程数据，方便后续处理和使用：

class Course {
  final String id;
  final String idDosen;
  final String idMk;
  final String? nidn;
  final String dosen;
  final String idKelasKuliah;
  final String kelasKuliah;
  final String prodi;
  final String kelas;
  final String semester;
  final String kelompokKelas;
  final String? kode;
  final int sks;
  final int jumlahKelas;
  final String matakuliah;
  final String smt;
  final int bobotSks;
  final int rencanaPertemuan;
  final String jenisEvaluasi;
  final String createdAt;
  final String updatedAt;
  final String createdBy;
  final String updatedBy;

  Course({
    required this.id,
    required this.idDosen,
    required this.idMk,
    this.nidn,
    required this.dosen,
    required this.idKelasKuliah,
    required this.kelasKuliah,
    required this.prodi,
    required this.kelas,
    required this.semester,
    required this.kelompokKelas,
    this.kode,
    required this.sks,
    required this.jumlahKelas,
    required this.matakuliah,
    required this.smt,
    required this.bobotSks,
    required this.rencanaPertemuan,
    required this.jenisEvaluasi,
    required this.createdAt,
    required this.updatedAt,
    required this.createdBy,
    required this.updatedBy,
  });

  // 从JSON解析为Course对象
  factory Course.fromJson(Map<String, dynamic> json) {
    return Course(
      id: json['id'],
      idDosen: json['id_dosen'],
      idMk: json['id_mk'],
      nidn: json['nidn'],
      dosen: json['dosen'],
      idKelasKuliah: json['id_kelas_kuliah'],
      kelasKuliah: json['kelas_kuliah'],
      prodi: json['prodi'],
      kelas: json['kelas'],
      semester: json['semester'],
      kelompokKelas: json['kelompok_kelas'],
      kode: json['kode'],
      sks: json['sks'],
      jumlahKelas: json['jumlah_kelas'],
      matakuliah: json['matakuliah'],
      smt: json['smt'],
      bobotSks: json['bobot_sks'],
      rencanaPertemuan: json['rencana_pertemuan'],
      jenisEvaluasi: json['jenis_evaluasi'],
      createdAt: json['created_at'],
      updatedAt: json['updated_at'],
      createdBy: json['created_by'],
      updatedBy: json['updated_by'],
    );
  }
}

2. 封装API请求方法 #

在页面的State类中添加异步请求方法，同时声明状态变量管理加载状态、错误信息和选中的课程：

// State类中新增状态变量
Course? selectedCourse;
bool isLoading = false;
String? errorMessage;

// API请求方法
Future<void> fetchCourse(String semesterNumber) async {
  setState(() {
    isLoading = true;
    errorMessage = null;
    selectedCourse = null;
  });

  try {
    // 替换为你的实际API地址
    final response = await http.get(Uri.parse('https://your-api-domain.com/courses'));

    if (response.statusCode == 200) {
      final Map<String, dynamic> responseData = json.decode(response.body);
      final Map<String, dynamic> courseData = responseData['data'];

      // 根据选中的数字提取对应课程数据
      if (courseData.containsKey(semesterNumber)) {
        setState(() {
          selectedCourse = Course.fromJson(courseData[semesterNumber]);
        });
      } else {
        setState(() {
          errorMessage = '未找到对应学期的课程数据';
        });
      }
    } else {
      setState(() {
        errorMessage = '请求失败，状态码：${response.statusCode}';
      });
    }
  } catch (e) {
    setState(() {
      errorMessage = '请求出错：$e';
    });
  } finally {
    setState(() {
      isLoading = false;
    });
  }
}

注意：需要先在pubspec.yaml中添加http依赖，并导入package:http/http.dart和dart:convert。

3. 修改二级Dropdown的触发逻辑 #

在二级Dropdown的onChanged回调中，调用API请求方法：

onChanged: (value) {
  if (value != null) {
    subValue = value;
    fetchCourse(value); // 触发API请求
    setState(() {});
  }
},

4. 展示状态和课程数据 #

在Dropdown下方添加区域，展示加载状态、错误信息或选中的课程详情：

const SizedBox(height: 16),
// 加载状态提示
if (isLoading)
  const Center(child: CircularProgressIndicator()),
// 错误信息提示
if (errorMessage != null)
  Text(
    errorMessage!,
    style: TextStyle(color: Colors.red, fontSize: 14),
  ),
// 选中的课程详情
if (selectedCourse != null)
  Container(
    padding: EdgeInsets.all(12),
    margin: EdgeInsets.only(top: 8),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.grey.shade300),
      borderRadius: BorderRadius.circular(8),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('课程名称: ${selectedCourse!.matakuliah}', style: TextStyle(fontWeight: FontWeight.bold)),
        SizedBox(height: 6),
        Text('授课教师: ${selectedCourse!.dosen}'),
        SizedBox(height: 6),
        Text('学分: ${selectedCourse!.sks}'),
        SizedBox(height: 6),
        Text('学期: ${selectedCourse!.smt}'),
        // 可根据需求添加更多字段展示
      ],
    ),
  ),

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