Model classes from JSON in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a Dart class named User.

Flutter

class [1] {
  final String name;
  final int age;

  User(this.name, this.age);
}

Drag options to blanks, or click blank then click option'

AModel

BPerson

CData

DUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different class name than the constructor.

The class name must be User to match the constructor and usage.

2fill in blank

medium

Complete the factory constructor to create a User from JSON.

Flutter

factory User.fromJson(Map<String, dynamic> json) {
  return User(
    json['[1]'],
    json['age'],
  );
}

Drag options to blanks, or click blank then click option'

Ausername

Bname

CfullName

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong JSON key that does not exist.

The JSON key for the user's name is name, matching the class field.

3fill in blank

hard

Fix the error in the toJson method to return a Map.

Flutter

Map<String, dynamic> toJson() {
  return {
    'name': name,
    'age': [1],
  };
}

Drag options to blanks, or click blank then click option'

Aage

B'age'

Cage.toString()

Dthis.age()

Attempts:

3 left

💡 Hint

Common Mistakes

Converting int to string unnecessarily.

Using method call syntax on a field.

The age field is an int and should be returned directly, not converted to string or called as a method.

4fill in blank

hard

Fill both blanks to complete the User class with fromJson and toJson methods.

Flutter

class User {
  final String name;
  final int age;

  User(this.name, this.age);

  factory User.[1](Map<String, dynamic> json) {
    return User(json['name'], json['age']);
  }

  Map<String, dynamic> [2]() {
    return {'name': name, 'age': age};
  }
}

Drag options to blanks, or click blank then click option'

AfromJson

BtoJson

CfromMap

DtoMap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fromMap' or 'toMap' instead of 'fromJson' and 'toJson'.

The factory constructor is named fromJson and the method to convert to JSON is toJson.

5fill in blank

hard

Fill all three blanks to create a list of User objects from JSON list.

Flutter

List<User> users = (jsonList as List).map(([1]) => User.[2]([3])).toList();

Drag options to blanks, or click blank then click option'

Aitem

BfromJson

Delement

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names inconsistently.

Using wrong factory constructor name.

The variable name in the map function is item, used twice. The factory constructor is fromJson.

Practice

1. What is the main purpose of a model class when working with JSON in Flutter?

easy

A. To handle user input events

B. To display UI elements on the screen

C. To convert JSON data into Dart objects and back

D. To manage app navigation between screens

Solution

1. Step 1: Understand the role of model classes

   Model classes are designed to represent data structures in Dart that match JSON data.

2. Step 2: Identify the purpose related to JSON

   They convert JSON strings into Dart objects and convert Dart objects back to JSON for easy data handling.

3. Final Answer:

   To convert JSON data into Dart objects and back -> Option C

4. Quick Check:

   Model class = JSON conversion [OK]

Hint: Model classes handle JSON to Dart object conversion [OK]

Common Mistakes:

• Confusing model classes with UI widgets
• Thinking model classes manage navigation
• Assuming model classes handle user input

2. Which of the following is the correct syntax for a factory constructor named fromJson in a Dart model class?

easy

A. factory Model.fromJson(Map json) { return Model(json['id']); }

B. Model.fromJson(Map json) { return Model(json['id']); }

C. factory Model.fromJson(Map json) { Model(json['id']); }

D. Model.fromJson(Map json) => Model(json['id']);

Solution

1. Step 1: Recall factory constructor syntax

   In Dart, a factory constructor uses the keyword 'factory' and returns an instance, often with a return statement.

2. Step 2: Check each option for correct syntax

   factory Model.fromJson(Map json) { return Model(json['id']); } correctly uses 'factory', has the parameter, and returns a new Model instance inside braces.

3. Final Answer:

   factory Model.fromJson(Map json) { return Model(json['id']); } -> Option A

4. Quick Check:

   Factory constructor syntax = factory Model.fromJson(Map json) { return Model(json['id']); } [OK]

Hint: Factory constructors need 'factory' keyword and return statement [OK]

Common Mistakes:

• Omitting the 'factory' keyword
• Not returning an instance
• Using arrow syntax without 'factory'

3. Given this Dart model class snippet, what will print(user.name); output?

class User {
  final String name;
  User(this.name);

  factory User.fromJson(Map json) {
    return User(json['name']);
  }
}

void main() {
  final json = {'name': 'Alice'};
  final user = User.fromJson(json);
  print(user.name);
}

medium

A. null

B. Alice

C. User Instance

D. Error: No such method

Solution

1. Step 1: Understand fromJson factory usage

   The factory constructor takes the JSON map and extracts the 'name' value, passing it to the User constructor.

2. Step 2: Trace the print statement

   The user object has name set to 'Alice', so printing user.name outputs 'Alice'.

3. Final Answer:

   Alice -> Option B

4. Quick Check:

   JSON 'name' value = printed name [OK]

Hint: fromJson sets fields from JSON keys [OK]

Common Mistakes:

• Expecting print to show object instead of field
• Confusing factory constructor with normal constructor
• Assuming null if key missing

4. Identify the error in this Dart model class code for JSON parsing:

class Product {
  final int id;
  final String name;

  Product(this.id, this.name);

  factory Product.fromJson(Map json) {
    return Product(json['id'], json['title']);
  }
}

medium

A. The JSON key 'title' does not match the field 'name'

B. The constructor parameters are in wrong order

C. Missing semicolon after constructor

D. Factory constructor should not return Product instance

Solution

1. Step 1: Compare JSON keys with class fields

   The class has a field 'name' but the factory uses 'json['title']' which does not match.

2. Step 2: Understand impact of key mismatch

   This causes the 'name' field to get null or wrong value, leading to incorrect data mapping.

3. Final Answer:

   The JSON key 'title' does not match the field 'name' -> Option A

4. Quick Check:

   JSON keys must match field names [OK]

Hint: JSON keys must match model field names exactly [OK]

Common Mistakes:

• Using wrong JSON keys
• Ignoring field and parameter order
• Thinking factory can't return instance

5. You have a JSON list of users: [{'id':1,'name':'Bob'},{'id':2,'name':'Eve'}]. How do you convert this list into a Dart list of User objects using a model class with fromJson factory?

hard

A. User.fromJson(jsonList[0])

B. User.fromJson(jsonList)

C. jsonList.forEach((json) => User.fromJson(json))

D. jsonList.map((json) => User.fromJson(json)).toList()

Solution

1. Step 1: Understand JSON list to Dart list conversion

   Each JSON map in the list must be converted to a User object using fromJson.

2. Step 2: Use map and toList for conversion

   Using map applies fromJson to each item, and toList collects results into a Dart list.

3. Final Answer:

   jsonList.map((json) => User.fromJson(json)).toList() -> Option D

4. Quick Check:

   Map each JSON to User, then toList [OK]

Hint: Use map + fromJson + toList to convert JSON list [OK]

Common Mistakes:

• Passing whole list to fromJson expecting batch conversion
• Using forEach without collecting results
• Converting only first item