如何在Flutter中根据REST API返回数组逐个显示Alert Dialog？

要实现逐个展示API返回数据对应的Alert Dialog，核心是异步遍历数据并等待每个弹窗关闭后再弹出下一个，下面是完整的实现步骤：

1. 准备数据模型类 #

先把API返回的JSON数据转换成Dart对象，方便后续操作：

class AlertMessage {
  final String id;
  final String userId;
  final String message;
  final String status;
  final DateTime date;
  final DateTime created;

  AlertMessage({
    required this.id,
    required this.userId,
    required this.message,
    required this.status,
    required this.date,
    required this.created,
  });

  // 从JSON解析成对象
  factory AlertMessage.fromJson(Map<String, dynamic> json) {
    return AlertMessage(
      id: json['id'],
      userId: json['user_id'],
      message: json['message'],
      status: json['status'],
      date: DateTime.parse(json['date']),
      created: DateTime.parse(json['created']),
    );
  }
}

2. 从REST API获取数据 #

使用http包（需要先在pubspec.yaml中添加依赖：http: ^0.13.5）发起网络请求，获取并解析数据：

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

Future<List<AlertMessage>> fetchAlertMessages() async {
  final response = await http.get(Uri.parse('你的REST API地址'));

  if (response.statusCode == 200) {
    // 解析API返回的data数组
    List<dynamic> rawData = json.decode(response.body)['data'];
    return rawData.map((item) => AlertMessage.fromJson(item)).toList();
  } else {
    throw Exception('加载提醒消息失败');
  }
}

3. 逐个显示Alert Dialog #

关键是用async/await遍历数据，确保上一个弹窗关闭后再弹出下一个：

void showAlertsSequentially(List<AlertMessage> messages) async {
  for (final message in messages) {
    // 等待当前弹窗关闭后，再执行下一次循环
    await showDialog(
      context: context,
      barrierDismissible: false, // 可选：设置为true允许点击外部关闭弹窗
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('提醒 #${message.id}'),
          content: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min, // 让Column适应内容高度
            children: [
              Text('用户ID: ${message.userId}'),
              SizedBox(height: 8),
              Text('消息内容: ${message.message}'),
              SizedBox(height: 8),
              Text('状态: ${message.status}'),
              SizedBox(height: 8),
              Text('生效日期: ${message.date.toString().split(' ')[0]}'),
              SizedBox(height: 8),
              Text('创建时间: ${message.created.toString().split(' ')[0]}'),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text('确定'),
            ),
          ],
        );
      },
    );
  }
}

4. 调用流程 #

在页面初始化或者按钮点击事件中，先获取数据再触发弹窗：

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    // 页面加载时自动获取并显示弹窗
    _loadAndShowAlerts();
  }

  void _loadAndShowAlerts() async {
    try {
      List<AlertMessage> messages = await fetchAlertMessages();
      if (messages.isNotEmpty) {
        showAlertsSequentially(messages);
      }
    } catch (e) {
      print('加载提醒出错: $e');
      // 可选：显示错误提示
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('加载失败: $e')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Alert Demo')),
      body: const Center(child: Text('等待提醒加载...')),
    );
  }
}

注意事项 #

• 确保添加网络权限：Android在AndroidManifest.xml中添加<uses-permission android:name="android.permission.INTERNET"/>；iOS如果使用HTTP接口，需要在Info.plist中配置ATS例外。
• 如果API返回的数据量很大，考虑添加加载状态提示，避免用户误以为页面无响应。

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