Flutter中如何用CarouselSlider结合GoRouter跳转带ID的页面？

1. 修复context未定义问题 #

你的buildImage函数未传入BuildContext，直接调用context会报错。只需给函数添加BuildContext参数，并在调用时传入当前页面的context即可：

修改后的buildImage函数：

Widget buildImage(BuildContext context, String urlImage, String title, int price, double padding,
        int index, String id) => 
    GestureDetector(
      onTap: () {
        // 后续添加跳转逻辑
      },
      child: Container(
        child: Padding(
          padding: EdgeInsets.only(left: 20.0),
          child: Container(
             // 原布局代码保留
          ),
        ),
      ),
    );

调用buildImage时传入context（以CarouselSlider的itemBuilder为例）：

CarouselSlider(
  items: yourDataList.map((item) {
    return buildImage(
      context, // 传入当前页面的context
      item.urlImage,
      item.title,
      item.price,
      0.0,
      index,
      item.id,
    );
  }).toList(),
  // 其他CarouselSlider配置项
)

2. 实现带ID的页面跳转 #

第一步：配置GoRouter带参数的路由

在GoRouter路由配置中，添加带ID参数的详情页路由，用:id作为参数占位符：

final GoRouter router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const HomePage();
      },
    ),
    GoRoute(
      path: '/detail/:id', // 定义带ID参数的路由路径
      builder: (BuildContext context, GoRouterState state) {
        // 从路由状态中获取ID参数
        final String id = state.params['id']!;
        return DetailPage(id: id); // 传递ID到详情页
      },
    ),
  ],
);

第二步：完善跳转逻辑

回到buildImage的onTap事件中，使用context.go跳转到带ID的详情页：

onTap: () {
  context.go('/detail/$id');
},

第三步：创建详情页接收ID参数

详情页需定义接收ID的参数，示例代码：

class DetailPage extends StatelessWidget {
  final String id;
  
  const DetailPage({super.key, required this.id});

  @override
  Widget build(BuildContext context) {
    // 可根据ID请求数据并展示内容
    return Scaffold(
      appBar: AppBar(title: const Text('商品详情')),
      body: Center(
        child: Text('当前商品ID：$id'),
      ),
    );
  }
}

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