JSON parsing (jsonDecode) in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Flutter widget after JSON parsing?

Given this Flutter code snippet that parses JSON and displays a name, what will the Text widget show?

Flutter

import 'dart:convert';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const jsonString = '{"name": "Alice", "age": 30}';
    final Map<String, dynamic> user = jsonDecode(jsonString);
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(user['name']),
        ),
      ),
    );
  }
}

A The app shows: Alice

B The app shows: {name: Alice, age: 30}

C The app shows: null

D The app crashes with a runtime error

💡 Hint

Look at how jsonDecode converts the JSON string into a Dart Map and how the 'name' key is accessed.

jsonDecode converts the JSON string into a Map. Accessing user['name'] returns the string 'Alice', which is displayed by the Text widget.

📝 Syntax

intermediate

Which option correctly parses a JSON string into a Dart Map?

Choose the correct Dart code snippet that parses the JSON string '{"key": "value"}' into a Map.

A final Map data = jsonDecode('{key: "value"}');

B final Map<String, String> data = jsonDecode('{key: value}');

C final data = jsonDecode('{"key": value}');

D final Map<String, dynamic> data = jsonDecode('{"key": "value"}');

💡 Hint

JSON keys and string values must be in double quotes.

Option D uses valid JSON syntax with double quotes around keys and string values, and correctly assigns the result to a Map.

🔧 Debug

advanced

What error does this code raise when parsing invalid JSON?

Consider this Dart code: final jsonString = '{"name": "Bob", age: 25}'; final user = jsonDecode(jsonString); What error will occur?

Flutter

final jsonString = '{"name": "Bob", age: 25}';
final user = jsonDecode(jsonString);

A TypeError: Cannot assign int to String

B No error, user is parsed correctly

C FormatException: Unexpected character at position 16

D NullPointerException at jsonDecode

💡 Hint

Check JSON syntax: keys must be in double quotes.

The JSON string is invalid because the key 'age' is not in double quotes. jsonDecode throws a FormatException indicating unexpected character.

🧠 Conceptual

advanced

What type does jsonDecode return when parsing a JSON array?

If you parse the JSON string '[1, 2, 3]' using jsonDecode in Dart, what is the runtime type of the returned object?

Flutter

final jsonString = '[1, 2, 3]';
final result = jsonDecode(jsonString);

A Map<String, dynamic>

B List<dynamic>

C String

D int

💡 Hint

Think about how JSON arrays map to Dart types.

jsonDecode returns a List when parsing a JSON array, because JSON arrays correspond to Dart lists.

❓ lifecycle

expert

When should you call jsonDecode in a Flutter app to parse API response data?

You fetch JSON data from a web API in a Flutter app. To parse the JSON string into Dart objects, when is the best time to call jsonDecode?

A Immediately after receiving the response string, before updating any UI

B After the app is closed and restarted

C Only when the user taps a button to refresh the UI

D Inside the build() method of a widget

💡 Hint

Consider when you have the raw JSON string and when you need Dart objects.

You should parse the JSON string right after receiving it, so you can update your app state and UI with Dart objects. Parsing inside build() is inefficient and can cause errors.