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.