Model classes from JSON in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Correct JSON parsing in Flutter model

Given this JSON string representing a user:

{"id": 1, "name": "Alice", "email": "[e-mail]"}

Which Dart code correctly parses this JSON into a User model?

Flutter

class User {
  final int id;
  final String name;
  final String email;

  User({required this.id, required this.name, required this.email});

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      email: json['email'],
    );
  }
}

A factory User.fromJson(Map<String, dynamic> json) => User(id: json['id'], name: json['name'], email: json['email']);

B User.fromJson(Map<String, dynamic> json) => User(id: json['id'].toString(), name: json['name'], email: json['email']);

C User.fromJson(Map<String, dynamic> json) => User(id: json['id'], name: json['name'], email: json['email'].toInt());

D User.fromJson(Map<String, dynamic> json) => User(id: json['id'], name: json['name'], email: json['email']);

💡 Hint

Check the data types expected by the User constructor and how JSON values are accessed.

Option A correctly maps the JSON fields to the User model fields with matching types. Option A misses the factory keyword. Option A wrongly converts id to string. Option A tries to convert email to int causing error.

❓ ui_behavior

intermediate

Displaying parsed model data in Flutter UI

You have parsed a User model from JSON. Which Flutter widget code correctly displays the user's name and email in a column?

Flutter

final user = User(id: 1, name: "Alice", email: "[e-mail]");

A Row(children: [Text(user.name), Text(user.email)])

B Column(children: [Text(user.name), Text(user.email.toString())])

C Column(children: [Text(user.name), Text(user.email)])

D Column(children: [Text(user.id), Text(user.email)])

💡 Hint

Use a vertical layout and display the correct fields as strings.

Option C uses Column to stack name and email vertically and displays correct string fields. Option C uses Row which lays out horizontally. Option C shows id which is int, causing error in Text widget. Option C unnecessarily calls toString() on email which is already a string.

❓ lifecycle

advanced

When to parse JSON in Flutter widget lifecycle

You receive JSON data asynchronously and want to parse it into a model and display it. Which Flutter widget lifecycle method is best to parse JSON after data is fetched?

A didChangeDependencies()

B initState()

C build()

D dispose()

💡 Hint

Consider when you want to initialize state once before UI builds.

initState() runs once when the widget is inserted in the tree, ideal for starting async fetch and parsing. build() runs many times and should be pure. didChangeDependencies() runs on dependency changes, not ideal here. dispose() is for cleanup.

❓ navigation

advanced

Passing model data between Flutter screens

You have parsed a User model from JSON on Screen A. How do you pass this User object to Screen B when navigating?

A Both B and C are valid ways to pass the model.

B Navigator.pushNamed(context, '/screenB', arguments: user);

C Navigator.push(context, MaterialPageRoute(builder: (_) => ScreenB(user: user)));

D You cannot pass objects between screens in Flutter.

💡 Hint

Flutter supports passing data via constructor or route arguments.

Option A passes the User object directly via constructor. Option A passes it via named route arguments. Both are valid Flutter navigation methods to pass model data. Option A is false.

🔧 Debug

expert

Identify the cause of JSON parsing runtime error

Given this Dart code snippet parsing JSON:

final jsonString = '{"id": "1", "name": "Bob", "email": "[e-mail]"}';
final Map userMap = jsonDecode(jsonString);
final user = User.fromJson(userMap);

The User model expects id as int but JSON has id as string. What error will occur?

A No error, code runs fine

B FormatException: Invalid JSON format

C NullPointerException

D TypeError: String cannot be assigned to int

💡 Hint

Check the type mismatch between JSON field and model field.

The JSON has id as string "1" but User expects int id. This causes a TypeError at runtime when assigning string to int field. FormatException would occur if JSON was malformed. NullPointerException is not typical in Dart.