As you know from handling response section, we have a FlusmicResponse object holding all the results from our query.

The data json object that every result have, can be converted to a custom class with the help of JsonSerializable and the Freezed package.

Include JsonSerializable in your dependencies.

dependencies:
  flusmic: ^2.0.0
  freezed_annotation: <latest-version>
  json_annotation: <latest-version>  

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: <latest-version>
  freezed: <latest-version>
  json_serializable: <latest-version>

NOTE: You can exclude Freezed package and work only with JsonSerializable. Here is included because is one of our favorite ways to handle data and we will continue this custom class structure example using it.

Let's say that in our data object, comes the next objects:

• A Image named image
• A Key Text named single_text
• A GeoPoint named location
• And a number named number

Flusmic includes predifined classes that handle some of these values:

• DocumentReference: A Document without data (like in content relationship).
• EmbedImage: A Image inside a RichText.
• EmbedText: A Text inside a RichText.
• Geopoint: A location, with latitude and logitude.
• Media: An audio, image or any other document in the library.
• SimpleImage: A image.
• SimpleText: A text.
• Slice: A slice an it structure.
• Span: A text with style.
• Weblink: A link to an URL outside Prismic.io.

Now, we can create our Data object, including this Flusmic types:

import 'package:flusmic_ui/flusmic_ui.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'data.freezed.dart';
part 'data.g.dart';

///Data model
@freezed
abstract class Data with _$Data {
  ///Deafult factory constructor for Data
  factory Data({
    @required SimpleImage image,
    @required @JsonKey(name: 'simple_text') String single_text,
    @required Geopoint location,
    @required double number,
  }) = _Data;

  ///Creates a Data object from json
  factory Data.fromJson(Map<String, dynamic> json) =>
      _$DataFromJson(json);
}

Now we only need to run:

pub run build_runner build

or if you are working with Flutter:

flutter pub run build_runner build

And all left you need to do is parsing the data object to your brand new Data class:

FlusmicResponse response = await flusmic.getRootDocument();

final firstResult = response.results.first;
Data data = Data.fromJson(firstResult.data);

RichText data type in Flusmic can include images and text. To handle this, you need to include the field as:

@freezed
abstract class Data with _$Data {
  factory Data({
    @required List<Richable> richTextField // <- Handles RichText fields
  }) = _Data;
}

Links in Flusmic can include media, a document reference or a URL to an extenal website. To handle this, you need to include the field as:

@freezed
abstract class Data with _$Data {
  factory Data({
     @required Linkeable linkField, // <- Handles Link fields
  }) = _Data;
}