JSON parsing (jsonDecode) in Flutter - Mini App: Build & Ship

Build: User Info Screen

This screen shows user information parsed from a JSON string. It displays the user's name, email, and age.

Target UI

-------------------------
|      User Info        |
|-----------------------|
| Name:                 |
| Email:                |
| Age:                  |
|                       |
| [Refresh Data] Button |
-------------------------

Parse a JSON string containing user data with keys: name, email, age

Display the parsed data in Text widgets labeled Name, Email, and Age

Add a button labeled 'Refresh Data' that reloads and parses the JSON again

Use jsonDecode from dart:convert to parse the JSON string

Starter Code

Flutter

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

class UserInfoScreen extends StatefulWidget {
  @override
  State<UserInfoScreen> createState() => _UserInfoScreenState();
}

class _UserInfoScreenState extends State<UserInfoScreen> {
  String jsonString = '{"name":"Alice","email":"[e-mail]","age":30}';
  Map<String, dynamic>? userData;

  @override
  void initState() {
    super.initState();
    // TODO: Parse JSON string here
  }

  void refreshData() {
    // TODO: Parse JSON string again and update state
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Info')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Name: '),
            Text('Email: '),
            Text('Age: '),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: refreshData,
              child: Text('Refresh Data'),
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

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

class UserInfoScreen extends StatefulWidget {
  @override
  State<UserInfoScreen> createState() => _UserInfoScreenState();
}

class _UserInfoScreenState extends State<UserInfoScreen> {
  String jsonString = '{"name":"Alice","email":"[e-mail]","age":30}';
  Map<String, dynamic>? userData;

  @override
  void initState() {
    super.initState();
    userData = jsonDecode(jsonString);
  }

  void refreshData() {
    setState(() {
      userData = jsonDecode(jsonString);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Info')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Name: ${userData?['name'] ?? ''}'),
            Text('Email: ${userData?['email'] ?? ''}'),
            Text('Age: ${userData?['age']?.toString() ?? ''}'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: refreshData,
              child: Text('Refresh Data'),
            ),
          ],
        ),
      ),
    );
  }
}

We use jsonDecode from dart:convert to convert the JSON string into a Dart map. This map holds the user data. In initState, we parse the JSON once to show initial data. The refreshData method parses the JSON again and updates the state to refresh the UI. The Text widgets display the user data safely using null-aware operators to avoid errors if data is missing.

This simple example shows how to parse JSON and display it in Flutter UI.

Final Result

Completed Screen

-------------------------
|      User Info        |
|-----------------------|
| Name: Alice           |
| Email: [e-mail] |
| Age: 30               |
|                       |
| [Refresh Data] Button |
-------------------------

When the screen loads, user info from JSON is shown.

Tapping 'Refresh Data' re-parses the JSON and updates the displayed info.

Stretch Goal

Add error handling to show a message if JSON parsing fails.

💡 Hint

Use try-catch around jsonDecode and show a Text widget with error message if parsing fails.

Practice

1. What does the jsonDecode function do in Flutter?

easy

A. It converts a JSON string into Dart objects like Map or List.

B. It converts Dart objects into a JSON string.

C. It formats JSON strings for better readability.

D. It sends JSON data to a web server.

Solution

1. Step 1: Understand jsonDecode purpose

   The jsonDecode function takes a JSON formatted string and parses it into Dart objects such as Map or List.

2. Step 2: Differentiate from encoding

   Converting Dart objects back to JSON string is done by jsonEncode, not jsonDecode.

3. Final Answer:

   It converts a JSON string into Dart objects like Map or List. -> Option A

4. Quick Check:

   jsonDecode = JSON string to Dart objects [OK]

Hint: jsonDecode parses JSON text into Dart objects [OK]

Common Mistakes:

• Confusing jsonDecode with jsonEncode
• Thinking jsonDecode formats JSON for display
• Assuming jsonDecode sends data over network

2. Which import is required before using jsonDecode in Flutter?

easy

A. import 'dart:io';

B. import 'dart:convert';

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

D. import 'dart:async';

Solution

1. Step 1: Identify the library for JSON functions

   The jsonDecode function is part of the dart:convert library.

2. Step 2: Confirm correct import statement

   To use jsonDecode, you must import dart:convert with import 'dart:convert';.

3. Final Answer:

   import 'dart:convert'; -> Option B

4. Quick Check:

   dart:convert import needed for jsonDecode [OK]

Hint: Always import dart:convert for jsonDecode [OK]

Common Mistakes:

• Forgetting to import dart:convert
• Importing dart:io instead
• Assuming Flutter imports include jsonDecode

3. What is the output of this Flutter code?

import 'dart:convert';
void main() {
  String jsonString = '{"name":"Anna","age":25}';
  var user = jsonDecode(jsonString);
  print(user['age']);
}

medium

A. Anna

B. SyntaxError

C. 25

D. null

Solution

1. Step 1: Decode JSON string to Map

   The jsonDecode converts the JSON string into a Map with keys 'name' and 'age'.

2. Step 2: Access the 'age' key value

   Accessing user['age'] returns the integer 25.

3. Final Answer:

   25 -> Option C

4. Quick Check:

   jsonDecode output is Map, user['age'] = 25 [OK]

Hint: jsonDecode returns Map; access keys like a dictionary [OK]

Common Mistakes:

• Trying to access JSON string directly without decoding
• Expecting a string instead of integer for 'age'
• Using wrong key name in the Map

4. What is wrong with this Flutter code snippet?

import 'dart:convert';
void main() {
  String jsonString = '{name:"John", age:30}';
  var data = jsonDecode(jsonString);
  print(data['name']);
}

medium

A. print statement syntax is incorrect

B. Missing import for jsonDecode

C. jsonDecode cannot parse strings with numbers

D. JSON string keys must be in double quotes

Solution

1. Step 1: Check JSON string format

   JSON keys and string values must be enclosed in double quotes. Here, keys name and age are not quoted properly.

2. Step 2: Identify parsing error cause

   Because keys lack double quotes, jsonDecode will throw a FormatException.

3. Final Answer:

   JSON string keys must be in double quotes -> Option D

4. Quick Check:

   JSON keys need double quotes for valid parsing [OK]

Hint: JSON keys must be double-quoted strings [OK]

Common Mistakes:

• Using single quotes for JSON keys
• Forgetting quotes around string values
• Assuming jsonDecode accepts invalid JSON

5. Given this JSON string representing a list of users:

String jsonString = '[{"id":1,"name":"Alice"},{"id":2,"name":"Bob"}]';

How do you parse it to get the name of the second user in Flutter?

hard

A. var users = jsonDecode(jsonString); print(users[1]['name']);

B. var users = jsonDecode(jsonString); print(users['1']['name']);

C. var users = jsonDecode(jsonString); print(users[2]['name']);

D. var users = jsonDecode(jsonString); print(users[1].name);

Solution

1. Step 1: Decode JSON string to List of Maps

   The JSON string represents a list with two user objects. jsonDecode converts it to a List of Maps.

2. Step 2: Access second user and their name

   List indices start at 0, so the second user is at index 1. Accessing users[1]['name'] gives 'Bob'.

3. Final Answer:

   var users = jsonDecode(jsonString); print(users[1]['name']); -> Option A

4. Quick Check:

   List index 1, then key 'name' = 'Bob' [OK]

Hint: List index starts at 0; use users[1]['name'] for second item [OK]

Common Mistakes:

• Using string '1' as index instead of integer 1
• Accessing index 2 which is out of range
• Trying to access Map keys with dot notation