Flutter根据选中选项跳转页面并动态调用对应ID的API

1. 修改Config类，支持动态生成API地址 #

把原来固定ID的API地址改为动态方法，根据传入的ID生成对应接口路径：

class Config {
  // 替换固定ID的静态常量为动态方法
  static String getUserWorkoutDetailsAPI(int workoutId) => 
      "https://your-api-domain/user-workout-details/$workoutId";
}

2. 更新API服务的fetchExercises方法，支持动态传参 #

修改API服务方法，新增workoutId参数，调用动态生成的API地址：

class ApiService {
  Future<WorkoutDetails> fetchExercises(int workoutId) async {
    final apiUrl = Config.getUserWorkoutDetailsAPI(workoutId);
    final response = await http.get(Uri.parse(apiUrl));

    if (response.statusCode == 200) {
      return WorkoutDetails.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('加载训练详情失败');
    }
  }
}

3. 首页跳转时传递选中的选项ID #

在首页列表按钮的点击事件中，将选中项的ID传递给exercises.dart页面：

// 假设首页列表项为item，其中item.id为4或5
onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => ExercisesPage(workoutId: item.id),
    ),
  );
}

如果使用命名路由，可通过arguments传递参数：

onTap: () {
  Navigator.pushNamed(
    context,
    '/exercises',
    arguments: item.id,
  );
}

4. 在exercises.dart页面接收ID并调用API展示数据 #

修改ExercisesPage组件，接收传递的ID，初始化时调用API获取对应数据并展示：

class ExercisesPage extends StatefulWidget {
  final int workoutId;

  // 直接接收参数（适用于MaterialPageRoute跳转）
  const ExercisesPage({super.key, required this.workoutId});

  @override
  State<ExercisesPage> createState() => _ExercisesPageState();
}

class _ExercisesPageState extends State<ExercisesPage> {
  late Future<WorkoutDetails> _workoutDetailsFuture;
  final ApiService _apiService = ApiService();

  @override
  void initState() {
    super.initState();
    // 传入接收的ID调用API
    _workoutDetailsFuture = _apiService.fetchExercises(widget.workoutId);
  }

  @override
  Widget build(BuildContext context) {
    // 如果使用命名路由传递参数，可在此获取：
    // final int workoutId = ModalRoute.of(context)!.settings.arguments as int;

    return Scaffold(
      appBar: AppBar(title: const Text('训练详情')),
      body: FutureBuilder<WorkoutDetails>(
        future: _workoutDetailsFuture,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView(
              children: snapshot.data!.exercises.map((exercise) {
                return ListTile(title: Text(exercise.name));
              }).toList(),
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('${snapshot.error}'));
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

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