Flutter如何从双API获取股票列表与详情并展示？

1. 确认详情页接收参数 #

先确保StocksDetailScreen能正确接收列表页传递的股票代码和名称，通过构造函数传入：

class StocksDetailScreen extends StatelessWidget {
  final String stockCode;
  final String stockName;

  const StocksDetailScreen({
    super.key,
    required this.stockCode,
    required this.stockName,
  });

  @override
  Widget build(BuildContext context) {
    // 后续实现逻辑
  }
}

2. 封装详情API请求方法 #

先在pubspec.yaml中添加http依赖（http: ^1.1.0），然后编写请求工具方法：

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

Future<BigParaDetay> fetchStockDetail(String stockCode) async {
  final url = Uri.parse('https://bigpara.hurriyet.com.tr/api/v1/borsa/hisseyuzeysel/$stockCode');
  final response = await http.get(url);

  if (response.statusCode == 200) {
    // 依赖BigParaDetay模型的fromJson方法解析JSON
    return BigParaDetay.fromJson(json.decode(response.body));
  } else {
    throw Exception('股票详情加载失败');
  }
}

注意：要确保BigParaDetay模型已实现fromJson构造函数，能正确映射API返回的JSON字段。

3. 用FutureBuilder处理异步状态 #

在详情页中使用FutureBuilder管理API请求的加载、成功、错误状态，对应展示不同UI：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text(stockName)),
    body: FutureBuilder<BigParaDetay>(
      future: fetchStockDetail(stockCode),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          // 加载中UI
          return const Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          // 错误状态UI，可添加重试按钮
          return Center(child: Text('加载错误: ${snapshot.error}'));
        } else if (snapshot.hasData) {
          // 成功展示详情数据
          final detail = snapshot.data!;
          return Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('股票代码: ${detail.code}', style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                const SizedBox(height: 8),
                Text('当前价格: ${detail.currentPrice}'),
                Text('涨跌幅: ${detail.change} (${detail.changePercent}%)'),
                // 根据BigParaDetay模型的实际字段，继续添加其他详情内容
              ],
            ),
          );
        } else {
          return const Center(child: Text('无数据'));
        }
      },
    ),
  );
}

4. 可选优化 #

• 引入状态管理工具（如Riverpod、Bloc），将网络请求逻辑从页面中剥离，避免页面重建重复请求；
• 添加本地缓存，减少重复API调用；
• 处理字段为空的边界情况，避免空指针异常；
• 给错误状态添加重试按钮，提升用户体验。

内容的提问来源于stack exchange，提问作者Mıktad Tahir Durak