How to display images in Flutter app from Django Rest API?

Question

I have problems with displaying images, that are saved in my database in Django Rest API. This is my postman output for the API:

[
    {
        "id": 1,
        "name": "firstshow",
        "image": "/media/images/firstshow.jpg"
    },
    {
        "id": 2,
        "name": "secondshow",
        "image": "/media/images/secondshow.jpg"
    },
    {
        "id": 3,
        "name": "thirdshow",
        "image": "/media/images/thirdshow.jpg"
    }
]

This is my model:

class ShowsModel{
  int? id;
  String? name;
  String? image;
  ShowsModel({this.id, this.name, this.image});
   ShowsModel.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
    image = json['image'];
  }

  static List<ShowsModel> showsFromSnapshot(List showsSnapshot) {
    return showsSnapshot.map((data) {
      return ShowsModel.fromJson(data);
    }).toList();
  }
}

I have created promocard widget, which requires imageUrl. My homepage uses promocard slider widget, which returns 3 promocards.

class PromoCardSlider extends StatelessWidget {
  const PromoCardSlider({Key? key, required this.showsList}) : super(key: key);
  final List<ShowsModel> showsList;
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 200,
        child: ListView.builder(
            itemCount: 3,
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            itemBuilder: (ctx, index) {
              return  promoCard(
                imageUrl: showsList[index].image![0]);
           
            }));
  }
}

On this line imageUrl: showsList[index].image![0]); I get error: Exception has occurred. RangeError (RangeError (index): Invalid value: Valid value range is empty: 0)

How do I fix this?

Answer 1

Update you code with this

class PromoCardSlider extends StatelessWidget {
  const PromoCardSlider({Key? key, required this.showsList}) : super(key: key);
  final List<ShowsModel> showsList;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: ListView.builder(
        itemCount: showsList.length,
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemBuilder: (ctx, index) {
          return promoCard(imageUrl:"Set your base URl" showsList[index].image);
        },
      ),
    );
  }
}