I am trying to select an index from a list of images in flutter. While passing the image list to the Image.network() i get an error:

The following NetworkImageLoadException was thrown resolving an image codec:
HTTP request failed, statusCode: 500,,,

Please how do i seperate the images so that only the index i pick is selected? Below is the Product Model:

import 'dart:convert';

List<ProductModel> productsFromJson(String str) => List<ProductModel>.from(
    json.decode(str).map((x) => ProductModel.fromJson(x)));

String productsToJson(List<ProductModel> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class ProductModel {
    required this.name,
    required this.price,
    required this.isActive,
    required this.imgsUrl,
    required this.id,
    required this.description,
    required this.ownerId,

  String name;
  double price;
  bool isActive;
  List<String> imgsUrl;
  int id;
  String description;
  int ownerId;

  factory ProductModel.fromJson(Map<String, dynamic> json) => ProductModel(
        name: json["name"],
        price: json["price"].toDouble(),
        isActive: json["is_active"],
        imgsUrl: List<String>.from(json["imgs_url"].map((x) => x)),
        id: json["id"],
        description: json["description"],
        ownerId: json["owner_id"],

  Map<String, dynamic> toJson() => {
        "name": name,
        "price": price,
        "is_active": isActive,
        "imgs_url": List<dynamic>.from(imgsUrl.map((x) => x)),
        "id": id,
        "description": description,
        "owner_id": ownerId,

I am using a futurebuilder with dio to fetch the data from the API:

          future: productModel,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Text('${snapshot.error}');
            } else if (snapshot.hasData) {
              return SizedBox(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                      child: Container(
                        decoration: const BoxDecoration(
                            color: styles.AppColors.facebookBlue),
                        child: Text('$finalName products online'),
                      child: StaggeredGridView.countBuilder(
                        crossAxisCount: 2,
                        itemCount: snapshot.data!.length,
                        itemBuilder: (context, index) {
                          return Card(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Stack(children: [
                                        height: 180,
                                        width: double.infinity,
                                        clipBehavior: Clip.antiAlias,
                                        decoration: BoxDecoration(
                                  const SizedBox(
                                    height: 8,
                        staggeredTileBuilder: (int index) =>
                            const StaggeredTile.fit(1),
                        mainAxisSpacing: 10,
                        crossAxisSpacing: 10,
            } else {
              return const Center(child: CircularProgressIndicator());

For the API call with DioClient:

Future<List<ProductModel>> fetchVProduct() async {
    await SecureStorage.readSecureData("vt")
        .then((value) => finalToken = value);
    try {
      final response = await Dio().get(
        options: Options(
            headers: {
              'Accept': 'application/json',
              "Authorization": "Bearer $finalToken",
            followRedirects: false,
            validateStatus: (status) {
              return status! < 500;
      return (response.data as List)
          .map((x) => ProductModel.fromJson(x))
    } on DioError catch (e) {
      debugPrint("Status code: ${e.response?.statusCode.toString()}");
      throw Exception("Failed to load currently Logged in Vendor Products");

For the sample json from my apicall:

    "name": "sa",
    "price": 44,
    "is_active": true,
    "imgs_url": [
    "id": 43,
    "description": "hfg",
    "owner_id": 1

Please what do i do next? Thank you.

Solution 1: user18309290

In data imgs_url is a single string containing three urls.

"imgs_url": [

Change it to

"imgs_url": [