type 'String' is not a subtype of type 'int' of 'index' while getting media fields using the instagram API

user_14334735 0
Viewed 946

i'm trying to get media fields from the instagram api and i'm getting this error

type 'String' is not a subtype of type 'int' of 'index'

here's Homepage.dart :

import 'package:flutter/material.dart';
import 'package:get_storage/get_storage.dart';
import 'package:insta_details/models/data.dart';
import 'package:insta_details/utils/custom_dio_mixin.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  static String id = "HomePage";

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with CustomDioMixin {
  bool loading = true;
  bool error = false;
  late Media media;

  @override
  void initState() {
    super.initState();
    getData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: loading
            ? const Center(
                child: CircularProgressIndicator(),
              )
            : error
                ? const Center(
                    child: Text('An error has occurred!'),
                  )
                : ListView.builder(
                    itemBuilder: (context, index) => MediaWidget(
                      media: media,
                    ),
                  ),
      ),
    );
  }

  Future<void> getData() async {
    try {
      final storage = GetStorage();
      final token = storage.read("accessToken");
      Media? media;

      final response = await dio.get(
        'https://graph.instagram.com/me/media?fields=id,caption,media_url,timestamp&access_token=$token',
      );
      print("get data response => ${response.statusCode} ${response.data}");

      Media mediadata = Media.fromJson(response.data);
      print(mediadata);
    } catch (e) {
      print("get data failed");
      print(e);
      setState(() {
        error = true;
      });
    } finally {
      setState(() {
        loading = false;
      });
    }
  }
}

class MediaWidget extends StatelessWidget {
  final Media media;
  const MediaWidget({Key? key, required this.media}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: 6,
      itemBuilder: (context, index) {
        return Image.network(media.mediaUrl);
      },
    );
  }
}

and here data.dart :

class Media {
  Media({
    required this.id,
    required this.caption,
    required this.mediaUrl,
    required this.timestamp,
  });

  String id;
  String caption;
  String mediaUrl;
  String timestamp;

  factory Media.fromJson(Map<String, dynamic> json) => Media(
        id: json["data"]["id"] as String,
        caption: json["data"]["caption"] as String,
        mediaUrl: json["data"]["media_url"] as String,
        timestamp: json["data"]["timestamp"] as String,
      );

  Map<String, dynamic> toJson() => {
        "id": id,
        "caption": caption,
        "media_url": mediaUrl,
        "timestamp": timestamp,
      };
}

and the log :

I/flutter ( 5699): get data response => 200 {data: [{id: 18106429915287733, caption: cabin in the woods, media_url: https://scontent.cdninstagram.com/v/t51.29350-15/272751472_358111429123560_6575694365508668882_n.jpg?_nc_cat=100&ccb=1-5&_nc_sid=8ae9d6&_nc_ohc=0omRv4cUGtwAX8bbmC7&_nc_ht=scontent.cdninstagram.com&edm=ANo9K5cEAAAA&oh=00_AT_fqBkL5ykJXWRj7Rcy4nCnyuXEKh-8o0TX9FJkJ4dcfQ&oe=61FD881A, timestamp: 2022-01-27T11:15:07+0000}, {id: 17917394609104775, caption: Truck, media_url: https://scontent.cdninstagram.com/v/t51.29350-15/272701475_1080001635904581_1705933746471766077_n.jpg?_nc_cat=107&ccb=1-5&_nc_sid=8ae9d6&_nc_ohc=ZfSpeg7rHn4AX89PW0c&_nc_ht=scontent.cdninstagram.com&edm=ANo9K5cEAAAA&oh=00_AT_Qbj7zOH-UEzplA9mdIrCHaeb9EBBuz1RjKJclN9Q2RA&oe=61FE9898, timestamp: 2022-01-27T11:14:26+0000}, {id: 17921627228176014, caption: Gaara, media_url: https://scontent.cdninstagram.com/v/t51.29350-15/272660463_892749041374464_5507853711157520506_n.jpg?_nc_cat=101&ccb=1-5&_nc_sid=8ae9d6&_nc_ohc=va5seINOs-4AX9vOy4L&_nc_ht=scontent.cdninst
I/flutter ( 5699): get data failed
I/flutter ( 5699): type 'String' is not a subtype of type 'int' of 'index'

my JSON response :

{
"data": [
    {
        "id": "18106429915287733",
        "caption": "cabin in the woods",
        "media_type": "IMAGE",
        "media_url": "https://scontent-iad3-1.cdninstagram.com/v/t51.29350-15/272751472_358111429123560_6575694365508668882_n.jpg?_nc_cat=100&ccb=1-5&_nc_sid=8ae9d6&_nc_ohc=xXGDvxMsycAAX_U_-55&_nc_ht=scontent-iad3-1.cdninstagram.com&edm=ANo9K5cEAAAA&oh=00_AT-EuNnLxrBSNirBOl1prRXlHepdhQqUjYRBEv3Zh_Ld6Q&oe=61FD881A",
        "username": "parekchampl",
        "timestamp": "2022-01-27T11:15:07+0000"
    },
    {
        "id": "17917394609104775",
        "caption": "Truck",
        "media_type": "IMAGE",
        "media_url": "https://scontent-iad3-1.cdninstagram.com/v/t51.29350-15/272701475_1080001635904581_1705933746471766077_n.jpg?_nc_cat=107&ccb=1-5&_nc_sid=8ae9d6&_nc_ohc=ZfSpeg7rHn4AX_J_eQs&_nc_ht=scontent-iad3-1.cdninstagram.com&edm=ANo9K5cEAAAA&oh=00_AT92hbhb0XK56kxC-_e8kpM6QFLazDH0TDCfdIdEIpNinw&oe=61FC9E58",
        "username": "parekchampl",
        "timestamp": "2022-01-27T11:14:26+0000"
    },
    {
        "id": "17921627228176014",
        "caption": "Gaara",
        "media_type": "IMAGE",
        "media_url": "https://scontent-iad3-1.cdninstagram.com/v/t51.29350-15/272660463_892749041374464_5507853711157520506_n.jpg?_nc_cat=101&ccb=1-5&_nc_sid=8ae9d6&_nc_ohc=va5seINOs-4AX_SB6jL&_nc_ht=scontent-iad3-1.cdninstagram.com&edm=ANo9K5cEAAAA&oh=00_AT8rviJ6wbaT0yF1Hq2VprtnQ-W0rARS5oxIr52MIhC0Rw&oe=61FD720B",
        "username": "parekchampl",
        "timestamp": "2022-01-27T11:13:42+0000"
    },
    {
        "id": "18024346318348836",
        "caption": "Marceline",
        "media_type": "IMAGE",
        "media_url": "https://scontent-iad3-1.cdninstagram.com/v/t51.29350-15/272807293_686124672409566_4991399943515126026_n.jpg?_nc_cat=106&ccb=1-5&_nc_sid=8ae9d6&_nc_ohc=JMfTMSD_1c8AX-m5WDx&_nc_ht=scontent-iad3-1.cdninstagram.com&edm=ANo9K5cEAAAA&oh=00_AT_P38eDVtcqEYL053wGPkLjhHStLCh7_fgFnCg4LcH1yA&oe=61FD1F82",
        "username": "parekchampl",
        "timestamp": "2022-01-27T11:13:02+0000"
    },
    {
        "id": "17859174368680579",
        "caption": "uchiha shisui",
        "media_type": "IMAGE",
        "media_url": "https://scontent-iad3-1.cdninstagram.com/v/t51.29350-15/272721151_749467822692662_5191995429373550055_n.jpg?_nc_cat=111&ccb=1-5&_nc_sid=8ae9d6&_nc_ohc=01A68vtgY-kAX-ux6iB&_nc_ht=scontent-iad3-1.cdninstagram.com&edm=ANo9K5cEAAAA&oh=00_AT9oWtK9VWV8j3c8Ij2YXctIpuh9sC-NJO1BLCwFObDDSA&oe=61FE0B03",
        "username": "parekchampl",
        "timestamp": "2022-01-27T11:12:35+0000"
    },
    {
        "id": "17917757036265369",
        "caption": "Son and Father",
        "media_type": "IMAGE",
        "media_url": "https://scontent-iad3-1.cdninstagram.com/v/t51.29350-15/272660947_1107548556714461_1575953024252145708_n.jpg?_nc_cat=100&ccb=1-5&_nc_sid=8ae9d6&_nc_ohc=Mzj5Wp9sv_oAX_2Z4Nv&_nc_ht=scontent-iad3-1.cdninstagram.com&edm=ANo9K5cEAAAA&oh=00_AT8Ywp3DUIemrIoCPajFvivfTG_-AWvEs2fpkngYXUN6Lg&oe=61FE17A1",
        "username": "parekchampl",
        "timestamp": "2022-01-27T11:11:47+0000"
    }
],
"paging": {
    "cursors": {
        "before": "QVFIUnpEcERJTXdYRjd3SVp3MUo2U25UeWhhdlgxQ2xMY0diR2pYVFhCVl9TUUhlM1hqYllKWUpEWXJtYW5RWW41am1Lc3B4U281TU14ZAFoxSVBkMVRsZAkZAB",
        "after": "QVFIUkgtUzExdDNsYzgwUFhGdnRXQlB6N0JkZATVFeU1DVkhzXzduLTF1RklpR1A5MDNMeWVEemtzdE15OVBlYmpYb29mQlVtdDJsX1N2SUcwa2ZAkc21jblZAn"
    }
}

}

dart flutter api json
3 Answers

According to the documentation : https://developers.facebook.com/docs/instagram-basic-display-api/reference/media ,every field is a String

  factory Media.fromJson(Map<String, dynamic> json) => Media(
    id: json["data"]["id"] as String,
    caption: json["data"]["caption"] as String,
    mediaUrl: json["data"]["media_url"] as String,
    timestamp: json["data"]["timestamp"] as String,
  );

Or change to something like below:

  factory Media.fromJson(Map<String, dynamic> json) => Media(
    id: int.parse(json["data"]["id"] as String),
    caption: json["data"]["caption"] as String,
    mediaUrl: json["data"]["media_url"] as String,
    timestamp: DateTime.parse(json["data"]["timestamp"] as String),
  );
user_115106970

The value of your data key is a List not a Map. Here's an example:

const responseData =
{
   "data":[
      {
         "id":"18106429915287733",
         "caption":"cabin in the woods",
         "media_type":"IMAGE",
         "media_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.29350-15/272751472_358111429123560_6575694365508668882_n.jpg?_nc_cat=100&ccb=1-5&_nc_sid=8ae9d6&_nc_ohc=xXGDvxMsycAAX_U_-55&_nc_ht=scontent-iad3-1.cdninstagram.com&edm=ANo9K5cEAAAA&oh=00_AT-EuNnLxrBSNirBOl1prRXlHepdhQqUjYRBEv3Zh_Ld6Q&oe=61FD881A",
         "username":"parekchampl",
         "timestamp":"2022-01-27T11:15:07+0000"
      },
      {
         "id":"17917394609104775",
         "caption":"Truck",
         "media_type":"IMAGE",
         "media_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.29350-15/272701475_1080001635904581_1705933746471766077_n.jpg?_nc_cat=107&ccb=1-5&_nc_sid=8ae9d6&_nc_ohc=ZfSpeg7rHn4AX_J_eQs&_nc_ht=scontent-iad3-1.cdninstagram.com&edm=ANo9K5cEAAAA&oh=00_AT92hbhb0XK56kxC-_e8kpM6QFLazDH0TDCfdIdEIpNinw&oe=61FC9E58",
         "username":"parekchampl",
         "timestamp":"2022-01-27T11:14:26+0000"
      }
   ]
};

void main() {
  final mediaList = responseData["data"]!.map((entry) => Media.fromJson(entry))
      .toList();
  for (var media in mediaList) {
    print(media.id);
  }
}

class Media {
  Media({
    required this.id,
    required this.caption,
    required this.mediaUrl,
    required this.timestamp,
  });

  int? id;
  String caption;
  String mediaUrl;
  String timestamp;

  factory Media.fromJson(Map<String, dynamic> json) {
    return Media(
      id: int.tryParse(json["id"]),
      caption: json["caption"],
      mediaUrl: json["media_url"],
      timestamp: json["timestamp"],
    );
  }

  Map<String, dynamic> toJson() => {
        "id": id.toString(),
        "caption": caption,
        "media_url": mediaUrl,
        "timestamp": timestamp,
      };
}
user_123933650

On your model class id is nullable int, but you are receiving id as String.

You can typecast string to int On your Media.fromJson, while the id accept null value, if something wrong happen id will get null value.

  factory Media.fromJson(Map<String, dynamic> json) => Media(
        id: int.tryParse(json["data"]["id"]),

And for toJson pass id as String

  Map<String, dynamic> toJson() => {
        "id": id.toString(),

More about int.tryParse.

user_101571270
Related