JSON Parsing in Flutter

# CHAPTER 19

JSON Parsing in Flutter #

1. Introduction #

2. Learning Objectives #

• Identify the visual structure of a JSON payload.

• Decode raw JSON strings into Dart Maps using jsonDecode.

• Construct a Dart Model Class to hold JSON data securely.

• Implement a factory fromJson constructor.

• Safely parse complex nested JSON from a real API.

3. Understanding JSON #

{
  "id": 101,
  "title": "Flutter is awesome!",
  "isPublished": true
}

If the API returns a list of items, it uses square brackets [].

4. Step 1: jsonDecode (The Raw Map) #

import 'dart:convert'; // Required for jsonDecode

String rawJson = '{"title": "Hello Flutter"}';

// Decode the string into a Map!
Map<String, dynamic> parsedMap = jsonDecode(rawJson);

// Now you can access it like a dictionary:
print(parsedMap[&#039;title']); // Output: Hello Flutter

5. The Danger of Raw Maps #

6. Step 2: Creating a Model Class #

class Article {
  final int id;
  final String title;
  final bool isPublished;

  // Standard Constructor
  Article({required this.id, required this.title, required this.isPublished});

  // Factory Constructor: Builds an Article out of a JSON Map
  factory Article.fromJson(Map<String, dynamic> json) {
    return Article(
      // Extract data safely, provide default fallbacks if data is missing!
      id: json[&#039;id'] ?? 0, 
      title: json[&#039;title'] ?? 'No Title',
      isPublished: json[&#039;isPublished'] ?? false,
    );
  }
}

7. Step 3: Putting it all together (The API Call) #

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<Article> fetchArticle() async {
  final url = Uri.parse(&#039;https://example.com/api/article/1');
  final response = await http.get(url);

  if (response.statusCode == 200) {
    // 1. Decode String to Map
    Map<String, dynamic> jsonMap = jsonDecode(response.body);
    
    // 2. Pass Map to Model Class
    Article secureArticle = Article.fromJson(jsonMap);
    
    // 3. Return the safe object!
    return secureArticle; 
  } else {
    throw Exception(&#039;Failed to load article');
  }
}

*In your UI, you can now safely type article.title, and the IDE will autocomplete it for you with zero typo risks!*

8. Visual Learning: The Parsing Pipeline #

[ API ] --> "{\"id\":1, \"name\":\"Bob\"}"  (Raw String)
                     |
                (jsonDecode)
                     v
[ Map ] --> { 'id': 1, 'name': 'Bob' }      (Dynamic Dictionary)
                     |
             (User.fromJson)
                     v
[ Dart Object ] --> User(id: 1, name: "Bob") (Strictly Typed Object!)

9. Common Mistakes #

• Type Mismatches in fromJson: If the API returns "id": "101" (a String) but your Model Class expects final int id;, the fromJson method will instantly crash with a type error. Always verify the data types exactly matching the API documentation!

10. Best Practices #

• Auto-Generation: Writing fromJson methods manually is great for learning, but terrible for a 50-variable e-commerce product model. In the real world, developers use websites like quicktype.io or Flutter packages like json_serializable and freezed to automatically generate Model Classes and parsing logic in seconds.

11. Practice Exercises #

1. 1. What built-in Dart library must you import to gain access to the jsonDecode() function?

1. 2. What specific type of data structure does jsonDecode() convert a JSON string into before it reaches your Model Class?

12. MCQs with Answers #

13. Interview Questions #

• Q: Walk me through the end-to-end pipeline of fetching a JSON payload from a REST API and rendering its properties in the UI safely. Include jsonDecode and Model Classes.

• Q: Explain the purpose of a factory constructor in Dart, specifically regarding its role in the fromJson pattern.

• Q: Explain how you would safely handle a situation inside fromJson where a key might occasionally be entirely missing from the API response (e.g., an optional "nickname" field).

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #