Morioh
Login
Flutter Dev

Flutter Dev

3 years ago

From JSON to Dart Advanced

From JSON to Dart advanced

Given a JSON string, this library will generate all the necessary Dart classes to parse and generate JSON

This library is designed to generate Flutter friendly model classes following the flutter’s doc recommendation and Effective Dart: Style. Extention supports for both Serializing JSON manually and Serializing JSON using code generation libraries

  • Equal structures are not detected yet (Equal classes are going to be created over and over).
  • Properties named with funky names (like “!breaks”, “|breaks”, etc) or keyword (like “this”, “break”, “class”, etc) will produce syntax errors.

Customise

To customise your classes is very easy. If you want fast create a simple class then just click enter to continue skip all methods. Otherwise build your own. For generate Freezed class and Json Serializable choose Code Generation.

How To Customise

Features

Convert from clipboard to manual model classes
  • Convert json you copied in to dart model classes.
Convert from selection to manual model classes
  • Convert json you selected in to dart model classes.
Convert from clipboard to code generation libraries supported model classes
  • Convert json you copied in to code generarion libraries supported model classes. A terminal session run after convertion to generate rest parts.
Convert from selection to code generation libraries supported model classes
  • Convert json you selected in to code generarion libraries supported model classes. A terminal session run after convertion to generate rest parts.

JSON Serializable

Add serializing JSON using code generation libraries to pubspec.yaml.

structure of the pubspec.yaml

dependencies:
  # Your other regular dependencies here
  json_annotation: <latest_version>

dev_dependencies:
  # Your other dev_dependencies here
  build_runner: <latest_version>
  json_serializable: <latest_version>

Freezed

Freezed requires three packages to generate json files to Freezed classes with a few clicks.

structure of the pubspec.yaml

 dependencies:
   # Your other regular dependencies here
   freezed_annotation: <latest_version>

 dev_dependencies:
   # Your other dev_dependencies here
   build_runner: <latest_version>
   freezed: <latest_version>

Read more about how to install freezed.

All generated classes with Freezed will be @immutable and support all methods like copyWith, toString, equality operator==… See example:

@freezed
abstract class Todos with _$Todos {
	const factory Todos({
	  int userId,
	  int id,
	  String title,
	  bool completed,
	}) = _Todos;

	factory Todos.fromJson(Map<String, dynamic> json) => _$TodosFromJson(json);
}

Freezed generator are useful for who work daily with coding. All you have to do is upgrade some values and Freezed will takecare of the rest. Your don’t need worry about that you have forget update parser to some method. More what you can do withFreezed read freezed documentation.

TIP: If you think that you have too much generated files you can look at tips by Freezed how to ignore lint warnings on generated files.

Equatable

Equatable are immutable class with ability to compare your generated models in a better way. You can check if 2 classes, that are diferent instances, are equals without a single line of extra code. Ofcourse you can add toString method and copyWith for better experience.

class Todos extends Equatable {
  final int userId;
  final int id;
  final String title;
  final bool completed;

  const Todos({
    this.userId,
    this.id,
    this.title,
    this.completed,
  });

  factory Todos.fromJson(Map<String, dynamic> json) {
	 return Todos(
		userId: json['userId'] as int,
		id: json['id'] as int,
		title: json['title'] as String,
		completed: json['completed'] as bool,
	 );
  }

  Map<String, dynamic> toJson() {
	 return {
		 'userId': userId,
		 'id': id,
		 'title': title,
		 'completed': completed,
	 };
  }

  // Here will be more methods after your customization.
  // toString();
  // copyWith();

  @override
  List<Object> get props => [userId, id, title, completed]; 
}

To addEquatable support you just have to select Yes when the process of parsing your JSON to Code has started and the extension will take care of setting up the advanced code equality check in your Dart models

Equality check menu

Equality Operator

If you don’t want install Equatable package and work with @immutable classes and values then you can add equality operator == with less boilerplate syntax. And customize your class as mutable.

@override
bool operator ==(Object o) =>
    o is Todos &&
    identical(o.userId, userId) &&
    identical(o.id, id) &&
    identical(o.title, title) &&
    identical(o.completed, completed);

@override
int get hashCode => hashValues(userId, id, title, completed);

To String method

You can add toString() method in your classes to improve the debugging experience.

@override
String toString() {
  return 'Todos(userId: $userId, id: $id, title: $title, completed: $completed)';
}

CopyWith method

copyWith() method will make your life easier with @immutable classes. Highly recommended with imuttable classes.

Todos copyWith({
  int userId,
  int id,
  String title,
  bool completed,
}) {
  return Todos(
  	userId: userId ?? this.userId,
  	id: id ?? this.id,
  	title: title ?? this.title,
  	completed: completed ?? this.completed,
  );
}

Serializing JSON using code generation libraries

If you’d like to use Code Generation Libraries from Flutter, first of all I suggest you to add dependencies to the pubspec.yaml file. It also can be done with this extension. You don’t need to worry about it 😉. After that you can convert your JSON to model classes. Then you need to run the flutter pub run build_runner build command to generate the missing code of the models, according to Flutter documentation. Fortunately the extension automatically opens a new terminal session and runs that command for you, yey 😄.

How to use

  1. Select a valid json. Press Ctrl + shift + P (linux and mac) or Ctrl + P (Windows) and search for Convert from Selection or Convert from Selection to Code Generation supported classes. Provide a Base class name and location to save.

  2. Copy a valid json. Press Ctrl + shift + P (linux and mac) or Ctrl + P (Windows) and search for Convert from Clipboard or Convert from Clipboard to Code Generation supported classes. Provide a Base class name and location to save.

  3. Press Ctrl + shift + P (linux and mac) or Ctrl + P (Windows) and search for Add Code Generation Libraries to pubspec.yaml and hit enter.

  4. Using short cuts.

Key bindings

Convert from Clipboard (Shift + Ctrl + Alt + V)

Convert from Selection (Shift + Ctrl + Alt + S)

Convert from Clipboard to Code Generation supported classes (Shift + Ctrl + Alt + G)

Convert from Selection to Code Generation supported classes (Shift + Ctrl + Alt + H)

Converter

  • Array type merging
  • Duplicate type prevention
  • Union types
  • Optional types
  • Array types

Known Issues

Command failed: xclip -selection clipboard -o

Solution:

    sudo apt-get install xclip

Happens when linux is missing clipboard packages

Links

Special thanks

❤️ Special thanks to Israel Ibarra for adding equatable support.
❤️ Special thanks to Arnas for suggesting to add Effective Dart: Styles

Contact me

Feel free to contact me anytime 😊

Download Details:

Author: hiranthaR

Demo: https://marketplace.visualstudio.com/items?itemName=hirantha.json-to-dart

Source Code: https://github.com/hiranthaR/Json-to-Dart-Model

#dart #flutter #mobile-apps

From JSON to Dart Advanced
20.55 GEEK