我在遍历对象数组时遇到问题

Question

I am trying to go through an array of objects, I stored them in my SharedPreferences where I go the data from firebase and add the quantity for each object, now I only want to display the title, price, and quantity of the product in the cart. I was able to pull all the values belonging to the product to the cart screen but how to loop through the nested values in the cart screen is the problem. please can anyone help me still learning more on flutter?

Cart screen
@override
  Widget build(BuildContext context) {
    SharedPreferences prefs = SharedPreferences.getInstance() as SharedPreferences;
    var cart = prefs.getStringList('userCart');
    return Row(
      children: [
        SizedBox(
          width: getProportionateScreenWidth(88),
          child: AspectRatio(
            aspectRatio: 0.88,
            child: Container(
              padding: EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: Color(0XFFF5F6F9),
                borderRadius: BorderRadius.circular(15),
              ),
              child: Image.network(cart![0]),
              // child: Image.network(cart.product.images[0]),
            ),
          ),
        ),
        SizedBox(
          width: getProportionateScreenWidth(20),
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              cart.first,
              // cart.product.title,
              style: TextStyle(fontSize: 16, color: Colors.black),
              maxLines: 2,
            ),
            const SizedBox(
              height: 10,
            ),
            Text.rich(
              TextSpan(
                text: "\$${cart.product.price}",
                style: TextStyle(
                  color: kPrimaryColor,
                ),
                children: [
                  TextSpan(
                    text: " x${cart.numOfItem}",
                    style: TextStyle(
                      color: kTextColor,
                    ),
                  ),
                ],
              ),
            ),
          ],
        )
      ],
    );
  }

Storing the data from firebase and adding quantity 
Future<void> checkItemInCart(
    Product product, int quantity, BuildContext context) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();

  // convert to map
  var product_str = product.toMap();

  // combine product with quantity
  String productWithQuantity =
      product_str.toString() + '-quantity-' + quantity.toString();

  // check if project exists first
  List<String> userCartPref = (prefs.getStringList('userCart') ?? <String>[]);
  ['Product-quantity-2'];

  /*
   update {
   check if found
   }
  */

  List<String> temp = (prefs.getStringList('userCart') ?? <String>[]);
  // add f
  //userCartPref ['iphone 1','laptop 3'];
  // temp ['laptop 3'];
  var foundInCart = false;
  for (var i = 0; i < userCartPref.length; i++) {
    var item = userCartPref[i];
    var items = item.split('-quantity-'); //list [product,quantity]
    var old_product = items[0];
    var old_qty = items[1];
    if (old_product.contains(product.pid)) {
      foundInCart = true;
      // product exists
      // delete the current item
      temp.removeAt(i);
      // set pref to temp
      prefs.setStringList('userCart', temp);

      // sum the quantity 2 1
      String finalQuantity = (quantity + int.parse(old_qty)).toString();
      // create string for pref with the updated quantity
      String updatedProductWithQuantity =
          product_str.toString() + '-quantity-' + finalQuantity;
      //add item with the updated quantity iphone 2
      addItemToCart(updatedProductWithQuantity, context);
      showSnackBar(context, "Quantity has been updated successfully");

      break;
    }

  
  }
  if (userCartPref.length == 0 || foundInCart == false) {
    addItemToCart(productWithQuantity, context);
    showSnackBar(context, "Product added successfully to cart");
  }

  await getProducts();
}

Future<void> addItemToCart(String product, BuildContext context) async {
  // await clearPref();
  print("inside");
  SharedPreferences prefs = await SharedPreferences.getInstance();
  List<String> tempCartList = (prefs.getStringList('userCart') ?? <String>[]);
  // print(tempCartList);
  tempCartList.add(product);
  prefs.setStringList('userCart', tempCartList);
}

Future<void> getProducts() async {
  SharedPreferences preferences = await SharedPreferences.getInstance();
  List<String> tempCartList =
      (preferences.getStringList('userCart') ?? <String>[]);
  for (var i = 0; i < tempCartList.length; i++) {
    var item = tempCartList[i];
    var items = item.split('-quantity-');
    var product_ = items[0];
    var quantity_ = items[1];
  }
}

Answer 1

you can use ListView.builder or GridView.builder to iterate over the array and render them on screen. So if I use ListView.builder, my code in cart screen would look like:

return ListView.builder(
  itemCount: cart.length, //length of cart
  itemBuilder: (context, index) {
    return Row(
      children: [
        SizedBox(
          width: getProportionateScreenWidth(88),
          child: AspectRatio(
            aspectRatio: 0.88,
            child: Container(
              padding: EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: Color(0XFFF5F6F9),
                borderRadius: BorderRadius.circular(15),
              ),
              child: Image.network(cart![index]),
              // child: Image.network(cart.product.images[0]),
            ),
          ),
        ),
        SizedBox(
          width: getProportionateScreenWidth(20),
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              cart[index].product.title,
              // cart.product.title,
              style: TextStyle(fontSize: 16, color: Colors.black),
              maxLines: 2,
            ),
            const SizedBox(
              height: 10,
            ),
            Text.rich(
              TextSpan(
                text: "\$${cart[index].product.price}",
                style: TextStyle(
                  color: kPrimaryColor,
                ),
                children: [
                  TextSpan(
                    text: " x${cart[index].numOfItem}",
                    style: TextStyle(
                      color: kTextColor,
                    ),
                  ),
                ],
              ),
            ),
          ],
        )
      ],
    );
  },
);