Flutter项目中如何根据选择动态设置API URL的文章ID变量

我们需要分三步修改代码，实现根据选中文章ID动态生成详情API URL：

1. 重构Config类，支持动态生成详情API路径 #

把原来固定ID的常量改成基础路径，并新增静态方法来拼接ID生成完整API地址：

class Config {
  static const String userArticlesAPI = "api/User/articles/";
  // 定义详情API的基础路径（去掉固定ID）
  static const String _articleDetailsBase = "api/User/article_details/";
  
  // 新增静态方法，传入ID返回完整的API路径
  static String getArticleDetailsAPI(int articleId) {
    return "$_articleDetailsBase$articleId/";
  }
}

2. 修改API服务方法，接收ID参数并生成动态URL #

让fetchArticle_details方法接收文章ID参数，用Config的方法生成正确的请求地址：

static Future<List<Article_details_Model>> fetchArticle_details(int articleId) async {
  // 动态拼接带ID的完整API地址
  var url = Uri.parse(Config.apiURL + Config.getArticleDetailsAPI(articleId));

  final response = await http.get(
    url,
    headers: {
      HttpHeaders.authorizationHeader: 'Token XXXXX ',
    },
  );

  final responseJson = jsonDecode(response.body);
  print(responseJson);

  if (response.statusCode == 200) {
    return Article_detailsModelFromJson(jsonDecode(response.body)); 
  } else {
    throw Exception('Failed to load article details');
  }
}

3. 在详情页接收路由参数，调用动态API #

在详情页中先获取跳转时传递的文章ID，再调用修改后的API方法获取对应数据：

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

  @override
  State<ArticleDetailsPage> createState() => _ArticleDetailsPageState();
}

class _ArticleDetailsPageState extends State<ArticleDetailsPage> {
  late Future<List<Article_details_Model>> futureArticleDetails;

  @override
  void initState() {
    super.initState();
    // 从路由参数中取出选中的文章ID
    final routeArgs = ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>;
    final int articleId = routeArgs["id"];
    // 调用带ID的API方法发起请求
    futureArticleDetails = API.fetchArticle_details(articleId);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('文章详情')),
      body: FutureBuilder<List<Article_details_Model>>(
        future: futureArticleDetails,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            // 这里根据你的Article_details_Model结构渲染详情内容
            return Text(snapshot.data!.first.content); 
          } else if (snapshot.hasError) {
            return Text('加载失败：${snapshot.error}');
          }
          // 加载中状态
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

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