Your Second Flutter App

It’s time for your first coding challenge in the course!

Your challenge is to pause the video, and add some more fields to the Course model class and parse them in the JSON response. In particular, you want to add artworkUrl, difficulty, and contributors fields, all as strings.

As a hint, you want to look at the JSON response from the API endpoint to see what the field names are in the JSON, and use those in the fromJson method in the Course class. All right that’s it - now pause the video, and good luck.

To get started, look at the endpoint in your browser. That way, you’ll know the field names in the JSON itself. In this case, we are looking for the artwork url, the difficulty, and contributors. Okay, now in the model folder, open up course.dart. Add the new fields.

  final String artworkUrl;
  final String difficulty;
  final String contributors;

Now update the constructor that takes in these new fields. Of course, you’ll get a bunch of compile errors, but don’t worry. You’ll fix them in a moment.

  Course(
    this.courseId,
    this.name,
    this.description,
    this.artworkUrl,
    this.difficulty,
    this.contributors,
  );

Now, you need to update the fromJson constructor.

  Course.fromJson(Map<String, dynamic> json)
      : courseId = json['id'] as String,
        name = json['attributes']['name'] as String,
        description = json['attributes']['description_plain_text'] as String,
        artworkUrl = json['attributes']['card_artwork_url'] as String,
        difficulty = json['attributes']['difficulty'] as String,
        contributors = json['attributes']['contributor_string'] as String;

Next add the difficulty in toString just to print it out. Add difficulty in toString.

String toString() {
  return name + ': ' + difficulty;
}

Now build and run or hot reload. This time, we get the name of the course along with the difficulty of the course. Good job.