How To Convert JSON To Dart Code Using QuickType

Tue, Mar 7, 2023

Read in 2 minutes

Converting JSON to Dart code is an important part of working with Dart and Flutter applications. It involves generating Dart classes from JSON data, which can simplify data parsing and manipulation in your application. One way to achieve this is to use the Dart Quicktype library. Here's a step-by-step guide on how to install and use Dart Quicktype to convert JSON to Dart code.

Installing Dart Quicktype

To install Dart Quicktype, you need to have Node.js and npm installed on your system. If you don’t have these already, you can download them from the official websites for Node.js and npm.

Once you have Node.js and npm installed, you can install Dart Quicktype using the following command:

npm install -g quicktype

Converting JSON to Dart code

Here’s an example of how to use Dart Quicktype to convert a JSON string to a Dart class:

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

// Define the Dart class that Quicktype will generate
class User {
  final int id;
  final String name;
  final String email;

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

  // Define the method to convert JSON to a User instance
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      email: json['email'],
    );
  }
}

// Make an API request to retrieve JSON data
Future<User> getUser() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users/1'));
  if (response.statusCode == 200) {
    // Convert the JSON string to a User instance using Quicktype
    final jsonMap = json.decode(response.body);
    final user = User.fromJson(jsonMap);
    return user;
  } else {
    throw Exception('Failed to load user');
  }
}

In this example, the User class is defined with three properties: id, name, and email. The User.fromJson factory method is also defined to convert a JSON map to a User instance. The getUser function uses the http library to make an API request to retrieve JSON data, and then uses json.decode to convert the JSON string to a map. Finally, the User.fromJson factory method is used to create a User instance from the map.

Here’s another example that demonstrates how to use Quicktype to convert a more complex JSON string to a Dart class:

import 'dart:convert';

// Define the Dart classes that Quicktype will generate
class Todo {
  final int id;
  final String title;
  final bool completed;
  final User user;

  Todo({this.id, this.title, this.completed, this.user});

  // Define the method to convert JSON to a Todo instance
  factory Todo.fromJson(Map<String, dynamic> json) {
    return Todo(
      id: json['id'],
      title: json['title'],
      completed: json['completed'],
      user: User.fromJson(json['user']),
    );
  }
}

class User {
  final int id;
  final String name;
  final String email;

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

  // Define the method to convert JSON to a User instance
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      email: json['email'],
    );
  }
}

// Convert a JSON string to a Todo instance using Quicktype
void main() {
  final jsonString = '{"id": 1, "title": "delect

Shohruh AK





See Also

How To Use Dart QuickType
What is "do" in Dart?
What is "deferred" in Dart?
What is "default" in Dart?
What is "covariant" in Dart?