Learn JSON Serialization

JSON, which stands for JavaScript Object Notation, is a lightweight data-interchange format used by most web APIs. In Flutter, you often work with remote data in JSON format. Understanding how to parse (deserialize) JSON into Dart objects and serialize Dart objects back to JSON is crucial for communicating with APIs, handling responses, and sending data.

main.dart


              1234567891011121314151617181920212223242526272829
            
import 'dart:convert';

class User {
  final int id;
  final String name;

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

  // Factory constructor to create a User from a JSON map
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
    );
  }
}

void main() {
  // Example JSON data from an API
  String jsonString = '{"id": 1, "name": "Alice"}';

  // Decode JSON string to Map
  Map<String, dynamic> userMap = jsonDecode(jsonString);

  // Create User object from JSON map
  User user = User.fromJson(userMap);

  print('User id: [1m${user.id}[0m, name: [1m${user.name}[0m');
}

You can handle JSON serialization in Flutter either manually or automatically. The previous example uses a factory constructor to map JSON fields to Dart object fields by hand this is manual serialization. Manual serialization gives you full control and is simple for small models, but it can be repetitive and error-prone for larger or more complex data structures. Automated serialization uses code generation tools to reduce boilerplate and mistakes, but it requires setup and sometimes sacrifices flexibility. The factory constructor pattern is a common manual approach for straightforward models.

main.dart


              12345678910111213141516171819202122232425
            
import 'dart:convert';

class User {
  final int id;
  final String name;

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

  // Convert a User object to a JSON map
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
    };
  }
}

void main() {
  User user = User(id: 2, name: 'Bob');

  // Serialize User object to JSON string
  String jsonString = jsonEncode(user.toJson());

  print(jsonString); // Output: {"id":2,"name":"Bob"}
}

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 2

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Swipe to show menu

main.dart


              1234567891011121314151617181920212223242526272829
            
import 'dart:convert';

class User {
  final int id;
  final String name;

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

  // Factory constructor to create a User from a JSON map
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
    );
  }
}

void main() {
  // Example JSON data from an API
  String jsonString = '{"id": 1, "name": "Alice"}';

  // Decode JSON string to Map
  Map<String, dynamic> userMap = jsonDecode(jsonString);

  // Create User object from JSON map
  User user = User.fromJson(userMap);

  print('User id: [1m${user.id}[0m, name: [1m${user.name}[0m');
}

main.dart


              12345678910111213141516171819202122232425
            
import 'dart:convert';

class User {
  final int id;
  final String name;

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

  // Convert a User object to a JSON map
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
    };
  }
}

void main() {
  User user = User(id: 2, name: 'Bob');

  // Serialize User object to JSON string
  String jsonString = jsonEncode(user.toJson());

  print(jsonString); // Output: {"id":2,"name":"Bob"}
}

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 2