所以我正在做一个大学项目的食品捐赠申请，它有一个分类功能来分离每个产品帖子，我已经做了通过终端从“print（response.data）”中获取信息，当点击每个类别时，使用API分离category_id。我有一个问题，当我点击每个类别，它路由我到一个黑色的页面，所以我怎么能显示在那里像列表顺序在主页。
1.) listcategoriesWidget.dart

import 'package:flutter/material.dart';
import '../model/mainproduct.dart';
import '../pages/InsideOrder.dart';
import '../pages/caller.dart';

class ListCategoriesWidget extends StatefulWidget {
  final int tag;
  const ListCategoriesWidget({super.key, required this.tag});

  @override
  State<ListCategoriesWidget> createState() => _ListCategoriesWidgetState();
}

class _ListCategoriesWidgetState extends State<ListCategoriesWidget> {
  double screenHeight = 0;
  double screenWidth = 0;
  List<mainProduct> productList = [];
  @override
  @override
  void initState() {
    super.initState();
    fetchData();
  }

  void fetchData() async {
  try {
    final url = '/home/${widget.tag}';
    Response response = await Caller.dio.get(url);

    print(response.toString());
    print(response.data);

    if (response.data != null && response.data is Map<String, dynamic>) {
      final responseData = response.data;
      if (responseData.containsKey("created_products")) {
        final List<dynamic> products = responseData["created_products"];
        if (products != null && products is List<dynamic>) {
          for (var product in products) {
            print(product);
            productList.add(mainProduct.fromJson(product));
          }
        } else {
          print("Invalid 'created_products' data format");
        }
      } else {
        print("Missing 'created_products' field in response");
      }
    } else {
      print("Invalid response data format");
    }
  } catch (e) {
    print(e);
  }
}

  Widget build(BuildContext context) {
    screenHeight = MediaQuery.of(context).size.height;
    screenWidth = MediaQuery.of(context).size.width;

    return Container(
      padding: EdgeInsets.only(left: 20, right: 20),
      height: screenHeight,
      child: Column(
        children: 
          productList.map((e) => ListCate(                            
                                      title: e.name!,
                                      imageUrl: e.picture_url!,
                                      tag: e.category_id.toString(),
                                      range: "23 km",
                                      owner: "Not yet",
                                      ))
                                  .toList(),
      )
    );
  }

   String getCategoryName(int tag) {
    switch (tag) {
      case 1:
        return "Meat";
      case 2:
        return "Vegetable & Fruit";
      case 3:
        return "Food";
      case 4:
        return "Flavoring";
      case 5:
        return "Drink";
      case 6:
        return "Snack";
      case 7:
        return "Dessert";
      case 8:
        return "Food Waste";
      default:
        return "No Categories";
    }
  }
}

class ListCate extends StatelessWidget {
  String title;
  String imageUrl;
  String tag;
  String range;
  String owner;

  ListCate(
      {Key? key,
      required this.title,
      required this.imageUrl,
      required this.tag,
      required this.range,
      required this.owner})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap: () {
          Navigator.push(context,
              MaterialPageRoute(builder: ((context) => InsideOrder())));
        },
        child: Container(
          margin: EdgeInsets.only(bottom: 5),
          decoration: BoxDecoration(boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.3),
              spreadRadius: 1,
              blurRadius: 5,
              offset: Offset(4, 5),
            )
          ]),
          child: Card(
            shape: RoundedRectangleBorder(
              borderRadius:
                  BorderRadius.circular(10), // Adjust the border radius
            ),
            child: Row(
              children: <Widget>[
                ClipRRect(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(10),
                    bottomLeft: Radius.circular(10),
                  ),
                  child: Container(
                    width: 110,
                    height: 110,
                    child: Image.asset(
                      'Images/Food/' + imageUrl + ".jpg",
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(tag),
                        Text(
                          title,
                          style: TextStyle(
                              fontSize: 15, fontWeight: FontWeight.bold),
                        ),
                        SizedBox(height: 10),
                        Text(
                          tag,
                          style:
                              TextStyle(fontSize: 12, color: Colors.grey[600]),
                        ),
                        SizedBox(height: 10),
                        Text(
                          range,
                          style:
                              TextStyle(fontSize: 12, color: Colors.grey[600]),
                        ),
                        SizedBox(height: 10),
                        Text(
                          owner,
                          style:
                              TextStyle(fontSize: 12, color: Colors.grey[600]),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

2.) categorieswidget.dart => is UI for each category and route to ListCategoryWidget() by sending the categoryId to check and map all product post that related

import 'dart:convert';
import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
import 'package:imjai_frontend/widget/listcategoriesWidget.dart';
import '../model/mainproduct.dart';
import '../pages/caller.dart';
import '../pages/product.dart';
import 'listProductwidget.dart';

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

  @override
  State<CategoriesWidget> createState() => _CategoriesWidgetState();
}

class _CategoriesWidgetState extends State<CategoriesWidget> {
   List<mainProduct> categoryproduct = [];
  @override
 build(BuildContext context) {
    return Container(
      height: 100,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Categories(
            name: "Meat",
            imageUrl: "Meat",
            slug: "1",
          ),
          Categories(
            name: "Veget&Fruit",
            imageUrl: "Veget&Fruit",
            slug: "2",
          ),
          Categories(
            name: "Food",
            imageUrl: "Food",
            slug: "3",
          ),
          Categories(
            name: "Flavoring",
            imageUrl: "Flavoring",
            slug: "4",
          ),
          Categories(
            name: "Drink",
            imageUrl: "Drink",
            slug: "5",
          ),
          Categories(
            name: "Snack",
            imageUrl: "Snack",
            slug: "6",
          ),
          Categories(
            name: "Dessert",
            imageUrl: "Dessert",
            slug: "7",
          ),
          Categories(
            name: "Food Waste",
            imageUrl: "Food Waste",
            slug: "8",
          ),
        ],
      ),
    );
  }
  
}
class Categories extends StatelessWidget {
  String name;
  String imageUrl;
  String slug;

  Categories(
      {Key? key,
      required this.name,
      required this.imageUrl,
      required this.slug})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        // String categoryId = getCategoryTag(slug).toString(); 
        navigateToProductList(context, slug);
      },
      child: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(left: 5, right: 5, top: 5, bottom: 5),
            child: Card(
              color: Colors.orange[50],
              elevation: 0,
              shape: RoundedRectangleBorder(
                borderRadius: const BorderRadius.all(
                  Radius.circular(10.0),
                ),
              ),
              child: Container(
                alignment: Alignment.center,
                width: 64,
                height: 64,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.asset(
                        'Images/Categories/' + imageUrl + ".png",
                        width: 24,
                        height: 24,
                      ),
                      SizedBox(height: 5),
                      Text(
                        name,
                        style: TextStyle(
                          fontSize: 10.5,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
  void navigateToProductList(BuildContext context, String slug) {
  int categoryId = getCategoryTag(slug);
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => ListCategoriesWidget(tag: categoryId),
    ),
  );
}
  int getCategoryTag(String slug) {
    switch (slug) {
      case "1":
        return 1;
      case "2":
        return 2;
      case "3":
        return 3;
      case "4":
        return 4;
      case "5":
        return 5;
      case "6":
        return 6;
      case "7":
        return 7;
      case "8":
        return 8;
      default:
        return 0;
    }
  }
}````

[enter image description here](https://i.stack.imgur.com/2MMzq.png)

 

So I'm doing the food donation application for college project and it has a category function to separate each product post, and I already done to get an information via the terminal from "print(response.data)" when clicked on each category by using the API to seperate the category_id. I have an issue about when I clicked on each category, it route me to a black page, so how can I show that post in there like the List order in the home page.