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

json flutter api dart

248

Solution 1

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),
  );

Solution 2

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,
      };
}

248

Author by

Aymen Ziouche

Updated on January 03, 2023

Comments

Aymen Ziouche over 1 year

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"
    }
}

}

mario francois about 2 years

Why use the tryParse if the id will never be null or bad format?
Yeasin Sheikh about 2 years

Yap null for bad format, just extra check, because we aren't handling backend. If the string contains other than numeric digits, it will fail to typecast. For 122a, it can't be int you can check more here