Flutter/Dart - Parsing JSON to a model

Just for the fun of it - I tried to implement the same thing using json_serializable since I recommended it in my comment. Hopefully this shows you that it is not that complicated - in fact, it is simpler than actually figuring out how to code it your self.

First I started with the blank Flutter project.

Second, I added required dependencies to pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
cupertino_icons: ^1.0.2

# Added this
json_annotation: ^4.0.1
  

dev_dependencies:
  flutter_test:
    sdk: flutter

  # and these two...
  build_runner: ^2.0.4
  json_serializable: ^4.1.3

Next thing, I created a separate file json_demo.dart, and took part of your code. I also added few things:

1. part instruction that will include generated json mapping file
2. For each class added .fromJson named constructor
3. For each class added toJson() method.
4. Added @JsonSerializable() for each class - this is how the tool knows which class to look at
5. Added @JsonKey(name: 'poster_profile_pic') and @JsonKey(name: 'poster_username') - since your filed names are different than Json property names (poster_profile_pic vs posterProfilePic), you need to tell the tool how to rename it back and forth.
6. Made all properties nullable (since I'm using latest version with null-safety)

import 'package:json_annotation/json_annotation.dart';

part 'json_demo.g.dart';

@JsonSerializable()
class VideoComments {
  int? id;
  String? comment;
  int? uid;
  int? likes;
  bool? isLikedByUser;

  @JsonKey(name: 'poster_profile_pic')
  String? posterProfilePic;

  @JsonKey(name: 'poster_username')
  String? posterUsername;
  List<Responses>? responses;

  VideoComments(
      {this.id,
      this.comment,
      this.uid,
      this.likes,
      this.isLikedByUser,
      this.posterProfilePic,
      this.posterUsername,
      this.responses});

  factory VideoComments.fromJson(Map<String, dynamic> json) => _$VideoCommentsFromJson(json);
  Map<String, dynamic> toJson() => _$VideoCommentsToJson(this);
}

@JsonSerializable()
class Responses {
  int? id;
  String? comment;
  int? uid;
  int? likes;
  bool? isLikedByUser;

  Responses({this.id, this.comment, this.uid, this.likes, this.isLikedByUser});

  factory Responses.fromJson(Map<String, dynamic> json) => _$ResponsesFromJson(json);
  Map<String, dynamic> toJson() => _$ResponsesToJson(this);
}

Now, simply run flutter pub run build_runner build, and you get json_demo.g.dart file generated:

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'json_demo.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

VideoComments _$VideoCommentsFromJson(Map<String, dynamic> json) {
  return VideoComments(
    id: json['id'] as int?,
    comment: json['comment'] as String?,
    uid: json['uid'] as int?,
    likes: json['likes'] as int?,
    isLikedByUser: json['isLikedByUser'] as bool?,
    posterProfilePic: json['poster_profile_pic'] as String?,
    posterUsername: json['poster_username'] as String?,
    responses: (json['responses'] as List<dynamic>?)
        ?.map((e) => Responses.fromJson(e as Map<String, dynamic>))
        .toList(),
  );
}

Map<String, dynamic> _$VideoCommentsToJson(VideoComments instance) =>
    <String, dynamic>{
      'id': instance.id,
      'comment': instance.comment,
      'uid': instance.uid,
      'likes': instance.likes,
      'isLikedByUser': instance.isLikedByUser,
      'poster_profile_pic': instance.posterProfilePic,
      'poster_username': instance.posterUsername,
      'responses': instance.responses,
    };

Responses _$ResponsesFromJson(Map<String, dynamic> json) {
  return Responses(
    id: json['id'] as int?,
    comment: json['comment'] as String?,
    uid: json['uid'] as int?,
    likes: json['likes'] as int?,
    isLikedByUser: json['isLikedByUser'] as bool?,
  );
}

Map<String, dynamic> _$ResponsesToJson(Responses instance) => <String, dynamic>{
      'id': instance.id,
      'comment': instance.comment,
      'uid': instance.uid,
      'likes': instance.likes,
      'isLikedByUser': instance.isLikedByUser,
    };

Note how it correctly renamed the json property based on the annotation:

posterProfilePic: json['poster_profile_pic'] as String?,

One more thing to notice - this is how it fixed the problem you had:

responses: (json['responses'] as List<dynamic>?)
        ?.map((e) => Responses.fromJson(e as Map<String, dynamic>))
        .toList(),

From now on, each time you change your class, simple re-run the build script.

As you explore further, you'll see that it can handle enums, it has nice annotations to automatically rename all fields in a class from snake case to kebab case (or whatever it is called). But most importantly - does it in a consistent and tested way. As you add more classes, it will really help you save some time...

And to make your life easier, create user snippet in VS Code (File->Preferences->User snippets):

{
    "Json Serializible": {
        "prefix": "serial",
        "body": [
            "factory ${1}.fromJson(Map<String, dynamic> json) => _$${1}FromJson(json);",
            "Map<String, dynamic> toJson() => _$${1}ToJson(this);"
        ]
    }
}

Here's how to use it:

1. Copy the name of your class
2. start typing 'serial' - this is the shortcut for the code snippet
3. Select the snippet and paste the class name - it will paste it 3 times where needed.

See - simpler than learning how to manually encode/decode Json....