fromJson and toJson in Dart Explained

Learning Sutras

By Champak Roy — Software Trainer & Developer

🧭 Understanding fromJson and toJson in Dart

📘 Introduction

When working with Dart or Flutter, you’ll often need to convert JSON data into Dart objects. For example, turning a student’s data from a JSON string into a Dart class so you can easily use it in your app.

This is where fromJson() and toJson() methods come in handy. Even if you’re not using APIs, you can still practice these methods with hardcoded JSON strings.

🧩 Example 1 — Single Object

Let’s start with this JSON data:


{
  "name": "Champak Roy",
  "age": 22,
  "course": "Flutter"
}

We’ll convert it into a Dart object using fromJson, and then back into JSON using toJson.

✨ Dart Program


import 'dart:convert';

// Step 1: Create a Dart class
class Student {
  String name;
  int age;
  String course;

  // Constructor
  Student({required this.name, required this.age, required this.course});

  // Step 2: Convert JSON Map to Dart object
  factory Student.fromJson(Map json) {
    return Student(
      name: json['name'],
      age: json['age'],
      course: json['course'],
    );
  }

  // Step 3: Convert Dart object back to JSON Map
  Map toJson() {
    return {
      'name': name,
      'age': age,
      'course': course,
    };
  }
}

void main() {
  // Step 4: Hardcoded JSON string
  String jsonString = '{"name": "Champak Roy", "age": 22, "course": "Flutter"}';

  // Step 5: Decode string into a Map
  Map studentMap = jsonDecode(jsonString);

  // Step 6: Create Student object
  Student student = Student.fromJson(studentMap);

  // Step 7: Print object data
  print('Name: ${student.name}');
  print('Age: ${student.age}');
  print('Course: ${student.course}');

  // Step 8: Convert object back to JSON
  String backToJson = jsonEncode(student.toJson());
  print('\\nConverted back to JSON: $backToJson');
}

🧠 Output


Name: Champak Roy 
Age: 22
Course: Flutter

Converted back to JSON: {"name":"Champak Roy","age":22,"course":"Flutter"}

🧩 Example 2 — List of Objects

Now let’s take a JSON string containing multiple students:


[
  {"name": "Champak Roy", "age": 22, "course": "Flutter"},
  {"name": "Anita", "age": 21, "course": "Python"},
  {"name": "Rohit", "age": 23, "course": "Java"}
]

✨ Dart Program for List


import 'dart:convert';

class Student {
  String name;
  int age;
  String course;

  Student({required this.name, required this.age, required this.course});

  factory Student.fromJson(Map json) {
    return Student(
      name: json['name'],
      age: json['age'],
      course: json['course'],
    );
  }

  Map toJson() {
    return {
      'name': name,
      'age': age,
      'course': course,
    };
  }
}

void main() {
  // JSON string representing a list
  String jsonString = '''
  [
    {"name": "Champak Roy", "age": 22, "course": "Flutter"},
    {"name": "Anita", "age": 21, "course": "Python"},
    {"name": "Rohit", "age": 23, "course": "Java"}
  ]
  ''';

  // Decode JSON string → List of Maps
  List studentList = jsonDecode(jsonString);

  // Convert List → List
  List students = studentList.map((item) => Student.fromJson(item)).toList();

  // Print each student's data
  for (var s in students) {
    print('${s.name} is learning ${s.course}');
  }

  // Convert List back to JSON
  String backToJson = jsonEncode(students.map((s) => s.toJson()).toList());
  print('\\nConverted back to JSON: $backToJson');
}

🧠 Output


Champak Roy is learning Flutter
Anita is learning Python
Rohit is learning Java

Converted back to JSON: [{"name":"Champak Roy","age":22,"course":"Flutter"},{"name":"Anita","age":21,"course":"Python"},{"name":"Rohit","age":23,"course":"Java"}]

🎯 Key Takeaways

fromJson() helps you decode JSON → Dart object.
toJson() helps you encode Dart object → JSON.
You can handle both single objects and lists of objects.
No API required — you can practice using hardcoded JSON strings.

💡 Tip

In larger projects, you can use packages like json_serializable to auto-generate these methods. But learning it manually helps you understand what’s going on behind the scenes.

📱 Contact on WhatsApp